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

✅ COMPLETE: Fix chat system to use AI-powered responses

Browse Source 
- 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!
This commit is contained in:
root
2025-06-29 17:38:49 +02:00
parent 031611a585
commit 071916877c
2 changed files with 106 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
html/kidsai/index.html
View File

@@ -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>

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

@@ -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);
}