/* composer.jsx — shared extras for every "chat with Yoshi" bar:
· ComposerVoicePlus — the + (attach a document) and mic (voice) buttons.
Renders its own AttachDocsSheet and VoiceOverlay; both are absolute
inset-0, so they fill the host screen (mobile) or pillar (web).
· AttachDocsSheet — pick a document to hand Yoshi as context.
· VoiceOverlay — the spoken conversation: the chat steps aside and the
Yoshi mark breathes while you talk. Tap anywhere to end.
Used by: chat, proposal threads, brief details, approvals, automations,
and the Studio rule composer. */
const ATTACH_DOCS = [
{ id: "1099b", name: "1099-B · 2025", sub: "Yoshi Securities · tax form", icon: "doc" },
{ id: "1099int", name: "1099-INT · 2025", sub: "Yoshi Cash · tax form", icon: "doc" },
{ id: "w2", name: "W-2 · 2025", sub: "Acme Corp · added Jan 28", icon: "doc" },
{ id: "chase-may", name: "Chase statement · May", sub: "External · checking ••4471", icon: "receipt" },
{ id: "paystub", name: "Pay stub · May 30", sub: "Acme Corp · direct deposit", icon: "receipt" },
];
const attachReplyFor = (doc) =>
`Got it — I've read your ${doc.name}. Ask me anything about it, or tell me what you'd like done with it and I'll put together something you can approve.`;
/* the "subsequent page": pick a document to attach */
const AttachDocsSheet = ({ onClose, onAttach }) => (
Attach a document
Yoshi reads what you attach and uses it as context — a tax form, a statement, a pay stub.
Your documents
{ATTACH_DOCS.map((d, i) => (
))}
Documents stay in your account. Yoshi reads them to answer you; nothing is shared with the agent's provider.
);
/* the spoken conversation — chat steps aside, the mark breathes. Tap to end. */
const VoiceOverlay = ({ onClose }) => {
const [stage, setStage] = useState(0);
useEffect(() => { const id = setInterval(() => setStage((s) => (s + 1) % 2), 3600); return () => clearInterval(id); }, []);
return (
{[0, 1, 2].map((i) => (
))}
{stage === 0 ? "Listening…" : "Yoshi is responding…"}
Tap anywhere to end the conversation
);
};
/* the + and mic that live in every Yoshi composer */
const ComposerVoicePlus = ({ onAttach, size = 32 }) => {
const [attachOpen, setAttachOpen] = useState(false);
const [voiceOpen, setVoiceOpen] = useState(false);
const btn = { width: size, height: size, flex: "none", borderRadius: 999, background: "none", border: "none", display: "grid", placeItems: "center", color: "var(--ink-2)", cursor: "pointer", padding: 0 };
return (
<>
{attachOpen && setAttachOpen(false)} onAttach={(d) => { setAttachOpen(false); onAttach && onAttach(d); }} />}
{voiceOpen && setVoiceOpen(false)} />}
);
};
/* The Yoshi chat bar — one pill everywhere:
[ + ] circle on the left (attach a document) · the input · a mic that
dictates into the input (voice-to-text; the bar stays visible and the user
still hits send) · and a circle on the right that idles as a waveform
(full voice conversation) and becomes the send arrow once there's text. */
const DICTATION_SAMPLE = "Can you give me a quick update on my accounts?";
const YoshiComposer = ({ value, onChange, onSend, placeholder, onAttach, onThreadJump }) => {
const [attachOpen, setAttachOpen] = useState(false);
const [voiceOpen, setVoiceOpen] = useState(false);
const [dictating, setDictating] = useState(false);
const dictTimer = useRef(null);
useEffect(() => () => clearInterval(dictTimer.current), []);
const stopDictation = () => { clearInterval(dictTimer.current); setDictating(false); };
const toggleDictation = () => {
if (dictating) { stopDictation(); return; }
setDictating(true);
// voice-to-text: words land in the input as you speak; you still hit send
const words = DICTATION_SAMPLE.split(" ");
let i = 0;
const base = value && value.trim() ? value.replace(/\s+$/, "") + " " : "";
dictTimer.current = setInterval(() => {
i += 1;
onChange(base + words.slice(0, i).join(" "));
if (i >= words.length) stopDictation();
}, 160);
};
const has = !!(value && value.trim());
const circ = (extra) => ({ width: 40, height: 40, flex: "none", borderRadius: 999, display: "grid", placeItems: "center", cursor: "pointer", border: "none", background: "color-mix(in srgb, var(--ink) 8%, var(--bg-2))", color: "var(--ink-2)", padding: 0, ...extra });
const inline = { width: 32, height: 32, flex: "none", background: "none", border: "none", display: "grid", placeItems: "center", color: "var(--ink-2)", cursor: "pointer", padding: 0 };
return (
<>