root/kidsai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add missing submitChatAnswerFromInput method to handle dynamic input areas when AI asks follow-up questions

Browse Source
This commit is contained in:
root
2025-06-30 13:06:27 +02:00
parent d314a96478
commit 902dd284ce
1 changed files with 24 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
html/kidsai/script-new.js
View File

@@ -687,8 +687,16 @@ class KidsAIExplorer {
// For pure "don't know" responses with Socratic guidance, continue to next question immediately // For pure "don't know" responses with Socratic guidance, continue to next question immediately
this.continueToNextQuestion(); this.continueToNextQuestion();
} else { } else {
// For substantial answers, show choice buttons // Check if AI response contains a question that needs answering
this.addContinueChoiceButtons(); const hasQuestion = data.response && data.response.includes('?');
if (hasQuestion) {
// AI asked a follow-up question, provide input area
this.addUserInputArea();
} else {
// No question in response, show choice buttons
this.addContinueChoiceButtons();
}
} }
}, 1500); }, 1500);
} else { } else {
@@ -1100,6 +1108,13 @@ class KidsAIExplorer {
// Add input area for user to respond // Add input area for user to respond
addUserInputArea() { addUserInputArea() {
// Remove any existing input areas to avoid duplicates
const existingInputs = this.conversationContainer.querySelectorAll('.user-input-container');
existingInputs.forEach(input => input.remove());
// Generate unique ID for this input
const inputId = `chat-input-${Date.now()}`;
const inputContainer = document.createElement('div'); const inputContainer = document.createElement('div');
inputContainer.className = 'user-input-container'; inputContainer.className = 'user-input-container';
inputContainer.innerHTML = ` inputContainer.innerHTML = `
@@ -1107,9 +1122,9 @@ class KidsAIExplorer {
<p>💭 ${this.getTranslation('share-thoughts') || (this.currentLanguage === 'de' ? 'Teile deine Gedanken mit:' : 'Share your thoughts:')}</p> <p>💭 ${this.getTranslation('share-thoughts') || (this.currentLanguage === 'de' ? 'Teile deine Gedanken mit:' : 'Share your thoughts:')}</p>
</div> </div>
<div class="input-area"> <div class="input-area">
<textarea id="chat-input" placeholder="${this.getTranslation('type-thoughts') || (this.currentLanguage === 'de' ? 'Schreibe hier deine Gedanken...' : 'Type your thoughts here...')}" <textarea id="${inputId}" placeholder="${this.getTranslation('type-thoughts') || (this.currentLanguage === 'de' ? 'Schreibe hier deine Gedanken...' : 'Type your thoughts here...')}"
rows="3" style="width: 100%; padding: 10px; border-radius: 8px; border: 2px solid #e2e8f0; font-size: 14px;"></textarea> 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.submitChatAnswerFromInput('${inputId}')" class="submit-btn" style="margin-top: 10px; padding: 10px 20px; background: #4ade80; color: white; border: none; border-radius: 8px; cursor: pointer;">
${this.getTranslation('submit') || (this.currentLanguage === 'de' ? 'Abschicken' : 'Submit')} 🚀 ${this.getTranslation('submit') || (this.currentLanguage === 'de' ? 'Abschicken' : 'Submit')} 🚀
</button> </button>
</div> </div>
@@ -1123,18 +1138,18 @@ class KidsAIExplorer {
this.scrollToBottomSmoothly(); this.scrollToBottomSmoothly();
// Focus on textarea // Focus on textarea
const textarea = inputContainer.querySelector('#chat-input'); const textarea = inputContainer.querySelector(`#${inputId}`);
if (textarea) { if (textarea) {
textarea.focus(); textarea.focus();
} }
}, 200); }, 200);
} }
// Submit chat answer // Submit chat answer from dynamic input with specific ID
submitChatAnswer() { submitChatAnswerFromInput(inputId) {
const textarea = document.getElementById('chat-input'); const textarea = document.getElementById(inputId);
if (!textarea) { if (!textarea) {
console.error('❌ Chat input not found'); console.error('❌ Chat input not found with ID:', inputId);
return; return;
} }