feat: 对话总结标题改为不超过20字

www/app.js

@@ -5,8 +5,10 @@ const CONFIG = {
   apiUrl: 'https://open.bigmodel.cn/api/paas/v4/chat/completions',
   apiKey: '2259e33a1357460abe17919aaf81e73d.K44a8LPQTmFM5PKm',
   model: 'glm-4.5-air',
-  thinkingModel: 'glm-z1-flash',  // 智谱思考模型
-  maxTokens: 2048
+  maxTokens: 2048,
+  // Tavily Search API
+  tavilyApiUrl: 'https://api.tavily.com/search',
+  tavilyApiKey: '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'
 };
 
 // 数据结构
@@ -75,27 +77,66 @@ function showConversationList() {
           <span class="logo">🤖</span>
           <h1>AI助手</h1>
         </div>
-        <button class="new-chat-btn-header" id="newChatBtn" title="新建对话">
-          <svg viewBox="0 0 24 24" width="20" height="20"><path fill="currentColor" d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
-        </button>
+        <div class="header-actions">
+          <button class="header-btn search-toggle-btn" id="searchToggleBtn" title="搜索">
+            <svg viewBox="0 0 24 24" width="20" height="20"><path fill="currentColor" d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 7 9.5 7 14 9.01 14 9.5 11.99 14 9.5 14z"/></svg>
+          </button>
+          <button class="header-btn new-chat-btn-header" id="newChatBtn" title="新建对话">
+            <svg viewBox="0 0 24 24" width="20" height="20"><path fill="currentColor" d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
+          </button>
+        </div>
       </header>
       
       <div class="list-content">
         <div class="conversation-list" id="conversationList">
           ${conversations.length === 0 
             ? '<div class="empty-list">暂无对话记录</div>'
-            : conversations.map(conv => `
-              <div class="conversation-item" data-id="${conv.id}">
+            : sortConversations().map(conv => `
+              <div class="conversation-item ${conv.is_pinned ? 'pinned' : ''}" data-id="${conv.id}">
+                ${conv.is_pinned ? '<span class="pin-icon">📌</span>' : ''}
                 <div class="conv-title">${escapeHtml(conv.title)}</div>
                 <div class="conv-meta">${conv.messages.length} 条消息 · ${formatTime(conv.updatedAt)}</div>
-                <button class="conv-delete-btn" data-id="${conv.id}" title="删除对话">
-                  <svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>
-                </button>
               </div>
             `).join('')
           }
         </div>
       </div>
+      
+      <!-- 操作菜单 -->
+      <div class="action-menu" id="actionMenu">
+        <div class="action-menu-content">
+          <div class="action-menu-item" data-action="rename">
+            <svg viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>
+            <span>重命名</span>
+          </div>
+          <div class="action-menu-item" data-action="share">
+            <svg viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.35 2.92 3 2.92s3-1.31 3-2.92c0-1.61-1.35-2.92-3-2.92z"/></svg>
+            <span>分享</span>
+          </div>
+          <div class="action-menu-item" data-action="pin">
+            <svg viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M16 12V4h1V2H7v2h1v8l-2 2v2h5.2v6h1.6v-6H18v-2l-2-2z"/></svg>
+            <span id="pinText">置顶</span>
+          </div>
+          <div class="action-menu-item delete-action" data-action="delete">
+            <svg viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>
+            <span>删除</span>
+          </div>
+        </div>
+      </div>
+      
+      <!-- 搜索栏 -->
+      <div class="search-bar" id="searchBar">
+        <div class="search-input-wrapper">
+          <svg viewBox="0 0 24 24" width="20" height="20"><path fill="currentColor" d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 7 9.5 7 14 9.01 14 9.5 11.99 14 9.5 14z"/></svg>
+          <input type="text" id="searchInput" placeholder="搜索对话标题或内容...">
+          <button class="search-close-btn" id="searchCloseBtn">
+            <svg viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>
+          </button>
+        </div>
+        <div class="search-results" id="searchResults"></div>
+      </div>
+      
+      </div>
     </div>
   `;
   
@@ -107,22 +148,313 @@ function showConversationList() {
     newChatBtn.addEventListener('click', createNewConversation);
   }
   
-  const conversationList = document.getElementById('conversationList');
-  if (conversationList) {
-    conversationList.addEventListener('click', (e) => {
-      const item = e.target.closest('.conversation-item');
-      const deleteBtn = e.target.closest('.conv-delete-btn');
-      
-      if (deleteBtn) {
-        e.stopPropagation();
-        const id = deleteBtn.getAttribute('data-id');
-        deleteConversation(id);
-      } else if (item) {
+  // 搜索功能
+  const searchToggleBtn = document.getElementById('searchToggleBtn');
+  const searchBar = document.getElementById('searchBar');
+  const searchInput = document.getElementById('searchInput');
+  const searchCloseBtn = document.getElementById('searchCloseBtn');
+  const searchResults = document.getElementById('searchResults');
+  
+  if (searchToggleBtn) {
+    searchToggleBtn.addEventListener('click', () => {
+      if (searchBar) {
+        searchBar.classList.add('show');
+        if (searchInput) {
+          searchInput.focus();
+        }
+      }
+    });
+  }
+  
+  if (searchCloseBtn) {
+    searchCloseBtn.addEventListener('click', () => {
+      hideSearchBar();
+    });
+  }
+  
+  if (searchInput) {
+    searchInput.addEventListener('input', (e) => {
+      const keyword = e.target.value.trim();
+      if (keyword) {
+        searchConversations(keyword);
+      } else {
+        if (searchResults) searchResults.innerHTML = '';
+      }
+    });
+    
+    searchInput.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape') {
+        hideSearchBar();
+      }
+    });
+  }
+  
+  // 点击搜索结果
+  if (searchResults) {
+    searchResults.addEventListener('click', (e) => {
+      const item = e.target.closest('.search-result-item');
+      if (item) {
         const id = item.getAttribute('data-id');
+        hideSearchBar();
         openConversation(id);
       }
     });
   }
+  
+  function hideSearchBar() {
+    if (searchBar) {
+      searchBar.classList.remove('show');
+    }
+    if (searchInput) {
+      searchInput.value = '';
+    }
+    if (searchResults) {
+      searchResults.innerHTML = '';
+    }
+  }
+  
+  const conversationList = document.getElementById('conversationList');
+  const actionMenu = document.getElementById('actionMenu');
+  let longPressTimer = null;
+  let currentActionConvId = null;
+  
+  if (conversationList) {
+    // 点击事件
+    conversationList.addEventListener('click', (e) => {
+      const item = e.target.closest('.conversation-item');
+      
+      if (item) {
+        const id = item.getAttribute('data-id');
+        openConversation(id);
+      }
+    });
+    
+    // 长按事件
+    conversationList.addEventListener('touchstart', (e) => {
+      const item = e.target.closest('.conversation-item');
+      if (item) {
+        longPressTimer = setTimeout(() => {
+          currentActionConvId = item.getAttribute('data-id');
+          showActionMenu(currentActionConvId);
+        }, 500);  // 500ms长按
+      }
+    });
+    
+    conversationList.addEventListener('touchend', () => {
+      if (longPressTimer) {
+        clearTimeout(longPressTimer);
+        longPressTimer = null;
+      }
+    });
+    
+    conversationList.addEventListener('touchmove', () => {
+      if (longPressTimer) {
+        clearTimeout(longPressTimer);
+        longPressTimer = null;
+      }
+    });
+    
+    // 鼠标长按（PC端）
+    conversationList.addEventListener('mousedown', (e) => {
+      const item = e.target.closest('.conversation-item');
+      if (item) {
+        longPressTimer = setTimeout(() => {
+          currentActionConvId = item.getAttribute('data-id');
+          showActionMenu(currentActionConvId);
+        }, 500);
+      }
+    });
+    
+    conversationList.addEventListener('mouseup', () => {
+      if (longPressTimer) {
+        clearTimeout(longPressTimer);
+        longPressTimer = null;
+      }
+    });
+    
+    conversationList.addEventListener('mouseleave', () => {
+      if (longPressTimer) {
+        clearTimeout(longPressTimer);
+        longPressTimer = null;
+      }
+    });
+  }
+  
+  // 操作菜单事件
+  if (actionMenu) {
+    actionMenu.addEventListener('click', (e) => {
+      const item = e.target.closest('.action-menu-item');
+      if (item && currentActionConvId) {
+        const action = item.getAttribute('data-action');
+        handleActionMenuAction(action, currentActionConvId);
+        hideActionMenu();
+      }
+    });
+    
+    // 点击其他地方关闭菜单
+    document.addEventListener('click', (e) => {
+      if (actionMenu.classList.contains('show') && !actionMenu.contains(e.target)) {
+        hideActionMenu();
+      }
+    });
+  }
+}
+
+// 排序对话（置顶在前）
+function sortConversations() {
+  return [...conversations].sort((a, b) => {
+    // 置顶优先
+    if (a.is_pinned && !b.is_pinned) return -1;
+    if (!a.is_pinned && b.is_pinned) return 1;
+    // 然后按更新时间
+    return b.updatedAt - a.updatedAt;
+  });
+}
+
+// 搜索对话
+function searchConversations(keyword) {
+  const searchResults = document.getElementById('searchResults');
+  if (!searchResults) return;
+  
+  keyword = keyword.toLowerCase();
+  
+  // 搜索标题和消息内容
+  const results = conversations.filter(conv => {
+    // 搜索标题
+    if (conv.title.toLowerCase().includes(keyword)) return true;
+    
+    // 搜索消息内容
+    if (conv.messages.some(m => m.content.toLowerCase().includes(keyword))) return true;
+    
+    return false;
+  });
+  
+  if (results.length === 0) {
+    searchResults.innerHTML = '<div class="search-empty">未找到相关对话</div>';
+    return;
+  }
+  
+  searchResults.innerHTML = results.map(conv => {
+    // 找到匹配的消息片段
+    let matchSnippet = '';
+    const matchedMsg = conv.messages.find(m => m.content.toLowerCase().includes(keyword));
+    if (matchedMsg) {
+      const content = matchedMsg.content;
+      const idx = content.toLowerCase().indexOf(keyword);
+      const start = Math.max(0, idx - 30);
+      const end = Math.min(content.length, idx + keyword.length + 30);
+      matchSnippet = (start > 0 ? '...' : '') + content.slice(start, end) + (end < content.length ? '...' : '');
+    }
+    
+    return `
+      <div class="search-result-item ${conv.is_pinned ? 'pinned' : ''}" data-id="${conv.id}">
+        ${conv.is_pinned ? '<span class="pin-icon">📌</span>' : ''}
+        <div class="search-result-title">${escapeHtml(conv.title)}</div>
+        ${matchSnippet ? `<div class="search-result-snippet">${escapeHtml(matchSnippet)}</div>` : ''}
+        <div class="search-result-meta">${conv.messages.length} 条消息 · ${formatTime(conv.updatedAt)}</div>
+      </div>
+    `;
+  }).join('');
+}
+
+// 显示操作菜单
+function showActionMenu(convId) {
+  const actionMenu = document.getElementById('actionMenu');
+  const conv = conversations.find(c => c.id === convId);
+  if (!actionMenu || !conv) return;
+  
+  // 更新置顶按钮文字
+  const pinText = document.getElementById('pinText');
+  if (pinText) {
+    pinText.textContent = conv.is_pinned ? '取消置顶' : '置顶';
+  }
+  
+  // 显示菜单
+  actionMenu.classList.add('show');
+}
+
+// 隐藏操作菜单
+function hideActionMenu() {
+  const actionMenu = document.getElementById('actionMenu');
+  if (actionMenu) {
+    actionMenu.classList.remove('show');
+  }
+}
+
+// 处理操作菜单动作
+function handleActionMenuAction(action, convId) {
+  const conv = conversations.find(c => c.id === convId);
+  if (!conv) return;
+  
+  switch (action) {
+    case 'rename':
+      renameConversation(convId);
+      break;
+    case 'share':
+      shareConversation(convId);
+      break;
+    case 'pin':
+      togglePinConversation(convId);
+      break;
+    case 'delete':
+      deleteConversation(convId);
+      break;
+  }
+}
+
+// 重命名对话
+function renameConversation(convId) {
+  const conv = conversations.find(c => c.id === convId);
+  if (!conv) return;
+  
+  const newTitle = prompt('请输入新的对话标题:', conv.title);
+  if (newTitle && newTitle.trim() && newTitle !== conv.title) {
+    conv.title = newTitle.trim();
+    conv.updatedAt = Date.now();
+    saveConversations();
+    showConversationList();
+    showToast('已重命名');
+  }
+}
+
+// 分享对话
+function shareConversation(convId) {
+  const conv = conversations.find(c => c.id === convId);
+  if (!conv) return;
+  
+  // 构建分享内容
+  const shareContent = `【${conv.title}】\n\n${conv.messages.map(m => 
+    `${m.role === 'user' ? '👤 用户' : '🤖 AI'}: ${m.content}`
+  ).join('\n\n')}`;
+  
+  // 复制到剪贴板
+  try {
+    const textarea = document.createElement('textarea');
+    textarea.value = shareContent;
+    textarea.style.position = 'fixed';
+    textarea.style.top = '0';
+    textarea.style.left = '0';
+    textarea.style.opacity = '0';
+    document.body.appendChild(textarea);
+    textarea.select();
+    document.execCommand('copy');
+    document.body.removeChild(textarea);
+    showToast('对话已复制到剪贴板');
+  } catch (err) {
+    showToast('分享失败');
+  }
+}
+
+// 置顶/取消置顶对话
+function togglePinConversation(convId) {
+  const conv = conversations.find(c => c.id === convId);
+  if (!conv) return;
+  
+  conv.is_pinned = !conv.is_pinned;
+  conv.updatedAt = Date.now();
+  saveConversations();
+  showConversationList();
+  showToast(conv.is_pinned ? '已置顶' : '已取消置顶');
 }
 
 // 创建新对话
@@ -180,14 +512,24 @@ function openConversation(id) {
 
       <!-- 功能开关栏 -->
       <div class="feature-bar">
-        <button class="feature-btn thinking-btn ${enableThinking ? 'active' : ''}" id="thinkingBtn">
-          <svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
-          <span>深度思考</span>
-        </button>
-        <button class="feature-btn search-btn ${enableSearch ? 'active' : ''}" id="searchBtn">
-          <svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 7 9.5 7 14 9.01 14 9.5 11.99 14 9.5 14z"/></svg>
-          <span>联网搜索</span>
-        </button>
+        <div class="feature-left">
+          <button class="feature-btn thinking-btn ${enableThinking ? 'active' : ''}" id="thinkingBtn">
+            <svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
+            <span>深度思考</span>
+          </button>
+          <button class="feature-btn search-btn ${enableSearch ? 'active' : ''}" id="searchBtn">
+            <svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 7 9.5 7 14 9.01 14 9.5 11.99 14 9.5 14z"/></svg>
+            <span>联网搜索</span>
+          </button>
+        </div>
+        <div class="feature-right">
+          <button class="feature-btn nav-btn" id="scrollTopBtn" title="回到顶部">
+            <svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/></svg>
+          </button>
+          <button class="feature-btn nav-btn" id="scrollBottomBtn" title="回到底部">
+            <svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z"/></svg>
+          </button>
+        </div>
       </div>
 
       <div class="input-area">
@@ -245,11 +587,6 @@ function openConversation(id) {
     thinkingBtn.addEventListener('click', () => {
       enableThinking = !enableThinking;
       thinkingBtn.classList.toggle('active', enableThinking);
-      // 如果开启深度思考，关闭联网搜索（智谱思考模型不支持联网）
-      if (enableThinking && enableSearch) {
-        enableSearch = false;
-        searchBtn.classList.remove('active');
-      }
     });
   }
   
@@ -257,10 +594,31 @@ function openConversation(id) {
     searchBtn.addEventListener('click', () => {
       enableSearch = !enableSearch;
       searchBtn.classList.toggle('active', enableSearch);
-      // 如果开启联网搜索，关闭深度思考
-      if (enableSearch && enableThinking) {
-        enableThinking = false;
-        thinkingBtn.classList.remove('active');
+    });
+  }
+  
+  // 绑定置顶置底按钮事件
+  const scrollTopBtn = document.getElementById('scrollTopBtn');
+  const scrollBottomBtn = document.getElementById('scrollBottomBtn');
+  
+  if (scrollTopBtn) {
+    scrollTopBtn.addEventListener('click', () => {
+      if (messagesContainer) {
+        messagesContainer.scrollTo({
+          top: 0,
+          behavior: 'smooth'
+        });
+      }
+    });
+  }
+  
+  if (scrollBottomBtn) {
+    scrollBottomBtn.addEventListener('click', () => {
+      if (messagesContainer) {
+        messagesContainer.scrollTo({
+          top: messagesContainer.scrollHeight,
+          behavior: 'smooth'
+        });
       }
     });
   }
@@ -395,10 +753,20 @@ async function streamGenerate(userMsgIndex) {
   sendBtn.disabled = true;
 
   const aiMessageIndex = currentConversation.messages.length;
+  const userMessage = currentConversation.messages[userMsgIndex];
+  
+  // 如果开启联网搜索，先执行搜索
+  let searchResults = null;
+  if (enableSearch && userMessage.role === 'user') {
+    searchResults = await performSearch(userMessage.content);
+  }
+  
+  // 只有开启深度思考时才添加 thinking 字段，开启搜索时添加 search_results 字段
   currentConversation.messages.push({ 
     role: 'assistant', 
     content: '',
-    thinking: ''  // 思考内容
+    ...(enableThinking ? { thinking: '' } : {}),
+    ...(searchResults ? { search_results: searchResults } : {})
   });
   renderMessages();
   
@@ -406,12 +774,44 @@ async function streamGenerate(userMsgIndex) {
   const contentEl = lastMessageEl.querySelector('.message-content');
   const thinkingEl = lastMessageEl.querySelector('.thinking-content');
   
+  // 深度思考模式：思考块默认展开
+  if (enableThinking && thinkingEl) {
+    const thinkingBlock = lastMessageEl.querySelector('.thinking-block');
+    if (thinkingBlock) thinkingBlock.classList.add('expanded');
+    thinkingEl.innerHTML = '<span class="streaming-cursor">思考中...</span>';
+  }
+  
   contentEl.innerHTML = '<span class="streaming-cursor">▌</span>';
-  if (thinkingEl) thinkingEl.innerHTML = '<span class="streaming-cursor">▌</span>';
+  
+  // 显示停止生成按钮
+  showStopGenerateBtn();
 
   try {
-    // 根据开关选择模型
-    const model = enableThinking ? CONFIG.thinkingModel : CONFIG.model;
+    // 构建消息数组
+    let messagesToSend = currentConversation.messages.slice(0, aiMessageIndex).map(m => ({
+      role: m.role,
+      content: m.content
+    }));
+    
+    // 如果有搜索结果，将搜索内容添加到消息中
+    if (searchResults) {
+      const searchContext = formatSearchResultsForLLM(searchResults);
+      messagesToSend.push({
+        role: 'system',
+        content: `以下是搜索结果，请根据这些信息回答用户问题：\n\n${searchContext}`
+      });
+    }
+    
+    // 构建请求体 - 统一使用 glm-4.5-air，通过 thinking 参数控制
+    const requestBody = {
+      model: CONFIG.model,
+      messages: messagesToSend,
+      max_tokens: CONFIG.maxTokens,
+      stream: true,
+      thinking: {
+        type: enableThinking ? 'enabled' : 'disabled'
+      }
+    };
     
     const response = await fetch(CONFIG.apiUrl, {
       method: 'POST',
@@ -419,15 +819,7 @@ async function streamGenerate(userMsgIndex) {
         'Content-Type': 'application/json',
         'Authorization': `Bearer ${CONFIG.apiKey}`
       },
-      body: JSON.stringify({
-        model: model,
-        messages: currentConversation.messages.slice(0, aiMessageIndex).map(m => ({
-          role: m.role,
-          content: m.content
-        })),
-        max_tokens: CONFIG.maxTokens,
-        stream: true
-      })
+      body: JSON.stringify(requestBody)
     });
 
     if (!response.ok) {
@@ -437,9 +829,31 @@ async function streamGenerate(userMsgIndex) {
     const reader = response.body.getReader();
     const decoder = new TextDecoder();
     let buffer = '';
-    let thinkingComplete = false;  // 思考是否完成
+    let thinkingOutputStarted = false;  // 正式内容是否开始输出
+    let abortController = new AbortController();  // 用于中断流
+    
+    // 绑定停止按钮事件
+    const stopBtn = document.getElementById('stopGenerateBtn');
+    if (stopBtn) {
+      stopBtn.onclick = () => {
+        abortController.abort();
+        isLoading = false;
+        sendBtn.disabled = false;
+        hideStopGenerateBtn();
+        // 更新最终内容
+        if (thinkingEl && enableThinking && currentConversation.messages[aiMessageIndex].thinking) {
+          thinkingEl.innerHTML = renderMarkdown(currentConversation.messages[aiMessageIndex].thinking);
+        }
+        contentEl.innerHTML = renderMarkdown(currentConversation.messages[aiMessageIndex].content);
+        currentConversation.updatedAt = Date.now();
+        saveConversations();
+        renderMessages();
+      };
+    }
 
     while (true) {
+      if (abortController.signal.aborted) break;  // 检查是否已停止
+      
       const { done, value } = await reader.read();
       if (done) break;
 
@@ -457,24 +871,26 @@ async function streamGenerate(userMsgIndex) {
             const delta = data.choices?.[0]?.delta;
             
             if (delta) {
-              // 处理思考内容
-              if (delta.reasoning_content || delta.thinking) {
+              // 只有开启深度思考时才处理思考内容
+              if (enableThinking && (delta.reasoning_content || delta.thinking)) {
                 const thinkingChunk = delta.reasoning_content || delta.thinking;
                 currentConversation.messages[aiMessageIndex].thinking += thinkingChunk;
                 if (thinkingEl) {
                   thinkingEl.innerHTML = renderMarkdown(currentConversation.messages[aiMessageIndex].thinking) + '<span class="streaming-cursor">▌</span>';
-                  // 思考时展开
-                  const thinkingBlock = lastMessageEl.querySelector('.thinking-block');
-                  if (thinkingBlock) thinkingBlock.classList.add('expanded');
+                }
+                // 确保思考块展开
+                const thinkingBlock = lastMessageEl.querySelector('.thinking-block');
+                if (thinkingBlock && !thinkingBlock.classList.contains('expanded')) {
+                  thinkingBlock.classList.add('expanded');
                 }
                 scrollToBottom();
               }
               
               // 处理正式回复内容
               if (delta.content) {
-                // 如果开始输出正式内容，说明思考完成
-                if (currentConversation.messages[aiMessageIndex].thinking && !thinkingComplete) {
-                  thinkingComplete = true;
+                // 如果开启深度思考且开始输出正式内容，说明思考完成，立即折叠思考块
+                if (enableThinking && !thinkingOutputStarted && currentConversation.messages[aiMessageIndex].thinking) {
+                  thinkingOutputStarted = true;
                   // 折叠思考内容
                   const thinkingBlock = lastMessageEl.querySelector('.thinking-block');
                   if (thinkingBlock) thinkingBlock.classList.remove('expanded');
@@ -492,7 +908,7 @@ async function streamGenerate(userMsgIndex) {
     }
 
     // 最终渲染
-    if (thinkingEl && currentConversation.messages[aiMessageIndex].thinking) {
+    if (thinkingEl && enableThinking && currentConversation.messages[aiMessageIndex].thinking) {
       thinkingEl.innerHTML = renderMarkdown(currentConversation.messages[aiMessageIndex].thinking);
     }
     contentEl.innerHTML = renderMarkdown(currentConversation.messages[aiMessageIndex].content);
@@ -504,9 +920,152 @@ async function streamGenerate(userMsgIndex) {
   } finally {
     isLoading = false;
     sendBtn.disabled = false;
+    hideStopGenerateBtn();
     currentConversation.updatedAt = Date.now();
     saveConversations();
     renderMessages();
+    
+    // 自动总结标题：第一次对话和每隔5次对话
+    const totalMessages = currentConversation.messages.length;
+    // 第一次对话（用户+AI=2条）或每5次对话（10条）
+    if (totalMessages === 2 || totalMessages % 10 === 0) {
+      await generateConversationTitle();
+    }
+  }
+}
+
+// 执行 Tavily 搜索
+async function performSearch(query) {
+  try {
+    const response = await fetch(CONFIG.tavilyApiUrl, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${CONFIG.tavilyApiKey}`
+      },
+      body: JSON.stringify({
+        query: query,
+        max_results: 10,
+        include_raw_content: false
+      })
+    });
+
+    if (!response.ok) {
+      console.error('搜索失败:', response.status);
+      return null;
+    }
+
+    const data = await response.json();
+    return data.results || [];
+  } catch (error) {
+    console.error('搜索错误:', error);
+    return null;
+  }
+}
+
+// 格式化搜索结果给 LLM
+function formatSearchResultsForLLM(results) {
+  if (!results || results.length === 0) return '无搜索结果';
+  
+  return results.map((r, i) => 
+    `${i + 1}. 【${r.title}】\n来源: ${r.url}\n摘要: ${r.content || '无摘要'}\n`
+  ).join('\n');
+}
+
+// 显示停止生成按钮
+function showStopGenerateBtn() {
+  // 检查是否已存在
+  if (document.getElementById('stopGenerateBtn')) return;
+  
+  const stopBtn = document.createElement('button');
+  stopBtn.id = 'stopGenerateBtn';
+  stopBtn.className = 'stop-generate-btn';
+  stopBtn.innerHTML = `
+    <svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M6 6h12v12H6z"/></svg>
+    <span>停止生成</span>
+  `;
+  
+  // 插入到消息容器底部
+  if (messagesContainer) {
+    messagesContainer.appendChild(stopBtn);
+  }
+}
+
+// 隐藏停止生成按钮
+function hideStopGenerateBtn() {
+  const stopBtn = document.getElementById('stopGenerateBtn');
+  if (stopBtn) {
+    stopBtn.remove();
+  }
+}
+
+// 生成对话标题
+async function generateConversationTitle() {
+  if (!currentConversation) return;
+  
+  console.log('开始生成标题，当前消息数:', currentConversation.messages.length);
+  
+  // 构建对话摘要
+  const conversationText = currentConversation.messages.map(m => 
+    `${m.role === 'user' ? '用户' : 'AI'}: ${m.content.slice(0, 200)}`
+  ).join('\n');
+  
+  const titlePrompt = `请用不超过20个字总结以下对话的主题，只输出标题，不要其他内容：
+${conversationText}`;
+
+  try {
+    const response = await fetch(CONFIG.apiUrl, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${CONFIG.apiKey}`
+      },
+      body: JSON.stringify({
+        model: CONFIG.model,
+        messages: [{ role: 'user', content: titlePrompt }],
+        max_tokens: 100,
+        thinking: { type: 'disabled' }  // 禁用思考模式，直接输出标题
+      })
+    });
+
+    console.log('标题API响应状态:', response.status);
+    
+    if (response.ok) {
+      const data = await response.json();
+      console.log('标题API响应数据:', data);
+      const newTitle = data.choices?.[0]?.message?.content?.trim();
+      console.log('生成的标题:', newTitle);
+      
+      if (newTitle && newTitle.length > 0) {
+        // 去掉可能的引号和多余符号
+        const cleanTitle = newTitle.replace(/^["'"']+|["'"']+$/g, '').trim();
+        if (cleanTitle.length > 0 && cleanTitle.length <= 30) {
+          currentConversation.title = cleanTitle;
+          currentConversation.updatedAt = Date.now();
+          saveConversations();
+          console.log('标题已保存:', cleanTitle);
+          
+          // 更新页面标题显示
+          const titleEl = document.querySelector('.header h1');
+          if (titleEl) {
+            titleEl.textContent = cleanTitle;
+          }
+          
+          // 更新侧边栏标题（如果在对话列表页面）
+          const convItem = document.querySelector(`.conversation-item[data-id="${currentConversation.id}"] .conv-title`);
+          if (convItem) {
+            convItem.textContent = cleanTitle;
+          }
+          
+          showToast('标题已更新');
+        }
+      }
+    } else {
+      const errorText = await response.text();
+      console.error('标题API错误:', errorText);
+    }
+  } catch (error) {
+    console.error('生成标题失败:', error);
   }
 }
 
@@ -631,15 +1190,41 @@ function renderMessages() {
     
     // 思考内容块（仅AI消息）
     let thinkingHtml = '';
-    if (!isUser && msg.thinking) {
+    if (!isUser && 'thinking' in msg) {
+      // 判断是否是当前正在生成的消息（有thinking字段且正在加载）
+      const isGenerating = index === currentConversation.messages.length - 1 && isLoading && enableThinking;
+      // 思考进行中且没有正式内容时展开
+      const expandedClass = isGenerating && !msg.content ? 'expanded' : '';
+      
       thinkingHtml = `
-        <div class="thinking-block" onclick="toggleThinking(this)">
+        <div class="thinking-block ${expandedClass}" onclick="toggleThinking(this)">
           <div class="thinking-header">
             <svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
             <span>思考过程</span>
             <svg class="thinking-arrow" viewBox="0 0 24 24" width="14" height="14"><path fill="currentColor" d="M7 10l5 5 5-5z"/></svg>
           </div>
-          <div class="thinking-content">${renderMarkdown(msg.thinking)}</div>
+          <div class="thinking-content">${renderMarkdown(msg.thinking || '思考中...')}</div>
+        </div>`;
+    }
+    
+    // 搜索结果块（仅AI消息，放在思考块前面）
+    let searchHtml = '';
+    if (!isUser && msg.search_results && msg.search_results.length > 0) {
+      searchHtml = `
+        <div class="search-results-block" onclick="toggleSearchResults(this)">
+          <div class="search-results-header">
+            <svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 7 9.5 7 14 9.01 14 9.5 11.99 14 9.5 14z"/></svg>
+            <span>搜索结果 (${msg.search_results.length})</span>
+            <svg class="search-results-arrow" viewBox="0 0 24 24" width="14" height="14"><path fill="currentColor" d="M7 10l5 5 5-5z"/></svg>
+          </div>
+          <div class="search-results-content">
+            ${msg.search_results.map((r, i) => `
+              <div class="search-result-link">
+                <span class="search-result-num">${i + 1}</span>
+                <a href="${r.url}" target="_blank" rel="noopener">${escapeHtml(r.title)}</a>
+              </div>
+            `).join('')}
+          </div>
         </div>`;
     }
     
@@ -666,6 +1251,7 @@ function renderMessages() {
       <div class="message ${msg.role}" data-index="${index}">
         <div class="message-avatar">${avatar}</div>
         <div class="message-body">
+          ${searchHtml}
           ${thinkingHtml}
           <div class="message-content">${contentHtml}</div>
           ${actions}
@@ -693,6 +1279,11 @@ function toggleThinking(block) {
   block.classList.toggle('expanded');
 }
 
+// 折叠/展开搜索结果
+function toggleSearchResults(block) {
+  block.classList.toggle('expanded');
+}
+
 // ==================== 工具函数 ====================
 
 // 渲染 Markdown

www/index.html

@@ -8,12 +8,12 @@
   <meta http-equiv="Pragma" content="no-cache">
   <meta http-equiv="Expires" content="0">
   <title>AI助手</title>
-  <link rel="stylesheet" href="style.css?v=2.2.1">
+  <link rel="stylesheet" href="style.css?v=2.7.7">
   <link rel="manifest" href="manifest.json">
 </head>
 <body>
   <div id="app"></div>
-  <script src="marked.min.js?v=2.2.1"></script>
-  <script src="app.js?v=2.2.1"></script>
+  <script src="marked.min.js?v=2.7.7"></script>
+  <script src="app.js?v=2.7.7"></script>
 </body>
 </html>

www/style.css

@@ -66,14 +66,13 @@ body {
   font-weight: 600;
 }
 
-.list-content {
-  flex: 1;
-  padding: 16px;
-  overflow-y: auto;
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
 }
 
-/* Header 中的新建对话按钮 - 美化版 */
-.new-chat-btn-header {
+.header-btn {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -90,7 +89,7 @@ body {
   overflow: hidden;
 }
 
-.new-chat-btn-header::before {
+.header-btn::before {
   content: '';
   position: absolute;
   inset: 0;
@@ -99,25 +98,31 @@ body {
   transition: opacity 0.25s;
 }
 
-.new-chat-btn-header:hover {
+.header-btn:hover {
   transform: scale(1.08);
   box-shadow: 0 4px 16px rgba(102,126,234,0.4), 0 2px 8px rgba(0,0,0,0.2);
   color: #5a67d8;
 }
 
-.new-chat-btn-header:hover::before {
+.header-btn:hover::before {
   opacity: 1;
 }
 
-.new-chat-btn-header:active {
+.header-btn:active {
   transform: scale(0.95);
   box-shadow: 0 1px 4px rgba(0,0,0,0.2);
 }
 
-.new-chat-btn-header svg {
+.header-btn svg {
   filter: drop-shadow(0 1px 2px rgba(102,126,234,0.3));
 }
 
+.list-content {
+  flex: 1;
+  padding: 16px;
+  overflow-y: auto;
+}
+
 /* 原样式保留（备用） */
 .new-chat-btn {
   display: flex;
@@ -152,7 +157,7 @@ body {
 
 .conversation-item {
   display: flex;
-  flex-direction: column;
+  align-items: center;
   padding: 12px 16px;
   background: white;
   border: 1px solid var(--border-color);
@@ -160,6 +165,12 @@ body {
   cursor: pointer;
   transition: all 0.2s;
   position: relative;
+  gap: 8px;
+}
+
+.conversation-item.pinned {
+  border-color: var(--primary);
+  background: rgba(102, 126, 234, 0.08);
 }
 
 .conversation-item:hover {
@@ -171,43 +182,227 @@ body {
   background: rgba(102, 126, 234, 0.1);
 }
 
+.pin-icon {
+  font-size: 14px;
+}
+
 .conv-title {
   font-size: 16px;
   font-weight: 500;
   color: var(--text-color);
-  margin-bottom: 4px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  flex: 1;
 }
 
 .conv-meta {
   font-size: 12px;
   color: var(--text-light);
+  white-space: nowrap;
 }
 
-.conv-delete-btn {
-  position: absolute;
-  right: 12px;
-  top: 50%;
-  transform: translateY(-50%);
+/* 操作菜单 */
+.action-menu {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
   background: transparent;
-  border: none;
-  color: var(--text-light);
-  padding: 6px;
+  display: none;
+  z-index: 1000;
+}
+
+.action-menu.show {
+  display: block;
+}
+
+.action-menu-content {
+  background: white;
+  border-radius: 16px 16px 0 0;
+  padding: 16px;
+  box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
+  animation: slideUp 0.2s ease;
+}
+
+@keyframes slideUp {
+  from { transform: translateY(100%); }
+  to { transform: translateY(0); }
+}
+
+.action-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 16px;
+  border-radius: 10px;
   cursor: pointer;
-  opacity: 0;
   transition: all 0.2s;
 }
 
-.conversation-item:hover .conv-delete-btn {
-  opacity: 1;
+.action-menu-item:hover {
+  background: rgba(102, 126, 234, 0.1);
 }
 
-.conv-delete-btn:hover {
+.action-menu-item:active {
+  background: rgba(102, 126, 234, 0.2);
+}
+
+.action-menu-item svg {
+  color: var(--primary);
+}
+
+.action-menu-item span {
+  font-size: 16px;
+  color: var(--text-color);
+}
+
+.action-menu-item.delete-action svg,
+.action-menu-item.delete-action span {
   color: #e53e3e;
 }
 
+.action-menu-item.delete-action:hover {
+  background: rgba(229, 62, 62, 0.1);
+}
+
+/* 搜索栏 */
+.search-bar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0,0,0,0.5);
+  display: none;
+  z-index: 1100;
+}
+
+.search-bar.show {
+  display: flex;
+  flex-direction: column;
+}
+
+.search-input-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+  background: white;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.search-input-wrapper svg {
+  color: var(--text-light);
+}
+
+.search-input-wrapper input {
+  flex: 1;
+  font-size: 16px;
+  border: none;
+  outline: none;
+  background: transparent;
+}
+
+.search-close-btn {
+  padding: 8px;
+  background: transparent;
+  border: none;
+  color: var(--text-light);
+  cursor: pointer;
+}
+
+.search-close-btn:hover {
+  color: var(--text-color);
+}
+
+.search-results {
+  flex: 1;
+  background: white;
+  overflow-y: auto;
+  padding: 8px 16px;
+}
+
+.search-empty {
+  padding: 40px 20px;
+  text-align: center;
+  color: var(--text-light);
+}
+
+.search-result-item {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px 16px;
+  background: white;
+  border: 1px solid var(--border-color);
+  border-radius: 12px;
+  margin-bottom: 8px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.search-result-item:hover {
+  border-color: var(--primary);
+  background: rgba(102, 126, 234, 0.05);
+}
+
+.search-result-item.pinned {
+  border-color: var(--primary);
+  background: rgba(102, 126, 234, 0.08);
+}
+
+.search-result-title {
+  font-size: 16px;
+  font-weight: 500;
+  color: var(--text-color);
+}
+
+.search-result-snippet {
+  font-size: 14px;
+  color: var(--text-light);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.search-result-meta {
+  font-size: 12px;
+  color: var(--text-light);
+}
+
+/* 底部工具栏 */
+.list-footer {
+  display: flex;
+  justify-content: center;
+  padding: 12px 16px;
+  background: white;
+  border-top: 1px solid var(--border-color);
+}
+
+.footer-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 10px 20px;
+  background: white;
+  border: 1px solid var(--border-color);
+  border-radius: 20px;
+  font-size: 14px;
+  color: var(--text-light);
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.footer-btn:hover {
+  border-color: var(--primary);
+  color: var(--primary);
+}
+
+.footer-btn:active {
+  background: rgba(102, 126, 234, 0.1);
+}
+
 /* ==================== 对话页面 ==================== */
 
 #chatPage {
@@ -585,12 +780,24 @@ body {
 /* 功能开关栏 */
 .feature-bar {
   display: flex;
+  justify-content: space-between;
+  align-items: center;
   gap: 8px;
   padding: 8px 16px;
   background: rgba(255,255,255,0.95);
   border-top: 1px solid var(--border-color);
 }
 
+.feature-left {
+  display: flex;
+  gap: 8px;
+}
+
+.feature-right {
+  display: flex;
+  gap: 4px;
+}
+
 .feature-btn {
   display: flex;
   align-items: center;
@@ -620,6 +827,18 @@ body {
   flex-shrink: 0;
 }
 
+/* 导航按钮样式 */
+.nav-btn {
+  padding: 6px 8px;
+  min-width: 32px;
+}
+
+.nav-btn:hover {
+  background: var(--primary);
+  border-color: var(--primary);
+  color: white;
+}
+
 /* 思考内容块 */
 .thinking-block {
   margin-bottom: 12px;
@@ -678,6 +897,88 @@ body {
   margin: 8px 0;
 }
 
+/* 搜索结果块 */
+.search-results-block {
+  margin-bottom: 12px;
+  background: rgba(102, 126, 234, 0.05);
+  border: 1px solid rgba(102, 126, 234, 0.15);
+  border-radius: 10px;
+  overflow: hidden;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.search-results-block:hover {
+  border-color: rgba(102, 126, 234, 0.3);
+}
+
+.search-results-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 12px;
+  background: rgba(102, 126, 234, 0.1);
+  font-size: 13px;
+  color: var(--primary);
+  font-weight: 500;
+}
+
+.search-results-header svg:first-child {
+  color: var(--primary);
+}
+
+.search-results-arrow {
+  margin-left: auto;
+  transition: transform 0.2s;
+}
+
+.search-results-block.expanded .search-results-arrow {
+  transform: rotate(180deg);
+}
+
+.search-results-content {
+  padding: 0 12px;
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.3s ease, padding 0.3s ease;
+}
+
+.search-results-block.expanded .search-results-content {
+  padding: 8px 12px;
+  max-height: 300px;
+}
+
+.search-result-link {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 0;
+}
+
+.search-result-num {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+  height: 20px;
+  background: var(--primary);
+  color: white;
+  border-radius: 50%;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.search-result-link a {
+  color: var(--text-color);
+  font-size: 14px;
+  text-decoration: none;
+  transition: color 0.2s;
+}
+
+.search-result-link a:hover {
+  color: var(--primary);
+}
+
 /* 输入区域 */
 .input-area {
   display: flex;
@@ -836,4 +1137,36 @@ body {
   .input-area {
     padding-bottom: calc(12px + env(safe-area-inset-bottom));
   }
+}
+
+/* 停止生成按钮 */
+.stop-generate-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 12px 24px;
+  margin: 16px auto;
+  background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%);
+  color: white;
+  border: none;
+  border-radius: 24px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+  box-shadow: 0 2px 8px rgba(229, 62, 62, 0.3);
+}
+
+.stop-generate-btn:hover {
+  transform: scale(1.05);
+  box-shadow: 0 4px 16px rgba(229, 62, 62, 0.4);
+}
+
+.stop-generate-btn:active {
+  transform: scale(0.98);
+}
+
+.stop-generate-btn svg {
+  flex-shrink: 0;
 }