Message Scroller

TSX
"use client";

import { Hash } from "lucide-react";

import { Bubble, BubbleContent } from "@/components/ui/bubble";
import {
  Card,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  MessageScroller,
  MessageScrollerButton,
  MessageScrollerContent,
  MessageScrollerItem,
  MessageScrollerProvider,
  MessageScrollerViewport,
} from "@/components/ui/message-scroller";

type ThreadMessage = {
  id: string;
  author: string;
  mine: boolean;
  text: string;
};

const thread: ThreadMessage[] = [
  {
    id: "om-1",
    author: "Maya Chen",
    mine: false,
    text: "Movers confirmed for Saturday at 8:00. Please have desks cleared by Friday 17:00.",
  },
  {
    id: "om-2",
    author: "You",
    mine: true,
    text: "Will the monitors go in the same crates as the desks, or separately?",
  },
  {
    id: "om-3",
    author: "Daniel Ortiz",
    mine: false,
    text: "Separately. IT is packing screens and docks on Friday afternoon.",
  },
  {
    id: "om-4",
    author: "Maya Chen",
    mine: false,
    text: "Label every box with your new desk number. The floor plan is pinned above.",
  },
  {
    id: "om-5",
    author: "You",
    mine: true,
    text: "Got it. Mine is 4B-12, next to the window by the kitchen.",
  },
  {
    id: "om-6",
    author: "Daniel Ortiz",
    mine: false,
    text: "Badges for the new building activate Monday at 7:00. Old ones stop working the same day.",
  },
  {
    id: "om-7",
    author: "Maya Chen",
    mine: false,
    text: "Coffee and pastries on the fourth floor Monday morning to celebrate.",
  },
  {
    id: "om-8",
    author: "You",
    mine: true,
    text: "Perfect. I'll bring the plants from the old reception.",
  },
];

export default function MessageScroller01() {
  return (
    <Card className="w-full max-w-md gap-0 pb-0">
      <CardHeader className="border-b pb-4">
        <CardTitle className="flex items-center gap-1.5">
          <Hash className="size-4 text-muted-foreground" aria-hidden="true" />
          office-move
        </CardTitle>
        <CardDescription>Move to Pier 9 on Saturday, 24 members</CardDescription>
      </CardHeader>
      <MessageScrollerProvider>
        <MessageScroller className="h-80">
          <MessageScrollerViewport
            className="px-4 py-4"
            aria-label="Messages in office-move"
          >
            <MessageScrollerContent className="gap-3">
              {thread.map((message) => (
                <MessageScrollerItem
                  key={message.id}
                  messageId={message.id}
                  scrollAnchor={message.mine}
                  className="flex flex-col gap-1"
                >
                  {!message.mine ? (
                    <span className="px-3 text-xs font-medium text-muted-foreground">
                      {message.author}
                    </span>
                  ) : null}
                  <Bubble
                    variant={message.mine ? "default" : "muted"}
                    align={message.mine ? "end" : "start"}
                  >
                    <BubbleContent>{message.text}</BubbleContent>
                  </Bubble>
                </MessageScrollerItem>
              ))}
            </MessageScrollerContent>
          </MessageScrollerViewport>
          <MessageScrollerButton />
        </MessageScroller>
      </MessageScrollerProvider>
    </Card>
  );
}

TSX
"use client";

import { Sparkles } from "lucide-react";

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Bubble, BubbleContent } from "@/components/ui/bubble";
import {
  Message,
  MessageAvatar,
  MessageContent,
  MessageHeader,
} from "@/components/ui/message";
import {
  MessageScroller,
  MessageScrollerButton,
  MessageScrollerContent,
  MessageScrollerItem,
  MessageScrollerProvider,
  MessageScrollerViewport,
} from "@/components/ui/message-scroller";

type Turn = {
  id: string;
  role: "user" | "assistant";
  time: string;
  text: string;
};

const turns: Turn[] = [
  {
    id: "as-1",
    role: "user",
    time: "10:02",
    text: "Why did our p95 latency jump after Tuesday's deploy?",
  },
  {
    id: "as-2",
    role: "assistant",
    time: "10:02",
    text: "The regression lines up with the new session middleware. It now reads the user profile on every request instead of once per session, which adds a database round trip to each call.",
  },
  {
    id: "as-3",
    role: "user",
    time: "10:04",
    text: "How much of the jump does that explain?",
  },
  {
    id: "as-4",
    role: "assistant",
    time: "10:04",
    text: "Roughly 38 ms of the 45 ms increase. The remaining 7 ms comes from larger JSON payloads on the /orders endpoint, which now embeds shipping estimates.",
  },
  {
    id: "as-5",
    role: "user",
    time: "10:06",
    text: "What's the smallest fix we can ship today?",
  },
  {
    id: "as-6",
    role: "assistant",
    time: "10:06",
    text: "Cache the profile on the session object with a five-minute TTL. It's a single-file change in middleware/session.ts and keeps the new behavior for profile edits, since those already invalidate the session.",
  },
];

export default function MessageScroller02() {
  return (
    <MessageScrollerProvider>
      <MessageScroller className="h-96 w-full max-w-lg">
        <MessageScrollerViewport aria-label="Assistant conversation">
          <MessageScrollerContent className="gap-5 py-2 pe-2">
            {turns.map((turn) =>
              turn.role === "user" ? (
                <MessageScrollerItem
                  key={turn.id}
                  messageId={turn.id}
                  scrollAnchor
                >
                  <Message align="end">
                    <MessageAvatar>
                      <Avatar size="sm">
                        <AvatarImage src="/placeholder.svg" alt="" />
                        <AvatarFallback>JL</AvatarFallback>
                      </Avatar>
                    </MessageAvatar>
                    <MessageContent>
                      <Bubble variant="tinted" align="end">
                        <BubbleContent>{turn.text}</BubbleContent>
                      </Bubble>
                    </MessageContent>
                  </Message>
                </MessageScrollerItem>
              ) : (
                <MessageScrollerItem key={turn.id} messageId={turn.id}>
                  <Message>
                    <MessageAvatar className="size-6 self-start bg-primary text-primary-foreground">
                      <Sparkles className="size-3.5" aria-hidden="true" />
                    </MessageAvatar>
                    <MessageContent className="gap-1">
                      <MessageHeader>
                        Assistant
                        <span className="ms-2 font-normal tabular-nums">
                          {turn.time}
                        </span>
                      </MessageHeader>
                      <Bubble variant="ghost">
                        <BubbleContent className="text-pretty">
                          {turn.text}
                        </BubbleContent>
                      </Bubble>
                    </MessageContent>
                  </Message>
                </MessageScrollerItem>
              ),
            )}
          </MessageScrollerContent>
        </MessageScrollerViewport>
        <MessageScrollerButton variant="outline" className="shadow-sm" />
      </MessageScroller>
    </MessageScrollerProvider>
  );
}

