templates/index.html

<!DOCTYPE html>
<html lang="en" class="bg0 text-fg0 dark">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>MoA Chat</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
  <link rel="stylesheet" href="/static/style.css" />
</head>
<body class="bg0 text-fg0 transition-colors duration-300">
  <div class="main-container flex flex-col p-4">

    <header class="flex items-center justify-between mb-4">
      <h1 class="text-2xl font-bold">MoA Chat</h1>
      <div class="space-x-2 flex items-center">
        <button id="toggleConfig" class="bg-blue px-3 py-1 rounded text-fg0 hover:bg-purple transition">⚙️</button>
        <button id="docsButton" class="bg-blue px-3 py-1 rounded text-fg0 hover:bg-purple transition">Docs</button>
        <button id="themeToggle" class="bg-blue px-3 py-1 rounded text-fg0 hover:bg-purple transition">🌙</button>
      </div>
    </header>

    <div id="configPanel" class="bg1 rounded p-4 mb-4 hidden transition-all duration-500 overflow-hidden max-h-full">

      <h2 class="text-lg font-semibold mb-4">Model Selection</h2> <!-- Moved up and margin adjusted -->

      <div class="grid grid-cols-1 md:grid-cols-4 gap-4">

        <!-- Model Zone A -->
        <div class="model-zone">
          <label class="block mb-1 model-label">LLM-A</label>
          <div class="model-name hidden mb-1 font-semibold"></div>
          <div id="modelA" class="model-dropdown relative bg-statusline1 text-fg0 rounded p-2 cursor-pointer select-none">
            <span class="selected block">Select a model</span>
            <div class="options hidden absolute left-0 right-0 mt-2 bg-[#282828] rounded shadow-lg z-10 max-h-60 overflow-y-auto"></div>
          </div>
          <div id="loaderA" class="loader hidden mt-2 flex justify-center"></div>
        </div>

        <!-- Model Zone B -->
        <div class="model-zone">
          <label class="block mb-1 model-label">LLM-B</label>
          <div class="model-name hidden mb-1 font-semibold"></div>
          <div id="modelB" class="model-dropdown relative bg-statusline1 text-fg0 rounded p-2 cursor-pointer select-none">
            <span class="selected block">Select a model</span>
            <div class="options hidden absolute left-0 right-0 mt-2 bg-[#282828] rounded shadow-lg z-10 max-h-60 overflow-y-auto"></div>
          </div>
          <div id="loaderB" class="loader hidden mt-2 flex justify-center"></div>
        </div>

        <!-- Model Zone C -->
        <div class="model-zone">
          <label class="block mb-1 model-label">LLM-C</label>
          <div class="model-name hidden mb-1 font-semibold"></div>
          <div id="modelC" class="model-dropdown relative bg-statusline1 text-fg0 rounded p-2 cursor-pointer select-none">
            <span class="selected block">Select a model</span>
            <div class="options hidden absolute left-0 right-0 mt-2 bg-[#282828] rounded shadow-lg z-10 max-h-60 overflow-y-auto"></div>
          </div>
          <div id="loaderC" class="loader hidden mt-2 flex justify-center"></div>
        </div>

        <!-- Model Zone Aggregator -->
        <div class="model-zone">
          <label class="block mb-1 model-label">LLM-D (Aggregator)</label>
          <div class="model-name hidden mb-1 font-semibold"></div>
          <div id="aggregator" class="model-dropdown relative bg-statusline1 text-fg0 rounded p-2 cursor-pointer select-none">
            <span class="selected block">Select a model</span>
            <div class="options hidden absolute left-0 right-0 mt-2 bg-[#282828] rounded shadow-lg z-10 max-h-60 overflow-y-auto"></div>
          </div>
          <div id="loaderD" class="loader hidden mt-2 flex justify-center"></div>
        </div>

      </div>
    </div>

    <main id="chatContainer" class="flex-1 bg1 p-4 rounded shadow-md">
      <!-- Messages (message-wrapper with message-bubble) injected here -->
    </main>

    <form id="chatForm" class="mt-4 flex">
      <input id="userInput" type="text" placeholder="Ask something..."
             class="flex-1 px-4 py-2 rounded-l border-none bg-statusline1 text-fg0 placeholder-fg1 focus:outline-none">
      <button type="submit" class="px-4 py-2 bg-green text-fg0 rounded-r hover:bg-visual_green transition">Send</button>
    </form>

    <footer class="text-center mt-6 text-sm opacity-70">
      Made with ❤️ in Panamá
    </footer>

  </div>

  <script src="/static/script.js"></script>
</body>
</html>