// screen-chat.jsx — Haiku assistant that knows Alex's pipeline and can act on it. // The Worker runs one Anthropic turn at a time; this screen drives the loop: // user message → AI → (tool_use? show Confirm/Skip cards) → execute via onApply → // send tool_result → AI → … until the AI replies with plain text. function ChatScreen({ theme, customers, onBack, onApply, openCustomer }) { const custById = React.useMemo(() => Object.fromEntries(customers.map(c => [c.id, c])), [customers]); const [msgs, setMsgs] = React.useState([]); // Anthropic-format message array const [input, setInput] = React.useState(''); const [busy, setBusy] = React.useState(false); // waiting on the model const [pending, setPending] = React.useState(null); // { blocks:[tool_use], decisions:{} } const [err, setErr] = React.useState(''); const scrollRef = React.useRef(null); React.useEffect(() => { const el = scrollRef.current; if (el) el.scrollTop = el.scrollHeight; }, [msgs, busy, pending]); const snapshot = () => customers.map(c => ({ id: c.id, name: c.name, car: c.car, location: c.location, status: c.status, stage: c.stage, source: c.source, finance: c.finance, journey: c.journey, notes: c.notes, nurturing: c.nurturing, carsWanted: c.carsWanted, readyDate: c.readyDate, callbackAt: c.callbackAt, appointmentAt: c.appointmentAt, tradeIn: c.tradeIn, phone: c.phone, })); const callAI = async (nextMsgs) => { setBusy(true); setErr(''); try { const res = await AI.chat(nextMsgs, snapshot()); const content = res.content || []; const after = [...nextMsgs, { role: 'assistant', content }]; setMsgs(after); const toolUses = content.filter(b => b.type === 'tool_use'); setBusy(false); // not waiting on the model anymore if (toolUses.length) setPending({ blocks: toolUses, decisions: {} }); } catch (e) { setErr(String(e && e.message || e)); setBusy(false); } }; const send = () => { const text = input.trim(); if (!text || busy) return; setInput(''); // If a confirm card is still open, typing a new instruction = skip the proposed // action(s) and replace with this. The API requires every tool_use to be answered // by a tool_result in the very next message, so we emit skip-results first, then // the new text (in the same user message). if (pending) { const results = pending.blocks.map(b => ({ type: 'tool_result', tool_use_id: b.id, content: 'Skipped — Alex sent a new instruction instead. Use the message below.', })); setPending(null); setMsgs(cur => { const next = [...cur, { role: 'user', content: [...results, { type: 'text', text }] }]; callAI(next); return next; }); return; } setMsgs(cur => { const next = [...cur, { role: 'user', content: text }]; callAI(next); return next; }); }; const decide = (id, decision) => setPending(p => p && ({ ...p, decisions: { ...p.decisions, [id]: decision } })); // once every pending tool has a decision, execute confirmed ones and continue React.useEffect(() => { if (!pending) return; if (!pending.blocks.every(b => pending.decisions[b.id])) return; let cancelled = false; (async () => { const results = []; for (const b of pending.blocks) { if (pending.decisions[b.id] === 'confirm') { const r = await onApply(b.name, b.input || {}); results.push({ type: 'tool_result', tool_use_id: b.id, content: r.ok ? ('Done. ' + (r.message || '')) : ('Failed: ' + (r.message || '')), is_error: !r.ok }); } else { results.push({ type: 'tool_result', tool_use_id: b.id, content: 'Skipped by Alex — do not retry.' }); } } if (cancelled) return; setPending(null); setMsgs(cur => { const next = [...cur, { role: 'user', content: results }]; callAI(next); return next; }); })(); return () => { cancelled = true; }; }, [pending]); // result text for an already-resolved tool_use (scan later tool_result blocks) const resultFor = (id) => { for (const m of msgs) { if (m.role === 'user' && Array.isArray(m.content)) { const tr = m.content.find(b => b.type === 'tool_result' && b.tool_use_id === id); if (tr) return { text: tr.content, error: tr.is_error }; } } return null; }; const pendingIds = pending ? pending.blocks.map(b => b.id) : []; const suggestions = ['Who should I chase today?', 'Any hot leads still open?', 'Draft a follow-up text for my newest lead']; return ( } />
{msgs.length === 0 && (
Alejandro
Your sales sidekick
Ask who to chase and I'll tell you why and write the text to send. I can also update leads, set callbacks and mark things done — you confirm each change.
{suggestions.map(s => ( ))}
)}
{msgs.map((m, mi) => { // user text (plain string) if (m.role === 'user' && typeof m.content === 'string') { return {m.content}; } // user array message: render any typed text; tool_result blocks stay hidden // (their outcome shows under the matching tool card) if (m.role === 'user') { return (m.content || []).filter(b => b.type === 'text' && b.text && b.text.trim()) .map((b, bi) => {b.text}); } // assistant: text + tool_use blocks return (m.content || []).map((b, bi) => { if (b.type === 'text' && b.text && b.text.trim()) { return {b.text}; } if (b.type === 'tool_use') { const isPending = pendingIds.includes(b.id); const decided = pending && pending.decisions[b.id]; const res = resultFor(b.id); return ( decide(b.id, 'confirm')} onSkip={() => decide(b.id, 'skip')} /> ); } return null; }); })} {busy &&
Thinking…
} {err &&
{err}
}
{/* input bar */}