diff --git a/src/views/AgentChat/index.js b/src/views/AgentChat/index.js
index 7446357f..7db61de8 100644
--- a/src/views/AgentChat/index.js
+++ b/src/views/AgentChat/index.js
@@ -3,101 +3,23 @@
// 使用 Framer Motion 物理动画引擎 + 毛玻璃效果
import React, { useState, useEffect, useRef } from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
-import {
- Box,
- Button,
- Input,
- Avatar,
- Badge,
- Divider,
- Spinner,
- Tooltip,
- Checkbox,
- CheckboxGroup,
- Kbd,
- Accordion,
- AccordionItem,
- AccordionButton,
- AccordionPanel,
- AccordionIcon,
- Tabs,
- TabList,
- TabPanels,
- Tab,
- TabPanel,
- useToast,
- VStack,
- HStack,
- Text,
- Flex,
- IconButton,
- useColorMode,
- Card,
- CardBody,
- Tag,
- TagLabel,
- TagCloseButton,
-} from '@chakra-ui/react';
+import { Box, Flex, useToast, useColorMode } from '@chakra-ui/react';
import { useAuth } from '@contexts/AuthContext';
import { logger } from '@utils/logger';
import axios from 'axios';
-// 图标 - 使用 Lucide Icons
-import {
- Send,
- Plus,
- Search,
- MessageSquare,
- Trash2,
- MoreVertical,
- RefreshCw,
- Download,
- Cpu,
- User,
- Zap,
- Clock,
- Settings,
- ChevronLeft,
- ChevronRight,
- Activity,
- Code,
- Database,
- TrendingUp,
- FileText,
- BookOpen,
- Menu,
- X,
- Check,
- Circle,
- Maximize2,
- Minimize2,
- Copy,
- ThumbsUp,
- ThumbsDown,
- Sparkles,
- Brain,
- Rocket,
- Paperclip,
- Image as ImageIcon,
- File,
- Calendar,
- Globe,
- DollarSign,
- Newspaper,
- BarChart3,
- PieChart,
- LineChart,
- Briefcase,
- Users,
-} from 'lucide-react';
+// 注意：图标导入已移至子组件中，主组件不再需要导入
// 常量配置 - 从 TypeScript 模块导入
-import { animations } from './constants/animations';
import { MessageTypes } from './constants/messageTypes';
-import { AVAILABLE_MODELS, DEFAULT_MODEL_ID } from './constants/models';
-import { MCP_TOOLS, TOOL_CATEGORIES, DEFAULT_SELECTED_TOOLS } from './constants/tools';
-import { quickQuestions } from './constants/quickQuestions';
+import { DEFAULT_MODEL_ID } from './constants/models';
+import { DEFAULT_SELECTED_TOOLS } from './constants/tools';
+
+// 拆分后的子组件
+import BackgroundEffects from './components/BackgroundEffects';
+import LeftSidebar from './components/LeftSidebar';
+import ChatArea from './components/ChatArea';
+import RightSidebar from './components/RightSidebar';
/**
* Agent Chat - 主组件（HeroUI v3 深色主题）
@@ -125,7 +47,6 @@ const AgentChat = () => {
const [isProcessing, setIsProcessing] = useState(false);
// UI 状态
- const [searchQuery, setSearchQuery] = useState('');
const [selectedModel, setSelectedModel] = useState(DEFAULT_MODEL_ID);
const [selectedTools, setSelectedTools] = useState(DEFAULT_SELECTED_TOOLS);
const [isLeftSidebarOpen, setIsLeftSidebarOpen] = useState(true);
@@ -360,1464 +281,61 @@ const AgentChat = () => {
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
}, [messages]);
- // ==================== 按日期分组会话 ====================
- const groupSessionsByDate = (sessions) => {
- 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 = {
- today: [],
- yesterday: [],
- thisWeek: [],
- older: [],
- };
-
- sessions.forEach(session => {
- const sessionDate = new Date(session.created_at || session.timestamp);
- const daysDiff = Math.floor((today - sessionDate) / (1000 * 60 * 60 * 24));
-
- if (daysDiff === 0) {
- groups.today.push(session);
- } else if (daysDiff === 1) {
- groups.yesterday.push(session);
- } else if (daysDiff <= 7) {
- groups.thisWeek.push(session);
- } else {
- groups.older.push(session);
- }
- });
-
- return groups;
- };
-
- const sessionGroups = groupSessionsByDate(sessions);
- const filteredSessions = searchQuery
- ? sessions.filter((s) =>
- s.title?.toLowerCase().includes(searchQuery.toLowerCase()) ||
- s.session_id?.toLowerCase().includes(searchQuery.toLowerCase())
- )
- : sessions;
-
- // quickQuestions 已移动到 constants/quickQuestions.ts
-
return (
- {/* 背景渐变层 - 移到 Flex 内部 */}
-
+
+ {/* 左侧栏 */}
+ setIsLeftSidebarOpen(false)}
+ sessions={sessions}
+ currentSessionId={currentSessionId}
+ onSessionSwitch={switchSession}
+ onNewSession={createNewSession}
+ isLoadingSessions={isLoadingSessions}
+ user={user}
/>
- {/* 背景装饰光效 */}
-
- setIsLeftSidebarOpen(true)}
+ onToggleRightSidebar={() => setIsRightSidebarOpen(true)}
+ onNewSession={createNewSession}
+ userAvatar={user?.avatar}
+ messagesEndRef={messagesEndRef}
+ inputRef={inputRef}
+ fileInputRef={fileInputRef}
/>
- {/* 左侧栏 - 深色毛玻璃 */}
-
- {isLeftSidebarOpen && (
-
-
-
-
-
-
-
- 对话历史
-
-
-
-
-
- }
- onClick={createNewSession}
- 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(59, 130, 246, 0.2)",
- borderColor: "blue.400",
- color: "blue.300",
- boxShadow: "0 0 12px rgba(59, 130, 246, 0.3)"
- }}
- />
-
-
-
-
- }
- onClick={() => setIsLeftSidebarOpen(false)}
- 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"
- }}
- />
-
-
-
-
-
-
-
-
-
- setSearchQuery(e.target.value)}
- size="sm"
- variant="outline"
- pl={10}
- 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)"
- }}
- />
-
-
-
-
- {/* 按日期分组显示会话 */}
- {sessionGroups.today.length > 0 && (
-
- 今天
-
- {sessionGroups.today.map((session, idx) => (
-
- switchSession(session.session_id)}
- />
-
- ))}
-
-
- )}
-
- {sessionGroups.yesterday.length > 0 && (
-
- 昨天
-
- {sessionGroups.yesterday.map((session) => (
- switchSession(session.session_id)}
- />
- ))}
-
-
- )}
-
- {sessionGroups.thisWeek.length > 0 && (
-
- 本周
-
- {sessionGroups.thisWeek.map((session) => (
- switchSession(session.session_id)}
- />
- ))}
-
-
- )}
-
- {sessionGroups.older.length > 0 && (
-
- 更早
-
- {sessionGroups.older.map((session) => (
- switchSession(session.session_id)}
- />
- ))}
-
-
- )}
-
- {isLoadingSessions && (
-
-
-
- )}
-
- {sessions.length === 0 && !isLoadingSessions && (
-
-
- 还没有对话历史
- 开始一个新对话吧！
-
- )}
-
-
-
-
-
-
-
- {user?.nickname || '未登录'}
-
-
- {user?.subscription_type || 'free'}
-
-
-
-
-
-
- )}
-
-
- {/* 中间主聊天区域 */}
-
- {/* 顶部标题栏 - 深色毛玻璃 */}
-
-
-
- {!isLeftSidebarOpen && (
-
- }
- onClick={() => setIsLeftSidebarOpen(true)}
- 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"
- }}
- />
-
- )}
-
-
- }
- bgGradient="linear(to-br, purple.500, pink.500)"
- boxShadow="0 0 20px rgba(236, 72, 153, 0.5)"
- />
-
-
-
-
- 价小前投研 AI
-
-
-
-
- 智能分析
-
-
- {AVAILABLE_MODELS.find((m) => m.id === selectedModel)?.name}
-
-
-
-
-
-
-
-
- }
- onClick={createNewSession}
- 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)"
- }}
- />
-
-
- {!isRightSidebarOpen && (
-
- }
- onClick={() => setIsRightSidebarOpen(true)}
- 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"
- }}
- />
-
- )}
-
-
-
-
- {/* 消息列表 */}
-
-
-
-
- {messages.map((message) => (
-
-
-
- ))}
-
-
-
-
-
-
- {/* 快捷问题 */}
-
- {messages.length <= 2 && !isProcessing && (
-
-
-
-
-
- 快速开始
-
-
- {quickQuestions.map((question, idx) => (
-
-
-
- ))}
-
-
-
-
- )}
-
-
- {/* 输入栏 - 深色毛玻璃 */}
-
-
- {/* 已上传文件预览 */}
- {uploadedFiles.length > 0 && (
-
- {uploadedFiles.map((file, idx) => (
-
-
- {file.name}
- removeFile(idx)} color="gray.400" />
-
-
- ))}
-
- )}
-
-
-
-
-
-
- }
- 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)"
- }}
- />
-
-
-
-
-
- }
- 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)"
- }}
- />
-
-
-
- setInputValue(e.target.value)}
- onKeyDown={handleKeyPress}
- 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)"
- }}
- />
-
-
- }
- onClick={handleSendMessage}
- 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)"
- }}
- />
-
-
-
-
-
- Enter
- 发送
-
-
- Shift
- +
- Enter
- 换行
-
-
-
-
-
-
- {/* 右侧栏 - 深色配置中心 */}
-
- {isRightSidebarOpen && (
-
-
-
-
-
-
-
- 配置中心
-
-
-
-
- }
- onClick={() => setIsRightSidebarOpen(false)}
- 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"
- }}
- />
-
-
-
-
-
-
-
-
-
-
-
- 模型
-
-
-
-
-