A conversation that follows new messages

// apps/docs/examples/ui/message-scroller.tsx'use client';
import {useState} from 'react';
import {  Bubble,  BubbleContent,} from '@workspace/active-ui/components/primitives/bubble';import {Button} from '@workspace/active-ui/components/primitives/button';import {  MessageScroller,  MessageScrollerButton,  MessageScrollerContent,  MessageScrollerItem,  MessageScrollerProvider,  MessageScrollerViewport,} from '@workspace/active-ui/components/primitives/message-scroller';
const START = Array.from({length: 12}, (_, index) => ({  id: `m${index + 1}`,  text: `Status update ${index + 1}`,  mine: index % 3 === 2,}));
/** * A conversation that scrolls: it opens at the newest message, follows new * messages while you are at the end (`autoScroll`), and shows a button to jump back when * you have scrolled up. New messages are added by the button below (no * server: they are made in the browser). */export default function MessageScrollerExample() {  const [messages, setMessages] = useState(START);  const add = () =>    setMessages((current) => [      ...current,      {        id: `m${current.length + 1}`,        text: `Status update ${current.length + 1}`,        mine: false,      },    ]);  return (    <div className="flex w-full max-w-md flex-col gap-3">      <MessageScrollerProvider autoScroll>        <MessageScroller className="h-72 rounded-lg border">          <MessageScrollerViewport aria-label="Conversation">            <MessageScrollerContent className="gap-3 p-4">              {messages.map((message) => (                <MessageScrollerItem key={message.id} messageId={message.id}>                  <Bubble                    variant={message.mine ? 'default' : 'muted'}                    align={message.mine ? 'end' : 'start'}                  >                    <BubbleContent>{message.text}</BubbleContent>                  </Bubble>                </MessageScrollerItem>              ))}            </MessageScrollerContent>          </MessageScrollerViewport>          <MessageScrollerButton label="Jump to the newest message" />        </MessageScroller>      </MessageScrollerProvider>      <Button variant="outline" className="self-start" onClick={add}>        Add a message      </Button>    </div>  );}