Upload app.py

app.py

@@ -181,13 +181,13 @@ class SimpleBrowser:
         # Prioritize link_map as it stores search result metadata
         if cursor in self.link_map:
             return self.link_map[cursor]
-            
+
         # Fallback to page_stack for opened pages
         if 0 <= cursor < len(self.page_stack):
             url = self.page_stack[cursor]
             page = self.pages.get(url)
             if page:
-                return {'url': url, 'title': page.get('title', '')}
+                return {'url': url, 'title': page.get('title', ''), 'snippet': ''}
         return None
 
     def _format_line_numbers(self, text: str, offset: int = 0) -> str:
@@ -213,8 +213,9 @@ class SimpleBrowser:
             except:
                 domain = ''
 
-            self.link_map[i] = {'url': url, 'title': title}
-            link_map[i] = {'url': url, 'title': title}
+            # Store snippet information as well
+            self.link_map[i] = {'url': url, 'title': title, 'snippet': snippet}
+            link_map[i] = {'url': url, 'title': title, 'snippet': snippet}
             link_text = f"【{i}†{title}†{domain}】" if domain else f"【{i}†{title}】"
             lines.append(f"{link_text}")
             lines.append(f"  {snippet}")
@@ -485,7 +486,7 @@ def is_final_answer(text: str) -> bool:
 # HTML Rendering Helpers (From app_local.py)
 # ============================================================
 def render_citations(text: str, browser: SimpleBrowser) -> str:
-    """Convert citation markers to clickable HTML links."""
+    """Convert citation markers to clickable HTML links with tooltips."""
     def replace_citation(m):
         cursor_str = m.group(1)
         # l1 = m.group(2)
@@ -494,15 +495,30 @@ def render_citations(text: str, browser: SimpleBrowser) -> str:
         try:
             cursor = int(cursor_str)
             index = browser.get_citation_index(cursor)
-            
+
             # Check if we have URL info
             info = browser.get_page_info(cursor)
             if info and info.get('url'):
-                 # Return clickable index link pointing to reference section
-                 # Aligned with generate_html_example.py style (green via CSS class)
-                url = info.get('url')
-                return f'<a href="{html.escape(url)}" target="_blank" class="citation-link">[{index}]</a>'
-            
+                url = info.get('url', '')
+                title = info.get('title', 'No Title')
+                snippet = info.get('snippet', '')
+
+                # Unescape HTML entities for display (they were escaped in _clean_links)
+                title_display = title
+                snippet_display = snippet if snippet else 'No description available'
+
+                # Truncate URL for display
+                url_display = url if len(url) <= 60 else url[:57] + '...'
+
+                # Create citation with tooltip
+                tooltip_html = f'''<span class="citation-tooltip">
+  <div class="citation-tooltip-title">{title_display}</div>
+  <div class="citation-tooltip-snippet">{snippet_display}</div>
+  <div class="citation-tooltip-url">{html.escape(url_display)}</div>
+</span>'''
+
+                return f'<span class="citation-wrapper"><a href="{html.escape(url)}" target="_blank" class="citation-link">[{index}]</a>{tooltip_html}</span>'
+
             # Fallback if no URL
             return f'<span class="citation-link">[{index}]</span>'
         except Exception as e:
@@ -512,12 +528,13 @@ def render_citations(text: str, browser: SimpleBrowser) -> str:
 
     # First pass: replace citations with linked citations
     result = re.sub(r'[【\[](\d+)†.*?[】\]]', replace_citation, text)
-    
+
     # Second pass: Deduplicate adjacent identical citations
-    # Matches: <a ...>[N]</a> followed by optional whitespace and same link
-    # We repeat this until no more changes to handle multiple duplicates
+    # Matches: <span class="citation-wrapper">...</span> followed by optional whitespace and same wrapper
+    # We need to be more careful here with the new structure
     while True:
-        new_result = re.sub(r'(<a [^>]+>\[\d+\]</a>)(\s*)\1', r'\1', result)
+        # Match citation wrapper and deduplicate
+        new_result = re.sub(r'(<span class="citation-wrapper">.*?</span>)(\s*)\1', r'\1', result)
         if new_result == result:
             break
         result = new_result
@@ -1479,7 +1496,95 @@ def create_interface():
     .answer-section a:hover {
         text-decoration: underline;
     }
