feat:实现了工具调用的icon替换
- 还将icon抽取出来成为独立的组件，方便统一管理
This commit is contained in:
Roe-xin
52
src/constants/toolIcons.ts
Normal file
52
src/constants/toolIcons.ts
Normal file
@ -0,0 +1,52 @@
|
|||||||
|
/**
|
||||||
|
* 工具图标定义
|
||||||
|
* 包含各种工具的 SVG 图标
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 折叠图标 SVG（用于可折叠的工具结果）
|
||||||
|
*/
|
||||||
|
export 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>
|
||||||
|
`;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 文件写入完成图标 SVG
|
||||||
|
*/
|
||||||
|
export const fileWriteIconSvg = `
|
||||||
|
<span class="tool-file-write-icon">
|
||||||
|
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M866.304 852.096H161.728a31.36 31.36 0 0 1-30.528-30.592 31.36 31.36 0 0 1 30.528-30.528h704.64a31.36 31.36 0 0 1 30.528 30.528c0 16.32-12.224 30.592-30.592 30.592z m-65.152-134.4h-392.96a31.36 31.36 0 0 1-30.592-30.592 31.36 31.36 0 0 1 30.528-30.528h391.04a31.36 31.36 0 0 1 30.528 30.528c0 16.32-12.224 30.592-28.544 30.592z m-596.672-179.2l91.648 93.632-40.704 40.768-91.648-91.648 40.704-42.752zM552.704 188.16l91.648 93.696-42.752 40.704-91.648-91.648 42.752-42.752z" fill="#8a8a8a"/>
|
||||||
|
<path d="M176 733.952a72.96 72.96 0 0 1-50.88-22.4c-14.272-14.272-22.4-36.672-22.4-56.96l8.128-99.84 423.552-425.6a104.576 104.576 0 0 1 75.328-30.528c32.64 0 63.168 14.272 85.568 36.672 24.384 24.384 36.608 56.96 36.608 89.6 0 28.48-12.16 54.976-32.576 73.28l-419.456 427.648-99.84 8.128H176z m-4.096-152.704l-6.08 77.376c0 4.096 2.048 8.128 4.096 8.128h2.048l77.376-6.08 417.344-425.6c8.128-8.128 12.224-18.304 12.224-28.48 0-14.272-6.08-28.48-16.32-38.72-10.24-10.24-22.4-16.32-36.672-16.32-12.16 0-22.4 4.096-30.528 12.224L171.904 581.248z" fill="#8a8a8a"/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
`;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 语法检查图标 SVG
|
||||||
|
*/
|
||||||
|
export const syntaxCheckIconSvg = `
|
||||||
|
<span class="tool-syntax-check-icon">
|
||||||
|
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M143.36 241.8688h638.976a33.28 33.28 0 0 0 0-66.56H143.36a33.28 33.28 0 0 0 0 66.56zM143.36 421.2736h423.5264a33.28 33.28 0 0 0 0-66.56H143.36a33.28 33.28 0 0 0 0 66.56zM419.0208 532.8384H143.36a33.28 33.28 0 0 0 0 66.56h275.6608a33.28 33.28 0 0 0 0-66.56zM365.5168 709.5296H129.0752a33.28 33.28 0 0 0 0 66.56h236.4416a33.28 33.28 0 1 0 0-66.56zM918.4256 791.8592l-82.5856-82.432a178.8928 178.8928 0 1 0-47.0528 47.0528l82.5856 82.4832a33.28 33.28 0 1 0 47.0528-47.104z m-342.3232-182.9376a112.128 112.128 0 1 1 112.128 112.0768 112.2816 112.2816 0 0 1-112.128-112.0768z" fill="#8a8a8a"/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
`;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 已检索代码图标 SVG
|
||||||
|
*/
|
||||||
|
export const SearchCode = `
|
||||||
|
<span class="tool-search-code-icon">
|
||||||
|
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M916.33 859.76L678.51 621.94A318.92 318.92 0 0 0 768 400c0-176.73-143.27-320-320-320S128 223.27 128 400s143.27 320 320 320a318.48 318.48 0 0 0 167.88-47.55l243.88 243.88a40 40 0 1 0 56.57-56.57zM192 400c0-141.38 114.62-256 256-256s256 114.62 256 256-114.62 256-256 256-256-114.62-256-256z" fill="#8a8a8a"/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
`;
|
||||||
@ -10,6 +10,13 @@
|
|||||||
* - 显示工具执行状态和加载指示器
|
* - 显示工具执行状态和加载指示器
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
import {
|
||||||
|
collapseIconSvg,
|
||||||
|
fileWriteIconSvg,
|
||||||
|
syntaxCheckIconSvg,
|
||||||
|
SearchCode,
|
||||||
|
} from "../constants/toolIcons";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 获取消息区域的 HTML 内容
|
* 获取消息区域的 HTML 内容
|
||||||
*/
|
*/
|
||||||
@ -394,6 +401,39 @@ export function getMessageAreaStyles(): string {
|
|||||||
.tool-segment-header:not(.collapsed) .tool-collapse-icon {
|
.tool-segment-header:not(.collapsed) .tool-collapse-icon {
|
||||||
transform: rotate(0deg);
|
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 {
|
.tool-segment-content {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
transition: max-height 0.3s ease;
|
transition: max-height 0.3s ease;
|
||||||
@ -491,15 +531,21 @@ export function getMessageAreaStyles(): string {
|
|||||||
*/
|
*/
|
||||||
export function getMessageAreaScript(): string {
|
export function getMessageAreaScript(): string {
|
||||||
return `
|
return `
|
||||||
|
// 工具图标定义
|
||||||
|
const collapseIconSvg = \`${collapseIconSvg}\`;
|
||||||
|
const fileWriteIconSvg = \`${fileWriteIconSvg}\`;
|
||||||
|
const syntaxCheckIconSvg = \`${syntaxCheckIconSvg}\`;
|
||||||
|
const searchCodeIconSvg = \`${SearchCode}\`;
|
||||||
|
|
||||||
// 工具名称映射
|
// 工具名称映射
|
||||||
function getToolDisplayName(toolName) {
|
function getToolDisplayName(toolName) {
|
||||||
const toolNameMap = {
|
const toolNameMap = {
|
||||||
'file_read': '已完成文件读取',
|
'file_read': '已完成文件读取',
|
||||||
'file_write': '已完成文件写入',
|
'file_write': '已完成文件写入',
|
||||||
'file_list': '已读取目录',
|
'file_list': '已检索代码文件',
|
||||||
'syntax_check': '语法检查',
|
'syntax_check': '已完成语法检查',
|
||||||
'simulation': '仿真',
|
'simulation': '已完成仿真',
|
||||||
'waveform_summary': '波形分析'
|
'waveform_summary': '已完成波形分析'
|
||||||
};
|
};
|
||||||
return toolNameMap[toolName] || toolName;
|
return toolNameMap[toolName] || toolName;
|
||||||
}
|
}
|
||||||
@ -719,29 +765,18 @@ export function getMessageAreaScript(): string {
|
|||||||
segmentDiv.className += ' segment-text';
|
segmentDiv.className += ' segment-text';
|
||||||
segmentDiv.innerHTML = formatText(segment.content);
|
segmentDiv.innerHTML = formatText(segment.content);
|
||||||
} else if (segment.type === 'tool') {
|
} else if (segment.type === 'tool') {
|
||||||
const statusIcon = segment.toolStatus === 'success' ? '✅' :
|
const statusIcon = segment.toolStatus === 'error' ? '❌' : '🔧';
|
||||||
segment.toolStatus === 'error' ? '❌' : '🔧';
|
|
||||||
const toolResult = segment.toolResult || '';
|
const toolResult = segment.toolResult || '';
|
||||||
|
|
||||||
// 检查工具结果是否过长(超过一行显示不下)
|
// 检查工具结果是否过长(超过一行显示不下)
|
||||||
const shouldCollapse = toolResult && toolResult.length > 60;
|
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 = \`
|
segmentDiv.innerHTML = \`
|
||||||
<div class="tool-segment-header\${shouldCollapse ? ' collapsed' : ''}" data-collapsible="\${shouldCollapse}">
|
<div class="tool-segment-header\${shouldCollapse ? ' collapsed' : ''}" data-collapsible="\${shouldCollapse}">
|
||||||
\${shouldCollapse ? collapseIconSvg : ''}
|
\${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>
|
<span class="tool-segment-name">\${getToolDisplayName(segment.toolName) || '工具'}</span>
|
||||||
\${toolResult && !shouldCollapse ? \`<span class="tool-segment-result">\${toolResult}</span>\` : ''}
|
\${toolResult && !shouldCollapse ? \`<span class="tool-segment-result">\${toolResult}</span>\` : ''}
|
||||||
</div>
|
</div>
|
||||||
@ -910,29 +945,18 @@ export function getMessageAreaScript(): string {
|
|||||||
segmentDiv.className += ' segment-text';
|
segmentDiv.className += ' segment-text';
|
||||||
segmentDiv.innerHTML = formatText(segment.content);
|
segmentDiv.innerHTML = formatText(segment.content);
|
||||||
} else if (segment.type === 'tool') {
|
} else if (segment.type === 'tool') {
|
||||||
const statusIcon = segment.toolStatus === 'success' ? '✅' :
|
const statusIcon = segment.toolStatus === 'error' ? '❌' : '🔧';
|
||||||
segment.toolStatus === 'error' ? '❌' : '🔧';
|
|
||||||
const toolResult = segment.toolResult || '';
|
const toolResult = segment.toolResult || '';
|
||||||
|
|
||||||
// 检查工具结果是否过长(超过一行显示不下)
|
// 检查工具结果是否过长(超过一行显示不下)
|
||||||
const shouldCollapse = toolResult && toolResult.length > 60;
|
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 = \`
|
segmentDiv.innerHTML = \`
|
||||||
<div class="tool-segment-header\${shouldCollapse ? ' collapsed' : ''}" data-collapsible="\${shouldCollapse}">
|
<div class="tool-segment-header\${shouldCollapse ? ' collapsed' : ''}" data-collapsible="\${shouldCollapse}">
|
||||||
\${shouldCollapse ? collapseIconSvg : ''}
|
\${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>
|
<span class="tool-segment-name">\${getToolDisplayName(segment.toolName) || '工具'}</span>
|
||||||
\${toolResult && !shouldCollapse ? \`<span class="tool-segment-result">\${toolResult}</span>\` : ''}
|
\${toolResult && !shouldCollapse ? \`<span class="tool-segment-result">\${toolResult}</span>\` : ''}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user