October — food & out

${total.toFixed(2)}

across 4 categories — 23% under budget

{rows.map(r => (

{r.label}

${r.v.toFixed(0)}

))}

); } function Bubble({ from, children, time, tail }) { const isUser = from === "user"; return (

{children}

{time} {isUser && ✓✓}

); } function TypingIndicator() { return (

{[0, 1, 2].map(i => ( ))}

); } function ChatHero({ replayKey, isMobile }) { const [step, setStep] = useState(0); const [typingMs, setTypingMs] = useState(null); const scrollerRef = useRef(null); useEffect(() => { setStep(0); setTypingMs(null); }, [replayKey]); useEffect(() => { if (step >= SCRIPT.length) return; const next = SCRIPT[step]; let id; if (next.from === "user") { id = setTimeout(() => setStep(step + 1), 900); } else if (next.typing) { setTypingMs(next.typing); id = setTimeout(() => { setTypingMs(null); setStep(step + 1); }, next.typing); } else { id = setTimeout(() => setStep(step + 1), next.card ? 1800 : 1200); } return () => clearTimeout(id); }, [step, replayKey]); useEffect(() => { const el = scrollerRef.current; if (el) el.scrollTo({ top: el.scrollHeight, behavior: "smooth" }); }, [step, typingMs]); useEffect(() => { if (step >= SCRIPT.length) { const id = setTimeout(() => setStep(0), 4500); return () => clearTimeout(id); } }, [step]); const messages = SCRIPT.slice(0, step).filter(m => !m.typing); return (

{/* Header */}

Melo

online — typically replies instantly

e2ee

{/* Messages */}

{messages.map((m, i) => { const prev = messages[i - 1]; const tail = !prev || prev.from !== m.from; if (m.card === "summary") { return (

); } return ( ); })} {typingMs && }

{/* Composer */}

Message Melo…

); } window.ChatHero = ChatHero;