TSX
"use client";

import { ArrowDown } from "lucide-react";

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

const review = [
  {
    id: "rv-1",
    author: "Nora Blake",
    text: "Opening the review for the billing refactor. The main change moves proration out of the invoice builder into its own module.",
  },
  {
    id: "rv-2",
    author: "Sam Whitfield",
    text: "Read through it once. The new module is much easier to follow; the old version had three nested ternaries for mid-cycle upgrades.",
  },
  {
    id: "rv-3",
    author: "Nora Blake",
    text: "That was the goal. Tests cover upgrades, downgrades, and seat changes on the same day.",
  },
  {
    id: "rv-4",
    author: "Sam Whitfield",
    text: "One question: do credits still round half-up? Finance flagged a one-cent drift last quarter.",
  },
  {
    id: "rv-5",
    author: "Nora Blake",
    text: "They round half-even now, matching the ledger service. I added a regression test with last quarter's invoice.",
  },
  {
    id: "rv-6",
    author: "Priya Nair",
    text: "Joining late. Is the migration reversible if we see drift after deploy?",
  },
  {
    id: "rv-7",
    author: "Nora Blake",
    text: "Yes. The old builder stays behind a flag for two billing cycles, and the shadow comparison job logs every mismatch.",
  },
  {
    id: "rv-8",
    author: "Priya Nair",
    text: "Perfect. Approving once the flag default is documented in the runbook.",
  },
  {
    id: "rv-9",
    author: "Sam Whitfield",
    text: "Approved from my side as well. Nice work on the test fixtures.",
  },
];

export default function MessageScroller03() {
  return (
    <MessageScrollerProvider defaultScrollPosition="start">
      <MessageScroller className="h-96 w-full max-w-md rounded-xl border bg-muted/40">
        <MessageScrollerViewport
          className="px-3 py-14"
          aria-label="Code review discussion"
        >
          <MessageScrollerContent className="gap-4">
            {review.map((comment) => (
              <MessageScrollerItem
                key={comment.id}
                messageId={comment.id}
                className="flex flex-col gap-1"
              >
                <span className="px-3 text-xs font-medium text-muted-foreground">
                  {comment.author}
                </span>
                <Bubble variant="outline">
                  <BubbleContent className="rounded-2xl rounded-ss-md">
                    {comment.text}
                  </BubbleContent>
                </Bubble>
              </MessageScrollerItem>
            ))}
          </MessageScrollerContent>
        </MessageScrollerViewport>
        <MessageScrollerButton
          direction="start"
          variant="outline"
          size="sm"
          className="rounded-full shadow-sm"
        >
          <ArrowDown aria-hidden="true" />
          First comment
        </MessageScrollerButton>
        <MessageScrollerButton
          variant="default"
          size="sm"
          className="rounded-full border-transparent bg-primary text-primary-foreground shadow-md hover:bg-primary/90 hover:text-primary-foreground"
        >
          <ArrowDown aria-hidden="true" />
          Latest comment
        </MessageScrollerButton>
      </MessageScroller>
    </MessageScrollerProvider>
  );
}

TSX
"use client";

import * as React from "react";
import { CircleAlert, Inbox, RotateCw } from "lucide-react";

