Improve deeper exploration chat flow in KidsAI

- Fix issue where deeper exploration questions weren't allowing user responses
- Add addDeeperExplorationInputArea() for dedicated deeper exploration input
- Add submitDeeperExplorationAnswer() to handle deeper exploration responses
- Add generateDeeperExplorationResponse() for contextual AI responses
- Detect if deeper exploration contains questions vs statements
- Improve conversation flow control between regular questions and deeper exploration
- Kids now get proper chance to answer 'tell me more' follow-up questions

html/kidsai/script-new.js

@@ -677,10 +677,20 @@ class KidsAIExplorer {
                     this.scrollToBottomSmoothly();
                 }, 100);
 
-                // Add choice buttons again for further exploration
+                // Check if the response contains a question that needs an answer
+                const hasQuestion = data.response.includes('?');
+                
+                if (hasQuestion) {
+                    // Add input area for user to respond to the deeper exploration question
+                    setTimeout(() => {
+                        this.addDeeperExplorationInputArea();
+                    }, 1500);
+                } else {
+                    // No question, just add choice buttons again
                     setTimeout(() => {
                         this.addContinueChoiceButtons();
                     }, 2000);
+                }
             } else {
                 throw new Error(data.error || 'Failed to get deeper exploration');
             }
@@ -708,76 +718,25 @@ class KidsAIExplorer {
                 this.scrollToBottomSmoothly();
             }, 100);
 
+            // This fallback has a question, so add input area
             setTimeout(() => {
-                this.addContinueChoiceButtons();
+                this.addDeeperExplorationInputArea();
-            }, 2000);
+            }, 1500);
         }
     }
 
-    // Handle choice to continue to next question
+    // Add input area specifically for deeper exploration questions
-    continueToNextQuestion() {
+    addDeeperExplorationInputArea() {
-        // Remove choice buttons
-        const choiceContainer = document.querySelector('.choice-container');
-        if (choiceContainer) {
-            choiceContainer.remove();
-        }
-
-        // Move to next question
-        this.currentQuestionIndex++;
-        this.askNextQuestion();
-    }
-
-    // Ask the next question in the conversation
-    askNextQuestion() {
-        console.log('❓ askNextQuestion called, currentQuestionIndex:', this.currentQuestionIndex);
-        
-        if (!this.questions || this.currentQuestionIndex >= this.questions.length) {
-            console.log('✅ All questions completed');
-            this.showCompletionMessage();
-            return;
-        }
-
-        const question = this.questions[this.currentQuestionIndex];
-        
-        // Add AI question bubble
-        const questionBubble = document.createElement('div');
-        questionBubble.className = 'chat-message ai-message';
-        questionBubble.innerHTML = `
-            <div class="message-header">
-                <span class="ai-avatar">🤖</span>
-                <span class="ai-label">${this.getTranslation('ai-teacher') || 'AI Teacher'}</span>
-            </div>
-            <div class="message-content">
-                <p>${question}</p>
-            </div>
-        `;
-
-        this.conversationContainer.appendChild(questionBubble);
-
-        // Show question with animation
-        setTimeout(() => {
-            questionBubble.classList.add('visible');
-            this.scrollToBottomSmoothly();
-        }, 100);
-
-        // Add input area for user response
-        setTimeout(() => {
-            this.addUserInputArea();
-        }, 1000);
-    }
-
-    // Add input area for user to respond
-    addUserInputArea() {
         const inputContainer = document.createElement('div');
-        inputContainer.className = 'user-input-container';
+        inputContainer.className = 'user-input-container deeper-exploration';
         inputContainer.innerHTML = `
             <div class="input-prompt">
                 <p>💭 ${this.getTranslation('share-thoughts') || 'Share your thoughts:'}</p>
             </div>
             <div class="input-area">
-                <textarea id="chat-input" placeholder="${this.getTranslation('type-thoughts') || 'Type your thoughts here...'}" 
+                <textarea id="deeper-chat-input" placeholder="${this.getTranslation('type-thoughts') || 'Type your thoughts here...'}" 
                           rows="3" style="width: 100%; padding: 10px; border-radius: 8px; border: 2px solid #e2e8f0; font-size: 14px;"></textarea>
-                <button onclick="kidsAI.submitChatAnswer()" class="submit-btn" style="margin-top: 10px; padding: 10px 20px; background: #4ade80; color: white; border: none; border-radius: 8px; cursor: pointer;">
+                <button onclick="kidsAI.submitDeeperExplorationAnswer()" class="submit-btn" style="margin-top: 10px; padding: 10px 20px; background: #4ade80; color: white; border: none; border-radius: 8px; cursor: pointer;">
                     ${this.getTranslation('submit') || 'Submit'} 🚀
                 </button>
             </div>
@@ -791,18 +750,18 @@ class KidsAIExplorer {
             this.scrollToBottomSmoothly();
             
             // Focus on textarea
-            const textarea = inputContainer.querySelector('#chat-input');
+            const textarea = inputContainer.querySelector('#deeper-chat-input');
             if (textarea) {
                 textarea.focus();
             }
         }, 200);
     }
 
-    // Submit chat answer
+    // Submit answer for deeper exploration
-    submitChatAnswer() {
+    submitDeeperExplorationAnswer() {
-        const textarea = document.getElementById('chat-input');
+        const textarea = document.getElementById('deeper-chat-input');
         if (!textarea) {
-            console.error('❌ Chat input not found');
+            console.error('❌ Deeper chat input not found');
             return;
         }
 
@@ -827,7 +786,7 @@ class KidsAIExplorer {
         `;
 
         // Remove input container and add user message
-        const inputContainer = document.querySelector('.user-input-container');
+        const inputContainer = document.querySelector('.user-input-container.deeper-exploration');
         if (inputContainer) {
             inputContainer.remove();
         }
@@ -840,12 +799,107 @@ class KidsAIExplorer {
             this.scrollToBottomSmoothly();
         }, 100);
 
-        // Generate AI response
+        // Generate AI response to the deeper exploration answer
         setTimeout(() => {
-            this.generateChatAIResponse(answer, this.currentQuestionIndex);
+            this.generateDeeperExplorationResponse(answer);
         }, 500);
     }
 
