// focuznow-chatwidget.jsx — floating AI Coach chat widget (Groq streaming via /api/chat) const { useState: useCS, useEffect: useCE, useRef: useCR } = React; const STARTERS = [ "I keep losing afternoons to Twitter — fix me.", "Build me a focus schedule for deep work.", "What's the best way to use Nuclear Lockdown?", "Help me stop checking my phone constantly.", ]; function ChatWidget() { const [open, setOpen] = useCS(false); const [messages, setMessages] = useCS(() => { try { return JSON.parse(localStorage.getItem('fn-chat') || '[]'); } catch { return []; } }); const [input, setInput] = useCS(''); const [streaming, setStreaming] = useCS(false); const [error, setError] = useCS(''); const bottomRef = useCR(null); const inputRef = useCR(null); const abortRef = useCR(null); // persist to localStorage useCE(() => { if (messages.length) localStorage.setItem('fn-chat', JSON.stringify(messages.slice(-40))); }, [messages]); // scroll to bottom on new message useCE(() => { if (bottomRef.current) { bottomRef.current.parentElement.scrollTop = bottomRef.current.offsetTop; } }, [messages, streaming]); // focus input when opened useCE(() => { if (open && inputRef.current) setTimeout(() => inputRef.current?.focus(), 80); }, [open]); const send = async (text) => { const content = (text || input).trim(); if (!content || streaming) return; setInput(''); setError(''); const userMsg = { role: 'user', content }; const next = [...messages, userMsg]; setMessages(next); setStreaming(true); // placeholder assistant message to stream into setMessages(m => [...m, { role: 'assistant', content: '' }]); const ctrl = new AbortController(); abortRef.current = ctrl; try { const res = await fetch('/api/chat', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: next }), signal: ctrl.signal, }); if (!res.ok) { const body = await res.json().catch(() => ({})); throw new Error(body.error || `HTTP ${res.status}`); } const reader = res.body.getReader(); const dec = new TextDecoder(); let buf = ''; while (true) { const { done, value } = await reader.read(); if (done) break; buf += dec.decode(value, { stream: true }); const lines = buf.split('\n'); buf = lines.pop(); for (const line of lines) { if (!line.startsWith('data: ')) continue; const data = line.slice(6).trim(); if (data === '[DONE]') continue; try { const chunk = JSON.parse(data); const delta = chunk.choices?.[0]?.delta?.content; if (delta) { setMessages(m => { const copy = [...m]; copy[copy.length - 1] = { ...copy[copy.length - 1], content: copy[copy.length - 1].content + delta }; return copy; }); } } catch { /* skip malformed */ } } } } catch (e) { if (e.name === 'AbortError') { // user cancelled } else { setError(e.message || 'Something went wrong. Is the Groq API key set in Vercel?'); // remove empty assistant placeholder setMessages(m => m[m.length - 1]?.content === '' ? m.slice(0, -1) : m); } } finally { setStreaming(false); abortRef.current = null; } }; const onKey = (e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); send(); } }; const clear = () => { setMessages([]); localStorage.removeItem('fn-chat'); }; const stop = () => { abortRef.current?.abort(); }; return ( <> {/* Floating button */} {/* Chat panel */} {open && (
{/* Header */}
AI Coach
{streaming ? 'thinking…' : 'ready · llama-3.3-70b'}
{/* Messages */}
{messages.length === 0 && (
How can I help you focus?
Ask me anything about focus, habits, or your Focuznow settings.
{STARTERS.map(s => ( ))}
)} {messages.map((m, i) => (
{m.content || (streaming && i === messages.length - 1 ? ( {[0,1,2].map(j => )} ) : '…')}
))} {error && (
⚠ {error}
)}
{/* Input */}