import {
  Alert,
  AlertDescription,
  AlertTitle,
} from "@/components/ui/alert";
import { Bubble, BubbleContent } from "@/components/ui/bubble";
import { Button } from "@/components/ui/button";
import {
  Empty,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty";
import {
  MessageScroller,
  MessageScrollerButton,
  MessageScrollerContent,
  MessageScrollerItem,
  MessageScrollerProvider,
  MessageScrollerViewport,
} from "@/components/ui/message-scroller";
import { Skeleton } from "@/components/ui/skeleton";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";

type ViewState = "ready" | "loading" | "empty" | "error";

const states: { value: ViewState; label: string }[] = [
  { value: "ready", label: "Ready" },
  { value: "loading", label: "Loading" },
  { value: "empty", label: "Empty" },
  { value: "error", label: "Error" },
];

const messages = [
  {
    id: "st-1",
    mine: false,
    text: "Hi Omar, your replacement keyboard shipped this morning.",
  },
  { id: "st-2", mine: true, text: "Thanks! Is there a tracking number?" },
  {
    id: "st-3",
    mine: false,
    text: "Yes: 1Z 999 AA1 0123 4567 84. It should arrive Thursday.",
  },
  {
    id: "st-4",
    mine: true,
    text: "Do I need to send the old one back?",
  },
  {
    id: "st-5",
    mine: false,
    text: "Only if you want the $20 credit. A prepaid label is in the box.",
  },
  { id: "st-6", mine: true, text: "Great, I'll drop it off this weekend." },
];

const skeletonRows = [
  { id: "sk-1", mine: false, width: "w-3/5" },
  { id: "sk-2", mine: true, width: "w-2/5" },
  { id: "sk-3", mine: false, width: "w-4/5" },
  { id: "sk-4", mine: true, width: "w-1/2" },
  { id: "sk-5", mine: false, width: "w-2/3" },
];

export default function MessageScroller04() {
  const [state, setState] = React.useState<ViewState>("ready");

  return (
    <div className="flex w-full max-w-md flex-col gap-3">
      <ToggleGroup
        aria-label="Conversation state"
        variant="outline"
        size="sm"
        spacing={0}
        className="w-full"
        value={[state]}
        onValueChange={(value) => {
          const next = value[0] as ViewState | undefined;
          if (next) setState(next);
        }}
      >
        {states.map((item) => (
          <ToggleGroupItem key={item.value} value={item.value} className="flex-1">
            {item.label}
          </ToggleGroupItem>
        ))}
      </ToggleGroup>
      <MessageScrollerProvider>
        <MessageScroller className="h-80 rounded-xl border">
          <MessageScrollerViewport
            className="p-3"
            aria-label="Support conversation"
            aria-busy={state === "loading"}
          >
            <MessageScrollerContent
              className={
                state === "empty" || state === "error"
                  ? "justify-center gap-3"
                  : "gap-3"
              }
            >
              {state === "ready"
                ? messages.map((message) => (
                    <MessageScrollerItem
                      key={message.id}
                      messageId={message.id}
                      scrollAnchor={message.mine}
                      className="flex flex-col"
                    >
                      <Bubble
                        variant={message.mine ? "default" : "secondary"}
                        align={message.mine ? "end" : "start"}
                      >
                        <BubbleContent>{message.text}</BubbleContent>
                      </Bubble>
                    </MessageScrollerItem>
                  ))
                : null}
              {state === "loading" ? (
                <>
                  <span className="sr-only">Loading messages</span>
                  {skeletonRows.map((row) => (
                    <MessageScrollerItem
                      key={row.id}
                      aria-hidden="true"
                      className={
                        row.mine ? "flex justify-end" : "flex justify-start"
                      }
                    >
                      <Skeleton className={`h-10 rounded-3xl ${row.width}`} />
                    </MessageScrollerItem>
                  ))}
                </>
              ) : null}
              {state === "empty" ? (
                <MessageScrollerItem>
                  <Empty className="border-none p-4">
                    <EmptyHeader>
                      <EmptyMedia variant="icon">
                        <Inbox aria-hidden="true" />
                      </EmptyMedia>
                      <EmptyTitle>No messages yet</EmptyTitle>
                      <EmptyDescription>
                        Replies from the support team will appear here. Most
                        tickets get a first answer within two hours.
                      </EmptyDescription>
                    </EmptyHeader>
                  </Empty>
                </MessageScrollerItem>
              ) : null}
              {state === "error" ? (
                <MessageScrollerItem>
                  <Alert variant="destructive">
                    <CircleAlert aria-hidden="true" />
                    <AlertTitle>Couldn't load this conversation</AlertTitle>
                    <AlertDescription>
                      <p>
                        The connection timed out. Your messages are safe; try
                        again to reload them.
                      </p>
                      <Button
                        variant="outline"
                        size="sm"
                        onClick={() => setState("ready")}
                      >
                        <RotateCw data-icon="inline-start" aria-hidden="true" />
                        Retry
                      </Button>
                    </AlertDescription>
                  </Alert>
                </MessageScrollerItem>
              ) : null}
            </MessageScrollerContent>
          </MessageScrollerViewport>
          <MessageScrollerButton />
        </MessageScroller>
      </MessageScrollerProvider>
    </div>
  );
}

TSX
"use client";

import * as React from "react";
import {
  ChevronsDownUpIcon,
  ChevronsUpDownIcon,
  PaperclipIcon,
} from "lucide-react";

import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import {
  MessageScroller,
  MessageScrollerButton,
  MessageScrollerContent,
  MessageScrollerItem,
  MessageScrollerProvider,
  MessageScrollerViewport,
  useMessageScroller,
} from "@/components/ui/message-scroller";

type Email = {
  id: string;
  from: string;
  initials: string;
  to: string;
  date: string;
  body: string[];
  attachment?: string;
};

const emails: Email[] = [
  {
    id: "em-1",
    from: "Inês Duarte",
    initials: "ID",
    to: "to Harbor team",
    date: "Sep 12",
    body: [
      "Hi all, attached is the draft contract for the Lisbon offsite at Casa do Rio, Oct 14 to 16.",
      "It covers 42 rooms, the riverside hall for two days, and catering for all meals. The hold expires on Sep 26.",
    ],
    attachment: "casa-do-rio-contract-draft.pdf",
  },
  {
    id: "em-2",
    from: "Tom Becker",
    initials: "TB",
    to: "to Inês, Harbor team",
    date: "Sep 15",
    body: [
      "Thanks Inês. Finance is fine with the total, but the cancellation clause is 100% within 30 days. Can we get that down to 50%?",
    ],
  },
  {
    id: "em-3",
    from: "Inês Duarte",
    initials: "ID",
    to: "to Tom, Harbor team",
    date: "Sep 18",
    body: [
      "The venue agreed to 50% inside 30 days and 100% inside 7 days. Updated draft attached.",
      "They also added a free late checkout on the 16th for anyone on the afternoon flight.",
    ],
    attachment: "casa-do-rio-contract-v2.pdf",
  },
  {
    id: "em-4",
    from: "Grace Liu",
    initials: "GL",
    to: "to Inês, Tom, Harbor team",
    date: "Sep 22",
    body: [
      "Legal reviewed v2. Two small edits: the liability cap should reference the total contract value, and the governing law should be Portugal on both sides.",
      "With those in, I'm happy for Tom to sign.",
    ],
  },
  {
    id: "em-5",
    from: "Tom Becker",
    initials: "TB",
    to: "to Inês, Grace, Harbor team",
    date: "Sep 24",
    body: [
      "Signed and returned with Grace's edits. Inês, can you confirm the deposit invoice goes to finance@harbor.co?",
      "Room list is due Oct 1, so please add your travel dates to the sheet by Friday.",
    ],
  },
];

const latestId = emails[emails.length - 1].id;

function ThreadToolbar({
  allOpen,
  onToggleAll,
}: {
  allOpen: boolean;
  onToggleAll: () => void;
}) {
  const { scrollToMessage } = useMessageScroller();

  return (
    <div className="flex flex-wrap items-center justify-between gap-2 border-b px-4 py-3">
      <div className="min-w-0 flex-1">
        <h2
          id="message-scroller-05-subject"
          className="text-sm font-medium text-balance"
        >
          Re: Lisbon offsite venue contract
        </h2>
        <p className="text-xs text-muted-foreground">
          {emails.length} messages · 4 people
        </p>
      </div>
      <Button
        variant="ghost"
        size="sm"
        onClick={() => {
          onToggleAll();
          requestAnimationFrame(() =>
            scrollToMessage(latestId, { align: "start" }),
          );
        }}
      >
        {allOpen ? (
          <ChevronsDownUpIcon data-icon="inline-start" aria-hidden="true" />
        ) : (
          <ChevronsUpDownIcon data-icon="inline-start" aria-hidden="true" />
        )}
        {allOpen ? "Collapse all" : "Expand all"}
      </Button>
    </div>
  );
}

function EmailRow({
  email,
  open,
  onToggle,
}: {
  email: Email;
  open: boolean;
  onToggle: () => void;
}) {
  const bodyId = `${email.id}-body`;

  return (
    <article className="border-b last:border-b-0">
      <button
        type="button"
        aria-expanded={open}
        aria-controls={bodyId}
        onClick={onToggle}
        className="flex w-full items-start gap-3 px-4 py-3 text-start outline-none hover:bg-muted/50 focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:ring-inset"
      >
        <Avatar size="sm" className="mt-0.5">
          <AvatarFallback>{email.initials}</AvatarFallback>
        </Avatar>
        <span className="flex min-w-0 flex-1 flex-col">
          <span className="flex items-baseline justify-between gap-2">
            <span className="truncate text-sm font-medium">{email.from}</span>
            <time className="shrink-0 text-xs text-muted-foreground tabular-nums">
              {email.date}
            </time>
          </span>
          <span className="truncate text-xs text-muted-foreground">
            {open ? email.to : email.body[0]}
          </span>
        </span>
      </button>
      {open ? (
        <div id={bodyId} className="flex flex-col gap-3 ps-13 pe-4 pb-4 text-sm">
          {email.body.map((paragraph) => (
            <p key={paragraph} className="text-pretty">
              {paragraph}
            </p>
          ))}
          {email.attachment ? (
            <p className="flex w-fit max-w-full items-center gap-2 rounded-md border bg-muted/40 px-2.5 py-1.5 text-xs">
              <PaperclipIcon
                aria-hidden="true"
                className="size-3.5 shrink-0 text-muted-foreground"
              />
              <span className="truncate">{email.attachment}</span>
            </p>
          ) : null}
        </div>
      ) : null}
    </article>
  );
}

export default function MessageScroller05() {
  const [openIds, setOpenIds] = React.useState<string[]>([latestId]);
  const allOpen = openIds.length === emails.length;

  function toggle(id: string) {
    setOpenIds((current) =>
      current.includes(id)
        ? current.filter((openId) => openId !== id)
        : [...current, id],
    );
  }

  return (
    <section
      aria-labelledby="message-scroller-05-subject"
      className="flex h-[28rem] w-full max-w-lg flex-col overflow-hidden rounded-xl border bg-card text-card-foreground"
    >
      <MessageScrollerProvider
        autoScroll={false}
        defaultScrollPosition="last-anchor"
      >
        <ThreadToolbar
          allOpen={allOpen}
          onToggleAll={() =>
            setOpenIds(allOpen ? [latestId] : emails.map((email) => email.id))
          }
        />
        <MessageScroller className="min-h-0 flex-1">
          <MessageScrollerViewport aria-label="Email thread">
            <MessageScrollerContent className="gap-0">
              {emails.map((email) => (
                <MessageScrollerItem
                  key={email.id}
                  messageId={email.id}
                  scrollAnchor={email.id === latestId}
                >
                  <EmailRow
                    email={email}
                    open={openIds.includes(email.id)}
                    onToggle={() => toggle(email.id)}
                  />
                </MessageScrollerItem>
              ))}
            </MessageScrollerContent>
          </MessageScrollerViewport>
          <MessageScrollerButton variant="outline" className="shadow-sm" />
        </MessageScroller>
      </MessageScrollerProvider>
    </section>
  );
}

TSX
"use client";

import { ChevronDown, ChevronUp } from "lucide-react";

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

type Entry = { id: string; role: "user" | "assistant"; text: string };

const conversation: Entry[] = [
  {
    id: "q1",
    role: "user",
    text: "Draft a subject line for our spring sale email.",
  },
  {
    id: "a1",
    role: "assistant",
    text: "Try: \"Spring into savings: 25% off everything through Sunday.\" It leads with the benefit and gives a clear deadline.",
  },
  {
    id: "q2",
    role: "user",
    text: "Make it shorter for mobile inboxes.",
  },
  {
    id: "a2",
    role: "assistant",
    text: "\"25% off everything, ends Sunday\" fits in 32 characters, so it won't truncate on most phones.",
  },
  {
    id: "q3",
    role: "user",
    text: "What preview text should go with it?",
  },
  {
    id: "a3",
    role: "assistant",
    text: "\"New arrivals included. Free returns for 60 days.\" It adds information the subject doesn't repeat.",
  },
  {
    id: "q4",
    role: "user",
    text: "Give me an A/B variant that avoids discounts.",
  },
  {
    id: "a4",
    role: "assistant",
    text: "\"The spring collection is here\" paired with \"Linen, color, and 40 new pieces.\" Test it against the discount line on 10% of the list first.",
  },
];

const questions = conversation.filter((entry) => entry.role === "user");

function TurnStepper() {
  const { currentAnchorId } = useMessageScrollerVisibility();
  const { scrollToMessage } = useMessageScroller();
  const index = Math.max(
    0,
    questions.findIndex((question) => question.id === currentAnchorId),
  );
  const current = questions[index];

  function go(offset: number) {
    const target = questions[index + offset];
    if (target) scrollToMessage(target.id, { align: "start" });
  }

  return (
    <div className="flex items-center gap-2 border-b px-3 py-2">
      <div className="min-w-0 flex-1" aria-live="polite">
        <p className="text-xs text-muted-foreground tabular-nums">
          Question {index + 1} of {questions.length}
        </p>
        <p className="truncate text-sm font-medium">{current.text}</p>
      </div>
      <Button
        variant="ghost"
        size="icon-sm"
        aria-label="Previous question"
        disabled={index === 0}
        onClick={() => go(-1)}
      >
        <ChevronUp aria-hidden="true" />
      </Button>
      <Button
        variant="ghost"
        size="icon-sm"
        aria-label="Next question"
        disabled={index === questions.length - 1}
        onClick={() => go(1)}
      >
        <ChevronDown aria-hidden="true" />
      </Button>
    </div>
  );
}

export default function MessageScroller06() {
  return (
    <MessageScrollerProvider scrollPreviousItemPeek={24}>
      <div className="flex h-96 w-full max-w-md flex-col overflow-hidden rounded-xl border bg-card">
        <TurnStepper />
        <MessageScroller className="min-h-0 flex-1">
          <MessageScrollerViewport
            className="px-3 py-4"
            aria-label="Copywriting conversation"
          >
            <MessageScrollerContent className="gap-3">
              {conversation.map((entry) => (
                <MessageScrollerItem
                  key={entry.id}
                  messageId={entry.id}
                  scrollAnchor={entry.role === "user"}
                  className="flex flex-col"
                >
                  <Bubble
                    variant={entry.role === "user" ? "default" : "muted"}
                    align={entry.role === "user" ? "end" : "start"}
                  >
                    <BubbleContent>{entry.text}</BubbleContent>
                  </Bubble>
                </MessageScrollerItem>
              ))}
            </MessageScrollerContent>
          </MessageScrollerViewport>
          <MessageScrollerButton />
        </MessageScroller>
      </div>
    </MessageScrollerProvider>
  );
}

TSX
"use client";

import * as React from "react";
import { History } from "lucide-react";

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Bubble, BubbleContent } from "@/components/ui/bubble";
import { Button } from "@/components/ui/button";
import {
  Marker,
  MarkerContent,
  MarkerIcon,
} from "@/components/ui/marker";
import {
  MessageScroller,
  MessageScrollerButton,
  MessageScrollerContent,
  MessageScrollerItem,
  MessageScrollerProvider,
  MessageScrollerViewport,
} from "@/components/ui/message-scroller";
import { Spinner } from "@/components/ui/spinner";

