/* chat.jsx, the messaging surface. Texting your agent, in-app.
Agent replies are canned. One message carries an inline proposal card
that opens the same approval flow. Typing indicator + slide-in bubbles. */
const cannedReply = (text) => {
const t = text.toLowerCase();
if (/(make it|every|run when|change it|set it|instead|\$\d|raise|lower|cap it)/.test(t)) return { t: "Done. I've updated the rule and it'll run that way from now on. I'll flag the next run in your stream before it executes." };
if (t.includes("proposal") || t.includes("send it")) return { t: "Done. Here it is, ready for you to approve whenever you like.", proposal: "p1" };
if (t.includes("cash")) return { t: "Your cash is in good shape, with $18,420 in Checking and $64,000 in Savings earning 4.8%. About $15k of that has sat idle for 9 days though, so want me to move it into short-term Treasuries earning about 5.1%?" };
if (t.includes("pause") && (t.includes("invest") || t.includes("dca"))) return { t: "Paused the weekly VTI buy, so nothing runs Friday. I'll keep watching and nudge you if cash starts piling up." };
if (t.includes("today") || t.includes("did you")) return { t: "Today I bought $500 of VTI at the open, swept $12,000 from Checking to Savings at 11:08, and put a rebalance up for your approval, so you're up $4,802 on the day." };
if (t.includes("risk")) return { t: "Evening it out means selling a bit of your two biggest holdings (NVDA, Bitcoin) and putting it into a broad fund. That leaves you less exposed to any single name, with a small gain along the way, and the catch is that you'd hold less of the names that ran up the most." };
return { t: "Got it. I'll look at your accounts and come back with something concrete you can approve." };
};
const Chat = ({ nav, proposals, onApprove, inject, onInjected }) => {
const [msgs, setMsgs] = useState(CHAT_SEED);
const [draft, setDraft] = useState("");
const [typing, setTyping] = useState(false);
const scrollRef = useRef(null);
const dateLabel = "Today · 9:24 AM";
useEffect(() => {
const el = scrollRef.current;
if (el) el.scrollTop = el.scrollHeight;
}, [msgs, typing]);
// a "send back to agent" from the approval flow lands here
useEffect(() => {
if (!inject) return;
setMsgs(m => [...m, { from: "user", t: inject.note, time: "now" }]);
setTyping(true);
const id = setTimeout(() => {
setTyping(false);
setMsgs(m => [...m, { from: "agent", t: inject.reply, time: "now" }]);
}, 1100);
onInjected();
return () => clearTimeout(id);
}, [inject]);
const send = (text) => {
const body = (text != null ? text : draft).trim();
if (!body) return;
setDraft("");
setMsgs(m => [...m, { from: "user", t: body, time: "now" }]);
setTyping(true);
setTimeout(() => {
const r = cannedReply(body);
setTyping(false);
setMsgs(m => [...m, { from: "agent", time: "now", ...r }]);
}, 1100);
};
const attachDoc = (doc) => {
setMsgs(m => [...m, { from: "user", t: `Attached ${doc.name}`, doc, time: "now" }]);
setTyping(true);
setTimeout(() => {
setTyping(false);
setMsgs(m => [...m, { from: "agent", t: attachReplyFor(doc), time: "now" }]);
}, 1100);
};
return (
{/* header */}
Yoshi
{/* thread */}
{dateLabel}
{msgs.map((m, i) => )}
{typing && }
{/* quick replies + composer */}
{QUICK_REPLIES.map(q => (
))}
send()} placeholder="Talk to Yoshi…" onAttach={attachDoc} />