/* script.js */ // Variabel global untuk sistem antrian pesan dan pengelolaan sesi let messageQueue = []; let processing = false; let id_user; let inactivityTimeout; const INACTIVITY_LIMIT = 30 * 60 * 1000; // 30 menit document.addEventListener("DOMContentLoaded", () => { initializeSession(); setupEventListeners(); resetInactivityTimer(); }); // --- SISTEM SESI & USER ID UNIK --- // function initializeSession() { // Jika belum ada sessionID di sessionStorage, buat ID baru if (!sessionStorage.getItem("sessionID")) { const sessionID = generateSessionID(); sessionStorage.setItem("sessionID", sessionID); id_user = sessionID; console.log("Session ID dibuat:", sessionID); } else { const sesi_id = sessionStorage.getItem("sessionID"); id_user = sesi_id; console.log("Session ID yang ada:", sesi_id); } // Reset session ID saat user meninggalkan halaman window.addEventListener("beforeunload", () => { sessionStorage.removeItem("sessionID"); }); } function generateSessionID() { // Pembuatan ID sederhana (bisa disesuaikan) return "user-" + Math.random().toString(36).substr(2, 9) + "-" + Date.now(); } // Reset timer inaktivitas function resetInactivityTimer() { clearTimeout(inactivityTimeout); inactivityTimeout = setTimeout(() => { // Hapus sessionID setelah 30 menit tidak aktif sessionStorage.removeItem("sessionID"); console.log("Session ID dihapus karena inaktivitas."); }, INACTIVITY_LIMIT); } // --- EVENT LISTENERS --- // function setupEventListeners() { const chatForm = document.getElementById("chat-form"); const chatInput = document.getElementById("chat-input"); // Penanganan pengiriman pesan chatForm.addEventListener("submit", e => { e.preventDefault(); const message = chatInput.value.trim(); if (message === "") return; addUserMessage(message); chatInput.value = ""; // Reset timer inaktivitas saat ada aktivitas user resetInactivityTimer(); }); // Penanganan event keyboard: Enter untuk kirim, Shift+Enter untuk newline chatInput.addEventListener("keydown", e => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); chatForm.dispatchEvent(new Event("submit")); } }); } // --- MENANGANI PESAN --- // // Tambah pesan user ke tampilan chat function addUserMessage(text) { addMessageToChat(text, "user"); // Masukkan respon bot ke dalam antrian enqueueBotResponse(text); } // Fungsi untuk menambahkan pesan ke container chat function addMessageToChat(text, sender) { const chatContainer = document.getElementById("chat-container"); const messageElement = document.createElement("div"); messageElement.classList.add("message", sender); // Menggunakan textContent untuk menjaga format string dan mencegah injeksi HTML messageElement.textContent = text; chatContainer.appendChild(messageElement); // Auto-scroll ke pesan terbaru messageElement.scrollIntoView({ behavior: "smooth" }); } // Menambahkan pesan ke antrian dan memulai pemrosesan function enqueueBotResponse(userMessage) { messageQueue.push(userMessage); processQueue(); } // Memproses antrian pesan satu per satu function processQueue() { if (processing || messageQueue.length === 0) return; processing = true; blockUserInput(true); showTypingIndicator(true); // Simulasikan delay mengetik bot (misal: 2 detik) const userMessage = messageQueue.shift(); generateBotResponse(userMessage, id_user).then(botResponse => { addMessageToChat(botResponse, "bot"); showTypingIndicator(false); blockUserInput(false); processing = false; }); } // Generator respon bot sederhana (misalnya, echo pesan user) async function generateBotResponse(userMessage, user_ID) { const url = "/chat"; // Ganti dengan URL API Anda const data = { message: userMessage, user_id: user_ID }; const options = { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(data) }; const res = await (await fetch(url, options)).json(); return res.reply; } // Memblokir atau membuka input user saat bot sedang merespons function blockUserInput(block) { const chatInput = document.getElementById("chat-input"); const sendButton = document.getElementById("send-button"); chatInput.disabled = block; sendButton.disabled = block; } // Menampilkan atau menyembunyikan typing indicator function showTypingIndicator(show) { const indicator = document.getElementById("typing-indicator"); if (show) { indicator.classList.remove("hidden"); } else { indicator.classList.add("hidden"); } }