+    // Generate AI response to deeper exploration answer
+    async generateDeeperExplorationResponse(answer) {
+        console.log('🚀 generateDeeperExplorationResponse called with:', answer);
+        
+        try {
+            // Get the last AI question for context
+            const lastAIMessages = Array.from(this.conversationContainer.querySelectorAll('.ai-message.exploration'));
+            const lastExplorationQuestion = lastAIMessages.length > 0 
+                ? lastAIMessages[lastAIMessages.length - 1].querySelector('.message-content p')?.textContent || ''
+                : '';
+
+            console.log('📤 Sending deeper exploration response request:', { answer, lastExplorationQuestion });
+
+            // 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: lastExplorationQuestion,
+                    language: this.currentLanguage,
+                    context: 'deeper_exploration_response'
+                })
+            });
+
+            console.log('📥 Deeper exploration response status:', response.status);
+
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+
+            const data = await response.json();
+            console.log('✅ Deeper exploration 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">${this.getTranslation('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.scrollToBottomSmoothly();
+                }, 100);
+
+                // Add choice buttons after response to continue or move on
+                setTimeout(() => {
+                    this.addContinueChoiceButtons();
+                }, 1500);
+            } else {
+                throw new Error(data.error || 'Failed to generate response');
+            }
+
+        } catch (error) {
+            console.error('❌ Error generating deeper exploration 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">${this.getTranslation('ai-teacher')}</span>
+                </div>
+                <div class="message-content">
+                    <p>${this.getTranslation('great-thinking-fallback') || 'Großartig gedacht! Das zeigt, dass du wirklich nachdenkst! 🌟'}</p>
+                </div>
+            `;
+
+            this.conversationContainer.appendChild(responseBubble);
+
+            setTimeout(() => {
+                responseBubble.classList.add('visible');
+                this.scrollToBottomSmoothly();
+            }, 100);
+
+            setTimeout(() => {
+                this.addContinueChoiceButtons();
+            }, 1500);
+        }
+    }
+
     // Show completion message when all questions are done
     showCompletionMessage() {
         const completionBubble = document.createElement('div');