EduCat with Flowise integration - complete implementation
This commit is contained in:
inubimambo
196
views/chat.ejs
Normal file
196
views/chat.ejs
Normal file
@@ -0,0 +1,196 @@
|
||||
<%- include('partials/header') %>
|
||||
|
||||
<div class="container py-5">
|
||||
<div class="row justify-content-center">
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
<div class="border-top bg-light p-3">
|
||||
<div class="input-group">
|
||||
<input type="text" id="chat-input" class="form-control border-0 bg-white shadow-sm" placeholder="Type your message here..." style="border-radius: 25px 0 0 25px; padding: 12px 20px;">
|
||||
<button type="button" id="send-btn" class="btn btn-primary px-4 border-0" style="border-radius: 0 25px 25px 0;">
|
||||
<i class="fas fa-paper-plane"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mt-4">
|
||||
<div class="col-md-6">
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-body text-center">
|
||||
<i class="fas fa-question-circle fa-2x text-primary mb-3"></i>
|
||||
<h6>Ask Questions</h6>
|
||||
<p class="text-muted small">Get answers about your study materials</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-body text-center">
|
||||
<i class="fas fa-graduation-cap fa-2x text-success mb-3"></i>
|
||||
<h6>Study Help</h6>
|
||||
<p class="text-muted small">Get study tips and techniques</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let chatHistory = [];
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const chatContainer = document.getElementById('chat-container');
|
||||
const chatInput = document.getElementById('chat-input');
|
||||
const sendBtn = document.getElementById('send-btn');
|
||||
|
||||
sendBtn.addEventListener('click', sendMessage);
|
||||
chatInput.addEventListener('keypress', function(e) {
|
||||
if (e.key === 'Enter') {
|
||||
sendMessage();
|
||||
}
|
||||
});
|
||||
|
||||
function sendMessage() {
|
||||
const message = chatInput.value.trim();
|
||||
if (!message) return;
|
||||
|
||||
// Add user message to chat
|
||||
addMessageToChat('user', message);
|
||||
chatInput.value = '';
|
||||
|
||||
// Add typing indicator
|
||||
addTypingIndicator();
|
||||
|
||||
// Send message to AI
|
||||
sendToAI(message);
|
||||
}
|
||||
|
||||
function addMessageToChat(sender, message) {
|
||||
const chatContainer = document.getElementById('chat-container');
|
||||
const messageDiv = document.createElement('div');
|
||||
messageDiv.className = `chat-message ${sender}-message mb-3`;
|
||||
|
||||
const time = new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
|
||||
|
||||
if (sender === 'user') {
|
||||
messageDiv.innerHTML = `
|
||||
<div class="d-flex align-items-start justify-content-end">
|
||||
<div class="message-content me-3 flex-grow-1" style="max-width: 70%;">
|
||||
<div class="message-bubble bg-primary text-white p-3 rounded-3 shadow-sm">
|
||||
<p class="mb-0">${message}</p>
|
||||
</div>
|
||||
<small class="text-muted d-block text-end mt-1">${time}</small>
|
||||
</div>
|
||||
<div class="avatar bg-secondary text-white rounded-circle d-flex align-items-center justify-content-center flex-shrink-0" style="width: 45px; height: 45px; min-width: 45px;">
|
||||
<i class="fas fa-user" style="font-size: 1.1rem;"></i>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
} else {
|
||||
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" style="max-width: 70%;">
|
||||
<div class="message-bubble bg-light p-3 rounded-3 shadow-sm border">
|
||||
<p class="mb-0">${message}</p>
|
||||
</div>
|
||||
<small class="text-muted d-block mt-1">${time}</small>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
chatContainer.appendChild(messageDiv);
|
||||
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';
|
||||
typingDiv.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">
|
||||
<div class="typing-dots">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
chatContainer.appendChild(typingDiv);
|
||||
chatContainer.scrollTop = chatContainer.scrollHeight;
|
||||
}
|
||||
|
||||
function removeTypingIndicator() {
|
||||
const typingIndicator = document.getElementById('typing-indicator');
|
||||
if (typingIndicator) {
|
||||
typingIndicator.remove();
|
||||
}
|
||||
}
|
||||
|
||||
async function sendToAI(message) {
|
||||
try {
|
||||
const response = await fetch('/api/chat', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
message: message,
|
||||
history: chatHistory
|
||||
})
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
removeTypingIndicator();
|
||||
|
||||
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.');
|
||||
}
|
||||
} catch (error) {
|
||||
removeTypingIndicator();
|
||||
addMessageToChat('bot', 'Sorry, I\'m having trouble connecting right now. Please try again.');
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<%- include('partials/footer') %>
|
||||
Reference in New Issue
Block a user