{/* Persistent compose bar — floats above the bottom nav.
On the AI Coach sub-page it gives way: the FAB mic + the
page itself are the coach entrypoints. */}
{page !== 2 && (
setComposeOpen(true)}
onClose={() => setComposeOpen(false)}
messages={messages}
draft={draft}
setDraft={setDraft}
onSend={send}
processing={processing}
/>
)}
);
}
// ─────────────────────────────────────────────────────────────
// ChatDock — collapsed pill OR expanded chat sheet.
// Sits above the bottom nav (which is ~92 px tall). Pointer-events
// confined to itself so the FAB and nav still work normally.
// ─────────────────────────────────────────────────────────────
function ChatComposeIcon({ size = 18, processing = false }) {
return (
);
}
function ChatDock({ open, onOpen, onClose, messages, draft, setDraft, onSend, processing }) {
const inputRef = useRefIT(null);
const scrollerRef = useRefIT(null);
useEffectIT(() => {
if (open && inputRef.current) inputRef.current.focus();
}, [open]);
useEffectIT(() => {
if (open && scrollerRef.current) {
scrollerRef.current.scrollTop = scrollerRef.current.scrollHeight;
}
}, [messages, open]);
return (
<>
{/* Backdrop when expanded — taps outside to close */}
{/* Gradient fade above the compose — sits in the zone between the
last scrollable card and the compose pill. Content scrolling up
fades into bg BEFORE it can reach the compose, even mid-scroll. */}
{/* Solid bg backdrop directly behind the compose so anything visible
through transparent regions of the pill resolves to bg, not card. */}
{/* Expanded chat panel — grows above the input */}
{/* Header inside the panel */}
Ask Goji
{/* Messages */}
{messages.map((m, i) => (
{m.text}
))}
{/* Suggested prompts — show only when chat is short */}
{messages.length < 3 && (
{['Can I afford $400 home?', 'Where did money go?', 'How am I doing this month?'].map(q => (
))}
);
}
// AICoachLanding — sub-page is the coach launcher. No inline compose;
// the FAB mic + the suggestion/thread rows here are the entry points.
function AICoachLanding({ onOpenZen }) {
const open = onOpenZen || (() => {});
const suggestions = [
'Can I afford to send $400 home this month?',
"What's a safe amount to save toward my trip?",
'Show me my biggest expenses this year.',
'How can I reduce my subscription spend?',
];
const threads = [
{ q: 'Can I afford to send $400 home this month?', when: '2d ago' },
{ q: 'Why did I spend more last Friday?', when: '4d ago' },
{ q: 'Is Spotify Family worth it?', when: '1w ago' },
];
return (
{/* Hero — calm entry to the coach space */}
AI Coach
Your coach space
A slower conversation for the harder money questions. Tap the mic, pick a thread to resume, or start from one of the prompts below.