const apiBaseUrl = "http://127.0.0.1:5000/"; const chatbotToggler = document.querySelector(".chatbot-toggler"); const closeBtn = document.querySelector(".close-btn"); const chatbox = document.querySelector(".chatbox"); const chatInput = document.querySelector(".chat-input textarea"); const sendChatBtn = document.querySelector(".chat-input span"); let userMessage = null; // Variable to store user's message const inputInitHeight = chatInput.scrollHeight; var initialThreadID = null; const createChatLi = (message, className) => { // Create a chat

element with passed message and className const chatLi = document.createElement("li"); chatLi.classList.add("chat", `${className}`); let chatContent = className === "outgoing" ? `

` : `smart_toy

`; chatLi.innerHTML = chatContent; chatLi.querySelector("p").textContent = message; return chatLi; // return chat

element }; const generateResponse = (chatElement) => { const API_URL = `${apiBaseUrl}/chat`; // Use the correct endpoint const messageElement = chatElement.querySelector("p"); if (initialThreadID === null) { messageElement.classList.add("error"); messageElement.textContent = "Oops! Something went wrong. Please try again."; return; } // Define the properties and message for the API request const requestOptions = { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ thread_id: initialThreadID, message: userMessage, }), }; // Send POST request to API, get response and set the response as paragraph text fetch(API_URL, requestOptions) .then((res) => res.json()) .then((data) => { messageElement.textContent = data.response.trim(); }) .catch(() => { messageElement.classList.add("error"); messageElement.textContent = "Oops! Something went wrong. Please try again."; }) .finally(() => chatbox.scrollTo(0, chatbox.scrollHeight)); }; const handleChat = () => { userMessage = chatInput.value.trim(); // Get user entered message and remove extra whitespace if (!userMessage) return; // Clear the input textarea and set its height to default chatInput.value = ""; chatInput.style.height = `${inputInitHeight}px`; // Append the user's message to the chatbox chatbox.appendChild(createChatLi(userMessage, "outgoing")); chatbox.scrollTo(0, chatbox.scrollHeight); setTimeout(() => { // Display "Thinking..." message while waiting for the response const incomingChatLi = createChatLi("Thinking...", "incoming"); chatbox.appendChild(incomingChatLi); chatbox.scrollTo(0, chatbox.scrollHeight); generateResponse(incomingChatLi); }, 600); }; chatInput.addEventListener("input", () => { // Adjust the height of the input textarea based on its content chatInput.style.height = `${inputInitHeight}px`; chatInput.style.height = `${chatInput.scrollHeight}px`; }); chatInput.addEventListener("keydown", (e) => { // If Enter key is pressed without Shift key and the window // width is greater than 800px, handle the chat if (e.key === "Enter" && !e.shiftKey && window.innerWidth > 800) { e.preventDefault(); handleChat(); } }); async function initialRequest() { try { // Make an initial request to start a new conversation const startResponse = await fetch(`${apiBaseUrl}/start`, { method: "GET", headers: { "Content-Type": "application/json", }, }); if (!startResponse.ok) { throw new Error(`HTTP error! Status: ${startResponse.status}`); } const startData = await startResponse.json(); initialThreadID = startData.thread_id; } catch (error) { console.error("Error:", error.message); } } // initializing the thread id initialRequest() sendChatBtn.addEventListener("click", handleChat); closeBtn.addEventListener("click", () => document.body.classList.remove("show-chatbot") ); chatbotToggler.addEventListener("click", () => document.body.classList.toggle("show-chatbot") );