Update static/script.js

static/script.js

@@ -18,6 +18,8 @@ function createDropdown(dropdownId) {
   const dropdown = document.getElementById(dropdownId);
   const selected = dropdown.querySelector(".selected");
   const options = dropdown.querySelector(".options");
+  const label = dropdown.parentElement.querySelector(".model-label");
+  const nameDisplay = dropdown.parentElement.querySelector(".model-name");
 
   MODEL_LIST.forEach(model => {
     const option = document.createElement("div");
@@ -30,6 +32,7 @@ function createDropdown(dropdownId) {
       e.stopPropagation();
       selected.textContent = model.name;
       dropdown.dataset.value = model.id;
+      nameDisplay.textContent = model.name;
       options.classList.add("hidden");
     });
   });
@@ -79,7 +82,6 @@ themeToggle.addEventListener("click", () => {
   themeToggle.textContent = isDark ? "🌙" : "☀️";
 });
 
-// === Config Panel Toggle Behavior ===
 toggleConfig.addEventListener("click", () => {
   if (configPanel.classList.contains("minimal")) {
     configPanel.classList.remove("minimal");
@@ -93,30 +95,25 @@ toggleConfig.addEventListener("click", () => {
   }
 });
 
-// === Docs Button Redirect ===
 docsButton.addEventListener("click", () => {
   window.location.href = "/docs";
 });
 
-// === Show/Hide Loaders ===
-function showLoaders() {
-  ["A", "B", "C", "D"].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>
-    `;
-  });
+// === Per-model Loader Control ===
+function showLoader(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", "D"].forEach(id => {
-    const loader = document.getElementById(`loader${id}`);
-    loader.classList.add("hidden");
-    loader.innerHTML = "";
-  });
+function hideLoader(id) {
+  const loader = document.getElementById(`loader${id}`);
+  loader.classList.add("hidden");
+  loader.innerHTML = "";
 }
 
 // === Chat Handling ===
@@ -124,13 +121,11 @@ const chatForm = document.getElementById("chatForm");
 const userInput = document.getElementById("userInput");
 const chatContainer = document.getElementById("chatContainer");
 
-// Create all dropdowns
 createDropdown("modelA");
 createDropdown("modelB");
 createDropdown("modelC");
 createDropdown("aggregator");
 
-// Append Message Function
 function appendMessage(role, text) {
   const div = document.createElement("div");
   div.className = `p-3 rounded shadow max-w-2xl ${role === "user" ? "bg-blue text-fg0 self-end" : "bg-green text-fg0 self-start"}`;
@@ -139,7 +134,6 @@ function appendMessage(role, text) {
   chatContainer.scrollTop = chatContainer.scrollHeight;
 }
 
-// Form Submit Event
 chatForm.addEventListener("submit", async (e) => {
   e.preventDefault();
   const prompt = userInput.value.trim();
@@ -150,15 +144,25 @@ chatForm.addEventListener("submit", async (e) => {
 
   configPanel.classList.remove("expanded");
   configPanel.classList.add("minimal");
-  showLoaders();
+
+  const selections = {
+    "LLM-A": document.getElementById("modelA").dataset.value,
+    "LLM-B": document.getElementById("modelB").dataset.value,
+    "LLM-C": document.getElementById("modelC").dataset.value,
+    "LLM-D": document.getElementById("aggregator").dataset.value
+  };
+
+  for (const key of Object.keys(selections)) {
+    if (selections[key]) showLoader(key.slice(-1)); // showLoader("A", "B", ...)
+  }
 
   const settings = {
     models: {
-      "LLM-A": document.getElementById("modelA").dataset.value,
-      "LLM-B": document.getElementById("modelB").dataset.value,
-      "LLM-C": document.getElementById("modelC").dataset.value,
+      "LLM-A": selections["LLM-A"],
+      "LLM-B": selections["LLM-B"],
+      "LLM-C": selections["LLM-C"]
     },
-    aggregator: document.getElementById("aggregator").dataset.value,
+    aggregator: selections["LLM-D"]
   };
 
   const response = await fetch("/chat", {
@@ -167,12 +171,18 @@ chatForm.addEventListener("submit", async (e) => {
     body: JSON.stringify({ prompt, settings })
   });
 
-  hideLoaders();
-
   if (response.ok) {
     const data = await response.json();
     appendMessage("bot", data.response);
+
+    // Simulated per-model delay (optional)
+    for (const key of Object.keys(selections)) {
+      hideLoader(key.slice(-1));
+    }
   } else {
+    for (const key of Object.keys(selections)) {
+      hideLoader(key.slice(-1));
+    }
     appendMessage("bot", "An error occurred. Please check your model selections.");
   }
 });