# Chat

*Category:* Components
*Section:* CSS Only
*Source:* https://uikit.developers.rio.cloud/#/components/chat
*Captured:* 2026-04-27T14:58:35.540Z

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

#### 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="position-absolute left-0 right-0 justify-content-center display-flex z-index-1" style="opacity: 0; top: -1.74902px; transform: none;">
        <div class="rounded-circle bg-primary text-color-white text-center padding-x-10 padding-y-5 cursor-pointer shadow-smooth">Older messages</div>
    </div>
    <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>
```