'use client'; import { useCallback, useEffect, useRef, useState } from 'react'; import { AnimatePresence, motion } from 'framer-motion'; import { ArrowUp, Sparkles, X } from 'lucide-react'; import { cn } from '@/lib/cn'; import { useMessages } from '@/i18n/client'; import { ChatText } from './ChatText'; export interface ChatSeed { id: number; text: string; } interface Message { id: string; role: 'user' | 'assistant'; content: string; } interface AskAiSheetProps { open: boolean; onClose: () => void; /** Question to send as soon as the sheet opens (from a chapter's "Tanya AI" link). */ seed: ChatSeed | null; /** The report the assistant answers from — the server loads it and checks access. */ reportId: string; suggestions: string[]; } export function AskAiSheet({ open, onClose, seed, reportId, suggestions }: AskAiSheetProps) { const t = useMessages().chat; const [messages, setMessages] = useState([]); const [input, setInput] = useState(''); const [loading, setLoading] = useState(false); const scrollRef = useRef(null); const inputRef = useRef(null); const handledSeed = useRef(null); const send = useCallback( async (text: string) => { const query = text.trim(); if (!query || loading) return; const userMsg: Message = { id: crypto.randomUUID(), role: 'user', content: query }; const history = [...messages, userMsg]; setMessages(history); setInput(''); setLoading(true); let reply = t.unavailable; try { const res = await fetch('/api/chat', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: history.map(({ role, content }) => ({ role, content })), reportId, }), }); const data = await res.json(); if (data.reply) reply = data.reply; else if (data.error) reply = data.error; } catch { // fall through to the friendly error reply } setMessages((prev) => [...prev, { id: crypto.randomUUID(), role: 'assistant', content: reply }]); setLoading(false); }, [reportId, loading, messages, t.unavailable], ); useEffect(() => { if (!open || !seed || handledSeed.current === seed.id) return; handledSeed.current = seed.id; send(seed.text); }, [open, seed, send]); useEffect(() => { if (!open) return; inputRef.current?.focus(); const onKey = (e: KeyboardEvent) => e.key === 'Escape' && onClose(); document.addEventListener('keydown', onKey); return () => document.removeEventListener('keydown', onKey); }, [open, onClose]); useEffect(() => { scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight, behavior: 'smooth' }); }, [messages, loading]); return ( {open && ( <> {/* Dim only on small screens; on desktop the report stays readable beside the panel. */}