Ai Conversation

1"use client";
2 
3import { cn } from "@/lib/utils";
4import { ArrowDown } from "lucide-react";
5import { AnimatePresence, motion, useReducedMotion } from "motion/react";
6import {
7  type ReactNode,
8  useCallback,
9  useEffect,
10  useLayoutEffect,
11  useRef,
12  useState,
13} from "react";
14 
15const SPRING_DEFAULT = {
16  bounce: 0.1,
17  duration: 0.25,
18  type: "spring" as const,
19};
20/**
21 * How close to the bottom still counts as "at the bottom".
22 *
23 * Zero would break on fractional scroll heights, and anything large would keep
24 * yanking the view down while someone is reading a few lines up.
25 */
26const BOTTOM_THRESHOLD_PX = 48;
27 
28export type AIConversationProps = {
29  children: ReactNode;
30  className?: string;
31  /**
32   * Changes whenever content grows — message count, or streamed text length.
33   * Used to decide when to follow the bottom.
34   */
35  contentKey?: string | number;
36};
37 
38/**
39 * Scroll container for a thread.
40 *
41 * It follows the bottom **only while the reader is already there**. Scrolling up
42 * during a stream is an explicit act — the user wants to read something — and
43 * dragging them back down is the single most common way chat UIs become
44 * unusable. When it stops following, a pill appears to offer the trip back.
45 */
46const AIConversation = ({
47  children,
48  className,
49  contentKey,
50}: AIConversationProps) => {
51  const shouldReduceMotion = useReducedMotion();
52  const viewportRef = useRef<HTMLDivElement | null>(null);
53  const [isPinned, setIsPinned] = useState(true);
54 
55  const measure = useCallback(() => {
56    const viewport = viewportRef.current;
57    if (!viewport) {
58      return;
59    }
60    const distance =
61      viewport.scrollHeight - viewport.scrollTop - viewport.clientHeight;
62    setIsPinned(distance <= BOTTOM_THRESHOLD_PX);
63  }, []);
64 
65  const scrollToBottom = useCallback((behavior: ScrollBehavior) => {
66    const viewport = viewportRef.current;
67    if (!viewport) {
68      return;
69    }
70    // Element.scrollTo is missing in jsdom and in a few older engines, and it is
71    // not worth throwing over — assigning scrollTop lands in the same place,
72    // just without the smoothing.
73    if (typeof viewport.scrollTo === "function") {
74      viewport.scrollTo({ behavior, top: viewport.scrollHeight });
75    } else {
76      viewport.scrollTop = viewport.scrollHeight;
77    }
78    setIsPinned(true);
79  }, []);
80 
81  // Layout effect, so the jump happens in the same frame the content grew and
82  // the reader never sees a flash of the pre-scroll position.
83  useLayoutEffect(() => {
84// … truncated