@rio-cloud/uikit-mcp 1.0.0

package/data/pages/Components/components/chat.json

@@ -0,0 +1,39 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:01.074Z",
+    "source": "https://uikit.developers.rio.cloud/#components/chat",
+    "category": "Components",
+    "section": "CSS Only",
+    "slug": "components/chat",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "3f9a47c7553c622bb4c1583b81ef8cdc2c0bf7ea58cb74cea4972ad59b684e6b"
+  },
+  "title": "Chat",
+  "lead": "The chat component is a pure CSS component.",
+  "content": [
+    {
+      "heading": "Chat",
+      "body": "",
+      "examples": [
+        {
+          "caption": "10:01",
+          "rendered_html": "<div class=\"playground-content padding-right-5 bg-white container-query-mobile\" style=\"width: 480px;\"><div class=\"display-flex flex-column height-600 position-relative padding-right-5 overflow-hidden\"><div class=\"scrollbar-fly-in smooth-scrollbar-wrapper\" style=\"position: relative; overflow: hidden; width: 100%; height: 100%;\"><div class=\"scrollbar-view\" style=\"position: absolute; inset: 0px; overflow: scroll; margin-right: 0px; margin-bottom: 0px;\"><div class=\"scrollbar-content-wrapper\"><div class=\"flex-1-1 overflow-y-auto user-select-none\"><div class=\"display-flex flex-column gap-10 padding-25\"><div class=\"display-grid gap-10\"><div class=\"width-90pct display-grid  justify-self-end\"><div class=\"position-relative display-flex flex-column max-width-70pct justify-self-end\"><div class=\"bg-highlight-lightest rounded padding-y-10 padding-x-15 display-flex flex-column word-break-all align-items-end\"><div class=\"text-color-darker line-height-125-rel\">Hi! I'd like to get an ice cream, but I don't really like many flavors.</div><div class=\"text-size-11 margin-top-10 display-flex align-items-end gap-2 text-color-dark justify-content-end\"><div class=\"display-flex gap-10 align-items-center flex-order-1\"><div>10:01</div><span class=\"scale-90 display-flex gap-2 align-items-center\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"8\"><path fill=\"#55b1be\" fill-rule=\"nonzero\" d=\"M10.17 0 3.696 6.445.73 4.082 0 4.99l3.377 2.69.411.319 6.792-6.764.42-.409z\"></path></svg><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"8\"><path fill=\"#55b1be\" fill-rule=\"nonzero\" d=\"M10.17 0 3.696 6.445.73 4.082 0 4.99l3.377 2.69.411.319 6.792-6.764.42-.409z\"></path></svg></span></div></div></div></div></div><div class=\"width-90pct display-grid margin-top-25 justify-self-start\"><div class=\"text-color-darkest text-size-14 text-medium display-flex\"><div class=\"margin-bottom-5 display-flex gap-5\"><span class=\"padding-top-3 rioglyph rioglyph-user\"></span>Ice cream vendor</div></div><div class=\"position-relative display-flex flex-column max-width-70pct justify-self-start\"><div class=\"bg-lightest rounded padding-y-10 padding-x-15 display-flex flex-column word-break-all align-items-start\"><div class=\"text-color-darker line-height-125-rel\">No worries! We have some simple flavors. What do you usually enjoy?</div><div class=\"text-size-11 margin-top-10 display-flex align-items-end gap-2 text-color-dark justify-content-end\"><div class=\"display-flex gap-10 align-items-center flex-order-2\"><div>10:02</div><div class=\"text-color-primary hover-text-color-highlight-darker text-size-11 cursor-pointer display-flex align-items-center gap-2\"><span class=\"rioglyph rioglyph-language margin-top--2\"></span><span>Translate</span></div></div></div></div></div></div><div class=\"width-90pct display-grid margin-top-25 justify-self-end\"><div class=\"position-relative display-flex flex-column max-width-70pct justify-self-end\"><div class=\"bg-highlight-lightest rounded padding-y-10 padding-x-15 display-flex flex-column word-break-all align-items-end\"><div class=\"text-color-darker line-height-125-rel\">I’m not a fan of chocolate, strawberry, or anything with nuts.</div><div class=\"text-size-11 margin-top-10 display-flex align-items-end gap-2 text-color-dark justify-content-end\"><div class=\"display-flex gap-10 align-items-center flex-order-1\"><div>10:03</div><span class=\"scale-90 display-flex gap-2 align-items-center\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"8\"><path fill=\"#55b1be\" fill-rule=\"nonzero\" d=\"M10.17 0 3.696 6.445.73 4.082 0 4.99l3.377 2.69.411.319 6.792-6.764.42-.409z\"></path></svg><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"8\"><path fill=\"#55b1be\" fill-rule=\"nonzero\" d=\"M10.17 0 3.696 6.445.73 4.082 0 4.99l3.377 2.69.411.319 6.792-6.764.42-.409z\"></path></svg></span></div></div></div></div></div><div class=\"width-90pct display-grid margin-top-25 justify-self-start\"><div class=\"text-color-darkest text-size-14 text-medium display-flex\"><div class=\"margin-bottom-5 display-flex gap-5\"><span class=\"padding-top-3 rioglyph rioglyph-user\"></span>Ice cream vendor</div></div><div class=\"position-relative display-flex flex-column max-width-70pct justify-self-start\"><div class=\"bg-lightest rounded padding-y-10 padding-x-15 display-flex flex-column word-break-all align-items-start\"><div class=\"text-color-darker line-height-125-rel\">Got it. How about vanilla? It’s classic and not too overwhelming.</div><div class=\"text-size-11 margin-top-10 display-flex align-items-end gap-2 text-color-dark justify-content-end\"><div class=\"display-flex gap-10 align-items-center flex-order-2\"><div>10:04</div><div class=\"text-color-primary hover-text-color-highlight-darker text-size-11 cursor-pointer display-flex align-items-center gap-2\"><span class=\"rioglyph rioglyph-language margin-top--2\"></span><span>Translate</span></div></div></div></div></div></div><div class=\"width-90pct display-grid margin-top-25 justify-self-end\"><div class=\"position-relative display-flex flex-column max-width-70pct justify-self-end\"><div class=\"bg-highlight-lightest rounded padding-y-10 padding-x-15 display-flex flex-column word-break-all align-items-end\"><div class=\"text-color-darker line-height-125-rel\">Yeah, vanilla works for me. Do you have anything else that’s mild?</div><div class=\"text-size-11 margin-top-10 display-flex align-items-end gap-2 text-color-dark justify-content-end\"><div class=\"display-flex gap-10 align-items-center flex-order-1\"><div>10:05</div><span class=\"scale-90 display-flex gap-2 align-items-center\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"8\"><path fill=\"#55b1be\" fill-rule=\"nonzero\" d=\"M10.17 0 3.696 6.445.73 4.082 0 4.99l3.377 2.69.411.319 6.792-6.764.42-.409z\"></path></svg><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"8\"><path fill=\"#55b1be\" fill-rule=\"nonzero\" d=\"M10.17 0 3.696 6.445.73 4.082 0 4.99l3.377 2.69.411.319 6.792-6.764.42-.409z\"></path></svg></span></div></div></div></div></div><div class=\"width-90pct display-grid margin-top-25 justify-self-start\"><div class=\"text-color-darkest text-size-14 text-medium display-flex\"><div class=\"margin-bottom-5 display-flex gap-5\"><span class=\"padding-top-3 rioglyph rioglyph-user\"></span>Ice cream vendor</div></div><div class=\"position-relative display-flex flex-column max-width-70pct justify-self-start\"><div class=\"bg-lightest rounded padding-y-10 padding-x-15 display-flex flex-column word-break-all align-items-start\"><div class=\"text-color-darker line-height-125-rel\">We have a nice plain mango sorbet and a simple caramel ice cream as well.</div><div class=\"text-size-11 margin-top-10 display-flex align-items-end gap-2 text-color-dark justify-content-end\"><div class=\"display-flex gap-10 align-items-center flex-order-2\"><div>10:06</div><div class=\"text-color-primary hover-text-color-highlight-darker text-size-11 cursor-pointer display-flex align-items-center gap-2\"><span class=\"rioglyph rioglyph-language margin-top--2\"></span><span>Translate</span></div></div></div></div></div></div><div class=\"width-90pct display-grid  justify-self-start\"><div class=\"position-relative display-flex flex-column max-width-70pct justify-self-start\"><div class=\"bg-lightest rounded padding-y-10 padding-x-15 display-flex flex-column word-break-all align-items-start\"><div class=\"text-color-darker line-height-125-rel\">The mango is refreshing, while caramel is a bit richer but still simple.</div><div class=\"text-size-11 margin-top-10 display-flex align-items-end gap-2 text-color-dark justify-content-end\"><div class=\"display-flex gap-10 align-items-center flex-order-2\"><div>10:07</div><div class=\"text-color-primary hover-text-color-highlight-darker text-size-11 cursor-pointer display-flex align-items-center gap-2\"><span class=\"rioglyph rioglyph-language margin-top--2\"></span><span>Translate</span></div></div></div></div></div></div><div class=\"width-90pct display-grid margin-top-25 justify-self-end\"><div class=\"position-relative display-flex flex-column max-width-70pct justify-self-end\"><div class=\"bg-highlight-lightest rounded padding-y-10 padding-x-15 display-flex flex-column word-break-all align-items-end\"><div class=\"text-color-darker line-height-125-rel\">I’ll take a scoop of vanilla and mango sorbet, please.</div><div class=\"text-size-11 margin-top-10 display-flex align-items-end gap-2 text-color-dark justify-content-end\"><div class=\"display-flex gap-10 align-items-center flex-order-1\"><div>10:08</div><span class=\"scale-90 display-flex gap-2 align-items-center\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"8\"><path fill=\"#55b1be\" fill-rule=\"nonzero\" d=\"M10.17 0 3.696 6.445.73 4.082 0 4.99l3.377 2.69.411.319 6.792-6.764.42-.409z\"></path></svg><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"8\"><path fill=\"#55b1be\" fill-rule=\"nonzero\" d=\"M10.17 0 3.696 6.445.73 4.082 0 4.99l3.377 2.69.411.319 6.792-6.764.42-.409z\"></path></svg></span></div></div></div></div></div><div class=\"width-90pct display-grid margin-top-25 justify-self-start\"><div class=\"text-color-darkest text-size-14 text-medium display-flex\"><div class=\"margin-bottom-5 display-flex gap-5\"><span class=\"padding-top-3 rioglyph rioglyph-user\"></span>Ice cream vendor</div></div><div class=\"position-relative display-flex flex-column max-width-70pct justify-self-start\"><div class=\"bg-lightest rounded padding-y-10 padding-x-15 display-flex flex-column word-break-all align-items-start\"><div class=\"text-color-darker line-height-125-rel\">Great choice! That’ll be ready in a moment.</div><div class=\"text-size-11 margin-top-10 display-flex align-items-end gap-2 text-color-dark justify-content-end\"><div class=\"display-flex gap-10 align-items-center flex-order-2\"><div>10:09</div><div class=\"text-color-primary hover-text-color-highlight-darker text-size-11 cursor-pointer display-flex align-items-center gap-2\"><span class=\"rioglyph rioglyph-language margin-top--2\"></span><span>Translate</span></div></div></div></div></div></div></div><div class=\"Divider position-relative width-100pct\" style=\"padding-top: 15px; padding-bottom: 15px;\"><div class=\"divider-title display-flex align-items-center\"><div class=\"flex-1-0\"><div class=\"divider-line bg-light\" style=\"width: 100%; height: 1px;\"></div></div><div class=\"\"><div class=\"tag tag-small\">Today</div></div><div class=\"flex-1-0\"><div class=\"divider-line bg-light\" style=\"width: 100%; height: 1px;\"></div></div></div></div><div class=\"display-grid gap-10\"><div class=\"width-90pct display-grid  justify-self-end\"><div class=\"position-relative display-flex flex-column max-width-70pct justify-self-end\"><div class=\"bg-highlight-lightest rounded padding-y-10 padding-x-15 display-flex flex-column word-break-all align-items-end\"><div class=\"text-color-darker line-height-125-rel\">Hey, yesterday's vanilla was great! I'd love to try something different today.</div><div class=\"text-size-11 margin-top-10 display-flex align-items-end gap-2 text-color-dark justify-content-end\"><div class=\"display-flex gap-10 align-items-center flex-order-1\"><div>10:01</div><span class=\"scale-90 display-flex gap-2 align-items-center\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"8\"><path fill=\"#55b1be\" fill-rule=\"nonzero\" d=\"M10.17 0 3.696 6.445.73 4.082 0 4.99l3.377 2.69.411.319 6.792-6.764.42-.409z\"></path></svg><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"8\"><path fill=\"#55b1be\" fill-rule=\"nonzero\" d=\"M10.17 0 3.696 6.445.73 4.082 0 4.99l3.377 2.69.411.319 6.792-6.764.42-.409z\"></path></svg></span></div></div></div></div></div><div class=\"width-90pct display-grid margin-top-25 justify-self-start\"><div class=\"text-color-darkest text-size-14 text-medium display-flex\"><div class=\"margin-bottom-5 display-flex gap-5\"><span class=\"padding-top-3 rioglyph rioglyph-user\"></span>Ice cream vendor</div></div><div class=\"position-relative display-flex flex-column max-width-70pct justify-self-start\"><div class=\"bg-lightest rounded padding-y-10 padding-x-15 display-flex flex-column word-break-all align-items-start\"><div class=\"text-color-darker line-height-125-rel\">Glad to hear it! We’ve got some new flavors in. What are you in the mood for?</div><div class=\"text-size-11 margin-top-10 display-flex align-items-end gap-2 text-color-dark justify-content-end\"><div class=\"display-flex gap-10 align-items-center flex-order-2\"><div>10:02</div><div class=\"text-color-primary hover-text-color-highlight-darker text-size-11 cursor-pointer display-flex align-items-center gap-2\"><span class=\"rioglyph rioglyph-language margin-top--2\"></span><span>Translate</span></div></div></div></div></div></div><div class=\"width-90pct display-grid margin-top-25 justify-self-end\"><div class=\"position-relative display-flex flex-column max-width-70pct justify-self-end\"><div class=\"bg-highlight-lightest rounded padding-y-10 padding-x-15 display-flex flex-column word-break-all align-items-end\"><div class=\"text-color-darker line-height-125-rel\">Maybe something fruity. What do you recommend?</div><div class=\"text-size-11 margin-top-10 display-flex align-items-end gap-2 text-color-dark justify-content-end\"><div class=\"display-flex gap-10 align-items-center flex-order-1\"><div>10:03</div><span class=\"scale-90 display-flex gap-2 align-items-center\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"8\"><path fill=\"#55b1be\" fill-rule=\"nonzero\" d=\"M10.17 0 3.696 6.445.73 4.082 0 4.99l3.377 2.69.411.319 6.792-6.764.42-.409z\"></path></svg><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"8\"><path fill=\"#55b1be\" fill-rule=\"nonzero\" d=\"M10.17 0 3.696 6.445.73 4.082 0 4.99l3.377 2.69.411.319 6.792-6.764.42-.409z\"></path></svg></span></div></div></div></div></div><div class=\"width-90pct display-grid margin-top-25 justify-self-start\"><div class=\"text-color-darkest text-size-14 text-medium display-flex\"><div class=\"margin-bottom-5 display-flex gap-5\"><span class=\"padding-top-3 rioglyph rioglyph-user\"></span>Ice cream vendor</div></div><div class=\"position-relative display-flex flex-column max-width-70pct justify-self-start\"><div class=\"bg-lightest rounded padding-y-10 padding-x-15 display-flex flex-column word-break-all align-items-start\"><div class=\"text-color-darker line-height-125-rel\">Our mango sorbet is a solid choice. Or if you want something lighter, we have a lemon sorbet.</div><div class=\"text-size-11 margin-top-10 display-flex align-items-end gap-2 text-color-dark justify-content-end\"><div class=\"display-flex gap-10 align-items-center flex-order-2\"><div>10:04</div><div class=\"text-color-primary hover-text-color-highlight-darker text-size-11 cursor-pointer display-flex align-items-center gap-2\"><span class=\"rioglyph rioglyph-language margin-top--2\"></span><span>Translate</span></div></div><div class=\"position-absolute width-30 margin-top--10 aspect-ratio-1 bg-white rounded-circle text-size-18 text-color-darker display-grid place-items-center bottom-0 translate-x50pct-y50pct right-0\">😍</div></div></div></div></div><div class=\"width-90pct display-grid  justify-self-start\"><div class=\"position-relative display-flex flex-column max-width-70pct justify-self-start\"><div class=\"bg-lightest rounded padding-y-10 padding-x-15 display-flex flex-column word-break-all align-items-start\"><div class=\"text-color-darker line-height-125-rel\">The lemon’s tangy and refreshing, perfect for a warm day.</div><div class=\"text-size-11 margin-top-10 display-flex align-items-end gap-2 text-color-dark justify-content-end\"><div class=\"display-flex gap-10 align-items-center flex-order-2\"><div>10:05</div><div class=\"text-color-primary hover-text-color-highlight-darker text-size-11 cursor-pointer display-flex align-items-center gap-2\"><span class=\"rioglyph rioglyph-language margin-top--2\"></span><span>Translate</span></div></div></div></div></div></div><div class=\"width-90pct display-grid margin-top-25 justify-self-end\"><div class=\"position-relative display-flex flex-column max-width-70pct justify-self-end\"><div class=\"bg-highlight-lightest rounded padding-y-10 padding-x-15 display-flex flex-column word-break-all align-items-end\"><div class=\"text-color-darker line-height-125-rel\">I’ll go with the lemon sorbet today. Thanks!</div><div class=\"text-size-11 margin-top-10 display-flex align-items-end gap-2 text-color-dark justify-content-end\"><div class=\"display-flex gap-10 align-items-center flex-order-1\"><div>10:06</div><span class=\"scale-90 display-flex gap-2 align-items-center\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"8\"><path fill=\"#55b1be\" fill-rule=\"nonzero\" d=\"M10.17 0 3.696 6.445.73 4.082 0 4.99l3.377 2.69.411.319 6.792-6.764.42-.409z\"></path></svg><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"8\"><path fill=\"#55b1be\" fill-rule=\"nonzero\" d=\"M10.17 0 3.696 6.445.73 4.082 0 4.99l3.377 2.69.411.319 6.792-6.764.42-.409z\"></path></svg></span></div><div class=\"position-absolute width-30 margin-top--10 aspect-ratio-1 bg-white rounded-circle text-size-18 text-color-darker display-grid place-items-center bottom-0 translate-x-50pct-y50pct left-0\">❤️</div></div></div></div></div><div class=\"width-90pct display-grid margin-top-25 justify-self-start\"><div class=\"text-color-darkest text-size-14 text-medium display-flex\"><div class=\"margin-bottom-5 display-flex gap-5\"><span class=\"padding-top-3 rioglyph rioglyph-user\"></span>Ice cream vendor</div></div><div class=\"position-relative display-flex flex-column max-width-70pct justify-self-start\"><div class=\"bg-lightest rounded padding-y-10 padding-x-15 display-flex flex-column word-break-all align-items-start\"><div class=\"text-color-darker line-height-125-rel\">Coming right up!</div><div class=\"text-size-11 margin-top-10 display-flex align-items-end gap-2 text-color-dark justify-content-end\"><div class=\"display-flex gap-10 align-items-center flex-order-2\"><div>10:07</div><div class=\"text-color-primary hover-text-color-highlight-darker text-size-11 cursor-pointer display-flex align-items-center gap-2\"><span class=\"rioglyph rioglyph-language margin-top--2\"></span><span>Translate</span></div></div></div></div></div></div></div></div></div></div></div><div class=\"scrollbar-track-horizontal\" style=\"position: absolute; height: 6px; display: none;\"><div class=\"scrollbar-thumb-horizontal\" style=\"position: relative; display: block; height: 100%;\"></div></div><div class=\"scrollbar-track-vertical\" style=\"position: absolute; width: 6px; display: none;\"><div class=\"scrollbar-thumb-vertical\" style=\"position: relative; display: block; width: 100%;\"></div></div></div><div class=\"flex-0 display-flex gap-5 align-items-end padding-y-15 padding-x-25\"><div class=\"display-grid grid-stack width-100pct\"><textarea id=\"chatInputText\" class=\"form-control overflow-hidden grid-stack-item\" placeholder=\"Type your message\" rows=\"1\"></textarea></div><div><button type=\"button\" role=\"button\" data-testid=\"sendButton\" class=\"btn btn-primary btn-icon-only btn-component\"><span class=\"rioglyph rioglyph-send\"></span></button></div></div></div><div class=\"Resizer resize-horizontal resize-right right-0 display-grid place-items-center width-auto height-100pct padding-2 bg-white border border-top-none border-bottom-none\"><div class=\"height-20 width-2 bg-gray\"></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useRef, useState, useEffect } from 'react';\nimport Scrollbars from 'react-custom-scrollbars-2';\nimport { AnimatePresence, motion } from 'framer-motion';\n\nimport SmoothScrollbars from '@rio-cloud/rio-uikit/components/smoothScrollbars/SmoothScrollbars';\nimport useElementSize from '@rio-cloud/rio-uikit/hooks/useElementSize';\nimport useHover from '@rio-cloud/rio-uikit/hooks/useHover';\nimport Divider from '@rio-cloud/rio-uikit/Divider';\n\nconst checkSVG = (\n    <svg xmlns='http://www.w3.org/2000/svg' width='11' height='8'>\n        <path\n            fill='#55b1be'\n            fillRule='nonzero'\n            d='M10.17 0 3.696 6.445.73 4.082 0 4.99l3.377 2.69.411.319 6.792-6.764.42-.409z'\n        />\n    </svg>\n);\n\nconst MessageItem = ({\n    message,\n    name,\n    time,\n    align,\n    isFirstNewMessage,\n    hasMaxWidth,\n    reaction,\n}: {\n    message: string;\n    name?: string;\n    time: string;\n    align: 'left' | 'right';\n    isFirstNewMessage?: boolean;\n    hasMaxWidth?: boolean;\n    reaction?: string;\n}) => {\n    const reactionsBarRef = useRef<HTMLInputElement>(null);\n\n    const isHover = useHover(reactionsBarRef);\n\n    return (\n        <div\n            className={`width-90pct display-grid ${isFirstNewMessage ? 'margin-top-25' : ''} ${align === 'right' ? 'justify-self-end' : 'justify-self-start'}`}\n        >\n            {name && isFirstNewMessage && (\n                <div className='text-color-darkest text-size-14 text-medium display-flex'>\n                    <div className='margin-bottom-5 display-flex gap-5'>\n                        <span className='padding-top-3 rioglyph rioglyph-user' />\n                        {name}\n                    </div>\n                </div>\n            )}\n            <div\n                className={`position-relative display-flex flex-column ${hasMaxWidth ? 'max-width-70pct' : ''} ${align === 'right' ? 'justify-self-end' : 'justify-self-start'}`}\n                ref={reactionsBarRef}\n            >\n                <div\n                    className={`${align === 'right' ? 'bg-highlight-lightest' : 'bg-lightest'} rounded padding-y-10 padding-x-15 display-flex flex-column word-break-all ${align === 'right' ? 'align-items-end' : 'align-items-start'}`}\n                >\n                    <div className='text-color-darker line-height-125-rel'>{message}</div>\n                    <div className='text-size-11 margin-top-10 display-flex align-items-end gap-2 text-color-dark justify-content-end'>\n                        <div\n                            className={`display-flex gap-10 align-items-center ${align === 'right' ? 'flex-order-1' : 'flex-order-2'}`}\n                        >\n                            <div>{time}</div>\n                            {align === 'left' && (\n                                <div className='text-color-primary hover-text-color-highlight-darker text-size-11 cursor-pointer display-flex align-items-center gap-2'>\n                                    <span className='rioglyph rioglyph-language margin-top--2' />\n                                    <span>Translate</span>\n                                </div>\n                            )}\n                            {align === 'right' && (\n                                <span className='scale-90 display-flex gap-2 align-items-center'>\n                                    {checkSVG}\n                                    {checkSVG}\n                                </span>\n                            )}\n                        </div>\n                        {reaction && (\n                            <div\n                                className={`position-absolute width-30 margin-top--10 aspect-ratio-1 bg-white rounded-circle text-size-18 text-color-darker display-grid place-items-center bottom-0 ${align === 'right' ? 'translate-x-50pct-y50pct left-0' : 'translate-x50pct-y50pct right-0'}`}\n                            >\n                                {reaction}\n                            </div>\n                        )}\n                    </div>\n                    <AnimatePresence>\n                        {isHover && (\n                            <motion.div\n                                initial={{ opacity: 0, y: 10 }}\n                                animate={{ opacity: 1, y: 0 }}\n                                exit={{ opacity: 0, transition: { duration: 0.3 }, y: 10 }}\n                                className={`display-flex gap-3 position-absolute z-index-1 bottom--5 bg-white border rounded-large padding-x-5 padding-y-3 translate-y50pct shadow-default ${align === 'right' ? 'left-50' : 'right-50'}`}\n                            >\n                                <span className='rioglyph rioglyph-thumbs-up text-color-dark hover-text-color-darkest cursor-pointer' />\n                                <span className='rioglyph rioglyph-thumbs-down text-color-dark hover-text-color-darkest cursor-pointer' />\n                                <span className='rioglyph rioglyph-send text-color-dark hover-text-color-darkest cursor-pointer' />\n                            </motion.div>\n                        )}\n                    </AnimatePresence>\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport default () => {\n    const scrollbarsRef = useRef<Scrollbars>(null);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const [isLargeScreen, setIsLargeScreen] = useState(false);\n    const [containerWidth] = useElementSize(containerRef);\n    const [isAtBottom, setIsAtBottom] = useState(false);\n\n    useEffect(() => {\n        if (scrollbarsRef.current && !isAtBottom) {\n            smoothScrollToBottom();\n        }\n    }, []);\n\n    useEffect(() => {\n        if (containerWidth !== undefined) {\n            setIsLargeScreen(containerWidth > 400);\n        }\n    }, [containerWidth]);\n\n    const calculateScroll = (scrollbars: Element) => {\n        const currentScroll = scrollbars.scrollTop;\n        const maxScroll = scrollbars.scrollHeight - scrollbars.clientHeight;\n        return { currentScroll, maxScroll };\n    };\n\n    const smoothScrollToBottom = () => {\n        const scrollbars = scrollbarsRef.current?.container?.firstElementChild;\n        if (!scrollbars) return;\n\n        const { currentScroll, maxScroll } = calculateScroll(scrollbars);\n\n        if (Math.abs(maxScroll - currentScroll) > 5) {\n            window.requestAnimationFrame(smoothScrollToBottom);\n            scrollbars.scrollTo(0, currentScroll + (maxScroll - currentScroll) / 5);\n        } else {\n            scrollbars.scrollTo(0, maxScroll);\n            setIsAtBottom(true);\n        }\n    };\n\n    const smoothScrollToTop = () => {\n        const scrollbars = scrollbarsRef.current?.container?.firstElementChild;\n        if (!scrollbars) return;\n\n        const { currentScroll } = calculateScroll(scrollbars);\n\n        if (currentScroll > 0) {\n            window.requestAnimationFrame(smoothScrollToTop);\n            scrollbars.scrollTo(0, currentScroll - currentScroll / 5);\n        }\n    };\n\n    const handleScroll = () => {\n        const scrollbars = scrollbarsRef.current?.container?.firstElementChild;\n        if (!scrollbars) return;\n\n        const { currentScroll, maxScroll } = calculateScroll(scrollbars);\n\n        if (currentScroll < maxScroll) {\n            setIsAtBottom(false);\n        } else {\n            setIsAtBottom(true);\n        }\n    };\n\n    return (\n        <div\n            ref={containerRef}\n            className='display-flex flex-column height-600 position-relative padding-right-5 overflow-hidden'\n        >\n            <AnimatePresence>\n                {isAtBottom && (\n                    <motion.div\n                        initial={{ opacity: 0, top: -50 }}\n                        animate={{ opacity: 1, y: 0, top: 15 }}\n                        exit={{ opacity: 0, transition: { duration: 0.3 }, top: -50 }}\n                        className='position-absolute left-0 right-0 justify-content-center display-flex z-index-1'\n                        onClick={smoothScrollToTop}\n                    >\n                        <div className='rounded-circle bg-primary text-color-white text-center padding-x-10 padding-y-5 cursor-pointer shadow-smooth'>\n                            Older messages\n                        </div>\n                    </motion.div>\n                )}\n            </AnimatePresence>\n\n            <SmoothScrollbars slideIn ref={scrollbarsRef} onScroll={handleScroll}>\n                <div className='flex-1-1 overflow-y-auto user-select-none'>\n                    <div className='display-flex flex-column gap-10 padding-25'>\n                        <div className='display-grid gap-10'>\n                            <MessageItem\n                                hasMaxWidth={isLargeScreen}\n                                align='right'\n                                message=\"Hi! I'd like to get an ice cream, but I don't really like many flavors.\"\n                                time='10:01'\n                            />\n                            <MessageItem\n                                hasMaxWidth={isLargeScreen}\n                                isFirstNewMessage\n                                align='left'\n                                name='Ice cream vendor'\n                                message='No worries! We have some simple flavors. What do you usually enjoy?'\n                                time='10:02'\n                            />\n                            <MessageItem\n                                hasMaxWidth={isLargeScreen}\n                                isFirstNewMessage\n                                align='right'\n                                message='I’m not a fan of chocolate, strawberry, or anything with nuts.'\n                                time='10:03'\n                            />\n                            <MessageItem\n                                hasMaxWidth={isLargeScreen}\n                                isFirstNewMessage\n                                align='left'\n                                name='Ice cream vendor'\n                                message='Got it. How about vanilla? It’s classic and not too overwhelming.'\n                                time='10:04'\n                            />\n                            <MessageItem\n                                hasMaxWidth={isLargeScreen}\n                                isFirstNewMessage\n                                align='right'\n                                message='Yeah, vanilla works for me. Do you have anything else that’s mild?'\n                                time='10:05'\n                            />\n                            <MessageItem\n                                hasMaxWidth={isLargeScreen}\n                                isFirstNewMessage\n                                align='left'\n                                name='Ice cream vendor'\n                                message='We have a nice plain mango sorbet and a simple caramel ice cream as well.'\n                                time='10:06'\n                            />\n                            <MessageItem\n                                hasMaxWidth={isLargeScreen}\n                                align='left'\n                                name='Ice cream vendor'\n                                message='The mango is refreshing, while caramel is a bit richer but still simple.'\n                                time='10:07'\n                            />\n                            <MessageItem\n                                hasMaxWidth={isLargeScreen}\n                                isFirstNewMessage\n                                align='right'\n                                message='I’ll take a scoop of vanilla and mango sorbet, please.'\n                                time='10:08'\n                            />\n                            <MessageItem\n                                hasMaxWidth={isLargeScreen}\n                                isFirstNewMessage\n                                align='left'\n                                name='Ice cream vendor'\n                                message='Great choice! That’ll be ready in a moment.'\n                                time='10:09'\n                            />\n                        </div>\n\n                        <Divider>\n                            <div className='tag tag-small'>Today</div>\n                        </Divider>\n                        <div className='display-grid gap-10'>\n                            <MessageItem\n                                hasMaxWidth={isLargeScreen}\n                                align='right'\n                                message=\"Hey, yesterday's vanilla was great! I'd love to try something different today.\"\n                                time='10:01'\n                            />\n                            <MessageItem\n                                hasMaxWidth={isLargeScreen}\n                                isFirstNewMessage\n                                align='left'\n                                name='Ice cream vendor'\n                                message='Glad to hear it! We’ve got some new flavors in. What are you in the mood for?'\n                                time='10:02'\n                            />\n                            <MessageItem\n                                hasMaxWidth={isLargeScreen}\n                                isFirstNewMessage\n                                align='right'\n                                message='Maybe something fruity. What do you recommend?'\n                                time='10:03'\n                            />\n                            <MessageItem\n                                hasMaxWidth={isLargeScreen}\n                                isFirstNewMessage\n                                reaction='😍'\n                                align='left'\n                                name='Ice cream vendor'\n                                message='Our mango sorbet is a solid choice. Or if you want something lighter, we have a lemon sorbet.'\n                                time='10:04'\n                            />\n                            <MessageItem\n                                hasMaxWidth={isLargeScreen}\n                                align='left'\n                                name='Ice cream vendor'\n                                message='The lemon’s tangy and refreshing, perfect for a warm day.'\n                                time='10:05'\n                            />\n                            <MessageItem\n                                hasMaxWidth={isLargeScreen}\n                                isFirstNewMessage\n                                reaction='❤️'\n                                align='right'\n                                message='I’ll go with the lemon sorbet today. Thanks!'\n                                time='10:06'\n                            />\n                            <MessageItem\n                                hasMaxWidth={isLargeScreen}\n                                isFirstNewMessage\n                                align='left'\n                                name='Ice cream vendor'\n                                message='Coming right up!'\n                                time='10:07'\n                            />\n                        </div>\n                    </div>\n                </div>\n            </SmoothScrollbars>\n            <div className='flex-0 display-flex gap-5 align-items-end padding-y-15 padding-x-25'>\n                <div className='display-grid grid-stack width-100pct'>\n                    <textarea\n                        id='chatInputText'\n                        className='form-control overflow-hidden grid-stack-item'\n                        placeholder='Type your message'\n                        rows={1}\n                    />\n                </div>\n                <div>\n                    <button\n                        type='button'\n                        role='button'\n                        data-testid='sendButton'\n                        className='btn btn-primary btn-icon-only btn-component'\n                    >\n                        <span className='rioglyph rioglyph-send' />\n                    </button>\n                </div>\n            </div>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"display-flex flex-column height-600 position-relative padding-right-5 overflow-hidden\">\n    <div class=\"scrollbar-fly-in smooth-scrollbar-wrapper\" style=\"position: relative; overflow: hidden; width: 100%; height: 100%;\">\n        <div class=\"scrollbar-view\" style=\"position: absolute; inset: 0px; overflow: scroll; margin-right: 0px; margin-bottom: 0px;\">\n            <div class=\"scrollbar-content-wrapper\">\n                <div class=\"flex-1-1 overflow-y-auto user-select-none\">\n                    <div class=\"display-flex flex-column gap-10 padding-25\">\n                        <div class=\"display-grid gap-10\">\n                            <div class=\"width-90pct display-grid  justify-self-end\">\n                                <div class=\"position-relative display-flex flex-column max-width-70pct justify-self-end\">\n                                    <div class=\"bg-highlight-lightest rounded padding-y-10 padding-x-15 display-flex flex-column word-break-all align-items-end\">\n                                        <div class=\"text-color-darker line-height-125-rel\">Hi! I'd like to get an ice cream, but I don't really like many flavors.</div>\n                                        <div class=\"text-size-11 margin-top-10 display-flex align-items-end gap-2 text-color-dark justify-content-end\">\n                                            <div class=\"display-flex gap-10 align-items-center flex-order-1\">\n                                                <div>10:01</div>\n                                                <span class=\"scale-90 display-flex gap-2 align-items-center\">\n                                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"8\">\n                                                        <path fill=\"#55b1be\" fill-rule=\"nonzero\" d=\"M10.17 0 3.696 6.445.73 4.082 0 4.99l3.377 2.69.411.319 6.792-6.764.42-.409z\">\n                                                        </path>\n                                                    </svg>\n                                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"8\">\n                                                        <path fill=\"#55b1be\" fill-rule=\"nonzero\" d=\"M10.17 0 3.696 6.445.73 4.082 0 4.99l3.377 2.69.411.319 6.792-6.764.42-.409z\">\n                                                        </path>\n                                                    </svg>\n                                                </span>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                            <div class=\"width-90pct display-grid margin-top-25 justify-self-start\">\n                                <div class=\"text-color-darkest text-size-14 text-medium display-flex\">\n                                    <div class=\"margin-bottom-5 display-flex gap-5\">\n                                        <span class=\"padding-top-3 rioglyph rioglyph-user\">\n                                        </span>Ice cream vendor\n                                    </div>\n                                </div>\n                                <div class=\"position-relative display-flex flex-column max-width-70pct justify-self-start\">\n                                    <div class=\"bg-lightest rounded padding-y-10 padding-x-15 display-flex flex-column word-break-all align-items-start\">\n                                        <div class=\"text-color-darker line-height-125-rel\">No worries! We have some simple flavors. What do you usually enjoy?</div>\n                                        <div class=\"text-size-11 margin-top-10 display-flex align-items-end gap-2 text-color-dark justify-content-end\">\n                                            <div class=\"display-flex gap-10 align-items-center flex-order-2\">\n                                                <div>10:02</div>\n                                                <div class=\"text-color-primary hover-text-color-highlight-darker text-size-11 cursor-pointer display-flex align-items-center gap-2\">\n                                                    <span class=\"rioglyph rioglyph-language margin-top--2\">\n                                                    </span>\n                                                    <span>Translate</span>\n                                                </div>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                            <div class=\"width-90pct display-grid margin-top-25 justify-self-end\">\n                                <div class=\"position-relative display-flex flex-column max-width-70pct justify-self-end\">\n                                    <div class=\"bg-highlight-lightest rounded padding-y-10 padding-x-15 display-flex flex-column word-break-all align-items-end\">\n                                        <div class=\"text-color-darker line-height-125-rel\">I’m not a fan of chocolate, strawberry, or anything with nuts.</div>\n                                        <div class=\"text-size-11 margin-top-10 display-flex align-items-end gap-2 text-color-dark justify-content-end\">\n                                            <div class=\"display-flex gap-10 align-items-center flex-order-1\">\n                                                <div>10:03</div>\n                                                <span class=\"scale-90 display-flex gap-2 align-items-center\">\n                                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"8\">\n                                                        <path fill=\"#55b1be\" fill-rule=\"nonzero\" d=\"M10.17 0 3.696 6.445.73 4.082 0 4.99l3.377 2.69.411.319 6.792-6.764.42-.409z\">\n                                                        </path>\n                                                    </svg>\n                                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"8\">\n                                                        <path fill=\"#55b1be\" fill-rule=\"nonzero\" d=\"M10.17 0 3.696 6.445.73 4.082 0 4.99l3.377 2.69.411.319 6.792-6.764.42-.409z\">\n                                                        </path>\n                                                    </svg>\n                                                </span>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                            <div class=\"width-90pct display-grid margin-top-25 justify-self-start\">\n                                <div class=\"text-color-darkest text-size-14 text-medium display-flex\">\n                                    <div class=\"margin-bottom-5 display-flex gap-5\">\n                                        <span class=\"padding-top-3 rioglyph rioglyph-user\">\n                                        </span>Ice cream vendor\n                                    </div>\n                                </div>\n                                <div class=\"position-relative display-flex flex-column max-width-70pct justify-self-start\">\n                                    <div class=\"bg-lightest rounded padding-y-10 padding-x-15 display-flex flex-column word-break-all align-items-start\">\n                                        <div class=\"text-color-darker line-height-125-rel\">Got it. How about vanilla? It’s classic and not too overwhelming.</div>\n                                        <div class=\"text-size-11 margin-top-10 display-flex align-items-end gap-2 text-color-dark justify-content-end\">\n                                            <div class=\"display-flex gap-10 align-items-center flex-order-2\">\n                                                <div>10:04</div>\n                                                <div class=\"text-color-primary hover-text-color-highlight-darker text-size-11 cursor-pointer display-flex align-items-center gap-2\">\n                                                    <span class=\"rioglyph rioglyph-language margin-top--2\">\n                                                    </span>\n                                                    <span>Translate</span>\n                                                </div>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                            <div class=\"width-90pct display-grid margin-top-25 justify-self-end\">\n                                <div class=\"position-relative display-flex flex-column max-width-70pct justify-self-end\">\n                                    <div class=\"bg-highlight-lightest rounded padding-y-10 padding-x-15 display-flex flex-column word-break-all align-items-end\">\n                                        <div class=\"text-color-darker line-height-125-rel\">Yeah, vanilla works for me. Do you have anything else that’s mild?</div>\n                                        <div class=\"text-size-11 margin-top-10 display-flex align-items-end gap-2 text-color-dark justify-content-end\">\n                                            <div class=\"display-flex gap-10 align-items-center flex-order-1\">\n                                                <div>10:05</div>\n                                                <span class=\"scale-90 display-flex gap-2 align-items-center\">\n                                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"8\">\n                                                        <path fill=\"#55b1be\" fill-rule=\"nonzero\" d=\"M10.17 0 3.696 6.445.73 4.082 0 4.99l3.377 2.69.411.319 6.792-6.764.42-.409z\">\n                                                        </path>\n                                                    </svg>\n                                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"8\">\n                                                        <path fill=\"#55b1be\" fill-rule=\"nonzero\" d=\"M10.17 0 3.696 6.445.73 4.082 0 4.99l3.377 2.69.411.319 6.792-6.764.42-.409z\">\n                                                        </path>\n                                                    </svg>\n                                                </span>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                            <div class=\"width-90pct display-grid margin-top-25 justify-self-start\">\n                                <div class=\"text-color-darkest text-size-14 text-medium display-flex\">\n                                    <div class=\"margin-bottom-5 display-flex gap-5\">\n                                        <span class=\"padding-top-3 rioglyph rioglyph-user\">\n                                        </span>Ice cream vendor\n                                    </div>\n                                </div>\n                                <div class=\"position-relative display-flex flex-column max-width-70pct justify-self-start\">\n                                    <div class=\"bg-lightest rounded padding-y-10 padding-x-15 display-flex flex-column word-break-all align-items-start\">\n                                        <div class=\"text-color-darker line-height-125-rel\">We have a nice plain mango sorbet and a simple caramel ice cream as well.</div>\n                                        <div class=\"text-size-11 margin-top-10 display-flex align-items-end gap-2 text-color-dark justify-content-end\">\n                                            <div class=\"display-flex gap-10 align-items-center flex-order-2\">\n                                                <div>10:06</div>\n                                                <div class=\"text-color-primary hover-text-color-highlight-darker text-size-11 cursor-pointer display-flex align-items-center gap-2\">\n                                                    <span class=\"rioglyph rioglyph-language margin-top--2\">\n                                                    </span>\n                                                    <span>Translate</span>\n                                                </div>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                            <div class=\"width-90pct display-grid  justify-self-start\">\n                                <div class=\"position-relative display-flex flex-column max-width-70pct justify-self-start\">\n                                    <div class=\"bg-lightest rounded padding-y-10 padding-x-15 display-flex flex-column word-break-all align-items-start\">\n                                        <div class=\"text-color-darker line-height-125-rel\">The mango is refreshing, while caramel is a bit richer but still simple.</div>\n                                        <div class=\"text-size-11 margin-top-10 display-flex align-items-end gap-2 text-color-dark justify-content-end\">\n                                            <div class=\"display-flex gap-10 align-items-center flex-order-2\">\n                                                <div>10:07</div>\n                                                <div class=\"text-color-primary hover-text-color-highlight-darker text-size-11 cursor-pointer display-flex align-items-center gap-2\">\n                                                    <span class=\"rioglyph rioglyph-language margin-top--2\">\n                                                    </span>\n                                                    <span>Translate</span>\n                                                </div>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                            <div class=\"width-90pct display-grid margin-top-25 justify-self-end\">\n                                <div class=\"position-relative display-flex flex-column max-width-70pct justify-self-end\">\n                                    <div class=\"bg-highlight-lightest rounded padding-y-10 padding-x-15 display-flex flex-column word-break-all align-items-end\">\n                                        <div class=\"text-color-darker line-height-125-rel\">I’ll take a scoop of vanilla and mango sorbet, please.</div>\n                                        <div class=\"text-size-11 margin-top-10 display-flex align-items-end gap-2 text-color-dark justify-content-end\">\n                                            <div class=\"display-flex gap-10 align-items-center flex-order-1\">\n                                                <div>10:08</div>\n                                                <span class=\"scale-90 display-flex gap-2 align-items-center\">\n                                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"8\">\n                                                        <path fill=\"#55b1be\" fill-rule=\"nonzero\" d=\"M10.17 0 3.696 6.445.73 4.082 0 4.99l3.377 2.69.411.319 6.792-6.764.42-.409z\">\n                                                        </path>\n                                                    </svg>\n                                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"8\">\n                                                        <path fill=\"#55b1be\" fill-rule=\"nonzero\" d=\"M10.17 0 3.696 6.445.73 4.082 0 4.99l3.377 2.69.411.319 6.792-6.764.42-.409z\">\n                                                        </path>\n                                                    </svg>\n                                                </span>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                            <div class=\"width-90pct display-grid margin-top-25 justify-self-start\">\n                                <div class=\"text-color-darkest text-size-14 text-medium display-flex\">\n                                    <div class=\"margin-bottom-5 display-flex gap-5\">\n                                        <span class=\"padding-top-3 rioglyph rioglyph-user\">\n                                        </span>Ice cream vendor\n                                    </div>\n                                </div>\n                                <div class=\"position-relative display-flex flex-column max-width-70pct justify-self-start\">\n                                    <div class=\"bg-lightest rounded padding-y-10 padding-x-15 display-flex flex-column word-break-all align-items-start\">\n                                        <div class=\"text-color-darker line-height-125-rel\">Great choice! That’ll be ready in a moment.</div>\n                                        <div class=\"text-size-11 margin-top-10 display-flex align-items-end gap-2 text-color-dark justify-content-end\">\n                                            <div class=\"display-flex gap-10 align-items-center flex-order-2\">\n                                                <div>10:09</div>\n                                                <div class=\"text-color-primary hover-text-color-highlight-darker text-size-11 cursor-pointer display-flex align-items-center gap-2\">\n                                                    <span class=\"rioglyph rioglyph-language margin-top--2\">\n                                                    </span>\n                                                    <span>Translate</span>\n                                                </div>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"Divider position-relative width-100pct\" style=\"padding-top: 15px; padding-bottom: 15px;\">\n                            <div class=\"divider-title display-flex align-items-center\">\n                                <div class=\"flex-1-0\">\n                                    <div class=\"divider-line bg-light\" style=\"width: 100%; height: 1px;\">\n                                    </div>\n                                </div>\n                                <div class=\"\">\n                                    <div class=\"tag tag-small\">Today</div>\n                                </div>\n                                <div class=\"flex-1-0\">\n                                    <div class=\"divider-line bg-light\" style=\"width: 100%; height: 1px;\">\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"display-grid gap-10\">\n                            <div class=\"width-90pct display-grid  justify-self-end\">\n                                <div class=\"position-relative display-flex flex-column max-width-70pct justify-self-end\">\n                                    <div class=\"bg-highlight-lightest rounded padding-y-10 padding-x-15 display-flex flex-column word-break-all align-items-end\">\n                                        <div class=\"text-color-darker line-height-125-rel\">Hey, yesterday's vanilla was great! I'd love to try something different today.</div>\n                                        <div class=\"text-size-11 margin-top-10 display-flex align-items-end gap-2 text-color-dark justify-content-end\">\n                                            <div class=\"display-flex gap-10 align-items-center flex-order-1\">\n                                                <div>10:01</div>\n                                                <span class=\"scale-90 display-flex gap-2 align-items-center\">\n                                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"8\">\n                                                        <path fill=\"#55b1be\" fill-rule=\"nonzero\" d=\"M10.17 0 3.696 6.445.73 4.082 0 4.99l3.377 2.69.411.319 6.792-6.764.42-.409z\">\n                                                        </path>\n                                                    </svg>\n                                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"8\">\n                                                        <path fill=\"#55b1be\" fill-rule=\"nonzero\" d=\"M10.17 0 3.696 6.445.73 4.082 0 4.99l3.377 2.69.411.319 6.792-6.764.42-.409z\">\n                                                        </path>\n                                                    </svg>\n                                                </span>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                            <div class=\"width-90pct display-grid margin-top-25 justify-self-start\">\n                                <div class=\"text-color-darkest text-size-14 text-medium display-flex\">\n                                    <div class=\"margin-bottom-5 display-flex gap-5\">\n                                        <span class=\"padding-top-3 rioglyph rioglyph-user\">\n                                        </span>Ice cream vendor\n                                    </div>\n                                </div>\n                                <div class=\"position-relative display-flex flex-column max-width-70pct justify-self-start\">\n                                    <div class=\"bg-lightest rounded padding-y-10 padding-x-15 display-flex flex-column word-break-all align-items-start\">\n                                        <div class=\"text-color-darker line-height-125-rel\">Glad to hear it! We’ve got some new flavors in. What are you in the mood for?</div>\n                                        <div class=\"text-size-11 margin-top-10 display-flex align-items-end gap-2 text-color-dark justify-content-end\">\n                                            <div class=\"display-flex gap-10 align-items-center flex-order-2\">\n                                                <div>10:02</div>\n                                                <div class=\"text-color-primary hover-text-color-highlight-darker text-size-11 cursor-pointer display-flex align-items-center gap-2\">\n                                                    <span class=\"rioglyph rioglyph-language margin-top--2\">\n                                                    </span>\n                                                    <span>Translate</span>\n                                                </div>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                            <div class=\"width-90pct display-grid margin-top-25 justify-self-end\">\n                                <div class=\"position-relative display-flex flex-column max-width-70pct justify-self-end\">\n                                    <div class=\"bg-highlight-lightest rounded padding-y-10 padding-x-15 display-flex flex-column word-break-all align-items-end\">\n                                        <div class=\"text-color-darker line-height-125-rel\">Maybe something fruity. What do you recommend?</div>\n                                        <div class=\"text-size-11 margin-top-10 display-flex align-items-end gap-2 text-color-dark justify-content-end\">\n                                            <div class=\"display-flex gap-10 align-items-center flex-order-1\">\n                                                <div>10:03</div>\n                                                <span class=\"scale-90 display-flex gap-2 align-items-center\">\n                                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"8\">\n                                                        <path fill=\"#55b1be\" fill-rule=\"nonzero\" d=\"M10.17 0 3.696 6.445.73 4.082 0 4.99l3.377 2.69.411.319 6.792-6.764.42-.409z\">\n                                                        </path>\n                                                    </svg>\n                                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"8\">\n                                                        <path fill=\"#55b1be\" fill-rule=\"nonzero\" d=\"M10.17 0 3.696 6.445.73 4.082 0 4.99l3.377 2.69.411.319 6.792-6.764.42-.409z\">\n                                                        </path>\n                                                    </svg>\n                                                </span>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                            <div class=\"width-90pct display-grid margin-top-25 justify-self-start\">\n                                <div class=\"text-color-darkest text-size-14 text-medium display-flex\">\n                                    <div class=\"margin-bottom-5 display-flex gap-5\">\n                                        <span class=\"padding-top-3 rioglyph rioglyph-user\">\n                                        </span>Ice cream vendor\n                                    </div>\n                                </div>\n                                <div class=\"position-relative display-flex flex-column max-width-70pct justify-self-start\">\n                                    <div class=\"bg-lightest rounded padding-y-10 padding-x-15 display-flex flex-column word-break-all align-items-start\">\n                                        <div class=\"text-color-darker line-height-125-rel\">Our mango sorbet is a solid choice. Or if you want something lighter, we have a lemon sorbet.</div>\n                                        <div class=\"text-size-11 margin-top-10 display-flex align-items-end gap-2 text-color-dark justify-content-end\">\n                                            <div class=\"display-flex gap-10 align-items-center flex-order-2\">\n                                                <div>10:04</div>\n                                                <div class=\"text-color-primary hover-text-color-highlight-darker text-size-11 cursor-pointer display-flex align-items-center gap-2\">\n                                                    <span class=\"rioglyph rioglyph-language margin-top--2\">\n                                                    </span>\n                                                    <span>Translate</span>\n                                                </div>\n                                            </div>\n                                            <div class=\"position-absolute width-30 margin-top--10 aspect-ratio-1 bg-white rounded-circle text-size-18 text-color-darker display-grid place-items-center bottom-0 translate-x50pct-y50pct right-0\">😍</div>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                            <div class=\"width-90pct display-grid  justify-self-start\">\n                                <div class=\"position-relative display-flex flex-column max-width-70pct justify-self-start\">\n                                    <div class=\"bg-lightest rounded padding-y-10 padding-x-15 display-flex flex-column word-break-all align-items-start\">\n                                        <div class=\"text-color-darker line-height-125-rel\">The lemon’s tangy and refreshing, perfect for a warm day.</div>\n                                        <div class=\"text-size-11 margin-top-10 display-flex align-items-end gap-2 text-color-dark justify-content-end\">\n                                            <div class=\"display-flex gap-10 align-items-center flex-order-2\">\n                                                <div>10:05</div>\n                                                <div class=\"text-color-primary hover-text-color-highlight-darker text-size-11 cursor-pointer display-flex align-items-center gap-2\">\n                                                    <span class=\"rioglyph rioglyph-language margin-top--2\">\n                                                    </span>\n                                                    <span>Translate</span>\n                                                </div>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                            <div class=\"width-90pct display-grid margin-top-25 justify-self-end\">\n                                <div class=\"position-relative display-flex flex-column max-width-70pct justify-self-end\">\n                                    <div class=\"bg-highlight-lightest rounded padding-y-10 padding-x-15 display-flex flex-column word-break-all align-items-end\">\n                                        <div class=\"text-color-darker line-height-125-rel\">I’ll go with the lemon sorbet today. Thanks!</div>\n                                        <div class=\"text-size-11 margin-top-10 display-flex align-items-end gap-2 text-color-dark justify-content-end\">\n                                            <div class=\"display-flex gap-10 align-items-center flex-order-1\">\n                                                <div>10:06</div>\n                                                <span class=\"scale-90 display-flex gap-2 align-items-center\">\n                                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"8\">\n                                                        <path fill=\"#55b1be\" fill-rule=\"nonzero\" d=\"M10.17 0 3.696 6.445.73 4.082 0 4.99l3.377 2.69.411.319 6.792-6.764.42-.409z\">\n                                                        </path>\n                                                    </svg>\n                                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"8\">\n                                                        <path fill=\"#55b1be\" fill-rule=\"nonzero\" d=\"M10.17 0 3.696 6.445.73 4.082 0 4.99l3.377 2.69.411.319 6.792-6.764.42-.409z\">\n                                                        </path>\n                                                    </svg>\n                                                </span>\n                                            </div>\n                                            <div class=\"position-absolute width-30 margin-top--10 aspect-ratio-1 bg-white rounded-circle text-size-18 text-color-darker display-grid place-items-center bottom-0 translate-x-50pct-y50pct left-0\">❤️</div>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                            <div class=\"width-90pct display-grid margin-top-25 justify-self-start\">\n                                <div class=\"text-color-darkest text-size-14 text-medium display-flex\">\n                                    <div class=\"margin-bottom-5 display-flex gap-5\">\n                                        <span class=\"padding-top-3 rioglyph rioglyph-user\">\n                                        </span>Ice cream vendor\n                                    </div>\n                                </div>\n                                <div class=\"position-relative display-flex flex-column max-width-70pct justify-self-start\">\n                                    <div class=\"bg-lightest rounded padding-y-10 padding-x-15 display-flex flex-column word-break-all align-items-start\">\n                                        <div class=\"text-color-darker line-height-125-rel\">Coming right up!</div>\n                                        <div class=\"text-size-11 margin-top-10 display-flex align-items-end gap-2 text-color-dark justify-content-end\">\n                                            <div class=\"display-flex gap-10 align-items-center flex-order-2\">\n                                                <div>10:07</div>\n                                                <div class=\"text-color-primary hover-text-color-highlight-darker text-size-11 cursor-pointer display-flex align-items-center gap-2\">\n                                                    <span class=\"rioglyph rioglyph-language margin-top--2\">\n                                                    </span>\n                                                    <span>Translate</span>\n                                                </div>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"scrollbar-track-horizontal\" style=\"position: absolute; height: 6px; display: none;\">\n            <div class=\"scrollbar-thumb-horizontal\" style=\"position: relative; display: block; height: 100%;\">\n            </div>\n        </div>\n        <div class=\"scrollbar-track-vertical\" style=\"position: absolute; width: 6px; display: none;\">\n            <div class=\"scrollbar-thumb-vertical\" style=\"position: relative; display: block; width: 100%;\">\n            </div>\n        </div>\n    </div>\n    <div class=\"flex-0 display-flex gap-5 align-items-end padding-y-15 padding-x-25\">\n        <div class=\"display-grid grid-stack width-100pct\">\n            <textarea id=\"chatInputText\" class=\"form-control overflow-hidden grid-stack-item\" placeholder=\"Type your message\" rows=\"1\">\n</textarea>\n        </div>\n        <div>\n            <button type=\"button\" role=\"button\" data-testid=\"sendButton\" class=\"btn btn-primary btn-icon-only btn-component\">\n                <span class=\"rioglyph rioglyph-send\">\n                </span>\n            </button>\n        </div>\n    </div>\n</div>\n<div class=\"Resizer resize-horizontal resize-right right-0 display-grid place-items-center width-auto height-100pct padding-2 bg-white border border-top-none border-bottom-none\">\n    <div class=\"height-20 width-2 bg-gray\">\n    </div>\n</div>"
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}