{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);
const bottomRef = useRef(null);
const inputRef = useRef(null);
const sendBtnRef = useRef(null);
useEffect(() => {
if (open) setTimeout(() => inputRef.current?.focus(), 100);
}, [open]);
useEffect(() => {
if (bottomRef.current) {
bottomRef.current.parentElement.scrollTop = bottomRef.current.offsetTop;
}
}, [messages, loading]);
useEffect(() => {
localStorage.setItem('tl_chat', JSON.stringify(messages.slice(-40)));
}, [messages]);
const buildContext = () => {
const sels = (profile.selections || []).map(s => `${s.school?.abbr || s.school?.name} - ${s.major}`).join(', ');
const coursesPlaced = Object.values(profile.semesters || {}).flat().length;
const calgetcDone = Object.keys(profile.calgetcSelections || {}).filter(k => (profile.calgetcSelections[k] || []).length > 0).length;
const completed = Object.entries(profile.courseStatuses || {}).filter(([, s]) => s === 'completed').map(([k]) => k);
return `Student context:
- Community college: ${profile.cc?.name || 'Irvine Valley College'}
- Target schools/majors: ${sels || 'None set yet'}
- Transfer term: ${profile.transferTerm || 'Fall 2027'}
- Courses placed in plan: ${coursesPlaced}
- Courses completed: ${completed.join(', ') || 'None yet'}
- Cal-GETC areas filled: ${calgetcDone}/11
- Summers included: ${profile.useSummer ? 'Yes' : 'No'}`;
};
const send = useCallback(async (text) => {
const trimmed = text.trim();
if (!trimmed || loading) return;
setSending(true);
setTimeout(() => setSending(false), 400);
const userMsg = { role: 'user', content: trimmed };
const updated = [...messages, userMsg];
setMessages(updated);
setInput('');
setLoading(true);
try {
const ctx = buildContext();
const reply = await window.claude.complete({
messages: [
{
role: 'user',
content: `You are a warm, knowledgeable California community college transfer advisor inside an app called TransferLens. You help students understand their transfer pathway clearly and calmly. Keep answers concise (2-4 sentences max unless asked for detail), encouraging, and specific to the student's situation. Avoid jargon when possible. Here is the student's current context:\n\n${ctx}\n\nStudent question: ${trimmed}`
}
]
});
setMessages(prev => [...prev, { role: 'assistant', content: reply }]);
} catch (e) {
setMessages(prev => [...prev, { role: 'assistant', content: "I'm having trouble connecting right now. Please try again in a moment." }]);
} finally {
setLoading(false);
}
}, [messages, loading, profile]);
const handleKey = (e) => {
if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); send(input); }
};
return (