document.addEventListener("DOMContentLoaded", function () { const toggle = document.getElementById("ethanicbot-toggle"); const windowBox = document.getElementById("ethanicbot-window"); const form = document.getElementById("ethanicbot-form"); const input = document.getElementById("ethanicbot-input"); const messagesDiv = document.getElementById("ethanicbot-messages"); const typingDiv = document.getElementById("ethanicbot-typing"); toggle.addEventListener("click", () => { windowBox.style.display = windowBox.style.display === "none" ? "flex" : "none"; }); form.addEventListener("submit", function (e) { e.preventDefault(); const message = input.value.trim(); if (!message) return; messagesDiv.innerHTML += `
${message}
`; input.value = ""; typingDiv.style.display = "block"; messagesDiv.scrollTop = messagesDiv.scrollHeight; fetch("/ethanicbot/chat/", { method: "POST", headers: { "X-CSRFToken": document.querySelector("[name=csrfmiddlewaretoken]").value, "Content-Type": "application/x-www-form-urlencoded", }, body: `message=${encodeURIComponent(message)}` }) .then((res) => res.json()) .then((data) => { typingDiv.style.display = "none"; messagesDiv.innerHTML += `
${data.response}
`; messagesDiv.scrollTop = messagesDiv.scrollHeight; }); }); });