Update public/index.html

public/index.html

@@ -31,6 +31,19 @@
         .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; }
 
+        .expand-btn { position: absolute; top: 0.5rem; right: 4.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; }
+        .expand-btn:hover { background: #6b7280; }
+
+        .markdown-body pre.snippet-collapsed { max-height: 8rem; overflow: hidden !important; }
+        .markdown-body pre.snippet-collapsed::after {
+            content: "";
+            position: absolute;
+            bottom: 0; left: 0; right: 0;
+            height: 3rem;
+            background: linear-gradient(transparent, #1e1e1e);
+            pointer-events: none;
+        }
+
         .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>
@@ -133,8 +146,8 @@
 
         // ─── State ────────────────────────────────────────────────────────────────
         let currentChatId   = null;
-        let attachedImages  = [];
-        let pollingInterval = null;   // FIX: always explicitly null when cleared
+        let attachedImages  =[];
+        let pollingInterval = null;
         let currentTokens   = { total: 0, in: 0, out: 0 };
 
         // ─── UI Helpers ───────────────────────────────────────────────────────────
@@ -172,20 +185,53 @@
             document.getElementById('token-out').innerText  = (output || 0).toLocaleString();
         }
 
-        // ─── Copy buttons ─────────────────────────────────────────────────────────
+        // ─── Copy buttons & snippet collapse ──────────────────────────────────────
         function attachCopyButtons(scope) {
             (scope || document).querySelectorAll('.markdown-body pre').forEach(pre => {
                 if (pre.querySelector('.copy-btn')) return;
+
+                const expandBtn = document.createElement('button');
+                expandBtn.className = 'expand-btn';
+                expandBtn.innerText = 'Expand';
+                expandBtn.style.display = 'none';
+
                 const btn = document.createElement('button');
                 btn.className  = 'copy-btn';
                 btn.innerText  = 'Copy';
                 btn.onclick    = () => {
-                    const text = pre.querySelector('code')?.innerText || pre.innerText.replace('Copy', '');
+                    const codeBlock = pre.querySelector('code');
+                    let text = '';
+                    // textContent is used to ensure visibility (like overflow: hidden) doesn't break copied output
+                    if (codeBlock) {
+                        text = codeBlock.textContent;
+                    } else {
+                        const clone = pre.cloneNode(true);
+                        clone.querySelectorAll('.copy-btn, .expand-btn').forEach(b => b.remove());
+                        text = clone.textContent;
+                    }
                     navigator.clipboard.writeText(text.trim());
                     btn.innerText = 'Copied!';
                     setTimeout(() => btn.innerText = 'Copy', 2000);
                 };
+                
+                pre.appendChild(expandBtn);
                 pre.appendChild(btn);
+
+                // Dynamically apply collapsed state only to snippets that are tall enough
+                if (pre.scrollHeight > 160) {
+                    pre.classList.add('snippet-collapsed');
+                    expandBtn.style.display = 'block';
+                    
+                    expandBtn.onclick = () => {
+                        if (pre.classList.contains('snippet-collapsed')) {
+                            pre.classList.remove('snippet-collapsed');
+                            expandBtn.innerText = 'Collapse';
+                        } else {
+                            pre.classList.add('snippet-collapsed');
+                            expandBtn.innerText = 'Expand';
+                        }
+                    };
+                }
             });
         }
 
@@ -324,7 +370,7 @@
         function stopPolling() {
             if (pollingInterval !== null) {
                 clearInterval(pollingInterval);
-                pollingInterval = null;  // FIX: always null after clear
+                pollingInterval = null; 
             }
         }
 
@@ -345,7 +391,7 @@
                 }
 
                 if (!chat.isGenerating) {
-                    stopPolling();  // FIX: use helper so pollingInterval becomes null
+                    stopPolling();  
                     if (currentChatId === id) toggleInputState(false);
                 }
             }, 1500);
@@ -399,7 +445,7 @@
             // Reset input
             input.value = '';
             input.style.height = 'auto';
-            attachedImages = [];
+            attachedImages =[];
             document.getElementById('image-preview-container').innerHTML = '';
             document.getElementById('image-preview-container').classList.add('hidden');
 
@@ -420,12 +466,10 @@
                 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
+                const MARKER_LEN = 9; 
 
                 function flushBuffer(final = false) {
-                    // Keep processing until we can't make progress
                     let progress = true;
                     while (progress) {
                         progress = false;
@@ -434,7 +478,6 @@
                         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 {
@@ -447,17 +490,14 @@
                                 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__');
@@ -465,23 +505,18 @@
                             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 = '';
@@ -493,7 +528,6 @@
                                     buffer = buffer.slice(safeLen);
                                     progress = true;
                                 }
-                                // else buffer too small to safely consume — wait
                             }
                         }
                     }
@@ -503,7 +537,7 @@
                     const { value, done } = await reader.read();
 
                     if (done) {
-                        flushBuffer(true); // flush remainder on stream close
+                        flushBuffer(true);
                         break;
                     }
 
@@ -525,7 +559,6 @@
                     }
                 }
 
-                // ── FIX: replace temp bubble in-place — no selectChat(), no DOM wipe ──
                 const tempWrapper = document.getElementById('temp-ai-wrapper');
                 if (tempWrapper) {
                     let finalHtml = '';
@@ -541,7 +574,6 @@
                     attachCopyButtons();
                 }
 
-                // Refresh sidebar token counts only — no full re-render
                 loadSidebar();
 
             } catch (error) {
@@ -551,7 +583,6 @@
                     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);
             }
         }
@@ -570,4 +601,4 @@
         loadSidebar();
     </script>
 </body>
-</html>
+</html>