"use client"; import { MessageCircle, Sparkles } from "lucide-react"; import { useCallback, useEffect, useRef, useState } from "react"; import { cn } from "@/lib/utils"; import { Button } from "@/registry/new-york/ui/button"; import AIMessage from "./ai-message"; import AIThinking from "./ai-thinking"; export interface Message { id: string; role: "user" | "assistant"; content: string; timestamp?: Date; } interface AIConversationProps { messages?: Message[]; isThinking?: boolean; isStreaming?: boolean; onRegenerate?: (messageId: string) => void; onEdit?: (messageId: string) => void; onNewMessage?: () => void; className?: string; maxHeight?: string; emptyStateTitle?: string; emptyStateDescription?: string; } const SCROLL_THRESHOLD = 100; const SCROLL_DEBOUNCE_MS = 150; function useAutoScroll( messages: Message[], isThinking: boolean, isStreaming: boolean, containerRef: React.RefObject ) { const shouldScrollRef = useRef(true); const scrollTimeoutRef = useRef(null); useEffect(() => { if (!containerRef.current) return; const container = containerRef.current; const isAtBottom = container.scrollHeight - container.scrollTop <= container.clientHeight + SCROLL_THRESHOLD; shouldScrollRef.current = isAtBottom; }, [messages, containerRef]); useEffect(() => { if (!(containerRef.current && shouldScrollRef.current)) return; if (scrollTimeoutRef.current) { clearTimeout(scrollTimeoutRef.current); } scrollTimeoutRef.current = setTimeout(() => { if (!containerRef.current) return; if (typeof window !== "undefined") { const prefersReducedMotion = window.matchMedia( "(prefers-reduced-motion: reduce)" ).matches; const scrollBehavior = prefersReducedMotion ? "auto" : "smooth"; containerRef.current.scrollTo({ top: containerRef.current.scrollHeight, behavior: scrollBehavior, }); } else { containerRef.current.scrollTop = containerRef.current.scrollHeight; } }, SCROLL_DEBOUNCE_MS); return () => { if (scrollTimeoutRef.current) { clearTimeout(scrollTimeoutRef.current); } }; }, [messages, isThinking, isStreaming, containerRef]); } function useKeyboardNavigation( messages: Message[], containerRef: React.RefObject ) { const [focusedIndex, setFocusedIndex] = useState(null); const messageRefs = useRef<(HTMLDivElement | null)[]>([]); useEffect(() => { messageRefs.current = messageRefs.current.slice(0, messages.length); }, [messages.length]); const handleKeyDown = useCallback( (e: KeyboardEvent) => { if ( !( containerRef.current && containerRef.current.contains(document.activeElement) ) ) { return; } const target = e.target as HTMLElement; if ( target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement || target.isContentEditable ) { return; } switch (e.key) { case "ArrowDown": { e.preventDefault(); if (focusedIndex === null) { setFocusedIndex(0); messageRefs.current[0]?.focus(); } else if (focusedIndex < messages.length - 1) { const nextIndex = focusedIndex + 1; setFocusedIndex(nextIndex); messageRefs.current[nextIndex]?.focus(); messageRefs.current[nextIndex]?.scrollIntoView({ block: "nearest", behavior: "smooth", }); } break; } case "ArrowUp": { e.preventDefault(); if (focusedIndex !== null && focusedIndex > 0) { const prevIndex = focusedIndex - 1; setFocusedIndex(prevIndex); messageRefs.current[prevIndex]?.focus(); messageRefs.current[prevIndex]?.scrollIntoView({ block: "nearest", behavior: "smooth", }); } else { setFocusedIndex(null); containerRef.current?.focus(); } break; } case "Home": { e.preventDefault(); if (messages.length > 0) { setFocusedIndex(0); messageRefs.current[0]?.focus(); messageRefs.current[0]?.scrollIntoView({ block: "start", behavior: "smooth", }); } break; } case "End": { e.preventDefault(); if (messages.length > 0) { const lastIndex = messages.length - 1; setFocusedIndex(lastIndex); messageRefs.current[lastIndex]?.focus(); messageRefs.current[lastIndex]?.scrollIntoView({ block: "end", behavior: "smooth", }); } break; } case "Escape": { e.preventDefault(); setFocusedIndex(null); containerRef.current?.focus(); break; } } }, [focusedIndex, messages.length, containerRef] ); useEffect(() => { window.addEventListener("keydown", handleKeyDown); return () => { window.removeEventListener("keydown", handleKeyDown); }; }, [handleKeyDown]); return { messageRefs, focusedIndex, setFocusedIndex }; } interface EmptyStateProps { title?: string; description?: string; onNewMessage?: () => void; } function EmptyState({ title = "Start a conversation", description = "Type a message below to begin chatting with the AI assistant.", onNewMessage, }: EmptyStateProps) { return (

{title}

{description}

{onNewMessage && ( )}

); } interface UserMessageProps { content: string; messageId: string; index: number; isFocused: boolean; messageRef: (el: HTMLDivElement | null) => void; } function UserMessage({ content, messageId, index, isFocused, messageRef, }: UserMessageProps) { return (

{content}

); } interface AssistantMessageProps { message: Message; index: number; isLastMessage: boolean; isStreaming: boolean; isFocused: boolean; messageRef: (el: HTMLDivElement | null) => void; onRegenerate?: (messageId: string) => void; onEdit?: (messageId: string) => void; } function AssistantMessage({ message, index, isLastMessage, isStreaming, isFocused, messageRef, onRegenerate, onEdit, }: AssistantMessageProps) { const isLastAI = isLastMessage && message.role === "assistant"; return (

onEdit(message.id) : undefined} onRegenerate={onRegenerate ? () => onRegenerate(message.id) : undefined} />

); } interface MessageListProps { messages: Message[]; isStreaming: boolean; messageRefs: React.MutableRefObject<(HTMLDivElement | null)[]>; focusedIndex: number | null; onRegenerate?: (messageId: string) => void; onEdit?: (messageId: string) => void; } function MessageList({ messages, isStreaming, messageRefs, focusedIndex, onRegenerate, onEdit, }: MessageListProps) { return (

{messages.map((message, index) => { const isLastMessage = index === messages.length - 1; const isFocused = focusedIndex === index; if (message.role === "user") { return ( { messageRefs.current[index] = el; }} /> ); } return ( { messageRefs.current[index] = el; }} onEdit={onEdit} onRegenerate={onRegenerate} /> ); })}

); } export default function AIConversation({ messages: initialMessages = [], isThinking = false, isStreaming = false, onRegenerate, onEdit, onNewMessage, className, maxHeight = "600px", emptyStateTitle, emptyStateDescription, }: AIConversationProps) { const [messages, setMessages] = useState(() => initialMessages); const containerRef = useRef(null); const prevInitialMessagesRef = useRef(initialMessages); const { messageRefs, focusedIndex, setFocusedIndex } = useKeyboardNavigation( messages, containerRef ); useAutoScroll(messages, isThinking, isStreaming, containerRef); useEffect(() => { if ( prevInitialMessagesRef.current !== initialMessages && initialMessages.length > 0 ) { prevInitialMessagesRef.current = initialMessages; const timeoutId = setTimeout(() => { setMessages(initialMessages); }, 0); return () => clearTimeout(timeoutId); } }, [initialMessages]); const handleContainerFocus = useCallback(() => { setFocusedIndex(null); }, [setFocusedIndex]); return (

{messages.length === 0 ? ( ) : ( )} {isThinking && (

)}

); }

Example Usage