feat:让用户看不懂的工具隐晦展示

This commit is contained in:
Roe-xin
2026-01-04 16:29:13 +08:00
parent d8cd86361e
commit 8dc34ee435
2 changed files with 136 additions and 9 deletions

View File

@ -96,6 +96,27 @@ export function getAgentCardStyles(): string {
padding: 8px; padding: 8px;
text-align: center; text-align: center;
} }
/* 低调显示的工具调用样式 */
.agent-step.low-profile {
opacity: 0.5;
font-size: 10px;
padding: 2px 6px;
background: transparent;
margin-bottom: 2px;
}
.agent-step.low-profile .step-icon {
opacity: 0.4;
font-size: 10px;
}
.agent-step.low-profile .step-name {
font-weight: 300;
color: var(--vscode-descriptionForeground);
opacity: 0.7;
}
.agent-step.low-profile .step-result {
opacity: 0.6;
font-size: 9px;
}
`; `;
} }
@ -119,8 +140,8 @@ export function getAgentCardScript(): string {
'queryKnowledgeSummary': '查询知识摘要', 'queryKnowledgeSummary': '查询知识摘要',
'queryRules': '查询规则', 'queryRules': '查询规则',
'setModule': '设置模块', 'setModule': '设置模块',
'addSignal': '添加信号', 'addSignal': '正在分析信号定义',
'addSignalExample': '添加信号示例', 'addSignalExample': '正在处理信号示例',
'validateKnowledgeGraph': '验证知识图谱', 'validateKnowledgeGraph': '验证知识图谱',
'querySignals': '查询信号', 'querySignals': '查询信号',
'addPlan': '添加计划', 'addPlan': '添加计划',
@ -147,7 +168,16 @@ export function getAgentCardScript(): string {
const icon = step.status === 'completed' ? '✅' : step.status === 'error' ? '❌' : '🔄'; const icon = step.status === 'completed' ? '✅' : step.status === 'error' ? '❌' : '🔄';
const displayName = getAgentToolDisplayName(step.toolName); const displayName = getAgentToolDisplayName(step.toolName);
const result = step.toolResult ? \`: \${step.toolResult.substring(0, 50)}\${step.toolResult.length > 50 ? '...' : ''}\` : ''; const result = step.toolResult ? \`: \${step.toolResult.substring(0, 50)}\${step.toolResult.length > 50 ? '...' : ''}\` : '';
return \`<div class="agent-step"><span class="step-icon">\${icon}</span><span class="step-name">\${displayName}</span><span class="step-result">\${result}</span></div>\`; // 为技术性工具调用添加低调样式(用户看不懂的)
const lowProfileTools = [
'knowledge_save', 'knowledge_load',
'queryKnowledgeSummary', 'queryRules', 'querySignals',
'setModule', 'addSignal', 'addSignalExample',
'validateKnowledgeGraph', 'addPlan', 'addEdge',
'showPlan', 'spawnExplorer'
];
const stepClass = lowProfileTools.includes(step.toolName) ? 'agent-step low-profile' : 'agent-step';
return \`<div class="\${stepClass}"><span class="step-icon">\${icon}</span><span class="step-name">\${displayName}</span><span class="step-result">\${result}</span></div>\`;
}).join(''); }).join('');
segmentDiv.innerHTML = \` segmentDiv.innerHTML = \`

View File

@ -373,6 +373,12 @@ export function getMessageAreaStyles(): string {
margin: 4px 0; margin: 4px 0;
padding: 4px 0; padding: 4px 0;
} }
/* 低调显示的工具调用 - 移除边距和背景 */
.segment-tool.low-profile {
margin: 2px 0;
padding: 0;
background: none;
}
.tool-segment-header { .tool-segment-header {
display: flex; display: flex;
align-items: center; align-items: center;
@ -532,6 +538,23 @@ export function getMessageAreaStyles(): string {
.tool-segment-content.collapsed { .tool-segment-content.collapsed {
max-height: 0; max-height: 0;
} }
/* 低调显示的工具调用样式 */
.segment-tool.low-profile .tool-segment-header {
opacity: 0.65;
font-size: 11px;
}
.segment-tool.low-profile .tool-segment-icon {
opacity: 0.55;
font-size: 11px;
}
.segment-tool.low-profile .tool-segment-name {
font-weight: 300;
opacity: 0.8;
}
.segment-tool.low-profile .tool-segment-result {
opacity: 0.7;
font-size: 10px;
}
.segment-question { .segment-question {
background: var(--vscode-textBlockQuote-background); background: var(--vscode-textBlockQuote-background);
border-radius: 6px; border-radius: 6px;
@ -689,8 +712,8 @@ export function getMessageAreaScript(): string {
'queryKnowledgeSummary': '已查询知识摘要', 'queryKnowledgeSummary': '已查询知识摘要',
'queryRules': '已查询规则', 'queryRules': '已查询规则',
'setModule': '已设置模块', 'setModule': '已设置模块',
'addSignal': '已添加信号', 'addSignal': '信号分析完成',
'addSignalExample': '已添加信号示例', 'addSignalExample': '信号示例处理完成',
'validateKnowledgeGraph': '已验证知识图谱', 'validateKnowledgeGraph': '已验证知识图谱',
'querySignals': '已查询信号', 'querySignals': '已查询信号',
'addPlan': '已添加计划', 'addPlan': '已添加计划',
@ -936,8 +959,30 @@ export function getMessageAreaScript(): string {
// 清空容器并重新渲染所有段落 // 清空容器并重新渲染所有段落
currentSegmentedMessage.innerHTML = ''; currentSegmentedMessage.innerHTML = '';
// 合并连续相同的工具调用
const mergedSegments = [];
let i = 0;
while (i < segments.length) {
const segment = segments[i];
if (segment.type === 'tool') {
// 统计连续相同的工具调用
let count = 1;
while (i + count < segments.length &&
segments[i + count].type === 'tool' &&
segments[i + count].toolName === segment.toolName) {
count++;
}
// 添加合并后的段落(带计数)
mergedSegments.push({ ...segment, toolCount: count });
i += count;
} else {
mergedSegments.push(segment);
i++;
}
}
let toolIndex = 0; // 用于跟踪工具段落的索引 let toolIndex = 0; // 用于跟踪工具段落的索引
segments.forEach((segment, index) => { mergedSegments.forEach((segment, index) => {
const segmentDiv = document.createElement('div'); const segmentDiv = document.createElement('div');
segmentDiv.className = 'message-segment segment-' + segment.type; segmentDiv.className = 'message-segment segment-' + segment.type;
@ -949,8 +994,23 @@ export function getMessageAreaScript(): string {
if (segment.toolName === 'spawnExplorer') { if (segment.toolName === 'spawnExplorer') {
return; return;
} }
// 为技术性工具调用添加低调样式
const lowProfileTools = [
'knowledge_save', 'knowledge_load',
'queryKnowledgeSummary', 'queryRules', 'querySignals',
'setModule', 'addSignal', 'addSignalExample',
'validateKnowledgeGraph', 'addPlan', 'addEdge',
'showPlan', 'addRule', 'updateNode', 'addStateTransition'
];
if (lowProfileTools.includes(segment.toolName)) {
segmentDiv.className += ' low-profile';
}
const statusIcon = segment.toolStatus === 'error' ? '❌' : '🔧'; const statusIcon = segment.toolStatus === 'error' ? '❌' : '🔧';
const toolResult = segment.toolResult || ''; const toolResult = segment.toolResult || '';
const toolCount = segment.toolCount || 1;
const countSuffix = toolCount > 1 ? \` x\${toolCount}\` : '';
// 检查工具结果是否过长(超过一行显示不下) // 检查工具结果是否过长(超过一行显示不下)
const shouldCollapse = toolResult && toolResult.length > 60; const shouldCollapse = toolResult && toolResult.length > 60;
@ -964,7 +1024,7 @@ export function getMessageAreaScript(): string {
segmentDiv.innerHTML = \` segmentDiv.innerHTML = \`
<div class="tool-segment-header\${isCollapsed ? ' collapsed' : ''}" data-collapsible="\${shouldCollapse}" data-tool-index="\${currentToolIndex}"> <div class="tool-segment-header\${isCollapsed ? ' collapsed' : ''}" data-collapsible="\${shouldCollapse}" data-tool-index="\${currentToolIndex}">
\${shouldCollapse ? \`<span class="tool-collapse-icon">\${collapseIconSvg}</span>\` : getToolIcon(segment.toolName)} \${shouldCollapse ? \`<span class="tool-collapse-icon">\${collapseIconSvg}</span>\` : getToolIcon(segment.toolName)}
<span class="tool-segment-name">\${getToolDisplayName(segment.toolName) || '工具'}</span> <span class="tool-segment-name">\${getToolDisplayName(segment.toolName) || '工具'}\${countSuffix}</span>
\${toolResult && !shouldCollapse ? \`<span class="tool-segment-result">\${toolResult}</span>\` : ''} \${toolResult && !shouldCollapse ? \`<span class="tool-segment-result">\${toolResult}</span>\` : ''}
</div> </div>
\${shouldCollapse ? \`<div class="tool-segment-content\${isCollapsed ? ' collapsed' : ''}" style="max-height:\${isCollapsed ? '0' : 'none'}"><span class="tool-segment-result" style="display:block;white-space:pre-wrap;max-width:100%;margin-top:8px;margin-left:18px;">\${toolResult}</span></div>\` : ''} \${shouldCollapse ? \`<div class="tool-segment-content\${isCollapsed ? ' collapsed' : ''}" style="max-height:\${isCollapsed ? '0' : 'none'}"><span class="tool-segment-result" style="display:block;white-space:pre-wrap;max-width:100%;margin-top:8px;margin-left:18px;">\${toolResult}</span></div>\` : ''}
@ -1162,7 +1222,29 @@ export function getMessageAreaScript(): string {
const container = document.createElement('div'); const container = document.createElement('div');
container.className = 'message bot-message segmented-message'; container.className = 'message bot-message segmented-message';
segments.forEach((segment, index) => { // 合并连续相同的工具调用
const mergedSegments = [];
let i = 0;
while (i < segments.length) {
const segment = segments[i];
if (segment.type === 'tool') {
// 统计连续相同的工具调用
let count = 1;
while (i + count < segments.length &&
segments[i + count].type === 'tool' &&
segments[i + count].toolName === segment.toolName) {
count++;
}
// 添加合并后的段落(带计数)
mergedSegments.push({ ...segment, toolCount: count });
i += count;
} else {
mergedSegments.push(segment);
i++;
}
}
mergedSegments.forEach((segment, index) => {
const segmentDiv = document.createElement('div'); const segmentDiv = document.createElement('div');
segmentDiv.className = 'message-segment segment-' + segment.type; segmentDiv.className = 'message-segment segment-' + segment.type;
@ -1174,8 +1256,23 @@ export function getMessageAreaScript(): string {
if (segment.toolName === 'spawnExplorer') { if (segment.toolName === 'spawnExplorer') {
return; return;
} }
// 为技术性工具调用添加低调样式
const lowProfileTools = [
'knowledge_save', 'knowledge_load',
'queryKnowledgeSummary', 'queryRules', 'querySignals',
'setModule', 'addSignal', 'addSignalExample',
'validateKnowledgeGraph', 'addPlan', 'addEdge',
'showPlan', 'addRule', 'updateNode', 'addStateTransition'
];
if (lowProfileTools.includes(segment.toolName)) {
segmentDiv.className += ' low-profile';
}
const statusIcon = segment.toolStatus === 'error' ? '❌' : '🔧'; const statusIcon = segment.toolStatus === 'error' ? '❌' : '🔧';
const toolResult = segment.toolResult || ''; const toolResult = segment.toolResult || '';
const toolCount = segment.toolCount || 1;
const countSuffix = toolCount > 1 ? \` x\${toolCount}\` : '';
// 检查工具结果是否过长(超过一行显示不下) // 检查工具结果是否过长(超过一行显示不下)
const shouldCollapse = toolResult && toolResult.length > 60; const shouldCollapse = toolResult && toolResult.length > 60;
@ -1183,7 +1280,7 @@ export function getMessageAreaScript(): string {
segmentDiv.innerHTML = \` segmentDiv.innerHTML = \`
<div class="tool-segment-header\${shouldCollapse ? ' collapsed' : ''}" data-collapsible="\${shouldCollapse}"> <div class="tool-segment-header\${shouldCollapse ? ' collapsed' : ''}" data-collapsible="\${shouldCollapse}">
\${shouldCollapse ? \`<span class="icon-collapsed" style="display:block;width:16px;height:16px;flex-shrink:0;">\${collapseIconSvg}</span><span class="icon-expanded" style="display:none;width:16px;height:16px;flex-shrink:0;">\${collapseIconSvg}</span>\` : getToolIcon(segment.toolName)} \${shouldCollapse ? \`<span class="icon-collapsed" style="display:block;width:16px;height:16px;flex-shrink:0;">\${collapseIconSvg}</span><span class="icon-expanded" style="display:none;width:16px;height:16px;flex-shrink:0;">\${collapseIconSvg}</span>\` : getToolIcon(segment.toolName)}
<span class="tool-segment-name">\${getToolDisplayName(segment.toolName) || '工具'}</span> <span class="tool-segment-name">\${getToolDisplayName(segment.toolName) || '工具'}\${countSuffix}</span>
\${toolResult && !shouldCollapse ? \`<span class="tool-segment-result">\${toolResult}</span>\` : ''} \${toolResult && !shouldCollapse ? \`<span class="tool-segment-result">\${toolResult}</span>\` : ''}
</div> </div>
\${shouldCollapse ? \`<div class="tool-segment-content collapsed"><span class="tool-segment-result" style="display:block;white-space:pre-wrap;max-width:100%;margin-top:8px;margin-left:18px;">\${toolResult}</span></div>\` : ''} \${shouldCollapse ? \`<div class="tool-segment-content collapsed"><span class="tool-segment-result" style="display:block;white-space:pre-wrap;max-width:100%;margin-top:8px;margin-left:18px;">\${toolResult}</span></div>\` : ''}