AI Conversation

1"use client";
2 
3import { MessageCircle, Sparkles } from "lucide-react";
4import { useCallback, useEffect, useRef, useState } from "react";
5import { cn } from "@/lib/utils";
6import { Button } from "@/registry/new-york/ui/button";
7import AIMessage from "./ai-message";
8import AIThinking from "./ai-thinking";
9 
10export interface Message {
11  id: string;
12  role: "user" | "assistant";
13  content: string;
14  timestamp?: Date;
15}
16 
17interface AIConversationProps {
18  messages?: Message[];
19  isThinking?: boolean;
20  isStreaming?: boolean;
21  onRegenerate?: (messageId: string) => void;
22  onEdit?: (messageId: string) => void;
23  onNewMessage?: () => void;
24  className?: string;
25  maxHeight?: string;
26  emptyStateTitle?: string;
27  emptyStateDescription?: string;
28}
29 
30const SCROLL_THRESHOLD = 100;
31const SCROLL_DEBOUNCE_MS = 150;
32 
33function useAutoScroll(
34  messages: Message[],
35  isThinking: boolean,
36  isStreaming: boolean,
37  containerRef: React.RefObject<HTMLDivElement | null>
38) {
39  const shouldScrollRef = useRef(true);
40  const scrollTimeoutRef = useRef<NodeJS.Timeout | null>(null);
41 
42  useEffect(() => {
43    if (!containerRef.current) return;
44 
45    const container = containerRef.current;
46    const isAtBottom =
47      container.scrollHeight - container.scrollTop <=
48      container.clientHeight + SCROLL_THRESHOLD;
49 
50    shouldScrollRef.current = isAtBottom;
51  }, [messages, containerRef]);
52 
53  useEffect(() => {
54    if (!(containerRef.current && shouldScrollRef.current)) return;
55 
56    if (scrollTimeoutRef.current) {
57      clearTimeout(scrollTimeoutRef.current);
58    }
59 
60    scrollTimeoutRef.current = setTimeout(() => {
61      if (!containerRef.current) return;
62 
63      if (typeof window !== "undefined") {
64        const prefersReducedMotion = window.matchMedia(
65          "(prefers-reduced-motion: reduce)"
66        ).matches;
67 
68        const scrollBehavior = prefersReducedMotion ? "auto" : "smooth";
69        containerRef.current.scrollTo({
70          top: containerRef.current.scrollHeight,
71          behavior: scrollBehavior,
72        });
73      } else {
74        containerRef.current.scrollTop = containerRef.current.scrollHeight;
75      }
76    }, SCROLL_DEBOUNCE_MS);
77 
78    return () => {
79      if (scrollTimeoutRef.current) {
80        clearTimeout(scrollTimeoutRef.current);
81      }
82    };
83  }, [messages, isThinking, isStreaming, containerRef]);
84}
85 
86function useKeyboardNavigation(
87  messages: Message[],
88  containerRef: React.RefObject<HTMLDivElement | null>
89) {
90// … truncated