@rio-cloud/uikit-mcp 1.0.0 → 1.1.0

package/dist/docs/components/chat.md

@@ -0,0 +1,932 @@
+# Chat
+
+*Category:* Components
+*Section:* CSS Only
+*Source:* https://uikit.developers.rio.cloud/#components/chat
+*Captured:* 2025-12-12T12:39:02.905Z
+
+The chat component is a pure CSS component.
+
+## Chat
+
+### Example: 10:01
+
+Hi! I'd like to get an ice cream, but I don't really like many flavors.
+10:01
+
+Ice cream vendor
+
+No worries! We have some simple flavors. What do you usually enjoy?
+10:02
+Translate
+
+I’m not a fan of chocolate, strawberry, or anything with nuts.
+10:03
+
+Ice cream vendor
+
+Got it. How about vanilla? It’s classic and not too overwhelming.
+10:04
+Translate
+
+Yeah, vanilla works for me. Do you have anything else that’s mild?
+10:05
+
+Ice cream vendor
+
+We have a nice plain mango sorbet and a simple caramel ice cream as well.
+10:06
+Translate
+
+The mango is refreshing, while caramel is a bit richer but still simple.
+10:07
+Translate
+
+I’ll take a scoop of vanilla and mango sorbet, please.
+10:08
+
+Ice cream vendor
+
+Great choice! That’ll be ready in a moment.
+10:09
+Translate
+
+Today
+
+Hey, yesterday's vanilla was great! I'd love to try something different today.
+10:01
+
+Ice cream vendor
+
+Glad to hear it! We’ve got some new flavors in. What are you in the mood for?
+10:02
+Translate
+
+Maybe something fruity. What do you recommend?
+10:03
+
+Ice cream vendor
+
+Our mango sorbet is a solid choice. Or if you want something lighter, we have a lemon sorbet.
+10:04
+Translate
+
+😍
+
+The lemon’s tangy and refreshing, perfect for a warm day.
+10:05
+Translate
+
+I’ll go with the lemon sorbet today. Thanks!
+10:06
+
+❤️
+
+Ice cream vendor
+
+Coming right up!
+10:07
+Translate
+
+#### Summary
+
+Hi! I'd like to get an ice cream, but I don't really like many flavors.
+10:01
+
+Ice cream vendor
+
+No worries! We have some simple flavors. What do you usually enjoy?
+10:02
+Translate
+
+I’m not a fan of chocolate, strawberry, or anything with nuts.
+10:03
+
+Ice cream vendor
+
+Got it. How about vanilla? It’s classic and not too overwhelming.
+10:04
+Translate
+
+Yeah, vanilla works for me. Do you have anything else that’s mild?
+10:05
+
+Ice cream vendor
+
+We have a nice plain mango sorbet and a simple caramel ice cream as well.
+10:06
+Translate
+
+The mango is refreshing, while caramel is a bit richer but still simple.
+10:07
+Translate
+
+I’ll take a scoop of vanilla and mango sorbet, please.
+10:08
+
+Ice cream vendor
+
+Great choice! That’ll be ready in a moment.
+10:09
+Translate
+
+Today
+
+Hey, yesterday's vanilla was great! I'd love to try something different today.
+10:01
+
+Ice cream vendor
+
+Glad to hear it! We’ve got some new flavors in. What are you in the mood for?
+10:02
+Translate
+
+Maybe something fruity. What do you recommend?
+10:03
+
+Ice cream vendor
+
+Our mango sorbet is a solid choice. Or if you want something lighter, we have a lemon sorbet.
+10:04
+Translate
+
+😍
+
+The lemon’s tangy and refreshing, perfect for a warm day.
+10:05
+Translate
+
+I’ll go with the lemon sorbet today. Thanks!
+10:06
+
+❤️
+
+Ice cream vendor
+
+Coming right up!
+10:07
+Translate
+
+#### React (tsx)
+
+```tsx
+import { useRef, useState, useEffect } from 'react';
+import type Scrollbars from 'react-custom-scrollbars-4';
+
+import { AnimatePresence, motion } from '@rio-cloud/rio-uikit/motion';
+import SmoothScrollbars from '@rio-cloud/rio-uikit/components/smoothScrollbars/SmoothScrollbars';
+import useElementSize from '@rio-cloud/rio-uikit/hooks/useElementSize';
+import useHover from '@rio-cloud/rio-uikit/hooks/useHover';
+import Divider from '@rio-cloud/rio-uikit/Divider';
+
+const checkSVG = (
+    <svg xmlns='http://www.w3.org/2000/svg' width='11' height='8'>
+        <path
+            fill='#55b1be'
+            fillRule='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'
+        />
+    </svg>
+);
+
+const MessageItem = ({
+    message,
+    name,
+    time,
+    align,
+    isFirstNewMessage,
+    hasMaxWidth,
+    reaction,
+}: {
+    message: string;
+    name?: string;
+    time: string;
+    align: 'left' | 'right';
+    isFirstNewMessage?: boolean;
+    hasMaxWidth?: boolean;
+    reaction?: string;
+}) => {
+    const reactionsBarRef = useRef<HTMLInputElement>(null);
+
+    const isHover = useHover(reactionsBarRef);
+
+    return (
+        <div
+            className={`width-90pct display-grid ${isFirstNewMessage ? 'margin-top-25' : ''} ${align === 'right' ? 'justify-self-end' : 'justify-self-start'}`}
+        >
+            {name && isFirstNewMessage && (
+                <div className='text-color-darkest text-size-14 text-medium display-flex'>
+                    <div className='margin-bottom-5 display-flex gap-5'>
+                        <span className='padding-top-3 rioglyph rioglyph-user' />
+                        {name}
+                    </div>
+                </div>
+            )}
+            <div
+                className={`position-relative display-flex flex-column ${hasMaxWidth ? 'max-width-70pct' : ''} ${align === 'right' ? 'justify-self-end' : 'justify-self-start'}`}
+                ref={reactionsBarRef}
+            >
+                <div
+                    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'}`}
+                >
+                    <div className='text-color-darker line-height-125-rel'>{message}</div>
+                    <div className='text-size-11 margin-top-10 display-flex align-items-end gap-2 text-color-dark justify-content-end'>
+                        <div
+                            className={`display-flex gap-10 align-items-center ${align === 'right' ? 'flex-order-1' : 'flex-order-2'}`}
+                        >
+                            <div>{time}</div>
+                            {align === 'left' && (
+                                <div className='text-color-primary hover-text-color-highlight-darker text-size-11 cursor-pointer display-flex align-items-center gap-2'>
+                                    <span className='rioglyph rioglyph-language margin-top--2' />
+                                    <span>Translate</span>
+                                </div>
+                            )}
+                            {align === 'right' && (
+                                <span className='scale-90 display-flex gap-2 align-items-center'>
+                                    {checkSVG}
+                                    {checkSVG}
+                                </span>
+                            )}
+                        </div>
+                        {reaction && (
+                            <div
+                                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'}`}
+                            >
+                                {reaction}
+                            </div>
+                        )}
+                    </div>
+                    <AnimatePresence>
+                        {isHover && (
+                            <motion.div
+                                initial={{ opacity: 0, y: 10 }}
+                                animate={{ opacity: 1, y: 0 }}
+                                exit={{ opacity: 0, transition: { duration: 0.3 }, y: 10 }}
+                                className={`display-flex gap-5 position-absolute z-index-1 bottom--10 bg-white border rounded-large padding-x-10 padding-y-5 text-size-16 translate-y50pct shadow-default ${align === 'right' ? 'left-50' : 'right-50'}`}
+                            >
+                                <span className='rioglyph rioglyph-thumbs-up text-color-gray hover-text-color-primary cursor-pointer' />
+                                <span className='rioglyph rioglyph-thumbs-down text-color-gray hover-text-color-primary cursor-pointer' />
+                                <span className='rioglyph rioglyph-send text-color-gray hover-text-color-primary cursor-pointer' />
+                            </motion.div>
+                        )}
+                    </AnimatePresence>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default () => {
+    const scrollbarsRef = useRef<Scrollbars>(null);
+    const containerRef = useRef<HTMLDivElement>(null);
+    const [isLargeScreen, setIsLargeScreen] = useState(false);
+    const [containerWidth] = useElementSize(containerRef);
+    const [isAtBottom, setIsAtBottom] = useState(false);
+
+    useEffect(() => {
+        if (scrollbarsRef.current && !isAtBottom) {
+            smoothScrollToBottom();
+        }
+    }, []);
+
+    useEffect(() => {
+        if (containerWidth !== undefined) {
+            setIsLargeScreen(containerWidth > 400);
+        }
+    }, [containerWidth]);
+
+    const calculateScroll = (scrollbars: Element) => {
+        const currentScroll = scrollbars.scrollTop;
+        const maxScroll = scrollbars.scrollHeight - scrollbars.clientHeight;
+        return { currentScroll, maxScroll };
+    };
+
+    const smoothScrollToBottom = () => {
+        const scrollbars = scrollbarsRef.current?.container?.firstElementChild;
+        if (!scrollbars) return;
+
+        const { currentScroll, maxScroll } = calculateScroll(scrollbars);
+
+        if (Math.abs(maxScroll - currentScroll) > 5) {
+            window.requestAnimationFrame(smoothScrollToBottom);
+            scrollbars.scrollTo(0, currentScroll + (maxScroll - currentScroll) / 5);
+        } else {
+            scrollbars.scrollTo(0, maxScroll);
+            setIsAtBottom(true);
+        }
+    };
+
+    const smoothScrollToTop = () => {
+        const scrollbars = scrollbarsRef.current?.container?.firstElementChild;
+        if (!scrollbars) return;
+
+        const { currentScroll } = calculateScroll(scrollbars);
+
+        if (currentScroll > 0) {
+            window.requestAnimationFrame(smoothScrollToTop);
+            scrollbars.scrollTo(0, currentScroll - currentScroll / 5);
+        }
+    };
+
+    const handleScroll = () => {
+        const scrollbars = scrollbarsRef.current?.container?.firstElementChild;
+        if (!scrollbars) return;
+
+        const { currentScroll, maxScroll } = calculateScroll(scrollbars);
+
+        if (currentScroll < maxScroll) {
+            setIsAtBottom(false);
+        } else {
+            setIsAtBottom(true);
+        }
+    };
+
+    return (
+        <div
+            ref={containerRef}
+            className='display-flex flex-column height-600 position-relative padding-right-5 overflow-hidden'
+        >
+            <AnimatePresence>
+                {isAtBottom && (
+                    <motion.div
+                        initial={{ opacity: 0, top: -50 }}
+                        animate={{ opacity: 1, y: 0, top: 15 }}
+                        exit={{ opacity: 0, transition: { duration: 0.3 }, top: -50 }}
+                        className='position-absolute left-0 right-0 justify-content-center display-flex z-index-1'
+                        onClick={smoothScrollToTop}
+                    >
+                        <div className='rounded-circle bg-primary text-color-white text-center padding-x-10 padding-y-5 cursor-pointer shadow-smooth'>
+                            Older messages
+                        </div>
+                    </motion.div>
+                )}
+            </AnimatePresence>
+
+            <SmoothScrollbars slideIn ref={scrollbarsRef} onScroll={handleScroll}>
+                <div className='flex-1-1 overflow-y-auto user-select-none'>
+                    <div className='display-flex flex-column gap-10 padding-25'>
+                        <div className='display-grid gap-10'>
+                            <MessageItem
+                                hasMaxWidth={isLargeScreen}
+                                align='right'
+                                message="Hi! I'd like to get an ice cream, but I don't really like many flavors."
+                                time='10:01'
+                            />
+                            <MessageItem
+                                hasMaxWidth={isLargeScreen}
+                                isFirstNewMessage
+                                align='left'
+                                name='Ice cream vendor'
+                                message='No worries! We have some simple flavors. What do you usually enjoy?'
+                                time='10:02'
+                            />
+                            <MessageItem
+                                hasMaxWidth={isLargeScreen}
+                                isFirstNewMessage
+                                align='right'
+                                message='I’m not a fan of chocolate, strawberry, or anything with nuts.'
+                                time='10:03'
+                            />
+                            <MessageItem
+                                hasMaxWidth={isLargeScreen}
+                                isFirstNewMessage
+                                align='left'
+                                name='Ice cream vendor'
+                                message='Got it. How about vanilla? It’s classic and not too overwhelming.'
+                                time='10:04'
+                            />
+                            <MessageItem
+                                hasMaxWidth={isLargeScreen}
+                                isFirstNewMessage
+                                align='right'
+                                message='Yeah, vanilla works for me. Do you have anything else that’s mild?'
+                                time='10:05'
+                            />
+                            <MessageItem
+                                hasMaxWidth={isLargeScreen}
+                                isFirstNewMessage
+                                align='left'
+                                name='Ice cream vendor'
+                                message='We have a nice plain mango sorbet and a simple caramel ice cream as well.'
+                                time='10:06'
+                            />
+                            <MessageItem
+                                hasMaxWidth={isLargeScreen}
+                                align='left'
+                                name='Ice cream vendor'
+                                message='The mango is refreshing, while caramel is a bit richer but still simple.'
+                                time='10:07'
+                            />
+                            <MessageItem
+                                hasMaxWidth={isLargeScreen}
+                                isFirstNewMessage
+                                align='right'
+                                message='I’ll take a scoop of vanilla and mango sorbet, please.'
+                                time='10:08'
+                            />
+                            <MessageItem
+                                hasMaxWidth={isLargeScreen}
+                                isFirstNewMessage
+                                align='left'
+                                name='Ice cream vendor'
+                                message='Great choice! That’ll be ready in a moment.'
+                                time='10:09'
+                            />
+                        </div>
+
+                        <Divider>
+                            <div className='tag tag-small'>Today</div>
+                        </Divider>
+                        <div className='display-grid gap-10'>
+                            <MessageItem
+                                hasMaxWidth={isLargeScreen}
+                                align='right'
+                                message="Hey, yesterday's vanilla was great! I'd love to try something different today."
+                                time='10:01'
+                            />
+                            <MessageItem
+                                hasMaxWidth={isLargeScreen}
+                                isFirstNewMessage
+                                align='left'
+                                name='Ice cream vendor'
+                                message='Glad to hear it! We’ve got some new flavors in. What are you in the mood for?'
+                                time='10:02'
+                            />
+                            <MessageItem
+                                hasMaxWidth={isLargeScreen}
+                                isFirstNewMessage
+                                align='right'
+                                message='Maybe something fruity. What do you recommend?'
+                                time='10:03'
+                            />
+                            <MessageItem
+                                hasMaxWidth={isLargeScreen}
+                                isFirstNewMessage
+                                reaction='😍'
+                                align='left'
+                                name='Ice cream vendor'
+                                message='Our mango sorbet is a solid choice. Or if you want something lighter, we have a lemon sorbet.'
+                                time='10:04'
+                            />
+                            <MessageItem
+                                hasMaxWidth={isLargeScreen}
+                                align='left'
+                                name='Ice cream vendor'
+                                message='The lemon’s tangy and refreshing, perfect for a warm day.'
+                                time='10:05'
+                            />
+                            <MessageItem
+                                hasMaxWidth={isLargeScreen}
+                                isFirstNewMessage
+                                reaction='❤️'
+                                align='right'
+                                message='I’ll go with the lemon sorbet today. Thanks!'
+                                time='10:06'
+                            />
+                            <MessageItem
+                                hasMaxWidth={isLargeScreen}
+                                isFirstNewMessage
+                                align='left'
+                                name='Ice cream vendor'
+                                message='Coming right up!'
+                                time='10:07'
+                            />
+                        </div>
+                    </div>
+                </div>
+            </SmoothScrollbars>
+            <div className='flex-0 display-flex gap-5 align-items-end padding-y-15 padding-x-25'>
+                <div className='display-grid grid-stack width-100pct'>
+                    <textarea
+                        id='chatInputText'
+                        className='form-control overflow-hidden grid-stack-item'
+                        placeholder='Type your message'
+                        rows={1}
+                    />
+                </div>
+                <div>
+                    <button
+                        type='button'
+                        role='button'
+                        data-testid='sendButton'
+                        className='btn btn-primary btn-icon-only btn-component'
+                    >
+                        <span className='rioglyph rioglyph-send' />
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<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>
+```