Conversation Thread

1"use client";
2 
3import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
4import * as React from "react";
5 
6export type ConversationVariant = "bubbles" | "document" | "compact";
7export type MessageRole = "user" | "assistant" | "system";
8 
9type ThreadContextValue = { variant: ConversationVariant };
10const ThreadContext = React.createContext<ThreadContextValue>({
11  variant: "bubbles",
12});
13 
14export type ConversationThreadProps = React.HTMLAttributes<HTMLDivElement> & {
15  variant?: ConversationVariant;
16  /** Auto-stick to the newest message unless the user scrolls up. */
17  autoScroll?: boolean;
18};
19 
20const THREAD_BASE =
21  "relative flex h-full flex-col gap-4 overflow-y-auto px-4 py-4";
22 
23const ConversationThread = React.forwardRef<
24  HTMLDivElement,
25  ConversationThreadProps
26>(
27  (
28    { variant = "bubbles", autoScroll = true, className, children, ...props },
29    forwardedRef,
30  ) => {
31    const ref = React.useRef<HTMLDivElement>(null);
32    const contentRef = React.useRef<HTMLDivElement>(null);
33    React.useImperativeHandle(
34      forwardedRef,
35      () => ref.current as HTMLDivElement,
36    );
37    const [pinned, setPinned] = React.useState(true);
38    // Ref mirror so ResizeObserver / effects never read a stale `pinned`.
39    const pinnedRef = React.useRef(true);
40 
41    const setPinnedBoth = React.useCallback((next: boolean) => {
42      pinnedRef.current = next;
43      setPinned(next);
44    }, []);
45 
46    const scrollToBottom = React.useCallback((behavior: ScrollBehavior) => {
47      const el = ref.current;
48      if (!el) return;
49      // `instant` keeps streaming growth glued without fighting layout;
50      // `smooth` is reserved for the intentional Jump-to-latest click.
51      if (typeof el.scrollTo === "function") {
52        el.scrollTo({ top: el.scrollHeight, behavior });
53      } else {
54        el.scrollTop = el.scrollHeight;
55      }
56    }, []);
57 
58    // Stick to the bottom when a new message mounts.
59    const childCount = React.Children.count(children);
60    // biome-ignore lint/correctness/useExhaustiveDependencies: re-pin when a message is added
61    React.useEffect(() => {
62      if (autoScroll && pinnedRef.current) scrollToBottom("instant");
63    }, [childCount, autoScroll, scrollToBottom]);
64 
65    // Stick through *content* growth too (StreamingText ticks, wrapping) —
66    // childCount alone misses that. Observe the inner stack, not the scroll
67    // port: ResizeObserver on an overflow container does not fire when only
68    // scrollHeight grows.
69// … truncated