Spaces:

ntdservices
/

retriever

Running

App Files Files Community

ntdservices commited on 23 days ago

Commit

366abe4

verified ·

1 Parent(s): e3f391f

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +60 -9

templates/index.html CHANGED Viewed

@@ -1,3 +1,4 @@
 <!doctype html>
 <html lang="en">
 <head>
@@ -63,7 +64,7 @@
     ol{ padding-left: 22px; }
     ol li{ margin: 12px 0; }
     a{ color: var(--accent2); }
-    .muted{ color:var(--muted); font-size:13px; }
     /* Sidebar: full merged text */
     .sidebar-backdrop{ position: fixed; inset: 0; background: rgba(0,0,0,.35); opacity:0; pointer-events:none; transition:.18s ease; z-index:60; }
@@ -74,8 +75,22 @@
     .sbar-hdr h3{ margin:0; font-size:16px; }
     .sbar-body{ overflow:auto; padding:16px; }
     .smallbtn{ font-size:12px; padding:6px 8px; border-radius:10px; background:#1a213f; color:#dbe2ff; border:1px solid #ffffff18; cursor:pointer; }
     pre#fullText{ margin:0; white-space:pre-wrap; word-wrap:break-word; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; line-height:1.5; }
     mark#centerMark{ background:#61e7ff55; padding:0 .5px; border-radius:3px; }
   </style>
 </head>
 <body>
@@ -170,10 +185,29 @@
             {% for r in results %}
               <li>
                 <p>{{ r.text }}</p>
-                <button type="button" class="smallbtn" onclick="openContext({{ r.idx }})">🔎 View context</button>
               </li>
             {% endfor %}
           </ol>
         {% endif %}
       </div>
     </section>
@@ -279,8 +313,9 @@
     btnClose.addEventListener('click', closeSidebar);
     backdrop.addEventListener('click', closeSidebar);
-    jumpTop.addEventListener('click', () => { sidebarBody.scrollTo({ top: 0, behavior: 'smooth' }); });
-    jumpBottom.addEventListener('click', () => { sidebarBody.scrollTo({ top: sidebarBody.scrollHeight, behavior: 'smooth' }); });
     function escapeHtml(s){
       return s.replaceAll('&','&amp;')
@@ -305,14 +340,11 @@
       const after  = escapeHtml(merged.slice(end));
       pre.innerHTML = before + '<mark id="centerMark">' + middle + '</mark>' + after;
-      // Smoothly center the highlight in view
       requestAnimationFrame(() => {
         const mark = document.getElementById('centerMark');
         if(mark){
-          const rect = mark.getBoundingClientRect();
-          const bodyRect = sidebarBody.getBoundingClientRect();
-          const offset = (rect.top + rect.height/2) - (bodyRect.top + bodyRect.height/2);
-          sidebarBody.scrollBy({ top: offset, behavior: 'smooth' });
         }
       });
     }
@@ -326,6 +358,25 @@
         alert('Error: ' + err.message);
       }
     }
   </script>
 </body>
 </html>

+<!-- templates/index.html -->
 <!doctype html>
 <html lang="en">
 <head>
     ol{ padding-left: 22px; }
     ol li{ margin: 12px 0; }
     a{ color: var(--accent2); }
+    .muted{ color:#b7c0ffcc; font-size:13px; }
     /* Sidebar: full merged text */
     .sidebar-backdrop{ position: fixed; inset: 0; background: rgba(0,0,0,.35); opacity:0; pointer-events:none; transition:.18s ease; z-index:60; }
     .sbar-hdr h3{ margin:0; font-size:16px; }
     .sbar-body{ overflow:auto; padding:16px; }
     .smallbtn{ font-size:12px; padding:6px 8px; border-radius:10px; background:#1a213f; color:#dbe2ff; border:1px solid #ffffff18; cursor:pointer; }
     pre#fullText{ margin:0; white-space:pre-wrap; word-wrap:break-word; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; line-height:1.5; }
     mark#centerMark{ background:#61e7ff55; padding:0 .5px; border-radius:3px; }
+    /* New: results toolbuttons + file label */
+    .tools{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:6px; }
+    .iconbtn{
+      display:inline-flex; align-items:center; justify-content:center;
+      width:28px; height:28px; border-radius:8px; border:1px solid #ffffff18;
+      background:#1a213f; color:#e6ecff; cursor:pointer; font-size:14px;
+    }
+    .filetag{
+      display:inline-flex; align-items:center; gap:6px;
+      padding:4px 8px; border-radius:999px; border:1px solid #ffffff18;
+      background:#0d1333; color:#cfe1ff; font-size:12px;
+    }
   </style>
 </head>
 <body>
             {% for r in results %}
               <li>
                 <p>{{ r.text }}</p>
+                <div class="tools">
+                  <button type="button" class="smallbtn" onclick="openContext({{ r.idx }})" title="Open full context sidebar">🔎 View context</button>
+                  <!-- Clipboard icon: copies the 2nd line of the source file -->
+                  <button type="button" class="iconbtn" onclick="copySecond({{ r.idx }}, this)" title="Copy 2nd line of this file">📋</button>
+                  <!-- File name label -->
+                  <span class="filetag">📄 {{ r.file }}</span>
+                </div>
               </li>
             {% endfor %}
           </ol>
+          <!-- Provide per-paragraph metadata for JS (2nd line + filename) -->
+          <script>
+            window.PARA_META = {};
+            {% for r in results %}
+            PARA_META[{{ r.idx }}] = {
+              second: {{ r.second_line | tojson }},
+              file: {{ r.file | tojson }}
+            };
+            {% endfor %}
+          </script>
         {% endif %}
       </div>
     </section>
     btnClose.addEventListener('click', closeSidebar);
     backdrop.addEventListener('click', closeSidebar);
+    // Instant jumps for top/bottom
+    jumpTop.addEventListener('click', () => { sidebarBody.scrollTop = 0; });
+    jumpBottom.addEventListener('click', () => { sidebarBody.scrollTop = sidebarBody.scrollHeight; });
     function escapeHtml(s){
       return s.replaceAll('&','&amp;')
       const after  = escapeHtml(merged.slice(end));
       pre.innerHTML = before + '<mark id="centerMark">' + middle + '</mark>' + after;
+      // Instantly jump to the highlight
       requestAnimationFrame(() => {
         const mark = document.getElementById('centerMark');
         if(mark){
+          mark.scrollIntoView({ block: 'center', inline: 'nearest' });
         }
       });
     }
         alert('Error: ' + err.message);
       }
     }
+    // Clipboard: copy the 2nd line of the source file for this paragraph
+    window.copySecond = function(idx, btn){
+      try{
+        const meta = window.PARA_META?.[idx];
+        if(!meta){ throw new Error("Missing metadata"); }
+        const text = meta.second || "";
+        navigator.clipboard.writeText(text).then(() => {
+          // simple visual feedback
+          const old = btn.textContent;
+          btn.textContent = '✅';
+          setTimeout(()=>{ btn.textContent = '📋'; }, 900);
+        }, () => {
+          alert("Clipboard copy failed");
+        });
+      }catch(e){
+        alert("Clipboard error: " + e.message);
+      }
+    }
   </script>
 </body>
 </html>