<?xml version="1.0" encoding="UTF-8"?>
<!-- Do not edit this file with editors other than diagrams.net -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="651px" height="399px" viewBox="-0.5 -0.5 651 399" content="&lt;mxfile host=&quot;app.diagrams.net&quot; modified=&quot;2023-01-26T21:28:58.143Z&quot; agent=&quot;5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36&quot; etag=&quot;aCh4jsO_NVMa0R4we4MR&quot; version=&quot;20.8.5&quot; type=&quot;device&quot; pages=&quot;3&quot;&gt;&lt;diagram id=&quot;eHzWiZZoz9UDGmYaEr1v&quot; name=&quot;Step1&quot;&gt;7VrbcqM4EP0aP24KEBB4HNtx5iVbU5Op3cy+pBQjG00AeUHEdr5+1SBuQjNhEmOvU7GrYql1QTrdOt0tMkGzeHed4k14wwISTSwj2E3QfGJZvmeLvyDYlwLH8kvBOqVBKTIbwS19JlJoSGlOA5J1OnLGIk43XeGSJQlZ8o4MpynbdrutWNR96gavSU9wu8RRX/o3DXhYSj3HaOSfCV2H1ZNNQ7bEuOosBVmIA7ZtidDVBM1SxnhZinczEgF2FS7luMVPWuuFpSThQwbc/JN7z9dk9ueTf519++vr3c3z/R9WOcsTjnK5YblYvq8QSFmeBAQmMSZoug0pJ7cbvITWrVC5kIU8jkTNFMUAZ2HRt6p8wZyTNCkkliE2PV3RKJqxiKXF9GixmM8XYs3TjKfskbRappbrFi1yjSTlZPfTzZs1pMIUCYsJT/eiSzWgUos0Q8uW9W2jVFRpKmwptFYfloa0rudusBYFCfdvQI8ODT1NxQGgDLDOWA67GqKOQ4BrKuC6GnANDbimNxa49hHAVQx55cBXZ8hu8YERLOEtefmpR1T8ciitWIpWLvtasTydVsyxtOK+H5NHCrieBlxXA649FraX7wdbhU6QP5BOnLGw9TTYujgGxJKHDH6+kR1fUCKCizeBrlBKgIm3WgJBPBK+DOUcfX5ZeuRhJVpwRNegjIis+DgkYhsaOzc1ukBj6cLv6eKWJL+C3Rwd9gPgjOyXcdbRyWgwVzrt2nwEZvUgCmsoXEXkCXMSTHPOBU/IZvG4ugesViwNjMj9N4dId8qS+2VEl4+NRDSTJ8BJhPYhhh8cBDAIDlUR70N8L1ouRJAvlBBlPW1z6NlRaVdbCUuIomcpUo4MKJGK6P+TFMc0COAhWgvqHu0B5NixJwgGZL5jHog5bVdhTtfsn1ZdlIv8sczIfNktieP7CTI1UWOiX1ePonFBo65Wq0AJJD/yeCNRdMruslbgzXHKO3XlCNtz+MK4HeV3UjFQ/g7lC0fW5rtW03wvK+VGSNBLIBV1ic2yPF2SAadNrHdN+Evs19d/S7/OLxxjSiLM6VN3vTqdyyd8YbQ4lpV5eV3zMtXcqNynHNVORZWJao9e2anquUscehMVJlhv+w1W2U97S655Z7RiHigIUJyT5cPRUInF1GZ4oxFLP32+wgKE2mtIXwHzgC/BCZQ4ieEnKT1S15spHkbrzCKavT8rGcv5GBrngzQ2Yo1mIwNuAc7V+QilpPu7piNUv7fbmmFFbQynhQY6LfeUTstRbv5M06/I67fdluL/LM86rttydDF5HUVr+ExPY63AW5hjHic1SUrexDQh6QRuy9MeoWZVRJ6F4tRYRkyyDK8JiEPBjqxQbcVk0f6DLYexpe5C+riJtTngdu782fJUXOkM5Er7pFyp3rx5/oV9+UqytJ0Ly+tO5/oXfvtzVPZEA1LRc7khVW6fEdKQx1Fvn9FHRvWWjArZp8+okO6FpBJTNLFDQrb30vX3YxAla2pdjpdxRp6RoA4vRCUtkrJNztVr9XdnP4ciACWotXXv9i6PedGHzi3XqiOGOhIYkmtZnWTLPF4AgYYmW94pA4jaDptXd69NtmwlFrFNpE41dsCgTbe6hPgVciAt6WkTqnbi1GZFDG+wDPV9ihGylD7D8I9EanAiZZ88kUJnnUhZ//t7JzQ0l7o8JRWq906O+VoiVGJFRzXcV9OgqDb/flh2b/6HE139Bw==&lt;/diagram&gt;&lt;diagram name=&quot;Chat app&quot; id=&quot;kwBPQEfdNQ8uvyYEVSaS&quot;&gt;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&lt;/diagram&gt;&lt;diagram id=&quot;SyNKzHLt0IF30nBpMqPe&quot; name=&quot;Page-3&quot;&gt;7VlRc6M2EP41nmkf4gEJMDzG8V2vvUkvU2euzVNHBhl0Ecgj5Njpr78VCDCgXNzUzvVmksxk2F1pEft9+rSQCb7K979IssmuRUL5BDnJfoIXE4Si0IO/2vFYO/wwqB2pZEntcjvHkv1DjdMx3i1LaNkbqITgim36zlgUBY1Vz0ekFLv+sLXg/btuSEpHjmVM+Nj7J0tUVntD3+n8HyhLs+bOrmMiOWkGG0eZkUTsDlz43QRfSSFUfZXvryjXtWvqUs97/0S0XZikhTpmAl+meHFdfth/3KfZ7/wjuv1bXJgsD4RvzQObxarHpgJSbIuE6iTOBM93GVN0uSGxju4AcvBlKudguXCZMAkoMFGAXYqtLsE8IWVWzXeNcUOUorKoPMiBQszXjPMrwYWsbokTn4aJB/5SSXFPDyIhWuEggIhZN5WK7p8siNuWGehJRU6VfIQhZsLMAGOYiQJj7zqccYNzdoBxM48YaqVt5q76cGEA+BdgoBEYv4G5HCECqYD+9Hk0SLmp98Sa7TUCozoTGq5jW52DOKSr9WnqHA7qPHOmM39Uai+c+uNad96TVxv/L6lPXSD/zAZJFMwwORH1XW+EyQiQ1tfH40xoeBY0ApLrGherclM9trE5rGW+LamE8QXJaRtIVTXM+emW7lV9JkAR+c8jXJWO98DrV7sQBR1AY1yEs1SjF0OhYQF4rmFgcFxcmkDOkoQ/tTX7fFrD8syB5/onwjUIB5oW2vaaZt4IWnwuWfOfhraCMqdlqU9hONkr3N7QbNFEfTQjd4osaKLwPGh+pp8+be6+4MXy8+1Wzi7iX+/W1o4hqHBcwUUF2hWTMaeXD0QR2QThXm28aoZ0Z4ac3jZ2WMEUI1wHQEZh8RXsXGwllBk5KxLfp1XVz8ABTtfqvzHgCLEv76mKMwtj0GkYE/RlHVtaGuRYZB1FZ2LLuKUZdzNFcqkbdbAEjOujCMH3jPcxbfpw7fmyzTemhn493FhVtYF/qmcPjlRvoX/1vD1Tf2lYpr6x7gxI+nqxPzQejVE/CE1G7w8DsOBhgcAxfX5PwXJTqp5rEMfgH6Br61cbn6ScKPbQX64NcXOHG8EK1XHLd/rkct1o2JvVD2rmHb6KDFLhaMBTf6BWdSVGiSoKtg/+clbaWr+hhmVEXTcHk1XCWGkUajT3DyCzfY4+wwioXJGC0ZdJh2hZc4Cd27x40ze7vg1449ra1lfVN1vb+sPom/tNfQNI5KOedOFMHQ83nrs6DWod3ezK6k2/oZJBoXVvdWrNxEdq5hOEeh3NdAffGPDw28GxiumiaBrBW1sUYd/3gwD7/bwIT30XJHnmwUZ0vZn3qnpq7fAHemp0zSqLOwZYDJvBWg+7l4NRSv1eUNozvqmnTT3xoD10w+8tn8GPJp/YfYGAtsZdJ8HfUk5Ickbh9I8UTvw9hRMNmk3kDCh4rHAiL5hG0Lq2P33hRAGEB6lfLJZgdp/z6+Hd/0Twu68=&lt;/diagram&gt;&lt;/mxfile&gt;" style="background-color: rgb(255, 255, 255);"><defs/><g><rect x="70" y="80" width="320" height="210" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-dasharray="1 2" pointer-events="all"/><rect x="165" y="5" width="130" height="300" fill="#fff2cc" stroke="#d6b656" stroke-dasharray="1 2" transform="rotate(90,230,155)" pointer-events="all"/><rect x="175" y="15" width="110" height="280" fill="#f5f5f5" stroke="#666666" stroke-width="2" transform="rotate(90,230,155)" pointer-events="all"/><rect x="210" y="0" width="40" height="260" fill="#d5e8d4" stroke="#82b366" stroke-dasharray="1 2" transform="rotate(90,230,130)" pointer-events="all"/><rect x="205" y="95" width="50" height="300" fill="#f8cecc" stroke="#b85450" stroke-dasharray="1 2" transform="rotate(90,230,245)" pointer-events="all"/><rect x="90" y="230" width="240" height="30" fill="#dae8fc" stroke="#6c8ebf" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 238px; height: 1px; padding-top: 245px; margin-left: 92px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: left;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">   TextField</div></div></div></foreignObject><text x="92" y="249" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px">   TextField</text></switch></g><rect x="340" y="230" width="30" height="30" rx="4.5" ry="4.5" fill="#dae8fc" stroke="#6c8ebf" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 28px; height: 1px; padding-top: 245px; margin-left: 341px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">&lt;</div></div></div></foreignObject><text x="355" y="249" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">&lt;</text></switch></g><rect x="370" y="300" width="220" height="39" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 218px; height: 1px; padding-top: 320px; margin-left: 372px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: left;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><b>IconButton</b> has "on_click" event that adds message to chat.controls</div></div></div></foreignObject><text x="372" y="323" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px">IconButton has "on_click" event that...</text></switch></g><path d="M 370 319.5 L 358.22 260.98" fill="none" stroke="#4d4d4d" stroke-miterlimit="10" pointer-events="stroke"/><ellipse cx="358.02" cy="260" rx="1" ry="1" fill="#4d4d4d" stroke="#4d4d4d" pointer-events="all"/><rect x="415" y="241" width="200" height="29" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 198px; height: 1px; padding-top: 256px; margin-left: 417px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: left;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Each Text control is an item in <b>chat.controls</b> list showing "login_message"</div></div></div></foreignObject><text x="417" y="259" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px">Each Text control is an item in c...</text></switch></g><path d="M 415 255.5 L 360.59 180.81" fill="none" stroke="#4d4d4d" stroke-miterlimit="10" pointer-events="stroke"/><ellipse cx="360" cy="180" rx="1" ry="1" fill="#4d4d4d" stroke="#4d4d4d" pointer-events="all"/><rect x="410" y="49" width="210" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 208px; height: 1px; padding-top: 64px; margin-left: 412px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: left;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">"<b>chat</b>" is a <b>ListView</b> control which is recommended to use for scrollable lists of controls</div></div></div></foreignObject><text x="412" y="68" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px">"chat" is a ListView control which...</text></switch></g><path d="M 410 64 L 370.74 99.33" fill="none" stroke="#4d4d4d" stroke-miterlimit="10" pointer-events="stroke"/><ellipse cx="370" cy="100" rx="1" ry="1" fill="#4d4d4d" stroke="#4d4d4d" pointer-events="all"/><rect x="210" y="50" width="40" height="260" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-dasharray="1 2" transform="rotate(90,230,180)" pointer-events="all"/><rect x="110" y="170.5" width="100" height="19" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 98px; height: 1px; padding-top: 180px; margin-left: 112px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: left;"><div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Text</div></div></div></foreignObject><text x="112" y="183" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="11px">Text</text></switch></g><rect x="140" y="359" width="270" height="39" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 268px; height: 1px; padding-top: 379px; margin-left: 142px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: left;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><b>"new_message"</b> TextField is used for user input </div></div></div></foreignObject><text x="142" y="382" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px">"new_message" TextField is used for user inpu...</text></switch></g><path d="M 275 359 L 270.05 261" fill="none" stroke="#4d4d4d" stroke-miterlimit="10" pointer-events="stroke"/><ellipse cx="270" cy="260" rx="1" ry="1" fill="#4d4d4d" stroke="#4d4d4d" pointer-events="all"/><rect x="0" y="329" width="210" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 208px; height: 1px; padding-top: 344px; margin-left: 2px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: left;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><b>Row</b> is a container to show "new_message" TextField and "send" IconButton horizontally</div></div></div></foreignObject><text x="2" y="348" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px">Row is a container to show "new_mes...</text></switch></g><path d="M 98.91 326 L 154.29 270.71" fill="none" stroke="#4d4d4d" stroke-miterlimit="10" pointer-events="stroke"/><ellipse cx="155" cy="270" rx="1" ry="1" fill="#4d4d4d" stroke="#4d4d4d" pointer-events="all"/><rect x="290" y="0" width="160" height="29" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 158px; height: 1px; padding-top: 15px; margin-left: 292px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: left;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><b>Container</b> is used for decoration of "chat" ListView</div></div></div></foreignObject><text x="292" y="18" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px">Container is used for deco...</text></switch></g><path d="M 330 29 L 305.38 89.07" fill="none" stroke="#4d4d4d" stroke-miterlimit="10" pointer-events="stroke"/><ellipse cx="305" cy="90" rx="1" ry="1" fill="#4d4d4d" stroke="#4d4d4d" pointer-events="all"/><rect x="40" y="20" width="230" height="29" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 228px; height: 1px; padding-top: 35px; margin-left: 42px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: left;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Page has 2 controls: <b>Container</b> and <b>Row</b></div></div></div></foreignObject><text x="42" y="38" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px">Page has 2 controls: Container and Row</text></switch></g><path d="M 106.93 47.49 L 149.2 79.4" fill="none" stroke="#4d4d4d" stroke-miterlimit="10" pointer-events="stroke"/><ellipse cx="150" cy="80" rx="1" ry="1" fill="#4d4d4d" stroke="#4d4d4d" pointer-events="all"/><rect x="450" y="140" width="200" height="38" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 198px; height: 1px; padding-top: 159px; margin-left: 452px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: left;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><b>ChatMessage</b> control</div></div></div></foreignObject><text x="452" y="163" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px">ChatMessage control</text></switch></g><path d="M 450 159 L 360.95 130.31" fill="none" stroke="#4d4d4d" stroke-miterlimit="10" pointer-events="stroke"/><ellipse cx="360" cy="130" rx="1" ry="1" fill="#4d4d4d" stroke="#4d4d4d" pointer-events="all"/><ellipse cx="119.5" cy="130" rx="12.5" ry="12.5" fill="#e1d5e7" stroke="#9673a6" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 23px; height: 1px; padding-top: 130px; margin-left: 108px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">JS</div></div></div></foreignObject><text x="120" y="134" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">JS</text></switch></g><rect x="230" y="20" width="36" height="220" fill="#e1d5e7" stroke="#9673a6" stroke-dasharray="1 2" transform="rotate(90,248,130)" pointer-events="all"/><rect x="142" y="109" width="110" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 108px; height: 1px; padding-top: 124px; margin-left: 143px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">&lt;User name&gt; (Text)</div></div></div></foreignObject><text x="197" y="127" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="10px" text-anchor="middle">&lt;User name&gt; (Text)</text></switch></g><rect x="149" y="124" width="110" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 108px; height: 1px; padding-top: 139px; margin-left: 150px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">&lt;message text&gt; (Text)</div></div></div></foreignObject><text x="204" y="142" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="10px" text-anchor="middle">&lt;message text&gt; (Text)</text></switch></g></g><switch><g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/><a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank"><text text-anchor="middle" font-size="10px" x="50%" y="100%">Text is not SVG - cannot display</text></a></switch></svg>
