`; }; const sendMessage = async () => { if (!inputText.trim() || isLoading) return; const userMessage = { id: Date.now(), type: 'user', content: inputText.trim(), timestamp: new Date() }; setMessages(prev => [...prev, userMessage]); setInputText(''); setIsLoading(true); try { console.log('🚀 Sending request to:', WEBHOOK_URL); console.log('📦 Request payload:', { message: userMessage.content, session_id: getSessionId(), user_context: getUserContext(), timestamp: userMessage.timestamp.toISOString() }); const response = await fetch(WEBHOOK_URL, { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ message: userMessage.content, session_id: getSessionId(), user_context: getUserContext(), timestamp: userMessage.timestamp.toISOString() }) }); console.log('📊 Response status:', response.status); const responseText = await response.text(); console.log('📄 Raw response:', responseText); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}, response: ${responseText}`); } let data; try { data = JSON.parse(responseText); console.log('✅ Parsed response:', data); } catch (parseError) { console.error('❌ Failed to parse response as JSON:', parseError); throw new Error('Invalid JSON response from server'); } const agentMessage = { id: Date.now() + 1, type: 'agent', content: data.response || data.message || "I'm here to help! Could you tell me more?", timestamp: new Date() }; setMessages(prev => [...prev, agentMessage]); } catch (error) { console.error('❌ Error sending message:', error); const errorMessage = { id: Date.now() + 1, type: 'agent', content: `Connection error: ${error.message}. Please check the browser console (F12) for details.`, timestamp: new Date() }; setMessages(prev => [...prev, errorMessage]); } finally { setIsLoading(false); inputRef.current?.focus(); } }; const handleKeyPress = (e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendMessage(); } }; const getSessionId = () => { let sessionId = sessionStorage.getItem('coaching_session_id'); if (!sessionId) { sessionId = 'session_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9); sessionStorage.setItem('coaching_session_id', sessionId); } return sessionId; }; const getUserContext = () => { return { course_id: window.thinkific?.course?.id || null, lesson_id: window.thinkific?.lesson?.id || null, user_id: window.thinkific?.user?.id || null, progress: window.thinkific?.progress || null }; }; const formatTime = (timestamp) => { return timestamp.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); }; const formatMessage = (text) => { let formatted = text.replace(/\*\*(.*?)\*\*/g, '$1'); formatted = formatted.split('\n').join('
'); return formatted; }; const toggleExpanded = () => { setIsExpanded(!isExpanded); }; return (