thzxx
ed59305b5e
1. useAgentStream: 每轮迭代只创建一个 TraceStep, 状态转换时更新而非新建; tool_result 反向搜索包含 toolCallId 的步骤, 修复工具结果丢失 2. TraceStep: 渲染工具状态图标/结果/错误/耗时; Thought 添加 maxHeight 200+滚动; 展开状态用户操作后不被自动覆盖 3. ToolResultBlock: 移除 500 字符截断, 改为 maxHeight 300+滚动 4. ToolCallCard: 参数区域添加 overflowY auto+wordBreak
57 lines
2.9 KiB
TypeScript
57 lines
2.9 KiB
TypeScript
/**
|
|
* ToolCallCard — 工具调用卡片
|
|
*/
|
|
|
|
import { Box, Typography, Stack, Chip } from '@mui/material';
|
|
import { Wrench, Clock, CheckCircle, XCircle, Ban, Loader2 } from 'lucide-react';
|
|
import type { ToolCallInfo } from '@renderer/stores/agent-store';
|
|
import { formatDuration } from '@renderer/lib/formatters';
|
|
|
|
interface ToolCallCardProps { toolCall: ToolCallInfo; }
|
|
|
|
const STATUS_ICONS = { pending: Clock, executing: Loader2, success: CheckCircle, error: XCircle, blocked: Ban };
|
|
const STATUS_LABELS = { pending: '等待中', executing: '执行中', success: '成功', error: '失败', blocked: '已阻止' };
|
|
const STATUS_COLORS: Record<string, string> = { pending: '#fbbf24', executing: '#a855f7', success: '#34d399', error: '#f87171', blocked: '#fb923c' };
|
|
const CHIP_VARIANTS: Record<string, 'outlined' | 'filled'> = { pending: 'outlined', executing: 'filled', success: 'filled', error: 'filled', blocked: 'outlined' };
|
|
|
|
export function ToolCallCard({ toolCall }: ToolCallCardProps): React.JSX.Element {
|
|
const Icon = STATUS_ICONS[toolCall.status];
|
|
const color = STATUS_COLORS[toolCall.status];
|
|
const label = STATUS_LABELS[toolCall.status];
|
|
|
|
return (
|
|
<Box
|
|
sx={{
|
|
borderRadius: 1.5, border: '1px solid', borderColor: 'divider', borderLeft: '3px solid', borderLeftColor: color,
|
|
bgcolor: 'secondary.main', px: 1.5, py: 1.25, mb: 1,
|
|
animation: toolCall.status === 'executing' ? 'pulse 2s infinite' : 'fadeInUp 300ms ease-out',
|
|
}}
|
|
>
|
|
<Stack direction="row" spacing={1} sx={{ mb: 0.75, alignItems: 'center' }}>
|
|
<Wrench size={12} style={{ color: '#a855f7' }} />
|
|
<Typography sx={{ fontSize: 12, fontWeight: 600, fontFamily: 'monospace', color: 'text.primary' }}>{toolCall.name}</Typography>
|
|
<Chip
|
|
icon={<Icon size={10} style={{ animation: toolCall.status === 'executing' ? 'spin 1s linear infinite' : 'none' }} />}
|
|
label={label}
|
|
size="small"
|
|
variant={CHIP_VARIANTS[toolCall.status]}
|
|
sx={{ height: 18, fontSize: 10, color, borderColor: color, '& .MuiChip-icon': { color } }}
|
|
/>
|
|
{toolCall.durationMs != null && (
|
|
<Typography variant="caption" sx={{ ml: 'auto', color: 'text.secondary' }}>{formatDuration(toolCall.durationMs)}</Typography>
|
|
)}
|
|
</Stack>
|
|
|
|
{Object.keys(toolCall.args).length > 0 && (
|
|
<Box component="pre" sx={{ fontSize: 11, borderRadius: 1, px: 1, py: 0.75, overflowX: 'auto', overflowY: 'auto', bgcolor: 'background.default', color: 'text.secondary', fontFamily: "'SF Mono',monospace", maxHeight: 80, m: 0, whiteSpace: 'pre-wrap', wordBreak: 'break-all' }}>
|
|
{JSON.stringify(toolCall.args, null, 2)}
|
|
</Box>
|
|
)}
|
|
|
|
{toolCall.status === 'error' && toolCall.error && (
|
|
<Typography variant="caption" sx={{ mt: 0.75, display: 'block', color: 'error.main' }}>{toolCall.error}</Typography>
|
|
)}
|
|
</Box>
|
|
);
|
|
}
|