diff --git a/src/components/trace/TraceViewer.tsx b/src/components/trace/TraceViewer.tsx index f0ff1ce..f0dde0d 100644 --- a/src/components/trace/TraceViewer.tsx +++ b/src/components/trace/TraceViewer.tsx @@ -11,7 +11,7 @@ import { Box, Typography, Stack, Chip } from '@mui/material'; import { Activity, MessageSquare } from 'lucide-react'; -import { useMemo } from 'react'; +import { useEffect, useMemo, useRef } from 'react'; import { useAgentStore } from '@renderer/stores/agent-store'; import type { TraceStep as TraceStepType } from '@renderer/stores/agent-store'; import { TraceStep } from './TraceStep'; @@ -66,6 +66,17 @@ export function TraceViewer(): React.JSX.Element { const isEmpty = groups.length === 0; + // 自动滚动到底部:traceSteps / agentStatus 变化时触发 + // throttle 80ms 避免流式事件高频触发导致滚动卡顿 + const scrollContainerRef = useRef(null); + useEffect(() => { + const timer = setTimeout(() => { + const el = scrollContainerRef.current; + if (el) el.scrollTop = el.scrollHeight; + }, 80); + return () => clearTimeout(timer); + }, [allTraceSteps, agentStatus, groups.length]); + return ( @@ -80,7 +91,7 @@ export function TraceViewer(): React.JSX.Element { )} - + {isEmpty ? ( 等待 Agent 活动...