Update static/script.js

static/script.js

@@ -44,7 +44,7 @@ function createDropdown(dropdownId) {
   });
 }
 
-// === Theme Toggle ===
+// === Theme, Config and Docs Buttons ===
 const themeToggle = document.getElementById("themeToggle");
 const toggleConfig = document.getElementById("toggleConfig");
 const docsButton = document.getElementById("docsButton");
@@ -87,6 +87,27 @@ docsButton.addEventListener("click", () => {
   window.location.href = "/docs";
 });
 
+// === Show/Hide Loaders ===
+function showLoaders() {
+  ["A", "B", "C"].forEach(id => {
+    const loader = document.getElementById(`loader${id}`);
+    loader.classList.remove("hidden");
+    loader.innerHTML = `
+      <div class="dot bg-aqua"></div>
+      <div class="dot bg-aqua animation-delay-150"></div>
+      <div class="dot bg-aqua animation-delay-300"></div>
+    `;
+  });
+}
+
+function hideLoaders() {
+  ["A", "B", "C"].forEach(id => {
+    const loader = document.getElementById(`loader${id}`);
+    loader.classList.add("hidden");
+    loader.innerHTML = "";
+  });
+}
+
 // === Chat Handling ===
 const chatForm = document.getElementById("chatForm");
 const userInput = document.getElementById("userInput");
@@ -116,7 +137,8 @@ chatForm.addEventListener("submit", async (e) => {
   appendMessage("user", prompt);
   userInput.value = "";
 
-  appendMessage("bot", "Thinking...");
+  configPanel.classList.add("hidden"); // Auto close config
+  showLoaders(); // Show bouncing dots
 
   const settings = {
     models: {
@@ -133,7 +155,7 @@ chatForm.addEventListener("submit", async (e) => {
     body: JSON.stringify({ prompt, settings })
   });
 
-  chatContainer.lastChild.remove(); // remove 'Thinking...'
+  hideLoaders(); // Hide bouncing dots
 
   if (response.ok) {
     const data = await response.json();