<?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="591px" height="276px" viewBox="-0.5 -0.5 591 276" content="&lt;mxfile host=&quot;app.diagrams.net&quot; modified=&quot;2023-01-24T20:35:47.494Z&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;KfuOK3RijpUyZfbXQs8Q&quot; version=&quot;20.8.5&quot; type=&quot;device&quot; pages=&quot;2&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;/mxfile&gt;"><defs/><g><rect x="0" y="6" width="320" height="220" fill="#ffddff" stroke="#b266ff" stroke-dasharray="1 2" pointer-events="all"/><rect x="70" y="-34" width="180" height="300" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-dasharray="1 2" transform="rotate(90,160,116)" pointer-events="all"/><rect x="105" y="-49" width="110" height="280" fill="#f5f5f5" stroke="#666666" stroke-width="2" transform="rotate(90,160,91)" pointer-events="all"/><rect x="140" y="-64" width="40" height="260" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-dasharray="1 2" transform="rotate(90,160,66)" pointer-events="all"/><rect x="135" y="31" width="50" height="300" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-dasharray="1 2" transform="rotate(90,160,181)" pointer-events="all"/><rect x="20" y="166" width="210" 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: 208px; height: 1px; padding-top: 181px; margin-left: 22px;"><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="22" y="185" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px"> TextField</text></switch></g><rect x="240" y="166" width="60" 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: 58px; height: 1px; padding-top: 181px; margin-left: 241px;"><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;">Send</div></div></div></foreignObject><text x="270" y="185" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">Send</text></switch></g><rect x="360" y="127" 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: 147px; margin-left: 362px;"><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>ElevatedButton</b> has "on_click" event that adds Text to chat.controls</div></div></div></foreignObject><text x="362" y="150" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px">ElevatedButton has "on_click" event...</text></switch></g><path d="M 360 146.5 L 300.93 169.14" fill="none" stroke="#4d4d4d" stroke-miterlimit="10" pointer-events="stroke"/><ellipse cx="300" cy="169.5" rx="1" ry="1" fill="#4d4d4d" stroke="#4d4d4d" pointer-events="all"/><rect x="40" y="56.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: 66px; 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: 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="42" y="69" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="11px">Text</text></switch></g><rect x="360" y="67" 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: 82px; margin-left: 362px;"><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</div></div></div></foreignObject><text x="362" y="85" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px">Each Text control is an item in chat.c...</text></switch></g><path d="M 360 81.5 L 290.98 66.22" fill="none" stroke="#4d4d4d" stroke-miterlimit="10" pointer-events="stroke"/><ellipse cx="290" cy="66" rx="1" ry="1" fill="#4d4d4d" stroke="#4d4d4d" pointer-events="all"/><rect x="360" y="6" 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: 21px; margin-left: 362px;"><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>" Column is a container for Text controls to show messages history vertically</div></div></div></foreignObject><text x="362" y="25" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px">"chat" Column is a container for Te...</text></switch></g><path d="M 360 21 L 300.97 35.76" fill="none" stroke="#4d4d4d" stroke-miterlimit="10" pointer-events="stroke"/><ellipse cx="300" cy="36" rx="1" ry="1" fill="#4d4d4d" stroke="#4d4d4d" pointer-events="all"/><rect x="140" y="-14" width="40" height="260" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-dasharray="1 2" transform="rotate(90,160,116)" pointer-events="all"/><rect x="40" y="106.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: 116px; 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: 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="42" y="119" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="11px">Text</text></switch></g><rect x="0" y="236" 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: 256px; 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>"new_message"</b> TextField is used for user input </div></div></div></foreignObject><text x="2" y="259" 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 135 236 L 73.34 196.54" fill="none" stroke="#4d4d4d" stroke-miterlimit="10" pointer-events="stroke"/><ellipse cx="72.5" cy="196" rx="1" ry="1" fill="#4d4d4d" stroke="#4d4d4d" pointer-events="all"/><rect x="360" y="206" 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: 221px; margin-left: 362px;"><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 TextField and ElevatedButton horizontally</div></div></div></foreignObject><text x="362" y="225" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px">Row is a container to show TextFiel...</text></switch></g><path d="M 360 213.5 L 310.84 181.54" fill="none" stroke="#4d4d4d" stroke-miterlimit="10" pointer-events="stroke"/><ellipse cx="310" cy="181" rx="1" ry="1" fill="#4d4d4d" stroke="#4d4d4d" pointer-events="all"/></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>