type DayMessage = { id: string; mine: boolean; time: string; text: string };
type Day = { id: string; label: string; messages: DayMessage[] };

// Oldest first. The last day is visible on mount; older days load on demand.
const history: Day[] = [
  {
    id: "mar-3",
    label: "Monday, March 3",
    messages: [
      {
        id: "d1-1",
        mine: true,
        time: "09:12",
        text: "Hi Priya, welcome aboard! I'm your onboarding buddy this month.",
      },
      {
        id: "d1-2",
        mine: false,
        time: "09:20",
        text: "Thank you! Where should I start with the design system?",
      },
      {
        id: "d1-3",
        mine: true,
        time: "09:24",
        text: "Read the token guide first, then pair with Leo on the button audit.",
      },
    ],
  },
  {
    id: "mar-5",
    label: "Wednesday, March 5",
    messages: [
      {
        id: "d2-1",
        mine: false,
        time: "13:40",
        text: "Leo and I finished the audit. 14 buttons use hard-coded colors.",
      },
      {
        id: "d2-2",
        mine: true,
        time: "13:52",
        text: "Nice find. Open one ticket per surface so product teams can own them.",
      },
    ],
  },
  {
    id: "mar-10",
    label: "Monday, March 10",
    messages: [
      {
        id: "d3-1",
        mine: false,
        time: "10:05",
        text: "All 14 tickets are filed. Six are already merged.",
      },
      {
        id: "d3-2",
        mine: true,
        time: "10:07",
        text: "That's a great first week. Want to present the audit at Thursday's guild?",
      },
      {
        id: "d3-3",
        mine: false,
        time: "10:11",
        text: "Yes! I'll keep it to ten minutes with before and after screenshots.",
      },
      {
        id: "d3-4",
        mine: true,
        time: "10:12",
        text: "Perfect. I'll book the slot and share the deck template.",
      },
    ],
  },
];

