// assistant.jsx — the chat bubble in the corner of the scoreboard.
//
// James, September 16: "iisang conversation lang na nasa loob ng app magagamit
// nila... pag click lalabas yung buong conversation." Not a tab — a bubble that
// sits over whatever you are looking at, so asking a question does not cost you
// the screen you were reading.
//
// One thread, shared by Bobby, Kurt and Mike. Everyone's messages sit on the
// right the way your own do in any chat app; the assistant answers on the left.
// Your own are in the accent colour and say "You"; the others carry their name,
// because in a shared thread the question "who said that" is asked constantly.
//
// You are already signed in, so there is nothing to install and no password to
// put anywhere: the session drawing the board is the one writing to it.
const ASSIST_SEEN_KEY = 'cabt_assistant_seen_v1';
function AssistantLauncher({ theme, profile, isPhone }) {
const [open, setOpen] = React.useState(false);
const [messages, setMessages] = React.useState(null);
const [unread, setUnread] = React.useState(0);
const lastSeen = () => {
try { return Number(localStorage.getItem(ASSIST_SEEN_KEY) || 0); } catch (e) { return 0; }
};
const markSeen = (id) => {
try { localStorage.setItem(ASSIST_SEEN_KEY, String(id || 0)); } catch (e) { /* private mode */ }
};
const load = React.useCallback(async () => {
try {
const rows = await CABT_api.fetchAssistantThread();
setMessages(rows);
const newest = rows.length ? rows[rows.length - 1].id : 0;
setUnread(rows.filter(m => m.id > lastSeen()).length);
return newest;
} catch (e) {
setMessages([]);
return 0;
}
}, []);
React.useEffect(() => { load(); }, [load]);
// Live: someone else's message arriving while you are reading is the point of
// one shared thread rather than three private ones.
React.useEffect(() => {
let stop = () => {};
CABT_subscribeRealtime(['assistant_messages'], () => load()).then(fn => { stop = fn; });
return () => stop();
}, [load]);
const openPanel = () => {
setOpen(true);
if (messages && messages.length) markSeen(messages[messages.length - 1].id);
setUnread(0);
};
return (
<>
{!open && (
)}
{open && (
{
if (messages && messages.length) markSeen(messages[messages.length - 1].id);
setUnread(0);
setOpen(false);
}}
/>
)}
);
}
function AssistantPanel({ theme, profile, messages, onReload, onClose, isPhone }) {
const [draft, setDraft] = React.useState('');
const [sending, setSending] = React.useState(false);
const [error, setError] = React.useState(null);
const endRef = React.useRef(null);
React.useEffect(() => {
if (endRef.current) endRef.current.scrollIntoView({ behavior: 'smooth' });
}, [messages, sending]);
const send = async () => {
const text = draft.trim();
if (!text || sending) return;
setDraft(''); setSending(true); setError(null);
try {
await CABT_api.askAssistant(text);
} catch (e) {
setError(e.message || String(e));
} finally {
setSending(false);
onReload();
}
};
const onKey = (e) => {
if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); send(); }
};
// A dialog over the board, not a takeover of it: big enough to hold a real
// conversation, small enough that the screen behind it is still there. On a
// phone there is no room for that distinction, so it fills the screen.
const card = isPhone
? { position: 'absolute', inset: 0, borderRadius: 0, border: 'none' }
: {
position: 'absolute', top: '50%', left: '50%',
transform: 'translate(-50%, -50%)',
width: 'min(860px, 92%)', height: 'min(680px, 86%)',
borderRadius: 16, border: `1px solid ${theme.rule}`,
boxShadow: '0 30px 80px rgba(0,0,0,0.45), 0 4px 12px rgba(0,0,0,0.25)',
overflow: 'hidden',
};
return (
<>
{/* Clicking away closes it, the way every dialog in the app does. */}
{/* Header */}
Assistant
Shared with everyone on the scoreboard
{profile ? ` · you are ${profile.display_name || profile.email}` : ''}