coder/ai-chat-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 添加浏览器favicon，优化消息操作按钮（复制+重新生成）

Browse Source
This commit is contained in:
hubian
2026-04-13 10:29:45 +08:00
parent 87f9f4a7d8
commit b1feaee976
1 changed files with 56 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
templates/index.html
View File

@@ -4,6 +4,8 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI 对话系统 v2.0</title>
<!-- Favicon -->
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🤖</text></svg>">
<link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/github-markdown-css@5.2.0/github-markdown-light.min.css" rel="stylesheet">
<style>
@@ -49,11 +51,14 @@
/* 用户消息样式 */
.user-message-text { background: #f0f0f0; padding: 12px 16px; border-radius: 12px; font-size: 15px; }
/* 复制按钮 */
.copy-btn { position: absolute; top: 8px; right: 8px; padding: 4px 8px; background: rgba(0,0,0,0.05); border: 1px solid #ddd; border-radius: 4px; cursor: pointer; font-size: 12px; color: #666; opacity: 0; transition: opacity 0.2s; }
.message-content:hover .copy-btn { opacity: 1; }
.copy-btn:hover { background: rgba(0,0,0,0.1); }
.copy-btn.copied { color: #10a37f; border-color: #10a37f; }
/* 消息操作按钮 */
.message-actions { display: flex; gap: 8px; margin-top: 8px; opacity: 0; transition: opacity 0.2s; }
.message-content:hover + .message-actions,
.message-actions:hover { opacity: 1; }
.action-btn { padding: 6px 12px; background: #f5f5f5; border: 1px solid #e0e0e0; border-radius: 6px; cursor: pointer; font-size: 12px; color: #666; display: flex; align-items: center; gap: 4px; transition: all 0.2s; }
.action-btn:hover { background: #e8e8e8; border-color: #ccc; }
.action-btn.copied { color: #10a37f; border-color: #10a37f; background: #e8f5e9; }
.action-btn.regenerate:hover { color: #667eea; border-color: #667eea; }
/* 思考内容样式 */
.thinking-block { background: #f8f9fa; border-left: 3px solid #667eea; padding: 12px 16px; margin: 8px 0 16px 0; font-size: 14px; color: #666; border-radius: 4px; position: relative; }
@@ -167,6 +172,7 @@
let currentAgentId = null;
let agents = [];
let quickPhrases = [];
let lastUserMessage = null; // 存储最后一条用户消息，用于重新生成
document.addEventListener('DOMContentLoaded', () => {
loadAgents();
@@ -234,7 +240,10 @@
case 'new_conversation': currentConversationId = data.conversation_id; loadConversations(); clearMessages(); break;
case 'agent_switched': currentAgentId = data.agent_id; break;
case 'stream_end': document.getElementById('sendBtn').disabled = false; break;
case 'user_message': appendMessage('user', data.message.content); break;
case 'user_message':
lastUserMessage = data.message.content; // 存储最后一条用户消息
appendMessage('user', data.message.content);
break;
case 'assistant_message': appendMessage('assistant', data.message.content, data.message.thinking_content, data.message.agent_name); document.getElementById('sendBtn').disabled = false; break;
case 'error': showError(data.message); document.getElementById('sendBtn').disabled = false; break;
}
@@ -269,9 +278,15 @@
} else {
html += `<div class="user-message-text">${escapeHtml(content)}</div>`;
}
// 复制按钮 - 使用隐藏input存储原始内容
html += `</div>`;
// 操作按钮 - 使用隐藏input存储原始内容
html += `<input type="hidden" class="copy-source" value="${content.replace(/"/g, '&quot;')}">`;
html += `<button class="copy-btn" onclick="copyMessage(this)"><i class="ri-file-copy-line"></i> 复制</button>`;
html += `<div class="message-actions">`;
html += `<button class="action-btn" onclick="copyMessage(this)"><i class="ri-file-copy-line"></i> 复制</button>`;
if (role === 'assistant') {
html += `<button class="action-btn regenerate" onclick="regenerateMessage()"><i class="ri-refresh-line"></i> 重新生成</button>`;
}
html += `</div>`;
// Agent信息
@@ -300,38 +315,47 @@
function copyMessage(btn) {
// 从隐藏input获取原始内容
const hiddenInput = btn.parentElement.querySelector('.copy-source');
const hiddenInput = btn.closest('.message-body').querySelector('.copy-source');
if (!hiddenInput) {
console.error('找不到复制源');
return;
}
const text = hiddenInput.value;
// 创建临时textarea复制
const textarea = document.createElement('textarea');
textarea.value = text;
textarea.style.position = 'fixed';
textarea.style.left = '-9999px';
document.body.appendChild(textarea);
textarea.select();
try {
const success = document.execCommand('copy');
if (success) {
btn.innerHTML = '<i class="ri-check-line"></i> 已复制';
btn.classList.add('copied');
setTimeout(() => {
btn.innerHTML = '<i class="ri-file-copy-line"></i> 复制';
btn.classList.remove('copied');
}, 2000);
} else {
btn.innerHTML = '<i class="ri-error-line"></i> 失败';
}
} catch (err) {
navigator.clipboard.writeText(text).then(() => {
btn.innerHTML = '<i class="ri-check-line"></i> 已复制';
btn.classList.add('copied');
setTimeout(() => {
btn.innerHTML = '<i class="ri-file-copy-line"></i> 复制';
btn.classList.remove('copied');
}, 2000);
}).catch(err => {
console.error('复制失败:', err);
btn.innerHTML = '<i class="ri-error-line"></i> 失败';
});
}
function regenerateMessage() {
if (!lastUserMessage) {
alert('没有可重新生成的消息');
return;
}
// 移除最后一条助手消息
const container = document.getElementById('messagesContainer');
const messages = container.querySelectorAll('.message.assistant');
if (messages.length > 0) {
messages[messages.length - 1].remove();
}
// 重新发送最后一条用户消息
document.getElementById('sendBtn').disabled = true;
if (ws?.readyState === WebSocket.OPEN) {
ws.send(JSON.stringify({
action: 'chat',
message: lastUserMessage,
conversation_id: currentConversationId,
agent_id: currentAgentId
}));
}
document.body.removeChild(textarea);
}
function escapeHtml(text) {