export default function MessageScroller07() {
  const [loaded, setLoaded] = React.useState(1);
  const [pending, setPending] = React.useState(false);
  const days = history.slice(history.length - loaded);
  const hasMore = loaded < history.length;

  // Simulates a network round trip for the previous page of history.
  React.useEffect(() => {
    if (!pending) return;
    const timer = window.setTimeout(() => {
      setLoaded((count) => Math.min(count + 1, history.length));
      setPending(false);
    }, 700);
    return () => window.clearTimeout(timer);
  }, [pending]);

  return (
    <div className="flex h-[26rem] w-full max-w-md flex-col overflow-hidden rounded-xl border bg-card">
      <div className="flex items-center gap-3 border-b px-4 py-3">
        <Avatar>
          <AvatarImage src="/placeholder.svg" alt="" />
          <AvatarFallback>PN</AvatarFallback>
        </Avatar>
        <div className="min-w-0">
          <p className="truncate text-sm font-medium">Priya Nair</p>
          <p className="truncate text-xs text-muted-foreground">
            Product designer, joined March 3
          </p>
        </div>
      </div>
      <MessageScrollerProvider>
        <MessageScroller className="min-h-0 flex-1">
          <MessageScrollerViewport
            className="px-3 py-4"
            aria-label="Conversation with Priya Nair"
            aria-busy={pending}
          >
            {/* The loader sits outside the content so the first message changes
                on each prepend, which lets the scroller keep the reading position. */}
            <div className="flex justify-center pb-4">
              {hasMore ? (
                <Button
                  variant="ghost"
                  size="sm"
                  disabled={pending}
                  onClick={() => setPending(true)}
                >
                  {pending ? (
                    <Spinner data-icon="inline-start" />
                  ) : (
                    <History data-icon="inline-start" aria-hidden="true" />
                  )}
                  {pending ? "Loading earlier messages" : "Load earlier messages"}
                </Button>
              ) : (
                <Marker className="w-auto text-xs">
                  <MarkerIcon>
                    <History className="size-3.5" aria-hidden="true" />
                  </MarkerIcon>
                  <MarkerContent>
                    This is the start of your conversation with Priya.
                  </MarkerContent>
                </Marker>
              )}
            </div>
            <MessageScrollerContent className="gap-2">
              {days.map((day) => (
                <React.Fragment key={day.id}>
                  <MessageScrollerItem className="py-2">
                    <Marker variant="separator" className="text-xs">
                      <MarkerContent>{day.label}</MarkerContent>
                    </Marker>
                  </MessageScrollerItem>
                  {day.messages.map((message) => (
                    <MessageScrollerItem
                      key={message.id}
                      messageId={message.id}
                      scrollAnchor={message.mine}
                      className="flex flex-col gap-0.5"
                    >
                      <Bubble
                        variant={message.mine ? "default" : "muted"}
                        align={message.mine ? "end" : "start"}
                      >
                        <BubbleContent>{message.text}</BubbleContent>
                      </Bubble>
                      <time
                        className={
                          message.mine
                            ? "self-end px-3 text-[0.6875rem] text-muted-foreground tabular-nums"
                            : "px-3 text-[0.6875rem] text-muted-foreground tabular-nums"
                        }
                      >
                        {message.time}
                      </time>
                    </MessageScrollerItem>
                  ))}
                </React.Fragment>
              ))}
            </MessageScrollerContent>
          </MessageScrollerViewport>
          <MessageScrollerButton />
        </MessageScroller>
      </MessageScrollerProvider>
    </div>
  );
}

TSX
"use client";

import * as React from "react";
import {
  CheckIcon,
  MapPinIcon,
  PackageIcon,
  RefreshCwIcon,
  TruckIcon,
  WarehouseIcon,
} from "lucide-react";
import type { LucideIcon } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Marker, MarkerContent } from "@/components/ui/marker";
import {
  MessageScroller,
  MessageScrollerButton,
  MessageScrollerContent,
  MessageScrollerItem,
  MessageScrollerProvider,
  MessageScrollerViewport,
} from "@/components/ui/message-scroller";

type TrackingEvent = {
  id: string;
  day: string;
  time: string;
  title: string;
  place: string;
  icon: LucideIcon;
};

