Compare commits
8 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 6349cc70ae | |||
| c8909595e4 | |||
| 2e5fcca49e | |||
| 05e900c5af | |||
| 7977057be5 | |||
| 44cca59ec6 | |||
| 0dfa76dad6 | |||
| 5a6c0c41b3 |
522
www/app.js
522
www/app.js
@@ -5,7 +5,6 @@ const CONFIG = {
|
||||
apiUrl: 'https://open.bigmodel.cn/api/paas/v4/chat/completions',
|
||||
apiKey: '2259e33a1357460abe17919aaf81e73d.K44a8LPQTmFM5PKm',
|
||||
model: 'glm-4.5-air',
|
||||
thinkingModel: 'glm-4-flash-thinking', // 思考模型
|
||||
maxTokens: 2048
|
||||
};
|
||||
|
||||
@@ -84,18 +83,58 @@ function showConversationList() {
|
||||
<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 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>
|
||||
`;
|
||||
|
||||
@@ -107,22 +146,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 +510,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">
|
||||
@@ -265,6 +605,32 @@ function openConversation(id) {
|
||||
});
|
||||
}
|
||||
|
||||
// 绑定置顶置底按钮事件
|
||||
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'
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 绑定输入事件
|
||||
userInput.addEventListener('keydown', handleKeyDown);
|
||||
userInput.addEventListener('input', (e) => autoResize(e.target));
|
||||
@@ -395,10 +761,12 @@ async function streamGenerate(userMsgIndex) {
|
||||
sendBtn.disabled = true;
|
||||
|
||||
const aiMessageIndex = currentConversation.messages.length;
|
||||
|
||||
// 只有开启深度思考时才添加 thinking 字段
|
||||
currentConversation.messages.push({
|
||||
role: 'assistant',
|
||||
content: '',
|
||||
thinking: '' // 思考内容
|
||||
...(enableThinking ? { thinking: '' } : {})
|
||||
});
|
||||
renderMessages();
|
||||
|
||||
@@ -406,12 +774,29 @@ 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>';
|
||||
|
||||
try {
|
||||
// 根据开关选择模型
|
||||
const model = enableThinking ? CONFIG.thinkingModel : CONFIG.model;
|
||||
// 构建请求体 - 统一使用 glm-4.5-air,通过 thinking 参数控制
|
||||
const requestBody = {
|
||||
model: CONFIG.model,
|
||||
messages: currentConversation.messages.slice(0, aiMessageIndex).map(m => ({
|
||||
role: m.role,
|
||||
content: m.content
|
||||
})),
|
||||
max_tokens: CONFIG.maxTokens,
|
||||
stream: true,
|
||||
thinking: {
|
||||
type: enableThinking ? 'enabled' : 'disabled'
|
||||
}
|
||||
};
|
||||
|
||||
const response = await fetch(CONFIG.apiUrl, {
|
||||
method: 'POST',
|
||||
@@ -419,15 +804,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,7 +814,7 @@ async function streamGenerate(userMsgIndex) {
|
||||
const reader = response.body.getReader();
|
||||
const decoder = new TextDecoder();
|
||||
let buffer = '';
|
||||
let thinkingComplete = false; // 思考是否完成
|
||||
let thinkingOutputStarted = false; // 正式内容是否开始输出
|
||||
|
||||
while (true) {
|
||||
const { done, value } = await reader.read();
|
||||
@@ -457,24 +834,21 @@ 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');
|
||||
}
|
||||
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 +866,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);
|
||||
@@ -507,6 +881,58 @@ async function streamGenerate(userMsgIndex) {
|
||||
currentConversation.updatedAt = Date.now();
|
||||
saveConversations();
|
||||
renderMessages();
|
||||
|
||||
// 自动总结标题:第一次对话和每隔5次对话
|
||||
const totalMessages = currentConversation.messages.length;
|
||||
if (totalMessages === 1 || totalMessages % 5 === 0) {
|
||||
await generateConversationTitle();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 生成对话标题
|
||||
async function generateConversationTitle() {
|
||||
if (!currentConversation) return;
|
||||
|
||||
// 构建对话摘要
|
||||
const conversationText = currentConversation.messages.map(m =>
|
||||
`${m.role === 'user' ? '用户' : 'AI'}: ${m.content.slice(0, 200)}`
|
||||
).join('\n');
|
||||
|
||||
const titlePrompt = `请用不超过10个字总结以下对话的主题,只输出标题,不要其他内容:
|
||||
${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: 50
|
||||
})
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
const newTitle = data.choices?.[0]?.message?.content?.trim();
|
||||
if (newTitle && newTitle.length > 0 && newTitle.length <= 15) {
|
||||
currentConversation.title = newTitle;
|
||||
currentConversation.updatedAt = Date.now();
|
||||
saveConversations();
|
||||
|
||||
// 更新页面标题显示
|
||||
const titleEl = document.querySelector('.header h1');
|
||||
if (titleEl) {
|
||||
titleEl.textContent = newTitle;
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('生成标题失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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.0">
|
||||
<link rel="stylesheet" href="style.css?v=2.5.0">
|
||||
<link rel="manifest" href="manifest.json">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script src="marked.min.js?v=2.2.0"></script>
|
||||
<script src="app.js?v=2.2.0"></script>
|
||||
<script src="marked.min.js?v=2.5.0"></script>
|
||||
<script src="app.js?v=2.5.0"></script>
|
||||
</body>
|
||||
</html>
|
||||
242
www/style.css
242
www/style.css
@@ -152,7 +152,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 +160,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 +177,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 +775,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 +822,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;
|
||||
|
||||
Reference in New Issue
Block a user