Message Scroller

"use client"

import * as React from "react"

import { Bubble, BubbleContent } from "@/components/ui/bubble"
import { Button } from "@/components/ui/button"
import { Message, MessageContent } from "@/components/ui/message"
import {
  MessageScroller,
  MessageScrollerButton,
  MessageScrollerContent,
  MessageScrollerItem,
  MessageScrollerProvider,
  MessageScrollerViewport,
} from "@/components/ui/message-scroller"

const replies = ["Sounds good!", "On my way.", "Can you share the file?", "Thanks!", "See you at 10."]

// A transcript that sticks to the newest message; scroll up and the button
// brings you back down.
export default function MessageScrollerDemo() {
  const [messages, setMessages] = React.useState(() =>
    Array.from({ length: 8 }, (_, index) => ({ id: String(index), mine: index % 2 === 1, text: replies[index % replies.length] }))
  )

  return (
    <div className="flex w-full max-w-sm flex-col gap-3">
      <MessageScrollerProvider>
        <MessageScroller className="h-64 rounded-[14px] bg-mac-content shadow-[0_0_0_1px_var(--mac-grid)]">
          <MessageScrollerViewport>
            <MessageScrollerContent className="gap-2 p-3">
              {messages.map((message) => (
                <MessageScrollerItem key={message.id} messageId={message.id}>
                  <Message align={message.mine ? "end" : "start"}>
                    <MessageContent>
                      <Bubble variant={message.mine ? "default" : "secondary"}>
                        <BubbleContent>{message.text}</BubbleContent>
                      </Bubble>
                    </MessageContent>
                  </Message>
                </MessageScrollerItem>
              ))}
            </MessageScrollerContent>
          </MessageScrollerViewport>
          <MessageScrollerButton />
        </MessageScroller>
      </MessageScrollerProvider>
      <Button
        variant="secondary"
        className="self-center"
        onClick={() =>
          setMessages((list) => [...list, { id: String(list.length), mine: list.length % 2 === 1, text: replies[list.length % replies.length] }])
        }
      >
        Add Message
      </Button>
    </div>
  )
}