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
This commit is contained in:
root
@@ -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();
|
||||
}, 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 = `
|
||||
<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() {
|
||||
// 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 = `
|
||||
<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
|
||||
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 = `
|
||||
<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');
|
||||
|
||||
Reference in New Issue
Block a user