const initialEvents: TrackingEvent[] = [
  {
    id: "e1",
    day: "Mon, Sep 22",
    time: "4:18 PM",
    title: "Order confirmed",
    place: "Payment received for order #SO-48213",
    icon: CheckIcon,
  },
  {
    id: "e2",
    day: "Tue, Sep 23",
    time: "9:02 AM",
    title: "Packed and labeled",
    place: "Fulfillment center · Reno, NV",
    icon: PackageIcon,
  },
  {
    id: "e3",
    day: "Tue, Sep 23",
    time: "6:40 PM",
    title: "Picked up by carrier",
    place: "Reno, NV",
    icon: TruckIcon,
  },
  {
    id: "e4",
    day: "Wed, Sep 24",
    time: "3:15 AM",
    title: "Arrived at sorting hub",
    place: "Sacramento, CA",
    icon: WarehouseIcon,
  },
  {
    id: "e5",
    day: "Wed, Sep 24",
    time: "11:47 AM",
    title: "Departed sorting hub",
    place: "Sacramento, CA",
    icon: TruckIcon,
  },
];

const upcomingEvents: TrackingEvent[] = [
  {
    id: "e6",
    day: "Thu, Sep 25",
    time: "7:05 AM",
    title: "Arrived at local facility",
    place: "Oakland, CA",
    icon: WarehouseIcon,
  },
  {
    id: "e7",
    day: "Thu, Sep 25",
    time: "8:32 AM",
    title: "Out for delivery",
    place: "Driver is 6 stops away",
    icon: TruckIcon,
  },
  {
    id: "e8",
    day: "Thu, Sep 25",
    time: "1:14 PM",
    title: "Delivered",
    place: "Left at front door · 2140 Grand Ave",
    icon: MapPinIcon,
  },
];

export default function MessageScroller08() {
  const [events, setEvents] = React.useState(initialEvents);
  const next = upcomingEvents[events.length - initialEvents.length];
  const delivered = !next;

  function refresh() {
    if (next) setEvents((prev) => [...prev, next]);
  }

  return (
    <section
      aria-labelledby="tracking-title"
      className="flex h-[26rem] w-full max-w-sm flex-col overflow-hidden rounded-xl border bg-card text-card-foreground"
    >
      <header className="flex items-start gap-3 border-b p-4">
        <img
          src="/placeholder.svg"
          alt=""
          className="size-12 shrink-0 rounded-md border bg-muted object-cover"
        />
        <div className="min-w-0 flex-1">
          <h2 id="tracking-title" className="truncate text-sm font-medium">
            Aeron Desk Lamp, Matte Graphite
          </h2>
          <p className="text-xs text-muted-foreground">
            UPS · 1Z 999 AA1 0123 4567 84
          </p>
          <Badge
            variant={delivered ? "default" : "secondary"}
            className="mt-1.5"
          >
            {delivered ? "Delivered" : "In transit · Arrives today"}
          </Badge>
        </div>
      </header>
      <MessageScrollerProvider autoScroll>
        <MessageScroller className="flex-1">
          <MessageScrollerViewport
            className="px-4 py-3"
            aria-label="Shipment history"
          >
            <MessageScrollerContent className="gap-0">
              {events.map((event, index) => {
                const Icon = event.icon;
                const isLatest = index === events.length - 1;
                const newDay = index === 0 || events[index - 1].day !== event.day;
                return (
                  <MessageScrollerItem
                    key={event.id}
                    messageId={event.id}
                    className="flex flex-col"
                  >
                    {newDay ? (
                      <Marker variant="separator" className="py-2 text-xs">
                        <MarkerContent>{event.day}</MarkerContent>
                      </Marker>
                    ) : null}
                    <div className="grid grid-cols-[2rem_1fr] gap-3 py-2">
                      <span
                        className={
                          isLatest
                            ? "flex size-8 items-center justify-center rounded-full bg-primary text-primary-foreground"
                            : "flex size-8 items-center justify-center rounded-full bg-muted text-muted-foreground"
                        }
                      >
                        <Icon aria-hidden="true" className="size-4" />
                      </span>
                      <div className="min-w-0">
                        <p className="flex items-baseline justify-between gap-2 text-sm">
                          <span
                            className={
                              isLatest ? "font-medium" : "text-foreground/80"
                            }
                          >
                            {event.title}
                          </span>
                          <time className="shrink-0 text-xs text-muted-foreground tabular-nums">
                            {event.time}
                          </time>
                        </p>
                        <p className="text-xs text-muted-foreground">
                          {event.place}
                        </p>
                      </div>
                    </div>
                  </MessageScrollerItem>
                );
              })}
            </MessageScrollerContent>
          </MessageScrollerViewport>
          <MessageScrollerButton />
        </MessageScroller>
      </MessageScrollerProvider>
      <footer className="flex items-center justify-between gap-3 border-t p-3">
        <p className="text-xs text-muted-foreground" aria-live="polite">
          {delivered ? "Tracking complete" : `Last update ${events.at(-1)?.time}`}
        </p>
        <Button
          variant="outline"
          size="sm"
          onClick={refresh}
          disabled={delivered}
        >
          <RefreshCwIcon aria-hidden="true" data-icon="inline-start" />
          Check for updates
        </Button>
      </footer>
    </section>
  );
}

TSX
"use client";

import * as React from "react";
import { RocketIcon, RotateCcwIcon } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import {
  MessageScroller,
  MessageScrollerButton,
  MessageScrollerContent,
  MessageScrollerItem,
  MessageScrollerProvider,
  MessageScrollerViewport,
  useMessageScroller,
} from "@/components/ui/message-scroller";
import { Spinner } from "@/components/ui/spinner";
import { Switch } from "@/components/ui/switch";

type LogLevel = "info" | "warn" | "done";
type LogLine = { level: LogLevel; text: string };

