Update static/script.js

static/script.js

@@ -1,4 +1,3 @@
-// === Dynamic Model Fetching ===
 let MODEL_LIST = [];
 
 async function fetchModelList() {
@@ -15,7 +14,6 @@ async function fetchModelList() {
   }
 }
 
-// === Create Custom Dropdowns Dynamically ===
 function createDropdown(dropdownId) {
   const dropdown = document.getElementById(dropdownId);
   const selected = dropdown.querySelector(".selected");
@@ -25,7 +23,6 @@ function createDropdown(dropdownId) {
 
   MODEL_LIST.forEach(model => {
     const option = document.createElement("div");
-    option.className = "p-2 hover:bg-visual_green rounded cursor-pointer";
     option.textContent = model.name;
     option.dataset.value = model.id;
     options.appendChild(option);
@@ -34,27 +31,23 @@ function createDropdown(dropdownId) {
       e.stopPropagation();
       selected.textContent = model.name;
       dropdown.dataset.value = model.id;
-      if (nameDisplay) {
-        nameDisplay.textContent = model.name;
-        nameDisplay.classList.remove("hidden");
-      }
-      options.classList.add("hidden");
+      if (nameDisplay) nameDisplay.textContent = model.name;
+      options.classList.remove("show");
     });
   });
 
   selected.addEventListener("click", (e) => {
     e.stopPropagation();
-    options.classList.toggle("hidden");
+    options.classList.toggle("show");
   });
 
   document.addEventListener("click", (e) => {
     if (!dropdown.contains(e.target)) {
-      options.classList.add("hidden");
+      options.classList.remove("show");
     }
   });
 }
 
-// === Initialize All Dropdowns After Fetch ===
 function initializeDropdowns() {
   createDropdown("modelA");
   createDropdown("modelB");
@@ -62,7 +55,6 @@ function initializeDropdowns() {
   createDropdown("aggregator");
 }
 
-// === Theme, Config and Docs Buttons ===
 const themeToggle = document.getElementById("themeToggle");
 const toggleConfig = document.getElementById("toggleConfig");
 const docsButton = document.getElementById("docsButton");
@@ -104,31 +96,28 @@ toggleConfig.addEventListener("click", () => {
   } else if (configPanel.classList.contains("expanded")) {
     configPanel.classList.remove("expanded");
     configPanel.classList.add("minimal");
+
+    // Force close any dropdowns
+    document.querySelectorAll(".options").forEach(opt => opt.classList.remove("show"));
   } else {
     configPanel.classList.add("expanded");
     configPanel.classList.remove("hidden");
   }
-
-  // Force close all dropdowns when minimizing
-  if (configPanel.classList.contains("minimal")) {
-    document.querySelectorAll(".options").forEach(opt => opt.classList.add("hidden"));
-  }
 });
 
 docsButton.addEventListener("click", () => {
   window.location.href = "/docs";
 });
 
-// === Per-model Loader Control ===
 function showLoader(id) {
   const loader = document.getElementById(`loader${id}`);
   const modelZone = loader.closest(".model-zone");
   loader.classList.remove("hidden");
   modelZone.classList.add("loading");
   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>
+    <div class="dot"></div>
+    <div class="dot"></div>
+    <div class="dot"></div>
   `;
 }
 
@@ -140,7 +129,6 @@ function hideLoader(id) {
   loader.innerHTML = "";
 }
 
-// === Chat Handling ===
 const chatForm = document.getElementById("chatForm");
 const userInput = document.getElementById("userInput");
 const chatContainer = document.getElementById("chatContainer");
@@ -202,5 +190,4 @@ chatForm.addEventListener("submit", async (e) => {
   }
 });
 
-// === Kickstart ===
 fetchModelList();