MessageScroller

// 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>  );}

// apps/docs/examples/ui/message-scroller-hooks.tsx'use client';
import {  Bubble,  BubbleContent,} from '@workspace/active-ui/components/primitives/bubble';import {Button} from '@workspace/active-ui/components/primitives/button';import {  MessageScroller,  MessageScrollerContent,  MessageScrollerItem,  MessageScrollerProvider,  MessageScrollerViewport,  useMessageScroller,  useMessageScrollerScrollable,  useMessageScrollerVisibility,} from '@workspace/active-ui/components/primitives/message-scroller';
const MESSAGES = Array.from({length: 20}, (_, index) => ({  id: `m${index + 1}`,  text: `Status update ${index + 1}`,}));
/** * The three hooks, inside the provider: buttons that scroll with * `useMessageScroller`, and a line that reads `useMessageScrollerScrollable` * (is there more above or below?) and `useMessageScrollerVisibility` (which * messages are in view). Hooks outside `MessageScrollerProvider` throw. */function Controls() {  const {scrollToStart, scrollToEnd, scrollToMessage} = useMessageScroller();  const {start, end} = useMessageScrollerScrollable();  const {visibleMessageIds} = useMessageScrollerVisibility();  const first = visibleMessageIds[0]?.slice(1);  const last = visibleMessageIds.at(-1)?.slice(1);  return (    <div className="flex flex-col gap-2">      <div className="flex flex-wrap gap-2">        <Button          variant="outline"          size="sm"          disabled={!start}          onClick={() => scrollToStart({behavior: 'smooth'})}        >          First message        </Button>        <Button          variant="outline"          size="sm"          onClick={() => scrollToMessage('m10', {align: 'center'})}        >          Message 10        </Button>        <Button          variant="outline"          size="sm"          disabled={!end}          onClick={() => scrollToEnd({behavior: 'smooth'})}        >          Newest message        </Button>      </div>      <p className="text-muted-foreground text-sm" data-message-scroller-state>        {first && last          ? `Messages ${first} to ${last} of ${MESSAGES.length} counted as in view.`          : 'No message counted as in view yet.'}{' '}        More above: {start ? 'yes' : 'no'}. More below: {end ? 'yes' : 'no'}.      </p>    </div>  );}
export default function MessageScrollerHooksExample() {  return (    <div className="flex w-full max-w-md flex-col gap-3">      <MessageScrollerProvider defaultScrollPosition="start">        <Controls />        <MessageScroller className="h-60 rounded-lg border">          <MessageScrollerViewport aria-label="Status updates">            <MessageScrollerContent className="gap-3 p-4">              {MESSAGES.map((message) => (                <MessageScrollerItem key={message.id} messageId={message.id}>                  <Bubble variant="muted" align="start">                    <BubbleContent>{message.text}</BubbleContent>                  </Bubble>                </MessageScrollerItem>              ))}            </MessageScrollerContent>          </MessageScrollerViewport>        </MessageScroller>      </MessageScrollerProvider>    </div>  );}