const buildLog: LogLine[] = [
  { level: "info", text: "Cloning github.com/northwind/storefront (branch: main)" },
  { level: "info", text: "Cloning completed: 1.84s" },
  { level: "info", text: "Restored build cache from previous deployment" },
  { level: "info", text: "Running \"pnpm install --frozen-lockfile\"" },
  { level: "info", text: "Packages: +1,284 resolved, 0 downloaded" },
  { level: "info", text: "Done in 6.2s" },
  { level: "info", text: "Running \"pnpm run build\"" },
  { level: "info", text: "▲ Next.js 16.0.3 — Creating an optimized production build" },
  { level: "warn", text: "Warning: 2 images are missing width/height (app/page.tsx)" },
  { level: "info", text: "✓ Compiled successfully in 21.4s" },
  { level: "info", text: "✓ Linting and checking validity of types" },
  { level: "info", text: "✓ Collecting page data" },
  { level: "info", text: "✓ Generating static pages (48/48)" },
  { level: "info", text: "Route (app)               Size    First Load JS" },
  { level: "info", text: "○ /                       5.2 kB  118 kB" },
  { level: "info", text: "● /products/[slug]        3.9 kB  121 kB" },
  { level: "info", text: "Uploading build outputs (312 files)" },
  { level: "info", text: "Assigning domains: storefront.northwind.dev" },
  { level: "done", text: "Deployment ready in 48s" },
];

type Status = "idle" | "building" | "ready";

const levelClass: Record<LogLevel, string> = {
  info: "text-foreground/80",
  warn: "text-warning",
  done: "font-medium text-success",
};

// Keeps the scroller's follow state in step with the switch. Turning follow
// on jumps to the latest line. Turning it off while pinned to the bottom
// re-anchors at the end so "Jump to latest" appears as new output arrives.
function FollowSync({
  follow,
  viewportRef,
}: {
  follow: boolean;
  viewportRef: React.RefObject<HTMLDivElement | null>;
}) {
  const { scrollToEnd } = useMessageScroller();
  const previous = React.useRef(follow);

  React.useEffect(() => {
    if (previous.current === follow) return;
    previous.current = follow;
    const viewport = viewportRef.current;
    if (!viewport) return;
    if (follow) {
      scrollToEnd({ behavior: "smooth" });
      return;
    }
    const distance =
      viewport.scrollHeight - viewport.clientHeight - viewport.scrollTop;
    if (distance <= 1) scrollToEnd();
  }, [follow, scrollToEnd, viewportRef]);

  return null;
}

export default function MessageScroller09() {
  const [count, setCount] = React.useState(0);
  const [status, setStatus] = React.useState<Status>("idle");
  const [follow, setFollow] = React.useState(true);
  const followId = React.useId();
  const viewportRef = React.useRef<HTMLDivElement>(null);

  React.useEffect(() => {
    if (status !== "building") return;
    const timer = window.setInterval(() => {
      setCount((current) => Math.min(current + 1, buildLog.length));
    }, 450);
    return () => window.clearInterval(timer);
  }, [status]);

  React.useEffect(() => {
    if (status === "building" && count === buildLog.length) {
      setStatus("ready");
    }
  }, [status, count]);

  function deploy() {
    setCount(0);
    setStatus("building");
  }

  const lines = buildLog.slice(0, count);

  return (
    <section
      aria-labelledby="deploy-log-title"
      className="flex h-[26rem] w-full max-w-xl flex-col overflow-hidden rounded-xl border bg-card text-card-foreground"
    >
      <header className="flex flex-wrap items-center gap-x-3 gap-y-2 border-b px-4 py-3">
        <div className="min-w-0 flex-1">
          <h2 id="deploy-log-title" className="text-sm font-medium">
            Production deployment
          </h2>
          <p className="truncate text-xs text-muted-foreground">
            storefront · commit 8f3a2c1 “Fix cart badge overflow”
          </p>
        </div>
        <Badge
          variant={status === "ready" ? "default" : "secondary"}
          aria-live="polite"
        >
          {status === "building" ? <Spinner /> : null}
          {status === "idle"
            ? "Queued"
            : status === "building"
              ? "Building"
              : "Ready"}
        </Badge>
      </header>
      <MessageScrollerProvider autoScroll={follow}>
        <FollowSync follow={follow} viewportRef={viewportRef} />
        <MessageScroller className="flex-1 bg-muted/40">
          <MessageScrollerViewport
            ref={viewportRef}
            className="px-4 py-3"
            aria-label="Build output"
          >
            <MessageScrollerContent className="gap-0 font-mono text-xs leading-6">
              {lines.map((line, index) => (
                <MessageScrollerItem
                  key={line.text}
                  messageId={`line-${index}`}
                  className="grid grid-cols-[2.5rem_1fr] [contain-intrinsic-size:auto_1.5rem]"
                >
                  <span
                    aria-hidden="true"
                    className="text-muted-foreground tabular-nums select-none"
                  >
                    {String(index + 1).padStart(3, "0")}
                  </span>
                  <span className={`break-words ${levelClass[line.level]}`}>
                    {line.text}
                  </span>
                </MessageScrollerItem>
              ))}
              {status === "idle" ? (
                <MessageScrollerItem className="text-muted-foreground">
                  Waiting for a build runner. Start the build to stream its
                  output here.
                </MessageScrollerItem>
              ) : null}
            </MessageScrollerContent>
          </MessageScrollerViewport>
          <MessageScrollerButton size="sm" className="font-sans">
            Jump to latest
          </MessageScrollerButton>
        </MessageScroller>
      </MessageScrollerProvider>
      <footer className="flex flex-wrap items-center justify-between gap-3 border-t px-4 py-3">
        <div className="flex items-center gap-2">
          <Switch
            id={followId}
            checked={follow}
            onCheckedChange={setFollow}
            size="sm"
          />
          <Label htmlFor={followId} className="text-xs">
            Follow output
          </Label>
        </div>
        <Button
          size="sm"
          onClick={deploy}
          disabled={status === "building"}
        >
          {status === "ready" ? (
            <RotateCcwIcon aria-hidden="true" data-icon="inline-start" />
          ) : (
            <RocketIcon aria-hidden="true" data-icon="inline-start" />
          )}
          {status === "ready" ? "Redeploy" : "Start build"}
        </Button>
      </footer>
    </section>
  );
}

TSX
"use client";

import * as React from "react";
import { ArrowUpIcon, SparklesIcon, SquareIcon } from "lucide-react";

import { Bubble, BubbleContent } from "@/components/ui/bubble";
import { Button } from "@/components/ui/button";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupTextarea,
} from "@/components/ui/input-group";
import {
  MessageScroller,
  MessageScrollerButton,
  MessageScrollerContent,
  MessageScrollerItem,
  MessageScrollerProvider,
  MessageScrollerViewport,
} from "@/components/ui/message-scroller";

type Turn = { id: string; role: "user" | "assistant"; text: string };

