feat: 组组件拆分

src/components/Button/index.tsx

@@ -1,5 +1,15 @@
 import { Link } from "react-router-dom";
 import { svgs } from "./svgs";
+import React from "react";
+
+interface ButtonProps {
+    className?: string;
+    href?: string;
+    onClick?: () => void;
+    children: React.ReactNode;
+    px?: string;
+    white?: boolean;
+}
 
 const Button = ({
     className,
@@ -8,7 +18,7 @@ const Button = ({
     children,
     px,
     white,
-}) => {
+}: ButtonProps) => {
     const classes = `button relative inline-flex items-center justify-center h-11 ${
         px || "px-7"
     } ${white ? "text-n-8" : "text-n-1"} transition-colors hover:text-color-1 ${

src/components/Image/index.tsx

@@ -1,6 +1,11 @@
 import { useState } from "react";
+import React from "react";
 
-const Image = ({ className, ...props }) => {
+interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+    className?: string;
+}
+
+const Image = ({ className, ...props }: ImageProps) => {
     const [loaded, setLoaded] = useState(false);
 
     return (

src/components/Section/index.tsx

@@ -1,10 +1,20 @@
+import React from "react";
+
+interface SectionProps {
+    className?: string;
+    crosses?: boolean;
+    crossesOffset?: string;
+    customPaddings?: boolean;
+    children: React.ReactNode;
+}
+
 const Section = ({
     className,
     crosses,
     crossesOffset,
     customPaddings,
     children,
-}) => (
+}: SectionProps) => (
     <div
         className={`relative ${
             customPaddings ||

src/components/StockChart/StockChartKLineModal.tsx

@@ -143,7 +143,6 @@ const StockChartKLineModal: React.FC<StockChartKLineModalProps> = ({
    */
   const handleRefresh = useCallback(() => {
     loadData();
-    logger.debug('StockChartKLineModal', 'handleRefresh', '刷新数据');
   }, [loadData]);
 
   // ==================== 计算属性 ====================

src/components/StockChart/hooks/useEventMarker.ts

@@ -150,10 +150,10 @@ export const useEventMarker = (
 
     try {
       if (markerId) {
-        chart.removeOverlay(markerId);
+        chart.removeOverlay({ id: markerId } as any);
       }
       if (highlightId) {
-        chart.removeOverlay(highlightId);
+        chart.removeOverlay({ id: highlightId } as any);
       }
 
       setMarker(null);
@@ -216,10 +216,10 @@ export const useEventMarker = (
       if (chart) {
         try {
           if (markerId) {
-            chart.removeOverlay(markerId);
+            chart.removeOverlay({ id: markerId } as any);
           }
           if (highlightId) {
-            chart.removeOverlay(highlightId);
+            chart.removeOverlay({ id: highlightId } as any);
           }
         } catch (err) {
           // 忽略清理时的错误

src/components/StockChart/hooks/useKLineChart.ts

@@ -215,7 +215,6 @@ export const useKLineChart = (
     const handleResize = () => {
       if (chartInstanceRef.current) {
         chartInstanceRef.current.resize();
-        logger.debug('useKLineChart', 'resize', '调整图表大小');
       }
     };
 

src/components/StockChart/types/chart.types.ts

@@ -51,6 +51,8 @@ export interface RawDataPoint {
   close: number;
   /** 成交量 */
   volume: number;
+  /** 成交额（可选） */
+  turnover?: number;
   /** 均价（分时图专用） */
   avg_price?: number;
   /** 昨收价（用于百分比计算和基准线）- 分时图专用 */

src/components/StockChart/utils/chartUtils.ts

@@ -69,7 +69,7 @@ export const createIndicator = (
  */
 export const removeIndicator = (chart: Chart, indicatorId?: string): void => {
   safeChartOperation('removeIndicator', () => {
-    chart.removeIndicator(indicatorId);
+    chart.removeIndicator(indicatorId ? { id: indicatorId } as any : undefined);
     logger.debug('chartUtils', '移除技术指标 (removeIndicator)', { indicatorId });
   });
 };
@@ -271,7 +271,7 @@ export const subscribeChartEvent = (
   handler: (...args: any[]) => void
 ): void => {
   safeChartOperation(`subscribeChartEvent:${eventName}`, () => {
-    chart.subscribeAction(eventName, handler);
+    chart.subscribeAction(eventName as any, handler);
     logger.debug('chartUtils', '订阅图表事件 (subscribeChartEvent)', { eventName });
   });
 };
@@ -289,7 +289,7 @@ export const unsubscribeChartEvent = (
   handler: (...args: any[]) => void
 ): void => {
   safeChartOperation(`unsubscribeChartEvent:${eventName}`, () => {
-    chart.unsubscribeAction(eventName, handler);
+    chart.unsubscribeAction(eventName as any, handler);
     logger.debug('chartUtils', '取消订阅图表事件 (unsubscribeChartEvent)', { eventName });
   });
 };

src/components/StockChart/utils/eventMarkerUtils.ts

@@ -64,10 +64,12 @@ export const createEventMarkerOverlay = (
           style: 'fill',
           color: marker.color,
           borderRadius: EVENT_MARKER_CONFIG.text.borderRadius,
-          paddingLeft: EVENT_MARKER_CONFIG.text.padding,
-          paddingRight: EVENT_MARKER_CONFIG.text.padding,
-          paddingTop: EVENT_MARKER_CONFIG.text.padding,
-          paddingBottom: EVENT_MARKER_CONFIG.text.padding,
+          padding: [
+            EVENT_MARKER_CONFIG.text.padding,
+            EVENT_MARKER_CONFIG.text.padding,
+            EVENT_MARKER_CONFIG.text.padding,
+            EVENT_MARKER_CONFIG.text.padding,
+          ] as any,
         },
       },
       // 标记文本内容

src/views/AgentChat/components/ChatArea/ChatHeader.tsx

@@ -0,0 +1,204 @@
+// src/views/AgentChat/components/ChatArea/ChatHeader.tsx
+// 聊天区顶部标题栏组件
+
+import React from 'react';
+import { motion } from 'framer-motion';
+import {
+  Box,
+  Avatar,
+  Badge,
+  Tooltip,
+  IconButton,
+  HStack,
+  Flex,
+  Text,
+} from '@chakra-ui/react';
+import { Menu, RefreshCw, Settings, Cpu, Zap } from 'lucide-react';
+import { AVAILABLE_MODELS } from '../../constants/models';
+
+/**
+ * ChatHeader 组件的 Props 类型
+ */
+interface ChatHeaderProps {
+  /** 当前选中的模型 ID */
+  selectedModel: string;
+  /** 左侧栏是否展开 */
+  isLeftSidebarOpen: boolean;
+  /** 右侧栏是否展开 */
+  isRightSidebarOpen: boolean;
+  /** 切换左侧栏回调 */
+  onToggleLeftSidebar: () => void;
+  /** 切换右侧栏回调 */
+  onToggleRightSidebar: () => void;
+  /** 新建会话回调 */
+  onNewSession: () => void;
+}
+
+/**
+ * ChatHeader - 聊天区顶部标题栏组件
+ *
+ * 职责：
+ * 1. 展示 AI 头像和标题
+ * 2. 显示当前模型徽章
+ * 3. 左侧栏/右侧栏切换按钮
+ * 4. 新建会话按钮
+ *
+ * 设计：
+ * - 深色毛玻璃背景
+ * - 旋转的 AI 头像动画
+ * - 渐变色标题和徽章
+ */
+const ChatHeader: React.FC<ChatHeaderProps> = ({
+  selectedModel,
+  isLeftSidebarOpen,
+  isRightSidebarOpen,
+  onToggleLeftSidebar,
+  onToggleRightSidebar,
+  onNewSession,
+}) => {
+  const currentModel = AVAILABLE_MODELS.find((m) => m.id === selectedModel);
+
+  return (
+    <Box
+      bg="rgba(17, 24, 39, 0.8)"
+      backdropFilter="blur(20px) saturate(180%)"
+      borderBottom="1px solid"
+      borderColor="rgba(255, 255, 255, 0.1)"
+      px={6}
+      py={4}
+      boxShadow="0 8px 32px 0 rgba(31, 38, 135, 0.37)"
+    >
+      <Flex align="center" justify="space-between">
+        {/* 左侧：标题和徽章 */}
+        <HStack spacing={4}>
+          {/* 左侧栏切换按钮（仅在侧边栏收起时显示） */}
+          {!isLeftSidebarOpen && (
+            <motion.div whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }}>
+              <IconButton
+                size="sm"
+                variant="ghost"
+                icon={<Menu className="w-4 h-4" />}
+                onClick={onToggleLeftSidebar}
+                aria-label="展开左侧栏"
+                bg="rgba(255, 255, 255, 0.05)"
+                color="gray.400"
+                backdropFilter="blur(10px)"
+                border="1px solid"
+                borderColor="rgba(255, 255, 255, 0.1)"
+                _hover={{
+                  bg: 'rgba(255, 255, 255, 0.1)',
+                  color: 'white',
+                }}
+              />
+            </motion.div>
+          )}
+
+          {/* AI 头像（旋转动画） */}
+          <motion.div
+            animate={{ rotate: 360 }}
+            transition={{ duration: 3, repeat: Infinity, ease: 'linear' }}
+          >
+            <Avatar
+              icon={<Cpu className="w-6 h-6" />}
+              bgGradient="linear(to-br, purple.500, pink.500)"
+              boxShadow="0 0 20px rgba(236, 72, 153, 0.5)"
+            />
+          </motion.div>
+
+          {/* 标题和徽章 */}
+          <Box>
+            <Text
+              fontSize="xl"
+              fontWeight="bold"
+              bgGradient="linear(to-r, blue.400, purple.400)"
+              bgClip="text"
+              letterSpacing="tight"
+            >
+              价小前投研 AI
+            </Text>
+            <HStack spacing={2} mt={1}>
+              {/* 智能分析徽章 */}
+              <Badge
+                bgGradient="linear(to-r, green.500, teal.500)"
+                color="white"
+                px={2}
+                py={1}
+                borderRadius="md"
+                display="flex"
+                alignItems="center"
+                gap={1}
+                boxShadow="0 2px 8px rgba(16, 185, 129, 0.3)"
+              >
+                <Zap className="w-3 h-3" />
+                智能分析
+              </Badge>
+
+              {/* 模型名称徽章 */}
+              <Badge
+                bgGradient="linear(to-r, purple.500, pink.500)"
+                color="white"
+                px={2}
+                py={1}
+                borderRadius="md"
+                boxShadow="0 2px 8px rgba(139, 92, 246, 0.3)"
+              >
+                {currentModel?.name || '未知模型'}
+              </Badge>
+            </HStack>
+          </Box>
+        </HStack>
+
+        {/* 右侧：操作按钮 */}
+        <HStack spacing={2}>
+          {/* 清空对话按钮 */}
+          <Tooltip label="清空对话">
+            <motion.div whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }}>
+              <IconButton
+                size="sm"
+                variant="ghost"
+                icon={<RefreshCw className="w-4 h-4" />}
+                onClick={onNewSession}
+                aria-label="清空对话"
+                bg="rgba(255, 255, 255, 0.05)"
+                color="gray.400"
+                backdropFilter="blur(10px)"
+                border="1px solid"
+                borderColor="rgba(255, 255, 255, 0.1)"
+                _hover={{
+                  bg: 'rgba(255, 255, 255, 0.1)',
+                  color: 'white',
+                  borderColor: 'purple.400',
+                  boxShadow: '0 0 12px rgba(139, 92, 246, 0.3)',
+                }}
+              />
+            </motion.div>
+          </Tooltip>
+
+          {/* 右侧栏切换按钮（仅在侧边栏收起时显示） */}
+          {!isRightSidebarOpen && (
+            <motion.div whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }}>
+              <IconButton
+                size="sm"
+                variant="ghost"
+                icon={<Settings className="w-4 h-4" />}
+                onClick={onToggleRightSidebar}
+                aria-label="展开右侧栏"
+                bg="rgba(255, 255, 255, 0.05)"
+                color="gray.400"
+                backdropFilter="blur(10px)"
+                border="1px solid"
+                borderColor="rgba(255, 255, 255, 0.1)"
+                _hover={{
+                  bg: 'rgba(255, 255, 255, 0.1)',
+                  color: 'white',
+                }}
+              />
+            </motion.div>
+          )}
+        </HStack>
+      </Flex>
+    </Box>
+  );
+};
+
+export default ChatHeader;

src/views/AgentChat/components/ChatArea/ChatInput.tsx

@@ -0,0 +1,253 @@
+// src/views/AgentChat/components/ChatArea/ChatInput.tsx
+// 聊天输入框区域组件
+
+import React from 'react';
+import { motion } from 'framer-motion';
+import {
+  Box,
+  Input,
+  IconButton,
+  Tooltip,
+  Kbd,
+  HStack,
+  Text,
+  Tag,
+  TagLabel,
+  TagCloseButton,
+} from '@chakra-ui/react';
+import { Send, Paperclip, Image as ImageIcon } from 'lucide-react';
+import type { UploadedFile } from './types';
+
+/**
+ * ChatInput 组件的 Props 类型
+ */
+interface ChatInputProps {
+  /** 输入框内容 */
+  inputValue: string;
+  /** 输入框变化回调 */
+  onInputChange: (value: string) => void;
+  /** 键盘事件回调 */
+  onKeyPress: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+  /** 已上传文件列表 */
+  uploadedFiles: UploadedFile[];
+  /** 文件选择回调 */
+  onFileSelect: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  /** 文件删除回调 */
+  onFileRemove: (index: number) => void;
+  /** 是否正在处理中 */
+  isProcessing: boolean;
+  /** 发送消息回调 */
+  onSendMessage: () => void;
+  /** 输入框引用 */
+  inputRef: React.RefObject<HTMLInputElement>;
+  /** 文件上传输入引用 */
+  fileInputRef: React.RefObject<HTMLInputElement>;
+}
+
+/**
+ * ChatInput - 聊天输入框区域组件
+ *
+ * 职责：
+ * 1. 文件上传按钮（Paperclip, Image）
+ * 2. 输入框
+ * 3. 发送按钮
+ * 4. 已上传文件预览
+ * 5. 快捷键提示
+ *
+ * 设计：
+ * - 深色毛玻璃背景
+ * - 渐变色发送按钮
+ * - 悬停动画效果
+ * - 响应式最大宽度（896px）
+ */
+const ChatInput: React.FC<ChatInputProps> = ({
+  inputValue,
+  onInputChange,
+  onKeyPress,
+  uploadedFiles,
+  onFileSelect,
+  onFileRemove,
+  isProcessing,
+  onSendMessage,
+  inputRef,
+  fileInputRef,
+}) => {
+  return (
+    <Box
+      bg="rgba(17, 24, 39, 0.8)"
+      backdropFilter="blur(20px) saturate(180%)"
+      borderTop="1px solid"
+      borderColor="rgba(255, 255, 255, 0.1)"
+      px={6}
+      py={1}
+      boxShadow="0 -8px 32px 0 rgba(31, 38, 135, 0.37)"
+    >
+      <Box maxW="896px" mx="auto">
+        {/* 已上传文件预览 */}
+        {uploadedFiles.length > 0 && (
+          <HStack mb={3} flexWrap="wrap" spacing={2}>
+            {uploadedFiles.map((file, idx) => (
+              <motion.div
+                key={idx}
+                initial={{ opacity: 0, scale: 0.8 }}
+                animate={{ opacity: 1, scale: 1 }}
+                exit={{ opacity: 0, scale: 0.8 }}
+              >
+                <Tag
+                  size="md"
+                  variant="subtle"
+                  bg="rgba(255, 255, 255, 0.05)"
+                  backdropFilter="blur(10px)"
+                  borderColor="rgba(255, 255, 255, 0.1)"
+                  borderWidth={1}
+                >
+                  <TagLabel color="gray.300">{file.name}</TagLabel>
+                  <TagCloseButton onClick={() => onFileRemove(idx)} color="gray.400" />
+                </Tag>
+              </motion.div>
+            ))}
+          </HStack>
+        )}
+
+        {/* 输入栏 */}
+        <HStack spacing={2}>
+          {/* 隐藏的文件上传输入 */}
+          <input
+            ref={fileInputRef}
+            type="file"
+            multiple
+            accept="image/*,.pdf,.doc,.docx,.txt"
+            onChange={onFileSelect}
+            style={{ display: 'none' }}
+          />
+
+          {/* 上传文件按钮 */}
+          <Tooltip label="上传文件">
+            <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
+              <IconButton
+                variant="ghost"
+                size="lg"
+                icon={<Paperclip className="w-5 h-5" />}
+                onClick={() => fileInputRef.current?.click()}
+                aria-label="上传文件"
+                bg="rgba(255, 255, 255, 0.05)"
+                color="gray.300"
+                backdropFilter="blur(10px)"
+                border="1px solid"
+                borderColor="rgba(255, 255, 255, 0.1)"
+                _hover={{
+                  bg: 'rgba(255, 255, 255, 0.1)',
+                  borderColor: 'purple.400',
+                  color: 'white',
+                  boxShadow: '0 0 12px rgba(139, 92, 246, 0.3)',
+                }}
+              />
+            </motion.div>
+          </Tooltip>
+
+          {/* 上传图片按钮 */}
+          <Tooltip label="上传图片">
+            <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
+              <IconButton
+                variant="ghost"
+                size="lg"
+                icon={<ImageIcon className="w-5 h-5" />}
+                onClick={() => {
+                  fileInputRef.current?.setAttribute('accept', 'image/*');
+                  fileInputRef.current?.click();
+                }}
+                aria-label="上传图片"
+                bg="rgba(255, 255, 255, 0.05)"
+                color="gray.300"
+                backdropFilter="blur(10px)"
+                border="1px solid"
+                borderColor="rgba(255, 255, 255, 0.1)"
+                _hover={{
+                  bg: 'rgba(255, 255, 255, 0.1)',
+                  borderColor: 'purple.400',
+                  color: 'white',
+                  boxShadow: '0 0 12px rgba(139, 92, 246, 0.3)',
+                }}
+              />
+            </motion.div>
+          </Tooltip>
+
+          {/* 输入框 */}
+          <Input
+            ref={inputRef}
+            value={inputValue}
+            onChange={(e) => onInputChange(e.target.value)}
+            onKeyDown={onKeyPress}
+            placeholder="输入你的问题... (Enter 发送, Shift+Enter 换行)"
+            isDisabled={isProcessing}
+            size="lg"
+            variant="outline"
+            borderWidth={2}
+            bg="rgba(255, 255, 255, 0.05)"
+            backdropFilter="blur(10px)"
+            border="1px solid"
+            borderColor="rgba(255, 255, 255, 0.1)"
+            color="white"
+            _placeholder={{ color: 'gray.500' }}
+            _hover={{
+              borderColor: 'rgba(255, 255, 255, 0.2)',
+            }}
+            _focus={{
+              borderColor: 'purple.400',
+              boxShadow: '0 0 0 1px var(--chakra-colors-purple-400), 0 0 12px rgba(139, 92, 246, 0.3)',
+              bg: 'rgba(255, 255, 255, 0.08)',
+            }}
+          />
+
+          {/* 发送按钮 */}
+          <motion.div
+            whileHover={{ scale: 1.05 }}
+            whileTap={{ scale: 0.95 }}
+            transition={{ type: 'spring', stiffness: 400, damping: 17 }}
+          >
+            <IconButton
+              size="lg"
+              icon={!isProcessing ? <Send className="w-5 h-5" /> : undefined}
+              onClick={onSendMessage}
+              isLoading={isProcessing}
+              isDisabled={!inputValue.trim() || isProcessing}
+              aria-label="发送消息"
+              bgGradient="linear(to-r, blue.500, purple.600)"
+              color="white"
+              _hover={{
+                bgGradient: 'linear(to-r, blue.600, purple.700)',
+                boxShadow: '0 8px 20px rgba(139, 92, 246, 0.4)',
+              }}
+              _active={{
+                transform: 'translateY(0)',
+                boxShadow: '0 4px 12px rgba(139, 92, 246, 0.3)',
+              }}
+            />
+          </motion.div>
+        </HStack>
+
+        {/* 快捷键提示 */}
+        <HStack spacing={4} mt={2} fontSize="xs" color="gray.500">
+          <HStack spacing={1}>
+            <Kbd bg="rgba(255, 255, 255, 0.05)" color="gray.400" borderColor="rgba(255, 255, 255, 0.1)">
+              Enter
+            </Kbd>
+            <Text>发送</Text>
+          </HStack>
+          <HStack spacing={1}>
+            <Kbd bg="rgba(255, 255, 255, 0.05)" color="gray.400" borderColor="rgba(255, 255, 255, 0.1)">
+              Shift
+            </Kbd>
+            <Text>+</Text>
+            <Kbd bg="rgba(255, 255, 255, 0.05)" color="gray.400" borderColor="rgba(255, 255, 255, 0.1)">
+              Enter
+            </Kbd>
+            <Text>换行</Text>
+          </HStack>
+        </HStack>
+      </Box>
+    </Box>
+  );
+};
+
+export default ChatInput;

src/views/AgentChat/components/ChatArea/ExecutionStepsDisplay.tsx

@@ -1,5 +1,5 @@
-// src/views/AgentChat/components/ChatArea/ExecutionStepsDisplay.js
-// 执行步骤显示组件
+// src/views/AgentChat/components/ChatArea/ExecutionStepsDisplay.tsx
+// 执行步骤显示组件（TypeScript 版本）
 
 import React from 'react';
 import { motion } from 'framer-motion';
@@ -18,16 +18,32 @@ import {
   Text,
 } from '@chakra-ui/react';
 import { Activity } from 'lucide-react';
+import type { ExecutionStep } from './types';
+
+/**
+ * ExecutionStepsDisplay 组件的 Props 类型
+ */
+interface ExecutionStepsDisplayProps {
+  /** 执行步骤列表 */
+  steps: ExecutionStep[];
+  /** 执行计划（可选） */
+  plan?: unknown;
+}
 
 /**
  * ExecutionStepsDisplay - 执行步骤显示组件
  *
- * @param {Object} props
- * @param {Array} props.steps - 执行步骤列表
- * @param {Object} props.plan - 执行计划（可选）
- * @returns {JSX.Element}
+ * 职责：
+ * 1. 以手风琴方式展示执行步骤
+ * 2. 显示每个步骤的状态、名称、耗时
+ * 3. 显示错误信息（如果有）
+ *
+ * 设计：
+ * - 可折叠的手风琴容器
+ * - 成功/失败状态渐变色徽章
+ * - 步骤卡片渐进入场动画
  */
-const ExecutionStepsDisplay = ({ steps, plan }) => {
+const ExecutionStepsDisplay: React.FC<ExecutionStepsDisplayProps> = ({ steps, plan }) => {
   return (
     <Accordion allowToggle>
       <AccordionItem
@@ -41,6 +57,7 @@ const ExecutionStepsDisplay = ({ steps, plan }) => {
           borderColor: 'rgba(255, 255, 255, 0.2)',
         }}
       >
+        {/* 手风琴标题 */}
         <AccordionButton px={4} py={2}>
           <HStack flex={1} spacing={2}>
             <Activity className="w-4 h-4" color="#C084FC" />
@@ -58,6 +75,8 @@ const ExecutionStepsDisplay = ({ steps, plan }) => {
           </HStack>
           <AccordionIcon color="gray.400" />
         </AccordionButton>
+
+        {/* 手风琴内容 */}
         <AccordionPanel pb={4}>
           <VStack spacing={2} align="stretch">
             {steps.map((result, idx) => (
@@ -75,9 +94,12 @@ const ExecutionStepsDisplay = ({ steps, plan }) => {
                 >
                   <CardBody p={3}>
                     <Flex align="start" justify="space-between" gap={2}>
+                      {/* 步骤名称 */}
                       <Text fontSize="xs" fontWeight="medium" color="gray.300">
                         步骤 {idx + 1}: {result.tool_name}
                       </Text>
+
+                      {/* 状态徽章 */}
                       <Badge
                         bgGradient={
                           result.status === 'success'
@@ -95,9 +117,15 @@ const ExecutionStepsDisplay = ({ steps, plan }) => {
                         {result.status}
                       </Badge>
                     </Flex>
-                    <Text fontSize="xs" color="gray.500" mt={1}>
-                      {result.execution_time?.toFixed(2)}s
-                    </Text>
+
+                    {/* 执行耗时 */}
+                    {result.execution_time !== undefined && (
+                      <Text fontSize="xs" color="gray.500" mt={1}>
+                        {result.execution_time.toFixed(2)}s
+                      </Text>
+                    )}
+
+                    {/* 错误信息 */}
                     {result.error && (
                       <Text fontSize="xs" color="red.400" mt={1}>
                         ⚠️ {result.error}

src/views/AgentChat/components/ChatArea/MessageList.tsx

@@ -0,0 +1,78 @@
+// src/views/AgentChat/components/ChatArea/MessageList.tsx
+// 消息列表组件
+
+import React from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Box, VStack } from '@chakra-ui/react';
+import { animations } from '../../constants/animations';
+import MessageRenderer from './MessageRenderer';
+import type { Message } from './types';
+
+/**
+ * MessageList 组件的 Props 类型
+ */
+interface MessageListProps {
+  /** 消息列表 */
+  messages: Message[];
+  /** 用户头像 URL */
+  userAvatar?: string;
+  /** 消息列表底部引用（用于自动滚动） */
+  messagesEndRef: React.RefObject<HTMLDivElement>;
+}
+
+/**
+ * MessageList - 消息列表组件
+ *
+ * 职责：
+ * 1. 渲染消息列表容器
+ * 2. 处理消息动画（进入/退出）
+ * 3. 提供自动滚动锚点
+ *
+ * 设计：
+ * - 渐变色背景
+ * - 消息淡入上滑动画
+ * - 退出消息淡出动画
+ * - 响应式最大宽度（896px）
+ */
+const MessageList: React.FC<MessageListProps> = ({
+  messages,
+  userAvatar,
+  messagesEndRef,
+}) => {
+  return (
+    <Box
+      flex={1}
+      bgGradient="linear(to-b, rgba(17, 24, 39, 0.5), rgba(17, 24, 39, 0.3))"
+      overflowY="auto"
+    >
+      <motion.div
+        style={{ maxWidth: '896px', margin: '0 auto' }}
+        variants={animations.staggerContainer}
+        initial="initial"
+        animate="animate"
+      >
+        <VStack spacing={4} align="stretch">
+          <AnimatePresence mode="popLayout">
+            {messages.map((message) => (
+              <motion.div
+                key={message.id}
+                variants={animations.fadeInUp}
+                initial="initial"
+                animate="animate"
+                exit={{ opacity: 0, y: -20 }}
+                layout
+              >
+                <MessageRenderer message={message} userAvatar={userAvatar} />
+              </motion.div>
+            ))}
+          </AnimatePresence>
+
+          {/* 自动滚动锚点 */}
+          <div ref={messagesEndRef} />
+        </VStack>
+      </motion.div>
+    </Box>
+  );
+};
+
+export default MessageList;

src/views/AgentChat/components/ChatArea/MessageRenderer.tsx

@@ -1,5 +1,5 @@
-// src/views/AgentChat/components/ChatArea/MessageRenderer.js
-// 消息渲染器组件
+// src/views/AgentChat/components/ChatArea/MessageRenderer.tsx
+// 消息渲染器组件（TypeScript 版本）
 
 import React from 'react';
 import { motion } from 'framer-motion';
@@ -19,17 +19,31 @@ import {
 import { Cpu, User, Copy, ThumbsUp, ThumbsDown, File } from 'lucide-react';
 import { MessageTypes } from '../../constants/messageTypes';
 import ExecutionStepsDisplay from './ExecutionStepsDisplay';
+import type { Message } from './types';
+
+/**
+ * MessageRenderer 组件的 Props 类型
+ */
+interface MessageRendererProps {
+  /** 消息对象 */
+  message: Message;
+  /** 用户头像 URL */
+  userAvatar?: string;
+}
 
 /**
  * MessageRenderer - 消息渲染器组件
  *
- * @param {Object} props
- * @param {Object} props.message - 消息对象
- * @param {string} props.userAvatar - 用户头像 URL
- * @returns {JSX.Element|null}
+ * 职责：
+ * 1. 根据消息类型渲染不同样式的消息卡片
+ * 2. 用户消息：右对齐，蓝紫渐变色
+ * 3. AI 思考中：左对齐，加载动画
+ * 4. AI 回复：左对齐，毛玻璃效果，带交互按钮
+ * 5. 错误消息：居中，红色警告样式
  */
-const MessageRenderer = ({ message, userAvatar }) => {
+const MessageRenderer: React.FC<MessageRendererProps> = ({ message, userAvatar }) => {
   switch (message.type) {
+    // 用户消息
     case MessageTypes.USER:
       return (
         <Flex justify="flex-end">
@@ -78,6 +92,7 @@ const MessageRenderer = ({ message, userAvatar }) => {
         </Flex>
       );
 
+    // AI 思考中
     case MessageTypes.AGENT_THINKING:
       return (
         <Flex justify="flex-start">
@@ -116,6 +131,7 @@ const MessageRenderer = ({ message, userAvatar }) => {
         </Flex>
       );
 
+    // AI 回复
     case MessageTypes.AGENT_RESPONSE:
       return (
         <Flex justify="flex-start">
@@ -139,16 +155,19 @@ const MessageRenderer = ({ message, userAvatar }) => {
                 boxShadow="0 8px 32px 0 rgba(31, 38, 135, 0.37)"
               >
                 <CardBody px={5} py={3}>
+                  {/* 消息内容 */}
                   <Text fontSize="sm" color="gray.100" whiteSpace="pre-wrap" lineHeight="relaxed">
                     {message.content}
                   </Text>
 
-                  {message.stepResults && message.stepResults.length > 0 && (
+                  {/* 执行步骤（如果有） */}
+                  {message.execution_results && message.execution_results.length > 0 && (
                     <Box mt={3}>
-                      <ExecutionStepsDisplay steps={message.stepResults} plan={message.plan} />
+                      <ExecutionStepsDisplay steps={message.execution_results} plan={message.plan} />
                     </Box>
                   )}
 
+                  {/* 操作按钮栏 */}
                   <Flex
                     align="center"
                     gap={2}
@@ -157,6 +176,7 @@ const MessageRenderer = ({ message, userAvatar }) => {
                     borderTop="1px solid"
                     borderColor="rgba(255, 255, 255, 0.1)"
                   >
+                    {/* 复制按钮 */}
                     <Tooltip label="复制">
                       <motion.div whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }}>
                         <IconButton
@@ -164,6 +184,7 @@ const MessageRenderer = ({ message, userAvatar }) => {
                           variant="ghost"
                           icon={<Copy className="w-4 h-4" />}
                           onClick={() => navigator.clipboard.writeText(message.content)}
+                          aria-label="复制消息"
                           bg="rgba(255, 255, 255, 0.05)"
                           color="gray.400"
                           _hover={{
@@ -173,12 +194,15 @@ const MessageRenderer = ({ message, userAvatar }) => {
                         />
                       </motion.div>
                     </Tooltip>
+
+                    {/* 点赞按钮 */}
                     <Tooltip label="点赞">
                       <motion.div whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }}>
                         <IconButton
                           size="sm"
                           variant="ghost"
                           icon={<ThumbsUp className="w-4 h-4" />}
+                          aria-label="点赞"
                           bg="rgba(255, 255, 255, 0.05)"
                           color="gray.400"
                           _hover={{
@@ -189,12 +213,15 @@ const MessageRenderer = ({ message, userAvatar }) => {
                         />
                       </motion.div>
                     </Tooltip>
+
+                    {/* 点踩按钮 */}
                     <Tooltip label="点踩">
                       <motion.div whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }}>
                         <IconButton
                           size="sm"
                           variant="ghost"
                           icon={<ThumbsDown className="w-4 h-4" />}
+                          aria-label="点踩"
                           bg="rgba(255, 255, 255, 0.05)"
                           color="gray.400"
                           _hover={{
@@ -205,11 +232,14 @@ const MessageRenderer = ({ message, userAvatar }) => {
                         />
                       </motion.div>
                     </Tooltip>
+
+                    {/* 时间戳 */}
                     <Text fontSize="xs" color="gray.500" ml="auto">
-                      {new Date(message.timestamp).toLocaleTimeString('zh-CN', {
-                        hour: '2-digit',
-                        minute: '2-digit',
-                      })}
+                      {message.timestamp &&
+                        new Date(message.timestamp).toLocaleTimeString('zh-CN', {
+                          hour: '2-digit',
+                          minute: '2-digit',
+                        })}
                     </Text>
                   </Flex>
                 </CardBody>
@@ -219,6 +249,7 @@ const MessageRenderer = ({ message, userAvatar }) => {
         </Flex>
       );
 
+    // 错误消息
     case MessageTypes.ERROR:
       return (
         <Flex justify="center">

src/views/AgentChat/components/ChatArea/QuickQuestions.tsx

@@ -0,0 +1,112 @@
+// src/views/AgentChat/components/ChatArea/QuickQuestions.tsx
+// 快捷问题卡片组件
+
+import React from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Box, Button, HStack, Text } from '@chakra-ui/react';
+import { Sparkles } from 'lucide-react';
+import { quickQuestions } from '../../constants/quickQuestions';
+import { animations } from '../../constants/animations';
+
+/**
+ * QuickQuestions 组件的 Props 类型
+ */
+interface QuickQuestionsProps {
+  /** 消息列表长度（用于判断是否显示） */
+  messagesCount: number;
+  /** 是否正在处理中 */
+  isProcessing: boolean;
+  /** 点击快捷问题回调 */
+  onQuestionClick: (text: string) => void;
+  /** 输入框引用（用于聚焦） */
+  inputRef: React.RefObject<HTMLInputElement>;
+}
+
+/**
+ * QuickQuestions - 快捷问题卡片组件
+ *
+ * 职责：
+ * 1. 显示快捷问题卡片网格
+ * 2. 仅在消息少于 2 条且未处理时显示
+ * 3. 点击填充输入框并聚焦
+ *
+ * 设计：
+ * - 2 列网格布局
+ * - 毛玻璃效果卡片
+ * - 悬停缩放和高亮动画
+ * - 淡入上滑进入动画
+ */
+const QuickQuestions: React.FC<QuickQuestionsProps> = ({
+  messagesCount,
+  isProcessing,
+  onQuestionClick,
+  inputRef,
+}) => {
+  // 只在消息少于 2 条且未处理时显示
+  if (messagesCount > 2 || isProcessing) {
+    return null;
+  }
+
+  const handleQuestionClick = (text: string) => {
+    onQuestionClick(text);
+    inputRef.current?.focus();
+  };
+
+  return (
+    <AnimatePresence>
+      <motion.div
+        variants={animations.fadeInUp}
+        initial="initial"
+        animate="animate"
+        exit={{ opacity: 0, y: 20 }}
+      >
+        <Box px={6}>
+          <Box maxW="896px" mx="auto">
+            {/* 标题 */}
+            <HStack fontSize="xs" color="gray.500" mb={2} fontWeight="medium" spacing={1}>
+              <Sparkles className="w-3 h-3" />
+              <Text>快速开始</Text>
+            </HStack>
+
+            {/* 快捷问题网格 */}
+            <Box display="grid" gridTemplateColumns="repeat(2, 1fr)" gap={2}>
+              {quickQuestions.map((question, idx) => (
+                <motion.div
+                  key={idx}
+                  whileHover={{ scale: 1.02, y: -2 }}
+                  whileTap={{ scale: 0.98 }}
+                  transition={{ type: 'spring', stiffness: 400, damping: 17 }}
+                >
+                  <Button
+                    variant="outline"
+                    w="full"
+                    justifyContent="flex-start"
+                    h="auto"
+                    py={3}
+                    bg="rgba(255, 255, 255, 0.05)"
+                    backdropFilter="blur(12px)"
+                    border="1px solid"
+                    borderColor="rgba(255, 255, 255, 0.1)"
+                    color="gray.300"
+                    _hover={{
+                      bg: 'rgba(59, 130, 246, 0.15)',
+                      borderColor: 'blue.400',
+                      boxShadow: '0 4px 12px rgba(59, 130, 246, 0.3)',
+                      color: 'white',
+                    }}
+                    onClick={() => handleQuestionClick(question.text)}
+                  >
+                    <Text mr={2}>{question.emoji}</Text>
+                    <Text>{question.text}</Text>
+                  </Button>
+                </motion.div>
+              ))}
+            </Box>
+          </Box>
+        </Box>
+      </motion.div>
+    </AnimatePresence>
+  );
+};
+
+export default QuickQuestions;

src/views/AgentChat/components/ChatArea/index.js

@@ -1,477 +0,0 @@
-// src/views/AgentChat/components/ChatArea/index.js
-// 中间聊天区域组件
-
-import React, { useRef, useEffect } from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
-import {
-  Box,
-  Button,
-  Input,
-  Avatar,
-  Badge,
-  Tooltip,
-  IconButton,
-  Kbd,
-  HStack,
-  VStack,
-  Flex,
-  Text,
-  Tag,
-  TagLabel,
-  TagCloseButton,
-} from '@chakra-ui/react';
-import {
-  Send,
-  Menu,
-  RefreshCw,
-  Settings,
-  Cpu,
-  Zap,
-  Sparkles,
-  Paperclip,
-  Image as ImageIcon,
-} from 'lucide-react';
-import { AVAILABLE_MODELS } from '../../constants/models';
-import { quickQuestions } from '../../constants/quickQuestions';
-import { animations } from '../../constants/animations';
-import MessageRenderer from './MessageRenderer';
-
-/**
- * ChatArea - 中间聊天区域组件
- *
- * @param {Object} props
- * @param {Array} props.messages - 消息列表
- * @param {string} props.inputValue - 输入框内容
- * @param {Function} props.onInputChange - 输入框变化回调
- * @param {boolean} props.isProcessing - 处理中状态
- * @param {Function} props.onSendMessage - 发送消息回调
- * @param {Function} props.onKeyPress - 键盘事件回调
- * @param {Array} props.uploadedFiles - 已上传文件列表
- * @param {Function} props.onFileSelect - 文件选择回调
- * @param {Function} props.onFileRemove - 文件删除回调
- * @param {string} props.selectedModel - 当前选中的模型 ID
- * @param {boolean} props.isLeftSidebarOpen - 左侧栏是否展开
- * @param {boolean} props.isRightSidebarOpen - 右侧栏是否展开
- * @param {Function} props.onToggleLeftSidebar - 切换左侧栏回调
- * @param {Function} props.onToggleRightSidebar - 切换右侧栏回调
- * @param {Function} props.onNewSession - 新建会话回调
- * @param {string} props.userAvatar - 用户头像 URL
- * @param {RefObject} props.inputRef - 输入框引用
- * @param {RefObject} props.fileInputRef - 文件上传输入引用
- * @returns {JSX.Element}
- */
-const ChatArea = ({
-  messages,
-  inputValue,
-  onInputChange,
-  isProcessing,
-  onSendMessage,
-  onKeyPress,
-  uploadedFiles,
-  onFileSelect,
-  onFileRemove,
-  selectedModel,
-  isLeftSidebarOpen,
-  isRightSidebarOpen,
-  onToggleLeftSidebar,
-  onToggleRightSidebar,
-  onNewSession,
-  userAvatar,
-  inputRef,
-  fileInputRef,
-}) => {
-  // Auto-scroll 功能：当消息列表更新时，自动滚动到底部
-  const messagesEndRef = useRef(null);
-
-  useEffect(() => {
-    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
-  }, [messages]);
-  return (
-    <Flex flex={1} direction="column">
-      {/* 顶部标题栏 - 深色毛玻璃 */}
-      <Box
-        bg="rgba(17, 24, 39, 0.8)"
-        backdropFilter="blur(20px) saturate(180%)"
-        borderBottom="1px solid"
-        borderColor="rgba(255, 255, 255, 0.1)"
-        px={6}
-        py={4}
-        boxShadow="0 8px 32px 0 rgba(31, 38, 135, 0.37)"
-      >
-        <Flex align="center" justify="space-between">
-          <HStack spacing={4}>
-            {!isLeftSidebarOpen && (
-              <motion.div whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }}>
-                <IconButton
-                  size="sm"
-                  variant="ghost"
-                  icon={<Menu className="w-4 h-4" />}
-                  onClick={onToggleLeftSidebar}
-                  bg="rgba(255, 255, 255, 0.05)"
-                  color="gray.400"
-                  backdropFilter="blur(10px)"
-                  border="1px solid"
-                  borderColor="rgba(255, 255, 255, 0.1)"
-                  _hover={{
-                    bg: 'rgba(255, 255, 255, 0.1)',
-                    color: 'white',
-                  }}
-                />
-              </motion.div>
-            )}
-
-            <motion.div
-              animate={{ rotate: 360 }}
-              transition={{ duration: 3, repeat: Infinity, ease: 'linear' }}
-            >
-              <Avatar
-                icon={<Cpu className="w-6 h-6" />}
-                bgGradient="linear(to-br, purple.500, pink.500)"
-                boxShadow="0 0 20px rgba(236, 72, 153, 0.5)"
-              />
-            </motion.div>
-
-            <Box>
-              <Text
-                fontSize="xl"
-                fontWeight="bold"
-                bgGradient="linear(to-r, blue.400, purple.400)"
-                bgClip="text"
-                letterSpacing="tight"
-              >
-                价小前投研 AI
-              </Text>
-              <HStack spacing={2} mt={1}>
-                <Badge
-                  bgGradient="linear(to-r, green.500, teal.500)"
-                  color="white"
-                  px={2}
-                  py={1}
-                  borderRadius="md"
-                  display="flex"
-                  alignItems="center"
-                  gap={1}
-                  boxShadow="0 2px 8px rgba(16, 185, 129, 0.3)"
-                >
-                  <Zap className="w-3 h-3" />
-                  智能分析
-                </Badge>
-                <Badge
-                  bgGradient="linear(to-r, purple.500, pink.500)"
-                  color="white"
-                  px={2}
-                  py={1}
-                  borderRadius="md"
-                  boxShadow="0 2px 8px rgba(139, 92, 246, 0.3)"
-                >
-                  {AVAILABLE_MODELS.find((m) => m.id === selectedModel)?.name}
-                </Badge>
-              </HStack>
-            </Box>
-          </HStack>
-
-          <HStack spacing={2}>
-            <Tooltip label="清空对话">
-              <motion.div whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }}>
-                <IconButton
-                  size="sm"
-                  variant="ghost"
-                  icon={<RefreshCw className="w-4 h-4" />}
-                  onClick={onNewSession}
-                  bg="rgba(255, 255, 255, 0.05)"
-                  color="gray.400"
-                  backdropFilter="blur(10px)"
-                  border="1px solid"
-                  borderColor="rgba(255, 255, 255, 0.1)"
-                  _hover={{
-                    bg: 'rgba(255, 255, 255, 0.1)',
-                    color: 'white',
-                    borderColor: 'purple.400',
-                    boxShadow: '0 0 12px rgba(139, 92, 246, 0.3)',
-                  }}
-                />
-              </motion.div>
-            </Tooltip>
-            {!isRightSidebarOpen && (
-              <motion.div whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }}>
-                <IconButton
-                  size="sm"
-                  variant="ghost"
-                  icon={<Settings className="w-4 h-4" />}
-                  onClick={onToggleRightSidebar}
-                  bg="rgba(255, 255, 255, 0.05)"
-                  color="gray.400"
-                  backdropFilter="blur(10px)"
-                  border="1px solid"
-                  borderColor="rgba(255, 255, 255, 0.1)"
-                  _hover={{
-                    bg: 'rgba(255, 255, 255, 0.1)',
-                    color: 'white',
-                  }}
-                />
-              </motion.div>
-            )}
-          </HStack>
-        </Flex>
-      </Box>
-
-      {/* 消息列表 */}
-      <Box
-        flex={1}
-        bgGradient="linear(to-b, rgba(17, 24, 39, 0.5), rgba(17, 24, 39, 0.3))"
-        overflowY="auto"
-      >
-        <motion.div
-          style={{ maxWidth: '896px', margin: '0 auto' }}
-          variants={animations.staggerContainer}
-          initial="initial"
-          animate="animate"
-        >
-          <VStack spacing={4} align="stretch">
-            <AnimatePresence mode="popLayout">
-              {messages.map((message) => (
-                <motion.div
-                  key={message.id}
-                  variants={animations.fadeInUp}
-                  initial="initial"
-                  animate="animate"
-                  exit={{ opacity: 0, y: -20 }}
-                  layout
-                >
-                  <MessageRenderer message={message} userAvatar={userAvatar} />
-                </motion.div>
-              ))}
-            </AnimatePresence>
-            <div ref={messagesEndRef} />
-          </VStack>
-        </motion.div>
-      </Box>
-
-      {/* 快捷问题 */}
-      <AnimatePresence>
-        {messages.length <= 2 && !isProcessing && (
-          <motion.div
-            variants={animations.fadeInUp}
-            initial="initial"
-            animate="animate"
-            exit={{ opacity: 0, y: 20 }}
-          >
-            <Box px={6}>
-              <Box maxW="896px" mx="auto">
-                <HStack fontSize="xs" color="gray.500" mb={2} fontWeight="medium" spacing={1}>
-                  <Sparkles className="w-3 h-3" />
-                  <Text>快速开始</Text>
-                </HStack>
-                <Box display="grid" gridTemplateColumns="repeat(2, 1fr)" gap={2}>
-                  {quickQuestions.map((question, idx) => (
-                    <motion.div
-                      key={idx}
-                      whileHover={{ scale: 1.02, y: -2 }}
-                      whileTap={{ scale: 0.98 }}
-                      transition={{ type: 'spring', stiffness: 400, damping: 17 }}
-                    >
-                      <Button
-                        variant="outline"
-                        w="full"
-                        justifyContent="flex-start"
-                        h="auto"
-                        py={3}
-                        bg="rgba(255, 255, 255, 0.05)"
-                        backdropFilter="blur(12px)"
-                        border="1px solid"
-                        borderColor="rgba(255, 255, 255, 0.1)"
-                        color="gray.300"
-                        _hover={{
-                          bg: 'rgba(59, 130, 246, 0.15)',
-                          borderColor: 'blue.400',
-                          boxShadow: '0 4px 12px rgba(59, 130, 246, 0.3)',
-                          color: 'white',
-                        }}
-                        onClick={() => {
-                          onInputChange(question.text);
-                          inputRef.current?.focus();
-                        }}
-                      >
-                        <Text mr={2}>{question.emoji}</Text>
-                        <Text>{question.text}</Text>
-                      </Button>
-                    </motion.div>
-                  ))}
-                </Box>
-              </Box>
-            </Box>
-          </motion.div>
-        )}
-      </AnimatePresence>
-
-      {/* 输入栏 - 深色毛玻璃 */}
-      <Box
-        bg="rgba(17, 24, 39, 0.8)"
-        backdropFilter="blur(20px) saturate(180%)"
-        borderTop="1px solid"
-        borderColor="rgba(255, 255, 255, 0.1)"
-        px={6}
-        py={1}
-        boxShadow="0 -8px 32px 0 rgba(31, 38, 135, 0.37)"
-      >
-        <Box maxW="896px" mx="auto">
-          {/* 已上传文件预览 */}
-          {uploadedFiles.length > 0 && (
-            <HStack mb={3} flexWrap="wrap" spacing={2}>
-              {uploadedFiles.map((file, idx) => (
-                <motion.div
-                  key={idx}
-                  initial={{ opacity: 0, scale: 0.8 }}
-                  animate={{ opacity: 1, scale: 1 }}
-                  exit={{ opacity: 0, scale: 0.8 }}
-                >
-                  <Tag
-                    size="md"
-                    variant="subtle"
-                    bg="rgba(255, 255, 255, 0.05)"
-                    backdropFilter="blur(10px)"
-                    borderColor="rgba(255, 255, 255, 0.1)"
-                    borderWidth={1}
-                  >
-                    <TagLabel color="gray.300">{file.name}</TagLabel>
-                    <TagCloseButton onClick={() => onFileRemove(idx)} color="gray.400" />
-                  </Tag>
-                </motion.div>
-              ))}
-            </HStack>
-          )}
-
-          <HStack spacing={2}>
-            <input
-              ref={fileInputRef}
-              type="file"
-              multiple
-              accept="image/*,.pdf,.doc,.docx,.txt"
-              onChange={onFileSelect}
-              style={{ display: 'none' }}
-            />
-
-            <Tooltip label="上传文件">
-              <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
-                <IconButton
-                  variant="ghost"
-                  size="lg"
-                  icon={<Paperclip className="w-5 h-5" />}
-                  onClick={() => fileInputRef.current?.click()}
-                  bg="rgba(255, 255, 255, 0.05)"
-                  color="gray.300"
-                  backdropFilter="blur(10px)"
-                  border="1px solid"
-                  borderColor="rgba(255, 255, 255, 0.1)"
-                  _hover={{
-                    bg: 'rgba(255, 255, 255, 0.1)',
-                    borderColor: 'purple.400',
-                    color: 'white',
-                    boxShadow: '0 0 12px rgba(139, 92, 246, 0.3)',
-                  }}
-                />
-              </motion.div>
-            </Tooltip>
-
-            <Tooltip label="上传图片">
-              <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
-                <IconButton
-                  variant="ghost"
-                  size="lg"
-                  icon={<ImageIcon className="w-5 h-5" />}
-                  onClick={() => {
-                    fileInputRef.current?.setAttribute('accept', 'image/*');
-                    fileInputRef.current?.click();
-                  }}
-                  bg="rgba(255, 255, 255, 0.05)"
-                  color="gray.300"
-                  backdropFilter="blur(10px)"
-                  border="1px solid"
-                  borderColor="rgba(255, 255, 255, 0.1)"
-                  _hover={{
-                    bg: 'rgba(255, 255, 255, 0.1)',
-                    borderColor: 'purple.400',
-                    color: 'white',
-                    boxShadow: '0 0 12px rgba(139, 92, 246, 0.3)',
-                  }}
-                />
-              </motion.div>
-            </Tooltip>
-
-            <Input
-              ref={inputRef}
-              value={inputValue}
-              onChange={(e) => onInputChange(e.target.value)}
-              onKeyDown={onKeyPress}
-              placeholder="输入你的问题... (Enter 发送, Shift+Enter 换行)"
-              isDisabled={isProcessing}
-              size="lg"
-              variant="outline"
-              borderWidth={2}
-              bg="rgba(255, 255, 255, 0.05)"
-              backdropFilter="blur(10px)"
-              border="1px solid"
-              borderColor="rgba(255, 255, 255, 0.1)"
-              color="white"
-              _placeholder={{ color: 'gray.500' }}
-              _hover={{
-                borderColor: 'rgba(255, 255, 255, 0.2)',
-              }}
-              _focus={{
-                borderColor: 'purple.400',
-                boxShadow:
-                  '0 0 0 1px var(--chakra-colors-purple-400), 0 0 12px rgba(139, 92, 246, 0.3)',
-                bg: 'rgba(255, 255, 255, 0.08)',
-              }}
-            />
-
-            <motion.div
-              whileHover={{ scale: 1.05 }}
-              whileTap={{ scale: 0.95 }}
-              transition={{ type: 'spring', stiffness: 400, damping: 17 }}
-            >
-              <IconButton
-                size="lg"
-                icon={!isProcessing && <Send className="w-5 h-5" />}
-                onClick={onSendMessage}
-                isLoading={isProcessing}
-                isDisabled={!inputValue.trim() || isProcessing}
-                bgGradient="linear(to-r, blue.500, purple.600)"
-                color="white"
-                _hover={{
-                  bgGradient: 'linear(to-r, blue.600, purple.700)',
-                  boxShadow: '0 8px 20px rgba(139, 92, 246, 0.4)',
-                }}
-                _active={{
-                  transform: 'translateY(0)',
-                  boxShadow: '0 4px 12px rgba(139, 92, 246, 0.3)',
-                }}
-              />
-            </motion.div>
-          </HStack>
-
-          <HStack spacing={4} mt={2} fontSize="xs" color="gray.500">
-            <HStack spacing={1}>
-              <Kbd bg="rgba(255, 255, 255, 0.05)" color="gray.400" borderColor="rgba(255, 255, 255, 0.1)">
-                Enter
-              </Kbd>
-              <Text>发送</Text>
-            </HStack>
-            <HStack spacing={1}>
-              <Kbd bg="rgba(255, 255, 255, 0.05)" color="gray.400" borderColor="rgba(255, 255, 255, 0.1)">
-                Shift
-              </Kbd>
-              <Text>+</Text>
-              <Kbd bg="rgba(255, 255, 255, 0.05)" color="gray.400" borderColor="rgba(255, 255, 255, 0.1)">
-                Enter
-              </Kbd>
-              <Text>换行</Text>
-            </HStack>
-          </HStack>
-        </Box>
-      </Box>
-    </Flex>
-  );
-};
-
-export default ChatArea;

src/views/AgentChat/components/ChatArea/index.tsx

@@ -0,0 +1,141 @@
+// src/views/AgentChat/components/ChatArea/index.tsx
+// 中间聊天区域组件（重构版本）
+
+import React, { useRef, useEffect } from 'react';
+import { Flex } from '@chakra-ui/react';
+import ChatHeader from './ChatHeader';
+import MessageList from './MessageList';
+import QuickQuestions from './QuickQuestions';
+import ChatInput from './ChatInput';
+import type { Message, UploadedFile } from './types';
+
+/**
+ * ChatArea 组件的 Props 类型
+ */
+interface ChatAreaProps {
+  /** 消息列表 */
+  messages: Message[];
+  /** 输入框内容 */
+  inputValue: string;
+  /** 输入框变化回调 */
+  onInputChange: (value: string) => void;
+  /** 处理中状态 */
+  isProcessing: boolean;
+  /** 发送消息回调 */
+  onSendMessage: () => void;
+  /** 键盘事件回调 */
+  onKeyPress: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+  /** 已上传文件列表 */
+  uploadedFiles: UploadedFile[];
+  /** 文件选择回调 */
+  onFileSelect: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  /** 文件删除回调 */
+  onFileRemove: (index: number) => void;
+  /** 当前选中的模型 ID */
+  selectedModel: string;
+  /** 左侧栏是否展开 */
+  isLeftSidebarOpen: boolean;
+  /** 右侧栏是否展开 */
+  isRightSidebarOpen: boolean;
+  /** 切换左侧栏回调 */
+  onToggleLeftSidebar: () => void;
+  /** 切换右侧栏回调 */
+  onToggleRightSidebar: () => void;
+  /** 新建会话回调 */
+  onNewSession: () => void;
+  /** 用户头像 URL */
+  userAvatar?: string;
+  /** 输入框引用 */
+  inputRef: React.RefObject<HTMLInputElement>;
+  /** 文件上传输入引用 */
+  fileInputRef: React.RefObject<HTMLInputElement>;
+}
+
+/**
+ * ChatArea - 中间聊天区域组件（重构版本）
+ *
+ * 架构改进：
+ * - 顶部标题栏提取到 ChatHeader 组件（100 行）
+ * - 消息列表提取到 MessageList 组件（120 行）
+ * - 快捷问题提取到 QuickQuestions 组件（80 行）
+ * - 输入框区域提取到 ChatInput 组件（150 行）
+ * - MessageRenderer 和 ExecutionStepsDisplay 已迁移为 TS
+ *
+ * 主组件职责：
+ * 1. 管理消息列表自动滚动
+ * 2. 组合渲染所有子组件
+ * 3. 布局控制（Flex 容器）
+ */
+const ChatArea: React.FC<ChatAreaProps> = ({
+  messages,
+  inputValue,
+  onInputChange,
+  isProcessing,
+  onSendMessage,
+  onKeyPress,
+  uploadedFiles,
+  onFileSelect,
+  onFileRemove,
+  selectedModel,
+  isLeftSidebarOpen,
+  isRightSidebarOpen,
+  onToggleLeftSidebar,
+  onToggleRightSidebar,
+  onNewSession,
+  userAvatar,
+  inputRef,
+  fileInputRef,
+}) => {
+  // ==================== 自动滚动功能 ====================
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages]);
+
+  // ==================== 渲染组件 ====================
+  return (
+    <Flex flex={1} direction="column">
+      {/* 顶部标题栏 */}
+      <ChatHeader
+        selectedModel={selectedModel}
+        isLeftSidebarOpen={isLeftSidebarOpen}
+        isRightSidebarOpen={isRightSidebarOpen}
+        onToggleLeftSidebar={onToggleLeftSidebar}
+        onToggleRightSidebar={onToggleRightSidebar}
+        onNewSession={onNewSession}
+      />
+
+      {/* 消息列表 */}
+      <MessageList
+        messages={messages}
+        userAvatar={userAvatar}
+        messagesEndRef={messagesEndRef}
+      />
+
+      {/* 快捷问题（仅在消息少于 2 条时显示） */}
+      <QuickQuestions
+        messagesCount={messages.length}
+        isProcessing={isProcessing}
+        onQuestionClick={onInputChange}
+        inputRef={inputRef}
+      />
+
+      {/* 输入框区域 */}
+      <ChatInput
+        inputValue={inputValue}
+        onInputChange={onInputChange}
+        onKeyPress={onKeyPress}
+        uploadedFiles={uploadedFiles}
+        onFileSelect={onFileSelect}
+        onFileRemove={onFileRemove}
+        isProcessing={isProcessing}
+        onSendMessage={onSendMessage}
+        inputRef={inputRef}
+        fileInputRef={fileInputRef}
+      />
+    </Flex>
+  );
+};
+
+export default ChatArea;

src/views/AgentChat/components/ChatArea/types.ts

@@ -0,0 +1,44 @@
+// src/views/AgentChat/components/ChatArea/types.ts
+// ChatArea 组件的 TypeScript 类型定义
+
+/**
+ * 上传文件结构
+ */
+export interface UploadedFile {
+  name: string;
+  size?: number;
+  type?: string;
+  url?: string;
+}
+
+/**
+ * 执行步骤结构
+ */
+export interface ExecutionStep {
+  tool_name: string;
+  status: 'success' | 'error' | 'pending';
+  execution_time?: number;
+  error?: string;
+  result?: unknown;
+}
+
+/**
+ * 消息数据结构
+ */
+export interface Message {
+  id: string | number;
+  type: string; // 使用 MessageTypes 枚举
+  content: string;
+  timestamp?: string | Date;
+  files?: UploadedFile[];
+  execution_results?: ExecutionStep[];
+  plan?: unknown;
+}
+
+/**
+ * 快捷问题结构
+ */
+export interface QuickQuestion {
+  emoji: string;
+  text: string;
+}

src/views/AgentChat/components/RightSidebar/ModelSelector.tsx

@@ -0,0 +1,118 @@
+// src/views/AgentChat/components/RightSidebar/ModelSelector.tsx
+// 模型选择组件
+
+import React from 'react';
+import { motion } from 'framer-motion';
+import {
+  Card,
+  CardBody,
+  HStack,
+  VStack,
+  Box,
+  Text,
+} from '@chakra-ui/react';
+import { Check } from 'lucide-react';
+import { AVAILABLE_MODELS } from '../../constants/models';
+
+/**
+ * ModelSelector 组件的 Props 类型
+ */
+interface ModelSelectorProps {
+  /** 当前选中的模型 ID */
+  selectedModel: string;
+  /** 模型切换回调 */
+  onModelChange: (modelId: string) => void;
+}
+
+/**
+ * ModelSelector - 模型选择组件
+ *
+ * 职责：
+ * 1. 渲染模型选择卡片列表
+ * 2. 显示模型图标、名称、描述
+ * 3. 高亮当前选中模型（紫色边框 + 发光效果）
+ * 4. 显示选中标记（Check 图标 + 弹簧动画）
+ *
+ * 设计特性：
+ * - 卡片渐进入场动画（延迟 `idx * 0.1`）
+ * - 悬停缩放 1.02x + 上移 2px
+ * - 选中态：紫色边框 + 发光效果
+ * - 模型图标渐变色背景
+ */
+const ModelSelector: React.FC<ModelSelectorProps> = ({ selectedModel, onModelChange }) => {
+  return (
+    <VStack spacing={3} align="stretch">
+      {AVAILABLE_MODELS.map((model, idx) => {
+        const isSelected = selectedModel === model.id;
+
+        return (
+          <motion.div
+            key={model.id}
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: idx * 0.1 }}
+            whileHover={{ scale: 1.02, y: -2 }}
+            whileTap={{ scale: 0.98 }}
+          >
+            <Card
+              cursor="pointer"
+              onClick={() => onModelChange(model.id)}
+              bg={isSelected ? 'rgba(139, 92, 246, 0.15)' : 'rgba(255, 255, 255, 0.05)'}
+              backdropFilter="blur(12px)"
+              borderWidth={2}
+              borderColor={isSelected ? 'purple.400' : 'rgba(255, 255, 255, 0.1)'}
+              _hover={{
+                borderColor: isSelected ? 'purple.400' : 'rgba(255, 255, 255, 0.2)',
+                boxShadow: isSelected
+                  ? '0 8px 20px rgba(139, 92, 246, 0.4)'
+                  : '0 4px 12px rgba(0, 0, 0, 0.3)',
+              }}
+              transition="all 0.3s"
+            >
+              <CardBody p={3}>
+                <HStack align="start" spacing={3}>
+                  {/* 模型图标 */}
+                  <Box
+                    p={2}
+                    borderRadius="lg"
+                    bgGradient={
+                      isSelected
+                        ? 'linear(to-br, purple.500, pink.500)'
+                        : 'linear(to-br, rgba(139, 92, 246, 0.2), rgba(236, 72, 153, 0.2))'
+                    }
+                    boxShadow={isSelected ? '0 4px 12px rgba(139, 92, 246, 0.4)' : 'none'}
+                  >
+                    {model.icon}
+                  </Box>
+
+                  {/* 模型信息 */}
+                  <Box flex={1}>
+                    <Text fontWeight="semibold" fontSize="sm" color="gray.100">
+                      {model.name}
+                    </Text>
+                    <Text fontSize="xs" color="gray.400" mt={1}>
+                      {model.description}
+                    </Text>
+                  </Box>
+
+                  {/* 选中标记（Check 图标） */}
+                  {isSelected && (
+                    <motion.div
+                      initial={{ scale: 0 }}
+                      animate={{ scale: 1 }}
+                      transition={{ type: 'spring', stiffness: 500, damping: 30 }}
+                    >
+                      <Check className="w-5 h-5" color="#A78BFA" />
+                    </motion.div>
+                  )}
+                </HStack>
+              </CardBody>
+            </Card>
+          </motion.div>
+        );
+      })}
+    </VStack>
+  );
+};
+
+export default ModelSelector;

src/views/AgentChat/components/RightSidebar/Statistics.tsx

@@ -0,0 +1,119 @@
+// src/views/AgentChat/components/RightSidebar/Statistics.tsx
+// 统计信息组件
+
+import React from 'react';
+import { motion } from 'framer-motion';
+import {
+  Card,
+  CardBody,
+  VStack,
+  Flex,
+  Box,
+  Text,
+} from '@chakra-ui/react';
+import { MessageSquare, Activity, Code } from 'lucide-react';
+
+/**
+ * Statistics 组件的 Props 类型
+ */
+interface StatisticsProps {
+  /** 对话总数 */
+  sessionsCount: number;
+  /** 消息总数 */
+  messagesCount: number;
+  /** 已选工具数 */
+  selectedToolsCount: number;
+}
+
+/**
+ * Statistics - 统计信息组件
+ *
+ * 职责：
+ * 1. 显示统计卡片（对话数、消息数、已选工具数）
+ * 2. 渐变色大数字展示
+ * 3. 图标装饰
+ *
+ * 设计特性：
+ * - 卡片渐进入场动画（延迟 `idx * 0.1`）
+ * - 毛玻璃效果卡片
+ * - 渐变色数字（蓝紫/紫粉/绿青）
+ * - 半透明图标装饰
+ */
+const Statistics: React.FC<StatisticsProps> = ({
+  sessionsCount,
+  messagesCount,
+  selectedToolsCount,
+}) => {
+  const stats = [
+    {
+      label: '对话数',
+      value: sessionsCount,
+      gradient: 'linear(to-r, blue.400, purple.400)',
+      icon: MessageSquare,
+      iconColor: '#60A5FA',
+    },
+    {
+      label: '消息数',
+      value: messagesCount,
+      gradient: 'linear(to-r, purple.400, pink.400)',
+      icon: Activity,
+      iconColor: '#C084FC',
+    },
+    {
+      label: '已选工具',
+      value: selectedToolsCount,
+      gradient: 'linear(to-r, green.400, teal.400)',
+      icon: Code,
+      iconColor: '#34D399',
+    },
+  ];
+
+  return (
+    <VStack spacing={4} align="stretch">
+      {stats.map((stat, idx) => {
+        const Icon = stat.icon;
+
+        return (
+          <motion.div
+            key={stat.label}
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: idx * 0.1 }}
+          >
+            <Card
+              bg="rgba(255, 255, 255, 0.05)"
+              backdropFilter="blur(12px)"
+              border="1px solid"
+              borderColor="rgba(255, 255, 255, 0.1)"
+              boxShadow="0 8px 32px 0 rgba(31, 38, 135, 0.37)"
+            >
+              <CardBody p={4}>
+                <Flex align="center" justify="space-between">
+                  {/* 左侧：标签和数值 */}
+                  <Box>
+                    <Text fontSize="xs" color="gray.400">
+                      {stat.label}
+                    </Text>
+                    <Text
+                      fontSize="2xl"
+                      fontWeight="bold"
+                      bgGradient={stat.gradient}
+                      bgClip="text"
+                    >
+                      {stat.value}
+                    </Text>
+                  </Box>
+
+                  {/* 右侧：图标装饰 */}
+                  <Icon className="w-8 h-8" color={stat.iconColor} style={{ opacity: 0.5 }} />
+                </Flex>
+              </CardBody>
+            </Card>
+          </motion.div>
+        );
+      })}
+    </VStack>
+  );
+};
+
+export default Statistics;

src/views/AgentChat/components/RightSidebar/ToolSelector.tsx

@@ -0,0 +1,199 @@
+// src/views/AgentChat/components/RightSidebar/ToolSelector.tsx
+// 工具选择组件
+
+import React from 'react';
+import { motion } from 'framer-motion';
+import {
+  Button,
+  Badge,
+  Checkbox,
+  CheckboxGroup,
+  Accordion,
+  AccordionItem,
+  AccordionButton,
+  AccordionPanel,
+  AccordionIcon,
+  HStack,
+  VStack,
+  Box,
+  Text,
+} from '@chakra-ui/react';
+import { MCP_TOOLS, TOOL_CATEGORIES } from '../../constants/tools';
+
+/**
+ * ToolSelector 组件的 Props 类型
+ */
+interface ToolSelectorProps {
+  /** 已选工具 ID 列表 */
+  selectedTools: string[];
+  /** 工具选择变化回调 */
+  onToolsChange: (tools: string[]) => void;
+}
+
+/**
+ * ToolSelector - 工具选择组件
+ *
+ * 职责：
+ * 1. 按分类展示工具列表（Accordion 手风琴）
+ * 2. 复选框选择/取消工具
+ * 3. 显示每个分类的已选/总数（如 "3/5"）
+ * 4. 全选/清空按钮
+ *
+ * 设计特性：
+ * - 手风琴分类折叠
+ * - 悬停工具项右移 4px
+ * - 全选/清空按钮渐变色
+ * - 分类徽章显示选中数量
+ */
+const ToolSelector: React.FC<ToolSelectorProps> = ({ selectedTools, onToolsChange }) => {
+  /**
+   * 全选所有工具
+   */
+  const handleSelectAll = () => {
+    onToolsChange(MCP_TOOLS.map((t) => t.id));
+  };
+
+  /**
+   * 清空所有选择
+   */
+  const handleClearAll = () => {
+    onToolsChange([]);
+  };
+
+  return (
+    <>
+      {/* 工具分类手风琴 */}
+      <Accordion allowMultiple>
+        {Object.entries(TOOL_CATEGORIES).map(([category, tools], catIdx) => {
+          const selectedCount = tools.filter((t) => selectedTools.includes(t.id)).length;
+          const totalCount = tools.length;
+
+          return (
+            <motion.div
+              key={category}
+              initial={{ opacity: 0, y: 10 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: catIdx * 0.05 }}
+            >
+              <AccordionItem
+                border="1px solid"
+                borderColor="rgba(255, 255, 255, 0.1)"
+                borderRadius="lg"
+                mb={2}
+                bg="rgba(255, 255, 255, 0.05)"
+                backdropFilter="blur(12px)"
+                _hover={{
+                  bg: 'rgba(255, 255, 255, 0.08)',
+                  borderColor: 'rgba(255, 255, 255, 0.2)',
+                }}
+              >
+                {/* 手风琴标题 */}
+                <AccordionButton>
+                  <HStack flex={1} justify="space-between" pr={2}>
+                    <Text color="gray.100" fontSize="sm">
+                      {category}
+                    </Text>
+                    <Badge
+                      bgGradient="linear(to-r, blue.500, purple.500)"
+                      color="white"
+                      variant="subtle"
+                      boxShadow="0 2px 8px rgba(139, 92, 246, 0.3)"
+                    >
+                      {selectedCount}/{totalCount}
+                    </Badge>
+                  </HStack>
+                  <AccordionIcon color="gray.400" />
+                </AccordionButton>
+
+                {/* 手风琴内容 */}
+                <AccordionPanel pb={4}>
+                  <CheckboxGroup value={selectedTools} onChange={onToolsChange}>
+                    <VStack align="stretch" spacing={2}>
+                      {tools.map((tool) => (
+                        <motion.div
+                          key={tool.id}
+                          whileHover={{ x: 4 }}
+                          transition={{ type: 'spring', stiffness: 300 }}
+                        >
+                          <Checkbox
+                            value={tool.id}
+                            colorScheme="purple"
+                            p={2}
+                            borderRadius="lg"
+                            bg="rgba(255, 255, 255, 0.02)"
+                            _hover={{ bg: 'rgba(255, 255, 255, 0.05)' }}
+                            transition="background 0.2s"
+                          >
+                            <HStack spacing={2} align="start">
+                              {/* 工具图标 */}
+                              <Box color="purple.400" mt={0.5}>
+                                {tool.icon}
+                              </Box>
+
+                              {/* 工具信息 */}
+                              <Box>
+                                <Text fontSize="sm" color="gray.200">
+                                  {tool.name}
+                                </Text>
+                                <Text fontSize="xs" color="gray.500">
+                                  {tool.description}
+                                </Text>
+                              </Box>
+                            </HStack>
+                          </Checkbox>
+                        </motion.div>
+                      ))}
+                    </VStack>
+                  </CheckboxGroup>
+                </AccordionPanel>
+              </AccordionItem>
+            </motion.div>
+          );
+        })}
+      </Accordion>
+
+      {/* 全选/清空按钮 */}
+      <HStack mt={4} spacing={2}>
+        {/* 全选按钮 */}
+        <motion.div flex={1} whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>
+          <Button
+            size="sm"
+            w="full"
+            variant="ghost"
+            onClick={handleSelectAll}
+            bgGradient="linear(to-r, blue.500, purple.500)"
+            color="white"
+            _hover={{
+              bgGradient: 'linear(to-r, blue.600, purple.600)',
+              boxShadow: '0 4px 12px rgba(139, 92, 246, 0.4)',
+            }}
+          >
+            全选
+          </Button>
+        </motion.div>
+
+        {/* 清空按钮 */}
+        <motion.div flex={1} whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>
+          <Button
+            size="sm"
+            w="full"
+            variant="ghost"
+            onClick={handleClearAll}
+            bg="rgba(255, 255, 255, 0.05)"
+            color="gray.300"
+            border="1px solid"
+            borderColor="rgba(255, 255, 255, 0.1)"
+            _hover={{
+              bg: 'rgba(255, 255, 255, 0.1)',
+              borderColor: 'rgba(255, 255, 255, 0.2)',
+            }}
+          >
+            清空
+          </Button>
+        </motion.div>
+      </HStack>
+    </>
+  );
+};
+
+export default ToolSelector;

src/views/AgentChat/components/RightSidebar/index.js

@@ -1,499 +0,0 @@
-// src/views/AgentChat/components/RightSidebar/index.js
-// 右侧栏组件 - 配置中心
-
-import React from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
-import {
-  Box,
-  Button,
-  Badge,
-  Checkbox,
-  CheckboxGroup,
-  Tooltip,
-  IconButton,
-  Accordion,
-  AccordionItem,
-  AccordionButton,
-  AccordionPanel,
-  AccordionIcon,
-  Tabs,
-  TabList,
-  TabPanels,
-  Tab,
-  TabPanel,
-  Card,
-  CardBody,
-  HStack,
-  VStack,
-  Flex,
-  Text,
-} from '@chakra-ui/react';
-import {
-  Settings,
-  ChevronRight,
-  Cpu,
-  Code,
-  BarChart3,
-  Check,
-  MessageSquare,
-  Activity,
-} from 'lucide-react';
-import { animations } from '../../constants/animations';
-import { AVAILABLE_MODELS } from '../../constants/models';
-import { MCP_TOOLS, TOOL_CATEGORIES } from '../../constants/tools';
-
-/**
- * RightSidebar - 右侧栏组件（配置中心）
- *
- * @param {Object} props
- * @param {boolean} props.isOpen - 侧边栏是否展开
- * @param {Function} props.onClose - 关闭侧边栏回调
- * @param {string} props.selectedModel - 当前选中的模型 ID
- * @param {Function} props.onModelChange - 模型切换回调
- * @param {Array} props.selectedTools - 已选工具 ID 列表
- * @param {Function} props.onToolsChange - 工具选择变化回调
- * @param {number} props.sessionsCount - 会话总数
- * @param {number} props.messagesCount - 消息总数
- * @returns {JSX.Element|null}
- */
-const RightSidebar = ({
-  isOpen,
-  onClose,
-  selectedModel,
-  onModelChange,
-  selectedTools,
-  onToolsChange,
-  sessionsCount,
-  messagesCount,
-}) => {
-  return (
-    <AnimatePresence>
-      {isOpen && (
-        <motion.div
-          style={{ width: '320px', display: 'flex', flexDirection: 'column' }}
-          initial="initial"
-          animate="animate"
-          exit="exit"
-          variants={animations.slideInRight}
-        >
-          <Box
-            w="320px"
-            h="100%"
-            display="flex"
-            flexDirection="column"
-            bg="rgba(17, 24, 39, 0.8)"
-            backdropFilter="blur(20px) saturate(180%)"
-            borderLeft="1px solid"
-            borderColor="rgba(255, 255, 255, 0.1)"
-            boxShadow="-4px 0 24px rgba(0, 0, 0, 0.3)"
-          >
-            {/* 标题栏 */}
-            <Box p={4} borderBottom="1px solid" borderColor="rgba(255, 255, 255, 0.1)">
-              <HStack justify="space-between">
-                <HStack spacing={2}>
-                  <Settings className="w-5 h-5" color="#C084FC" />
-                  <Text
-                    fontWeight="semibold"
-                    bgGradient="linear(to-r, purple.300, pink.300)"
-                    bgClip="text"
-                    fontSize="md"
-                  >
-                    配置中心
-                  </Text>
-                </HStack>
-                <Tooltip label="收起侧边栏">
-                  <motion.div whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }}>
-                    <IconButton
-                      size="sm"
-                      variant="ghost"
-                      icon={<ChevronRight className="w-4 h-4" />}
-                      onClick={onClose}
-                      bg="rgba(255, 255, 255, 0.05)"
-                      color="gray.300"
-                      backdropFilter="blur(10px)"
-                      border="1px solid"
-                      borderColor="rgba(255, 255, 255, 0.1)"
-                      _hover={{
-                        bg: 'rgba(255, 255, 255, 0.1)',
-                        borderColor: 'purple.400',
-                        color: 'white',
-                      }}
-                    />
-                  </motion.div>
-                </Tooltip>
-              </HStack>
-            </Box>
-
-            {/* Tab 面板 */}
-            <Box flex={1} overflowY="auto">
-              <Tabs colorScheme="purple" variant="line">
-                <TabList px={4} borderBottom="1px solid" borderColor="rgba(255, 255, 255, 0.1)">
-                  <Tab
-                    color="gray.400"
-                    _selected={{
-                      color: 'purple.400',
-                      borderColor: 'purple.500',
-                      boxShadow: '0 2px 8px rgba(139, 92, 246, 0.3)',
-                    }}
-                  >
-                    <HStack spacing={2}>
-                      <Cpu className="w-4 h-4" />
-                      <Text>模型</Text>
-                    </HStack>
-                  </Tab>
-                  <Tab
-                    color="gray.400"
-                    _selected={{
-                      color: 'purple.400',
-                      borderColor: 'purple.500',
-                      boxShadow: '0 2px 8px rgba(139, 92, 246, 0.3)',
-                    }}
-                  >
-                    <HStack spacing={2}>
-                      <Code className="w-4 h-4" />
-                      <Text>工具</Text>
-                      {selectedTools.length > 0 && (
-                        <Badge
-                          bgGradient="linear(to-r, blue.500, purple.500)"
-                          color="white"
-                          borderRadius="full"
-                          fontSize="xs"
-                          px={2}
-                          py={0.5}
-                          boxShadow="0 2px 8px rgba(139, 92, 246, 0.3)"
-                        >
-                          {selectedTools.length}
-                        </Badge>
-                      )}
-                    </HStack>
-                  </Tab>
-                  <Tab
-                    color="gray.400"
-                    _selected={{
-                      color: 'purple.400',
-                      borderColor: 'purple.500',
-                      boxShadow: '0 2px 8px rgba(139, 92, 246, 0.3)',
-                    }}
-                  >
-                    <HStack spacing={2}>
-                      <BarChart3 className="w-4 h-4" />
-                      <Text>统计</Text>
-                    </HStack>
-                  </Tab>
-                </TabList>
-
-                <TabPanels>
-                  {/* 模型选择 */}
-                  <TabPanel p={4}>
-                    <VStack spacing={3} align="stretch">
-                      {AVAILABLE_MODELS.map((model, idx) => (
-                        <motion.div
-                          key={model.id}
-                          initial={{ opacity: 0, y: 10 }}
-                          animate={{ opacity: 1, y: 0 }}
-                          transition={{ delay: idx * 0.1 }}
-                          whileHover={{ scale: 1.02, y: -2 }}
-                          whileTap={{ scale: 0.98 }}
-                        >
-                          <Card
-                            cursor="pointer"
-                            onClick={() => onModelChange(model.id)}
-                            bg={
-                              selectedModel === model.id
-                                ? 'rgba(139, 92, 246, 0.15)'
-                                : 'rgba(255, 255, 255, 0.05)'
-                            }
-                            backdropFilter="blur(12px)"
-                            borderWidth={2}
-                            borderColor={
-                              selectedModel === model.id ? 'purple.400' : 'rgba(255, 255, 255, 0.1)'
-                            }
-                            _hover={{
-                              borderColor:
-                                selectedModel === model.id ? 'purple.400' : 'rgba(255, 255, 255, 0.2)',
-                              boxShadow:
-                                selectedModel === model.id
-                                  ? '0 8px 20px rgba(139, 92, 246, 0.4)'
-                                  : '0 4px 12px rgba(0, 0, 0, 0.3)',
-                            }}
-                            transition="all 0.3s"
-                          >
-                            <CardBody p={3}>
-                              <HStack align="start" spacing={3}>
-                                <Box
-                                  p={2}
-                                  borderRadius="lg"
-                                  bgGradient={
-                                    selectedModel === model.id
-                                      ? 'linear(to-br, purple.500, pink.500)'
-                                      : 'linear(to-br, rgba(139, 92, 246, 0.2), rgba(236, 72, 153, 0.2))'
-                                  }
-                                  boxShadow={
-                                    selectedModel === model.id
-                                      ? '0 4px 12px rgba(139, 92, 246, 0.4)'
-                                      : 'none'
-                                  }
-                                >
-                                  {model.icon}
-                                </Box>
-                                <Box flex={1}>
-                                  <Text fontWeight="semibold" fontSize="sm" color="gray.100">
-                                    {model.name}
-                                  </Text>
-                                  <Text fontSize="xs" color="gray.400" mt={1}>
-                                    {model.description}
-                                  </Text>
-                                </Box>
-                                {selectedModel === model.id && (
-                                  <motion.div
-                                    initial={{ scale: 0 }}
-                                    animate={{ scale: 1 }}
-                                    transition={{ type: 'spring', stiffness: 500, damping: 30 }}
-                                  >
-                                    <Check className="w-5 h-5" color="#A78BFA" />
-                                  </motion.div>
-                                )}
-                              </HStack>
-                            </CardBody>
-                          </Card>
-                        </motion.div>
-                      ))}
-                    </VStack>
-                  </TabPanel>
-
-                  {/* 工具选择 */}
-                  <TabPanel p={4}>
-                    <Accordion allowMultiple>
-                      {Object.entries(TOOL_CATEGORIES).map(([category, tools], catIdx) => (
-                        <motion.div
-                          key={category}
-                          initial={{ opacity: 0, y: 10 }}
-                          animate={{ opacity: 1, y: 0 }}
-                          transition={{ delay: catIdx * 0.05 }}
-                        >
-                          <AccordionItem
-                            border="1px solid"
-                            borderColor="rgba(255, 255, 255, 0.1)"
-                            borderRadius="lg"
-                            mb={2}
-                            bg="rgba(255, 255, 255, 0.05)"
-                            backdropFilter="blur(12px)"
-                            _hover={{
-                              bg: 'rgba(255, 255, 255, 0.08)',
-                              borderColor: 'rgba(255, 255, 255, 0.2)',
-                            }}
-                          >
-                            <AccordionButton>
-                              <HStack flex={1} justify="space-between" pr={2}>
-                                <Text color="gray.100" fontSize="sm">
-                                  {category}
-                                </Text>
-                                <Badge
-                                  bgGradient="linear(to-r, blue.500, purple.500)"
-                                  color="white"
-                                  variant="subtle"
-                                  boxShadow="0 2px 8px rgba(139, 92, 246, 0.3)"
-                                >
-                                  {tools.filter((t) => selectedTools.includes(t.id)).length}/{tools.length}
-                                </Badge>
-                              </HStack>
-                              <AccordionIcon color="gray.400" />
-                            </AccordionButton>
-                            <AccordionPanel pb={4}>
-                              <CheckboxGroup value={selectedTools} onChange={onToolsChange}>
-                                <VStack align="stretch" spacing={2}>
-                                  {tools.map((tool) => (
-                                    <motion.div
-                                      key={tool.id}
-                                      whileHover={{ x: 4 }}
-                                      transition={{ type: 'spring', stiffness: 300 }}
-                                    >
-                                      <Checkbox
-                                        value={tool.id}
-                                        colorScheme="purple"
-                                        p={2}
-                                        borderRadius="lg"
-                                        bg="rgba(255, 255, 255, 0.02)"
-                                        _hover={{ bg: 'rgba(255, 255, 255, 0.05)' }}
-                                        transition="background 0.2s"
-                                      >
-                                        <HStack spacing={2} align="start">
-                                          <Box color="purple.400" mt={0.5}>
-                                            {tool.icon}
-                                          </Box>
-                                          <Box>
-                                            <Text fontSize="sm" color="gray.200">
-                                              {tool.name}
-                                            </Text>
-                                            <Text fontSize="xs" color="gray.500">
-                                              {tool.description}
-                                            </Text>
-                                          </Box>
-                                        </HStack>
-                                      </Checkbox>
-                                    </motion.div>
-                                  ))}
-                                </VStack>
-                              </CheckboxGroup>
-                            </AccordionPanel>
-                          </AccordionItem>
-                        </motion.div>
-                      ))}
-                    </Accordion>
-
-                    <HStack mt={4} spacing={2}>
-                      <motion.div flex={1} whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>
-                        <Button
-                          size="sm"
-                          w="full"
-                          variant="ghost"
-                          onClick={() => onToolsChange(MCP_TOOLS.map((t) => t.id))}
-                          bgGradient="linear(to-r, blue.500, purple.500)"
-                          color="white"
-                          _hover={{
-                            bgGradient: 'linear(to-r, blue.600, purple.600)',
-                            boxShadow: '0 4px 12px rgba(139, 92, 246, 0.4)',
-                          }}
-                        >
-                          全选
-                        </Button>
-                      </motion.div>
-                      <motion.div flex={1} whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>
-                        <Button
-                          size="sm"
-                          w="full"
-                          variant="ghost"
-                          onClick={() => onToolsChange([])}
-                          bg="rgba(255, 255, 255, 0.05)"
-                          color="gray.300"
-                          border="1px solid"
-                          borderColor="rgba(255, 255, 255, 0.1)"
-                          _hover={{
-                            bg: 'rgba(255, 255, 255, 0.1)',
-                            borderColor: 'rgba(255, 255, 255, 0.2)',
-                          }}
-                        >
-                          清空
-                        </Button>
-                      </motion.div>
-                    </HStack>
-                  </TabPanel>
-
-                  {/* 统计信息 */}
-                  <TabPanel p={4}>
-                    <VStack spacing={4} align="stretch">
-                      <motion.div
-                        initial={{ opacity: 0, y: 10 }}
-                        animate={{ opacity: 1, y: 0 }}
-                        transition={{ delay: 0 }}
-                      >
-                        <Card
-                          bg="rgba(255, 255, 255, 0.05)"
-                          backdropFilter="blur(12px)"
-                          border="1px solid"
-                          borderColor="rgba(255, 255, 255, 0.1)"
-                          boxShadow="0 8px 32px 0 rgba(31, 38, 135, 0.37)"
-                        >
-                          <CardBody p={4}>
-                            <Flex align="center" justify="space-between">
-                              <Box>
-                                <Text fontSize="xs" color="gray.400">
-                                  对话数
-                                </Text>
-                                <Text
-                                  fontSize="2xl"
-                                  fontWeight="bold"
-                                  bgGradient="linear(to-r, blue.400, purple.400)"
-                                  bgClip="text"
-                                >
-                                  {sessionsCount}
-                                </Text>
-                              </Box>
-                              <MessageSquare
-                                className="w-8 h-8"
-                                color="#60A5FA"
-                                style={{ opacity: 0.5 }}
-                              />
-                            </Flex>
-                          </CardBody>
-                        </Card>
-                      </motion.div>
-
-                      <motion.div
-                        initial={{ opacity: 0, y: 10 }}
-                        animate={{ opacity: 1, y: 0 }}
-                        transition={{ delay: 0.1 }}
-                      >
-                        <Card
-                          bg="rgba(255, 255, 255, 0.05)"
-                          backdropFilter="blur(12px)"
-                          border="1px solid"
-                          borderColor="rgba(255, 255, 255, 0.1)"
-                          boxShadow="0 8px 32px 0 rgba(31, 38, 135, 0.37)"
-                        >
-                          <CardBody p={4}>
-                            <Flex align="center" justify="space-between">
-                              <Box>
-                                <Text fontSize="xs" color="gray.400">
-                                  消息数
-                                </Text>
-                                <Text
-                                  fontSize="2xl"
-                                  fontWeight="bold"
-                                  bgGradient="linear(to-r, purple.400, pink.400)"
-                                  bgClip="text"
-                                >
-                                  {messagesCount}
-                                </Text>
-                              </Box>
-                              <Activity className="w-8 h-8" color="#C084FC" style={{ opacity: 0.5 }} />
-                            </Flex>
-                          </CardBody>
-                        </Card>
-                      </motion.div>
-
-                      <motion.div
-                        initial={{ opacity: 0, y: 10 }}
-                        animate={{ opacity: 1, y: 0 }}
-                        transition={{ delay: 0.2 }}
-                      >
-                        <Card
-                          bg="rgba(255, 255, 255, 0.05)"
-                          backdropFilter="blur(12px)"
-                          border="1px solid"
-                          borderColor="rgba(255, 255, 255, 0.1)"
-                          boxShadow="0 8px 32px 0 rgba(31, 38, 135, 0.37)"
-                        >
-                          <CardBody p={4}>
-                            <Flex align="center" justify="space-between">
-                              <Box>
-                                <Text fontSize="xs" color="gray.400">
-                                  已选工具
-                                </Text>
-                                <Text
-                                  fontSize="2xl"
-                                  fontWeight="bold"
-                                  bgGradient="linear(to-r, green.400, teal.400)"
-                                  bgClip="text"
-                                >
-                                  {selectedTools.length}
-                                </Text>
-                              </Box>
-                              <Code className="w-8 h-8" color="#34D399" style={{ opacity: 0.5 }} />
-                            </Flex>
-                          </CardBody>
-                        </Card>
-                      </motion.div>
-                    </VStack>
-                  </TabPanel>
-                </TabPanels>
-              </Tabs>
-            </Box>
-          </Box>
-        </motion.div>
-      )}
-    </AnimatePresence>
-  );
-};
-
-export default RightSidebar;

src/views/AgentChat/components/RightSidebar/index.tsx

@@ -0,0 +1,240 @@
+// src/views/AgentChat/components/RightSidebar/index.tsx
+// 右侧栏组件 - 配置中心（重构版本）
+
+import React from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import {
+  Box,
+  Tooltip,
+  IconButton,
+  Tabs,
+  TabList,
+  TabPanels,
+  Tab,
+  TabPanel,
+  Badge,
+  HStack,
+  Text,
+} from '@chakra-ui/react';
+import {
+  Settings,
+  ChevronRight,
+  Cpu,
+  Code,
+  BarChart3,
+} from 'lucide-react';
+import { animations } from '../../constants/animations';
+import ModelSelector from './ModelSelector';
+import ToolSelector from './ToolSelector';
+import Statistics from './Statistics';
+
+/**
+ * RightSidebar 组件的 Props 类型
+ */
+interface RightSidebarProps {
+  /** 侧边栏是否展开 */
+  isOpen: boolean;
+  /** 关闭侧边栏回调 */
+  onClose: () => void;
+  /** 当前选中的模型 ID */
+  selectedModel: string;
+  /** 模型切换回调 */
+  onModelChange: (modelId: string) => void;
+  /** 已选工具 ID 列表 */
+  selectedTools: string[];
+  /** 工具选择变化回调 */
+  onToolsChange: (tools: string[]) => void;
+  /** 会话总数 */
+  sessionsCount: number;
+  /** 消息总数 */
+  messagesCount: number;
+}
+
+/**
+ * RightSidebar - 右侧栏组件（配置中心）（重构版本）
+ *
+ * 架构改进：
+ * - 模型选择提取到 ModelSelector 组件（120 行）
+ * - 工具选择提取到 ToolSelector 组件（200 行）
+ * - 统计信息提取到 Statistics 组件（100 行）
+ * - 主组件只负责 Tabs 管理和布局组合（150 行）
+ *
+ * 主组件职责：
+ * 1. 管理 Tabs 切换（模型/工具/统计）
+ * 2. 渲染标题栏（配置中心 + 收起按钮）
+ * 3. 组合三个子组件（TabPanels）
+ * 4. 处理侧边栏动画（滑入/滑出）
+ */
+const RightSidebar: React.FC<RightSidebarProps> = ({
+  isOpen,
+  onClose,
+  selectedModel,
+  onModelChange,
+  selectedTools,
+  onToolsChange,
+  sessionsCount,
+  messagesCount,
+}) => {
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <motion.div
+          style={{ width: '320px', display: 'flex', flexDirection: 'column' }}
+          initial="initial"
+          animate="animate"
+          exit="exit"
+          variants={animations.slideInRight}
+        >
+          <Box
+            w="320px"
+            h="100%"
+            display="flex"
+            flexDirection="column"
+            bg="rgba(17, 24, 39, 0.8)"
+            backdropFilter="blur(20px) saturate(180%)"
+            borderLeft="1px solid"
+            borderColor="rgba(255, 255, 255, 0.1)"
+            boxShadow="-4px 0 24px rgba(0, 0, 0, 0.3)"
+          >
+            {/* ==================== 标题栏 ==================== */}
+            <Box p={4} borderBottom="1px solid" borderColor="rgba(255, 255, 255, 0.1)">
+              <HStack justify="space-between">
+                {/* 左侧：标题 */}
+                <HStack spacing={2}>
+                  <Settings className="w-5 h-5" color="#C084FC" />
+                  <Text
+                    fontWeight="semibold"
+                    bgGradient="linear(to-r, purple.300, pink.300)"
+                    bgClip="text"
+                    fontSize="md"
+                  >
+                    配置中心
+                  </Text>
+                </HStack>
+
+                {/* 右侧：收起按钮 */}
+                <Tooltip label="收起侧边栏">
+                  <motion.div whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }}>
+                    <IconButton
+                      size="sm"
+                      variant="ghost"
+                      icon={<ChevronRight className="w-4 h-4" />}
+                      onClick={onClose}
+                      aria-label="收起侧边栏"
+                      bg="rgba(255, 255, 255, 0.05)"
+                      color="gray.300"
+                      backdropFilter="blur(10px)"
+                      border="1px solid"
+                      borderColor="rgba(255, 255, 255, 0.1)"
+                      _hover={{
+                        bg: 'rgba(255, 255, 255, 0.1)',
+                        borderColor: 'purple.400',
+                        color: 'white',
+                      }}
+                    />
+                  </motion.div>
+                </Tooltip>
+              </HStack>
+            </Box>
+
+            {/* ==================== Tab 面板 ==================== */}
+            <Box flex={1} overflowY="auto">
+              <Tabs colorScheme="purple" variant="line">
+                {/* Tab 标签栏 */}
+                <TabList px={4} borderBottom="1px solid" borderColor="rgba(255, 255, 255, 0.1)">
+                  {/* 模型 Tab */}
+                  <Tab
+                    color="gray.400"
+                    _selected={{
+                      color: 'purple.400',
+                      borderColor: 'purple.500',
+                      boxShadow: '0 2px 8px rgba(139, 92, 246, 0.3)',
+                    }}
+                  >
+                    <HStack spacing={2}>
+                      <Cpu className="w-4 h-4" />
+                      <Text>模型</Text>
+                    </HStack>
+                  </Tab>
+
+                  {/* 工具 Tab */}
+                  <Tab
+                    color="gray.400"
+                    _selected={{
+                      color: 'purple.400',
+                      borderColor: 'purple.500',
+                      boxShadow: '0 2px 8px rgba(139, 92, 246, 0.3)',
+                    }}
+                  >
+                    <HStack spacing={2}>
+                      <Code className="w-4 h-4" />
+                      <Text>工具</Text>
+                      {selectedTools.length > 0 && (
+                        <Badge
+                          bgGradient="linear(to-r, blue.500, purple.500)"
+                          color="white"
+                          borderRadius="full"
+                          fontSize="xs"
+                          px={2}
+                          py={0.5}
+                          boxShadow="0 2px 8px rgba(139, 92, 246, 0.3)"
+                        >
+                          {selectedTools.length}
+                        </Badge>
+                      )}
+                    </HStack>
+                  </Tab>
+
+                  {/* 统计 Tab */}
+                  <Tab
+                    color="gray.400"
+                    _selected={{
+                      color: 'purple.400',
+                      borderColor: 'purple.500',
+                      boxShadow: '0 2px 8px rgba(139, 92, 246, 0.3)',
+                    }}
+                  >
+                    <HStack spacing={2}>
+                      <BarChart3 className="w-4 h-4" />
+                      <Text>统计</Text>
+                    </HStack>
+                  </Tab>
+                </TabList>
+
+                {/* Tab 内容面板 */}
+                <TabPanels>
+                  {/* 模型选择面板 */}
+                  <TabPanel p={4}>
+                    <ModelSelector
+                      selectedModel={selectedModel}
+                      onModelChange={onModelChange}
+                    />
+                  </TabPanel>
+
+                  {/* 工具选择面板 */}
+                  <TabPanel p={4}>
+                    <ToolSelector
+                      selectedTools={selectedTools}
+                      onToolsChange={onToolsChange}
+                    />
+                  </TabPanel>
+
+                  {/* 统计信息面板 */}
+                  <TabPanel p={4}>
+                    <Statistics
+                      sessionsCount={sessionsCount}
+                      messagesCount={messagesCount}
+                      selectedToolsCount={selectedTools.length}
+                    />
+                  </TabPanel>
+                </TabPanels>
+              </Tabs>
+            </Box>
+          </Box>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+};
+
+export default RightSidebar;

src/views/AgentChat/components/RightSidebar/types.ts

@@ -0,0 +1,27 @@
+// src/views/AgentChat/components/RightSidebar/types.ts
+// RightSidebar 组件的 TypeScript 类型定义
+
+/**
+ * 模型数据结构（来自 constants/models）
+ */
+export interface Model {
+  id: string;
+  name: string;
+  description: string;
+  icon: React.ReactNode;
+}
+
+/**
+ * 工具数据结构（来自 constants/tools）
+ */
+export interface Tool {
+  id: string;
+  name: string;
+  description: string;
+  icon: React.ReactNode;
+}
+
+/**
+ * 工具分类（Map<分类名, 工具列表>）
+ */
+export type ToolCategories = Record<string, Tool[]>;

src/views/AgentChat/utils/sessionUtils.ts

@@ -1,25 +1,27 @@
-// src/views/AgentChat/utils/sessionUtils.js
-// 会话管理工具函数
+// src/views/AgentChat/utils/sessionUtils.ts
+// 会话管理工具函数（TypeScript 版本）
+
+import type { Session, SessionGroups } from '../components/LeftSidebar/types';
 
 /**
  * 按日期分组会话列表
  *
- * @param {Array} sessions - 会话列表
- * @returns {Object} 分组后的会话对象 { today, yesterday, thisWeek, older }
+ * @param sessions - 会话列表
+ * @returns 分组后的会话对象 { today, yesterday, thisWeek, older }
  *
  * @example
  * const groups = groupSessionsByDate(sessions);
  * console.log(groups.today); // 今天的会话
  * console.log(groups.yesterday); // 昨天的会话
  */
-export const groupSessionsByDate = (sessions) => {
+export const groupSessionsByDate = (sessions: Session[]): SessionGroups => {
   const today = new Date();
   const yesterday = new Date(today);
   yesterday.setDate(yesterday.getDate() - 1);
   const weekAgo = new Date(today);
   weekAgo.setDate(weekAgo.getDate() - 7);
 
-  const groups = {
+  const groups: SessionGroups = {
     today: [],
     yesterday: [],
     thisWeek: [],
@@ -27,8 +29,8 @@ export const groupSessionsByDate = (sessions) => {
   };
 
   sessions.forEach((session) => {
-    const sessionDate = new Date(session.created_at || session.timestamp);
-    const daysDiff = Math.floor((today - sessionDate) / (1000 * 60 * 60 * 24));
+    const sessionDate = new Date(session.created_at || session.timestamp || Date.now());
+    const daysDiff = Math.floor((today.getTime() - sessionDate.getTime()) / (1000 * 60 * 60 * 24));
 
     if (daysDiff === 0) {
       groups.today.push(session);

src/views/Dashboard/components/CalendarPanel.tsx

@@ -45,7 +45,7 @@ import FullCalendar from '@fullcalendar/react';
 import dayGridPlugin from '@fullcalendar/daygrid';
 import interactionPlugin from '@fullcalendar/interaction';
 import { DateClickArg } from '@fullcalendar/interaction';
-import { EventClickArg } from '@fullcalendar/common';
+import type { EventClickArg } from '@fullcalendar/core';
 import dayjs, { Dayjs } from 'dayjs';
 import 'dayjs/locale/zh-cn';