const { useState, useEffect, useRef, useMemo, useCallback } = React;
async function fetchReply(personaId, history) {
const messages = history
.filter((m) => !m.isError) // never replay error bubbles to the model
.map((m) => ({ role: m.from === 'user' ? 'user' : 'assistant', content: m.text }));
let res;
try {
res = await fetch('/api/chat', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ persona: personaId, messages }),
});
} catch (e) {
const err = new Error(`Network failure: ${e?.message || 'connection lost'}`);
err.kind = 'network';
throw err;
}
// Try to parse JSON. If it fails, the deployed API is probably on an older
// build that still streams SSE — surface that explicitly.
const rawText = await res.text().catch(() => '');
let data = {};
try { data = rawText ? JSON.parse(rawText) : {}; } catch {
if (rawText.startsWith('data:')) {
const err = new Error('The server is returning streaming SSE responses, but this page expects JSON. The deployed API is on an older build — redeploy to fix.');
err.kind = 'server';
throw err;
}
const err = new Error(`Server returned non-JSON response (status ${res.status}).`);
err.kind = 'server';
throw err;
}
if (!res.ok) {
const err = new Error(data.error || `Request failed with status ${res.status}.`);
err.status = res.status;
err.kind = errorKindFromStatus(res.status, data.error || '');
throw err;
}
if (!data.reply) {
const err = new Error(data.error || 'Server returned 200 but no reply field — likely a build mismatch between frontend and API.');
err.kind = 'server';
throw err;
}
return data.reply;
}
// Reveal `target` text into the bubble character-by-character. Returns a
// promise that resolves when the animation finishes. The cancel function
// stops the animation immediately if called (e.g. on persona switch).
function typewriter(target, onUpdate) {
// Adaptive pacing: short replies type slowly, long replies sweep faster
// so the user isn't watching a 10-second crawl. ~150 chars/sec ceiling.
const total = target.length;
const charsPerTick = Math.max(2, Math.ceil(total / 200));
let cancelled = false;
const promise = new Promise((resolve) => {
let i = 0;
const tick = () => {
if (cancelled) { resolve(); return; }
i = Math.min(i + charsPerTick, total);
onUpdate(target.slice(0, i), i >= total);
if (i >= total) resolve();
else requestAnimationFrame(tick);
};
requestAnimationFrame(tick);
});
return { promise, cancel: () => { cancelled = true; } };
}
function errorKindFromStatus(status, message) {
const m = (message || '').toLowerCase();
if (status === 429 || m.includes('quota') || m.includes('rate')) return 'rate-limit';
if (status === 503 || m.includes('overload') || m.includes('high demand') || m.includes('unavailable')) return 'overloaded';
if (status === 401 || status === 403 || m.includes('api key') || m.includes('missing')) return 'config';
if (status >= 500) return 'server';
if (status >= 400) return 'request';
return 'unknown';
}
const FRIENDLY_ERRORS = {
network: {
title: "Can't reach the server",
body: "Looks like you're offline or the connection dropped. Check your internet and try again.",
},
'rate-limit': {
title: "Slow down a moment",
body: "We've hit the API rate limit. Give it about a minute and try again.",
},
overloaded: {
title: "The model is busy",
body: "Gemini is at high load right now. Usually clears in 10–30 seconds — give it another go.",
},
config: {
title: "Server isn't configured",
body: "The API key seems missing or invalid on the server. If you're the developer, check the GEMINI_API_KEY env var.",
},
server: {
title: "Something broke on our side",
body: "An unexpected server error happened. Try again in a moment — and if it keeps happening, refresh the page.",
},
request: {
title: "That request didn't go through",
body: "Your message couldn't be processed. Try rephrasing or sending again.",
},
unknown: {
title: "Something went wrong",
body: "An unexpected error happened. Try again, or refresh if it persists.",
},
};
const formatTime = (d) => d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
function Tab({ persona, active, onClick }) {
return (
);
}
function ErrorBubble({ msg, persona, onRetry }) {
const info = FRIENDLY_ERRORS[msg.errorKind] || FRIENDLY_ERRORS.unknown;
return (
: {persona.initial}}