feat: 为所有工具添加图标显示
- 新增多个工具图标定义（文件读取、删除、仿真、波形分析等） - 添加 getToolIcon 函数统一管理工具图标映射 - 优化工具显示逻辑，所有工具现在都显示对应图标 - 新增 addStateTransition 工具的图标和名称映射 - 添加所有新图标的 CSS 样式
This commit is contained in:
Roe-xin
@ -13,9 +13,16 @@
|
||||
import {
|
||||
collapseIconSvg,
|
||||
fileWriteIconSvg,
|
||||
fileReadIconSvg,
|
||||
fileDeleteIconSvg,
|
||||
syntaxCheckIconSvg,
|
||||
SearchCode,
|
||||
agentIconSvg,
|
||||
saveKnowledgeIconSvg,
|
||||
simulationIconSvg,
|
||||
waveformIconSvg,
|
||||
knowledgeLoadIconSvg,
|
||||
stateTransitionIconSvg,
|
||||
} from "../constants/toolIcons";
|
||||
import {
|
||||
getWaveformPreviewContent,
|
||||
@ -419,6 +426,28 @@ export function getMessageAreaStyles(): string {
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
.tool-file-read-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
flex-shrink: 0;
|
||||
margin-right: 6px;
|
||||
}
|
||||
.tool-file-read-icon svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
.tool-file-delete-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
flex-shrink: 0;
|
||||
margin-right: 6px;
|
||||
}
|
||||
.tool-file-delete-icon svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
.tool-syntax-check-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
@ -441,6 +470,61 @@ export function getMessageAreaStyles(): string {
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
.tool-save-knowledge-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
flex-shrink: 0;
|
||||
margin-right: 6px;
|
||||
}
|
||||
.tool-save-knowledge-icon svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
.tool-simulation-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
flex-shrink: 0;
|
||||
margin-right: 6px;
|
||||
}
|
||||
.tool-simulation-icon svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
.tool-waveform-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
flex-shrink: 0;
|
||||
margin-right: 6px;
|
||||
}
|
||||
.tool-waveform-icon svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
.tool-knowledge-load-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
flex-shrink: 0;
|
||||
margin-right: 6px;
|
||||
}
|
||||
.tool-knowledge-load-icon svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
.tool-state-transition-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
flex-shrink: 0;
|
||||
margin-right: 6px;
|
||||
}
|
||||
.tool-state-transition-icon svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
.tool-segment-content {
|
||||
overflow: hidden;
|
||||
transition: max-height 0.3s ease;
|
||||
@ -547,13 +631,49 @@ export function getMessageAreaScript(): string {
|
||||
// 工具图标定义
|
||||
const collapseIconSvg = \`${collapseIconSvg}\`;
|
||||
const fileWriteIconSvg = \`${fileWriteIconSvg}\`;
|
||||
const fileReadIconSvg = \`${fileReadIconSvg}\`;
|
||||
const fileDeleteIconSvg = \`${fileDeleteIconSvg}\`;
|
||||
const syntaxCheckIconSvg = \`${syntaxCheckIconSvg}\`;
|
||||
const searchCodeIconSvg = \`${SearchCode}\`;
|
||||
const saveKnowledgeIconSvg = \`${saveKnowledgeIconSvg}\`;
|
||||
const simulationIconSvg = \`${simulationIconSvg}\`;
|
||||
const waveformIconSvg = \`${waveformIconSvg}\`;
|
||||
const knowledgeLoadIconSvg = \`${knowledgeLoadIconSvg}\`;
|
||||
const stateTransitionIconSvg = \`${stateTransitionIconSvg}\`;
|
||||
|
||||
${getAgentCardScript()}
|
||||
|
||||
${getPlanCardScript()}
|
||||
|
||||
// 获取工具图标
|
||||
function getToolIcon(toolName) {
|
||||
const iconMap = {
|
||||
'file_read': fileReadIconSvg,
|
||||
'file_write': fileWriteIconSvg,
|
||||
'file_delete': fileDeleteIconSvg,
|
||||
'file_list': searchCodeIconSvg,
|
||||
'syntax_check': syntaxCheckIconSvg,
|
||||
'simulation': simulationIconSvg,
|
||||
'waveform_summary': waveformIconSvg,
|
||||
'knowledge_save': saveKnowledgeIconSvg,
|
||||
'knowledge_load': knowledgeLoadIconSvg,
|
||||
'queryKnowledgeSummary': knowledgeLoadIconSvg,
|
||||
'queryRules': knowledgeLoadIconSvg,
|
||||
'setModule': fileWriteIconSvg,
|
||||
'addSignal': fileWriteIconSvg,
|
||||
'addSignalExample': fileWriteIconSvg,
|
||||
'validateKnowledgeGraph': syntaxCheckIconSvg,
|
||||
'querySignals': searchCodeIconSvg,
|
||||
'addPlan': fileWriteIconSvg,
|
||||
'addEdge': fileWriteIconSvg,
|
||||
'showPlan': searchCodeIconSvg,
|
||||
'addRule': fileWriteIconSvg,
|
||||
'updateNode': fileWriteIconSvg,
|
||||
'addStateTransition': stateTransitionIconSvg
|
||||
};
|
||||
return iconMap[toolName] || '';
|
||||
}
|
||||
|
||||
// 工具名称映射
|
||||
function getToolDisplayName(toolName) {
|
||||
const toolNameMap = {
|
||||
@ -578,6 +698,7 @@ export function getMessageAreaScript(): string {
|
||||
'showPlan': '已显示计划',
|
||||
'addRule': '已添加规则',
|
||||
'updateNode': '已更新节点',
|
||||
'addStateTransition': '已添加状态转换',
|
||||
'spawnExplorer': '代码探索'
|
||||
};
|
||||
return toolNameMap[toolName] || toolName;
|
||||
@ -823,10 +944,7 @@ export function getMessageAreaScript(): string {
|
||||
|
||||
segmentDiv.innerHTML = \`
|
||||
<div class="tool-segment-header\${shouldCollapse ? ' collapsed' : ''}" data-collapsible="\${shouldCollapse}">
|
||||
\${shouldCollapse ? collapseIconSvg : ''}
|
||||
\${!shouldCollapse && segment.toolStatus === 'success' && segment.toolName === 'file_write' ? fileWriteIconSvg : ''}
|
||||
\${!shouldCollapse && segment.toolStatus === 'success' && segment.toolName === 'syntax_check' ? syntaxCheckIconSvg : ''}
|
||||
\${!shouldCollapse && segment.toolStatus === 'success' && segment.toolName === 'file_list' ? searchCodeIconSvg : ''}
|
||||
\${shouldCollapse ? collapseIconSvg : getToolIcon(segment.toolName)}
|
||||
<span class="tool-segment-name">\${getToolDisplayName(segment.toolName) || '工具'}</span>
|
||||
\${toolResult && !shouldCollapse ? \`<span class="tool-segment-result">\${toolResult}</span>\` : ''}
|
||||
</div>
|
||||
@ -1031,10 +1149,7 @@ export function getMessageAreaScript(): string {
|
||||
|
||||
segmentDiv.innerHTML = \`
|
||||
<div class="tool-segment-header\${shouldCollapse ? ' collapsed' : ''}" data-collapsible="\${shouldCollapse}">
|
||||
\${shouldCollapse ? collapseIconSvg : ''}
|
||||
\${!shouldCollapse && segment.toolStatus === 'success' && segment.toolName === 'file_write' ? fileWriteIconSvg : ''}
|
||||
\${!shouldCollapse && segment.toolStatus === 'success' && segment.toolName === 'syntax_check' ? syntaxCheckIconSvg : ''}
|
||||
\${!shouldCollapse && segment.toolStatus === 'success' && segment.toolName === 'file_list' ? searchCodeIconSvg : ''}
|
||||
\${shouldCollapse ? collapseIconSvg : getToolIcon(segment.toolName)}
|
||||
<span class="tool-segment-name">\${getToolDisplayName(segment.toolName) || '工具'}</span>
|
||||
\${toolResult && !shouldCollapse ? \`<span class="tool-segment-result">\${toolResult}</span>\` : ''}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user