/* global React, FRDATA, Icon, MatchBar, AreaDot, useApp */ const { useState, useEffect, useRef } = React; const STREAM_FLUSH_MS = 140; const coerceText = (value) => { if (value === null || value === undefined) return ''; if (typeof value === 'string') return value; if (typeof value === 'number' || typeof value === 'boolean') return String(value); if (Array.isArray(value)) return value.map(coerceText).join(''); if (typeof value === 'object') { if (value.text !== undefined) return coerceText(value.text); if (value.content !== undefined) return coerceText(value.content); if (value.message !== undefined) return coerceText(value.message); if (value.label !== undefined) return coerceText(value.label); if (value.name !== undefined) return coerceText(value.name); if (value.title !== undefined) return coerceText(value.title); } return ''; }; // ============== Personalization control (button + modal + save) ============== const PersonalizationControl = () => { const { profile, setProfile, personalCourseMarkdown, setPersonalCourseMarkdown } = useApp(); const [open, setOpen] = useState(false); const personalization = profile?.preferences?.personalization; const savePersonalization = (nextPersonalization) => { const nextProfile = { ...profile, preferences: { ...(profile.preferences || {}), personalization: nextPersonalization, }, }; setProfile(nextProfile); fetch('/api/onboarding/more-preferences', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ personalCourseMarkdown: personalCourseMarkdown || localStorage.getItem('fr-personalcourse-draft') || '# personalcourse.md\n', questionnaire: nextPersonalization, freeformNotes: nextPersonalization.freeformNotes || '', normalizedData: nextPersonalization, }), }) .then(async (response) => { const payload = await response.json().catch(() => ({})); if (!response.ok || payload.ok === false) throw new Error(payload.error || 'Markdown personalization failed.'); if (payload.personalCourseMarkdown) { setPersonalCourseMarkdown(payload.personalCourseMarkdown); localStorage.setItem('fr-personalcourse-draft', payload.personalCourseMarkdown); } }) .catch((error) => { console.warn('[personalization] background markdown sync failed', error); }); }; return ( <> setOpen(true)} /> {open && ( setOpen(false)} onSave={savePersonalization} /> )} ); }; // ============== Agent / chat panel (top-right) ============== const hasPersonalizationEvidence = (personalization, personalCourseMarkdown = '') => { if (String(personalCourseMarkdown || '').trim()) return true; if (!personalization || typeof personalization !== 'object') return false; const workload = personalization.workload || {}; const gradingPreferences = personalization.gradingPreferences || {}; return Boolean( Object.keys(personalization.topicRatings || {}).length || Object.keys(personalization.formatPreferences || {}).length || Object.keys(personalization.desiredCoursesPerDirection || {}).length || Object.values(workload).some((value) => value !== null && value !== undefined && value !== '') || Object.values(gradingPreferences).some((value) => value !== null && value !== undefined) || String(personalization.freeformNotes || '').trim() ); }; const AgentPanel = ({ messages, setMessages, profile, schedule, onAddCourse, onRemoveCourse, onOpenCourse, onApplyUiActions }) => { const [input, setInput] = useState(''); const [typing, setTyping] = useState(false); const scrollRef = useRef(null); const { activeSem, planningTermLabel, authState, personalCourseMarkdown, fourYearPlan } = useApp(); const personalization = profile?.preferences?.personalization || null; const calibratedToUser = hasPersonalizationEvidence(personalization, personalCourseMarkdown); const studentName = String(profile?.name || '').trim() || String(authState?.user?.email || '').split('@')[0] || ''; useEffect(() => { const frame = requestAnimationFrame(() => { if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight; }); return () => cancelAnimationFrame(frame); }, [messages, typing]); const updateStreamingMessage = (id, updater) => { setMessages((current) => current.map((message) => ( message.id === id ? { ...message, ...updater(message) } : message ))); }; const readAgentStream = async (response, handlers) => { const reader = response.body.getReader(); const decoder = new TextDecoder(); let buffer = ''; const handleBlock = (block) => { const lines = block.split(/\r?\n/); let event = 'message'; const dataLines = []; lines.forEach((line) => { if (line.startsWith('event:')) event = line.slice(6).trim(); if (line.startsWith('data:')) dataLines.push(line.slice(5).trimStart()); }); if (!dataLines.length) return; const raw = dataLines.join('\n'); const data = raw ? JSON.parse(raw) : {}; if (handlers[event]) handlers[event](data); }; while (true) { const { value, done } = await reader.read(); if (done) break; buffer += decoder.decode(value, { stream: true }); const blocks = buffer.split(/\r?\n\r?\n/); buffer = blocks.pop() || ''; blocks.forEach(handleBlock); } buffer += decoder.decode(); if (buffer.trim()) handleBlock(buffer); }; const send = async () => { if (!input.trim() || typing) return; const userMsg = { role: 'user', text: input.trim() }; const nextMessages = [...messages, userMsg]; const agentMessageId = `agent-${Date.now()}`; const clientRequestId = `chat-${Date.now().toString(36)}`; const placeholder = { id: agentMessageId, role: 'agent', text: '', status: 'Thinking...', suggestions: [], streaming: true, progress: { latestInterimText: '', latestToolActivity: null, }, traceSummary: null, proposal: null, }; setMessages([...nextMessages, placeholder]); setInput(''); setTyping(true); let flushBufferedStream = () => {}; try { const payload = { messages: nextMessages, profile, personalization, personalCourseMarkdown, schedule, activeSem, planningTermLabel, fourYearPlan, studentName, }; console.debug('[agent stream] start', { clientRequestId, activeSem, schedule, messageCount: nextMessages.length, latestUserText: userMsg.text, payload, personalizationDebug: { hasProfilePersonalization: Boolean(personalization), hasEvidence: calibratedToUser, personalCourseMarkdownLength: String(personalCourseMarkdown || '').length, completedGroups: personalization?.progress?.completedGroups || [], }, }); const response = await fetch('/api/chat/stream', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload), }); if (!response.ok) { const text = await response.text().catch(() => ''); console.error('[agent stream] http error', { clientRequestId, status: response.status, text }); throw new Error(`The agent returned HTTP ${response.status}. Check the server logs for this request.`); } let sawFinalTextDelta = false; let finalTextBuffer = ''; let progressTextBuffer = ''; let progressReplacement = null; let streamFlushTimer = null; flushBufferedStream = () => { if (streamFlushTimer) { clearTimeout(streamFlushTimer); streamFlushTimer = null; } const finalChunk = finalTextBuffer; const progressChunk = progressTextBuffer; const progressReplace = progressReplacement; finalTextBuffer = ''; progressTextBuffer = ''; progressReplacement = null; if (!finalChunk && !progressChunk && progressReplace === null) return; updateStreamingMessage(agentMessageId, (message) => { const currentProgress = message.progress || {}; const next = { status: '' }; if (finalChunk) { next.text = `${coerceText(message.text)}${finalChunk}`; next.progress = { ...currentProgress, finalAnswerStarted: true, latestInterimText: '', latestToolActivity: null, }; return next; } const shouldStartAnswer = Boolean(currentProgress.finalAnswerStarted || currentProgress.latestToolActivity); next.progress = { ...currentProgress, finalAnswerStarted: shouldStartAnswer, latestInterimText: progressReplace !== null ? progressReplace : `${currentProgress.latestToolActivity && !currentProgress.finalAnswerStarted ? '' : coerceText(currentProgress.latestInterimText)}${progressChunk}`, latestToolActivity: currentProgress.latestToolActivity && !currentProgress.finalAnswerStarted ? null : currentProgress.latestToolActivity, }; return next; }); }; const scheduleBufferedFlush = () => { if (streamFlushTimer) return; streamFlushTimer = setTimeout(flushBufferedStream, STREAM_FLUSH_MS); }; const enqueueFinalText = (text) => { finalTextBuffer += coerceText(text); scheduleBufferedFlush(); }; const enqueueProgressText = (text, append = true) => { if (append) { progressTextBuffer += coerceText(text); } else { progressReplacement = coerceText(text); progressTextBuffer = ''; } scheduleBufferedFlush(); }; const updateToolActivity = (activity) => { flushBufferedStream(); updateStreamingMessage(agentMessageId, (message) => ({ progress: { ...(message.progress || {}), latestToolActivity: { ...(message.progress?.latestToolActivity || {}), ...(activity || {}), }, }, status: '', })); }; await readAgentStream(response, { status: ({ text }) => { console.debug('[agent stream] status', { clientRequestId, text }); const safeText = coerceText(text); updateStreamingMessage(agentMessageId, (message) => ({ status: coerceText(message.text) ? '' : safeText, })); }, final_text_delta: ({ text }) => { sawFinalTextDelta = true; enqueueFinalText(text); }, delta: ({ text }) => { if (sawFinalTextDelta) return; enqueueFinalText(text); }, text_delta: ({ text }) => { enqueueFinalText(text); }, progress_text: ({ text }) => enqueueProgressText(text, false), progress_text_delta: ({ text }) => enqueueProgressText(text, true), tool_activity_start: updateToolActivity, tool_activity_input: updateToolActivity, tool_activity_running: updateToolActivity, tool_activity_result: updateToolActivity, tool_activity_error: updateToolActivity, trace_summary: (traceSummary) => { flushBufferedStream(); updateStreamingMessage(agentMessageId, () => ({ traceSummary })); }, proposal: (proposal) => { flushBufferedStream(); updateStreamingMessage(agentMessageId, () => ({ proposal })); }, final: (payload) => { flushBufferedStream(); console.debug('[agent stream] final', { clientRequestId, textLength: payload?.message?.text?.length || 0, suggestions: payload?.message?.suggestions || [], uiActions: payload?.uiActions || [], proposal: payload?.proposal || payload?.message?.proposal || null, debug: payload?.debug, }); if (payload?.message) { const finalText = coerceText(payload.message.text || payload.message.content); const proposal = payload.proposal || payload.message.proposal || proposalFromUiActions(payload.uiActions); const traceSummary = payload.traceSummary || payload.message.traceSummary || null; updateStreamingMessage(agentMessageId, () => ({ ...payload.message, id: agentMessageId, text: finalText, streaming: false, status: '', progress: null, traceSummary, proposal, })); } }, error: (payload) => { flushBufferedStream(); console.error('[agent stream] sse error', { clientRequestId, payload }); throw new Error(coerceText(payload?.message?.text || payload?.error) || 'The agent is unavailable right now. Manual planning still works.'); }, }); } catch (error) { flushBufferedStream(); console.error('[agent stream] failed', { clientRequestId, error }); const failedToFetch = String(error && error.message || '').includes('Failed to fetch'); updateStreamingMessage(agentMessageId, () => ({ role: 'agent', text: failedToFetch ? 'Failed to reach /api/chat/stream. Restart the dev server and check the server terminal logs.' : (coerceText(error.message) || 'The agent is unavailable right now. Manual planning still works.'), suggestions: [], streaming: false, status: '', progress: null, })); } finally { setTyping(false); } }; return (
{/* Header */}
Course Planning Agent
{/* Messages */}
{messages.map((m, i) => ( ))} {typing && !messages.some((message) => message.streaming) && }
{/* Input */}
setInput(e.target.value)} onKeyDown={(e) => e.key === 'Enter' && !e.shiftKey && send()} style={{ flex: 1, fontSize: 15, padding: '8px 0' }} />
); }; const escapeHtml = (value) => coerceText(value) .replace(/&/g, '&') .replace(//g, '>') .replace(/"/g, '"') .replace(/'/g, '''); const COURSE_MENTION_PATTERN = /\b[A-Z0-9]{1,5}\.[A-Z0-9]{2,5}\b/gi; const COURSE_CATALOG_LINK_PATTERN = /\[([^\]]+)\]\((?:catalog|course)\/([A-Z0-9]{1,5}\.[A-Z0-9]{2,5})\)/gi; const normalizeCourseMentionId = (value) => { const match = String(value || '').trim().match(/^[A-Z0-9]{1,5}\.[A-Z0-9]{2,5}$/i); return match ? match[0].toUpperCase() : ''; }; const courseMentionAnchor = (label, courseId) => { const normalizedId = normalizeCourseMentionId(courseId); if (!normalizedId) return label; return `${label}`; }; const renderInlineMarkdown = (value) => { let html = escapeHtml(value); html = html.replace(/`([^`]+)`/g, '$1'); html = html.replace(/\*\*([^*]+)\*\*/g, '$1'); html = html.replace(/(^|[^*])\*([^*\n]+)\*/g, '$1$2'); html = html.replace(COURSE_CATALOG_LINK_PATTERN, (_, label, courseId) => courseMentionAnchor(label, courseId)); html = html.replace(/\[([^\]]+)\]\((https?:\/\/[^)\s]+)\)/g, '$1'); return html; }; const extractCourseMentionCandidates = (value) => { const text = coerceText(value); const linkedMatches = [...text.matchAll(COURSE_CATALOG_LINK_PATTERN)] .map((match) => match[2]); const bareMatches = [...text.matchAll(COURSE_MENTION_PATTERN)] .filter((match) => { const start = match.index || 0; const end = (match.index || 0) + match[0].length; return text[start - 1] !== '/' && !/^\s*\//.test(text.slice(end, end + 4)); }) .map((match) => match[0]); return [...new Set([...linkedMatches, ...bareMatches] .map(normalizeCourseMentionId) .filter(Boolean))]; }; const wrapCourseMentions = (html, validCourseIds = new Set()) => { let inAnchor = false; let inCode = false; const valid = validCourseIds instanceof Set ? validCourseIds : new Set(validCourseIds || []); return html .split(/(<[^>]+>)/g) .map((part) => { if (!part) return part; if (part.startsWith('<')) { const tag = part.toLowerCase(); if (tag.startsWith(' { const end = offset + match.length; if (text[offset - 1] === '/' || /^\s*\//.test(text.slice(end, end + 4))) return match; const courseId = normalizeCourseMentionId(match); if (!valid.has(courseId)) return match; return courseMentionAnchor(match, courseId); }); }) .join(''); }; const StreamingText = ({ value, validCourseIds, onCourseMentionClick }) => (
); const renderMarkdown = (value, options = {}) => { const lines = coerceText(value).split('\n'); const blocks = []; let paragraph = []; let listItems = []; const flushParagraph = () => { if (!paragraph.length) return; blocks.push(`

${renderInlineMarkdown(paragraph.join(' '))}

`); paragraph = []; }; const flushList = () => { if (!listItems.length) return; blocks.push(`
    ${listItems.map((item) => { const detail = item.details.length ? `
    ${item.details.map(renderInlineMarkdown).join('
    ')}
    ` : ''; return `
  • ${renderInlineMarkdown(item.main)}${detail}
    • `; }).join('')}
`); listItems = []; }; lines.forEach((line) => { const trimmed = line.trim(); if (!trimmed) { flushParagraph(); flushList(); return; } const heading = trimmed.match(/^(#{1,4})\s+(.+)$/); if (heading) { flushParagraph(); flushList(); const level = Math.min(4, heading[1].length); blocks.push(`${renderInlineMarkdown(heading[2])}`); return; } const bullet = trimmed.match(/^(?:[-*]|\d+\.)\s+(.+)$/); if (bullet) { flushParagraph(); listItems.push({ main: bullet[1], details: [] }); return; } if (/^\s{2,}/.test(line) && listItems.length) { listItems[listItems.length - 1].details.push(trimmed); return; } flushList(); paragraph.push(trimmed); }); flushParagraph(); flushList(); const html = blocks.join(''); return options.linkCourses ? wrapCourseMentions(html, options.validCourseIds) : html; }; const uiActionLabel = (action) => { if (!action || typeof action !== 'object') return 'Update plan'; const courseId = String(action.courseId || '').toUpperCase(); const removeCourseId = String(action.removeCourseId || '').toUpperCase(); const courseLabel = courseId ? `[${courseId}](catalog/${courseId})` : 'course'; const removeCourseLabel = removeCourseId ? `[${removeCourseId}](catalog/${removeCourseId})` : 'course'; const termId = String(action.termId || action.term_id || '').toUpperCase(); if (action.type === 'remove_course') return `Remove ${courseLabel}`; if (action.type === 'replace_course') return `Replace ${removeCourseLabel} with ${courseLabel}`; if (action.type === 'add_completed_course') return `Add ${courseLabel} to completed courses`; if (action.type === 'remove_completed_course') return `Remove ${courseLabel} from completed courses`; if (action.type === 'add_historical_course') return `Add ${courseLabel} to ${termId || 'a previous semester'} and completed courses`; if (action.type === 'remove_historical_course') return `Remove ${courseLabel} from ${termId || 'a previous semester'}`; return `Add ${courseLabel}`; }; const proposalFromUiActions = (uiActions) => { const actions = Array.isArray(uiActions) ? uiActions : []; if (!actions.length) return null; return { type: 'ui_actions', title: 'Proposed changes', actions, actionItems: actions.map(uiActionLabel), warnings: [], source: 'legacy_ui_actions', }; }; const normalizeProposal = (proposal, legacyUiActions) => { if (proposal && typeof proposal === 'object') { const actions = Array.isArray(proposal.actions) ? proposal.actions : []; if (!actions.length) return null; return { ...proposal, actions }; } return proposalFromUiActions(legacyUiActions); }; const ToolActivityCard = ({ activity }) => { if (!activity) return null; const isError = activity.state === 'error'; const isDone = activity.state === 'done'; const displayName = coerceText(activity.displayName || activity.toolName) || 'Checking data'; const inputPreview = coerceText(activity.inputPreview); const resultSummary = coerceText(activity.resultSummary); return (
{displayName}
{inputPreview && (
{inputPreview}
)} {resultSummary && (
{resultSummary}
)}
); }; const ProgressBlock = ({ progress, fallback, validCourseIds, onCourseMentionClick }) => { const interim = coerceText(progress?.latestInterimText); const activity = progress?.latestToolActivity; const showActivity = activity && !progress?.finalAnswerStarted; return (
{interim ? ( ) : (
{fallback || 'Thinking...'}
)} {showActivity && }
); }; const TraceSummary = ({ traceSummary }) => { const [expanded, setExpanded] = useState(false); const checked = Array.isArray(traceSummary?.checked) ? traceSummary.checked : []; if (!checked.length) return null; const labels = [...new Set(checked.map((item) => coerceText(item.label)).filter(Boolean))]; return (
{expanded && (
{checked.map((item, index) => (
{coerceText(item.displayName || item.toolName)}
{item.inputPreview &&
{coerceText(item.inputPreview)}
} {item.resultSummary &&
{coerceText(item.resultSummary)}
}
))}
)}
); }; const ProposalCard = ({ proposal, onApplyUiActions, onCourseMentionClick }) => { const [state, setState] = useState('applying'); const undoRef = useRef(null); const appliedRef = useRef(false); const actions = Array.isArray(proposal?.actions) ? proposal.actions : []; const canApply = actions.length > 0 && typeof onApplyUiActions === 'function'; const actionItems = Array.isArray(proposal?.actionItems) && proposal.actionItems.length ? proposal.actionItems : actions.map(uiActionLabel); const displayActionItems = actionItems .map((item, index) => coerceText(item) || uiActionLabel(actions[index])) .filter(Boolean); const displayWarnings = (Array.isArray(proposal.warnings) ? proposal.warnings : []) .map(coerceText) .filter(Boolean); useEffect(() => { if (!proposal || !canApply || appliedRef.current || state === 'cancelled') return; appliedRef.current = true; Promise.resolve(onApplyUiActions(actions)).then((undo) => { undoRef.current = typeof undo === 'function' ? undo : null; setState('applied'); }).catch((error) => { console.error('[proposal] failed to apply ui actions', error); setState('applied'); }); }, [proposal, actions, canApply, onApplyUiActions, state]); if (!proposal || !canApply || state === 'dismissed') return null; return (
{state === 'cancelled' ? 'Cancelled changes' : 'Applied changes'}
    {displayActionItems.map((item, index) => (
  • ))}
{displayWarnings.length > 0 && (
{displayWarnings.join(' · ')}
)}
{state === 'applying' ? 'applying...' : state === 'cancelled' ? 'cancelled' : 'applied'} {state === 'applied' && ( )}
); }; const areaForCourseMention = (courseId) => { const value = String(courseId || '').toUpperCase(); if (value.startsWith('6.')) return 'cs'; if (value.startsWith('18.')) return 'math'; if (value.startsWith('8.')) return 'physics'; if (value.startsWith('7.')) return 'bio'; if (value.startsWith('21') || value.startsWith('24') || value.startsWith('17') || value.startsWith('14') || value.startsWith('15')) return 'hass'; return 'other'; }; const semesterSeasonForAgent = (semId) => { const value = String(semId || '').toUpperCase(); if (value.startsWith('IAP')) return 'iap'; if (value.startsWith('SU')) return 'summer'; if (value.startsWith('F')) return 'fall'; if (value.startsWith('S')) return 'spring'; return null; }; const isCourseOfferedForAgent = (course, semId) => { const season = semesterSeasonForAgent(semId); return !season || !course?.offered || course.offered[season] !== false; }; const CourseMentionMenu = ({ courseId, position, schedule, onAddCourse, onRemoveCourse, onOpenCourse, onClose }) => { const { activeSem } = useApp(); const [course, setCourse] = useState(null); const normalizedId = String(courseId || '').trim().toUpperCase(); const scheduled = new Set((schedule || []).map((id) => String(id).toUpperCase())); useEffect(() => { let cancelled = false; setCourse(null); FRDATA.fetchCurrentCourse(normalizedId).then((found) => { if (!cancelled) setCourse(found || null); }).catch(() => { if (!cancelled) setCourse(null); }); return () => { cancelled = true; }; }, [normalizedId]); if (!normalizedId) return null; const displayName = course?.name || 'Course details'; const area = course?.area || areaForCourseMention(normalizedId); const actionId = String(course?.id || normalizedId).toUpperCase(); const isScheduled = scheduled.has(actionId) || scheduled.has(normalizedId); const notOffered = course && !isCourseOfferedForAgent(course, activeSem); const popoverStyle = position ? { position: 'fixed', left: position.left, top: position.top, width: 380, maxWidth: 'calc(100vw - 24px)', marginTop: 0, zIndex: 3000, transform: position.placement === 'below' ? 'translateX(-50%)' : 'translate(-50%, -100%)', } : {}; const handleScheduleAction = () => { if (isScheduled) { if (typeof onRemoveCourse === 'function') onRemoveCourse(actionId); } else if (!notOffered && typeof onAddCourse === 'function') { onAddCourse(actionId); } if (typeof onClose === 'function') onClose(); }; return (
{normalizedId} {displayName}
); }; const MessageBubble = ({ msg, schedule, onAddCourse, onRemoveCourse, onOpenCourse, onApplyUiActions }) => { const isUser = msg.role === 'user'; const [courseMenu, setCourseMenu] = useState(null); const [validCourseMentions, setValidCourseMentions] = useState(new Set()); const [invalidCourseMentions, setInvalidCourseMentions] = useState(new Set()); const displayText = isUser ? coerceText(msg.text) : coerceText(msg.text); const progressText = !isUser ? coerceText(msg.progress?.latestInterimText) : ''; const courseCandidates = extractCourseMentionCandidates(`${displayText}\n${progressText}`); const courseCandidateKey = courseCandidates.join('|'); const immediatelyValidCourseIds = new Set([ ...validCourseMentions, ...(msg.streaming ? courseCandidates : []), ...(schedule || []).map((id) => String(id).toUpperCase()), ...(msg.suggestions || []).map((id) => coerceText(id).toUpperCase()), ]); const messageHtml = !isUser && !msg.streaming ? renderMarkdown(displayText, { linkCourses: true, validCourseIds: immediatelyValidCourseIds, }) : ''; const showProgressOnly = !isUser && msg.streaming && !displayText; const proposal = !isUser && !msg.streaming ? normalizeProposal(msg.proposal, msg.uiActions) : null; useEffect(() => { if (isUser || !courseCandidates.length) return undefined; let cancelled = false; const knownValid = validCourseMentions; const knownInvalid = invalidCourseMentions; const toCheck = courseCandidates.filter((courseId) => ( !knownValid.has(courseId) && !knownInvalid.has(courseId) && !(schedule || []).map((id) => String(id).toUpperCase()).includes(courseId) )); if (!toCheck.length) return undefined; Promise.all(toCheck.map((courseId) => ( FRDATA.fetchCurrentCourse(courseId) .then((course) => ({ courseId, ok: Boolean(course) })) .catch(() => ({ courseId, ok: false })) ))).then((results) => { if (cancelled) return; const nextValid = results.filter((item) => item.ok).map((item) => item.courseId); const nextInvalid = results.filter((item) => !item.ok).map((item) => item.courseId); if (nextValid.length) { setValidCourseMentions((current) => new Set([...current, ...nextValid])); } if (nextInvalid.length) { setInvalidCourseMentions((current) => new Set([...current, ...nextInvalid])); } }); return () => { cancelled = true; }; }, [courseCandidateKey, isUser]); useEffect(() => { if (!courseMenu) return undefined; const close = (event) => { if (event.target?.closest?.('.chat-course-popover')) return; if (event.target?.closest?.('[data-course-id]')) return; setCourseMenu(null); }; document.addEventListener('click', close); return () => document.removeEventListener('click', close); }, [courseMenu]); const handleCourseMentionClick = (event) => { const mention = event.target?.closest?.('[data-course-id]'); if (!mention) return; event.preventDefault(); event.stopPropagation(); const courseId = String(mention.getAttribute('data-course-id') || '').trim().toUpperCase(); if (!courseId) return; const rect = mention.getBoundingClientRect(); const menuWidth = 380; const menuHalfWidth = menuWidth / 2; const left = Math.max(12 + menuHalfWidth, Math.min(rect.left + rect.width / 2, window.innerWidth - menuHalfWidth - 12)); const placement = rect.top >= 78 ? 'above' : 'below'; const top = placement === 'above' ? rect.top - 8 : rect.bottom + 8; setCourseMenu({ courseId, position: { left, top, placement } }); }; return (
{isUser ? displayText : showProgressOnly ? ( ) : ( <> {msg.streaming ? ( ) : (
)} {msg.streaming && msg.progress?.latestToolActivity && !msg.progress?.finalAnswerStarted && ( )} {!msg.streaming && msg.traceSummary?.checked?.length > 0 && ( )} )}
{!isUser && courseMenu?.courseId && ( setCourseMenu(null)} /> )} {proposal && ( )}
); }; const TypingDots = () => (
{[0, 1, 2].map((i) => ( ))}
); // ============== Further personalization ============== const PERSONALIZATION_TOTAL_GROUPS = 6; const TOPIC_FIELDS = [ ['coding', 'Coding'], ['proofs', 'Proofs'], ['algorithms', 'Algorithms'], ['probability', 'Probability'], ['linearAlgebra', 'Linear algebra'], ['machineLearning', 'Machine learning'], ['systems', 'Systems'], ]; const FORMAT_FIELDS = [ ['psets', 'Psets'], ['codingLabs', 'Coding labs'], ['exams', 'Exams'], ['labs', 'Labs'], ['finalProjects', 'Final projects'], ['paperReading', 'Paper reading'], ['teamProjects', 'Team projects'], ['presentations', 'Presentations'], ]; const DIRECTION_FIELDS = [ ['machineLearning', 'Machine learning'], ['theory', 'Theory'], ['systems', 'Systems'], ['math', 'Math'], ['hass', 'HASS'], ]; const DEFAULT_GUIDED_QUESTIONS = { workload: { title: 'What should this semester leave room for?', body: 'Tell us roughly how much course time is realistic and what else is competing for your week.', }, evaluation: { title: 'What course policies would make or break a class for you?', body: 'This helps us avoid classes that look good on paper but feel wrong day to day.', }, interests: { title: 'Which areas feel exciting right now?', body: 'Use 0 for “please avoid” and 10 for “I want more of this.”', }, skills: { title: 'Where do you feel prepared?', body: 'This is not a grade. It only helps us estimate ramp-up risk.', }, formats: { title: 'What kind of work do you want more or less of?', body: 'Use 0 for “avoid if possible” and 10 for “I like this format.”', }, notes: { title: 'Anything else we should know?', body: 'Short, messy notes are fine. The recommender can use them later.', }, }; const blankPersonalization = () => ({ version: 1, ratingScale: '0-10', updatedAtClient: '', progress: { completedGroups: [], totalGroups: PERSONALIZATION_TOTAL_GROUPS }, workload: { weeklyCourseHoursBudget: '', challengePreference: '', attendanceImportance: '', gradingImportance: '', }, commitments: { urop: false, recruiting: false, ta: false, clubs: false, details: '', other: '', }, topicRatings: {}, formatPreferences: {}, gradingPreferences: { preferLenientGrading: null, avoidHarshCurves: null, preferClearRubrics: null, }, desiredCoursesPerDirection: {}, agentFollowUps: [], freeformNotes: '', }); const clonePersonalization = (value) => { const base = blankPersonalization(); const incoming = value && typeof value === 'object' ? value : {}; return { ...base, ...incoming, progress: { ...base.progress, ...(incoming.progress || {}) }, workload: { ...base.workload, ...(incoming.workload || {}) }, commitments: { ...base.commitments, ...(incoming.commitments || {}) }, topicRatings: { ...(incoming.topicRatings || {}) }, formatPreferences: { ...(incoming.formatPreferences || {}) }, gradingPreferences: { ...base.gradingPreferences, ...(incoming.gradingPreferences || {}) }, desiredCoursesPerDirection: { ...(incoming.desiredCoursesPerDirection || {}) }, agentFollowUps: Array.isArray(incoming.agentFollowUps) ? incoming.agentFollowUps : [], freeformNotes: incoming.freeformNotes || '', }; }; const hasValue = (value) => value !== null && value !== undefined && value !== ''; const completedPersonalizationGroups = (draft) => { const completed = []; if ( hasValue(draft.workload.weeklyCourseHoursBudget) || hasValue(draft.workload.challengePreference) || Object.entries(draft.commitments || {}).some(([key, value]) => key !== 'other' && (value === true || (typeof value === 'string' && value.trim()))) || String(draft.commitments?.other || '').trim() ) completed.push('workload'); if ( hasValue(draft.workload.attendanceImportance) || hasValue(draft.workload.gradingImportance) || Object.values(draft.gradingPreferences || {}).some((value) => value !== null && value !== undefined) ) completed.push('evaluation'); if (Object.values(draft.topicRatings || {}).some((ratings) => ratings && (hasValue(ratings.skill) || hasValue(ratings.interest)))) { completed.push('skillsInterests'); } if (Object.values(draft.formatPreferences || {}).some(hasValue)) completed.push('formats'); if (Object.values(draft.desiredCoursesPerDirection || {}).some(hasValue)) completed.push('directions'); if (String(draft.freeformNotes || '').trim()) completed.push('notes'); return completed; }; const normalizePersonalization = (draft) => { const completedGroups = completedPersonalizationGroups(draft); return { ...draft, version: 1, ratingScale: '0-10', updatedAtClient: new Date().toISOString(), progress: { completedGroups, totalGroups: PERSONALIZATION_TOTAL_GROUPS }, }; }; const PersonalizationProgressButton = ({ personalization, onClick }) => { const draft = clonePersonalization(personalization); const completed = draft.progress?.completedGroups?.length || completedPersonalizationGroups(draft).length; const total = draft.progress?.totalGroups || PERSONALIZATION_TOTAL_GROUPS; const angle = Math.round((completed / total) * 360); return ( ); }; const SmallSelect = ({ value, onChange, options }) => ( ); const TogglePill = ({ active, onClick, children }) => ( ); const CommitmentDetailFields = ({ commitments, update }) => (
{[ ['urop', 'UROP'], ['recruiting', 'Recruiting'], ['ta', 'TA'], ['clubs', 'Clubs'], ].map(([key, label]) => ( update('commitments', key, !commitments[key])}>{label} ))}
{['urop', 'recruiting', 'ta', 'clubs'].some((key) => commitments[key]) && (