1570 lines
50 KiB
JavaScript
1570 lines
50 KiB
JavaScript
// src/views/AgentChat/index.js
|
||
// 超炫酷的 AI 投研助手 - Hero UI 深色模式版本
|
||
// 使用 Framer Motion 物理动画引擎
|
||
|
||
import React, { useState, useEffect, useRef } from 'react';
|
||
import { motion, AnimatePresence } from 'framer-motion';
|
||
import {
|
||
Button,
|
||
Card,
|
||
CardHeader,
|
||
CardBody,
|
||
CardFooter,
|
||
Input,
|
||
Avatar,
|
||
Chip,
|
||
Divider,
|
||
Spinner,
|
||
Tooltip,
|
||
Badge,
|
||
Checkbox,
|
||
CheckboxGroup,
|
||
Tabs,
|
||
Tab,
|
||
ScrollShadow,
|
||
Kbd,
|
||
Accordion,
|
||
AccordionItem,
|
||
} from '@heroui/react';
|
||
import { useAuth } from '@contexts/AuthContext';
|
||
import { logger } from '@utils/logger';
|
||
import axios from 'axios';
|
||
import { useToast } from '@chakra-ui/react';
|
||
|
||
// 图标 - 使用 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';
|
||
|
||
/**
|
||
* Framer Motion 动画变体配置
|
||
*/
|
||
const animations = {
|
||
slideInLeft: {
|
||
initial: { x: -320, opacity: 0 },
|
||
animate: {
|
||
x: 0,
|
||
opacity: 1,
|
||
transition: {
|
||
type: 'spring',
|
||
stiffness: 300,
|
||
damping: 30,
|
||
},
|
||
},
|
||
exit: {
|
||
x: -320,
|
||
opacity: 0,
|
||
transition: { duration: 0.2 },
|
||
},
|
||
},
|
||
slideInRight: {
|
||
initial: { x: 320, opacity: 0 },
|
||
animate: {
|
||
x: 0,
|
||
opacity: 1,
|
||
transition: {
|
||
type: 'spring',
|
||
stiffness: 300,
|
||
damping: 30,
|
||
},
|
||
},
|
||
exit: {
|
||
x: 320,
|
||
opacity: 0,
|
||
transition: { duration: 0.2 },
|
||
},
|
||
},
|
||
fadeInUp: {
|
||
initial: { opacity: 0, y: 20 },
|
||
animate: {
|
||
opacity: 1,
|
||
y: 0,
|
||
transition: {
|
||
type: 'spring',
|
||
stiffness: 400,
|
||
damping: 25,
|
||
},
|
||
},
|
||
},
|
||
staggerItem: {
|
||
initial: { opacity: 0, y: 10 },
|
||
animate: { opacity: 1, y: 0 },
|
||
},
|
||
staggerContainer: {
|
||
animate: {
|
||
transition: {
|
||
staggerChildren: 0.05,
|
||
},
|
||
},
|
||
},
|
||
pressScale: {
|
||
whileTap: { scale: 0.95 },
|
||
whileHover: { scale: 1.05 },
|
||
},
|
||
};
|
||
|
||
/**
|
||
* 消息类型
|
||
*/
|
||
const MessageTypes = {
|
||
USER: 'user',
|
||
AGENT_THINKING: 'agent_thinking',
|
||
AGENT_PLAN: 'agent_plan',
|
||
AGENT_EXECUTING: 'agent_executing',
|
||
AGENT_RESPONSE: 'agent_response',
|
||
ERROR: 'error',
|
||
};
|
||
|
||
/**
|
||
* 可用模型配置
|
||
*/
|
||
const AVAILABLE_MODELS = [
|
||
{
|
||
id: 'kimi-k2-thinking',
|
||
name: 'Kimi K2 Thinking',
|
||
description: '深度思考模型，适合复杂分析',
|
||
icon: <Brain className="w-5 h-5" />,
|
||
color: 'secondary',
|
||
},
|
||
{
|
||
id: 'kimi-k2',
|
||
name: 'Kimi K2',
|
||
description: '快速响应模型，适合简单查询',
|
||
icon: <Zap className="w-5 h-5" />,
|
||
color: 'primary',
|
||
},
|
||
{
|
||
id: 'deepmoney',
|
||
name: 'DeepMoney',
|
||
description: '金融专业模型',
|
||
icon: <TrendingUp className="w-5 h-5" />,
|
||
color: 'success',
|
||
},
|
||
];
|
||
|
||
/**
|
||
* MCP 工具配置（完整列表）
|
||
*/
|
||
const MCP_TOOLS = [
|
||
// 新闻搜索类
|
||
{
|
||
id: 'search_news',
|
||
name: '全球新闻搜索',
|
||
icon: <Globe className="w-4 h-4" />,
|
||
category: '新闻资讯',
|
||
description: '搜索全球新闻，支持关键词和日期过滤'
|
||
},
|
||
{
|
||
id: 'search_china_news',
|
||
name: '中国新闻搜索',
|
||
icon: <Newspaper className="w-4 h-4" />,
|
||
category: '新闻资讯',
|
||
description: 'KNN语义搜索中国新闻'
|
||
},
|
||
{
|
||
id: 'search_medical_news',
|
||
name: '医疗健康新闻',
|
||
icon: <Activity className="w-4 h-4" />,
|
||
category: '新闻资讯',
|
||
description: '医药、医疗设备、生物技术新闻'
|
||
},
|
||
|
||
// 概念板块类
|
||
{
|
||
id: 'search_concepts',
|
||
name: '概念板块搜索',
|
||
icon: <PieChart className="w-4 h-4" />,
|
||
category: '概念板块',
|
||
description: '搜索股票概念板块及相关股票'
|
||
},
|
||
{
|
||
id: 'get_concept_details',
|
||
name: '概念详情',
|
||
icon: <FileText className="w-4 h-4" />,
|
||
category: '概念板块',
|
||
description: '获取概念板块详细信息'
|
||
},
|
||
{
|
||
id: 'get_stock_concepts',
|
||
name: '股票概念',
|
||
icon: <BarChart3 className="w-4 h-4" />,
|
||
category: '概念板块',
|
||
description: '查询股票相关概念板块'
|
||
},
|
||
{
|
||
id: 'get_concept_statistics',
|
||
name: '概念统计',
|
||
icon: <LineChart className="w-4 h-4" />,
|
||
category: '概念板块',
|
||
description: '涨幅榜、跌幅榜、活跃榜等'
|
||
},
|
||
|
||
// 涨停分析类
|
||
{
|
||
id: 'search_limit_up_stocks',
|
||
name: '涨停股票搜索',
|
||
icon: <TrendingUp className="w-4 h-4" />,
|
||
category: '涨停分析',
|
||
description: '搜索涨停股票，支持多条件筛选'
|
||
},
|
||
{
|
||
id: 'get_daily_stock_analysis',
|
||
name: '涨停日报',
|
||
icon: <Calendar className="w-4 h-4" />,
|
||
category: '涨停分析',
|
||
description: '每日涨停股票分析报告'
|
||
},
|
||
|
||
// 研报路演类
|
||
{
|
||
id: 'search_research_reports',
|
||
name: '研报搜索',
|
||
icon: <BookOpen className="w-4 h-4" />,
|
||
category: '研报路演',
|
||
description: '搜索研究报告，支持语义搜索'
|
||
},
|
||
{
|
||
id: 'search_roadshows',
|
||
name: '路演活动',
|
||
icon: <Briefcase className="w-4 h-4" />,
|
||
category: '研报路演',
|
||
description: '上市公司路演、投资者交流活动'
|
||
},
|
||
|
||
// 股票数据类
|
||
{
|
||
id: 'get_stock_basic_info',
|
||
name: '股票基本信息',
|
||
icon: <FileText className="w-4 h-4" />,
|
||
category: '股票数据',
|
||
description: '公司名称、行业、主营业务等'
|
||
},
|
||
{
|
||
id: 'get_stock_financial_index',
|
||
name: '财务指标',
|
||
icon: <DollarSign className="w-4 h-4" />,
|
||
category: '股票数据',
|
||
description: 'EPS、ROE、营收增长率等'
|
||
},
|
||
{
|
||
id: 'get_stock_trade_data',
|
||
name: '交易数据',
|
||
icon: <BarChart3 className="w-4 h-4" />,
|
||
category: '股票数据',
|
||
description: '价格、成交量、涨跌幅等'
|
||
},
|
||
{
|
||
id: 'get_stock_balance_sheet',
|
||
name: '资产负债表',
|
||
icon: <PieChart className="w-4 h-4" />,
|
||
category: '股票数据',
|
||
description: '资产、负债、所有者权益'
|
||
},
|
||
{
|
||
id: 'get_stock_cashflow',
|
||
name: '现金流量表',
|
||
icon: <LineChart className="w-4 h-4" />,
|
||
category: '股票数据',
|
||
description: '经营、投资、筹资现金流'
|
||
},
|
||
{
|
||
id: 'search_stocks_by_criteria',
|
||
name: '条件选股',
|
||
icon: <Search className="w-4 h-4" />,
|
||
category: '股票数据',
|
||
description: '按行业、地区、市值筛选'
|
||
},
|
||
{
|
||
id: 'get_stock_comparison',
|
||
name: '股票对比',
|
||
icon: <BarChart3 className="w-4 h-4" />,
|
||
category: '股票数据',
|
||
description: '多只股票财务指标对比'
|
||
},
|
||
|
||
// 用户数据类
|
||
{
|
||
id: 'get_user_watchlist',
|
||
name: '自选股列表',
|
||
icon: <Users className="w-4 h-4" />,
|
||
category: '用户数据',
|
||
description: '用户关注的股票及行情'
|
||
},
|
||
{
|
||
id: 'get_user_following_events',
|
||
name: '关注事件',
|
||
icon: <Activity className="w-4 h-4" />,
|
||
category: '用户数据',
|
||
description: '用户关注的重大事件'
|
||
},
|
||
];
|
||
|
||
// 按类别分组工具
|
||
const TOOL_CATEGORIES = {
|
||
'新闻资讯': MCP_TOOLS.filter(t => t.category === '新闻资讯'),
|
||
'概念板块': MCP_TOOLS.filter(t => t.category === '概念板块'),
|
||
'涨停分析': MCP_TOOLS.filter(t => t.category === '涨停分析'),
|
||
'研报路演': MCP_TOOLS.filter(t => t.category === '研报路演'),
|
||
'股票数据': MCP_TOOLS.filter(t => t.category === '股票数据'),
|
||
'用户数据': MCP_TOOLS.filter(t => t.category === '用户数据'),
|
||
};
|
||
|
||
/**
|
||
* Hero Agent Chat - 主组件（深色模式）
|
||
*/
|
||
const AgentChat = () => {
|
||
const { user } = useAuth();
|
||
const toast = useToast();
|
||
|
||
// 会话管理
|
||
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('kimi-k2-thinking');
|
||
const [selectedTools, setSelectedTools] = useState([
|
||
'search_news',
|
||
'search_china_news',
|
||
'search_concepts',
|
||
'search_limit_up_stocks',
|
||
'search_research_reports',
|
||
]);
|
||
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 页面强制启用深色模式
|
||
document.documentElement.classList.add('dark');
|
||
|
||
return () => {
|
||
// 组件卸载时不移除，让其他页面自己控制
|
||
// document.documentElement.classList.remove('dark');
|
||
};
|
||
}, []);
|
||
|
||
// ==================== 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]);
|
||
|
||
// ==================== 按日期分组会话 ====================
|
||
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;
|
||
|
||
const quickQuestions = [
|
||
{ text: '今日涨停板块分析', emoji: '🔥' },
|
||
{ text: '新能源概念机会', emoji: '⚡' },
|
||
{ text: '半导体行业动态', emoji: '💾' },
|
||
{ text: '本周热门研报', emoji: '📊' },
|
||
];
|
||
|
||
return (
|
||
<div className="flex h-[calc(100vh-80px)] bg-gradient-to-br from-gray-900 via-slate-900 to-gray-900 overflow-hidden">
|
||
{/* 左侧栏 - 深色毛玻璃 */}
|
||
{isLeftSidebarOpen && (
|
||
<motion.div
|
||
className="w-80 flex flex-col bg-gray-900/95 backdrop-blur-xl border-r border-gray-800 shadow-2xl"
|
||
initial="initial"
|
||
animate="animate"
|
||
exit="exit"
|
||
variants={animations.slideInLeft}
|
||
>
|
||
<div className="p-4 border-b border-gray-800">
|
||
<div className="flex items-center justify-between mb-3">
|
||
<div className="flex items-center gap-2">
|
||
<MessageSquare className="w-5 h-5 text-blue-400" />
|
||
<span className="font-semibold text-gray-100">对话历史</span>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<Tooltip content="新建对话">
|
||
<Button
|
||
isIconOnly
|
||
size="sm"
|
||
variant="flat"
|
||
color="primary"
|
||
onPress={createNewSession}
|
||
>
|
||
<Plus className="w-4 h-4" />
|
||
</Button>
|
||
</Tooltip>
|
||
<Tooltip content="收起侧边栏">
|
||
<Button
|
||
isIconOnly
|
||
size="sm"
|
||
variant="light"
|
||
onPress={() => setIsLeftSidebarOpen(false)}
|
||
>
|
||
<ChevronLeft className="w-4 h-4" />
|
||
</Button>
|
||
</Tooltip>
|
||
</div>
|
||
</div>
|
||
|
||
<Input
|
||
placeholder="搜索对话..."
|
||
value={searchQuery}
|
||
onValueChange={setSearchQuery}
|
||
startContent={<Search className="w-4 h-4 text-gray-500" />}
|
||
size="sm"
|
||
variant="bordered"
|
||
classNames={{
|
||
input: 'text-sm text-gray-100',
|
||
inputWrapper: 'border-gray-700 bg-gray-800/50 hover:border-gray-600',
|
||
}}
|
||
/>
|
||
</div>
|
||
|
||
<ScrollShadow className="flex-1 p-3">
|
||
{/* 按日期分组显示会话 */}
|
||
{sessionGroups.today.length > 0 && (
|
||
<div className="mb-4">
|
||
<p className="text-xs font-semibold text-gray-400 mb-2 px-2">今天</p>
|
||
<div className="space-y-2">
|
||
{sessionGroups.today.map((session) => (
|
||
<SessionCard
|
||
key={session.session_id}
|
||
session={session}
|
||
isActive={currentSessionId === session.session_id}
|
||
onPress={() => switchSession(session.session_id)}
|
||
/>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{sessionGroups.yesterday.length > 0 && (
|
||
<div className="mb-4">
|
||
<p className="text-xs font-semibold text-gray-400 mb-2 px-2">昨天</p>
|
||
<div className="space-y-2">
|
||
{sessionGroups.yesterday.map((session) => (
|
||
<SessionCard
|
||
key={session.session_id}
|
||
session={session}
|
||
isActive={currentSessionId === session.session_id}
|
||
onPress={() => switchSession(session.session_id)}
|
||
/>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{sessionGroups.thisWeek.length > 0 && (
|
||
<div className="mb-4">
|
||
<p className="text-xs font-semibold text-gray-400 mb-2 px-2">本周</p>
|
||
<div className="space-y-2">
|
||
{sessionGroups.thisWeek.map((session) => (
|
||
<SessionCard
|
||
key={session.session_id}
|
||
session={session}
|
||
isActive={currentSessionId === session.session_id}
|
||
onPress={() => switchSession(session.session_id)}
|
||
/>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{sessionGroups.older.length > 0 && (
|
||
<div className="mb-4">
|
||
<p className="text-xs font-semibold text-gray-400 mb-2 px-2">更早</p>
|
||
<div className="space-y-2">
|
||
{sessionGroups.older.map((session) => (
|
||
<SessionCard
|
||
key={session.session_id}
|
||
session={session}
|
||
isActive={currentSessionId === session.session_id}
|
||
onPress={() => switchSession(session.session_id)}
|
||
/>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{isLoadingSessions && (
|
||
<div className="flex justify-center p-4">
|
||
<Spinner size="sm" color="primary" />
|
||
</div>
|
||
)}
|
||
|
||
{sessions.length === 0 && !isLoadingSessions && (
|
||
<div className="text-center py-8 text-gray-500 text-sm">
|
||
<MessageSquare className="w-8 h-8 mx-auto mb-2 opacity-50" />
|
||
<p>还没有对话历史</p>
|
||
<p className="text-xs mt-1">开始一个新对话吧！</p>
|
||
</div>
|
||
)}
|
||
</ScrollShadow>
|
||
|
||
<div className="p-4 border-t border-gray-800">
|
||
<div className="flex items-center gap-3">
|
||
<Avatar
|
||
src={user?.avatar}
|
||
name={user?.nickname}
|
||
size="sm"
|
||
classNames={{
|
||
base: 'bg-gradient-to-br from-blue-500 to-purple-600',
|
||
}}
|
||
/>
|
||
<div className="flex-1 min-w-0">
|
||
<p className="text-sm font-medium truncate text-gray-100">{user?.nickname || '未登录'}</p>
|
||
<p className="text-xs text-gray-500 truncate">{user?.subscription_type || 'free'} 用户</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
)}
|
||
|
||
{/* 中间主聊天区域 */}
|
||
<div className="flex-1 flex flex-col">
|
||
{/* 顶部标题栏 - 深色 */}
|
||
<div className="bg-gray-900/95 backdrop-blur-xl border-b border-gray-800 px-6 py-4 shadow-lg">
|
||
<div className="flex items-center justify-between">
|
||
<div className="flex items-center gap-4">
|
||
{!isLeftSidebarOpen && (
|
||
<Button
|
||
isIconOnly
|
||
size="sm"
|
||
variant="light"
|
||
onPress={() => setIsLeftSidebarOpen(true)}
|
||
>
|
||
<Menu className="w-4 h-4 text-gray-400" />
|
||
</Button>
|
||
)}
|
||
|
||
<motion.div
|
||
animate={{ rotate: 360 }}
|
||
transition={{ duration: 3, repeat: Infinity, ease: 'linear' }}
|
||
>
|
||
<Avatar
|
||
icon={<Cpu className="w-6 h-6" />}
|
||
classNames={{
|
||
base: 'bg-gradient-to-br from-purple-500 to-pink-500',
|
||
}}
|
||
/>
|
||
</motion.div>
|
||
|
||
<div>
|
||
<h1 className="text-xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
|
||
价小前投研 AI
|
||
</h1>
|
||
<div className="flex items-center gap-2 mt-1">
|
||
<Chip
|
||
size="sm"
|
||
variant="flat"
|
||
color="success"
|
||
startContent={<Zap className="w-3 h-3" />}
|
||
classNames={{
|
||
base: 'bg-green-500/20',
|
||
content: 'text-green-400',
|
||
}}
|
||
>
|
||
智能分析
|
||
</Chip>
|
||
<Chip
|
||
size="sm"
|
||
variant="flat"
|
||
color="secondary"
|
||
classNames={{
|
||
base: 'bg-purple-500/20',
|
||
content: 'text-purple-400',
|
||
}}
|
||
>
|
||
{AVAILABLE_MODELS.find((m) => m.id === selectedModel)?.name}
|
||
</Chip>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex items-center gap-2">
|
||
<Tooltip content="清空对话">
|
||
<Button
|
||
isIconOnly
|
||
size="sm"
|
||
variant="light"
|
||
onPress={createNewSession}
|
||
className="text-gray-400 hover:text-gray-200"
|
||
>
|
||
<RefreshCw className="w-4 h-4" />
|
||
</Button>
|
||
</Tooltip>
|
||
{!isRightSidebarOpen && (
|
||
<Button
|
||
isIconOnly
|
||
size="sm"
|
||
variant="light"
|
||
onPress={() => setIsRightSidebarOpen(true)}
|
||
className="text-gray-400 hover:text-gray-200"
|
||
>
|
||
<Settings className="w-4 h-4" />
|
||
</Button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 消息列表 */}
|
||
<ScrollShadow className="flex-1 p-6 bg-gradient-to-b from-gray-900/50 to-gray-900/30">
|
||
<motion.div
|
||
className="max-w-4xl mx-auto space-y-4"
|
||
variants={animations.staggerContainer}
|
||
initial="initial"
|
||
animate="animate"
|
||
>
|
||
<AnimatePresence mode="popLayout">
|
||
{messages.map((message, index) => (
|
||
<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} />
|
||
</motion.div>
|
||
</ScrollShadow>
|
||
|
||
{/* 快捷问题 */}
|
||
<AnimatePresence>
|
||
{messages.length <= 2 && !isProcessing && (
|
||
<motion.div
|
||
className="px-6 py-3"
|
||
variants={animations.fadeInUp}
|
||
initial="initial"
|
||
animate="animate"
|
||
exit={{ opacity: 0, y: 20 }}
|
||
>
|
||
<div className="max-w-4xl mx-auto">
|
||
<p className="text-xs text-gray-400 mb-2 font-medium flex items-center gap-1">
|
||
<Sparkles className="w-3 h-3" />
|
||
快速开始
|
||
</p>
|
||
<div className="grid grid-cols-2 gap-2">
|
||
{quickQuestions.map((question, idx) => (
|
||
<motion.div key={idx} whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
|
||
<Button
|
||
variant="bordered"
|
||
color="primary"
|
||
className="w-full justify-start h-auto py-3 border-gray-700 hover:border-blue-500 hover:bg-blue-500/10"
|
||
onPress={() => {
|
||
setInputValue(question.text);
|
||
inputRef.current?.focus();
|
||
}}
|
||
>
|
||
<span className="mr-2">{question.emoji}</span>
|
||
<span className="text-gray-200">{question.text}</span>
|
||
</Button>
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
)}
|
||
</AnimatePresence>
|
||
|
||
{/* 输入栏 - 深色 */}
|
||
<div className="bg-gray-900/95 backdrop-blur-xl border-t border-gray-800 px-6 py-4 shadow-2xl">
|
||
<div className="max-w-4xl mx-auto">
|
||
{/* 已上传文件预览 */}
|
||
{uploadedFiles.length > 0 && (
|
||
<div className="mb-3 flex gap-2 flex-wrap">
|
||
{uploadedFiles.map((file, idx) => (
|
||
<Chip
|
||
key={idx}
|
||
onClose={() => removeFile(idx)}
|
||
variant="flat"
|
||
classNames={{
|
||
base: 'bg-gray-800 border border-gray-700',
|
||
content: 'text-gray-300',
|
||
}}
|
||
>
|
||
{file.name}
|
||
</Chip>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
<div className="flex gap-2">
|
||
<input
|
||
ref={fileInputRef}
|
||
type="file"
|
||
multiple
|
||
accept="image/*,.pdf,.doc,.docx,.txt"
|
||
onChange={handleFileSelect}
|
||
className="hidden"
|
||
/>
|
||
|
||
<Tooltip content="上传文件">
|
||
<Button
|
||
isIconOnly
|
||
variant="flat"
|
||
size="lg"
|
||
onPress={() => fileInputRef.current?.click()}
|
||
className="bg-gray-800 hover:bg-gray-700 text-gray-300"
|
||
>
|
||
<Paperclip className="w-5 h-5" />
|
||
</Button>
|
||
</Tooltip>
|
||
|
||
<Tooltip content="上传图片">
|
||
<Button
|
||
isIconOnly
|
||
variant="flat"
|
||
size="lg"
|
||
onPress={() => {
|
||
fileInputRef.current?.setAttribute('accept', 'image/*');
|
||
fileInputRef.current?.click();
|
||
}}
|
||
className="bg-gray-800 hover:bg-gray-700 text-gray-300"
|
||
>
|
||
<ImageIcon className="w-5 h-5" />
|
||
</Button>
|
||
</Tooltip>
|
||
|
||
<Input
|
||
ref={inputRef}
|
||
value={inputValue}
|
||
onValueChange={setInputValue}
|
||
onKeyDown={handleKeyPress}
|
||
placeholder="输入你的问题... (Enter 发送, Shift+Enter 换行)"
|
||
disabled={isProcessing}
|
||
size="lg"
|
||
variant="bordered"
|
||
classNames={{
|
||
input: 'text-base text-gray-100',
|
||
inputWrapper: 'border-2 border-gray-700 bg-gray-800/50 hover:border-blue-500 focus-within:border-blue-500',
|
||
}}
|
||
/>
|
||
|
||
<motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
|
||
<Button
|
||
isIconOnly
|
||
color="primary"
|
||
variant="shadow"
|
||
size="lg"
|
||
onPress={handleSendMessage}
|
||
isLoading={isProcessing}
|
||
isDisabled={!inputValue.trim() || isProcessing}
|
||
className="bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-500 hover:to-purple-500"
|
||
>
|
||
{!isProcessing && <Send className="w-5 h-5" />}
|
||
</Button>
|
||
</motion.div>
|
||
</div>
|
||
|
||
<div className="flex items-center gap-4 mt-2 text-xs text-gray-500">
|
||
<div className="flex items-center gap-1">
|
||
<Kbd keys={['enter']} className="bg-gray-800 text-gray-400">Enter</Kbd>
|
||
<span>发送</span>
|
||
</div>
|
||
<div className="flex items-center gap-1">
|
||
<Kbd keys={['shift']} className="bg-gray-800 text-gray-400">Shift</Kbd>
|
||
<span>+</span>
|
||
<Kbd keys={['enter']} className="bg-gray-800 text-gray-400">Enter</Kbd>
|
||
<span>换行</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 右侧栏 - 深色配置中心 */}
|
||
{isRightSidebarOpen && (
|
||
<motion.div
|
||
className="w-80 flex flex-col bg-gray-900/95 backdrop-blur-xl border-l border-gray-800 shadow-2xl"
|
||
initial="initial"
|
||
animate="animate"
|
||
exit="exit"
|
||
variants={animations.slideInRight}
|
||
>
|
||
<div className="p-4 border-b border-gray-800">
|
||
<div className="flex items-center justify-between">
|
||
<div className="flex items-center gap-2">
|
||
<Settings className="w-5 h-5 text-purple-400" />
|
||
<span className="font-semibold text-gray-100">配置中心</span>
|
||
</div>
|
||
<Tooltip content="收起侧边栏">
|
||
<Button
|
||
isIconOnly
|
||
size="sm"
|
||
variant="light"
|
||
onPress={() => setIsRightSidebarOpen(false)}
|
||
className="text-gray-400 hover:text-gray-200"
|
||
>
|
||
<ChevronRight className="w-4 h-4" />
|
||
</Button>
|
||
</Tooltip>
|
||
</div>
|
||
</div>
|
||
|
||
<ScrollShadow className="flex-1">
|
||
<Tabs
|
||
aria-label="配置选项"
|
||
color="primary"
|
||
variant="underlined"
|
||
classNames={{
|
||
tabList: 'gap-6 w-full px-4 border-b border-gray-800',
|
||
cursor: 'bg-blue-500',
|
||
tab: 'text-gray-400 data-[selected=true]:text-blue-400',
|
||
tabContent: 'group-data-[selected=true]:text-blue-400',
|
||
}}
|
||
>
|
||
{/* 模型选择 */}
|
||
<Tab
|
||
key="model"
|
||
title={
|
||
<div className="flex items-center gap-2">
|
||
<Cpu className="w-4 h-4" />
|
||
<span>模型</span>
|
||
</div>
|
||
}
|
||
>
|
||
<div className="p-4 space-y-3">
|
||
{AVAILABLE_MODELS.map((model) => (
|
||
<Card
|
||
key={model.id}
|
||
isPressable
|
||
isHoverable
|
||
onPress={() => setSelectedModel(model.id)}
|
||
className={`transition-all ${
|
||
selectedModel === model.id
|
||
? 'bg-blue-500/20 border-2 border-blue-500'
|
||
: 'bg-gray-800/50 border-2 border-gray-700 hover:border-gray-600'
|
||
}`}
|
||
>
|
||
<CardBody className="p-3">
|
||
<div className="flex items-start gap-3">
|
||
<div className="p-2 rounded-lg bg-gradient-to-br from-blue-500/20 to-purple-500/20">
|
||
{model.icon}
|
||
</div>
|
||
<div className="flex-1">
|
||
<p className="font-semibold text-sm text-gray-100">{model.name}</p>
|
||
<p className="text-xs text-gray-400 mt-1">{model.description}</p>
|
||
</div>
|
||
{selectedModel === model.id && (
|
||
<Check className="w-5 h-5 text-blue-400" />
|
||
)}
|
||
</div>
|
||
</CardBody>
|
||
</Card>
|
||
))}
|
||
</div>
|
||
</Tab>
|
||
|
||
{/* 工具选择 - 按分类显示 */}
|
||
<Tab
|
||
key="tools"
|
||
title={
|
||
<div className="flex items-center gap-2">
|
||
<Code className="w-4 h-4" />
|
||
<span>工具</span>
|
||
<Badge
|
||
content={selectedTools.length}
|
||
color="primary"
|
||
size="sm"
|
||
classNames={{
|
||
badge: 'bg-blue-500',
|
||
}}
|
||
/>
|
||
</div>
|
||
}
|
||
>
|
||
<div className="p-4">
|
||
<Accordion
|
||
variant="splitted"
|
||
classNames={{
|
||
base: 'gap-2',
|
||
trigger: 'bg-gray-800/50 hover:bg-gray-800 border border-gray-700 rounded-lg',
|
||
title: 'text-gray-100 text-sm',
|
||
content: 'text-gray-300',
|
||
}}
|
||
>
|
||
{Object.entries(TOOL_CATEGORIES).map(([category, tools]) => (
|
||
<AccordionItem
|
||
key={category}
|
||
aria-label={category}
|
||
title={
|
||
<div className="flex items-center justify-between w-full pr-2">
|
||
<span>{category}</span>
|
||
<Chip
|
||
size="sm"
|
||
variant="flat"
|
||
classNames={{
|
||
base: 'bg-blue-500/20',
|
||
content: 'text-blue-400',
|
||
}}
|
||
>
|
||
{tools.filter(t => selectedTools.includes(t.id)).length}/{tools.length}
|
||
</Chip>
|
||
</div>
|
||
}
|
||
>
|
||
<CheckboxGroup
|
||
value={selectedTools}
|
||
onValueChange={setSelectedTools}
|
||
classNames={{
|
||
base: 'gap-2',
|
||
}}
|
||
>
|
||
{tools.map((tool) => (
|
||
<Checkbox
|
||
key={tool.id}
|
||
value={tool.id}
|
||
classNames={{
|
||
base: 'p-2 rounded-lg hover:bg-gray-800/50 transition-colors',
|
||
label: 'text-gray-200 text-sm',
|
||
wrapper: 'after:bg-blue-500',
|
||
}}
|
||
>
|
||
<div className="flex items-center gap-2">
|
||
<div className="text-blue-400">{tool.icon}</div>
|
||
<div>
|
||
<p className="text-sm">{tool.name}</p>
|
||
<p className="text-xs text-gray-500">{tool.description}</p>
|
||
</div>
|
||
</div>
|
||
</Checkbox>
|
||
))}
|
||
</CheckboxGroup>
|
||
</AccordionItem>
|
||
))}
|
||
</Accordion>
|
||
|
||
<div className="mt-4 flex gap-2">
|
||
<Button
|
||
size="sm"
|
||
variant="flat"
|
||
onPress={() => setSelectedTools(MCP_TOOLS.map(t => t.id))}
|
||
className="flex-1 bg-blue-500/20 text-blue-400 hover:bg-blue-500/30"
|
||
>
|
||
全选
|
||
</Button>
|
||
<Button
|
||
size="sm"
|
||
variant="flat"
|
||
onPress={() => setSelectedTools([])}
|
||
className="flex-1 bg-gray-800 text-gray-300 hover:bg-gray-700"
|
||
>
|
||
清空
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</Tab>
|
||
|
||
{/* 统计信息 */}
|
||
<Tab
|
||
key="stats"
|
||
title={
|
||
<div className="flex items-center gap-2">
|
||
<BarChart3 className="w-4 h-4" />
|
||
<span>统计</span>
|
||
</div>
|
||
}
|
||
>
|
||
<div className="p-4 space-y-4">
|
||
<Card className="bg-gray-800/50 border border-gray-700">
|
||
<CardBody className="p-4">
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<p className="text-xs text-gray-400">对话数</p>
|
||
<p className="text-2xl font-bold text-gray-100">{sessions.length}</p>
|
||
</div>
|
||
<MessageSquare className="w-8 h-8 text-blue-400 opacity-50" />
|
||
</div>
|
||
</CardBody>
|
||
</Card>
|
||
|
||
<Card className="bg-gray-800/50 border border-gray-700">
|
||
<CardBody className="p-4">
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<p className="text-xs text-gray-400">消息数</p>
|
||
<p className="text-2xl font-bold text-gray-100">{messages.length}</p>
|
||
</div>
|
||
<Activity className="w-8 h-8 text-purple-400 opacity-50" />
|
||
</div>
|
||
</CardBody>
|
||
</Card>
|
||
|
||
<Card className="bg-gray-800/50 border border-gray-700">
|
||
<CardBody className="p-4">
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<p className="text-xs text-gray-400">已选工具</p>
|
||
<p className="text-2xl font-bold text-gray-100">{selectedTools.length}</p>
|
||
</div>
|
||
<Code className="w-8 h-8 text-green-400 opacity-50" />
|
||
</div>
|
||
</CardBody>
|
||
</Card>
|
||
</div>
|
||
</Tab>
|
||
</Tabs>
|
||
</ScrollShadow>
|
||
</motion.div>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default AgentChat;
|
||
|
||
/**
|
||
* 会话卡片组件
|
||
*/
|
||
const SessionCard = ({ session, isActive, onPress }) => {
|
||
return (
|
||
<Card
|
||
isPressable
|
||
isHoverable
|
||
onPress={onPress}
|
||
className={`transition-all ${
|
||
isActive
|
||
? 'bg-blue-500/20 border border-blue-500'
|
||
: 'bg-gray-800/30 border border-gray-800 hover:bg-gray-800/50 hover:border-gray-700'
|
||
}`}
|
||
>
|
||
<CardBody className="p-3">
|
||
<div className="flex items-start justify-between gap-2">
|
||
<div className="flex-1 min-w-0">
|
||
<p className="text-sm font-medium truncate text-gray-100">
|
||
{session.title || '新对话'}
|
||
</p>
|
||
<p className="text-xs text-gray-500 mt-1">
|
||
{new Date(session.created_at || session.timestamp).toLocaleString('zh-CN', {
|
||
month: 'numeric',
|
||
day: 'numeric',
|
||
hour: '2-digit',
|
||
minute: '2-digit',
|
||
})}
|
||
</p>
|
||
</div>
|
||
{session.message_count && (
|
||
<Chip
|
||
size="sm"
|
||
variant="flat"
|
||
classNames={{
|
||
base: isActive ? 'bg-blue-500/30' : 'bg-gray-700/50',
|
||
content: isActive ? 'text-blue-300' : 'text-gray-400',
|
||
}}
|
||
>
|
||
{session.message_count}
|
||
</Chip>
|
||
)}
|
||
</div>
|
||
</CardBody>
|
||
</Card>
|
||
);
|
||
};
|
||
|
||
/**
|
||
* 消息渲染器
|
||
*/
|
||
const MessageRenderer = ({ message, userAvatar }) => {
|
||
switch (message.type) {
|
||
case MessageTypes.USER:
|
||
return (
|
||
<div className="flex justify-end">
|
||
<div className="flex items-start gap-3 max-w-[75%]">
|
||
<Card className="bg-gradient-to-br from-blue-600 to-purple-600 shadow-lg shadow-blue-500/20">
|
||
<CardBody className="px-5 py-3">
|
||
<p className="text-sm text-white whitespace-pre-wrap">{message.content}</p>
|
||
{message.files && message.files.length > 0 && (
|
||
<div className="mt-2 flex gap-2 flex-wrap">
|
||
{message.files.map((file, idx) => (
|
||
<Chip key={idx} size="sm" variant="flat" className="bg-white/20 text-white">
|
||
<File className="w-3 h-3 mr-1" />
|
||
{file.name}
|
||
</Chip>
|
||
))}
|
||
</div>
|
||
)}
|
||
</CardBody>
|
||
</Card>
|
||
<Avatar
|
||
src={userAvatar}
|
||
icon={<User className="w-4 h-4" />}
|
||
size="sm"
|
||
classNames={{
|
||
base: 'bg-gradient-to-br from-blue-500 to-purple-600',
|
||
}}
|
||
/>
|
||
</div>
|
||
</div>
|
||
);
|
||
|
||
case MessageTypes.AGENT_THINKING:
|
||
return (
|
||
<div className="flex justify-start">
|
||
<div className="flex items-start gap-3 max-w-[75%]">
|
||
<Avatar
|
||
icon={<Cpu className="w-4 h-4" />}
|
||
size="sm"
|
||
classNames={{
|
||
base: 'bg-gradient-to-br from-purple-500 to-pink-500',
|
||
}}
|
||
/>
|
||
<Card className="bg-gray-800/50 border border-gray-700 backdrop-blur-sm">
|
||
<CardBody className="px-5 py-3 flex items-center gap-2">
|
||
<Spinner size="sm" color="primary" />
|
||
<p className="text-sm text-gray-300">{message.content}</p>
|
||
</CardBody>
|
||
</Card>
|
||
</div>
|
||
</div>
|
||
);
|
||
|
||
case MessageTypes.AGENT_RESPONSE:
|
||
return (
|
||
<div className="flex justify-start">
|
||
<div className="flex items-start gap-3 max-w-[75%]">
|
||
<Avatar
|
||
icon={<Cpu className="w-4 h-4" />}
|
||
size="sm"
|
||
classNames={{
|
||
base: 'bg-gradient-to-br from-purple-500 to-pink-500',
|
||
}}
|
||
/>
|
||
<Card className="bg-gray-800/80 border border-gray-700 backdrop-blur-sm shadow-lg">
|
||
<CardBody className="px-5 py-3">
|
||
<p className="text-sm text-gray-100 whitespace-pre-wrap leading-relaxed">
|
||
{message.content}
|
||
</p>
|
||
|
||
{message.stepResults && message.stepResults.length > 0 && (
|
||
<div className="mt-3">
|
||
<ExecutionStepsDisplay steps={message.stepResults} plan={message.plan} />
|
||
</div>
|
||
)}
|
||
|
||
<div className="flex items-center gap-2 mt-3 pt-3 border-t border-gray-700">
|
||
<Tooltip content="复制">
|
||
<Button
|
||
isIconOnly
|
||
size="sm"
|
||
variant="light"
|
||
onPress={() => navigator.clipboard.writeText(message.content)}
|
||
className="text-gray-400 hover:text-gray-200"
|
||
>
|
||
<Copy className="w-4 h-4" />
|
||
</Button>
|
||
</Tooltip>
|
||
<Tooltip content="点赞">
|
||
<Button
|
||
isIconOnly
|
||
size="sm"
|
||
variant="light"
|
||
className="text-gray-400 hover:text-green-400"
|
||
>
|
||
<ThumbsUp className="w-4 h-4" />
|
||
</Button>
|
||
</Tooltip>
|
||
<Tooltip content="点踩">
|
||
<Button
|
||
isIconOnly
|
||
size="sm"
|
||
variant="light"
|
||
className="text-gray-400 hover:text-red-400"
|
||
>
|
||
<ThumbsDown className="w-4 h-4" />
|
||
</Button>
|
||
</Tooltip>
|
||
<span className="text-xs text-gray-500 ml-auto">
|
||
{new Date(message.timestamp).toLocaleTimeString('zh-CN', {
|
||
hour: '2-digit',
|
||
minute: '2-digit',
|
||
})}
|
||
</span>
|
||
</div>
|
||
</CardBody>
|
||
</Card>
|
||
</div>
|
||
</div>
|
||
);
|
||
|
||
case MessageTypes.ERROR:
|
||
return (
|
||
<div className="flex justify-center">
|
||
<Card className="bg-red-500/10 border border-red-500/50 backdrop-blur-sm">
|
||
<CardBody className="px-5 py-3">
|
||
<p className="text-sm text-red-400">{message.content}</p>
|
||
</CardBody>
|
||
</Card>
|
||
</div>
|
||
);
|
||
|
||
default:
|
||
return null;
|
||
}
|
||
};
|
||
|
||
/**
|
||
* 执行步骤显示组件
|
||
*/
|
||
const ExecutionStepsDisplay = ({ steps, plan }) => {
|
||
return (
|
||
<Accordion
|
||
variant="splitted"
|
||
classNames={{
|
||
base: 'px-0',
|
||
trigger: 'bg-gray-900/50 hover:bg-gray-900 border border-gray-700 rounded-lg px-4 py-2',
|
||
title: 'text-gray-300 text-sm',
|
||
content: 'text-gray-400',
|
||
}}
|
||
>
|
||
<AccordionItem
|
||
key="1"
|
||
aria-label="执行详情"
|
||
title={
|
||
<div className="flex items-center gap-2">
|
||
<Activity className="w-4 h-4 text-purple-400" />
|
||
<span>执行详情</span>
|
||
<Chip
|
||
size="sm"
|
||
variant="flat"
|
||
classNames={{
|
||
base: 'bg-purple-500/20',
|
||
content: 'text-purple-400',
|
||
}}
|
||
>
|
||
{steps.length} 步骤
|
||
</Chip>
|
||
</div>
|
||
}
|
||
>
|
||
<div className="space-y-2">
|
||
{steps.map((result, idx) => (
|
||
<Card key={idx} className="bg-gray-900/30 border border-gray-700">
|
||
<CardBody className="p-3">
|
||
<div className="flex items-start justify-between gap-2">
|
||
<p className="text-xs font-medium text-gray-300">
|
||
步骤 {idx + 1}: {result.tool_name}
|
||
</p>
|
||
<Chip
|
||
size="sm"
|
||
color={result.status === 'success' ? 'success' : 'danger'}
|
||
variant="flat"
|
||
classNames={{
|
||
base: result.status === 'success' ? 'bg-green-500/20' : 'bg-red-500/20',
|
||
content: result.status === 'success' ? 'text-green-400' : 'text-red-400',
|
||
}}
|
||
>
|
||
{result.status}
|
||
</Chip>
|
||
</div>
|
||
<p className="text-xs text-gray-500 mt-1">{result.execution_time?.toFixed(2)}s</p>
|
||
{result.error && <p className="text-xs text-red-400 mt-1">⚠️ {result.error}</p>}
|
||
</CardBody>
|
||
</Card>
|
||
))}
|
||
</div>
|
||
</AccordionItem>
|
||
</Accordion>
|
||
);
|
||
};
|