/* chat.jsx — limited, email-gated "Ask Gigi" assistant.
A self-mounting floating widget (its own React root, appended to ) so it
doesn't collide with each page's #root app. Talks to the `chat` Cloud Function
via /api/chat (override with window.GIGI_CHAT_ENDPOINT). Sessions persist in
Firestore server-side and in localStorage on the device. */
(function () {
const { Icon, Button, Input } = window.GigiMoneyDesignSystem_b54949 || {};
if (!window.React || !window.ReactDOM || !Icon) return; // deps not present
const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
const MSG_MAX_LEN = 2000;
// The chat function runs in africa-south1, which Firebase Hosting can't serve
// via a same-origin rewrite, so we call it directly (CORS is enabled).
// Override with window.GIGI_CHAT_ENDPOINT for the local emulator.
const ENDPOINT = () => window.GIGI_CHAT_ENDPOINT || 'https://africa-south1-gigi-money.cloudfunctions.net/chat';
const LS = {
email: 'gigi_chat_email',
session: 'gigi_chat_session',
msgs: 'gigi_chat_msgs',
};
const get = (k) => { try { return localStorage.getItem(k); } catch { return null; } };
const set = (k, v) => { try { localStorage.setItem(k, v); } catch { /* private mode */ } };
function newSessionId() {
try { if (crypto?.randomUUID) return crypto.randomUUID(); } catch { /* fall through */ }
return 'sxxxxxxxxxxxx'.replace(/x/g, () => Math.floor(Math.random() * 16).toString(16)) + Date.now().toString(16);
}
function sessionId() {
let s = get(LS.session);
if (!s || !/^[a-z0-9-]{8,64}$/.test(s)) { s = newSessionId(); set(LS.session, s); }
return s;
}
function loadMsgs() {
try { const m = JSON.parse(get(LS.msgs)); return Array.isArray(m) ? m : []; } catch { return []; }
}
function saveMsgs(msgs) { set(LS.msgs, JSON.stringify(msgs.slice(-50))); }
/* POST a message to the Cloud Function. Throws Error(message) on failure. */
async function gigiChat(email, session, message) {
const headers = { 'Content-Type': 'application/json' };
// App Check attestation (anti-bot / anti-replay); null until configured.
const appCheck = window.gigiAppCheckToken ? await window.gigiAppCheckToken() : null;
if (appCheck) headers['X-Firebase-AppCheck'] = appCheck;
const res = await fetch(ENDPOINT(), {
method: 'POST',
headers,
body: JSON.stringify({ email, sessionId: session, message }),
});
let data = {};
try { data = await res.json(); } catch { /* non-JSON */ }
if (!res.ok || !data.ok) throw new Error(data.error || 'Something went wrong. Please try again.');
return data.reply;
}
const GREETING = "Hi! I'm Gigi. Ask me anything about rent advances, rent guarantee, the property HELOC or our credit card.";
function EmailGate({ onDone }) {
const [email, setEmail] = React.useState('');
const [err, setErr] = React.useState('');
const valid = EMAIL_RE.test(email.trim());
const submit = () => {
if (!valid) { setErr('Please enter a valid email address.'); return; }
const e = email.trim().toLowerCase();
// Fresh start: a new session keyed to this email, no stale transcript.
set(LS.session, newSessionId());
set(LS.msgs, '[]');
set(LS.email, e);
onDone(e);
};
return (
Enter your email to start a chat. We’ll use it to follow up if you’d like us to.
{ setEmail(v); if (err) setErr(''); }}
placeholder="you@gigi.money"
/>
{err && (
{err}
)}
);
}
/* ── Minimal Markdown rendering for model replies ──────────────────────────
The model returns Markdown (bold, bullet/numbered lists, links). We render
it to React elements directly — never via dangerouslySetInnerHTML — so the
model's (untrusted) output can't inject HTML/script. Supports the subset it
actually emits: paragraphs, unordered/ordered lists, headings, bold,
italic, inline code, and safe links. */
const mdCodeStyle = {
fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace', fontSize: '0.92em',
background: 'var(--surface-3, rgba(0,0,0,.06))', padding: '1px 5px', borderRadius: 5,
};
const mdLinkStyle = { color: 'var(--accent-ink)', textDecoration: 'underline', fontWeight: 600 };
/* Allow only safe link targets; reject javascript:/data: and other schemes. */
function safeUrl(raw) {
const u = (raw || '').trim();
if (/^(https?:|mailto:)/i.test(u)) return u; // explicit safe schemes
if (/^[/#]/.test(u)) return u; // same-site relative / anchor
return null;
}
/* Inline span parsing: code → bold → italic → links, leftmost match wins. */
function parseInline(text, keyBase) {
const re = /(`+)([^`]*?)\1|(\*\*|__)([\s\S]+?)\3|(\*|_)([\s\S]+?)\5|\[([^\]]*)\]\(([^)\s]+)\)/;
const out = [];
let rest = String(text);
let i = 0;
while (rest) {
const m = re.exec(rest);
if (!m) { out.push(rest); break; }
if (m.index > 0) out.push(rest.slice(0, m.index));
const key = `${keyBase}-${i++}`;
if (m[1] !== undefined) {
out.push({m[2]});
} else if (m[3] !== undefined) {
out.push({parseInline(m[4], key)});
} else if (m[5] !== undefined) {
out.push({parseInline(m[6], key)});
} else {
const href = safeUrl(m[8]);
out.push(href
? {parseInline(m[7], key)}
: `[${m[7]}](${m[8]})`);
}
rest = rest.slice(m.index + m[0].length);
}
return out;
}
/* Group lines into block-level nodes: headings, lists, and paragraphs. */
function parseBlocks(text) {
const lines = String(text).replace(/\r\n?/g, '\n').split('\n');
const blocks = [];
let para = [];
let list = null;
const flushPara = () => { if (para.length) { blocks.push({ type: 'p', lines: para }); para = []; } };
const flushList = () => { if (list) { blocks.push(list); list = null; } };
for (const line of lines) {
const h = /^\s*(#{1,6})\s+(.*)$/.exec(line);
const ul = /^\s*[-*•]\s+(.*)$/.exec(line);
const ol = /^\s*\d+[.)]\s+(.*)$/.exec(line);
if (h) {
flushPara(); flushList();
blocks.push({ type: 'h', text: h[2] });
} else if (ul || ol) {
flushPara();
const ordered = !!ol;
if (!list || list.ordered !== ordered) { flushList(); list = { type: 'list', ordered, items: [] }; }
list.items.push(ul ? ul[1] : ol[1]);
} else if (!line.trim()) {
flushPara(); flushList();
} else {
flushList();
para.push(line);
}
}
flushPara(); flushList();
return blocks;
}
function Markdown({ text }) {
const blocks = React.useMemo(() => parseBlocks(text), [text]);
return blocks.map((b, i) => {
const key = `b${i}`;
const topGap = i ? 8 : 0; // collapse leading margin so bubbles stay tight
if (b.type === 'list') {
const Tag = b.ordered ? 'ol' : 'ul';
return (
{b.items.map((it, j) => (
{parseInline(it, `${key}-${j}`)}
))}
);
}
if (b.type === 'h') {
return {parseInline(b.text, key)}
;
}
const children = [];
b.lines.forEach((ln, j) => {
if (j) children.push(
);
children.push(...parseInline(ln, `${key}-${j}`));
});
return {children}
;
});
}
function Bubble({ role, text }) {
const me = role === 'user';
return (
{/* User text is shown verbatim; model replies are Markdown. */}
{me ? {text} : }
);
}
function Conversation({ email }) {
const session = React.useRef(sessionId()).current;
const [msgs, setMsgs] = React.useState(() => {
const stored = loadMsgs();
return stored.length ? stored : [{ role: 'model', text: GREETING }];
});
const [draft, setDraft] = React.useState('');
const [busy, setBusy] = React.useState(false);
const [err, setErr] = React.useState('');
const scroller = React.useRef(null);
React.useEffect(() => { saveMsgs(msgs); }, [msgs]);
React.useEffect(() => {
const el = scroller.current;
if (el) el.scrollTop = el.scrollHeight;
}, [msgs, busy]);
const send = async () => {
const text = draft.trim().slice(0, MSG_MAX_LEN);
if (!text || busy) return;
setErr('');
setDraft('');
setMsgs((m) => [...m, { role: 'user', text }]);
setBusy(true);
try {
const reply = await gigiChat(email, session, text);
setMsgs((m) => [...m, { role: 'model', text: reply }]);
} catch (e) {
setErr(e.message || 'Something went wrong. Please try again.');
} finally {
setBusy(false);
}
};
const onKeyDown = (e) => {
if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); send(); }
};
return (
<>
{msgs.map((m, i) =>
)}
{busy && (
)}
{err}
)}