diff --git a/src/views/AgentChat/components/ChatArea/MessageRenderer.js b/src/views/AgentChat/components/ChatArea/MessageRenderer.js
index 004bc85c..4f90b8fe 100644
--- a/src/views/AgentChat/components/ChatArea/MessageRenderer.js
+++ b/src/views/AgentChat/components/ChatArea/MessageRenderer.js
@@ -2,7 +2,7 @@
// 消息渲染器组件
import React from 'react';
-import { motion } from 'framer-motion';
+import { motion, AnimatePresence } from 'framer-motion';
import {
Card,
CardBody,
@@ -12,11 +12,13 @@ import {
Tooltip,
IconButton,
HStack,
+ VStack,
Flex,
Text,
Box,
+ Progress,
} from '@chakra-ui/react';
-import { Cpu, User, Copy, ThumbsUp, ThumbsDown, File } from 'lucide-react';
+import { Cpu, User, Copy, ThumbsUp, ThumbsDown, File, ListChecks, Play, CheckCircle, XCircle, Clock } from 'lucide-react';
import { MessageTypes } from '../../constants/messageTypes';
import ExecutionStepsDisplay from './ExecutionStepsDisplay';
import { MarkdownWithCharts } from '@components/ChatBot/MarkdownWithCharts';
@@ -239,6 +241,272 @@ const MessageRenderer = ({ message, userAvatar }) => {
);
+ case MessageTypes.AGENT_PLAN:
+ return (
+
+
+ }
+ size="sm"
+ bgGradient="linear(to-br, purple.500, pink.500)"
+ boxShadow="0 0 12px rgba(236, 72, 153, 0.4)"
+ flexShrink={0}
+ />
+
+
+
+
+
+
+ 执行计划
+
+ {message.plan?.steps && (
+
+ {message.plan.steps.length} 个步骤
+
+ )}
+
+
+ {message.plan?.goal && (
+
+ 🎯 {message.plan.goal}
+
+ )}
+
+ {message.plan?.steps && (
+
+ {message.plan.steps.map((step, idx) => (
+
+
+
+ {idx + 1}
+
+
+ {step.tool}
+
+
+
+ ))}
+
+ )}
+
+
+
+
+
+ );
+
+ case MessageTypes.AGENT_EXECUTING:
+ const steps = message.plan?.steps || [];
+ const completedSteps = message.stepResults || [];
+ const currentStepIndex = completedSteps.length;
+ const progress = steps.length > 0 ? (completedSteps.length / steps.length) * 100 : 0;
+
+ return (
+
+
+ }
+ size="sm"
+ bgGradient="linear(to-br, purple.500, pink.500)"
+ boxShadow="0 0 12px rgba(236, 72, 153, 0.4)"
+ flexShrink={0}
+ />
+
+
+
+
+
+
+
+
+ 正在执行
+
+
+ {completedSteps.length} / {steps.length}
+
+
+
+ {/* 进度条 */}
+
+
+ {/* 步骤列表 */}
+
+
+ {steps.map((step, idx) => {
+ const result = completedSteps[idx];
+ const isCompleted = idx < completedSteps.length;
+ const isRunning = idx === currentStepIndex;
+ const isPending = idx > currentStepIndex;
+
+ return (
+
+
+ {/* 状态图标 */}
+
+ {isCompleted ? (
+ result?.status === 'success' ? (
+
+
+
+ ) : (
+
+ )
+ ) : isRunning ? (
+
+ ) : (
+
+ )}
+
+
+ {/* 步骤序号 */}
+
+ {idx + 1}
+
+
+ {/* 工具名称 */}
+
+ {step.tool}
+
+
+ {/* 执行时间 */}
+ {result?.execution_time && (
+
+ {result.execution_time.toFixed(2)}s
+
+ )}
+
+
+ );
+ })}
+
+
+
+
+
+
+
+ );
+
case MessageTypes.ERROR:
return (
diff --git a/src/views/AgentChat/constants/messageTypes.ts b/src/views/AgentChat/constants/messageTypes.ts
index 1d5de3c6..58d446cc 100644
--- a/src/views/AgentChat/constants/messageTypes.ts
+++ b/src/views/AgentChat/constants/messageTypes.ts
@@ -70,8 +70,9 @@ export interface AgentMessage extends BaseMessage {
plan?: any;
/** 执行步骤结果 */
stepResults?: Array<{
- tool_name: string;
- status: 'success' | 'error';
+ tool: string;
+ status: 'success' | 'error' | 'failed';
+ result?: any;
execution_time?: number;
error?: string;
}>;
diff --git a/src/views/AgentChat/hooks/useAgentChat.ts b/src/views/AgentChat/hooks/useAgentChat.ts
index 3fecb672..da49dc01 100644
--- a/src/views/AgentChat/hooks/useAgentChat.ts
+++ b/src/views/AgentChat/hooks/useAgentChat.ts
@@ -404,9 +404,10 @@ export const useAgentChat = ({
break;
case 'step_start':
- // 步骤开始执行
+ // 步骤开始执行 - 保留已完成的步骤结果，更新当前执行状态
updateLastMessage(MessageTypes.AGENT_EXECUTING, {
content: `正在执行步骤 ${(data?.step_index || 0) + 1}: ${data?.tool || '工具'}...`,
+ stepResults: [...streamStateRef.current.stepResults], // 保留已完成的步骤
});
break;