feat:让用户看不懂的工具隐晦展示
This commit is contained in:
Roe-xin
@ -96,6 +96,27 @@ export function getAgentCardStyles(): string {
|
||||
padding: 8px;
|
||||
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': '查询知识摘要',
|
||||
'queryRules': '查询规则',
|
||||
'setModule': '设置模块',
|
||||
'addSignal': '添加信号',
|
||||
'addSignalExample': '添加信号示例',
|
||||
'addSignal': '正在分析信号定义',
|
||||
'addSignalExample': '正在处理信号示例',
|
||||
'validateKnowledgeGraph': '验证知识图谱',
|
||||
'querySignals': '查询信号',
|
||||
'addPlan': '添加计划',
|
||||
@ -147,7 +168,16 @@ export function getAgentCardScript(): string {
|
||||
const icon = step.status === 'completed' ? '✅' : step.status === 'error' ? '❌' : '🔄';
|
||||
const displayName = getAgentToolDisplayName(step.toolName);
|
||||
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('');
|
||||
|
||||
segmentDiv.innerHTML = \`
|
||||
|
||||
@ -373,6 +373,12 @@ export function getMessageAreaStyles(): string {
|
||||
margin: 4px 0;
|
||||
padding: 4px 0;
|
||||
}
|
||||
/* 低调显示的工具调用 - 移除边距和背景 */
|
||||
.segment-tool.low-profile {
|
||||
margin: 2px 0;
|
||||
padding: 0;
|
||||
background: none;
|
||||
}
|
||||
.tool-segment-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -532,6 +538,23 @@ export function getMessageAreaStyles(): string {
|
||||
.tool-segment-content.collapsed {
|
||||
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 {
|
||||
background: var(--vscode-textBlockQuote-background);
|
||||
border-radius: 6px;
|
||||
@ -689,8 +712,8 @@ export function getMessageAreaScript(): string {
|
||||
'queryKnowledgeSummary': '已查询知识摘要',
|
||||
'queryRules': '已查询规则',
|
||||
'setModule': '已设置模块',
|
||||
'addSignal': '已添加信号',
|
||||
'addSignalExample': '已添加信号示例',
|
||||
'addSignal': '信号分析完成',
|
||||
'addSignalExample': '信号示例处理完成',
|
||||
'validateKnowledgeGraph': '已验证知识图谱',
|
||||
'querySignals': '已查询信号',
|
||||
'addPlan': '已添加计划',
|
||||
@ -936,8 +959,30 @@ export function getMessageAreaScript(): string {
|
||||
// 清空容器并重新渲染所有段落
|
||||
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; // 用于跟踪工具段落的索引
|
||||
segments.forEach((segment, index) => {
|
||||
mergedSegments.forEach((segment, index) => {
|
||||
const segmentDiv = document.createElement('div');
|
||||
segmentDiv.className = 'message-segment segment-' + segment.type;
|
||||
|
||||
@ -949,8 +994,23 @@ export function getMessageAreaScript(): string {
|
||||
if (segment.toolName === 'spawnExplorer') {
|
||||
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 toolResult = segment.toolResult || '';
|
||||
const toolCount = segment.toolCount || 1;
|
||||
const countSuffix = toolCount > 1 ? \` x\${toolCount}\` : '';
|
||||
|
||||
// 检查工具结果是否过长(超过一行显示不下)
|
||||
const shouldCollapse = toolResult && toolResult.length > 60;
|
||||
@ -964,7 +1024,7 @@ export function getMessageAreaScript(): string {
|
||||
segmentDiv.innerHTML = \`
|
||||
<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)}
|
||||
<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>\` : ''}
|
||||
</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');
|
||||
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');
|
||||
segmentDiv.className = 'message-segment segment-' + segment.type;
|
||||
|
||||
@ -1174,8 +1256,23 @@ export function getMessageAreaScript(): string {
|
||||
if (segment.toolName === 'spawnExplorer') {
|
||||
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 toolResult = segment.toolResult || '';
|
||||
const toolCount = segment.toolCount || 1;
|
||||
const countSuffix = toolCount > 1 ? \` x\${toolCount}\` : '';
|
||||
|
||||
// 检查工具结果是否过长(超过一行显示不下)
|
||||
const shouldCollapse = toolResult && toolResult.length > 60;
|
||||
@ -1183,7 +1280,7 @@ export function getMessageAreaScript(): string {
|
||||
segmentDiv.innerHTML = \`
|
||||
<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)}
|
||||
<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>\` : ''}
|
||||
</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>\` : ''}
|
||||
|
||||
Reference in New Issue
Block a user