Message Scroller

function MessageScrollerDemo() {
  return (
    <div className="h-64 w-full max-w-sm rounded-lg border">
      <MessageScrollerProvider>
        <MessageScroller>
          <MessageScrollerViewport className="p-3">
            <MessageScrollerContent className="gap-2">
              {MESSAGE_SCROLLER_ROWS.map((row, i) => (
                <MessageScrollerItem
                  key={row}
                  scrollAnchor={i === MESSAGE_SCROLLER_ROWS.length - 1}
                >
                  <Bubble
                    variant={i % 3 === 0 ? "sent" : "received"}
                    align={i % 3 === 0 ? "end" : "start"}
                  >
                    <BubbleContent>{row}</BubbleContent>
                  </Bubble>
                </MessageScrollerItem>
              ))}
            </MessageScrollerContent>
          </MessageScrollerViewport>
          <MessageScrollerButton />
        </MessageScroller>
      </MessageScrollerProvider>
    </div>
  );
}