378 lines
13 KiB
JavaScript
378 lines
13 KiB
JavaScript
// src/views/AgentChat/index.js
|
||
// 超炫酷的 AI 投研助手 - HeroUI v3 现代深色主题版本
|
||
// 使用 Framer Motion 物理动画引擎 + 毛玻璃效果
|
||
// 支持两种模式：单一聊天模式 & 投研会议室模式
|
||
|
||
import React, { useState } from 'react';
|
||
import { Box, Flex, useToast, HStack, Button, Tooltip, VStack, Text, Icon } from '@chakra-ui/react';
|
||
import { motion, AnimatePresence } from 'framer-motion';
|
||
import { MessageSquare, Users, Crown, Lock } from 'lucide-react';
|
||
import { useAuth } from '@contexts/AuthContext';
|
||
import { useSubscription } from '@hooks/useSubscription';
|
||
|
||
// 常量配置 - 从 TypeScript 模块导入
|
||
import { DEFAULT_MODEL_ID } from './constants/models';
|
||
import { DEFAULT_SELECTED_TOOLS } from './constants/tools';
|
||
|
||
// 拆分后的子组件
|
||
import LeftSidebar from './components/LeftSidebar';
|
||
import ChatArea from './components/ChatArea';
|
||
import RightSidebar from './components/RightSidebar';
|
||
import MeetingRoom from './components/MeetingRoom';
|
||
|
||
// 自定义 Hooks
|
||
import { useAgentSessions, useAgentChat, useFileUpload } from './hooks';
|
||
|
||
/**
|
||
* 聊天模式枚举
|
||
*/
|
||
const ChatMode = {
|
||
SINGLE: 'single', // 单一聊天模式
|
||
MEETING: 'meeting', // 投研会议室模式
|
||
};
|
||
|
||
/**
|
||
* Agent Chat - 主组件（HeroUI v3 深色主题）
|
||
*
|
||
* 架构说明：
|
||
* - Phase 1: 常量配置已提取到 constants/ 目录（TypeScript）
|
||
* - Phase 2: UI 组件已拆分到 components/ 目录
|
||
* - Phase 3: 业务逻辑已提取到 hooks/ 目录（TypeScript）
|
||
*
|
||
* 主组件职责：
|
||
* 1. 组合各个自定义 Hooks
|
||
* 2. 管理 UI 状态（侧边栏开关、模型选择、工具选择、聊天模式）
|
||
* 3. 组合渲染子组件
|
||
*
|
||
* 新增功能（2024-11）：
|
||
* - 投研会议室模式：多 AI 角色协作讨论投资议题
|
||
*/
|
||
const AgentChat = () => {
|
||
const { user, isAuthenticated } = useAuth();
|
||
const toast = useToast();
|
||
const { hasSubscriptionLevel, openSubscriptionModal } = useSubscription();
|
||
|
||
// ==================== MAX 权限检查 ====================
|
||
const isMaxUser = user?.subscription_type === 'max' || hasSubscriptionLevel('max');
|
||
|
||
// ==================== 聊天模式状态 ====================
|
||
const [chatMode, setChatMode] = useState(ChatMode.SINGLE);
|
||
|
||
// ==================== UI 状态（主组件管理）====================
|
||
const [selectedModel, setSelectedModel] = useState(DEFAULT_MODEL_ID);
|
||
const [selectedTools, setSelectedTools] = useState(DEFAULT_SELECTED_TOOLS);
|
||
const [isLeftSidebarOpen, setIsLeftSidebarOpen] = useState(true);
|
||
const [isRightSidebarOpen, setIsRightSidebarOpen] = useState(true);
|
||
|
||
// ==================== 自定义 Hooks ====================
|
||
|
||
// 文件上传 Hook
|
||
const { uploadedFiles, fileInputRef, handleFileSelect, removeFile, clearFiles } = useFileUpload();
|
||
|
||
// 会话管理 Hook（需要先创建 messages state）
|
||
const [messages, setMessages] = useState([]);
|
||
|
||
const {
|
||
sessions,
|
||
currentSessionId,
|
||
setCurrentSessionId,
|
||
isLoadingSessions,
|
||
loadSessions,
|
||
switchSession,
|
||
createNewSession,
|
||
} = useAgentSessions({
|
||
user,
|
||
setMessages,
|
||
});
|
||
|
||
// 消息处理 Hook
|
||
const {
|
||
inputValue,
|
||
setInputValue,
|
||
isProcessing,
|
||
handleSendMessage,
|
||
handleKeyPress,
|
||
} = useAgentChat({
|
||
user,
|
||
currentSessionId,
|
||
setCurrentSessionId,
|
||
selectedModel,
|
||
selectedTools,
|
||
uploadedFiles,
|
||
clearFiles,
|
||
toast,
|
||
loadSessions,
|
||
messages,
|
||
setMessages,
|
||
});
|
||
|
||
// ==================== 输入框引用（保留在主组件）====================
|
||
const inputRef = React.useRef(null);
|
||
|
||
// ==================== 渲染组件 ====================
|
||
|
||
// 非 MAX 用户显示升级提示
|
||
if (!isMaxUser) {
|
||
return (
|
||
<Flex
|
||
h="100%"
|
||
bg="gray.900"
|
||
align="center"
|
||
justify="center"
|
||
direction="column"
|
||
position="relative"
|
||
overflow="hidden"
|
||
>
|
||
{/* 背景装饰 */}
|
||
<Box
|
||
position="absolute"
|
||
top="20%"
|
||
left="10%"
|
||
w="400px"
|
||
h="400px"
|
||
bg="purple.500"
|
||
filter="blur(150px)"
|
||
opacity="0.15"
|
||
borderRadius="full"
|
||
/>
|
||
<Box
|
||
position="absolute"
|
||
bottom="20%"
|
||
right="10%"
|
||
w="350px"
|
||
h="350px"
|
||
bg="pink.500"
|
||
filter="blur(150px)"
|
||
opacity="0.1"
|
||
borderRadius="full"
|
||
/>
|
||
|
||
{/* 升级提示卡片 */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.5 }}
|
||
>
|
||
<VStack
|
||
spacing={6}
|
||
p={10}
|
||
bg="rgba(17, 24, 39, 0.8)"
|
||
backdropFilter="blur(20px)"
|
||
borderRadius="2xl"
|
||
border="1px solid"
|
||
borderColor="rgba(255, 255, 255, 0.1)"
|
||
boxShadow="0 25px 50px -12px rgba(0, 0, 0, 0.5)"
|
||
maxW="500px"
|
||
textAlign="center"
|
||
>
|
||
{/* 图标 */}
|
||
<Box
|
||
p={4}
|
||
bg="linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(236, 72, 153, 0.2))"
|
||
borderRadius="full"
|
||
border="1px solid"
|
||
borderColor="rgba(168, 85, 247, 0.3)"
|
||
>
|
||
<Icon as={Crown} boxSize={12} color="purple.400" />
|
||
</Box>
|
||
|
||
{/* 标题 */}
|
||
<VStack spacing={2}>
|
||
<Text
|
||
fontSize="2xl"
|
||
fontWeight="bold"
|
||
bgGradient="linear(to-r, purple.300, pink.300)"
|
||
bgClip="text"
|
||
>
|
||
价小前投研 AI
|
||
</Text>
|
||
<HStack spacing={2}>
|
||
<Icon as={Lock} boxSize={4} color="gray.400" />
|
||
<Text color="gray.400" fontSize="md">
|
||
Max 旗舰版专属功能
|
||
</Text>
|
||
</HStack>
|
||
</VStack>
|
||
|
||
{/* 描述 */}
|
||
<Text color="gray.300" fontSize="md" lineHeight="tall">
|
||
AI 投研助手是 Max 旗舰版用户的专属功能，
|
||
提供智能股票分析、投研会议室、多模型对话等高级功能。
|
||
升级到 Max 版即可解锁全部 AI 能力。
|
||
</Text>
|
||
|
||
{/* 功能列表 */}
|
||
<VStack spacing={2} align="start" w="100%">
|
||
{[
|
||
'智能投研助手：一对一 AI 对话分析',
|
||
'投研会议室：多 AI 角色协作讨论',
|
||
'多模型选择：DeepSeek、Kimi 等',
|
||
'专业工具：股票查询、新闻搜索、财务分析',
|
||
].map((feature, idx) => (
|
||
<HStack key={idx} spacing={3} color="gray.300">
|
||
<Box w={2} h={2} bg="purple.400" borderRadius="full" />
|
||
<Text fontSize="sm">{feature}</Text>
|
||
</HStack>
|
||
))}
|
||
</VStack>
|
||
|
||
{/* 升级按钮 */}
|
||
<motion.div whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }} style={{ width: '100%' }}>
|
||
<Button
|
||
w="100%"
|
||
size="lg"
|
||
bgGradient="linear(to-r, purple.500, pink.500)"
|
||
color="white"
|
||
_hover={{
|
||
bgGradient: 'linear(to-r, purple.600, pink.600)',
|
||
boxShadow: '0 10px 40px rgba(168, 85, 247, 0.4)',
|
||
}}
|
||
leftIcon={<Crown className="w-5 h-5" />}
|
||
onClick={openSubscriptionModal}
|
||
>
|
||
升级到 Max 旗舰版
|
||
</Button>
|
||
</motion.div>
|
||
|
||
{/* 当前订阅状态 */}
|
||
{isAuthenticated && user && (
|
||
<Text color="gray.500" fontSize="sm">
|
||
当前订阅：{user.subscription_type === 'pro' ? 'Pro 专业版' : '免费版'}
|
||
</Text>
|
||
)}
|
||
</VStack>
|
||
</motion.div>
|
||
</Flex>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<Flex h="100%" position="relative" bg="gray.900" direction="column">
|
||
{/* 模式切换栏 */}
|
||
<Box
|
||
bg="rgba(17, 24, 39, 0.95)"
|
||
borderBottom="1px solid"
|
||
borderColor="rgba(255, 255, 255, 0.1)"
|
||
px={4}
|
||
py={2}
|
||
>
|
||
<HStack spacing={2} justify="center">
|
||
<Tooltip label="单一聊天模式：与 AI 助手一对一对话">
|
||
<motion.div whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>
|
||
<Button
|
||
size="sm"
|
||
leftIcon={<MessageSquare className="w-4 h-4" />}
|
||
variant={chatMode === ChatMode.SINGLE ? 'solid' : 'ghost'}
|
||
colorScheme={chatMode === ChatMode.SINGLE ? 'purple' : 'gray'}
|
||
onClick={() => setChatMode(ChatMode.SINGLE)}
|
||
bg={chatMode === ChatMode.SINGLE ? 'purple.500' : 'transparent'}
|
||
color={chatMode === ChatMode.SINGLE ? 'white' : 'gray.400'}
|
||
_hover={{
|
||
bg: chatMode === ChatMode.SINGLE ? 'purple.600' : 'whiteAlpha.100',
|
||
}}
|
||
>
|
||
智能助手
|
||
</Button>
|
||
</motion.div>
|
||
</Tooltip>
|
||
|
||
<Tooltip label="投研会议室：多位 AI 分析师协作讨论投资议题">
|
||
<motion.div whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>
|
||
<Button
|
||
size="sm"
|
||
leftIcon={<Users className="w-4 h-4" />}
|
||
variant={chatMode === ChatMode.MEETING ? 'solid' : 'ghost'}
|
||
colorScheme={chatMode === ChatMode.MEETING ? 'orange' : 'gray'}
|
||
onClick={() => setChatMode(ChatMode.MEETING)}
|
||
bg={chatMode === ChatMode.MEETING ? 'orange.500' : 'transparent'}
|
||
color={chatMode === ChatMode.MEETING ? 'white' : 'gray.400'}
|
||
_hover={{
|
||
bg: chatMode === ChatMode.MEETING ? 'orange.600' : 'whiteAlpha.100',
|
||
}}
|
||
>
|
||
投研会议室
|
||
</Button>
|
||
</motion.div>
|
||
</Tooltip>
|
||
</HStack>
|
||
</Box>
|
||
|
||
{/* 主内容区 */}
|
||
<Flex flex={1} overflow="hidden">
|
||
<AnimatePresence mode="wait">
|
||
{chatMode === ChatMode.SINGLE ? (
|
||
<motion.div
|
||
key="single-chat"
|
||
initial={{ opacity: 0, x: -20 }}
|
||
animate={{ opacity: 1, x: 0 }}
|
||
exit={{ opacity: 0, x: 20 }}
|
||
transition={{ duration: 0.3 }}
|
||
style={{ display: 'flex', flex: 1, height: '100%' }}
|
||
>
|
||
{/* 左侧栏 */}
|
||
<LeftSidebar
|
||
isOpen={isLeftSidebarOpen}
|
||
onClose={() => setIsLeftSidebarOpen(false)}
|
||
sessions={sessions}
|
||
currentSessionId={currentSessionId}
|
||
onSessionSwitch={switchSession}
|
||
onNewSession={createNewSession}
|
||
isLoadingSessions={isLoadingSessions}
|
||
user={user}
|
||
/>
|
||
|
||
{/* 中间聊天区 */}
|
||
<ChatArea
|
||
messages={messages}
|
||
inputValue={inputValue}
|
||
onInputChange={setInputValue}
|
||
isProcessing={isProcessing}
|
||
onSendMessage={handleSendMessage}
|
||
onKeyPress={handleKeyPress}
|
||
uploadedFiles={uploadedFiles}
|
||
onFileSelect={handleFileSelect}
|
||
onFileRemove={removeFile}
|
||
selectedModel={selectedModel}
|
||
isLeftSidebarOpen={isLeftSidebarOpen}
|
||
isRightSidebarOpen={isRightSidebarOpen}
|
||
onToggleLeftSidebar={() => setIsLeftSidebarOpen(true)}
|
||
onToggleRightSidebar={() => setIsRightSidebarOpen(true)}
|
||
onNewSession={createNewSession}
|
||
userAvatar={user?.avatar}
|
||
inputRef={inputRef}
|
||
fileInputRef={fileInputRef}
|
||
/>
|
||
|
||
{/* 右侧栏 */}
|
||
<RightSidebar
|
||
isOpen={isRightSidebarOpen}
|
||
onClose={() => setIsRightSidebarOpen(false)}
|
||
selectedModel={selectedModel}
|
||
onModelChange={setSelectedModel}
|
||
selectedTools={selectedTools}
|
||
onToolsChange={setSelectedTools}
|
||
sessionsCount={sessions.length}
|
||
messagesCount={messages.length}
|
||
/>
|
||
</motion.div>
|
||
) : (
|
||
<motion.div
|
||
key="meeting-room"
|
||
initial={{ opacity: 0, x: 20 }}
|
||
animate={{ opacity: 1, x: 0 }}
|
||
exit={{ opacity: 0, x: -20 }}
|
||
transition={{ duration: 0.3 }}
|
||
style={{ flex: 1, height: '100%' }}
|
||
>
|
||
{/* 投研会议室 */}
|
||
<MeetingRoom user={user} onToast={toast} />
|
||
</motion.div>
|
||
)}
|
||
</AnimatePresence>
|
||
</Flex>
|
||
</Flex>
|
||
);
|
||
};
|
||
|
||
export default AgentChat;
|