| import { AnimatePresence, motion } from "framer-motion"; |
| import { History, Mic, Send, Sparkles, Trash2, X } from "lucide-react"; |
| import { useCallback, useEffect, useRef, useState } from "react"; |
| import { Button } from "@/components/ui/button"; |
| import { cn } from "@/lib/utils"; |
|
|
| export interface ChatMessage { |
| id: string; |
| role: "user" | "assistant"; |
| content: string; |
| ts: number; |
| } |
|
|
| export interface ChatSession { |
| id: string; |
| title: string; |
| messages: ChatMessage[]; |
| createdAt: number; |
| updatedAt: number; |
| } |
|
|
| const STORAGE_KEY = "qhub_chat_sessions"; |
| const ACTIVE_KEY = "qhub_active_session"; |
| const WELCOME_MSG: ChatMessage = { |
| id: "w", |
| role: "assistant", |
| content: "Welcome to QHub. The sky listens.", |
| ts: Date.now(), |
| }; |
|
|
| function loadSessions(): ChatSession[] { |
| try { |
| const raw = localStorage.getItem(STORAGE_KEY); |
| return raw ? (JSON.parse(raw) as ChatSession[]) : []; |
| } catch { |
| return []; |
| } |
| } |
|
|
| function saveSessions(sessions: ChatSession[]) { |
| try { |
| localStorage.setItem(STORAGE_KEY, JSON.stringify(sessions)); |
| } catch { } |
| } |
|
|
| function newSession(): ChatSession { |
| return { |
| id: crypto.randomUUID(), |
| title: `Chat ${new Date().toLocaleString("fa-IR", { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" })}`, |
| messages: [{ ...WELCOME_MSG, id: crypto.randomUUID(), ts: Date.now() }], |
| createdAt: Date.now(), |
| updatedAt: Date.now(), |
| }; |
| } |
|
|
| interface ChatPanelProps { |
| onSpeakingChange?: (speaking: boolean) => void; |
| } |
|
|
| export function ChatPanel({ onSpeakingChange }: ChatPanelProps) { |
| const [expanded, setExpanded] = useState(false); |
| const [historyOpen, setHistoryOpen] = useState(false); |
| const [sessions, setSessions] = useState<ChatSession[]>(() => { |
| const saved = loadSessions(); |
| if (saved.length > 0) return saved; |
| const first = newSession(); |
| saveSessions([first]); |
| return [first]; |
| }); |
| const [activeId, setActiveId] = useState<string>(() => { |
| const saved = localStorage.getItem(ACTIVE_KEY); |
| const all = loadSessions(); |
| if (saved && all.find(s => s.id === saved)) return saved; |
| return all[0]?.id ?? newSession().id; |
| }); |
|
|
| const activeSession = sessions.find(s => s.id === activeId) ?? sessions[0]; |
| const messages = activeSession?.messages ?? [WELCOME_MSG]; |
|
|
| const [draft, setDraft] = useState(""); |
| const [thinking, setThinking] = useState(false); |
| const [listening, setListening] = useState(false); |
| const scrollRef = useRef<HTMLDivElement>(null); |
|
|
| |
| useEffect(() => { |
| saveSessions(sessions); |
| }, [sessions]); |
|
|
| useEffect(() => { |
| localStorage.setItem(ACTIVE_KEY, activeId); |
| }, [activeId]); |
|
|
| useEffect(() => { |
| scrollRef.current?.scrollTo({ top: 1e9, behavior: "smooth" }); |
| }, [messages, expanded]); |
|
|
| const updateActiveMessages = useCallback((updater: (prev: ChatMessage[]) => ChatMessage[]) => { |
| setSessions(prev => |
| prev.map(s => |
| s.id === activeId |
| ? { ...s, messages: updater(s.messages), updatedAt: Date.now() } |
| : s |
| ) |
| ); |
| }, [activeId]); |
|
|
| const send = useCallback(() => { |
| const text = draft.trim(); |
| if (!text) return; |
| const userMsg: ChatMessage = { id: crypto.randomUUID(), role: "user", content: text, ts: Date.now() }; |
| updateActiveMessages(m => [...m, userMsg]); |
| |
| setSessions(prev => |
| prev.map(s => { |
| if (s.id !== activeId) return s; |
| const isDefault = s.title.startsWith("Chat "); |
| return isDefault && s.messages.filter(x => x.role === "user").length === 0 |
| ? { ...s, title: text.slice(0, 40) + (text.length > 40 ? "…" : "") } |
| : s; |
| }) |
| ); |
| setDraft(""); |
| setThinking(true); |
| onSpeakingChange?.(true); |
| setTimeout(() => { |
| const reply: ChatMessage = { |
| id: crypto.randomUUID(), |
| role: "assistant", |
| content: synthesize(text), |
| ts: Date.now(), |
| }; |
| updateActiveMessages(m => [...m, reply]); |
| setThinking(false); |
| onSpeakingChange?.(false); |
| }, 900 + Math.random() * 800); |
| }, [draft, onSpeakingChange, updateActiveMessages, activeId]); |
|
|
| const startNewSession = useCallback(() => { |
| const s = newSession(); |
| setSessions(prev => [s, ...prev]); |
| setActiveId(s.id); |
| setHistoryOpen(false); |
| setExpanded(true); |
| }, []); |
|
|
| const switchSession = useCallback((id: string) => { |
| setActiveId(id); |
| setHistoryOpen(false); |
| setExpanded(true); |
| }, []); |
|
|
| const deleteSession = useCallback((id: string) => { |
| setSessions(prev => { |
| const next = prev.filter(s => s.id !== id); |
| if (next.length === 0) { |
| const fresh = newSession(); |
| saveSessions([fresh]); |
| setActiveId(fresh.id); |
| return [fresh]; |
| } |
| if (id === activeId) setActiveId(next[0].id); |
| return next; |
| }); |
| }, [activeId]); |
|
|
| return ( |
| <motion.div |
| layout |
| className={cn("fixed z-30 bottom-4 left-1/2 -translate-x-1/2 w-[min(640px,92vw)]")} |
| transition={{ type: "spring", stiffness: 180, damping: 24 }} |
| > |
| {/* ── History side-panel ── */} |
| <AnimatePresence> |
| {historyOpen && ( |
| <motion.div |
| key="history" |
| initial={{ opacity: 0, x: -20 }} |
| animate={{ opacity: 1, x: 0 }} |
| exit={{ opacity: 0, x: -20 }} |
| transition={{ duration: 0.3, ease: [0.22, 1, 0.36, 1] }} |
| className="absolute bottom-full mb-2 left-0 w-64 glass-strong rounded-2xl overflow-hidden shadow-2xl" |
| > |
| <div className="flex items-center justify-between px-4 py-2.5 border-b border-white/5"> |
| <span className="text-xs font-semibold text-foreground/80">تاریخچه مکالمات</span> |
| <div className="flex items-center gap-1"> |
| <button |
| onClick={startNewSession} |
| className="text-[10px] px-2 py-0.5 rounded-full bg-primary/20 text-primary hover:bg-primary/30 transition-colors" |
| title="مکالمه جدید" |
| > |
| + جدید |
| </button> |
| <button onClick={() => setHistoryOpen(false)} className="text-muted-foreground hover:text-foreground transition-colors ml-1"> |
| <X className="w-3.5 h-3.5" /> |
| </button> |
| </div> |
| </div> |
| <div className="max-h-64 overflow-y-auto py-1"> |
| {sessions.length === 0 && ( |
| <p className="text-xs text-muted-foreground text-center py-4">هیچ مکالمهای ذخیره نشده</p> |
| )} |
| {sessions.map(s => ( |
| <div |
| key={s.id} |
| className={cn( |
| "group flex items-center gap-2 px-4 py-2 cursor-pointer transition-colors hover:bg-primary/5", |
| s.id === activeId && "bg-primary/10" |
| )} |
| onClick={() => switchSession(s.id)} |
| > |
| <div className="flex-1 min-w-0"> |
| <div className="text-xs font-medium truncate text-foreground/90">{s.title}</div> |
| <div className="text-[10px] text-muted-foreground mt-0.5"> |
| {s.messages.length} پیام · {new Date(s.updatedAt).toLocaleDateString("fa-IR")} |
| </div> |
| </div> |
| <button |
| onClick={e => { e.stopPropagation(); deleteSession(s.id); }} |
| className="opacity-0 group-hover:opacity-100 text-muted-foreground hover:text-destructive transition-all" |
| title="حذف مکالمه" |
| > |
| <Trash2 className="w-3 h-3" /> |
| </button> |
| </div> |
| ))} |
| </div> |
| </motion.div> |
| )} |
| </AnimatePresence> |
| |
| {/* ── Messages panel ── */} |
| <AnimatePresence initial={false}> |
| {expanded && ( |
| <motion.div |
| key="messages" |
| initial={{ opacity: 0, y: 16, height: 0 }} |
| animate={{ opacity: 1, y: 0, height: "auto" }} |
| exit={{ opacity: 0, y: 16, height: 0 }} |
| transition={{ duration: 0.35, ease: [0.22, 1, 0.36, 1] }} |
| className="glass-strong rounded-3xl mb-2 overflow-hidden" |
| > |
| <div className="flex items-center justify-between px-4 py-2 border-b border-white/5"> |
| <div className="flex items-center gap-2 text-xs text-muted-foreground min-w-0"> |
| <span className="w-1.5 h-1.5 rounded-full bg-primary animate-pulse shrink-0" /> |
| <span className="truncate max-w-[160px]" title={activeSession?.title}> |
| {activeSession?.title ?? "Live channel"} |
| </span> |
| </div> |
| <div className="flex items-center gap-1.5"> |
| <button |
| onClick={() => updateActiveMessages(() => [{ ...WELCOME_MSG, id: crypto.randomUUID(), ts: Date.now() }])} |
| className="text-muted-foreground hover:text-destructive transition-colors" |
| title="پاک کردن مکالمه" |
| > |
| <Trash2 className="w-3.5 h-3.5" /> |
| </button> |
| <button onClick={() => setExpanded(false)} className="text-muted-foreground hover:text-foreground transition-colors"> |
| <X className="w-4 h-4" /> |
| </button> |
| </div> |
| </div> |
| <div ref={scrollRef} className="max-h-72 overflow-y-auto px-4 py-3 space-y-3"> |
| {messages.map(m => ( |
| <motion.div |
| key={m.id} |
| initial={{ opacity: 0, y: 8 }} |
| animate={{ opacity: 1, y: 0 }} |
| className={cn("flex", m.role === "user" ? "justify-end" : "justify-start")} |
| > |
| <div |
| className={cn( |
| "max-w-[80%] rounded-2xl px-3.5 py-2 text-sm leading-relaxed", |
| m.role === "user" |
| ? "bg-primary/15 text-foreground border border-primary/30" |
| : "glass text-foreground/90" |
| )} |
| > |
| {m.content} |
| </div> |
| </motion.div> |
| ))} |
| {thinking && ( |
| <div className="flex items-center gap-1.5 text-xs text-muted-foreground pl-1"> |
| <Sparkles className="w-3 h-3 animate-pulse" /> |
| thinking |
| <span className="flex gap-0.5"> |
| {[0, 1, 2].map(i => ( |
| <span key={i} className="w-1 h-1 rounded-full bg-primary/70 animate-pulse" style={{ animationDelay: `${i * 0.15}s` }} /> |
| ))} |
| </span> |
| </div> |
| )} |
| </div> |
| </motion.div> |
| )} |
| </AnimatePresence> |
| |
| {/* ── Input bar ── */} |
| <div className="glass-strong rounded-full pl-2 pr-1.5 py-1.5 flex items-center gap-2"> |
| {/* History button */} |
| <button |
| onClick={() => setHistoryOpen(h => !h)} |
| className={cn("rounded-full h-8 w-8 grid place-items-center transition-colors", |
| historyOpen ? "bg-primary/20 text-primary" : "text-muted-foreground hover:text-primary")} |
| aria-label="تاریخچه مکالمات" |
| title="تاریخچه مکالمات" |
| > |
| <History className="w-4 h-4" /> |
| </button> |
| {/* Toggle messages */} |
| <button |
| onClick={() => setExpanded(e => !e)} |
| className="text-muted-foreground hover:text-primary transition-colors" |
| aria-label="Toggle messages" |
| > |
| <Sparkles className="w-4 h-4" /> |
| </button> |
| <input |
| value={draft} |
| onChange={e => setDraft(e.target.value)} |
| onFocus={() => setExpanded(true)} |
| onKeyDown={e => { if (e.key === "Enter") { e.preventDefault(); send(); } }} |
| placeholder="Speak to the sky…" |
| className="flex-1 bg-transparent outline-none text-sm placeholder:text-muted-foreground/60 py-1.5" |
| /> |
| <Button |
| variant="ghost" |
| size="icon" |
| onClick={() => setListening(l => !l)} |
| className={cn("rounded-full h-8 w-8", listening && "bg-primary/20 text-primary")} |
| title={listening ? "توقف ضبط صدا" : "شروع ضبط صدا"} |
| > |
| <Mic className="w-4 h-4" /> |
| </Button> |
| <Button |
| onClick={send} |
| size="icon" |
| className="rounded-full h-8 w-8 bg-gradient-to-br from-primary to-accent disabled:opacity-40" |
| disabled={!draft.trim() || thinking} |
| title="ارسال پیام" |
| > |
| <Send className="w-3.5 h-3.5" /> |
| </Button> |
| </div> |
| |
| {listening && <Waveform />} |
| </motion.div> |
| ); |
| } |
|
|
| function Waveform() { |
| return ( |
| <div className="absolute -top-8 left-1/2 -translate-x-1/2 flex items-end gap-0.5 h-6"> |
| {Array.from({ length: 24 }).map((_, i) => ( |
| <motion.span |
| key={i} |
| className="w-1 rounded-full bg-gradient-to-t from-primary to-accent" |
| animate={{ height: [4, 6 + Math.random() * 18, 4] }} |
| transition={{ duration: 0.6 + Math.random() * 0.6, repeat: Infinity, delay: i * 0.04, ease: "easeInOut" }} |
| /> |
| ))} |
| </div> |
| ); |
| } |
|
|
| function synthesize(input: string) { |
| const seeds = [ |
| "Acknowledged. Routing intent through the cognitive mesh.", |
| "Signal received. Constellations realigned to your query.", |
| "Processed. The orbital memory has been updated.", |
| "Done. A satellite carries your request beyond the haze.", |
| ]; |
| return `${seeds[Math.floor(Math.random() * seeds.length)]} ${input.length > 60 ? "" : "Anything else?"}`; |
| } |
|
|
