fix: 状态指示器重叠与 Trace Viewer 状态丢失
1. StreamingIndicator: 最后一条是 assistant 消息时不显示'正在连接', 避免与 AssistantMessage 的'正在思考'重叠 2. useAgentStream: 跳过 INIT(iteration=0) 的 trace step, 引擎初始化无实际内容不应展示 3. useAgentStream: 状态转换追加到 states 数组而非覆盖 state 字段, 保留完整 THINKING->EXECUTING->OBSERVING 进度 4. TraceStep: header 显示状态进度链(如'思考 -> 执行 -> 观察')而非仅最终状态 5. agent-store: 旧数据兼容, 加载时为缺少 states 的 trace step 补全
This commit is contained in:
@@ -17,12 +17,9 @@ export function StreamingIndicator(): React.JSX.Element | null {
|
||||
if (!isStreaming) return null;
|
||||
|
||||
const lastMsg = messages[messages.length - 1];
|
||||
// 仅当最后一条是 assistant 消息且有内容时才隐藏
|
||||
// 如果最后一条是 user 消息(刚发送,等待 AI 响应),应显示加载指示器
|
||||
const isLastAssistant = lastMsg?.role === 'assistant';
|
||||
const hasVisibleContent = isLastAssistant &&
|
||||
(!!lastMsg?.content || !!lastMsg?.reasoningContent || !!lastMsg?.toolCalls?.length);
|
||||
if (hasVisibleContent) return null;
|
||||
// 最后一条是 assistant 消息时隐藏(即使内容为空,AssistantMessage 会显示"正在思考...")
|
||||
// 仅当最后一条是 user 消息(刚发送,等待 AI 响应)时显示加载指示器
|
||||
if (lastMsg?.role === 'assistant') return null;
|
||||
|
||||
return (
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, py: 2, pl: 5, animation: 'fadeIn 200ms ease-out' }}>
|
||||
|
||||
@@ -64,13 +64,18 @@ export function TraceStep({ step, isCurrent }: TraceStepProps): React.JSX.Elemen
|
||||
const label = TRACE_STATE_LABELS[step.state] ?? step.state;
|
||||
const duration = step.completedAt ? step.completedAt - step.startedAt : null;
|
||||
|
||||
// 构建状态进度链(如 "思考 → 执行 → 观察")
|
||||
const stateChain = (step.states ?? [step.state])
|
||||
.map((s) => TRACE_STATE_LABELS[s] ?? s)
|
||||
.join(' → ');
|
||||
|
||||
return (
|
||||
<Box sx={{ borderRadius: 1, border: '1px solid', borderColor: 'divider', bgcolor: 'secondary.main', transition: 'all 150ms', ...(isCurrent ? { boxShadow: `0 0 0 1px ${color}` } : {}) }}>
|
||||
<IconButton size="small" onClick={handleToggle} sx={{ width: '100%', justifyContent: 'flex-start', gap: 1, px: 1.5, py: 1, borderRadius: '4px 4px 0 0', color: 'text.primary', fontSize: 12 }}>
|
||||
{expanded ? <ChevronDown size={10} /> : <ChevronRight size={10} />}
|
||||
{isCurrent ? <Loader2 size={12} style={{ color, animation: 'spin 1s linear infinite' }} /> : step.completedAt ? <CheckCircle size={12} style={{ color }} /> : <CircleDot size={12} style={{ color }} />}
|
||||
<Typography component="span" sx={{ fontWeight: 600, color, fontSize: 12 }}>#{step.iteration}</Typography>
|
||||
<Typography component="span" sx={{ textTransform: 'uppercase', color: 'text.secondary', fontSize: 12 }}>{label}</Typography>
|
||||
<Typography component="span" sx={{ color: 'text.secondary', fontSize: 12 }}>{stateChain}</Typography>
|
||||
{duration != null && <Typography variant="caption" sx={{ ml: 'auto', color: 'text.secondary' }}>{formatDuration(duration)}</Typography>}
|
||||
{step.tokenUsage && <Typography variant="caption" sx={{ color: 'text.secondary' }}>{formatTokens(step.tokenUsage.totalTokens)} tok</Typography>}
|
||||
</IconButton>
|
||||
|
||||
Reference in New Issue
Block a user