<?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="501px" height="220px" viewBox="-0.5 -0.5 501 220" content="&lt;mxfile host=&quot;app.diagrams.net&quot; modified=&quot;2023-01-26T20:55:04.430Z&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;F6d8aCDydfXGICXPy4ny&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="150" y="-50" width="70" height="350" fill="#d5e8d4" stroke="#82b366" stroke-dasharray="1 2" transform="rotate(90,185,125)" pointer-events="all"/><ellipse cx="44.25" cy="125" rx="24.25" ry="24.25" 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: 47px; height: 1px; padding-top: 125px; margin-left: 21px;"><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;">J S</div></div></div></foreignObject><text x="44" y="129" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">J S</text></switch></g><rect x="191" y="-11" width="48" height="270" fill="#e1d5e7" stroke="#9673a6" stroke-dasharray="1 2" transform="rotate(90,215,124)" pointer-events="all"/><rect x="108" y="98.75" width="202" 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: 200px; height: 1px; padding-top: 114px; margin-left: 109px;"><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: 15px; 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 control)</div></div></div></foreignObject><text x="209" y="118" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="15px" text-anchor="middle"> &lt;user name&gt; (Text control)</text></switch></g><rect x="102" y="121.25" width="228" 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: 226px; height: 1px; padding-top: 136px; margin-left: 103px;"><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: 15px; 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 control)</div></div></div></foreignObject><text x="216" y="141" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="15px" text-anchor="middle">&lt;message text&gt; (Text control)</text></switch></g><rect x="0" y="190" 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: 205px; 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>CircleAvatar</b> shows user name initials on a coloured background</div></div></div></foreignObject><text x="2" y="208" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px">CircleAvatar shows user name init...</text></switch></g><path d="M 100 190 L 60.57 144.27" fill="none" stroke="#4d4d4d" stroke-miterlimit="10" pointer-events="stroke"/><ellipse cx="59.91" cy="143.51" rx="1" ry="1" fill="#4d4d4d" stroke="#4d4d4d" pointer-events="all"/><rect x="30" y="0" 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: 15px; margin-left: 32px;"><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> is a <b>Row</b> containing CircleAvatar and Column</div></div></div></foreignObject><text x="32" y="18" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px">ChatMessage is a Row containing C...</text></switch></g><path d="M 130 29 L 176.32 86.21" fill="none" stroke="#4d4d4d" stroke-miterlimit="10" pointer-events="stroke"/><ellipse cx="176.95" cy="86.99" rx="1" ry="1" fill="#4d4d4d" stroke="#4d4d4d" pointer-events="all"/><rect x="300" y="10" 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: 25px; margin-left: 302px;"><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>Column</b> with user name and message <b>Texts</b></div></div></div></foreignObject><text x="302" y="28" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px">Column with user name and message...</text></switch></g><path d="M 363 39 L 215.92 99.62" fill="none" stroke="#4d4d4d" stroke-miterlimit="10" pointer-events="stroke"/><ellipse cx="215" cy="100" 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>
