87 lines
3.0 KiB
JavaScript
87 lines
3.0 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function () {
|
|
const chatWindow = document.getElementById('chat-window');
|
|
const chatToggleButton = document.getElementById('chat-toggle-button');
|
|
const chatCloseButton = document.getElementById('chat-close-button');
|
|
const chatForm = document.getElementById('chat-form');
|
|
const chatInput = document.getElementById('chat-input');
|
|
const chatMessages = document.getElementById('chat-messages');
|
|
|
|
const toggleChat = (forceState) => {
|
|
const isOpen = chatWindow.classList.contains('open');
|
|
const show = forceState !== undefined ? forceState : !isOpen;
|
|
|
|
if (show) {
|
|
chatWindow.classList.add('open');
|
|
chatToggleButton.style.display = 'none';
|
|
} else {
|
|
chatWindow.classList.remove('open');
|
|
chatToggleButton.style.display = 'flex';
|
|
}
|
|
};
|
|
|
|
chatToggleButton.addEventListener('click', () => toggleChat(true));
|
|
chatCloseButton.addEventListener('click', () => toggleChat(false));
|
|
|
|
const addMessage = (text, type, isTyping = false) => {
|
|
const messageDiv = document.createElement('div');
|
|
messageDiv.classList.add('message', type);
|
|
|
|
const contentDiv = document.createElement('div');
|
|
contentDiv.classList.add('message-content');
|
|
contentDiv.textContent = text;
|
|
messageDiv.appendChild(contentDiv);
|
|
|
|
if (isTyping) {
|
|
messageDiv.id = 'typing-indicator';
|
|
messageDiv.classList.add('typing');
|
|
}
|
|
|
|
chatMessages.appendChild(messageDiv);
|
|
chatMessages.scrollTop = chatMessages.scrollHeight;
|
|
return messageDiv;
|
|
};
|
|
|
|
chatForm.addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
const userInput = chatInput.value.trim();
|
|
if (!userInput) return;
|
|
|
|
addMessage(userInput, 'sent');
|
|
chatInput.value = '';
|
|
chatInput.disabled = true;
|
|
|
|
const typingIndicator = addMessage('Festverse AI is typing...', 'received', true);
|
|
|
|
try {
|
|
const response = await fetch('api/ai_chat.php', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({ message: userInput }),
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error('Network response was not ok.');
|
|
}
|
|
|
|
const data = await response.json();
|
|
|
|
typingIndicator.remove();
|
|
|
|
if (data.reply) {
|
|
addMessage(data.reply, 'received');
|
|
} else {
|
|
addMessage('Sorry, I encountered an error. Please try again.', 'received');
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error('Chat error:', error);
|
|
typingIndicator.remove();
|
|
addMessage('Sorry, I could not connect to the AI assistant.', 'received');
|
|
} finally {
|
|
chatInput.disabled = false;
|
|
chatInput.focus();
|
|
}
|
|
});
|
|
}); |