Message Scroller

import {
  Message,
  MessageBubble,
  MessageBubbleContent,
} from "@/components/ui/hiip-ui/message";
import {
  MessageScroller,
  MessageScrollerButton,
  MessageScrollerContent,
  MessageScrollerItem,
  MessageScrollerProvider,
  MessageScrollerViewport,
} from "@/components/ui/hiip-ui/message-scroller";

const MESSAGE_SCROLLER_ROWS = Array.from(
  { length: 14 },
  (_, i) => `Message ${i + 1}`,
);

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}
                >
                  <Message
                    variant={i % 3 === 0 ? "sent" : "received"}
                    align={i % 3 === 0 ? "end" : "start"}
                  >
                    <MessageBubble>
                      <MessageBubbleContent>{row}</MessageBubbleContent>
                    </MessageBubble>
                  </Message>
                </MessageScrollerItem>
              ))}
            </MessageScrollerContent>
          </MessageScrollerViewport>
          <MessageScrollerButton />
        </MessageScroller>
      </MessageScrollerProvider>
    </div>
  );
}