diff --git a/html/kidsai/script-new.js b/html/kidsai/script-new.js index 99785a7..b356dc4 100644 --- a/html/kidsai/script-new.js +++ b/html/kidsai/script-new.js @@ -677,10 +677,20 @@ class KidsAIExplorer { this.scrollToBottomSmoothly(); }, 100); - // Add choice buttons again for further exploration - setTimeout(() => { - this.addContinueChoiceButtons(); - }, 2000); + // 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(); - }, 2000); + this.addDeeperExplorationInputArea(); + }, 1500); } } - // Handle choice to continue to next question - continueToNextQuestion() { - // 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 = ` -
- πŸ€– - ${this.getTranslation('ai-teacher') || 'AI Teacher'} -
-
-

${question}

-
- `; - - 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() { + // Add input area specifically for deeper exploration questions + addDeeperExplorationInputArea() { const inputContainer = document.createElement('div'); - inputContainer.className = 'user-input-container'; + inputContainer.className = 'user-input-container deeper-exploration'; inputContainer.innerHTML = `

πŸ’­ ${this.getTranslation('share-thoughts') || 'Share your thoughts:'}

- -
@@ -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 - submitChatAnswer() { - const textarea = document.getElementById('chat-input'); + // Submit answer for deeper exploration + submitDeeperExplorationAnswer() { + 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 = ` +
+ πŸ€– + ${this.getTranslation('ai-teacher')} +
+
+

${data.response}

+
+ `; + + 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 = ` +
+ πŸ€– + ${this.getTranslation('ai-teacher')} +
+
+

${this.getTranslation('great-thinking-fallback') || 'Großartig gedacht! Das zeigt, dass du wirklich nachdenkst! 🌟'}

+
+ `; + + 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');