feat:让用户看不懂的工具隐晦展示
This commit is contained in:
@ -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 = \`
|
||||||
|
|||||||
@ -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>\` : ''}
|
||||||
|
|||||||
Reference in New Issue
Block a user