From 071916877c27dff751a9d678ae8b3ca62d1a9a35 Mon Sep 17 00:00:00 2001
From: root <root>
Date: Sun, 29 Jun 2025 17:38:49 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=85=20COMPLETE:=20Fix=20chat=20system=20t?=
 =?UTF-8?q?o=20use=20AI-powered=20responses?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- FIXED chat system still using hardcoded ai-responses.js fallbacks
- REPLACED generateContextualResponse call with generateChatAIResponse
- ADDED generateChatAIResponse method for chat interface
- NOW BOTH systems (step-by-step AND chat) use server-side AI
- ADDED debugging logs to track request/response flow
- Updated cache-busting version for immediate testing

Chat responses for 'thrust?' should now be contextual and educational!
---
 html/kidsai/index.html    |   6 +-
 html/kidsai/script-new.js | 132 +++++++++++++++++++++++++++++---------
 2 files changed, 106 insertions(+), 32 deletions(-)

diff --git a/html/kidsai/index.html b/html/kidsai/index.html
index fde9d8d..b416643 100755
--- a/html/kidsai/index.html
+++ b/html/kidsai/index.html
@@ -176,9 +176,9 @@
         }, 100);
     </script>
 
-    <script src="translations.js?v=20250629172300"></script>
-    <script src="ai-responses.js?v=20250629172300"></script>
-    <script src="script-new.js?v=20250629172300"></script>
+    <script src="translations.js?v=20250629173500"></script>
+    <script src="ai-responses.js?v=20250629173500"></script>
+    <script src="script-new.js?v=20250629173500"></script>
     
     <!-- Inline debugging script -->
     <script>
diff --git a/html/kidsai/script-new.js b/html/kidsai/script-new.js
index d07b179..4e630c5 100644
--- a/html/kidsai/script-new.js
+++ b/html/kidsai/script-new.js
@@ -345,6 +345,8 @@ class KidsAIExplorer {
 
     // Generate AI response to user answer using server-side AI
     async generateAIResponseToAnswer(answer, stepIndex, responseDiv) {
+        console.log('🚀 generateAIResponseToAnswer called with:', { answer, stepIndex });
+        
         try {
             // Show loading state
             responseDiv.innerHTML = `
@@ -365,6 +367,8 @@ class KidsAIExplorer {
                 ? this.currentSteps[stepIndex].text 
                 : 'the current question';
 
+            console.log('📤 Sending request to /api/respond-to-answer:', { answer, currentQuestion });
+
             // Call server API for contextual response
             const response = await fetch('/api/respond-to-answer', {
                 method: 'POST',
@@ -379,11 +383,14 @@ class KidsAIExplorer {
                 })
             });
 
+            console.log('📥 Server response status:', response.status);
+
             if (!response.ok) {
                 throw new Error(`HTTP error! status: ${response.status}`);
             }
 
             const data = await response.json();
+            console.log('✅ Server response data:', data);
             
             if (data.success && data.response) {
                 responseDiv.innerHTML = `
@@ -441,6 +448,100 @@ class KidsAIExplorer {
         }, 500);
     }
 
+    // Generate AI response for chat system
+    async generateChatAIResponse(answer, questionIndex) {
+        console.log('🚀 generateChatAIResponse called with:', { answer, questionIndex });
+        
+        try {
+            // Get current question context
+            const currentQuestion = this.questions && this.questions[questionIndex] 
+                ? this.questions[questionIndex] 
+                : 'the current question';
+
+            console.log('📤 Sending chat request to /api/respond-to-answer:', { answer, currentQuestion });
+
+            // Call server API for contextual response
+            const response = await fetch('/api/respond-to-answer', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    answer: answer,
+                    question: currentQuestion,
+                    language: this.currentLanguage,
+                    stepIndex: questionIndex
+                })
+            });
+
+            console.log('📥 Chat server response status:', response.status);
+
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+
+            const data = await response.json();
+            console.log('✅ Chat server response data:', data);
+            
+            if (data.success && data.response) {
+                // Add AI response bubble
+                const responseBubble = document.createElement('div');
+                responseBubble.className = 'chat-message ai-message';
+                responseBubble.innerHTML = `
+                    <div class="message-header">
+                        <span class="ai-avatar">🤖</span>
+                        <span class="ai-label">AI Teacher</span>
+                    </div>
+                    <div class="message-content">
+                        <p>${data.response}</p>
+                    </div>
+                `;
+
+                this.conversationContainer.appendChild(responseBubble);
+
+                // Show AI response with animation
+                setTimeout(() => {
+                    responseBubble.classList.add('visible');
+                    this.conversationContainer.scrollTop = this.conversationContainer.scrollHeight;
+                }, 100);
+
+                // Ask next question
+                setTimeout(() => {
+                    this.askNextQuestion();
+                }, 2000);
+            } else {
+                throw new Error(data.error || 'Failed to generate response');
+            }
+
+        } catch (error) {
+            console.error('❌ Error generating chat AI response:', error);
+            
+            // Fallback response
+            const responseBubble = document.createElement('div');
+            responseBubble.className = 'chat-message ai-message';
+            responseBubble.innerHTML = `
+                <div class="message-header">
+                    <span class="ai-avatar">🤖</span>
+                    <span class="ai-label">AI Teacher</span>
+                </div>
+                <div class="message-content">
+                    <p>🌟 Great thinking! Keep exploring - every thought helps us learn!</p>
+                </div>
+            `;
+
+            this.conversationContainer.appendChild(responseBubble);
+
+            setTimeout(() => {
+                responseBubble.classList.add('visible');
+                this.conversationContainer.scrollTop = this.conversationContainer.scrollHeight;
+            }, 100);
+
+            setTimeout(() => {
+                this.askNextQuestion();
+            }, 2000);
+        }
+    }
+
     askNextQuestion() {
         if (this.currentQuestionIndex >= this.questions.length) {
             // All questions asked, add and show reveal section
@@ -562,36 +663,9 @@ class KidsAIExplorer {
         setTimeout(() => {
             userBubble.classList.add('visible');
             
-            // Generate contextual AI response based on the answer
-            const aiResponse = this.generateContextualResponse(answer, questionIndex);
+            // Generate AI response using server-side AI
+            this.generateChatAIResponse(answer, questionIndex);
             
-            // Add AI response bubble
-            setTimeout(() => {
-                const responseBubble = document.createElement('div');
-                responseBubble.className = 'chat-message ai-message';
-                responseBubble.innerHTML = `
-                    <div class="message-header">
-                        <span class="ai-avatar">🤖</span>
-                        <span class="ai-label">AI Teacher</span>
-                    </div>
-                    <div class="message-content">
-                        <p>${aiResponse}</p>
-                    </div>
-                `;
-                
-                this.conversationContainer.appendChild(responseBubble);
-                
-                setTimeout(() => {
-                    responseBubble.classList.add('visible');
-                    responseBubble.scrollIntoView({ behavior: 'smooth' });
-                    
-                    // Move to next question after AI response
-                    this.currentQuestionIndex++;
-                    setTimeout(() => {
-                        this.askNextQuestion();
-                    }, 1500);
-                }, 500);
-            }, 800);
         }, 300);
     }