{p.slice(1, -1)};
return {p};
})}
);
}
function ChatPanel({ open, onClose, profile }) {
const [messages, setMessages] = useState(() => {
try { return JSON.parse(localStorage.getItem('tl_chat') || '[]'); } catch { return []; }
});
const [input, setInput] = useState('');
const [loading, setLoading] = useState(false);
const [sending, setSending] = useState(false);
// Staggered reveal of the newest assistant reply: revealCount is how many of
// its chunks are visible so far. It's driven directly when the reply lands
// (below) so the first frame already shows just chunk 0, then more every
// 300ms — never a flash of all chunks at once.
const [revealCount, setRevealCount] = useState(0);
const bottomRef = useRef(null);
const inputRef = useRef(null);
const staggerTimers = useRef([]);
const clearStaggerTimers = () => {
staggerTimers.current.forEach(clearTimeout);
staggerTimers.current = [];
};
useEffect(() => () => clearStaggerTimers(), []); // clear on unmount
useEffect(() => {
if (open) setTimeout(() => inputRef.current?.focus(), 100);
}, [open]);
useEffect(() => {
if (bottomRef.current) {
bottomRef.current.parentElement.scrollTop = bottomRef.current.offsetTop;
}
}, [messages, loading, revealCount]);
// Append an assistant reply and reveal its chunks one at a time: chunk 0 is
// shown immediately (in the same render the message is added, so there's no
// all-at-once flash), then one more chunk every 300ms. Each setTimeout runs
// in its own task, so each setRevealCount triggers its own paint.
const revealReply = (content) => {
const count = messageChunks(content).length;
clearStaggerTimers();
setRevealCount(1);
setMessages(prev => [...prev, { role: 'assistant', content }]);
for (let i = 1; i < count; i++) {
staggerTimers.current.push(setTimeout(() => setRevealCount(i + 1), i * 300));
}
};
useEffect(() => {
localStorage.setItem('tl_chat', JSON.stringify(messages.slice(-40)));
}, [messages]);
// Build the structured plan the advisor endpoint grounds its answers in. The
// backend turns this into the system prompt — we just send the student's
// actual plan state.
const buildPlan = () => {
const placed = new Set(Object.values(profile.semesters || {}).flat());
Object.keys(profile.courseStatuses || {}).forEach(k => placed.add(k));
const recCourses = profile.recommendedCourses || [];
const recBanked = recCourses.filter(rc => !placed.has(rc.key)).map(rc => rc.key);
const allKeys = new Set([
...Object.values(profile.semesters || {}).flat(),
...(profile.requiredUnplaced || []),
...recBanked,
]);
const course_titles = {}, course_units = {};
allKeys.forEach(k => {
const c = (window.MOCK_COURSES || {})[k] || {};
const rc = recCourses.find(r => r.key === k);
course_titles[k] = c.title || (rc && rc.title) || '';
course_units[k] = c.units || (rc && rc.units) || 0;
});
// Cal-GETC: an area is satisfied if the student picked enough for it OR a
// plan course already covers it (mirrors the Cal-GETC tab's grounding).
const sel = profile.calgetcSelections || {};
const areaOk = {};
for (const area of (window.MOCK_CALGETC || [])) {
const need = area.id === '5C' ? 1 : (area.rule === 'two_disciplines' ? 2 : (area.required || 1));
const picks = sel[area.id] || [];
const pool = (window.PLANNER_GE_AREAS && window.PLANNER_GE_AREAS[area.id])
|| (area.courses || []).map(c => c.key);
areaOk[area.id] = picks.length >= need || pool.some(k => placed.has(k));
}
// Area 5C (Laboratory Activity) is satisfied implicitly whenever 5A or 5B is:
// IVC's lab-bearing science courses (PHYS 4A, CHEM 1A, BIO courses) satisfy
// the lecture area AND the lab area at the same time.
if (areaOk['5A'] || areaOk['5B']) areaOk['5C'] = true;
const calgetc_satisfied = [], calgetc_pending = [];
for (const area of (window.MOCK_CALGETC || [])) {
(areaOk[area.id] ? calgetc_satisfied : calgetc_pending).push(area.name);
}
return {
schools: (profile.selections || []).map(s => ({
abbr: s.school?.abbr || s.school?.name || '?',
major: s.major || 'Unknown Major',
})),
transfer_term: profile.transferTerm || '',
use_summer: !!profile.useSummer,
summer_load: profile.summerLoad || 'light',
semesters: profile.semesters || {},
course_titles,
course_units,
required_unplaced: profile.requiredUnplaced || [],
recommended_banked: recBanked,
calgetc_satisfied,
calgetc_pending,
};
};
const send = useCallback(async (text) => {
const trimmed = text.trim();
if (!trimmed || loading) return;
setSending(true);
setTimeout(() => setSending(false), 400);
const history = messages.slice(-8); // prior turns, before this message
setMessages(prev => [...prev, { role: 'user', content: trimmed }]);
setInput('');
setLoading(true);
try {
const res = await fetch(`${CHAT_API_BASE}/api/advisor`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ message: trimmed, history, plan: buildPlan() }),
});
if (res.status === 429) {
const data = await res.json().catch(() => ({}));
setLoading(false);
revealReply(data.message || "You've reached the session limit for Lumen. Speak with an IVC counselor for personalized guidance.");
return;
}
if (!res.ok || !res.body) throw new Error(`HTTP ${res.status}`);
// Read the full streamed reply (the typing indicator stays up meanwhile),
// then commit it once — revealReply splits it into staggered chunks.
const reader = res.body.getReader();
const decoder = new TextDecoder();
let acc = '';
while (true) {
const { done, value } = await reader.read();
if (done) break;
acc += decoder.decode(value, { stream: true });
}
const content = acc.trim() || "I'm having trouble connecting right now. Please try again in a moment.";
setLoading(false);
revealReply(content);
} catch (e) {
setLoading(false);
revealReply("I'm having trouble connecting right now. Please try again in a moment.");
}
}, [messages, loading, profile]);
const handleKey = (e) => {
if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); send(input); }
};
return (