83 lines
3.0 KiB
JavaScript
83 lines
3.0 KiB
JavaScript
document.addEventListener("DOMContentLoaded", function () {
|
|
const chatFab = document.getElementById("chat-fab");
|
|
const chatWindow = document.getElementById("chat-window");
|
|
const closeChatBtn = document.getElementById("close-chat");
|
|
const chatForm = document.getElementById("chat-form");
|
|
const chatInput = document.getElementById("chat-input");
|
|
const chatBody = document.getElementById("chat-body");
|
|
|
|
// --- Toggle Chat Window ---
|
|
chatFab.addEventListener("click", () => {
|
|
chatWindow.classList.toggle("open");
|
|
chatFab.classList.toggle("d-none");
|
|
});
|
|
|
|
closeChatBtn.addEventListener("click", () => {
|
|
chatWindow.classList.remove("open");
|
|
chatFab.classList.remove("d-none");
|
|
});
|
|
|
|
// --- Handle Message Sending ---
|
|
chatForm.addEventListener("submit", function (e) {
|
|
e.preventDefault();
|
|
const messageText = chatInput.value.trim();
|
|
|
|
if (messageText) {
|
|
// 1. Add user message to UI
|
|
addMessage(messageText, "user");
|
|
chatInput.value = "";
|
|
chatBody.scrollTop = chatBody.scrollHeight;
|
|
|
|
// 2. Get bot reply from API
|
|
showTypingIndicator();
|
|
|
|
fetch('api/get_reply.php')
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
throw new Error('Network response was not ok');
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
hideTypingIndicator();
|
|
const botReply = data.reply || "Sorry, I couldn't get a response.";
|
|
addMessage(botReply, "bot");
|
|
chatBody.scrollTop = chatBody.scrollHeight;
|
|
})
|
|
.catch(error => {
|
|
hideTypingIndicator();
|
|
console.error('Error fetching reply:', error);
|
|
addMessage("Sorry, something went wrong. Please try again.", "bot");
|
|
chatBody.scrollTop = chatBody.scrollHeight;
|
|
});
|
|
}
|
|
});
|
|
|
|
function addMessage(text, type) {
|
|
const messageElement = document.createElement("div");
|
|
messageElement.classList.add("chat-message", type);
|
|
messageElement.textContent = text;
|
|
chatBody.appendChild(messageElement);
|
|
}
|
|
|
|
function showTypingIndicator() {
|
|
const typingIndicator = document.createElement("div");
|
|
typingIndicator.classList.add("chat-message", "bot", "typing-indicator");
|
|
typingIndicator.innerHTML = '<span class="dot"></span><span class="dot"></span><span class="dot"></span>';
|
|
chatBody.appendChild(typingIndicator);
|
|
chatBody.scrollTop = chatBody.scrollHeight;
|
|
}
|
|
|
|
function hideTypingIndicator() {
|
|
const typingIndicator = document.querySelector(".typing-indicator");
|
|
if (typingIndicator) {
|
|
typingIndicator.remove();
|
|
}
|
|
}
|
|
|
|
// Add initial bot message
|
|
setTimeout(() => {
|
|
addMessage("Hi there! How can I help you today?", "bot");
|
|
}, 1000);
|
|
});
|