Update public/index.html

public/index.html

@@ -27,10 +27,10 @@
         .markdown-body code:not(pre code) { background: #374151; padding: 0.2rem 0.4rem; border-radius: 0.25rem; font-size: 0.85em; }
         .markdown-body pre { background: #1e1e1e; padding: 2.5rem 1rem 1rem 1rem; border-radius: 0.5rem; position: relative; overflow-x: auto; margin-bottom: 1rem; }
         .markdown-body pre code { font-size: 0.85rem; }
-        
+
         .copy-btn { position: absolute; top: 0.5rem; right: 0.5rem; background: #4b5563; color: #e5e7eb; border: none; padding: 0.25rem 0.75rem; border-radius: 0.375rem; cursor: pointer; font-size: 0.75rem; transition: background 0.2s; }
         .copy-btn:hover { background: #6b7280; }
-        
+
         .reasoning-block { border-left: 3px solid #6366f1; padding-left: 1rem; margin-bottom: 1rem; color: #9ca3af; font-size: 0.9em; background: rgba(99, 102, 241, 0.05); padding: 0.75rem; border-radius: 0 0.5rem 0.5rem 0; }
     </style>
 </head>
@@ -59,7 +59,7 @@
                 <button onclick="toggleSidebar()" class="lg:hidden p-1 -ml-1 text-gray-400 hover:text-white shrink-0">
                     <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
                 </button>
-                
+
                 <div id="title-display" class="flex items-center gap-2 overflow-hidden w-full">
                     <h2 id="current-chat-title" class="font-semibold text-gray-100 truncate text-sm lg:text-base">Select or create a chat</h2>
                     <button onclick="enableTitleEdit()" id="edit-title-btn" class="hidden text-gray-500 hover:text-blue-400 p-1 opacity-0 group-hover:opacity-100 transition-opacity shrink-0" title="Rename Chat">
@@ -110,531 +110,464 @@
                         <input type="file" id="image-input" accept="image/*" multiple class="hidden" onchange="handleImageSelect(event)">
                     </label>
                     <textarea id="message-input" rows="1" class="flex-1 bg-transparent resize-none outline-none text-[15px] p-2 max-h-32 min-h-[40px] text-gray-100 placeholder-gray-500" placeholder="Message the AI..."></textarea>
-                    
+
                     <button onclick="sendMessage()" id="send-btn" class="p-2 text-blue-400 hover:text-blue-300 transition shrink-0 rounded-lg hover:bg-gray-800">
                         <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path></svg>
                     </button>
                     <button onclick="stopGeneration()" id="stop-btn" class="hidden p-2 text-red-500 hover:text-red-400 transition shrink-0 rounded-lg hover:bg-gray-800" title="Stop Generation">
                         <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><rect x="6" y="6" width="12" height="12" rx="2"></rect></svg>
                     </button>
-
                 </div>
                 <div class="text-center mt-2 text-[10px] text-gray-600">Shift + Enter for new line</div>
             </div>
         </div>
     </main>
 
-    <!-- ================================= -->
-<!-- CLIENT SCRIPT (REPLACE SCRIPT TAG) -->
-<!-- ================================= -->
-
-<script>
-
-marked.setOptions({
-  highlight(code, lang) {
-    const language =
-      hljs.getLanguage(lang)
-        ? lang
-        : 'plaintext';
-
-    return hljs.highlight(code, {
-      language
-    }).value;
-  }
-});
-
-let currentChatId = null;
-let attachedImages = [];
-
-const chatWindow =
-  document.getElementById('chat-window');
-
-const scrollBtn =
-  document.getElementById('scroll-bottom-btn');
-
-// =================================
-// SAFE HTML
-// =================================
-
-function escapeHtml(str = "") {
-  return str
-    .replaceAll("&", "&amp;")
-    .replaceAll("<", "&lt;")
-    .replaceAll(">", "&gt;")
-    .replaceAll('"', "&quot;")
-    .replaceAll("'", "&#39;");
-}
-
-// =================================
-// TOKEN DISPLAY
-// =================================
-
-function updateTokenDisplay(
-  total,
-  input,
-  output
-) {
-
-  document.getElementById('token-total')
-    .innerText =
-      (total || 0).toLocaleString();
-
-  document.getElementById('token-in')
-    .innerText =
-      (input || 0).toLocaleString();
-
-  document.getElementById('token-out')
-    .innerText =
-      (output || 0).toLocaleString();
-}
-
-// =================================
-// RENDER SINGLE MESSAGE
-// =================================
-
-function createMessageElement(
-  role,
-  content = "",
-  reasoning = ""
-) {
-
-  const wrapper =
-    document.createElement('div');
-
-  wrapper.className =
-    `flex ${
-      role === 'user'
-        ? 'justify-end'
-        : 'justify-start'
-    } w-full`;
-
-  const bubble =
-    document.createElement('div');
-
-  bubble.className =
-    `max-w-[95%] lg:max-w-[85%]
-    rounded-2xl p-4 shadow-sm
-    ${
-      role === 'user'
-        ? 'bg-blue-600 text-white rounded-br-sm'
-        : 'bg-gray-850 border border-gray-800 text-gray-200 markdown-body rounded-bl-sm'
-    }`;
-
-  if (role === 'user') {
-
-    bubble.innerHTML =
-      `<div class="whitespace-pre-wrap">${escapeHtml(content)}</div>`;
-
-  } else {
-
-    let html = "";
-
-    if (reasoning) {
-      html += `
-      <div class="reasoning-block">
-        <i>Thinking Process</i><br/>
-        ${DOMPurify.sanitize(
-          marked.parse(reasoning)
-        )}
-      </div>`;
-    }
-
-    html += DOMPurify.sanitize(
-      marked.parse(content)
-    );
-
-    bubble.innerHTML = html;
-  }
-
-  wrapper.appendChild(bubble);
-
-  return wrapper;
-}
-
-// =================================
-// RENDER CHAT
-// =================================
-
-function renderMessages(messages) {
-
-  chatWindow.innerHTML = '';
-
-  messages.forEach(m => {
-
-    chatWindow.appendChild(
-      createMessageElement(
-        m.role,
-        m.content,
-        m.reasoning
-      )
-    );
-  });
-
-  addCopyButtons();
-
-  scrollToBottom();
-}
-
-// =================================
-// COPY BUTTONS
-// =================================
-
-function addCopyButtons() {
-
-  document
-    .querySelectorAll('.markdown-body pre')
-    .forEach(pre => {
-
-      if (
-        pre.querySelector('.copy-btn')
-      ) return;
-
-      const btn =
-        document.createElement('button');
-
-      btn.className = 'copy-btn';
-
-      btn.innerText = 'Copy';
-
-      btn.onclick = () => {
-
-        const codeText =
-          pre.querySelector('code')
-            ?.innerText || '';
-
-        navigator.clipboard.writeText(
-          codeText.trim()
-        );
-
-        btn.innerText = 'Copied';
-
-        setTimeout(() => {
-          btn.innerText = 'Copy';
-        }, 2000);
-      };
-
-      pre.appendChild(btn);
-    });
-}
-
-// =================================
-// SCROLL
-// =================================
-
-function scrollToBottom() {
-
-  chatWindow.scrollTo({
-    top: chatWindow.scrollHeight,
-    behavior: 'smooth'
-  });
-}
-
-// =================================
-// SIDEBAR
-// =================================
-
-async function loadSidebar() {
-
-  const res =
-    await fetch('/api/chats');
-
-  const chats =
-    await res.json();
-
-  document.getElementById('chat-list')
-    .innerHTML = chats.map(c => `
-
-      <div
-        onclick="selectChat('${c.id}')"
-        class="p-3 rounded-xl cursor-pointer
-        ${
-          c.id === currentChatId
-            ? 'bg-gray-800'
-            : 'hover:bg-gray-800/50'
-        }">
-
-        <div class="text-sm font-medium truncate text-gray-200">
-          ${escapeHtml(c.title)}
-        </div>
-
-      </div>
-
-    `).join('');
-}
-
-// =================================
-// SELECT CHAT
-// =================================
-
-async function selectChat(id) {
-
-  currentChatId = id;
-
-  const res =
-    await fetch(`/api/chats/${id}`);
-
-  const chat =
-    await res.json();
-
-  document.getElementById(
-    'current-chat-title'
-  ).innerText = chat.title;
-
-  renderMessages(chat.messages);
-
-  updateTokenDisplay(
-    chat.totalTokens,
-    chat.inputTokens,
-    chat.outputTokens
-  );
-
-  loadSidebar();
-}
-
-// =================================
-// CREATE CHAT
-// =================================
-
-async function createNewChat() {
-
-  const res =
-    await fetch('/api/chats', {
-      method: 'POST'
-    });
-
-  const chat =
-    await res.json();
-
-  await selectChat(chat.id);
-}
-
-// =================================
-// SEND MESSAGE
-// =================================
-
-async function sendMessage() {
-
-  const input =
-    document.getElementById(
-      'message-input'
-    );
-
-  const text =
-    input.value.trim();
-
-  if (!text || !currentChatId)
-    return;
-
-  // ADD USER MESSAGE
-  const userElement =
-    createMessageElement(
-      'user',
-      text
-    );
-
-  chatWindow.appendChild(userElement);
-
-  // ADD AI PLACEHOLDER
-  const aiWrapper =
-    document.createElement('div');
-
-  aiWrapper.className =
-    'flex justify-start w-full';
-
-  aiWrapper.innerHTML = `
-    <div
-      class="max-w-[95%] lg:max-w-[85%]
-      rounded-2xl rounded-bl-sm p-4
-      bg-gray-850 border border-gray-800
-      text-gray-200 markdown-body"
-      id="streaming-ai-msg">
-
-      <span class="animate-pulse text-gray-400">
-        Thinking...
-      </span>
-
-    </div>
-  `;
-
-  chatWindow.appendChild(aiWrapper);
-
-  scrollToBottom();
-
-  input.value = '';
-
-  let aiContent = "";
-  let aiReasoning = "";
-
-  try {
-
-    const response =
-      await fetch(
-        `/api/chats/${currentChatId}/stream`,
-        {
-          method: 'POST',
-
-          headers: {
-            'Content-Type':
-              'application/json'
-          },
-
-          body: JSON.stringify({
-            model:
-              document.getElementById(
-                'model-select'
-              ).value,
-
-            prompt: text,
-
-            images: attachedImages
-          })
+    <script>
+        marked.setOptions({
+            highlight: function(code, lang) {
+                const language = hljs.getLanguage(lang) ? lang : 'plaintext';
+                return hljs.highlight(code, { language }).value;
+            }
+        });
+
+        // ─── State ────────────────────────────────────────────────────────────────
+        let currentChatId   = null;
+        let attachedImages  = [];
+        let pollingInterval = null;   // FIX: always explicitly null when cleared
+        let currentTokens   = { total: 0, in: 0, out: 0 };
+
+        // ─── UI Helpers ───────────────────────────────────────────────────────────
+        function toggleInputState(isGenerating) {
+            document.getElementById('send-btn').classList.toggle('hidden', isGenerating);
+            document.getElementById('stop-btn').classList.toggle('hidden', !isGenerating);
         }
-      );
-
-    const reader =
-      response.body
-        .pipeThrough(
-          new TextDecoderStream()
-        )
-        .getReader();
-
-    let buffer = "";
 
-    while (true) {
-
-      const {
-        value,
-        done
-      } = await reader.read();
-
-      if (done) break;
-
-      buffer += value;
-
-      const events =
-        buffer.split("\n\n");
-
-      buffer = events.pop();
-
-      for (const event of events) {
-
-        const lines =
-          event.split("\n");
-
-        let type = "";
-        let data = "";
-
-        for (const line of lines) {
-
-          if (
-            line.startsWith("event:")
-          ) {
-            type =
-              line.replace(
-                "event:",
-                ""
-              ).trim();
-          }
-
-          if (
-            line.startsWith("data:")
-          ) {
-            data =
-              line.replace(
-                "data:",
-                ""
-              ).trim();
-          }
+        async function stopGeneration() {
+            if (!currentChatId) return;
+            toggleInputState(false);
+            try {
+                await fetch(`/api/chats/${currentChatId}/stop`, { method: 'POST' });
+            } catch (err) {
+                console.error("Failed to send stop signal", err);
+            }
         }
 
-        if (!data) continue;
+        const chatWindow = document.getElementById('chat-window');
+        const scrollBtn  = document.getElementById('scroll-bottom-btn');
 
-        const parsed =
-          JSON.parse(data);
+        chatWindow.addEventListener('scroll', () => {
+            const dist = chatWindow.scrollHeight - chatWindow.scrollTop - chatWindow.clientHeight;
+            scrollBtn.classList.toggle('hidden', dist <= 100);
+        });
 
-        if (type === 'thinking') {
+        function scrollToBottom() {
+            chatWindow.scrollTo({ top: chatWindow.scrollHeight, behavior: 'smooth' });
+        }
 
-          aiReasoning += parsed.text;
+        function updateTokenDisplay(total, input, output) {
+            currentTokens = { total, in: input, out: output };
+            document.getElementById('token-total').innerText = (total  || 0).toLocaleString();
+            document.getElementById('token-in').innerText   = (input  || 0).toLocaleString();
+            document.getElementById('token-out').innerText  = (output || 0).toLocaleString();
+        }
 
-        } else if (type === 'text') {
+        // ─── Copy buttons ─────────────────────────────────────────────────────────
+        function attachCopyButtons(scope) {
+            (scope || document).querySelectorAll('.markdown-body pre').forEach(pre => {
+                if (pre.querySelector('.copy-btn')) return;
+                const btn = document.createElement('button');
+                btn.className  = 'copy-btn';
+                btn.innerText  = 'Copy';
+                btn.onclick    = () => {
+                    const text = pre.querySelector('code')?.innerText || pre.innerText.replace('Copy', '');
+                    navigator.clipboard.writeText(text.trim());
+                    btn.innerText = 'Copied!';
+                    setTimeout(() => btn.innerText = 'Copy', 2000);
+                };
+                pre.appendChild(btn);
+            });
+        }
 
-          aiContent += parsed.text;
+        // ─── Title editing ────────────────────────────────────────────────────────
+        function enableTitleEdit() {
+            if (!currentChatId) return;
+            document.getElementById('title-display').classList.add('hidden');
+            const edit  = document.getElementById('title-edit');
+            edit.classList.remove('hidden');
+            edit.classList.add('flex');
+            const input = document.getElementById('title-input');
+            input.value = document.getElementById('current-chat-title').innerText;
+            input.focus();
+            input.select();
+        }
 
-        } else if (type === 'usage') {
+        function cancelTitleEdit() {
+            document.getElementById('title-edit').classList.add('hidden');
+            document.getElementById('title-edit').classList.remove('flex');
+            document.getElementById('title-display').classList.remove('hidden');
+        }
 
-          updateTokenDisplay(
-            parsed.totalTokens,
-            parsed.inputTokens,
-            parsed.outputTokens
-          );
+        async function saveTitle() {
+            if (!currentChatId) return cancelTitleEdit();
+            const newTitle = document.getElementById('title-input').value.trim();
+            if (!newTitle) return cancelTitleEdit();
+            document.getElementById('current-chat-title').innerText = newTitle;
+            cancelTitleEdit();
+            await fetch(`/api/chats/${currentChatId}/title`, {
+                method: 'PUT',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ title: newTitle })
+            });
+            loadSidebar();
         }
 
-        let html = "";
+        document.getElementById('title-input').addEventListener('keydown', e => {
+            if (e.key === 'Enter')  saveTitle();
+            if (e.key === 'Escape') cancelTitleEdit();
+        });
 
-        if (aiReasoning) {
-          html += `
-            <div class="reasoning-block">
-              <i>Thinking Process</i><br/>
-              ${DOMPurify.sanitize(
-                marked.parse(aiReasoning)
-              )}
-            </div>
-          `;
+        function toggleSidebar() {
+            document.getElementById('sidebar').classList.toggle('-translate-x-full');
+            document.getElementById('mobile-overlay').classList.toggle('hidden');
         }
 
-        html += DOMPurify.sanitize(
-          marked.parse(aiContent)
-        );
-
-        document.getElementById(
-          'streaming-ai-msg'
-        ).innerHTML = html;
+        const textarea = document.getElementById('message-input');
+        textarea.addEventListener('input', function() {
+            this.style.height = 'auto';
+            this.style.height = Math.min(this.scrollHeight, 128) + 'px';
+        });
+
+        // ─── Sidebar / Chat list ──────────────────────────────────────────────────
+        async function loadSidebar() {
+            const res   = await fetch('/api/chats');
+            const chats = await res.json();
+            document.getElementById('chat-list').innerHTML = chats.map(c => `
+                <div onclick="selectChat('${c.id}')" class="p-3 rounded-xl cursor-pointer transition border border-transparent ${c.id === currentChatId ? 'bg-gray-800 border-gray-700' : 'hover:bg-gray-800/50'}">
+                    <div class="text-sm font-medium truncate text-gray-200">${c.title}</div>
+                    <div class="text-[10px] text-gray-500 mt-1 flex justify-between">
+                        <span>Total: ${c.totalTokens.toLocaleString()}</span>
+                        <span class="opacity-70">↑${(c.outputTokens || 0).toLocaleString()}</span>
+                    </div>
+                </div>
+            `).join('');
+        }
 
-        addCopyButtons();
+        async function createNewChat() {
+            const res  = await fetch('/api/chats', { method: 'POST' });
+            const chat = await res.json();
+            selectChat(chat.id);
+            loadSidebar();
+            if (window.innerWidth < 1024) toggleSidebar();
+        }
 
-        scrollToBottom();
-      }
-    }
+        async function deleteCurrentChat() {
+            if (!currentChatId) return;
+            if (!confirm("Permanently delete this chat?")) return;
+            await fetch(`/api/chats/${currentChatId}`, { method: 'DELETE' });
+            currentChatId = null;
+            document.getElementById('chat-window').innerHTML = '';
+            document.getElementById('current-chat-title').innerText = 'Select or create a chat';
+            document.getElementById('edit-title-btn').classList.add('hidden');
+            updateTokenDisplay(0, 0, 0);
+            toggleInputState(false);
+            loadSidebar();
+        }
 
-  } catch (err) {
+        // ─── Select / render chat ─────────────────────────────────────────────────
+        async function selectChat(id) {
+            currentChatId = id;
+            stopPolling();
 
-    console.error(err);
+            const res  = await fetch(`/api/chats/${id}`);
+            const chat = await res.json();
 
-    document.getElementById(
-      'streaming-ai-msg'
-    ).innerHTML = `
-      <span class="text-red-400">
-        Connection lost.
-      </span>
-    `;
-  }
-}
+            document.getElementById('current-chat-title').innerText = chat.title;
+            document.getElementById('edit-title-btn').classList.remove('hidden');
+            updateTokenDisplay(chat.totalTokens, chat.inputTokens, chat.outputTokens);
+            cancelTitleEdit();
+            renderMessages(chat.messages);
+            loadSidebar();
 
-// =================================
-// ENTER SEND
-// =================================
+            if (window.innerWidth < 1024 && !document.getElementById('sidebar').classList.contains('-translate-x-full')) {
+                toggleSidebar();
+            }
 
-document.getElementById(
-  'message-input'
-).addEventListener('keydown', e => {
+            toggleInputState(chat.isGenerating);
+            if (chat.isGenerating) pollGeneratingChat(id);
+        }
 
-  if (
-    e.key === 'Enter' &&
-    !e.shiftKey
-  ) {
+        function renderMessages(messages) {
+            const isAtBottom = chatWindow.scrollHeight - chatWindow.clientHeight <= chatWindow.scrollTop + 20;
+
+            chatWindow.innerHTML = messages.map(m => {
+                let html = '';
+                if (m.reasoning) {
+                    html += `<div class="reasoning-block"><i>Thinking Process</i><br/>${marked.parse(m.reasoning)}</div>`;
+                }
+                if (m.content) {
+                    html += DOMPurify.sanitize(marked.parse(m.content));
+                }
+                return `
+                    <div class="flex ${m.role === 'user' ? 'justify-end' : 'justify-start'} w-full">
+                        <div class="max-w-[95%] lg:max-w-[85%] rounded-2xl p-4 shadow-sm ${m.role === 'user' ? 'bg-blue-600 text-white rounded-br-sm' : 'bg-gray-850 border border-gray-800 text-gray-200 markdown-body rounded-bl-sm'}">
+                            ${m.role === 'user' ? `<div class="whitespace-pre-wrap">${m.content}</div>` : html}
+                        </div>
+                    </div>`;
+            }).join('');
+
+            attachCopyButtons();
+            if (isAtBottom) scrollToBottom();
+        }
 
-    e.preventDefault();
+        // ─── Polling (for resumed/in-progress sessions) ───────────────────────────
+        function stopPolling() {
+            if (pollingInterval !== null) {
+                clearInterval(pollingInterval);
+                pollingInterval = null;  // FIX: always null after clear
+            }
+        }
 
-    sendMessage();
-  }
-});
+        function pollGeneratingChat(id) {
+            stopPolling();
+            pollingInterval = setInterval(async () => {
+                const res  = await fetch(`/api/chats/${id}`);
+                const chat = await res.json();
+
+                renderMessages(chat.messages);
+                updateTokenDisplay(chat.totalTokens, chat.inputTokens, chat.outputTokens);
+
+                const titleEl = document.getElementById('current-chat-title');
+                const titleEditHidden = !document.getElementById('title-display').classList.contains('hidden');
+                if (titleEditHidden && chat.title !== titleEl.innerText) {
+                    titleEl.innerText = chat.title;
+                    loadSidebar();
+                }
+
+                if (!chat.isGenerating) {
+                    stopPolling();  // FIX: use helper so pollingInterval becomes null
+                    if (currentChatId === id) toggleInputState(false);
+                }
+            }, 1500);
+        }
 
-// =================================
-// INIT
-// =================================
+        // ─── Image attach ─────────────────────────────────────────────────────────
+        function handleImageSelect(event) {
+            const container = document.getElementById('image-preview-container');
+            container.classList.remove('hidden');
+            Array.from(event.target.files).forEach(file => {
+                const reader = new FileReader();
+                reader.onload = e => {
+                    attachedImages.push(e.target.result);
+                    container.innerHTML += `
+                        <div class="relative group">
+                            <img src="${e.target.result}" class="h-14 w-14 object-cover rounded-lg border border-gray-600 shadow-sm">
+                        </div>`;
+                };
+                reader.readAsDataURL(file);
+            });
+        }
 
-loadSidebar();
+        // ─── Send message & stream ────────────────────────────────────────────────
+        async function sendMessage() {
+            const input = document.getElementById('message-input');
+            const text  = input.value.trim();
+            if (!text || !currentChatId) return;
+
+            const payload = {
+                model:  document.getElementById('model-select').value,
+                prompt: text,
+                images: attachedImages
+            };
+
+            // Optimistic user bubble + spinner
+            const container = document.getElementById('chat-window');
+            container.innerHTML += `
+                <div class="flex justify-end w-full">
+                    <div class="max-w-[95%] lg:max-w-[85%] rounded-2xl rounded-br-sm p-4 bg-blue-600 text-white shadow-sm whitespace-pre-wrap">${text}</div>
+                </div>
+                <div class="flex justify-start w-full" id="temp-ai-wrapper">
+                    <div class="max-w-[95%] lg:max-w-[85%] rounded-2xl rounded-bl-sm p-4 bg-gray-850 border border-gray-800 text-gray-200 markdown-body shadow-sm" id="temp-ai-msg">
+                        <span class="flex items-center gap-2 text-gray-400">
+                            <svg class="animate-spin h-4 w-4" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
+                            Thinking...
+                        </span>
+                    </div>
+                </div>`;
+            scrollToBottom();
+
+            // Reset input
+            input.value = '';
+            input.style.height = 'auto';
+            attachedImages = [];
+            document.getElementById('image-preview-container').innerHTML = '';
+            document.getElementById('image-preview-container').classList.add('hidden');
+
+            toggleInputState(true);
+
+            try {
+                const response = await fetch(`/api/chats/${currentChatId}/stream`, {
+                    method:  'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body:    JSON.stringify(payload)
+                });
+
+                if (!response.ok) throw new Error("API stream rejected. Chat might be busy.");
+
+                const reader  = response.body.getReader();
+                const decoder = new TextDecoder('utf-8');
+
+                let aiContent  = '';
+                let aiReasoning = '';
+
+                // ── FIX: persistent buffer so markers are never split across chunks ──
+                let buffer = '';
+                const MARKER_LEN = 9; // '__THINK__' and '__USAGE__' are both 9 chars
+
+                function flushBuffer(final = false) {
+                    // Keep processing until we can't make progress
+                    let progress = true;
+                    while (progress) {
+                        progress = false;
+
+                        const thinkIdx = buffer.indexOf('__THINK__');
+                        const usageIdx = buffer.indexOf('__USAGE__');
+
+                        if (usageIdx !== -1) {
+                            // Everything before __USAGE__ is plain content
+                            if (usageIdx > 0) aiContent += buffer.slice(0, usageIdx);
+                            const jsonStr = buffer.slice(usageIdx + MARKER_LEN);
+                            try {
+                                const usageData = JSON.parse(jsonStr);
+                                updateTokenDisplay(
+                                    currentTokens.total + usageData.totalTokens,
+                                    currentTokens.in    + usageData.inputTokens,
+                                    currentTokens.out   + usageData.outputTokens
+                                );
+                                buffer = '';
+                                progress = true;
+                            } catch (_) {
+                                // Incomplete JSON — keep buffer from __USAGE__ onwards and wait
+                                buffer = buffer.slice(usageIdx);
+                            }
+
+                        } else if (thinkIdx !== -1) {
+                            // Flush content before the marker
+                            if (thinkIdx > 0) {
+                                aiContent += buffer.slice(0, thinkIdx);
+                                buffer = buffer.slice(thinkIdx);
+                            }
+                            // buffer now starts with __THINK__; find where reasoning ends
+                            const afterMarker = buffer.slice(MARKER_LEN);
+                            const nextThink   = afterMarker.indexOf('__THINK__');
+                            const nextUsage   = afterMarker.indexOf('__USAGE__');
+                            const candidates  = [nextThink, nextUsage].filter(x => x !== -1);
+                            const nextMarker  = candidates.length ? Math.min(...candidates) : -1;
+
+                            if (nextMarker !== -1) {
+                                // We have a full reasoning segment
+                                aiReasoning += afterMarker.slice(0, nextMarker);
+                                buffer = afterMarker.slice(nextMarker);
+                                progress = true;
+                            } else {
+                                // Reasoning continues — consume safely up to last MARKER_LEN chars
+                                const safeLen = afterMarker.length - MARKER_LEN;
+                                if (safeLen > 0) {
+                                    aiReasoning += afterMarker.slice(0, safeLen);
+                                    buffer = '__THINK__' + afterMarker.slice(safeLen);
+                                }
+                                // else not enough data yet — wait for next chunk
+                            }
+
+                        } else {
+                            // No markers visible — safely flush all but the last MARKER_LEN chars
+                            // (a marker could be arriving split across the boundary)
+                            if (final) {
+                                aiContent += buffer;
+                                buffer = '';
+                                progress = true;
+                            } else {
+                                const safeLen = buffer.length - MARKER_LEN;
+                                if (safeLen > 0) {
+                                    aiContent += buffer.slice(0, safeLen);
+                                    buffer = buffer.slice(safeLen);
+                                    progress = true;
+                                }
+                                // else buffer too small to safely consume — wait
+                            }
+                        }
+                    }
+                }
+
+                while (true) {
+                    const { value, done } = await reader.read();
+
+                    if (done) {
+                        flushBuffer(true); // flush remainder on stream close
+                        break;
+                    }
+
+                    buffer += decoder.decode(value, { stream: true });
+                    flushBuffer(false);
+
+                    // Live render
+                    let tempHtml = '';
+                    if (aiReasoning) tempHtml += `<div class="reasoning-block"><i>Thinking Process</i><br/>${marked.parse(aiReasoning)}</div>`;
+                    if (aiContent)   tempHtml += DOMPurify.sanitize(marked.parse(aiContent));
+
+                    const tempMsg = document.getElementById('temp-ai-msg');
+                    if (tempMsg) {
+                        tempMsg.innerHTML = tempHtml || "<span class='animate-pulse text-gray-400'>Thinking...</span>";
+                    }
+
+                    if (container.scrollHeight - container.scrollTop - container.clientHeight < 100) {
+                        scrollToBottom();
+                    }
+                }
+
+                // ── FIX: replace temp bubble in-place — no selectChat(), no DOM wipe ──
+                const tempWrapper = document.getElementById('temp-ai-wrapper');
+                if (tempWrapper) {
+                    let finalHtml = '';
+                    if (aiReasoning) finalHtml += `<div class="reasoning-block"><i>Thinking Process</i><br/>${marked.parse(aiReasoning)}</div>`;
+                    if (aiContent)   finalHtml += DOMPurify.sanitize(marked.parse(aiContent));
+
+                    tempWrapper.outerHTML = `
+                        <div class="flex justify-start w-full">
+                            <div class="max-w-[95%] lg:max-w-[85%] rounded-2xl rounded-bl-sm p-4 bg-gray-850 border border-gray-800 text-gray-200 markdown-body shadow-sm">
+                                ${finalHtml || "<span class='text-gray-500'>No response generated.</span>"}
+                            </div>
+                        </div>`;
+                    attachCopyButtons();
+                }
+
+                // Refresh sidebar token counts only — no full re-render
+                loadSidebar();
+
+            } catch (error) {
+                console.error(error);
+                const tempMsg = document.getElementById('temp-ai-msg');
+                if (tempMsg) {
+                    tempMsg.innerHTML = "<span class='text-red-400'>Connection lost or chat busy. Reload to sync.</span>";
+                }
+            } finally {
+                // FIX: pollingInterval is null when not polling, so this check is reliable
+                if (pollingInterval === null) toggleInputState(false);
+            }
+        }
 
-</script>
+        // ─── Keyboard shortcut ────────────────────────────────────────────────────
+        document.getElementById('message-input').addEventListener('keydown', e => {
+            if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                if (!document.getElementById('send-btn').classList.contains('hidden')) {
+                    sendMessage();
+                }
+            }
+        });
+
+        // ─── Boot ─────────────���───────────────────────────────────────────────────
+        loadSidebar();
+    </script>
 </body>
-</html>
+</html>