1530 lines
58 KiB
JavaScript
1530 lines
58 KiB
JavaScript
// src/views/AgentChat/index.js
|
||
// 超炫酷的 AI 投研助手 - HeroUI v3 现代深色主题版本
|
||
// 使用 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 { 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 { MessageTypes } from './constants/messageTypes';
|
||
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 深色主题）
|
||
*
|
||
* 注意：所有常量配置已提取到 constants/ 目录：
|
||
* - animations: constants/animations.ts
|
||
* - MessageTypes: constants/messageTypes.ts
|
||
* - AVAILABLE_MODELS: constants/models.ts
|
||
* - MCP_TOOLS, TOOL_CATEGORIES: constants/tools.ts
|
||
* - quickQuestions: constants/quickQuestions.ts
|
||
*/
|
||
const AgentChat = () => {
|
||
const { user } = useAuth();
|
||
const toast = useToast();
|
||
const { setColorMode } = useColorMode();
|
||
|
||
// 会话管理
|
||
const [sessions, setSessions] = useState([]);
|
||
const [currentSessionId, setCurrentSessionId] = useState(null);
|
||
const [isLoadingSessions, setIsLoadingSessions] = useState(false);
|
||
|
||
// 消息管理
|
||
const [messages, setMessages] = useState([]);
|
||
const [inputValue, setInputValue] = useState('');
|
||
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);
|
||
const [isRightSidebarOpen, setIsRightSidebarOpen] = useState(true);
|
||
|
||
// 文件上传
|
||
const [uploadedFiles, setUploadedFiles] = useState([]);
|
||
const fileInputRef = useRef(null);
|
||
|
||
// Refs
|
||
const messagesEndRef = useRef(null);
|
||
const inputRef = useRef(null);
|
||
|
||
// ==================== 启用深色模式 ====================
|
||
useEffect(() => {
|
||
// 为 AgentChat 页面强制启用深色模式
|
||
setColorMode('dark');
|
||
document.documentElement.classList.add('dark');
|
||
|
||
return () => {
|
||
// 组件卸载时不移除,让其他页面自己控制
|
||
// document.documentElement.classList.remove('dark');
|
||
};
|
||
}, [setColorMode]);
|
||
|
||
// ==================== API 调用函数 ====================
|
||
|
||
const loadSessions = async () => {
|
||
if (!user?.id) return;
|
||
setIsLoadingSessions(true);
|
||
try {
|
||
const response = await axios.get('/mcp/agent/sessions', {
|
||
params: { user_id: user.id, limit: 50 },
|
||
});
|
||
if (response.data.success) {
|
||
setSessions(response.data.data);
|
||
}
|
||
} catch (error) {
|
||
logger.error('加载会话列表失败', error);
|
||
} finally {
|
||
setIsLoadingSessions(false);
|
||
}
|
||
};
|
||
|
||
const loadSessionHistory = async (sessionId) => {
|
||
if (!sessionId) return;
|
||
try {
|
||
const response = await axios.get(`/mcp/agent/history/${sessionId}`, {
|
||
params: { limit: 100 },
|
||
});
|
||
if (response.data.success) {
|
||
const history = response.data.data;
|
||
const formattedMessages = history.map((msg, idx) => ({
|
||
id: `${sessionId}-${idx}`,
|
||
type: msg.message_type === 'user' ? MessageTypes.USER : MessageTypes.AGENT_RESPONSE,
|
||
content: msg.message,
|
||
plan: msg.plan ? JSON.parse(msg.plan) : null,
|
||
stepResults: msg.steps ? JSON.parse(msg.steps) : null,
|
||
timestamp: msg.timestamp,
|
||
}));
|
||
setMessages(formattedMessages);
|
||
}
|
||
} catch (error) {
|
||
logger.error('加载会话历史失败', error);
|
||
}
|
||
};
|
||
|
||
const createNewSession = () => {
|
||
setCurrentSessionId(null);
|
||
setMessages([
|
||
{
|
||
id: Date.now(),
|
||
type: MessageTypes.AGENT_RESPONSE,
|
||
content: `你好${user?.nickname || ''}！👋\n\n我是**价小前**,你的 AI 投研助手。\n\n**我能做什么？**\n• 📊 全面分析股票基本面和技术面\n• 🔥 追踪市场热点和涨停板块\n• 📈 研究行业趋势和投资机会\n• 📰 汇总最新财经新闻和研报\n\n直接输入你的问题开始探索！`,
|
||
timestamp: new Date().toISOString(),
|
||
},
|
||
]);
|
||
};
|
||
|
||
const switchSession = (sessionId) => {
|
||
setCurrentSessionId(sessionId);
|
||
loadSessionHistory(sessionId);
|
||
};
|
||
|
||
const handleSendMessage = async () => {
|
||
if (!inputValue.trim() || isProcessing) return;
|
||
|
||
const userMessage = {
|
||
type: MessageTypes.USER,
|
||
content: inputValue,
|
||
timestamp: new Date().toISOString(),
|
||
files: uploadedFiles.length > 0 ? uploadedFiles : undefined,
|
||
};
|
||
|
||
addMessage(userMessage);
|
||
const userInput = inputValue;
|
||
setInputValue('');
|
||
setUploadedFiles([]);
|
||
setIsProcessing(true);
|
||
|
||
try {
|
||
addMessage({
|
||
type: MessageTypes.AGENT_THINKING,
|
||
content: '正在分析你的问题...',
|
||
timestamp: new Date().toISOString(),
|
||
});
|
||
|
||
const response = await axios.post('/mcp/agent/chat', {
|
||
message: userInput,
|
||
conversation_history: messages
|
||
.filter((m) => m.type === MessageTypes.USER || m.type === MessageTypes.AGENT_RESPONSE)
|
||
.map((m) => ({
|
||
isUser: m.type === MessageTypes.USER,
|
||
content: m.content,
|
||
})),
|
||
user_id: user?.id || 'anonymous',
|
||
user_nickname: user?.nickname || '匿名用户',
|
||
user_avatar: user?.avatar || '',
|
||
subscription_type: user?.subscription_type || 'free',
|
||
session_id: currentSessionId,
|
||
model: selectedModel,
|
||
tools: selectedTools,
|
||
files: uploadedFiles.length > 0 ? uploadedFiles : undefined,
|
||
});
|
||
|
||
setMessages((prev) => prev.filter((m) => m.type !== MessageTypes.AGENT_THINKING));
|
||
|
||
if (response.data.success) {
|
||
const data = response.data;
|
||
if (data.session_id && !currentSessionId) {
|
||
setCurrentSessionId(data.session_id);
|
||
}
|
||
|
||
if (data.plan) {
|
||
addMessage({
|
||
type: MessageTypes.AGENT_PLAN,
|
||
content: '已制定执行计划',
|
||
plan: data.plan,
|
||
timestamp: new Date().toISOString(),
|
||
});
|
||
}
|
||
|
||
if (data.steps && data.steps.length > 0) {
|
||
addMessage({
|
||
type: MessageTypes.AGENT_EXECUTING,
|
||
content: '正在执行步骤...',
|
||
plan: data.plan,
|
||
stepResults: data.steps,
|
||
timestamp: new Date().toISOString(),
|
||
});
|
||
}
|
||
|
||
setMessages((prev) => prev.filter((m) => m.type !== MessageTypes.AGENT_EXECUTING));
|
||
|
||
addMessage({
|
||
type: MessageTypes.AGENT_RESPONSE,
|
||
content: data.final_answer || data.message || '处理完成',
|
||
plan: data.plan,
|
||
stepResults: data.steps,
|
||
metadata: data.metadata,
|
||
timestamp: new Date().toISOString(),
|
||
});
|
||
|
||
loadSessions();
|
||
}
|
||
} catch (error) {
|
||
logger.error('Agent chat error', error);
|
||
setMessages((prev) =>
|
||
prev.filter(
|
||
(m) => m.type !== MessageTypes.AGENT_THINKING && m.type !== MessageTypes.AGENT_EXECUTING
|
||
)
|
||
);
|
||
|
||
const errorMessage = error.response?.data?.error || error.message || '处理失败';
|
||
addMessage({
|
||
type: MessageTypes.ERROR,
|
||
content: `处理失败：${errorMessage}`,
|
||
timestamp: new Date().toISOString(),
|
||
});
|
||
|
||
toast({
|
||
title: '处理失败',
|
||
description: errorMessage,
|
||
status: 'error',
|
||
duration: 5000,
|
||
});
|
||
} finally {
|
||
setIsProcessing(false);
|
||
}
|
||
};
|
||
|
||
// 文件上传处理
|
||
const handleFileSelect = (event) => {
|
||
const files = Array.from(event.target.files || []);
|
||
const fileData = files.map(file => ({
|
||
name: file.name,
|
||
size: file.size,
|
||
type: file.type,
|
||
// 实际上传时需要转换为 base64 或上传到服务器
|
||
url: URL.createObjectURL(file),
|
||
}));
|
||
setUploadedFiles(prev => [...prev, ...fileData]);
|
||
};
|
||
|
||
const removeFile = (index) => {
|
||
setUploadedFiles(prev => prev.filter((_, i) => i !== index));
|
||
};
|
||
|
||
const addMessage = (message) => {
|
||
setMessages((prev) => [
|
||
...prev,
|
||
{
|
||
id: Date.now() + Math.random(),
|
||
...message,
|
||
},
|
||
]);
|
||
};
|
||
|
||
const handleKeyPress = (e) => {
|
||
if (e.key === 'Enter' && !e.shiftKey) {
|
||
e.preventDefault();
|
||
handleSendMessage();
|
||
}
|
||
};
|
||
|
||
useEffect(() => {
|
||
loadSessions();
|
||
createNewSession();
|
||
}, [user]);
|
||
|
||
useEffect(() => {
|
||
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
|
||
}, [messages]);
|
||
|
||
return (
|
||
<Box flex={1} bg="gray.900">
|
||
<Flex h="100%" overflow="hidden" position="relative">
|
||
{/* 背景渐变装饰 */}
|
||
<BackgroundEffects />
|
||
|
||
{/* 左侧栏 */}
|
||
<LeftSidebar
|
||
isOpen={isLeftSidebarOpen}
|
||
onClose={() => setIsLeftSidebarOpen(false)}
|
||
sessions={sessions}
|
||
currentSessionId={currentSessionId}
|
||
onSessionSwitch={switchSession}
|
||
onNewSession={createNewSession}
|
||
isLoadingSessions={isLoadingSessions}
|
||
user={user}
|
||
/>
|
||
|
||
{/* 中间主聊天区域 */}
|
||
<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={() => 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"
|
||
}}
|
||
/>
|
||
</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={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)"
|
||
}}
|
||
/>
|
||
</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={() => 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"
|
||
}}
|
||
/>
|
||
</motion.div>
|
||
)}
|
||
</HStack>
|
||
</Flex>
|
||
</Box>
|
||
|
||
{/* 消息列表 */}
|
||
<Box
|
||
flex={1}
|
||
p={6}
|
||
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={user?.avatar} />
|
||
</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} py={3}>
|
||
<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={() => {
|
||
setInputValue(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={4}
|
||
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={() => removeFile(idx)} color="gray.400" />
|
||
</Tag>
|
||
</motion.div>
|
||
))}
|
||
</HStack>
|
||
)}
|
||
|
||
<HStack spacing={2}>
|
||
<input
|
||
ref={fileInputRef}
|
||
type="file"
|
||
multiple
|
||
accept="image/*,.pdf,.doc,.docx,.txt"
|
||
onChange={handleFileSelect}
|
||
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) => 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)"
|
||
}}
|
||
/>
|
||
|
||
<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={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)"
|
||
}}
|
||
/>
|
||
</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>
|
||
|
||
{/* 右侧栏 - 深色配置中心 */}
|
||
<AnimatePresence>
|
||
{isRightSidebarOpen && (
|
||
<motion.div
|
||
style={{ width: '320px', display: 'flex', flexDirection: 'column' }}
|
||
initial="initial"
|
||
animate="animate"
|
||
exit="exit"
|
||
variants={animations.slideInRight}
|
||
>
|
||
<Box
|
||
w="320px"
|
||
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={() => 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"
|
||
}}
|
||
/>
|
||
</motion.div>
|
||
</Tooltip>
|
||
</HStack>
|
||
</Box>
|
||
|
||
<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={() => setSelectedModel(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={setSelectedTools}
|
||
>
|
||
<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={() => setSelectedTools(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={() => setSelectedTools([])}
|
||
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"
|
||
>
|
||
{sessions.length}
|
||
</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"
|
||
>
|
||
{messages.length}
|
||
</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>
|
||
</Flex>
|
||
</Box>
|
||
);
|
||
};
|
||
|
||
export default AgentChat;
|
||
return (
|
||
<motion.div
|
||
whileHover={{ scale: 1.02, y: -4 }}
|
||
whileTap={{ scale: 0.98 }}
|
||
transition={{ duration: 0.2 }}
|
||
>
|
||
<Card
|
||
cursor="pointer"
|
||
onClick={onPress}
|
||
bg={isActive
|
||
? 'rgba(139, 92, 246, 0.15)'
|
||
: 'rgba(255, 255, 255, 0.05)'}
|
||
backdropFilter="blur(12px)"
|
||
borderWidth={1}
|
||
borderColor={isActive
|
||
? 'purple.400'
|
||
: 'rgba(255, 255, 255, 0.1)'}
|
||
_hover={{
|
||
bg: isActive
|
||
? 'rgba(139, 92, 246, 0.2)'
|
||
: 'rgba(255, 255, 255, 0.08)',
|
||
borderColor: isActive
|
||
? 'purple.400'
|
||
: 'rgba(255, 255, 255, 0.2)',
|
||
boxShadow: isActive
|
||
? "0 12px 24px rgba(139, 92, 246, 0.4)"
|
||
: "0 4px 12px rgba(0, 0, 0, 0.3)"
|
||
}}
|
||
transition="all 0.3s"
|
||
>
|
||
<CardBody p={3}>
|
||
<Flex align="start" justify="space-between" gap={2}>
|
||
<Box flex={1} minW={0}>
|
||
<Text fontSize="sm" fontWeight="medium" color="gray.100" noOfLines={1}>
|
||
{session.title || '新对话'}
|
||
</Text>
|
||
<Text fontSize="xs" color="gray.500" mt={1}>
|
||
{new Date(session.created_at || session.timestamp).toLocaleString('zh-CN', {
|
||
month: 'numeric',
|
||
day: 'numeric',
|
||
hour: '2-digit',
|
||
minute: '2-digit',
|
||
})}
|
||
</Text>
|
||
</Box>
|
||
{session.message_count && (
|
||
<Badge
|
||
bgGradient={isActive
|
||
? "linear(to-r, blue.500, purple.500)"
|
||
: "linear(to-r, gray.600, gray.700)"}
|
||
color={isActive ? 'white' : 'gray.400'}
|
||
variant="subtle"
|
||
boxShadow={isActive
|
||
? "0 2px 8px rgba(139, 92, 246, 0.3)"
|
||
: "none"}
|
||
>
|
||
{session.message_count}
|
||
</Badge>
|
||
)}
|
||
</Flex>
|
||
</CardBody>
|
||
</Card>
|
||
</motion.div>
|
||
);
|
||
};
|
||
|
||
/**
|
||
* 消息渲染器
|
||
*/
|
||
const MessageRenderer = ({ message, userAvatar }) => {
|
||
switch (message.type) {
|
||
case MessageTypes.USER:
|
||
return (
|
||
<Flex justify="flex-end">
|
||
<HStack align="start" spacing={3} maxW="75%">
|
||
<motion.div
|
||
initial={{ opacity: 0, x: 20 }}
|
||
animate={{ opacity: 1, x: 0 }}
|
||
transition={{ type: "spring", stiffness: 300, damping: 30 }}
|
||
>
|
||
<Card
|
||
bgGradient="linear(to-br, blue.500, purple.600)"
|
||
boxShadow="0 8px 20px rgba(139, 92, 246, 0.4)"
|
||
>
|
||
<CardBody px={5} py={3}>
|
||
<Text fontSize="sm" color="white" whiteSpace="pre-wrap">
|
||
{message.content}
|
||
</Text>
|
||
{message.files && message.files.length > 0 && (
|
||
<HStack mt={2} flexWrap="wrap" spacing={2}>
|
||
{message.files.map((file, idx) => (
|
||
<Badge
|
||
key={idx}
|
||
bg="rgba(255, 255, 255, 0.2)"
|
||
color="white"
|
||
display="flex"
|
||
alignItems="center"
|
||
gap={1}
|
||
>
|
||
<File className="w-3 h-3" />
|
||
{file.name}
|
||
</Badge>
|
||
))}
|
||
</HStack>
|
||
)}
|
||
</CardBody>
|
||
</Card>
|
||
</motion.div>
|
||
<Avatar
|
||
src={userAvatar}
|
||
icon={<User className="w-4 h-4" />}
|
||
size="sm"
|
||
bgGradient="linear(to-br, blue.500, purple.600)"
|
||
boxShadow="0 0 12px rgba(139, 92, 246, 0.4)"
|
||
/>
|
||
</HStack>
|
||
</Flex>
|
||
);
|
||
|
||
case MessageTypes.AGENT_THINKING:
|
||
return (
|
||
<Flex justify="flex-start">
|
||
<HStack align="start" spacing={3} maxW="75%">
|
||
<Avatar
|
||
icon={<Cpu className="w-4 h-4" />}
|
||
size="sm"
|
||
bgGradient="linear(to-br, purple.500, pink.500)"
|
||
boxShadow="0 0 12px rgba(236, 72, 153, 0.4)"
|
||
/>
|
||
<motion.div
|
||
initial={{ opacity: 0, x: -20 }}
|
||
animate={{ opacity: 1, x: 0 }}
|
||
>
|
||
<Card
|
||
bg="rgba(255, 255, 255, 0.05)"
|
||
backdropFilter="blur(16px) saturate(180%)"
|
||
border="1px solid"
|
||
borderColor="rgba(255, 255, 255, 0.1)"
|
||
boxShadow="0 8px 32px 0 rgba(31, 38, 135, 0.37)"
|
||
>
|
||
<CardBody px={5} py={3}>
|
||
<HStack spacing={2}>
|
||
<Spinner size="sm" color="purple.500" emptyColor="gray.700" thickness="3px" speed="0.65s" />
|
||
<Text fontSize="sm" color="gray.300">{message.content}</Text>
|
||
</HStack>
|
||
</CardBody>
|
||
</Card>
|
||
</motion.div>
|
||
</HStack>
|
||
</Flex>
|
||
);
|
||
|
||
case MessageTypes.AGENT_RESPONSE:
|
||
return (
|
||
<Flex justify="flex-start">
|
||
<HStack align="start" spacing={3} maxW="75%">
|
||
<Avatar
|
||
icon={<Cpu className="w-4 h-4" />}
|
||
size="sm"
|
||
bgGradient="linear(to-br, purple.500, pink.500)"
|
||
boxShadow="0 0 12px rgba(236, 72, 153, 0.4)"
|
||
/>
|
||
<motion.div
|
||
initial={{ opacity: 0, x: -20 }}
|
||
animate={{ opacity: 1, x: 0 }}
|
||
transition={{ type: "spring", stiffness: 300, damping: 30 }}
|
||
>
|
||
<Card
|
||
bg="rgba(255, 255, 255, 0.05)"
|
||
backdropFilter="blur(16px) saturate(180%)"
|
||
border="1px solid"
|
||
borderColor="rgba(255, 255, 255, 0.1)"
|
||
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 && (
|
||
<Box mt={3}>
|
||
<ExecutionStepsDisplay steps={message.stepResults} plan={message.plan} />
|
||
</Box>
|
||
)}
|
||
|
||
<Flex align="center" gap={2} mt={3} pt={3} borderTop="1px solid" borderColor="rgba(255, 255, 255, 0.1)">
|
||
<Tooltip label="复制">
|
||
<motion.div whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }}>
|
||
<IconButton
|
||
size="sm"
|
||
variant="ghost"
|
||
icon={<Copy className="w-4 h-4" />}
|
||
onClick={() => navigator.clipboard.writeText(message.content)}
|
||
bg="rgba(255, 255, 255, 0.05)"
|
||
color="gray.400"
|
||
_hover={{
|
||
color: "white",
|
||
bg: "rgba(255, 255, 255, 0.1)"
|
||
}}
|
||
/>
|
||
</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" />}
|
||
bg="rgba(255, 255, 255, 0.05)"
|
||
color="gray.400"
|
||
_hover={{
|
||
color: "green.400",
|
||
bg: "rgba(16, 185, 129, 0.1)",
|
||
boxShadow: "0 0 12px rgba(16, 185, 129, 0.3)"
|
||
}}
|
||
/>
|
||
</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" />}
|
||
bg="rgba(255, 255, 255, 0.05)"
|
||
color="gray.400"
|
||
_hover={{
|
||
color: "red.400",
|
||
bg: "rgba(239, 68, 68, 0.1)",
|
||
boxShadow: "0 0 12px rgba(239, 68, 68, 0.3)"
|
||
}}
|
||
/>
|
||
</motion.div>
|
||
</Tooltip>
|
||
<Text fontSize="xs" color="gray.500" ml="auto">
|
||
{new Date(message.timestamp).toLocaleTimeString('zh-CN', {
|
||
hour: '2-digit',
|
||
minute: '2-digit',
|
||
})}
|
||
</Text>
|
||
</Flex>
|
||
</CardBody>
|
||
</Card>
|
||
</motion.div>
|
||
</HStack>
|
||
</Flex>
|
||
);
|
||
|
||
case MessageTypes.ERROR:
|
||
return (
|
||
<Flex justify="center">
|
||
<motion.div
|
||
initial={{ opacity: 0, scale: 0.9 }}
|
||
animate={{ opacity: 1, scale: 1 }}
|
||
>
|
||
<Card
|
||
bg="rgba(239, 68, 68, 0.1)"
|
||
backdropFilter="blur(16px)"
|
||
border="1px solid"
|
||
borderColor="rgba(239, 68, 68, 0.5)"
|
||
boxShadow="0 8px 32px 0 rgba(239, 68, 68, 0.37)"
|
||
>
|
||
<CardBody px={5} py={3}>
|
||
<Text fontSize="sm" color="red.400">{message.content}</Text>
|
||
</CardBody>
|
||
</Card>
|
||
</motion.div>
|
||
</Flex>
|
||
);
|
||
|
||
default:
|
||
return null;
|
||
}
|
||
};
|
||
|
||
/**
|
||
* 执行步骤显示组件
|
||
*/
|
||
const ExecutionStepsDisplay = ({ steps, plan }) => {
|
||
return (
|
||
<Accordion allowToggle>
|
||
<AccordionItem
|
||
border="1px solid"
|
||
borderColor="rgba(255, 255, 255, 0.1)"
|
||
borderRadius="lg"
|
||
bg="rgba(255, 255, 255, 0.03)"
|
||
backdropFilter="blur(10px)"
|
||
_hover={{
|
||
bg: 'rgba(255, 255, 255, 0.05)',
|
||
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" />
|
||
<Text color="gray.300" fontSize="sm">执行详情</Text>
|
||
<Badge
|
||
bgGradient="linear(to-r, purple.500, pink.500)"
|
||
color="white"
|
||
variant="subtle"
|
||
boxShadow="0 2px 8px rgba(139, 92, 246, 0.3)"
|
||
>
|
||
{steps.length} 步骤
|
||
</Badge>
|
||
</HStack>
|
||
<AccordionIcon color="gray.400" />
|
||
</AccordionButton>
|
||
<AccordionPanel pb={4}>
|
||
<VStack spacing={2} align="stretch">
|
||
{steps.map((result, idx) => (
|
||
<motion.div
|
||
key={idx}
|
||
initial={{ opacity: 0, x: -10 }}
|
||
animate={{ opacity: 1, x: 0 }}
|
||
transition={{ delay: idx * 0.05 }}
|
||
>
|
||
<Card
|
||
bg="rgba(255, 255, 255, 0.03)"
|
||
backdropFilter="blur(10px)"
|
||
border="1px solid"
|
||
borderColor="rgba(255, 255, 255, 0.1)"
|
||
>
|
||
<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'
|
||
? "linear(to-r, green.500, teal.500)"
|
||
: "linear(to-r, red.500, orange.500)"}
|
||
color="white"
|
||
variant="subtle"
|
||
boxShadow={result.status === 'success'
|
||
? "0 2px 8px rgba(16, 185, 129, 0.3)"
|
||
: "0 2px 8px rgba(239, 68, 68, 0.3)"}
|
||
>
|
||
{result.status}
|
||
</Badge>
|
||
</Flex>
|
||
<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}</Text>
|
||
)}
|
||
</CardBody>
|
||
</Card>
|
||
</motion.div>
|
||
))}
|
||
</VStack>
|
||
</AccordionPanel>
|
||
</AccordionItem>
|
||
</Accordion>
|
||
);
|
||
};
|