static/script.js

// === Global Model List ===
const MODEL_LIST = [
  { id: "deepseek/deepseek-chat-v3-0324:free", name: "DeepSeek Chat v3" },
  { id: "google/gemini-2.0-flash-exp:free", name: "Gemini 2.0 Flash" },
  { id: "meta-llama/llama-4-maverick:free", name: "LLaMA 4 Maverick" },
  { id: "microsoft/mai-ds-r1:free", name: "MAI DS R1" },
  { id: "meta-llama/llama-4-scout:free", name: "LLaMA 4 Scout" },
  { id: "google/gemma-3-27b-it:free", name: "Gemma 3 27B" },
  { id: "qwen/qwq-32b:free", name: "Qwen QWQ 32B" },
  { id: "qwen/qwen2.5-vl-72b-instruct:free", name: "Qwen2.5 VL 72B" },
  { id: "qwen/qwen-2.5-72b-instruct:free", name: "Qwen 2.5 72B" },
  { id: "google/gemini-2.5-pro-exp-03-25:free", name: "Gemini 2.5 Pro" },
  { id: "deepseek/deepseek-r1:free", name: "DeepSeek R1" }
];

// === Create Custom Dropdowns ===
function createDropdown(dropdownId) {
  const dropdown = document.getElementById(dropdownId);
  const selected = dropdown.querySelector(".selected");
  const options = dropdown.querySelector(".options");

  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);

    option.addEventListener("click", (e) => {
      e.stopPropagation();
      selected.textContent = model.name;
      dropdown.dataset.value = model.id;
      options.classList.add("hidden");
    });
  });

  selected.addEventListener("click", (e) => {
    e.stopPropagation();
    options.classList.toggle("hidden");
  });

  document.addEventListener("click", () => {
    options.classList.add("hidden");
  });
}

// === Theme, Config and Docs Buttons ===
const themeToggle = document.getElementById("themeToggle");
const toggleConfig = document.getElementById("toggleConfig");
const docsButton = document.getElementById("docsButton");
const configPanel = document.getElementById("configPanel");
const html = document.documentElement;

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");
      themeToggle.textContent = "🌙";
    } else {
      html.classList.remove("dark");
      themeToggle.textContent = "☀️";
    }
  }
}

setInitialTheme();

themeToggle.addEventListener("click", () => {
  const isDark = html.classList.toggle("dark");
  localStorage.setItem("theme", isDark ? "dark" : "light");
  themeToggle.textContent = isDark ? "🌙" : "☀️";
});

// === Config Panel Behavior ===
toggleConfig.addEventListener("click", () => {
  configPanel.classList.toggle("expanded");
});

// === 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>
    `;
  });
}

function hideLoaders() {
  ["A", "B", "C", "D"].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");
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"}`;
  div.innerText = text;
  chatContainer.appendChild(div);
  chatContainer.scrollTop = chatContainer.scrollHeight;
}

// Form Submit Event
chatForm.addEventListener("submit", async (e) => {
  e.preventDefault();
  const prompt = userInput.value.trim();
  if (!prompt) return;

  appendMessage("user", prompt);
  userInput.value = "";

  configPanel.classList.remove("expanded"); // Shrink config
  configPanel.classList.add("minimal"); // Activate minimal mode
  showLoaders(); // Show bouncing dots

  const settings = {
    models: {
      "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", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ prompt, settings })
  });

  hideLoaders(); // Hide bouncing dots

  if (response.ok) {
    const data = await response.json();
    appendMessage("bot", data.response);
  } else {
    appendMessage("bot", "An error occurred. Please check your model selections.");
  }
});