100 lines
3.6 KiB
JavaScript
100 lines
3.6 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function() {
|
|
const chatbotButton = document.getElementById('chatbot-button');
|
|
const chatbotWindow = document.getElementById('chatbot-window');
|
|
const chatbotClose = document.getElementById('chatbot-close');
|
|
const chatbotInput = document.getElementById('chatbot-input');
|
|
const chatbotSend = document.getElementById('chatbot-send');
|
|
const chatbotMessages = document.getElementById('chatbot-messages');
|
|
|
|
if (!chatbotButton) return;
|
|
|
|
// Toggle window
|
|
chatbotButton.addEventListener('click', () => {
|
|
chatbotWindow.classList.toggle('active');
|
|
if (chatbotWindow.classList.contains('active')) {
|
|
chatbotInput.focus();
|
|
}
|
|
});
|
|
|
|
chatbotClose.addEventListener('click', () => {
|
|
chatbotWindow.classList.remove('active');
|
|
});
|
|
|
|
// Send message function
|
|
async function sendMessage() {
|
|
const message = chatbotInput.value.trim();
|
|
if (!message) return;
|
|
|
|
// Add user message to UI
|
|
appendMessage('user', message);
|
|
chatbotInput.value = '';
|
|
|
|
// Add typing indicator
|
|
const typingId = 'typing-' + Date.now();
|
|
const typingDiv = document.createElement('div');
|
|
typingDiv.id = typingId;
|
|
typingDiv.className = 'typing-indicator';
|
|
typingDiv.innerText = document.documentElement.lang === 'ar' ? 'جاري الكتابة...' : 'Typing...';
|
|
chatbotMessages.appendChild(typingDiv);
|
|
chatbotMessages.scrollTop = chatbotMessages.scrollHeight;
|
|
|
|
try {
|
|
const response = await fetch('/api/chat/', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRFToken': getCookie('csrftoken')
|
|
},
|
|
body: JSON.stringify({ message: message })
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
// Remove typing indicator
|
|
const typingElement = document.getElementById(typingId);
|
|
if (typingElement) typingElement.remove();
|
|
|
|
if (data.success) {
|
|
appendMessage('bot', data.reply);
|
|
} else {
|
|
appendMessage('bot', 'Sorry, I encountered an error. Please try again later.');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error:', error);
|
|
const typingElement = document.getElementById(typingId);
|
|
if (typingElement) typingElement.remove();
|
|
appendMessage('bot', 'Network error. Please check your connection.');
|
|
}
|
|
}
|
|
|
|
function appendMessage(role, text) {
|
|
const msgDiv = document.createElement('div');
|
|
msgDiv.className = `chat-message ${role}`;
|
|
msgDiv.innerText = text;
|
|
chatbotMessages.appendChild(msgDiv);
|
|
chatbotMessages.scrollTop = chatbotMessages.scrollHeight;
|
|
}
|
|
|
|
// Event listeners for sending
|
|
chatbotSend.addEventListener('click', sendMessage);
|
|
chatbotInput.addEventListener('keypress', (e) => {
|
|
if (e.key === 'Enter') sendMessage();
|
|
});
|
|
|
|
// CSRF helper
|
|
function getCookie(name) {
|
|
let cookieValue = null;
|
|
if (document.cookie && document.cookie !== '') {
|
|
const cookies = document.cookie.split(';');
|
|
for (let i = 0; i < cookies.length; i++) {
|
|
const cookie = cookies[i].trim();
|
|
if (cookie.substring(0, name.length + 1) === (name + '=')) {
|
|
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
return cookieValue;
|
|
}
|
|
});
|