feat: add agent call indicator with highlighted agent names

This commit is contained in:
大森 2026-05-10 15:58:32 +08:00
parent 29f1e172b4
commit 9597db7fd8

View File

@ -312,6 +312,23 @@ const indexHTML = `<!DOCTYPE html>
font-style: italic; font-style: italic;
} }
.typing-indicator.active { display: block; } .typing-indicator.active { display: block; }
.agent-call-indicator {
display: none;
padding: 8px 16px;
color: #9ece6a;
font-size: 13px;
font-weight: 600;
background: #2b3a2b;
border-top: 1px solid #414868;
}
.agent-call-indicator.active { display: block; }
.agent-name-highlight {
color: #bb9af7;
font-weight: 700;
background: #2a1f3a;
padding: 2px 6px;
border-radius: 4px;
}
::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #414868; border-radius: 3px; } ::-webkit-scrollbar-thumb { background: #414868; border-radius: 3px; }
@ -327,6 +344,7 @@ const indexHTML = `<!DOCTYPE html>
<div class="left-panel"> <div class="left-panel">
<div class="chat-box" id="chatBox"></div> <div class="chat-box" id="chatBox"></div>
<div class="typing-indicator" id="typingIndicator">Processing...</div> <div class="typing-indicator" id="typingIndicator">Processing...</div>
<div class="agent-call-indicator" id="agentCallIndicator"></div>
<div class="input-box"> <div class="input-box">
<input type="text" id="messageInput" placeholder="Type a message and press Enter..." autocomplete="off"> <input type="text" id="messageInput" placeholder="Type a message and press Enter..." autocomplete="off">
<button id="sendBtn" onclick="sendMessage()">Send</button> <button id="sendBtn" onclick="sendMessage()">Send</button>
@ -360,6 +378,7 @@ const indexHTML = `<!DOCTYPE html>
const messageInput = document.getElementById('messageInput'); const messageInput = document.getElementById('messageInput');
const sendBtn = document.getElementById('sendBtn'); const sendBtn = document.getElementById('sendBtn');
const typingIndicator = document.getElementById('typingIndicator'); const typingIndicator = document.getElementById('typingIndicator');
const agentCallIndicator = document.getElementById('agentCallIndicator');
const statTools = document.getElementById('statTools'); const statTools = document.getElementById('statTools');
const statSkills = document.getElementById('statSkills'); const statSkills = document.getElementById('statSkills');
const statAgents = document.getElementById('statAgents'); const statAgents = document.getElementById('statAgents');
@ -424,6 +443,14 @@ const indexHTML = `<!DOCTYPE html>
console.log('SSE data received:', e.data.substring(0, 50) + '...'); console.log('SSE data received:', e.data.substring(0, 50) + '...');
if (currentAssistantDiv) { if (currentAssistantDiv) {
currentContent += e.data; currentContent += e.data;
const agentMatch = currentContent.match(/正在执行工具:\s*agent_call.*?agent[:"]\s*["']?([^"'\s,}]+)/);
if (agentMatch) {
const agentName = agentMatch[1];
agentCallIndicator.innerHTML = '<span class="agent-name-highlight">[' + agentName + ']</span> 正在执行...';
agentCallIndicator.classList.add('active');
} else if (currentContent.includes('工具执行完成') || currentContent.includes('agent_call')) {
agentCallIndicator.classList.remove('active');
}
const content = currentAssistantDiv.querySelector('.message-content'); const content = currentAssistantDiv.querySelector('.message-content');
content.innerHTML = renderMarkdown(currentContent); content.innerHTML = renderMarkdown(currentContent);
if (typeof hljs !== 'undefined') { if (typeof hljs !== 'undefined') {
@ -508,6 +535,7 @@ const indexHTML = `<!DOCTYPE html>
messageInput.disabled = false; messageInput.disabled = false;
sendBtn.disabled = false; sendBtn.disabled = false;
typingIndicator.classList.remove('active'); typingIndicator.classList.remove('active');
agentCallIndicator.classList.remove('active');
messageInput.focus(); messageInput.focus();
currentAssistantDiv = null; currentAssistantDiv = null;
currentContent = ''; currentContent = '';