const answers: Record<string, string> = {
  "Why did my bill go up this month?":
    "Your September invoice is $412.80, up $118.40 from August. Most of the increase comes from two places: 3 new seats added on Sept 9 (prorated at $26.40 each, $79.20 total), and 1.9 TB of extra bandwidth on the Pro plan, billed at $20 per TB over the included 2 TB ($38.00). The remaining $1.20 is sales tax on the new charges.",
  "Which seats haven't been used in 30 days?":
    "Four seats show no sign-in for 30+ days: dana.kim@northwind.dev (last seen Aug 11), ops-bot@northwind.dev (never), leo.marsh@northwind.dev (Aug 2), and a pending invite for sam.ortiz@northwind.dev. Removing them before Oct 1 would lower next month's invoice by $105.60.",
  "How do I switch to annual billing?":
    "Open Settings → Billing → Plan and choose Annual. You'll be credited for the unused days of September, and the annual Pro plan is billed at $1,980 per year for your current 12 seats — about 17% less than paying monthly.",
};

const suggestions = Object.keys(answers);

export default function MessageScroller10() {
  const [turns, setTurns] = React.useState<Turn[]>([
    {
      id: "t0",
      role: "assistant",
      text: "Hi Morgan. I can answer questions about invoices, seats, and usage for the Northwind workspace.",
    },
  ]);
  const [draft, setDraft] = React.useState("");
  const [streaming, setStreaming] = React.useState<{
    id: string;
    words: string[];
    shown: number;
  } | null>(null);

  React.useEffect(() => {
    if (!streaming) return;
    if (streaming.shown >= streaming.words.length) {
      setStreaming(null);
      return;
    }
    const timer = window.setTimeout(() => {
      const shown = streaming.shown + 2;
      setTurns((prev) =>
        prev.map((turn) =>
          turn.id === streaming.id
            ? { ...turn, text: streaming.words.slice(0, shown).join(" ") }
            : turn,
        ),
      );
      setStreaming({ ...streaming, shown });
    }, 60);
    return () => window.clearTimeout(timer);
  }, [streaming]);

  function ask(question: string) {
    const text = question.trim();
    if (!text || streaming) return;
    const answer =
      answers[text] ??
      "I couldn't find that in your billing data. Try asking about invoices, seats, or usage.";
    const id = `a${turns.length + 1}`;
    setTurns((prev) => [
      ...prev,
      { id: `u${prev.length}`, role: "user", text },
      { id, role: "assistant", text: "" },
    ]);
    setStreaming({ id, words: answer.split(" "), shown: 0 });
    setDraft("");
  }

  function stop() {
    if (!streaming) return;
    const { id } = streaming;
    setTurns((prev) =>
      prev.map((turn) =>
        turn.id === id
          ? { ...turn, text: turn.text ? `${turn.text} …` : "Response stopped." }
          : turn,
      ),
    );
    setStreaming(null);
  }

  const asked = new Set(
    turns.filter((turn) => turn.role === "user").map((turn) => turn.text),
  );
  const remaining = suggestions.filter((item) => !asked.has(item));

  return (
    <aside
      aria-labelledby="billing-assistant-title"
      className="flex h-[30rem] w-full max-w-md flex-col overflow-hidden rounded-xl border bg-background"
    >
      <header className="flex items-center gap-2 border-b px-4 py-3">
        <SparklesIcon
          aria-hidden="true"
          className="size-4 shrink-0 text-primary"
        />
        <h2
          id="billing-assistant-title"
          className="shrink-0 text-sm font-medium"
        >
          Billing assistant
        </h2>
        <span className="ms-auto min-w-0 truncate text-xs text-muted-foreground">
          Invoice INV-2026-0917
        </span>
      </header>
      <MessageScrollerProvider autoScroll scrollPreviousItemPeek={48}>
        <MessageScroller className="flex-1">
          <MessageScrollerViewport
            className="px-4 py-4"
            aria-label="Billing assistant conversation"
            aria-busy={streaming ? true : undefined}
          >
            <MessageScrollerContent className="gap-5">
              {turns.map((turn) => (
                <MessageScrollerItem
                  key={turn.id}
                  messageId={turn.id}
                  scrollAnchor={turn.role === "user"}
                  className="flex flex-col"
                >
                  {turn.role === "user" ? (
                    <Bubble variant="secondary" align="end">
                      <BubbleContent>{turn.text}</BubbleContent>
                    </Bubble>
                  ) : (
                    <Bubble variant="ghost">
                      <BubbleContent className="text-pretty">
                        {turn.text || (
                          <span className="text-muted-foreground">
                            Reading your invoices…
                          </span>
                        )}
                      </BubbleContent>
                    </Bubble>
                  )}
                </MessageScrollerItem>
              ))}
              {remaining.length > 0 && !streaming ? (
                <MessageScrollerItem className="flex flex-col items-start gap-2">
                  <p className="text-xs text-muted-foreground">
                    Suggested questions
                  </p>
                  <div className="flex w-full flex-wrap gap-2">
                    {remaining.map((item) => (
                      <Button
                        key={item}
                        variant="outline"
                        size="sm"
                        className="h-auto max-w-full py-1.5 text-start whitespace-normal"
                        onClick={() => ask(item)}
                      >
                        {item}
                      </Button>
                    ))}
                  </div>
                </MessageScrollerItem>
              ) : null}
            </MessageScrollerContent>
          </MessageScrollerViewport>
          <MessageScrollerButton />
        </MessageScroller>
      </MessageScrollerProvider>
      <form
        className="p-3"
        onSubmit={(event) => {
          event.preventDefault();
          ask(draft);
        }}
      >
        <InputGroup>
          <InputGroupTextarea
            value={draft}
            onChange={(event) => setDraft(event.target.value)}
            onKeyDown={(event) => {
              if (event.key === "Enter" && !event.shiftKey) {
                event.preventDefault();
                ask(draft);
              }
            }}
            rows={1}
            placeholder="Ask about charges, seats, or usage"
            aria-label="Ask the billing assistant"
            className="min-h-10"
          />
          <InputGroupAddon align="block-end" className="justify-between">
            <span className="text-xs text-muted-foreground">
              Answers use your live billing data
            </span>
            {streaming ? (
              <InputGroupButton
                size="icon-xs"
                variant="secondary"
                onClick={stop}
                aria-label="Stop generating"
              >
                <SquareIcon aria-hidden="true" className="fill-current" />
              </InputGroupButton>
            ) : (
              <InputGroupButton
                type="submit"
                size="icon-xs"
                variant="default"
                disabled={!draft.trim()}
                aria-label="Send question"
              >
                <ArrowUpIcon aria-hidden="true" />
              </InputGroupButton>
            )}
          </InputGroupAddon>
        </InputGroup>
      </form>
    </aside>
  );
}