Update public/index.html

public/index.html

@@ -125,10 +125,14 @@
     </main>
 
     <script>
+        // NEW FEATURE: Toggle high-cost rendering during stream to prevent memory crashes
+        let enableHighlighting = true;
+        
         marked.setOptions({
             highlight: function(code, lang) {
+                if (!enableHighlighting) return code; // Skip highlighting while streaming!
                 const language = hljs.getLanguage(lang) ? lang : 'plaintext';
-                return hljs.highlight(code, { language }).value;
+                try { return hljs.highlight(code, { language }).value; } catch(e) { return code; }
             }
         });
 
@@ -293,7 +297,7 @@
 
         function renderMessages(messages) {
             const container = document.getElementById('chat-window');
-            const isScrolledToBottom = container.scrollHeight - container.clientHeight <= container.scrollTop + 20;
+            const isScrolledToBottom = container.scrollHeight - container.clientHeight <= container.scrollTop + 50;
 
             container.innerHTML = messages.map(m => {
                 let html = '';
@@ -328,7 +332,8 @@
                 }
             });
 
-            if (isScrolledToBottom) scrollToBottom();
+            // Prevent unwanted jump to bottom if chat is empty or user scrolled up
+            if (isScrolledToBottom && messages.length > 0) scrollToBottom();
         }
 
         function pollGeneratingChat(id) {
@@ -419,6 +424,9 @@
                 const decoder = new TextDecoder("utf-8");
                 let aiContent = "";
                 let aiReasoning = "";
+                
+                enableHighlighting = false; // SPEED UP: Disable expensive highlighting during stream
+                let lastRenderTime = Date.now();
 
                 while (true) {
                     const { value, done } = await reader.read();
@@ -450,17 +458,50 @@
                         }
                     }
 
-                    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));
-                    
-                    document.getElementById('temp-ai-msg').innerHTML = tempHtml || "<span class='animate-pulse text-gray-400'>Thinking...</span>";
-                    
-                    const distanceToBottom = container.scrollHeight - container.scrollTop - container.clientHeight;
-                    if (distanceToBottom < 100) scrollToBottom();
+                    // THROTTLE RENDER: Only update DOM max 5 times a second to prevent memory crashes
+                    if (Date.now() - lastRenderTime > 200) {
+                        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));
+                        
+                        document.getElementById('temp-ai-msg').innerHTML = tempHtml || "<span class='animate-pulse text-gray-400'>Thinking...</span>";
+                        
+                        const distanceToBottom = container.scrollHeight - container.scrollTop - container.clientHeight;
+                        if (distanceToBottom < 100) scrollToBottom();
+                        
+                        lastRenderTime = Date.now();
+                    }
                 }
 
-                selectChat(currentChatId);
+                // FINAL RENDER: Stream is complete, turn highlighting back on and do a final pristine render
+                enableHighlighting = true;
+                
+                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));
+                
+                const finalMsgElement = document.getElementById('temp-ai-msg');
+                finalMsgElement.innerHTML = finalHtml || "Done.";
+                finalMsgElement.removeAttribute('id'); // Remove ID so we don't accidentally overwrite it
+                
+                // Attach copy buttons explicitly since we aren't calling renderMessages()
+                finalMsgElement.querySelectorAll('pre').forEach(pre => {
+                    if (!pre.querySelector('.copy-btn')) {
+                        const btn = document.createElement('button');
+                        btn.className = 'copy-btn';
+                        btn.innerText = 'Copy';
+                        btn.onclick = () => {
+                            const codeText = pre.querySelector('code')?.innerText || pre.innerText.replace('Copy', '');
+                            navigator.clipboard.writeText(codeText.trim());
+                            btn.innerText = 'Copied!';
+                            setTimeout(() => btn.innerText = 'Copy', 2000);
+                        };
+                        pre.appendChild(btn);
+                    }
+                });
+
+                scrollToBottom();
+                loadSidebar(); // Sync sidebar updates but PREVENT wiping the main chat DOM 
 
             } catch (error) {
                 console.error(error);