kqjy/EduCatWeb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix upload 'processing' status

Browse Source
This commit is contained in:
inubimambo
2025-07-06 23:39:32 +08:00
parent f5f5189fa0
commit b2b12a4197
3 changed files with 335 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
views/chat.ejs
View File

@@ -5,23 +5,16 @@
<div class="col-lg-8">
<div class="card shadow-lg border-0 chat">
<div class="card-header bg-primary text-white">
<h3 class="mb-0"><i class="fas fa-comments me-2"></i>Chat with EduCat AI</h3>
<div class="d-flex justify-content-between align-items-center">
<h3 class="mb-0"><i class="fas fa-comments me-2"></i>Chat with EduCat AI</h3>
<button type="button" id="clear-chat-btn" class="btn btn-outline-light btn-sm" title="Clear Chat History">
<i class="fas fa-trash-alt me-1"></i>Clear
</button>
</div>
</div>
<div class="card-body p-0">
<div id="chat-container" class="p-4" style="height: 500px; overflow-y: auto;">
<div class="chat-message bot-message mb-3">
<div class="d-flex align-items-start">
<div class="avatar bg-primary text-white rounded-circle d-flex align-items-center justify-content-center me-3 flex-shrink-0" style="width: 45px; height: 45px; min-width: 45px;">
<i class="fas fa-cat" style="font-size: 1.2rem;"></i>
</div>
<div class="message-content flex-grow-1">
<div class="message-bubble bg-light p-3 rounded-3 shadow-sm border">
<p class="mb-0">Hello! I'm EduCat AI, your study assistant. I can help you with questions about your notes, study techniques, and academic topics. How can I assist you today?</p>
</div>
<small class="text-muted d-block mt-1">Just now</small>
</div>
</div>
</div>
<!-- Initial bot message will be added here if no history exists -->
</div>
<div class="border-top bg-light p-3">
<div class="input-group">
@@ -59,12 +52,17 @@
</div>
<script>
let chatHistory = [];
// Get chat history from server-side rendered data
const serverChatHistory = <%- JSON.stringify(chatHistory || []) %>;
document.addEventListener('DOMContentLoaded', function() {
const chatContainer = document.getElementById('chat-container');
const chatInput = document.getElementById('chat-input');
const sendBtn = document.getElementById('send-btn');
const clearChatBtn = document.getElementById('clear-chat-btn');
// Load existing chat history from server
loadChatHistory();
sendBtn.addEventListener('click', sendMessage);
chatInput.addEventListener('keypress', function(e) {
@@ -73,6 +71,45 @@ document.addEventListener('DOMContentLoaded', function() {
}
});
clearChatBtn.addEventListener('click', clearChatHistory);
function loadChatHistory() {
// Clear the container first
chatContainer.innerHTML = '';
if (serverChatHistory.length === 0) {
// Show initial welcome message if no history exists
addWelcomeMessage();
} else {
// Load all previous messages
serverChatHistory.forEach(conversation => {
addMessageToChat('user', conversation.human, false);
addMessageToChat('bot', conversation.ai, false);
});
}
chatContainer.scrollTop = chatContainer.scrollHeight;
}
function addWelcomeMessage() {
const messageDiv = document.createElement('div');
messageDiv.className = 'chat-message bot-message mb-3';
messageDiv.innerHTML = `
<div class="d-flex align-items-start">
<div class="avatar bg-primary text-white rounded-circle d-flex align-items-center justify-content-center me-3 flex-shrink-0" style="width: 45px; height: 45px; min-width: 45px;">
<i class="fas fa-cat" style="font-size: 1.2rem;"></i>
</div>
<div class="message-content flex-grow-1">
<div class="message-bubble bg-light p-3 rounded-3 shadow-sm border">
<p class="mb-0">Hello! I'm EduCat AI, your study assistant. I can help you with questions about your notes, study techniques, and academic topics. How can I assist you today?</p>
</div>
<small class="text-muted d-block mt-1">Just now</small>
</div>
</div>
`;
chatContainer.appendChild(messageDiv);
}
function sendMessage() {
const message = chatInput.value.trim();
if (!message) return;
@@ -88,8 +125,7 @@ document.addEventListener('DOMContentLoaded', function() {
sendToAI(message);
}
function addMessageToChat(sender, message) {
const chatContainer = document.getElementById('chat-container');
function addMessageToChat(sender, message, withScroll = true) {
const messageDiv = document.createElement('div');
messageDiv.className = `chat-message ${sender}-message mb-3`;
@@ -126,11 +162,12 @@ document.addEventListener('DOMContentLoaded', function() {
}
chatContainer.appendChild(messageDiv);
chatContainer.scrollTop = chatContainer.scrollHeight;
if (withScroll) {
chatContainer.scrollTop = chatContainer.scrollHeight;
}
}
function addTypingIndicator() {
const chatContainer = document.getElementById('chat-container');
const typingDiv = document.createElement('div');
typingDiv.id = 'typing-indicator';
typingDiv.className = 'chat-message bot-message mb-3';
@@ -170,8 +207,7 @@ document.addEventListener('DOMContentLoaded', function() {
'Content-Type': 'application/json',
},
body: JSON.stringify({
message: message,
history: chatHistory
message: message
})
});
@@ -181,7 +217,6 @@ document.addEventListener('DOMContentLoaded', function() {
if (result.success) {
addMessageToChat('bot', result.response);
chatHistory.push({human: message, ai: result.response});
} else {
addMessageToChat('bot', 'Sorry, I encountered an error. Please try again.');
}
@@ -190,6 +225,31 @@ document.addEventListener('DOMContentLoaded', function() {
addMessageToChat('bot', 'Sorry, I\'m having trouble connecting right now. Please try again.');
}
}
async function clearChatHistory() {
if (!confirm('Are you sure you want to clear the chat history? This action cannot be undone.')) {
return;
}
try {
const response = await fetch('/api/chat/history', {
method: 'DELETE'
});
const result = await response.json();
if (result.success) {
// Clear the chat container and show welcome message
chatContainer.innerHTML = '';
addWelcomeMessage();
chatContainer.scrollTop = chatContainer.scrollHeight;
} else {
alert('Failed to clear chat history. Please try again.');
}
} catch (error) {
alert('Error clearing chat history. Please try again.');
}
}
});
</script>