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

feat: 对话区左侧显示Agent信息

Browse Source
This commit is contained in:
hubian
2026-04-14 19:14:31 +08:00
parent 4ac67b5816
commit d9ac2c78f6
1 changed files with 100 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
templates/index.html
View File

@@ -134,6 +134,23 @@
/* 工具调用记录显示 */
.tool-call-record { margin-top: 8px; padding: 8px 12px; background: #e8f5e9; border-radius: 8px; font-size: 12px; color: #10a37f; }
.tool-call-record i { margin-right: 4px; }
/* Agent信息侧边栏 */
.agent-info-sidebar { width: 200px; background: #f8f9fa; border-right: 1px solid #e0e0e0; padding: 16px; display: flex; flex-direction: column; }
.agent-info-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.agent-avatar { width: 48px; height: 48px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: white; font-size: 24px; }
.agent-name-area { flex: 1; }
.agent-name-area h3 { font-size: 16px; margin: 0; color: #333; }
.agent-name-area small { color: #999; font-size: 12px; }
.agent-info-section { margin-top: 16px; }
.agent-info-section h4 { font-size: 13px; color: #666; margin: 0 0 8px 0; font-weight: 500; }
.agent-info-section p { font-size: 12px; color: #333; line-height: 1.5; margin: 0; }
.agent-capabilities { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.capability-tag { padding: 4px 8px; background: #e8f5e9; border-radius: 6px; font-size: 11px; color: #10a37f; }
.capability-tag.disabled { background: #f5f5f5; color: #999; }
.agent-model-info { margin-top: 12px; padding: 8px; background: white; border-radius: 8px; border: 1px solid #e0e0e0; }
.agent-model-info label { font-size: 11px; color: #999; }
.agent-model-info span { font-size: 12px; color: #333; display: block; margin-top: 2px; }
.add-phrase-btn { padding: 6px 10px; background: #f0f0f0; border: 1px solid #ddd; border-radius: 6px; cursor: pointer; font-size: 12px; color: #666; white-space: nowrap; flex-shrink: 0; }
.add-phrase-btn:hover { background: #e8e8e8; }
.phrase-list-wrapper { flex: 1; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
@@ -191,8 +208,37 @@
</div>
</div>
<div class="messages-container" id="messagesContainer">
<div class="welcome"><h2>👋 开始对话</h2><p>选择Agent，开始聊天</p></div>
<!-- 对话区域：左侧Agent信息 + 右侧消息 -->
<div class="chat-area" style="display:flex;flex:1;overflow:hidden;">
<!-- Agent信息侧边栏 -->
<div class="agent-info-sidebar" id="agentInfoSidebar">
<div class="agent-info-header">
<div class="agent-avatar" id="agentAvatar">🤖</div>
<div class="agent-name-area">
<h3 id="agentDisplayName">加载中...</h3>
<small id="agentName">agent-name</small>
</div>
</div>
<div class="agent-info-section">
<h4>简介</h4>
<p id="agentDescription">-</p>
</div>
<div class="agent-info-section">
<h4>能力</h4>
<div class="agent-capabilities" id="agentCapabilities">
<!-- 动态渲染 -->
</div>
</div>
<div class="agent-model-info">
<label>模型</label>
<span id="agentModelInfo">-</span>
</div>
</div>
<!-- 消息容器 -->
<div class="messages-container" id="messagesContainer" style="flex:1;">
<div class="welcome"><h2>👋 开始对话</h2><p>选择Agent，开始聊天</p></div>
</div>
</div>
<div class="input-container">
@@ -293,8 +339,8 @@
const res = await fetch('/api/v2/providers');
const data = await res.json();
providers = data.providers || [];
// 加载后检查工具支持（如果agents已加载）
if (agents.length > 0) showToolWarning();
// 加载后更新Agent信息侧边栏（如果agents已加载）
if (agents.length > 0) renderAgentInfoSidebar();
} catch (e) { console.error('加载Provider失败:', e); }
}
@@ -323,9 +369,58 @@
const defaultAgent = agents.find(a => a.is_default) || agents[0];
if (defaultAgent) currentAgentId = defaultAgent.id;
renderAgentSelect();
renderAgentInfoSidebar(); // 渲染Agent信息侧边栏
} catch (e) { console.error('加载Agent失败:', e); }
}
// 渲染Agent信息侧边栏
function renderAgentInfoSidebar() {
const agent = agents.find(a => a.id === currentAgentId);
if (!agent) return;
// 更新名称
document.getElementById('agentDisplayName').textContent = agent.display_name || agent.name;
document.getElementById('agentName').textContent = agent.name;
// 更新头像（用emoji或首字母）
const avatar = document.getElementById('agentAvatar');
avatar.textContent = agent.display_name?.charAt(0) || agent.name?.charAt(0) || '🤖';
// 更新描述
document.getElementById('agentDescription').textContent = agent.description || '暂无描述';
// 更新能力标签
const capabilitiesHtml = [];
// 检查思考能力
const provider = providers.find(p => p.id === agent.llm_provider_id);
if (provider) {
if (provider.supports_thinking) {
capabilitiesHtml.push('<span class="capability-tag"><i class="ri-lightbulb-line"></i> 思考</span>');
}
if (provider.supports_vision) {
capabilitiesHtml.push('<span class="capability-tag"><i class="ri-image-line"></i> 视觉</span>');
}
if (provider.supports_function_calling) {
capabilitiesHtml.push('<span class="capability-tag"><i class="ri-tools-line"></i> 工具调用</span>');
} else {
capabilitiesHtml.push('<span class="capability-tag disabled"><i class="ri-tools-line"></i> 工具(手动)</span>');
}
// 更新模型信息
const model = agent.model_override || provider.default_model || 'auto';
document.getElementById('agentModelInfo').textContent = model;
}
// 检查工具配置
const agentTools = agent.tools || [];
if (agentTools.includes('search')) {
capabilitiesHtml.push('<span class="capability-tag"><i class="ri-search-line"></i> 搜索</span>');
}
document.getElementById('agentCapabilities').innerHTML = capabilitiesHtml.join('') || '<span class="capability-tag disabled">基础对话</span>';
}
function renderAgentSelect() {
const select = document.getElementById('agentSelect');
select.innerHTML = agents.filter(a => a.is_active).map(a =>
@@ -345,6 +440,7 @@
if (ws?.readyState === WebSocket.OPEN) ws.send(JSON.stringify({ action: 'switch_agent', agent_id: currentAgentId }));
await createNewConversation();
showAgentSwitchNotice();
renderAgentInfoSidebar(); // 更新侧边栏信息
}
}