feat:实现了工具调用的icon替换
- 还将icon抽取出来成为独立的组件，方便统一管理
This commit is contained in:
Roe-xin
@ -10,6 +10,13 @@
|
||||
* - 显示工具执行状态和加载指示器
|
||||
*/
|
||||
|
||||
import {
|
||||
collapseIconSvg,
|
||||
fileWriteIconSvg,
|
||||
syntaxCheckIconSvg,
|
||||
SearchCode,
|
||||
} from "../constants/toolIcons";
|
||||
|
||||
/**
|
||||
* 获取消息区域的 HTML 内容
|
||||
*/
|
||||
@ -394,6 +401,39 @@ export function getMessageAreaStyles(): string {
|
||||
.tool-segment-header:not(.collapsed) .tool-collapse-icon {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
.tool-file-write-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
flex-shrink: 0;
|
||||
margin-right: 6px;
|
||||
}
|
||||
.tool-file-write-icon svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
.tool-syntax-check-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
flex-shrink: 0;
|
||||
margin-right: 6px;
|
||||
}
|
||||
.tool-syntax-check-icon svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
.tool-search-code-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
flex-shrink: 0;
|
||||
margin-right: 6px;
|
||||
}
|
||||
.tool-search-code-icon svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
.tool-segment-content {
|
||||
overflow: hidden;
|
||||
transition: max-height 0.3s ease;
|
||||
@ -491,15 +531,21 @@ export function getMessageAreaStyles(): string {
|
||||
*/
|
||||
export function getMessageAreaScript(): string {
|
||||
return `
|
||||
// 工具图标定义
|
||||
const collapseIconSvg = \`${collapseIconSvg}\`;
|
||||
const fileWriteIconSvg = \`${fileWriteIconSvg}\`;
|
||||
const syntaxCheckIconSvg = \`${syntaxCheckIconSvg}\`;
|
||||
const searchCodeIconSvg = \`${SearchCode}\`;
|
||||
|
||||
// 工具名称映射
|
||||
function getToolDisplayName(toolName) {
|
||||
const toolNameMap = {
|
||||
'file_read': '已完成文件读取',
|
||||
'file_write': '已完成文件写入',
|
||||
'file_list': '已读取目录',
|
||||
'syntax_check': '语法检查',
|
||||
'simulation': '仿真',
|
||||
'waveform_summary': '波形分析'
|
||||
'file_list': '已检索代码文件',
|
||||
'syntax_check': '已完成语法检查',
|
||||
'simulation': '已完成仿真',
|
||||
'waveform_summary': '已完成波形分析'
|
||||
};
|
||||
return toolNameMap[toolName] || toolName;
|
||||
}
|
||||
@ -719,29 +765,18 @@ export function getMessageAreaScript(): string {
|
||||
segmentDiv.className += ' segment-text';
|
||||
segmentDiv.innerHTML = formatText(segment.content);
|
||||
} else if (segment.type === 'tool') {
|
||||
const statusIcon = segment.toolStatus === 'success' ? '✅' :
|
||||
segment.toolStatus === 'error' ? '❌' : '🔧';
|
||||
const statusIcon = segment.toolStatus === 'error' ? '❌' : '🔧';
|
||||
const toolResult = segment.toolResult || '';
|
||||
|
||||
// 检查工具结果是否过长(超过一行显示不下)
|
||||
const shouldCollapse = toolResult && toolResult.length > 60;
|
||||
|
||||
// 折叠图标 SVG
|
||||
const collapseIconSvg = \`
|
||||
<span class="tool-collapse-icon">
|
||||
<svg class="icon-collapsed" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M355.05845325 160.07583932c-19.63862503 19.63862503-19.63862503 51.53175211 0 71.17037712L618.05891976 494.24668297c9.74075802 9.74075802 9.74075802 25.76587604 0 35.50663406L355.05845325 792.75378356c-19.63862503 19.63862503-19.63862503 51.53175211 0 71.17037712s51.53175211 19.63862503 71.17037716 0L706.98261396 583.17037714c39.27725009-39.27725009 39.27725009-102.90639522 0-142.18364526L426.22883041 160.07583932c-19.63862503-19.63862503-51.53175211-19.63862503-71.17037716 0z" fill="#8a8a8a"/>
|
||||
</svg>
|
||||
<svg class="icon-expanded" style="display:none;" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M899.70688 272.92672l-382.19776 373.53472-393.45664-384.512a43.52 43.52 0 0 0-60.52352 0 41.14944 41.14944 0 0 0 0 59.14624l423.72096 414.11584a43.35616 43.35616 0 0 0 60.56448 0l412.4672-403.11296a41.20064 41.20064 0 0 0 11.06432-40.41728 42.3424 42.3424 0 0 0-30.2848-29.58336 43.52 43.52 0 0 0-41.35424 10.84416z m0 0" fill="#8a8a8a"/>
|
||||
</svg>
|
||||
</span>
|
||||
\`;
|
||||
|
||||
segmentDiv.innerHTML = \`
|
||||
<div class="tool-segment-header\${shouldCollapse ? ' collapsed' : ''}" data-collapsible="\${shouldCollapse}">
|
||||
\${shouldCollapse ? collapseIconSvg : ''}
|
||||
<span class="tool-segment-icon">\${statusIcon}</span>
|
||||
\${!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 : ''}
|
||||
<span class="tool-segment-name">\${getToolDisplayName(segment.toolName) || '工具'}</span>
|
||||
\${toolResult && !shouldCollapse ? \`<span class="tool-segment-result">\${toolResult}</span>\` : ''}
|
||||
</div>
|
||||
@ -910,29 +945,18 @@ export function getMessageAreaScript(): string {
|
||||
segmentDiv.className += ' segment-text';
|
||||
segmentDiv.innerHTML = formatText(segment.content);
|
||||
} else if (segment.type === 'tool') {
|
||||
const statusIcon = segment.toolStatus === 'success' ? '✅' :
|
||||
segment.toolStatus === 'error' ? '❌' : '🔧';
|
||||
const statusIcon = segment.toolStatus === 'error' ? '❌' : '🔧';
|
||||
const toolResult = segment.toolResult || '';
|
||||
|
||||
// 检查工具结果是否过长(超过一行显示不下)
|
||||
const shouldCollapse = toolResult && toolResult.length > 60;
|
||||
|
||||
// 折叠图标 SVG
|
||||
const collapseIconSvg = \`
|
||||
<span class="tool-collapse-icon">
|
||||
<svg class="icon-collapsed" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M355.05845325 160.07583932c-19.63862503 19.63862503-19.63862503 51.53175211 0 71.17037712L618.05891976 494.24668297c9.74075802 9.74075802 9.74075802 25.76587604 0 35.50663406L355.05845325 792.75378356c-19.63862503 19.63862503-19.63862503 51.53175211 0 71.17037712s51.53175211 19.63862503 71.17037716 0L706.98261396 583.17037714c39.27725009-39.27725009 39.27725009-102.90639522 0-142.18364526L426.22883041 160.07583932c-19.63862503-19.63862503-51.53175211-19.63862503-71.17037716 0z" fill="#8a8a8a"/>
|
||||
</svg>
|
||||
<svg class="icon-expanded" style="display:none;" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M899.70688 272.92672l-382.19776 373.53472-393.45664-384.512a43.52 43.52 0 0 0-60.52352 0 41.14944 41.14944 0 0 0 0 59.14624l423.72096 414.11584a43.35616 43.35616 0 0 0 60.56448 0l412.4672-403.11296a41.20064 41.20064 0 0 0 11.06432-40.41728 42.3424 42.3424 0 0 0-30.2848-29.58336 43.52 43.52 0 0 0-41.35424 10.84416z m0 0" fill="#8a8a8a"/>
|
||||
</svg>
|
||||
</span>
|
||||
\`;
|
||||
|
||||
segmentDiv.innerHTML = \`
|
||||
<div class="tool-segment-header\${shouldCollapse ? ' collapsed' : ''}" data-collapsible="\${shouldCollapse}">
|
||||
\${shouldCollapse ? collapseIconSvg : ''}
|
||||
<span class="tool-segment-icon">\${statusIcon}</span>
|
||||
\${!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 : ''}
|
||||
<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