Update public/index.html

public/index.html

@@ -501,4 +501,119 @@
                                 );
                                 buffer = '';
                                 progress = true;
-                            } catch (_) {
+                            } catch (_) {
+                                buffer = buffer.slice(usageIdx);
+                            }
+
+                        } else if (thinkIdx !== -1) {
+                            if (thinkIdx > 0) {
+                                aiContent += buffer.slice(0, thinkIdx);
+                                buffer = buffer.slice(thinkIdx);
+                            }
+                            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) {
+                                aiReasoning += afterMarker.slice(0, nextMarker);
+                                buffer = afterMarker.slice(nextMarker);
+                                progress = true;
+                            } else {
+                                const safeLen = afterMarker.length - MARKER_LEN;
+                                if (safeLen > 0) {
+                                    aiReasoning += afterMarker.slice(0, safeLen);
+                                    buffer = '__THINK__' + afterMarker.slice(safeLen);
+                                }
+                            }
+
+                        } else {
+                            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;
+                                }
+                            }
+                        }
+                    }
+                }
+
+                while (true) {
+                    const { value, done } = await reader.read();
+
+                    if (done) {
+                        flushBuffer(true);
+                        break;
+                    }
+
+                    buffer += decoder.decode(value, { stream: true });
+                    flushBuffer(false);
+
+                    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();
+                    }
+                }
+
+                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();
+                }
+
+                // Final sync with API state (strictly last 3)
+                const finalRes = await fetch(`/api/chats/${currentChatId}`);
+                const finalChat = await finalRes.json();
+                renderMessages(finalChat.messages);
+                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 {
+                if (pollingInterval === null) toggleInputState(false);
+            }
+        }
+
+        // ─── 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>