feat: add agent call indicator with highlighted agent names
This commit is contained in:
parent
29f1e172b4
commit
9597db7fd8
@ -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 = '';
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user