Update static/script.js

static/script.js

@@ -13,7 +13,7 @@ const MODEL_LIST = [
   { id: "deepseek/deepseek-r1:free", name: "DeepSeek R1" }
 ];
 
-// === Populate Custom Dropdowns ===
+// === Create Custom Dropdowns ===
 function createDropdown(dropdownId) {
   const dropdown = document.getElementById(dropdownId);
   const selected = dropdown.querySelector(".selected");
@@ -39,7 +39,6 @@ function createDropdown(dropdownId) {
     options.classList.toggle("hidden");
   });
 
-  // Close dropdowns if clicking outside
   document.addEventListener("click", () => {
     options.classList.add("hidden");
   });
@@ -48,6 +47,7 @@ function createDropdown(dropdownId) {
 // === Theme Toggle ===
 const themeToggle = document.getElementById("themeToggle");
 const toggleConfig = document.getElementById("toggleConfig");
+const docsButton = document.getElementById("docsButton");
 const configPanel = document.getElementById("configPanel");
 const html = document.documentElement;
 
@@ -55,12 +55,19 @@ function setInitialTheme() {
   const savedTheme = localStorage.getItem("theme");
   if (savedTheme === "dark") {
     html.classList.add("dark");
+    themeToggle.textContent = "🌙";
   } else if (savedTheme === "light") {
     html.classList.remove("dark");
+    themeToggle.textContent = "☀️";
   } else {
     const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
-    if (prefersDark) html.classList.add("dark");
-    else html.classList.remove("dark");
+    if (prefersDark) {
+      html.classList.add("dark");
+      themeToggle.textContent = "🌙";
+    } else {
+      html.classList.remove("dark");
+      themeToggle.textContent = "☀️";
+    }
   }
 }
 
@@ -69,21 +76,29 @@ setInitialTheme();
 themeToggle.addEventListener("click", () => {
   const isDark = html.classList.toggle("dark");
   localStorage.setItem("theme", isDark ? "dark" : "light");
+  themeToggle.textContent = isDark ? "🌙" : "☀️";
 });
 
 toggleConfig.addEventListener("click", () => {
   configPanel.classList.toggle("hidden");
 });
 
+docsButton.addEventListener("click", () => {
+  window.location.href = "/docs";
+});
+
 // === Chat Handling ===
 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"}`;
@@ -92,6 +107,7 @@ function appendMessage(role, text) {
   chatContainer.scrollTop = chatContainer.scrollHeight;
 }
 
+// Form Submit Event
 chatForm.addEventListener("submit", async (e) => {
   e.preventDefault();
   const prompt = userInput.value.trim();
@@ -107,7 +123,8 @@ chatForm.addEventListener("submit", async (e) => {
       "LLM-A": document.getElementById("modelA").dataset.value,
       "LLM-B": document.getElementById("modelB").dataset.value,
       "LLM-C": document.getElementById("modelC").dataset.value,
-    }
+    },
+    aggregator: document.getElementById("aggregator").dataset.value,
   };
 
   const response = await fetch("/chat", {