Compare commits

...

8 Commits

3 changed files with 305 additions and 55 deletions

View File

@@ -5,7 +5,10 @@ const CONFIG = {
apiUrl: 'https://open.bigmodel.cn/api/paas/v4/chat/completions',
apiKey: '2259e33a1357460abe17919aaf81e73d.K44a8LPQTmFM5PKm',
model: 'glm-4.5-air',
maxTokens: 2048
maxTokens: 2048,
// Tavily Search API
tavilyApiUrl: 'https://api.tavily.com/search',
tavilyApiKey: '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'
};
// 数据结构
@@ -74,9 +77,14 @@ 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">
@@ -128,22 +136,6 @@ function showConversationList() {
<div class="search-results" id="searchResults"></div>
</div>
<!-- 底部工具栏 -->
<div class="list-footer">
<button class="footer-btn search-toggle-btn" id="searchToggleBtn">
<svg viewBox="0 0 24 24" width="18" height="18"><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>
`;
<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>
`;
@@ -595,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');
}
});
}
@@ -607,11 +594,6 @@ function openConversation(id) {
searchBtn.addEventListener('click', () => {
enableSearch = !enableSearch;
searchBtn.classList.toggle('active', enableSearch);
// 如果开启联网搜索,关闭深度思考
if (enableSearch && enableThinking) {
enableThinking = false;
thinkingBtn.classList.remove('active');
}
});
}
@@ -771,12 +753,20 @@ async function streamGenerate(userMsgIndex) {
sendBtn.disabled = true;
const aiMessageIndex = currentConversation.messages.length;
const userMessage = currentConversation.messages[userMsgIndex];
// 只有开启深度思考时才添加 thinking 字段
// 如果开启联网搜索,先执行搜索
let searchResults = null;
if (enableSearch && userMessage.role === 'user') {
searchResults = await performSearch(userMessage.content);
}
// 只有开启深度思考时才添加 thinking 字段,开启搜索时添加 search_results 字段
currentConversation.messages.push({
role: 'assistant',
content: '',
...(enableThinking ? { thinking: '' } : {})
...(enableThinking ? { thinking: '' } : {}),
...(searchResults ? { search_results: searchResults } : {})
});
renderMessages();
@@ -792,15 +782,30 @@ async function streamGenerate(userMsgIndex) {
}
contentEl.innerHTML = '<span class="streaming-cursor">▌</span>';
// 显示停止生成按钮
showStopGenerateBtn();
try {
// 构建消息数组
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: currentConversation.messages.slice(0, aiMessageIndex).map(m => ({
role: m.role,
content: m.content
})),
messages: messagesToSend,
max_tokens: CONFIG.maxTokens,
stream: true,
thinking: {
@@ -825,8 +830,30 @@ async function streamGenerate(userMsgIndex) {
const decoder = new TextDecoder();
let buffer = '';
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;
@@ -851,12 +878,17 @@ async function streamGenerate(userMsgIndex) {
if (thinkingEl) {
thinkingEl.innerHTML = renderMarkdown(currentConversation.messages[aiMessageIndex].thinking) + '<span class="streaming-cursor">▌</span>';
}
// 确保思考块展开
const thinkingBlock = lastMessageEl.querySelector('.thinking-block');
if (thinkingBlock && !thinkingBlock.classList.contains('expanded')) {
thinkingBlock.classList.add('expanded');
}
scrollToBottom();
}
// 处理正式回复内容
if (delta.content) {
// 如果开启深度思考且开始输出正式内容,折叠思考块
// 如果开启深度思考且开始输出正式内容,说明思考完成,立即折叠思考块
if (enableThinking && !thinkingOutputStarted && currentConversation.messages[aiMessageIndex].thinking) {
thinkingOutputStarted = true;
// 折叠思考内容
@@ -888,18 +920,85 @@ async function streamGenerate(userMsgIndex) {
} finally {
isLoading = false;
sendBtn.disabled = false;
hideStopGenerateBtn();
currentConversation.updatedAt = Date.now();
saveConversations();
renderMessages();
// 自动总结标题第一次对话和每隔5次对话
const totalMessages = currentConversation.messages.length;
if (totalMessages === 1 || totalMessages % 5 === 0) {
// 第一次对话(用户+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;
@@ -1067,15 +1166,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>`;
}
@@ -1102,6 +1227,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}
@@ -1129,6 +1255,11 @@ function toggleThinking(block) {
block.classList.toggle('expanded');
}
// 折叠/展开搜索结果
function toggleSearchResults(block) {
block.classList.toggle('expanded');
}
// ==================== 工具函数 ====================
// 渲染 Markdown

View File

@@ -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.5.0">
<link rel="stylesheet" href="style.css?v=2.7.4">
<link rel="manifest" href="manifest.json">
</head>
<body>
<div id="app"></div>
<script src="marked.min.js?v=2.5.0"></script>
<script src="app.js?v=2.5.0"></script>
<script src="marked.min.js?v=2.7.4"></script>
<script src="app.js?v=2.7.4"></script>
</body>
</html>

View File

@@ -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;
@@ -892,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;
@@ -1050,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;
}