Upload folder using huggingface_hub

index.html

@@ -305,7 +305,8 @@ a:hover { text-decoration: underline; text-shadow: var(--glow-cyan); }
 .msg-prefix { font-weight: 600; margin-right: 4px; }
 .msg-user .msg-prefix { color: var(--green); text-shadow: var(--glow-green); }
 .msg-user .msg-content { color: var(--green); text-shadow: var(--glow-green); }
-.msg-assistant .msg-prefix { color: var(--cyan); text-shadow: var(--glow-cyan); }
+.msg-assistant .msg-prefix { color: var(--cyan); text-shadow: var(--glow-cyan); float: left; }
+.msg-assistant .msg-body { overflow: hidden; }
 .msg-assistant .msg-content { color: var(--gray-light); }
 .msg-system .msg-prefix { color: var(--amber); text-shadow: var(--glow-amber); }
 .msg-system .msg-content { color: var(--amber); opacity: 0.85; }
@@ -379,6 +380,112 @@ a:hover { text-decoration: underline; text-shadow: var(--glow-cyan); }
 /* Hide thinking blocks entirely when toggle is off */
 body.hide-thinking .think-block { display: none; }
 
+/* ─── Search Source Badge (Grok-style) ────────────────────── */
+.search-source-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  margin: 4px 0 2px;
+  padding: 4px 10px;
+  border-radius: 20px;
+  background: rgba(168, 85, 247, 0.08);
+  border: 1px solid rgba(168, 85, 247, 0.2);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-size: 11px;
+  color: var(--purple);
+  user-select: none;
+  white-space: nowrap;
+}
+.search-source-badge:hover {
+  background: rgba(168, 85, 247, 0.15);
+  border-color: rgba(168, 85, 247, 0.4);
+  box-shadow: 0 0 8px rgba(168, 85, 247, 0.15);
+}
+.search-source-badge .badge-icon {
+  font-size: 13px;
+  line-height: 1;
+}
+.search-source-badge .badge-count {
+  font-weight: 600;
+}
+.search-source-badge .badge-arrow {
+  font-size: 9px;
+  transition: transform 0.2s ease;
+  opacity: 0.6;
+}
+.search-source-badge.open .badge-arrow {
+  transform: rotate(180deg);
+}
+
+.search-source-panel {
+  margin: 0 0 6px;
+  border-radius: 8px;
+  border: 1px solid rgba(168, 85, 247, 0.15);
+  background: rgba(168, 85, 247, 0.03);
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.3s ease;
+  opacity: 0;
+}
+.search-source-panel.open {
+  max-height: 600px;
+  overflow-y: auto;
+  opacity: 1;
+  padding: 8px 10px;
+}
+.search-source-panel::-webkit-scrollbar { width: 4px; }
+.search-source-panel::-webkit-scrollbar-track { background: transparent; }
+.search-source-panel::-webkit-scrollbar-thumb { background: var(--gray-dim); border-radius: 2px; }
+
+.source-item {
+  display: flex;
+  gap: 8px;
+  padding: 6px 4px;
+  border-bottom: 1px solid rgba(168, 85, 247, 0.07);
+  align-items: flex-start;
+}
+.source-item:last-child { border-bottom: none; }
+.source-favicon {
+  width: 16px; height: 16px;
+  border-radius: 3px;
+  flex-shrink: 0;
+  margin-top: 2px;
+  background: var(--bg-code);
+  border: 1px solid var(--border);
+  object-fit: contain;
+}
+.source-favicon-placeholder {
+  width: 16px; height: 16px;
+  border-radius: 3px;
+  flex-shrink: 0;
+  margin-top: 2px;
+  background: var(--bg-code);
+  border: 1px solid var(--border);
+  display: flex; align-items: center; justify-content: center;
+  font-size: 8px; color: var(--gray-dim);
+}
+.source-info { flex: 1; min-width: 0; }
+.source-title {
+  font-size: 11px; font-weight: 600; color: var(--cyan);
+  text-decoration: none; display: block;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.source-title:hover { text-decoration: underline; }
+.source-domain {
+  font-size: 9px; color: var(--green-dim);
+  display: block; margin-top: 1px;
+}
+.source-snippet {
+  font-size: 10px; color: var(--gray-mid);
+  line-height: 1.35;
+  margin-top: 2px;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
 /* Streaming cursor */
 .streaming-cursor::after {
   content: '\u2588'; animation: blink 0.8s step-end infinite;
@@ -1156,6 +1263,8 @@ const state = {
   modelReady: false,
   searchEnabled: false,
   lastSearchResults: [],
+  currentSearchResults: [],
+  searchPanelExpanded: false,
   showThinking: true,
   currentModelKey: 'minicpm5-1b',
   currentModelType: 'text',
@@ -1397,9 +1506,11 @@ function addAssistantMessage() {
   const div = document.createElement('div');
   div.className = 'msg msg-assistant';
   div.id = 'current-assistant-msg';
-  div.innerHTML = `<span class="msg-prefix">ai&gt;</span><span class="msg-content streaming-cursor"></span>`;
+  div.innerHTML = `<span class="msg-prefix">ai&gt;</span><div class="msg-body"><div class="search-source-container"></div><span class="msg-content streaming-cursor"></span></div>`;
   container.appendChild(div);
   state.reasoningExpanded = false;
+  state.currentSearchResults = [];
+  state.searchPanelExpanded = false;
   scrollToBottom();
   return div;
 }
@@ -1917,6 +2028,15 @@ async function sendMessage(prompt) {
 function handlePayload(payload, isStreaming) {
   if (payload.status_text) renderStatus(payload.status_text, payload.status_state || 'working');
 
+  // Handle search results (show inline source badge)
+  if (payload.type === 'search_results' && payload.search_results) {
+    state.currentSearchResults = payload.search_results;
+    state.lastSearchResults = payload.search_results;
+    renderSearchSourceBadge(payload.search_results, false);
+    // Also render in the Search tab
+    renderSearchResults(payload.search_results);
+  }
+
   if (payload.history) {
     state.history = payload.history;
     const lastMsg = payload.history[payload.history.length - 1];
@@ -2229,6 +2349,59 @@ function renderSearchResults(results) {
   container.innerHTML = html;
 }
 
+// ═══════════════════════════════════════════════════════
+// SEARCH SOURCE BADGE (Grok-style inline in chat)
+// ═══════════════════════════════════════════════════════
+function renderSearchSourceBadge(results, expanded) {
+  const div = document.getElementById('current-assistant-msg');
+  if (!div) return;
+  const container = div.querySelector('.search-source-container');
+  if (!container || !results || results.length === 0) return;
+
+  const count = results.length;
+  const openClass = expanded ? ' open' : '';
+
+  // Build source items HTML
+  let sourceItems = '';
+  results.forEach((r) => {
+    let domain = '';
+    try { domain = new URL(r.url).hostname.replace('www.', ''); } catch(e) { domain = r.host_name || r.url; }
+    const faviconUrl = r.favicon || `https://www.google.com/s2/favicons?domain=${domain}&sz=16`;
+    sourceItems += `<div class="source-item">
+      <img class="source-favicon" src="${escapeHtml(faviconUrl)}" alt="" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
+      <div class="source-favicon-placeholder" style="display:none;">${escapeHtml(domain.charAt(0).toUpperCase())}</div>
+      <div class="source-info">
+        <a class="source-title" href="${escapeHtml(r.url)}" target="_blank" rel="noopener" onclick="event.stopPropagation();">${escapeHtml(r.title)}</a>
+        <span class="source-domain">${escapeHtml(domain)}</span>
+        <div class="source-snippet">${escapeHtml(r.snippet)}</div>
+      </div>
+    </div>`;
+  });
+
+  container.innerHTML = `
+    <div class="search-source-badge${openClass}" onclick="toggleSearchPanel(this)">
+      <span class="badge-icon">&#128269;</span>
+      <span>Searched</span>
+      <span class="badge-count">${count} source${count !== 1 ? 's' : ''}</span>
+      <span class="badge-arrow">&#9660;</span>
+    </div>
+    <div class="search-source-panel${openClass}">
+      ${sourceItems}
+    </div>
+  `;
+
+  scrollToBottom();
+}
+
+function toggleSearchPanel(badge) {
+  const panel = badge.nextElementSibling;
+  const isOpen = badge.classList.contains('open');
+  badge.classList.toggle('open', !isOpen);
+  panel.classList.toggle('open', !isOpen);
+  state.searchPanelExpanded = !isOpen;
+  scrollToBottom();
+}
+
 // ═══════════════════════════════════════════════════════
 // HUGGINGFACE PUSH
 // ═══════════════════════════════════════════════════════