chat-layout diagram

InesaFitsner · InesaFitsner · commit c4f07ed0285b · 2022-07-28T17:15:00.000-07:00
diff --git a/media/diagrams/chat-tutorial-layout.drawio b/media/diagrams/chat-tutorial-layout.drawio
@@ -0,0 +1 @@
+<mxfile host="Electron" modified="2022-07-29T00:13:39.975Z" agent="5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/19.0.3 Chrome/102.0.5005.63 Electron/19.0.3 Safari/537.36" etag="MkVS0vKysM67YZ6Y09KK" version="19.0.3" type="device"><diagram id="h1AkSt0JVUOTTQjrnA9w" name="Step 1">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</diagram></mxfile>
diff --git a/media/diagrams/chat-tutorial-layout.svg b/media/diagrams/chat-tutorial-layout.svg
@@ -0,0 +1,4 @@
+<?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="801px" height="471px" viewBox="-0.5 -0.5 801 471" content="&lt;mxfile host=&quot;Electron&quot; modified=&quot;2022-07-29T00:14:07.912Z&quot; agent=&quot;5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/19.0.3 Chrome/102.0.5005.63 Electron/19.0.3 Safari/537.36&quot; etag=&quot;yf1noa10CrRDs9MmOFYx&quot; version=&quot;19.0.3&quot; type=&quot;device&quot;&gt;&lt;diagram id=&quot;h1AkSt0JVUOTTQjrnA9w&quot; name=&quot;Step 1&quot;&gt;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&lt;/diagram&gt;&lt;/mxfile&gt;"><defs><clipPath id="mx-clip-444-0-132-30-0"><rect x="444" y="0" width="132" height="30"/></clipPath><clipPath id="mx-clip-664-90-132-30-0"><rect x="664" y="90" width="132" height="30"/></clipPath><clipPath id="mx-clip-684-290-72-30-0"><rect x="684" y="290" width="72" height="30"/></clipPath><clipPath id="mx-clip-644-440-72-30-0"><rect x="644" y="440" width="72" height="30"/></clipPath><clipPath id="mx-clip-4-140-82-30-0"><rect x="4" y="140" width="82" height="30"/></clipPath><clipPath id="mx-clip-24-300-72-30-0"><rect x="24" y="300" width="72" height="30"/></clipPath><clipPath id="mx-clip-674-190-72-30-0"><rect x="674" y="190" width="72" height="30"/></clipPath></defs><g><rect x="110" y="70" width="520" height="360" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/><rect x="120" y="0" width="60" 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: 58px; height: 1px; padding-top: 15px; margin-left: 121px;"><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;">Page</div></div></div></foreignObject><text x="150" y="19" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">Page</text></switch></g><rect x="120" y="80" width="500" height="250" fill="#f5f5f5" stroke="#666666" stroke-dasharray="3 3" pointer-events="all"/><path d="M 150 30 L 196.01 66.41" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 200.12 69.67 L 192.46 68.07 L 196.01 66.41 L 196.81 62.58 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><rect x="440" y="0" width="140" height="30" fill="none" stroke="none" pointer-events="all"/><g fill="rgb(0, 0, 0)" font-family="Helvetica" clip-path="url(#mx-clip-444-0-132-30-0)" font-size="12px"><text x="445.5" y="19.5">Container, expand=True</text></g><path d="M 514.06 30 L 492.76 74.26" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 490.48 78.99 L 490.37 71.17 L 492.76 74.26 L 496.67 74.2 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><rect x="130" y="90" width="480" height="230" fill="#fff2cc" stroke="#d6b656" stroke-dasharray="3 3" pointer-events="all"/><rect x="660" y="90" width="140" height="30" fill="none" stroke="none" pointer-events="all"/><g fill="rgb(0, 0, 0)" font-family="Helvetica" clip-path="url(#mx-clip-664-90-132-30-0)" font-size="12px"><text x="665.5" y="109.5">Listview, Expand=True</text></g><path d="M 730.98 120.51 L 616.2 147.37" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 611.09 148.57 L 617.11 143.57 L 616.2 147.37 L 618.7 150.38 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><rect x="120" y="340" width="500" height="60" fill="#f5f5f5" stroke="#666666" stroke-dasharray="3 3" pointer-events="all"/><path d="M 696.92 320 L 625.34 366.53" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 620.94 369.39 L 624.9 362.64 L 625.34 366.53 L 628.71 368.51 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><rect x="680" y="290" width="80" height="30" fill="none" stroke="none" pointer-events="all"/><g fill="rgb(0, 0, 0)" font-family="Helvetica" clip-path="url(#mx-clip-684-290-72-30-0)" font-size="12px"><text x="685.5" y="309.5">Row</text></g><ellipse cx="590" cy="370" rx="20" ry="20" fill="#d5e8d4" stroke="#82b366" pointer-events="all"/><path d="M 685.04 439.01 L 609.41 387.72" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 605.07 384.77 L 612.83 385.8 L 609.41 387.72 L 608.9 391.6 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><rect x="640" y="440" width="80" height="30" fill="none" stroke="none" pointer-events="all"/><g fill="rgb(0, 0, 0)" font-family="Helvetica" clip-path="url(#mx-clip-644-440-72-30-0)" font-size="12px"><text x="645.5" y="459.5">IconButton</text></g><rect x="130" y="350" width="430" height="40" 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: 428px; height: 1px; padding-top: 370px; margin-left: 131px;"><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;">TextField, Expand=True</div></div></div></foreignObject><text x="345" y="374" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">TextField, Expand=True</text></switch></g><rect x="140" y="100" width="460" height="90" fill="#f5f5f5" stroke="#666666" stroke-dasharray="3 3" pointer-events="all"/><rect x="0" y="140" width="90" height="30" fill="none" stroke="none" pointer-events="all"/><g fill="rgb(0, 0, 0)" font-family="Helvetica" clip-path="url(#mx-clip-4-140-82-30-0)" font-size="12px"><text x="5.5" y="159.5">ChatMessage</text></g><path d="M 90 155 L 134.66 125.97" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 139.06 123.11 L 135.1 129.86 L 134.66 125.97 L 131.29 123.99 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><path d="M 90 155 L 136.25 218.37" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 139.34 222.61 L 132.39 219.02 L 136.25 218.37 L 138.04 214.89 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><ellipse cx="181.25" cy="144" rx="31.25" ry="31.25" fill="#f8cecc" stroke="#b85450" pointer-events="all"/><rect x="20" y="300" width="80" height="30" fill="none" stroke="none" pointer-events="all"/><g fill="rgb(0, 0, 0)" font-family="Helvetica" clip-path="url(#mx-clip-24-300-72-30-0)" font-size="12px"><text x="25.5" y="319.5">CircleAvatar</text></g><rect x="220" y="108" width="370" height="72" fill="#e3e3e3" stroke="#666666" stroke-dasharray="3 3" pointer-events="all"/><rect x="240" y="115" width="340" height="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 flex-start; width: 338px; height: 1px; padding-top: 128px; margin-left: 242px;"><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;">User (Text)</div></div></div></foreignObject><text x="242" y="131" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px">User (Text)</text></switch></g><rect x="240" y="150" width="340" height="22.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 flex-start; width: 338px; height: 1px; padding-top: 161px; margin-left: 242px;"><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;">Messsage (Text)</div></div></div></foreignObject><text x="242" y="165" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px">Messsage (Text)</text></switch></g><rect x="140" y="200" width="460" height="90" fill="#f5f5f5" stroke="#666666" stroke-dasharray="3 3" pointer-events="all"/><ellipse cx="181.25" cy="244" rx="31.25" ry="31.25" fill="#f8cecc" stroke="#b85450" pointer-events="all"/><rect x="220" y="208" width="370" height="72" fill="#e3e3e3" stroke="#666666" stroke-dasharray="3 3" pointer-events="all"/><rect x="240" y="215" width="340" height="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 flex-start; width: 338px; height: 1px; padding-top: 228px; margin-left: 242px;"><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;">User (Text)</div></div></div></foreignObject><text x="242" y="231" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px">User (Text)</text></switch></g><rect x="240" y="250" width="340" height="22.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 flex-start; width: 338px; height: 1px; padding-top: 261px; margin-left: 242px;"><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;">Message (Text)</div></div></div></foreignObject><text x="242" y="265" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px">Message (Text)</text></switch></g><path d="M 100 315 L 152.95 268.79" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 156.91 265.33 L 153.94 272.57 L 152.95 268.79 L 149.33 267.3 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><rect x="670" y="190" width="80" height="30" fill="none" stroke="none" pointer-events="all"/><g fill="rgb(0, 0, 0)" font-family="Helvetica" clip-path="url(#mx-clip-674-190-72-30-0)" font-size="12px"><text x="675.5" y="209.5">Column</text></g><path d="M 670 205 L 595.72 241.21" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 591 243.51 L 595.76 237.3 L 595.72 241.21 L 598.83 243.59 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><path d="M 670 205 L 595.06 147.86" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 590.89 144.68 L 598.58 146.14 L 595.06 147.86 L 594.33 151.71 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><path d="M 100 315 L 178.05 180.76" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 180.69 176.22 L 180.2 184.03 L 178.05 180.76 L 174.14 180.51 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" 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>

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	+<mxfile host="Electron" modified="2022-07-29T00:13:39.975Z" agent="5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/19.0.3 Chrome/102.0.5005.63 Electron/19.0.3 Safari/537.36" etag="MkVS0vKysM67YZ6Y09KK" version="19.0.3" type="device"><diagram id="h1AkSt0JVUOTTQjrnA9w" name="Step 1">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</diagram></mxfile>