Message scroller

"use client"
import * as React from "react"
import { AiMark } from "@/components/ui/ai-mark"import { Bubble, BubbleContent } from "@/components/ui/bubble"import { Button } from "@/components/ui/button"import { Message, MessageContent, MessageHeader } from "@/components/ui/message"import {  MessageScroller,  MessageScrollerButton,  MessageScrollerContent,  MessageScrollerItem,  MessageScrollerProvider,  MessageScrollerViewport,} from "@/components/ui/message-scroller"
const turns = [  ["Which vendors went over budget in Q3?", "Four vendors went over: Northbeam Logistics by $38,200, Kestrel Analytics by $6,450, Vantage Print by $2,100 and Orbis Cloud by $1,240. Northbeam accounts for 81% of the overrun."],  ["Why is Northbeam so far over?", "Freight volume to Rotterdam doubled in August after the Halcyon launch, and the contract has no volume discount above 400 pallets a month."],  ["Is there a better rate anywhere?", "The 2025 quote from Meridian Freight was 14% lower above 400 pallets. It expired in March, so we would need a new quote."],  ["Draft an email asking Meridian for a new quote.", "Here is a draft to Leah Brooks at Meridian, asking for a 12 month rate on 400 to 900 pallets a month to Rotterdam, starting in December."],]
export default function MessageScrollerThread() {  const [count, setCount] = React.useState(3)  return (    <div className="flex w-full flex-col gap-3">      <div className="h-96 w-full overflow-hidden rounded-xl border bg-background">        <MessageScrollerProvider autoScroll>          <MessageScroller>            <MessageScrollerViewport>              <MessageScrollerContent className="mx-auto max-w-xl px-4 py-6">                {turns.slice(0, count).map(([question, answer], i) => (                  <React.Fragment key={i}>                    <MessageScrollerItem messageId={`q${i}`} scrollAnchor>                      <Message from="user">                        <MessageContent>                          <Bubble align="end">                            <BubbleContent>{question}</BubbleContent>                          </Bubble>                        </MessageContent>                      </Message>                    </MessageScrollerItem>                    <MessageScrollerItem messageId={`a${i}`}>                      <Message from="assistant">                        <MessageContent className="gap-1">                          <MessageHeader>                            <AiMark />                            Ledgerline Copilot                          </MessageHeader>                          <p>{answer}</p>                        </MessageContent>                      </Message>                    </MessageScrollerItem>                  </React.Fragment>                ))}              </MessageScrollerContent>            </MessageScrollerViewport>            <MessageScrollerButton />          </MessageScroller>        </MessageScrollerProvider>      </div>      <Button        variant="outline"        size="sm"        className="self-start"        onClick={() => setCount((c) => (c >= turns.length ? 1 : c + 1))}      >        {count >= turns.length ? "Start over" : "Ask the next question"}      </Button>    </div>  )}

"use client"
import { Message, MessageContent, MessageHeader, MessageMeta } from "@/components/ui/message"import {  MessageScroller,  MessageScrollerButton,  MessageScrollerContent,  MessageScrollerItem,  MessageScrollerProvider,  MessageScrollerViewport,} from "@/components/ui/message-scroller"
const events = [  "Pulled 1,284 card transactions from the September statement",  "Matched 1,251 transactions to receipts",  "Flagged 19 transactions without receipts",  "Asked 7 cardholders for missing receipts",  "Coded 1,262 transactions to GL accounts",  "Sent 22 transactions to Priya Shah for review",  "Posted the September card journal entry",  "Closed the September card reconciliation",]
export default function MessageScrollerHistory() {  return (    <div className="h-72 w-full overflow-hidden rounded-xl border bg-background">      <MessageScrollerProvider defaultScrollPosition="start">        <MessageScroller>          <MessageScrollerViewport aria-label="Agent activity">            <MessageScrollerContent className="mx-auto max-w-xl gap-4 px-4 py-5">              {events.map((event, i) => (                <MessageScrollerItem key={event} messageId={`e${i}`}>                  <Message from="assistant">                    <MessageContent className="gap-0">                      <MessageHeader className="h-auto">                        Step {i + 1}                        <MessageMeta>{`9:${10 + i * 4} AM`}</MessageMeta>                      </MessageHeader>                      <p className="text-sm text-muted-foreground">{event}</p>                    </MessageContent>                  </Message>                </MessageScrollerItem>              ))}            </MessageScrollerContent>          </MessageScrollerViewport>          <MessageScrollerButton direction="start" />          <MessageScrollerButton />        </MessageScroller>      </MessageScrollerProvider>    </div>  )}