From 44c4c3c499e49301d155b5e3c40662f1ff657b22 Mon Sep 17 00:00:00 2001
From: github-actions <github-actions@github.com>
Date: Thu, 14 Aug 2025 04:36:44 +0000
Subject: [PATCH] Action Commit

---
 docs/index.html | 60 ++++++++++++++++++++++++-------------------------
 1 file changed, 29 insertions(+), 31 deletions(-)

diff --git a/docs/index.html b/docs/index.html
index d0d599d..1e0d616 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -18,33 +18,29 @@
   <div class="flex flex-col h-dvh max-h-dvh">
     <!-- Header -->
     <header class="sticky top-0 z-10 bg-white/80 backdrop-blur border-b border-gray-200">
-      <div class="mx-auto w-full max-w-2xl px-4 py-3 flex items-center justify-between">
+      <!-- Use 3-col grid to center the assistant icon perfectly -->
+      <div class="mx-auto w-full max-w-2xl px-4 py-3 grid grid-cols-3 items-center">
         <!-- New chat = icon only -->
         <button id="newChatBtn" class="h-8 w-8 rounded-xl bg-gray-100 hover:bg-gray-200 active:scale-[.99] transition flex items-center justify-center" title="New chat">
           <svg viewBox="0 0 24 24" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2">
             <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12M6 12h12"/>
           </svg>
-        </button>
-        <div class="text-xs text-gray-400">&nbsp;</div>
-        <!-- API key badge -->
-        <button id="apiBadge" title="Set OpenRouter API key" class="h-8 min-w-8 px-3 rounded-full border text-xs font-medium inline-flex items-center justify-center gap-1 transition bg-gray-100 text-gray-700 border-gray-200 hover:bg-gray-200">
-          <svg viewBox="0 0 24 24" class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.8">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M15 7a4 4 0 11-7.999.001A4 4 0 0115 7zm-.293 6.707L9 19.414V22h2.586l5.707-5.707a1 1 0 000-1.414l-1.586-1.586a1 1 0 00-1.414 0z"/>
-          </svg>
-          <span id="statusText" class="sr-only">offline</span>
-        </button>
-      </div>
-    </header><!-- Messages -->
-<main id="chat" class="flex-1 overflow-y-auto no-scrollbar">
-  <div id="messages" class="mx-auto w-full max-w-2xl px-4 py-4 sm:py-6 space-y-4">
-    <div class="flex gap-3">
-      <div data-assistant-avatar class="cursor-pointer shrink-0 h-8 w-8 rounded-full bg-gray-200 text-gray-900 flex items-center justify-center" title="Assistant settings">🤖</div>
-      <div class="bg-gray-100 rounded-2xl px-4 py-3 text-[15px] leading-relaxed">
-        <div class="font-semibold text-gray-800 mb-1">Hello!</div>
-        I’m wired to OpenRouter. Click the key badge to set an API key. Click any 🤖 avatar to tune model & sampling.
-      </div>
-    </div>
+        </button><!-- Centered assistant icon: opens settings dialog -->
+    <button id="settingsBtnTop" class="justify-self-center h-8 w-8 rounded-full bg-gray-200 text-gray-900 flex items-center justify-center hover:bg-gray-300 active:scale-[.99] transition" title="Assistant settings">🤖</button>
+
+    <!-- API key badge -->
+    <button id="apiBadge" title="Set OpenRouter API key" class="justify-self-end h-8 min-w-8 px-3 rounded-full border text-xs font-medium inline-flex items-center justify-center gap-1 transition bg-gray-100 text-gray-700 border-gray-200 hover:bg-gray-200">
+      <svg viewBox="0 0 24 24" class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.8">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M15 7a4 4 0 11-7.999.001A4 4 0 0115 7zm-.293 6.707L9 19.414V22h2.586l5.707-5.707a1 1 0 000-1.414l-1.586-1.586a1 1 0 00-1.414 0z"/>
+      </svg>
+      <span id="statusText" class="sr-only">offline</span>
+    </button>
   </div>
+</header>
+
+<!-- Messages -->
+<main id="chat" class="flex-1 overflow-y-auto no-scrollbar">
+  <div id="messages" class="mx-auto w-full max-w-2xl px-4 py-4 sm:py-6 space-y-4"></div>
   <div class="h-24"></div>
 </main>
 
@@ -152,6 +148,7 @@
         <button type="submit" class="px-3 py-2 rounded-xl bg-black text-white hover:bg-black/90">Save</button>
       </div>
     </form>
+
   </div>
 </div>
 
@@ -172,6 +169,7 @@
       newChatBtn: document.getElementById('newChatBtn'),
       apiBadge: document.getElementById('apiBadge'),
       statusText: document.getElementById('statusText'),
+      settingsBtnTop: document.getElementById('settingsBtnTop'),
 
       // settings modal
       settingsModal: document.getElementById('settingsModal'),
@@ -304,20 +302,15 @@
       return bubble;
     }
 
-    function clearChat(intro = true) {
+    // Make chat start blank and keep Clear/New blank
+    function clearChat(intro = false) {
       state.messages = [];
       el.messages.innerHTML = '';
-      if (intro) {
-        const introRow = document.createElement('div');
-        introRow.className = 'flex gap-3';
-        introRow.innerHTML = `<div data-assistant-avatar class="cursor-pointer shrink-0 h-8 w-8 rounded-full bg-gray-200 text-gray-900 flex items-center justify-center" title="Assistant settings">🤖</div><div class="bg-gray-100 rounded-2xl px-4 py-3 text-[15px] leading-relaxed"><div class="font-semibold text-gray-800 mb-1">New chat</div>You're in a fresh conversation. Click 🤖 to configure.</div>`;
-        el.messages.appendChild(introRow);
-      }
     }
 
     function updateStatus() {
       const online = !!store.apiKey;
-      el.apiBadge.className = 'h-8 min-w-8 px-3 rounded-full border text-xs font-medium inline-flex items-center justify-center gap-1 transition ' + (online
+      el.apiBadge.className = 'justify-self-end h-8 min-w-8 px-3 rounded-full border text-xs font-medium inline-flex items-center justify-center gap-1 transition ' + (online
         ? 'bg-black text-white border-black hover:bg-black/90'
         : 'bg-gray-100 text-gray-700 border-gray-200 hover:bg-gray-200');
       el.statusText.textContent = online ? 'online' : 'offline';
@@ -545,6 +538,9 @@
       if (target) openSettings();
     });
 
+    // Top bar assistant icon opens settings
+    el.settingsBtnTop.addEventListener('click', openSettings);
+
     // Auto-resize textarea
     el.input.addEventListener('input', () => {
       el.input.style.height = 'auto';
@@ -552,9 +548,9 @@
       el.input.style.height = h + 'px';
     });
 
-    // Clear / New
+    // Clear / New — keep chat blank (no intro bubble)
     el.clearBtn.addEventListener('click', () => clearChat(false));
-    el.newChatBtn.addEventListener('click', () => clearChat(true));
+    el.newChatBtn.addEventListener('click', () => clearChat(false));
 
     // API badge click
     el.apiBadge.addEventListener('click', () => {
@@ -577,6 +573,8 @@
     function init() {
       initFromQuery();
       updateStatus();
+      // Start with an empty chat (no welcome bubble)
+      clearChat(false);
     }
 
     init();