// Ask 8/0 — focused on-page agent. // Calls the server at /api/ask (Vercel serverless function). The system // prompt, rules, and Anthropic API key live server-side and are never // shipped to the browser. // // Edit copy in /assets/js/agent/booking.txt for the booking card. // Edit rules + knowledge in /api/agent/rules.md and /api/agent/knowledge.md. const STARTER_PROMPTS = [ 'What does 8/0 actually do?', 'How does the layer handle schema drift?', 'What does onboarding look like for a carrier?', 'Is this SOC 2 compliant?', 'Tell me about the team.', ]; function AskAgent() { const [open, setOpen] = React.useState(false); const [messages, setMessages] = React.useState([ { role: 'assistant', text: "I'm 8/0 — the on-page assistant for EightbyZero. Ask me about the layer, the team, how integrations work, or what a demo looks like." }, ]); const [input, setInput] = React.useState(''); const [thinking, setThinking] = React.useState(false); const [booking, setBooking] = React.useState({}); const inputRef = React.useRef(null); const scrollRef = React.useRef(null); // Load booking UI config (the only thing still client-side — it's // just labels + the calendar URL). React.useEffect(() => { fetch('/assets/js/agent/booking.txt', { cache: 'no-store' }) .then(r => r.ok ? r.text() : '') .then(text => { const out = {}; text.split('\n').forEach(line => { const t = line.trim(); if (!t || t.startsWith('#')) return; const m = t.match(/^([a-z_]+)\s*:\s*"?([^"]*)"?\s*$/i); if (m) out[m[1]] = m[2]; }); setBooking(out); }) .catch(() => setBooking({})); }, []); React.useEffect(() => { const handler = () => setOpen(true); window.addEventListener('ask-agent:open', handler); return () => window.removeEventListener('ask-agent:open', handler); }, []); React.useEffect(() => { const el = scrollRef.current; if (el) el.scrollTop = el.scrollHeight; }, [messages, thinking]); React.useEffect(() => { if (open) setTimeout(() => inputRef.current?.focus(), 60); }, [open]); React.useEffect(() => { if (!open) return; const onKey = (e) => { if (e.key === 'Escape') setOpen(false); }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [open]); const send = async (text) => { const t = (text ?? input).trim(); if (!t || thinking) return; const nextMessages = [...messages, { role: 'user', text: t }]; setMessages(nextMessages); setInput(''); setThinking(true); try { const r = await fetch('/api/ask', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ userMessage: t, messages: nextMessages, // server trims history to last 6 turns }), }); const data = await r.json().catch(() => ({})); const raw = (data.reply || '').trim(); const bookIntent = /\[BOOK_DEMO\]/i.test(raw); const cleaned = raw.replace(/\[BOOK_DEMO\]/ig, '').trim() || "Sorry — I didn't get an answer back. Try again in a moment, or email connect@eightbyzero.com."; setMessages(m => [ ...m, { role: 'assistant', text: cleaned }, ...(bookIntent ? [{ role: 'booking' }] : []), ]); } catch (err) { setMessages(m => [...m, { role: 'assistant', text: "Something went wrong on my end. Email connect@eightbyzero.com and the team will get you a real answer." }]); } finally { setThinking(false); } }; return ( <> {open && (
setOpen(false)} style={{ position: 'fixed', inset: 0, background: 'rgba(0, 0, 0, 0.45)', backdropFilter: 'blur(2px)', WebkitBackdropFilter: 'blur(2px)', zIndex: 998, animation: 'agent-fade 240ms var(--ease-out)', }}/> )}