-    
+
+    /* Citation Tooltip - 小便签弹窗 */
+    .citation-wrapper {
+        position: relative;
+        display: inline-block;
+    }
+
+    .citation-link {
+        color: #10a37f;
+        text-decoration: none;
+        font-weight: 600;
+        padding: 2px 4px;
+        border-radius: 4px;
+        background: #e6f7f1;
+        transition: all 0.2s ease;
+        cursor: pointer;
+        border: 1px solid #10a37f30;
+    }
+
+    .citation-link:hover {
+        background: #10a37f;
+        color: white;
+        text-decoration: none;
+    }
+
+    .citation-tooltip {
+        visibility: hidden;
+        opacity: 0;
+        position: absolute;
+        bottom: 125%;
+        left: 50%;
+        transform: translateX(-50%);
+        z-index: 1000;
+        width: 280px;
+        background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
+        border: 2px solid #10a37f;
+        border-radius: 12px;
+        padding: 12px 14px;
+        box-shadow: 0 8px 24px rgba(16, 163, 127, 0.25), 0 4px 8px rgba(0, 0, 0, 0.1);
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        pointer-events: none;
+    }
+
+    .citation-tooltip::after {
+        content: "";
+        position: absolute;
+        top: 100%;
+        left: 50%;
+        transform: translateX(-50%);
+        border: 8px solid transparent;
+        border-top-color: #10a37f;
+    }
+
+    .citation-wrapper:hover .citation-tooltip {
+        visibility: visible;
+        opacity: 1;
+        bottom: 130%;
+    }
+
+    .citation-tooltip-title {
+        font-weight: 600;
+        color: #1e293b;
+        font-size: 0.9rem;
+        margin-bottom: 8px;
+        line-height: 1.4;
+        border-bottom: 1px solid #e5e7eb;
+        padding-bottom: 6px;
+    }
+
+    .citation-tooltip-snippet {
+        color: #475569;
+        font-size: 0.8rem;
+        line-height: 1.5;
+        margin-bottom: 8px;
+        max-height: 80px;
+        overflow-y: auto;
+    }
+
+    .citation-tooltip-url {
+        color: #10a37f;
+        font-size: 0.75rem;
+        font-family: 'SF Mono', Monaco, monospace;
+        word-break: break-all;
+        background: #f0fdf4;
+        padding: 4px 6px;
+        border-radius: 4px;
+        border: 1px solid #10a37f20;
+    }
+
     /* User Message Bubble - 淡蓝色背景，右对齐 */
     .user-message-bubble {
         background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
@@ -2066,6 +2171,39 @@ def create_interface():
             color: #f0f9ff !important;
         }
 
+        /* Citation Tooltip 深色模式 */
+        .citation-link {
+            background: #064e3b !important;
+            border-color: #10a37f80 !important;
+            color: #6ee7b7 !important;
+        }
+
+        .citation-link:hover {
+            background: #10a37f !important;
+            color: #ffffff !important;
+        }
+
+        .citation-tooltip {
+            background: linear-gradient(135deg, #1f2937 0%, #111827 100%) !important;
+            border-color: #10a37f !important;
+            box-shadow: 0 8px 24px rgba(16, 163, 127, 0.4), 0 4px 8px rgba(0, 0, 0, 0.3) !important;
+        }
+
+        .citation-tooltip-title {
+            color: #e5e7eb !important;
+            border-bottom-color: #374151 !important;
+        }
+
+        .citation-tooltip-snippet {
+            color: #d1d5db !important;
+        }
+
+        .citation-tooltip-url {
+            color: #6ee7b7 !important;
+            background: #064e3b !important;
+            border-color: #10a37f40 !important;
+        }
+
         /* 用户问题气泡深色模式 */
         .user-message-bubble {
             background: linear-gradient(135deg, #1e3a5f 0%, #1e40af 100%) !important;
@@ -2198,6 +2336,39 @@ def create_interface():
         color: #e0f2fe !important;
     }
 
+    /* Citation Tooltip Gradio dark 模式 */
+    .dark .citation-link {
+        background: #064e3b !important;
+        border-color: #10a37f80 !important;
+        color: #6ee7b7 !important;
+    }
+
+    .dark .citation-link:hover {
+        background: #10a37f !important;
+        color: #ffffff !important;
+    }
+
+    .dark .citation-tooltip {
+        background: linear-gradient(135deg, #1f2937 0%, #111827 100%) !important;
+        border-color: #10a37f !important;
+        box-shadow: 0 8px 24px rgba(16, 163, 127, 0.4), 0 4px 8px rgba(0, 0, 0, 0.3) !important;
+    }
+
+    .dark .citation-tooltip-title {
+        color: #e5e7eb !important;
+        border-bottom-color: #374151 !important;
+    }
+
+    .dark .citation-tooltip-snippet {
+        color: #d1d5db !important;
+    }
+
+    .dark .citation-tooltip-url {
+        color: #6ee7b7 !important;
+        background: #064e3b !important;
+        border-color: #10a37f40 !important;
+    }
+
     .dark .search-result-card {
         background: #1f2937 !important;
         border-color: #374151 !important;