1638 lines
53 KiB
JavaScript
1638 lines
53 KiB
JavaScript
// src/views/AgentChat/index_v4.js
|
||
// Agent聊天页面 V4 - 黑金毛玻璃设计，带模型选择和工具选择
|
||
|
||
import React, { useState, useEffect, useRef } from 'react';
|
||
import { Global, css } from '@emotion/react';
|
||
import {
|
||
Box,
|
||
Flex,
|
||
VStack,
|
||
HStack,
|
||
Text,
|
||
Input,
|
||
IconButton,
|
||
Button,
|
||
Avatar,
|
||
Heading,
|
||
Divider,
|
||
Spinner,
|
||
Badge,
|
||
useToast,
|
||
Progress,
|
||
Fade,
|
||
Collapse,
|
||
InputGroup,
|
||
InputLeftElement,
|
||
Menu,
|
||
MenuButton,
|
||
MenuList,
|
||
MenuItem,
|
||
Tooltip,
|
||
Select,
|
||
Checkbox,
|
||
CheckboxGroup,
|
||
Stack,
|
||
Accordion,
|
||
AccordionItem,
|
||
AccordionButton,
|
||
AccordionPanel,
|
||
AccordionIcon,
|
||
useDisclosure,
|
||
} from '@chakra-ui/react';
|
||
import {
|
||
FiSend,
|
||
FiSearch,
|
||
FiPlus,
|
||
FiMessageSquare,
|
||
FiTrash2,
|
||
FiMoreVertical,
|
||
FiRefreshCw,
|
||
FiDownload,
|
||
FiCpu,
|
||
FiUser,
|
||
FiZap,
|
||
FiClock,
|
||
FiSettings,
|
||
FiCheckCircle,
|
||
FiChevronRight,
|
||
FiTool,
|
||
} from 'react-icons/fi';
|
||
import { useAuth } from '@contexts/AuthContext';
|
||
import { PlanCard } from '@components/ChatBot/PlanCard';
|
||
import { StepResultCard } from '@components/ChatBot/StepResultCard';
|
||
import { MarkdownWithCharts } from '@components/ChatBot/MarkdownWithCharts';
|
||
import { logger } from '@utils/logger';
|
||
import axios from 'axios';
|
||
import HomeNavbar from '@components/Navbars/HomeNavbar';
|
||
|
||
/**
|
||
* Agent消息类型
|
||
*/
|
||
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',
|
||
name: 'Kimi K2',
|
||
description: '快速响应，适合日常对话',
|
||
icon: '🚀',
|
||
provider: 'Moonshot',
|
||
},
|
||
{
|
||
id: 'kimi-k2-thinking',
|
||
name: 'Kimi K2 Thinking',
|
||
description: '深度思考，提供详细推理过程',
|
||
icon: '🧠',
|
||
provider: 'Moonshot',
|
||
recommended: true,
|
||
},
|
||
{
|
||
id: 'glm-4.6',
|
||
name: 'GLM 4.6',
|
||
description: '智谱AI最新模型，性能强大',
|
||
icon: '⚡',
|
||
provider: 'ZhipuAI',
|
||
},
|
||
{
|
||
id: 'deepmoney',
|
||
name: 'DeepMoney',
|
||
description: '金融专业模型，擅长财经分析',
|
||
icon: '💰',
|
||
provider: 'Custom',
|
||
},
|
||
{
|
||
id: 'gemini-3',
|
||
name: 'Gemini 3',
|
||
description: 'Google最新多模态模型',
|
||
icon: '✨',
|
||
provider: 'Google',
|
||
},
|
||
];
|
||
|
||
/**
|
||
* MCP工具分类配置
|
||
*/
|
||
const MCP_TOOL_CATEGORIES = [
|
||
{
|
||
name: '新闻搜索',
|
||
icon: '📰',
|
||
tools: [
|
||
{ id: 'search_news', name: '全球新闻搜索', description: '搜索国际新闻、行业动态' },
|
||
{ id: 'search_china_news', name: '中国新闻搜索', description: 'KNN语义搜索中国新闻' },
|
||
{ id: 'search_medical_news', name: '医疗新闻搜索', description: '医药、医疗设备、生物技术' },
|
||
],
|
||
},
|
||
{
|
||
name: '股票分析',
|
||
icon: '📈',
|
||
tools: [
|
||
{ id: 'search_limit_up_stocks', name: '涨停股票搜索', description: '搜索涨停股票及原因分析' },
|
||
{ id: 'get_stock_analysis', name: '个股分析', description: '获取股票深度分析报告' },
|
||
{ id: 'get_stock_concepts', name: '股票概念查询', description: '查询股票相关概念板块' },
|
||
],
|
||
},
|
||
{
|
||
name: '概念板块',
|
||
icon: '🏢',
|
||
tools: [
|
||
{ id: 'search_concepts', name: '概念搜索', description: '搜索股票概念板块' },
|
||
{ id: 'get_concept_details', name: '概念详情', description: '获取概念板块详细信息' },
|
||
{ id: 'get_concept_statistics', name: '概念统计', description: '涨幅榜、活跃榜、连涨榜' },
|
||
],
|
||
},
|
||
{
|
||
name: '公司信息',
|
||
icon: '🏭',
|
||
tools: [
|
||
{ id: 'search_roadshows', name: '路演搜索', description: '搜索上市公司路演活动' },
|
||
{ id: 'get_company_info', name: '公司信息', description: '获取公司基本面信息' },
|
||
],
|
||
},
|
||
{
|
||
name: '数据分析',
|
||
icon: '📊',
|
||
tools: [
|
||
{ id: 'query_database', name: '数据库查询', description: 'SQL查询金融数据' },
|
||
{ id: 'get_market_overview', name: '市场概况', description: '获取市场整体行情' },
|
||
],
|
||
},
|
||
];
|
||
|
||
/**
|
||
* Agent聊天页面 V4 - 黑金毛玻璃设计
|
||
*/
|
||
const AgentChatV4 = () => {
|
||
const { user } = useAuth();
|
||
const toast = useToast();
|
||
|
||
// 确保组件总是返回有效的 React 元素
|
||
if (!user) {
|
||
return (
|
||
<Flex w="100vw" h="100vh" align="center" justify="center" bg="#1a1d23">
|
||
<VStack spacing={4}>
|
||
<Spinner size="xl" color="#FFD700" />
|
||
<Text color="#E8E8E8">正在加载...</Text>
|
||
</VStack>
|
||
</Flex>
|
||
);
|
||
}
|
||
|
||
// 会话相关状态
|
||
const [sessions, setSessions] = useState([]);
|
||
const [currentSessionId, setCurrentSessionId] = useState(null);
|
||
const [isLoadingSessions, setIsLoadingSessions] = useState(true);
|
||
|
||
// 消息相关状态
|
||
const [messages, setMessages] = useState([]);
|
||
const [inputValue, setInputValue] = useState('');
|
||
const [isProcessing, setIsProcessing] = useState(false);
|
||
const [currentProgress, setCurrentProgress] = useState(0);
|
||
|
||
// 模型和工具配置状态
|
||
const [selectedModel, setSelectedModel] = useState('kimi-k2-thinking');
|
||
const [selectedTools, setSelectedTools] = useState(() => {
|
||
// 默认全选所有工具
|
||
const allToolIds = MCP_TOOL_CATEGORIES.flatMap(cat => cat.tools.map(t => t.id));
|
||
return allToolIds;
|
||
});
|
||
|
||
// UI 状态
|
||
const [searchQuery, setSearchQuery] = useState('');
|
||
|
||
// 检测是否为移动设备（屏幕宽度小于 768px）
|
||
const [isMobile, setIsMobile] = useState(window.innerWidth < 768);
|
||
|
||
// 根据设备类型设置侧边栏默认状态（移动端默认收起）
|
||
const { isOpen: isSidebarOpen, onToggle: toggleSidebar } = useDisclosure({
|
||
defaultIsOpen: !isMobile
|
||
});
|
||
const { isOpen: isRightPanelOpen, onToggle: toggleRightPanel } = useDisclosure({
|
||
defaultIsOpen: !isMobile
|
||
});
|
||
|
||
// Refs
|
||
const messagesEndRef = useRef(null);
|
||
const inputRef = useRef(null);
|
||
|
||
// 毛玻璃深灰金配色主题（类似编程工具的深色主题）
|
||
const glassBg = 'rgba(30, 35, 40, 0.85)'; // 深灰色毛玻璃
|
||
const glassHoverBg = 'rgba(40, 45, 50, 0.9)';
|
||
const goldAccent = '#FFD700';
|
||
const goldGradient = 'linear-gradient(135deg, #FFD700 0%, #FFA500 100%)';
|
||
const darkBg = '#1a1d23'; // VS Code 风格的深灰背景
|
||
const borderGold = 'rgba(255, 215, 0, 0.3)';
|
||
const textGold = '#FFD700';
|
||
const textWhite = '#E8E8E8'; // 柔和的白色
|
||
const textGray = '#9BA1A6'; // 柔和的灰色
|
||
const cardBg = 'rgba(40, 45, 50, 0.6)'; // 卡片背景（深灰毛玻璃）
|
||
|
||
// ==================== 会话管理函数 ====================
|
||
|
||
const loadSessions = async () => {
|
||
if (!user?.id) return;
|
||
|
||
setIsLoadingSessions(true);
|
||
try {
|
||
const response = await axios.get('/mcp/agent/sessions', {
|
||
params: { user_id: String(user.id), limit: 50 },
|
||
});
|
||
|
||
if (response.data.success) {
|
||
setSessions(response.data.data);
|
||
logger.info('会话列表加载成功', response.data.data);
|
||
}
|
||
} catch (error) {
|
||
logger.error('加载会话列表失败', error);
|
||
toast({
|
||
title: '加载失败',
|
||
description: '无法加载会话列表',
|
||
status: 'error',
|
||
duration: 3000,
|
||
});
|
||
} 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);
|
||
logger.info('会话历史加载成功', formattedMessages);
|
||
}
|
||
} catch (error) {
|
||
logger.error('加载会话历史失败', error);
|
||
toast({
|
||
title: '加载失败',
|
||
description: '无法加载会话历史',
|
||
status: 'error',
|
||
duration: 3000,
|
||
});
|
||
}
|
||
};
|
||
|
||
const createNewSession = () => {
|
||
setCurrentSessionId(null);
|
||
setMessages([
|
||
{
|
||
id: Date.now(),
|
||
type: MessageTypes.AGENT_RESPONSE,
|
||
content: `你好${user?.nickname || ''}！我是价小前，北京价值前沿科技公司的AI投研助手。\n\n我会通过多步骤分析来帮助你深入了解金融市场。\n\n你可以问我：\n• 全面分析某只股票\n• 某个行业的投资机会\n• 今日市场热点\n• 某个概念板块的表现`,
|
||
timestamp: new Date().toISOString(),
|
||
},
|
||
]);
|
||
};
|
||
|
||
const switchSession = (sessionId) => {
|
||
setCurrentSessionId(sessionId);
|
||
loadSessionHistory(sessionId);
|
||
};
|
||
|
||
const deleteSession = async (sessionId) => {
|
||
toast({
|
||
title: '删除会话',
|
||
description: '此功能尚未实现',
|
||
status: 'info',
|
||
duration: 2000,
|
||
});
|
||
};
|
||
|
||
// ==================== 消息处理函数 ====================
|
||
|
||
const scrollToBottom = () => {
|
||
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
|
||
};
|
||
|
||
useEffect(() => {
|
||
scrollToBottom();
|
||
}, [messages]);
|
||
|
||
// 监听窗口大小变化，动态更新移动端状态
|
||
useEffect(() => {
|
||
const handleResize = () => {
|
||
const mobile = window.innerWidth < 768;
|
||
setIsMobile(mobile);
|
||
};
|
||
|
||
window.addEventListener('resize', handleResize);
|
||
return () => window.removeEventListener('resize', handleResize);
|
||
}, []);
|
||
|
||
// 在 AgentChat 页面隐藏 Bytedesk 客服插件（避免遮挡页面）
|
||
useEffect(() => {
|
||
// 隐藏 Bytedesk - 更安全的方式
|
||
const hideBytedeskElements = () => {
|
||
try {
|
||
// 查找所有 Bytedesk 相关元素
|
||
const bytedeskElements = document.querySelectorAll(
|
||
'[class*="bytedesk"], [id*="bytedesk"], [class*="BytedeskWeb"], .bytedesk-widget'
|
||
);
|
||
|
||
// 保存原始 display 值
|
||
const originalDisplays = new Map();
|
||
|
||
bytedeskElements.forEach(el => {
|
||
if (el && el.style) {
|
||
originalDisplays.set(el, el.style.display);
|
||
el.style.display = 'none';
|
||
}
|
||
});
|
||
|
||
// 返回清理函数
|
||
return () => {
|
||
bytedeskElements.forEach(el => {
|
||
if (el && el.style) {
|
||
const originalDisplay = originalDisplays.get(el);
|
||
if (originalDisplay !== undefined) {
|
||
el.style.display = originalDisplay;
|
||
} else {
|
||
el.style.display = '';
|
||
}
|
||
}
|
||
});
|
||
};
|
||
} catch (error) {
|
||
console.warn('Failed to hide Bytedesk elements:', error);
|
||
return () => {}; // 返回空清理函数
|
||
}
|
||
};
|
||
|
||
const cleanup = hideBytedeskElements();
|
||
|
||
// 组件卸载时恢复显示
|
||
return cleanup;
|
||
}, []);
|
||
|
||
const addMessage = (message) => {
|
||
setMessages((prev) => [...prev, { ...message, id: Date.now() }]);
|
||
};
|
||
|
||
const handleSendMessage = async () => {
|
||
if (!inputValue.trim() || isProcessing) return;
|
||
|
||
const hasAccess = user?.subscription_type === 'max';
|
||
|
||
if (!hasAccess) {
|
||
logger.warn('AgentChat', '权限检查失败', {
|
||
userId: user?.id,
|
||
subscription_type: user?.subscription_type,
|
||
});
|
||
|
||
toast({
|
||
title: '订阅升级',
|
||
description: '「价小前投研」功能需要 Max 订阅。请前往设置页面升级您的订阅。',
|
||
status: 'warning',
|
||
duration: 5000,
|
||
isClosable: true,
|
||
});
|
||
return;
|
||
}
|
||
|
||
const userMessage = {
|
||
type: MessageTypes.USER,
|
||
content: inputValue,
|
||
timestamp: new Date().toISOString(),
|
||
};
|
||
|
||
addMessage(userMessage);
|
||
const userInput = inputValue;
|
||
setInputValue('');
|
||
setIsProcessing(true);
|
||
setCurrentProgress(0);
|
||
|
||
let currentPlan = null;
|
||
let stepResults = [];
|
||
let executingMessageId = null;
|
||
|
||
try {
|
||
addMessage({
|
||
type: MessageTypes.AGENT_THINKING,
|
||
content: '正在分析你的问题...',
|
||
timestamp: new Date().toISOString(),
|
||
});
|
||
|
||
setCurrentProgress(10);
|
||
|
||
const requestBody = {
|
||
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 ? String(user.id) : 'anonymous',
|
||
user_nickname: user?.nickname || user?.username || '匿名用户',
|
||
user_avatar: user?.avatar || '',
|
||
subscription_type: user?.subscription_type || 'free',
|
||
session_id: currentSessionId,
|
||
model: selectedModel, // 传递选中的模型
|
||
tools: selectedTools, // 传递选中的工具
|
||
};
|
||
|
||
const response = await fetch('/mcp/agent/chat/stream', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body: JSON.stringify(requestBody),
|
||
});
|
||
|
||
if (!response.ok) {
|
||
throw new Error(`HTTP error! status: ${response.status}`);
|
||
}
|
||
|
||
const reader = response.body.getReader();
|
||
const decoder = new TextDecoder();
|
||
let buffer = '';
|
||
|
||
let thinkingMessageId = null;
|
||
let thinkingContent = '';
|
||
let summaryMessageId = null;
|
||
let summaryContent = '';
|
||
|
||
while (true) {
|
||
const { done, value } = await reader.read();
|
||
if (done) break;
|
||
|
||
buffer += decoder.decode(value, { stream: true });
|
||
const lines = buffer.split('\n');
|
||
buffer = lines.pop();
|
||
|
||
let currentEvent = null;
|
||
|
||
for (const line of lines) {
|
||
if (!line.trim() || line.startsWith(':')) continue;
|
||
|
||
if (line.startsWith('event:')) {
|
||
currentEvent = line.substring(6).trim();
|
||
continue;
|
||
}
|
||
|
||
if (line.startsWith('data:')) {
|
||
try {
|
||
const data = JSON.parse(line.substring(5).trim());
|
||
|
||
if (currentEvent === 'thinking') {
|
||
if (!thinkingMessageId) {
|
||
thinkingMessageId = Date.now();
|
||
thinkingContent = '';
|
||
setMessages((prev) => prev.filter((m) => m.type !== MessageTypes.AGENT_THINKING));
|
||
addMessage({
|
||
id: thinkingMessageId,
|
||
type: MessageTypes.AGENT_THINKING,
|
||
content: '',
|
||
timestamp: new Date().toISOString(),
|
||
});
|
||
}
|
||
thinkingContent += data.content;
|
||
setMessages((prev) =>
|
||
prev.map((m) =>
|
||
m.id === thinkingMessageId
|
||
? { ...m, content: thinkingContent }
|
||
: m
|
||
)
|
||
);
|
||
} else if (currentEvent === 'plan') {
|
||
currentPlan = data;
|
||
thinkingMessageId = null;
|
||
thinkingContent = '';
|
||
setMessages((prev) => prev.filter((m) => m.type !== MessageTypes.AGENT_THINKING));
|
||
addMessage({
|
||
type: MessageTypes.AGENT_PLAN,
|
||
content: '已制定执行计划',
|
||
plan: data,
|
||
timestamp: new Date().toISOString(),
|
||
});
|
||
setCurrentProgress(30);
|
||
} else if (currentEvent === 'step_complete') {
|
||
const stepResult = {
|
||
step_index: data.step_index,
|
||
tool: data.tool,
|
||
status: data.status,
|
||
result: data.result,
|
||
error: data.error,
|
||
execution_time: data.execution_time,
|
||
};
|
||
stepResults.push(stepResult);
|
||
|
||
setMessages((prev) =>
|
||
prev.map((m) =>
|
||
m.id === executingMessageId
|
||
? { ...m, stepResults: [...stepResults] }
|
||
: m
|
||
)
|
||
);
|
||
|
||
const progress = 40 + (stepResults.length / (currentPlan?.steps?.length || 5)) * 40;
|
||
setCurrentProgress(Math.min(progress, 80));
|
||
} else if (currentEvent === 'summary_chunk') {
|
||
if (!summaryMessageId) {
|
||
summaryMessageId = Date.now();
|
||
summaryContent = '';
|
||
setMessages((prev) =>
|
||
prev.filter((m) => m.type !== MessageTypes.AGENT_THINKING && m.type !== MessageTypes.AGENT_EXECUTING)
|
||
);
|
||
addMessage({
|
||
id: summaryMessageId,
|
||
type: MessageTypes.AGENT_RESPONSE,
|
||
content: '',
|
||
plan: currentPlan,
|
||
stepResults: stepResults,
|
||
isStreaming: true,
|
||
timestamp: new Date().toISOString(),
|
||
});
|
||
setCurrentProgress(85);
|
||
}
|
||
summaryContent += data.content;
|
||
setMessages((prev) =>
|
||
prev.map((m) =>
|
||
m.id === summaryMessageId
|
||
? { ...m, content: summaryContent }
|
||
: m
|
||
)
|
||
);
|
||
} else if (currentEvent === 'summary') {
|
||
if (summaryMessageId) {
|
||
setMessages((prev) =>
|
||
prev.map((m) =>
|
||
m.id === summaryMessageId
|
||
? {
|
||
...m,
|
||
content: data.content || summaryContent,
|
||
metadata: data.metadata,
|
||
isStreaming: false,
|
||
}
|
||
: m
|
||
)
|
||
);
|
||
} else {
|
||
setMessages((prev) =>
|
||
prev.filter((m) => m.type !== MessageTypes.AGENT_THINKING && m.type !== MessageTypes.AGENT_EXECUTING)
|
||
);
|
||
addMessage({
|
||
type: MessageTypes.AGENT_RESPONSE,
|
||
content: data.content,
|
||
plan: currentPlan,
|
||
stepResults: stepResults,
|
||
metadata: data.metadata,
|
||
isStreaming: false,
|
||
timestamp: new Date().toISOString(),
|
||
});
|
||
}
|
||
setCurrentProgress(100);
|
||
} else if (currentEvent === 'status') {
|
||
if (data.stage === 'planning') {
|
||
setMessages((prev) => prev.filter((m) => m.type !== MessageTypes.AGENT_THINKING));
|
||
addMessage({
|
||
type: MessageTypes.AGENT_THINKING,
|
||
content: data.message,
|
||
timestamp: new Date().toISOString(),
|
||
});
|
||
setCurrentProgress(10);
|
||
} else if (data.stage === 'executing') {
|
||
const msgId = Date.now();
|
||
executingMessageId = msgId;
|
||
addMessage({
|
||
id: msgId,
|
||
type: MessageTypes.AGENT_EXECUTING,
|
||
content: data.message,
|
||
plan: currentPlan,
|
||
stepResults: [],
|
||
timestamp: new Date().toISOString(),
|
||
});
|
||
setCurrentProgress(40);
|
||
} else if (data.stage === 'summarizing') {
|
||
setMessages((prev) => prev.filter((m) => m.type !== MessageTypes.AGENT_EXECUTING));
|
||
addMessage({
|
||
type: MessageTypes.AGENT_THINKING,
|
||
content: data.message,
|
||
timestamp: new Date().toISOString(),
|
||
});
|
||
setCurrentProgress(80);
|
||
}
|
||
}
|
||
} catch (e) {
|
||
logger.error('解析 SSE 数据失败', e);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
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?.detail || error.message || '处理失败';
|
||
|
||
addMessage({
|
||
type: MessageTypes.ERROR,
|
||
content: `处理失败：${errorMessage}`,
|
||
timestamp: new Date().toISOString(),
|
||
});
|
||
|
||
toast({
|
||
title: '处理失败',
|
||
description: errorMessage,
|
||
status: 'error',
|
||
duration: 5000,
|
||
isClosable: true,
|
||
});
|
||
} finally {
|
||
setIsProcessing(false);
|
||
setCurrentProgress(0);
|
||
inputRef.current?.focus();
|
||
}
|
||
};
|
||
|
||
const handleKeyPress = (e) => {
|
||
if (e.key === 'Enter' && !e.shiftKey) {
|
||
e.preventDefault();
|
||
handleSendMessage();
|
||
}
|
||
};
|
||
|
||
const handleClearChat = () => {
|
||
createNewSession();
|
||
};
|
||
|
||
const handleExportChat = () => {
|
||
const chatText = messages
|
||
.filter((m) => m.type === MessageTypes.USER || m.type === MessageTypes.AGENT_RESPONSE)
|
||
.map((msg) => `[${msg.type === MessageTypes.USER ? '用户' : '价小前'}] ${msg.content}`)
|
||
.join('\n\n');
|
||
|
||
const blob = new Blob([chatText], { type: 'text/plain' });
|
||
const url = URL.createObjectURL(blob);
|
||
const a = document.createElement('a');
|
||
a.href = url;
|
||
a.download = `chat_${new Date().toISOString().slice(0, 10)}.txt`;
|
||
a.click();
|
||
URL.revokeObjectURL(url);
|
||
};
|
||
|
||
// ==================== 工具选择处理 ====================
|
||
|
||
const handleToolToggle = (toolId, isChecked) => {
|
||
if (isChecked) {
|
||
setSelectedTools((prev) => [...prev, toolId]);
|
||
} else {
|
||
setSelectedTools((prev) => prev.filter((id) => id !== toolId));
|
||
}
|
||
};
|
||
|
||
const handleCategoryToggle = (categoryTools, isAllSelected) => {
|
||
const toolIds = categoryTools.map((t) => t.id);
|
||
if (isAllSelected) {
|
||
// 全部取消选中
|
||
setSelectedTools((prev) => prev.filter((id) => !toolIds.includes(id)));
|
||
} else {
|
||
// 全部选中
|
||
setSelectedTools((prev) => {
|
||
const newTools = [...prev];
|
||
toolIds.forEach((id) => {
|
||
if (!newTools.includes(id)) {
|
||
newTools.push(id);
|
||
}
|
||
});
|
||
return newTools;
|
||
});
|
||
}
|
||
};
|
||
|
||
// ==================== 初始化 ====================
|
||
|
||
useEffect(() => {
|
||
if (user) {
|
||
loadSessions();
|
||
createNewSession();
|
||
}
|
||
}, [user]);
|
||
|
||
// ==================== 渲染 ====================
|
||
|
||
const quickQuestions = [
|
||
'全面分析贵州茅台这只股票',
|
||
'今日涨停股票有哪些亮点',
|
||
'新能源概念板块的投资机会',
|
||
'半导体行业最新动态',
|
||
];
|
||
|
||
const filteredSessions = sessions.filter(
|
||
(session) =>
|
||
!searchQuery ||
|
||
session.last_message?.toLowerCase().includes(searchQuery.toLowerCase())
|
||
);
|
||
|
||
return (
|
||
<Box w="100%" h="100vh" bg={darkBg} display="flex" flexDirection="column">
|
||
{/* 顶部导航栏 */}
|
||
<HomeNavbar />
|
||
|
||
{/* 全局样式：确保页面正确显示 */}
|
||
<Global
|
||
styles={css`
|
||
/* 隐藏可能干扰的全局元素 */
|
||
.chakra-portal {
|
||
z-index: 9999;
|
||
}
|
||
`}
|
||
/>
|
||
|
||
{/* 主内容区域 */}
|
||
<Flex
|
||
flex="1"
|
||
w="100%"
|
||
bg={darkBg}
|
||
overflow="hidden"
|
||
position="relative"
|
||
flexDirection="row"
|
||
>
|
||
<Box
|
||
position="absolute"
|
||
top="-50%"
|
||
right="-20%"
|
||
width="600px"
|
||
height="600px"
|
||
bg={goldGradient}
|
||
opacity="0.05"
|
||
filter="blur(100px)"
|
||
borderRadius="full"
|
||
pointerEvents="none"
|
||
/>
|
||
<Box
|
||
position="absolute"
|
||
bottom="-30%"
|
||
left="-10%"
|
||
width="500px"
|
||
height="500px"
|
||
bg={goldGradient}
|
||
opacity="0.03"
|
||
filter="blur(100px)"
|
||
borderRadius="full"
|
||
pointerEvents="none"
|
||
/>
|
||
|
||
{/* 左侧会话列表 */}
|
||
<Collapse in={isSidebarOpen} animateOpacity>
|
||
<Box
|
||
w="280px"
|
||
bg={glassBg}
|
||
backdropFilter="blur(20px)"
|
||
borderRight="1px solid"
|
||
borderColor={borderGold}
|
||
h="100%"
|
||
display="flex"
|
||
flexDirection="column"
|
||
boxShadow="0 8px 32px rgba(255, 215, 0, 0.1)"
|
||
>
|
||
{/* 侧边栏头部 */}
|
||
<Box p={4} borderBottom="1px solid" borderColor={borderGold}>
|
||
<Button
|
||
leftIcon={<FiPlus />}
|
||
bg={goldGradient}
|
||
color={darkBg}
|
||
w="100%"
|
||
onClick={createNewSession}
|
||
size="sm"
|
||
_hover={{
|
||
transform: 'translateY(-2px)',
|
||
boxShadow: '0 4px 20px rgba(255, 215, 0, 0.4)',
|
||
}}
|
||
transition="all 0.3s"
|
||
fontWeight="bold"
|
||
>
|
||
新建对话
|
||
</Button>
|
||
|
||
<InputGroup mt={3} size="sm">
|
||
<InputLeftElement pointerEvents="none">
|
||
<FiSearch color={textGold} />
|
||
</InputLeftElement>
|
||
<Input
|
||
placeholder="搜索对话..."
|
||
value={searchQuery}
|
||
onChange={(e) => setSearchQuery(e.target.value)}
|
||
bg="rgba(255, 255, 255, 0.05)"
|
||
border="1px solid"
|
||
borderColor={borderGold}
|
||
color={textWhite}
|
||
_placeholder={{ color: textGray }}
|
||
_hover={{ borderColor: goldAccent }}
|
||
_focus={{ borderColor: goldAccent, boxShadow: `0 0 0 1px ${goldAccent}` }}
|
||
/>
|
||
</InputGroup>
|
||
</Box>
|
||
|
||
{/* 会话列表 */}
|
||
<VStack
|
||
flex="1"
|
||
overflowY="auto"
|
||
spacing={0}
|
||
align="stretch"
|
||
css={{
|
||
'&::-webkit-scrollbar': { width: '6px' },
|
||
'&::-webkit-scrollbar-thumb': {
|
||
background: borderGold,
|
||
borderRadius: '3px',
|
||
},
|
||
}}
|
||
>
|
||
{isLoadingSessions ? (
|
||
<Flex justify="center" align="center" h="200px">
|
||
<Spinner color={goldAccent} />
|
||
</Flex>
|
||
) : filteredSessions.length === 0 ? (
|
||
<Flex justify="center" align="center" h="200px" direction="column">
|
||
<FiMessageSquare size={32} color={textGray} />
|
||
<Text mt={2} fontSize="sm" color={textGray}>
|
||
{searchQuery ? '没有找到匹配的对话' : '暂无对话记录'}
|
||
</Text>
|
||
</Flex>
|
||
) : (
|
||
filteredSessions.map((session) => (
|
||
<Box
|
||
key={session.session_id}
|
||
p={3}
|
||
cursor="pointer"
|
||
bg={currentSessionId === session.session_id ? 'rgba(255, 215, 0, 0.1)' : 'transparent'}
|
||
_hover={{ bg: 'rgba(255, 215, 0, 0.05)' }}
|
||
borderBottom="1px solid"
|
||
borderColor="rgba(255, 215, 0, 0.1)"
|
||
onClick={() => switchSession(session.session_id)}
|
||
transition="all 0.2s"
|
||
>
|
||
<Flex justify="space-between" align="start">
|
||
<VStack align="start" spacing={1} flex="1">
|
||
<Text fontSize="sm" fontWeight="medium" noOfLines={2} color={textWhite}>
|
||
{session.last_message || '新对话'}
|
||
</Text>
|
||
<HStack spacing={2} fontSize="xs" color={textGray}>
|
||
<FiClock size={12} />
|
||
<Text>
|
||
{new Date(session.last_timestamp).toLocaleDateString('zh-CN', {
|
||
month: 'numeric',
|
||
day: 'numeric',
|
||
hour: 'numeric',
|
||
minute: 'numeric',
|
||
})}
|
||
</Text>
|
||
<Badge
|
||
bg="rgba(255, 215, 0, 0.2)"
|
||
color={goldAccent}
|
||
fontSize="xx-small"
|
||
borderRadius="full"
|
||
px={2}
|
||
>
|
||
{session.message_count} 条
|
||
</Badge>
|
||
</HStack>
|
||
</VStack>
|
||
|
||
<Menu>
|
||
<MenuButton
|
||
as={IconButton}
|
||
icon={<FiMoreVertical />}
|
||
size="xs"
|
||
variant="ghost"
|
||
color={textGray}
|
||
_hover={{ color: goldAccent }}
|
||
onClick={(e) => e.stopPropagation()}
|
||
/>
|
||
<MenuList bg={glassBg} backdropFilter="blur(20px)" borderColor={borderGold}>
|
||
<MenuItem
|
||
icon={<FiTrash2 />}
|
||
color="red.400"
|
||
bg="transparent"
|
||
_hover={{ bg: 'rgba(255, 0, 0, 0.1)' }}
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
deleteSession(session.session_id);
|
||
}}
|
||
>
|
||
删除对话
|
||
</MenuItem>
|
||
</MenuList>
|
||
</Menu>
|
||
</Flex>
|
||
</Box>
|
||
))
|
||
)}
|
||
</VStack>
|
||
|
||
{/* 用户信息 */}
|
||
<Box p={4} borderTop="1px solid" borderColor={borderGold}>
|
||
<HStack spacing={3}>
|
||
<Avatar
|
||
size="sm"
|
||
name={user?.nickname}
|
||
src={user?.avatar}
|
||
border="2px solid"
|
||
borderColor={goldAccent}
|
||
/>
|
||
<VStack align="start" spacing={0} flex="1">
|
||
<Text fontSize="sm" fontWeight="medium" color={textWhite}>
|
||
{user?.nickname || '未登录'}
|
||
</Text>
|
||
<Badge
|
||
bg="rgba(255, 215, 0, 0.2)"
|
||
color={goldAccent}
|
||
fontSize="xs"
|
||
borderRadius="full"
|
||
px={2}
|
||
>
|
||
MAX 订阅
|
||
</Badge>
|
||
</VStack>
|
||
</HStack>
|
||
</Box>
|
||
</Box>
|
||
</Collapse>
|
||
|
||
{/* 主聊天区域 */}
|
||
<Flex flex="1" direction="column" h="100%" position="relative">
|
||
{/* 聊天头部 */}
|
||
<Box
|
||
bg={glassBg}
|
||
backdropFilter="blur(20px)"
|
||
borderBottom="1px solid"
|
||
borderColor={borderGold}
|
||
px={{ base: 2, md: 4 }}
|
||
py={{ base: 2, md: 2 }}
|
||
minH={{ base: "56px", md: "64px" }}
|
||
boxShadow="0 4px 16px rgba(255, 215, 0, 0.1)"
|
||
flexShrink={0}
|
||
zIndex={10}
|
||
>
|
||
<Flex justify="space-between" align="center" h="full">
|
||
<HStack spacing={{ base: 2, md: 3 }} align="center" flex={1} minW={0}>
|
||
<Box
|
||
w={{ base: "24px", md: "32px" }}
|
||
h={{ base: "24px", md: "32px" }}
|
||
borderRadius="lg"
|
||
bg={goldGradient}
|
||
display="flex"
|
||
alignItems="center"
|
||
justifyContent="center"
|
||
boxShadow="0 4px 12px rgba(255, 215, 0, 0.3)"
|
||
flexShrink={0}
|
||
>
|
||
<FiCpu fontSize={{ base: "0.9rem", md: "1.2rem" }} color={darkBg} />
|
||
</Box>
|
||
<VStack align="start" spacing={0} flex={1} minW={0}>
|
||
<HStack spacing={2} align="baseline">
|
||
<Heading
|
||
size={{ base: "xs", md: "sm" }}
|
||
color={textWhite}
|
||
noOfLines={1}
|
||
>
|
||
价小前投研
|
||
</Heading>
|
||
<Badge
|
||
bg="rgba(255, 215, 0, 0.2)"
|
||
color={goldAccent}
|
||
fontSize={{ base: "xx-small", md: "xs" }}
|
||
borderRadius="full"
|
||
px={{ base: 1, md: 2 }}
|
||
whiteSpace="nowrap"
|
||
display="inline-flex"
|
||
alignItems="center"
|
||
gap={1}
|
||
>
|
||
<Box as={FiZap} display="inline-block" width="10px" height="10px" />
|
||
<Text as="span" fontSize="inherit">AI 深度分析</Text>
|
||
</Badge>
|
||
</HStack>
|
||
<Text
|
||
fontSize={{ base: "xx-small", md: "xs" }}
|
||
color={textGray}
|
||
display={{ base: "none", lg: "block" }}
|
||
noOfLines={1}
|
||
>
|
||
{AVAILABLE_MODELS.find(m => m.id === selectedModel)?.name || '智能模型'}
|
||
</Text>
|
||
</VStack>
|
||
</HStack>
|
||
|
||
<HStack spacing={{ base: 1, md: 2 }} flexShrink={0}>
|
||
<IconButton
|
||
icon={<FiMessageSquare />}
|
||
size="sm"
|
||
variant="ghost"
|
||
color={goldAccent}
|
||
_hover={{ bg: 'rgba(255, 215, 0, 0.1)' }}
|
||
aria-label="历史对话"
|
||
onClick={toggleSidebar}
|
||
/>
|
||
<IconButton
|
||
icon={<FiRefreshCw />}
|
||
size="sm"
|
||
variant="ghost"
|
||
color={textGray}
|
||
_hover={{ color: goldAccent, bg: 'rgba(255, 215, 0, 0.1)' }}
|
||
aria-label="清空对话"
|
||
onClick={handleClearChat}
|
||
/>
|
||
<IconButton
|
||
icon={<FiDownload />}
|
||
size="sm"
|
||
variant="ghost"
|
||
color={textGray}
|
||
_hover={{ color: goldAccent, bg: 'rgba(255, 215, 0, 0.1)' }}
|
||
aria-label="导出对话"
|
||
onClick={handleExportChat}
|
||
display={{ base: "none", sm: "inline-flex" }}
|
||
/>
|
||
<IconButton
|
||
icon={<FiSettings />}
|
||
size="sm"
|
||
variant="ghost"
|
||
color={goldAccent}
|
||
_hover={{ bg: 'rgba(255, 215, 0, 0.1)' }}
|
||
aria-label="设置"
|
||
onClick={toggleRightPanel}
|
||
/>
|
||
</HStack>
|
||
</Flex>
|
||
|
||
{/* 进度条 */}
|
||
{isProcessing && (
|
||
<Progress
|
||
value={currentProgress}
|
||
size="xs"
|
||
mt={3}
|
||
borderRadius="full"
|
||
bg="rgba(255, 255, 255, 0.1)"
|
||
sx={{
|
||
'& > div': {
|
||
background: goldGradient,
|
||
},
|
||
}}
|
||
isAnimated
|
||
/>
|
||
)}
|
||
</Box>
|
||
|
||
{/* 消息列表 */}
|
||
<Box
|
||
flex="1"
|
||
overflowY="auto"
|
||
px={{ base: 3, md: 6 }}
|
||
py={{ base: 4, md: 6 }}
|
||
css={{
|
||
'&::-webkit-scrollbar': { width: '8px' },
|
||
'&::-webkit-scrollbar-thumb': {
|
||
background: borderGold,
|
||
borderRadius: '4px',
|
||
},
|
||
}}
|
||
>
|
||
<VStack spacing={{ base: 4, md: 5 }} align="stretch" maxW="1200px" mx="auto">
|
||
{messages.map((message) => (
|
||
<Fade in key={message.id}>
|
||
<MessageRenderer message={message} userAvatar={user?.avatar} />
|
||
</Fade>
|
||
))}
|
||
<div ref={messagesEndRef} />
|
||
</VStack>
|
||
</Box>
|
||
|
||
{/* 快捷问题 */}
|
||
{messages.length <= 2 && !isProcessing && (
|
||
<Box px={{ base: 3, md: 6 }} py={{ base: 3, md: 4 }} bg={glassBg} backdropFilter="blur(20px)" borderTop="1px solid" borderColor={borderGold}>
|
||
<Text fontSize="xs" color={textGray} mb={2}>
|
||
💡 试试这些问题：
|
||
</Text>
|
||
<Flex wrap="wrap" gap={2}>
|
||
{quickQuestions.map((question, idx) => (
|
||
<Button
|
||
key={idx}
|
||
size="sm"
|
||
variant="outline"
|
||
borderColor={borderGold}
|
||
color={textGold}
|
||
fontSize="xs"
|
||
_hover={{
|
||
bg: 'rgba(255, 215, 0, 0.1)',
|
||
borderColor: goldAccent,
|
||
transform: 'translateY(-2px)',
|
||
}}
|
||
transition="all 0.2s"
|
||
onClick={() => {
|
||
setInputValue(question);
|
||
inputRef.current?.focus();
|
||
}}
|
||
>
|
||
{question}
|
||
</Button>
|
||
))}
|
||
</Flex>
|
||
</Box>
|
||
)}
|
||
|
||
{/* 输入框 */}
|
||
<Box px={{ base: 3, md: 6 }} py={{ base: 3, md: 4 }} bg={glassBg} backdropFilter="blur(20px)" borderTop="1px solid" borderColor={borderGold}>
|
||
<Flex>
|
||
<Input
|
||
ref={inputRef}
|
||
value={inputValue}
|
||
onChange={(e) => setInputValue(e.target.value)}
|
||
onKeyPress={handleKeyPress}
|
||
placeholder={isMobile ? "输入问题..." : "输入你的问题，我会进行深度分析..."}
|
||
bg="rgba(255, 255, 255, 0.05)"
|
||
border="1px solid"
|
||
borderColor={borderGold}
|
||
color={textWhite}
|
||
_placeholder={{ color: textGray }}
|
||
_focus={{ borderColor: goldAccent, boxShadow: `0 0 0 1px ${goldAccent}` }}
|
||
mr={2}
|
||
disabled={isProcessing}
|
||
size={{ base: "md", md: "lg" }}
|
||
/>
|
||
<Button
|
||
bg={goldGradient}
|
||
color={darkBg}
|
||
onClick={handleSendMessage}
|
||
isLoading={isProcessing}
|
||
disabled={!inputValue.trim() || isProcessing}
|
||
size={{ base: "md", md: "lg" }}
|
||
minW={{ base: "60px", md: "100px" }}
|
||
_hover={{
|
||
transform: 'translateY(-2px)',
|
||
boxShadow: '0 4px 20px rgba(255, 215, 0, 0.4)',
|
||
}}
|
||
transition="all 0.3s"
|
||
fontWeight="bold"
|
||
>
|
||
{isProcessing ? <Spinner size="sm" /> : (
|
||
isMobile ? <FiSend /> : <HStack spacing={2}><FiSend /><Text>发送</Text></HStack>
|
||
)}
|
||
</Button>
|
||
</Flex>
|
||
</Box>
|
||
</Flex>
|
||
|
||
{/* 右侧配置面板 */}
|
||
<Collapse in={isRightPanelOpen} animateOpacity>
|
||
<Box
|
||
w="320px"
|
||
bg={glassBg}
|
||
backdropFilter="blur(20px)"
|
||
borderLeft="1px solid"
|
||
borderColor={borderGold}
|
||
h="100%"
|
||
overflowY="auto"
|
||
boxShadow="0 -8px 32px rgba(255, 215, 0, 0.1)"
|
||
css={{
|
||
'&::-webkit-scrollbar': { width: '6px' },
|
||
'&::-webkit-scrollbar-thumb': {
|
||
background: borderGold,
|
||
borderRadius: '3px',
|
||
},
|
||
}}
|
||
>
|
||
<VStack align="stretch" spacing={4} p={4}>
|
||
{/* 模型选择 */}
|
||
<Box>
|
||
<HStack mb={3}>
|
||
<FiCpu color={goldAccent} />
|
||
<Text fontSize="sm" fontWeight="bold" color={textWhite}>
|
||
选择模型
|
||
</Text>
|
||
</HStack>
|
||
<VStack align="stretch" spacing={2}>
|
||
{AVAILABLE_MODELS.map((model) => (
|
||
<Box
|
||
key={model.id}
|
||
p={3}
|
||
bg={selectedModel === model.id ? 'rgba(255, 215, 0, 0.15)' : 'rgba(255, 255, 255, 0.03)'}
|
||
borderRadius="lg"
|
||
border="1px solid"
|
||
borderColor={selectedModel === model.id ? goldAccent : 'rgba(255, 215, 0, 0.2)'}
|
||
cursor="pointer"
|
||
onClick={() => setSelectedModel(model.id)}
|
||
transition="all 0.2s"
|
||
_hover={{
|
||
bg: 'rgba(255, 215, 0, 0.1)',
|
||
borderColor: goldAccent,
|
||
transform: 'translateX(4px)',
|
||
}}
|
||
position="relative"
|
||
>
|
||
{model.recommended && (
|
||
<Badge
|
||
position="absolute"
|
||
top="-8px"
|
||
right="8px"
|
||
bg={goldGradient}
|
||
color={darkBg}
|
||
fontSize="xx-small"
|
||
px={2}
|
||
borderRadius="full"
|
||
fontWeight="bold"
|
||
>
|
||
推荐
|
||
</Badge>
|
||
)}
|
||
<HStack spacing={3}>
|
||
<Text fontSize="xl">{model.icon}</Text>
|
||
<VStack align="start" spacing={0} flex="1">
|
||
<Text fontSize="sm" fontWeight="bold" color={textWhite}>
|
||
{model.name}
|
||
</Text>
|
||
<Text fontSize="xs" color={textGray} noOfLines={2}>
|
||
{model.description}
|
||
</Text>
|
||
</VStack>
|
||
{selectedModel === model.id && (
|
||
<FiCheckCircle color={goldAccent} />
|
||
)}
|
||
</HStack>
|
||
</Box>
|
||
))}
|
||
</VStack>
|
||
</Box>
|
||
|
||
<Divider borderColor={borderGold} />
|
||
|
||
{/* 工具选择 */}
|
||
<Box>
|
||
<HStack mb={3} justify="space-between">
|
||
<HStack>
|
||
<FiTool color={goldAccent} />
|
||
<Text fontSize="sm" fontWeight="bold" color={textWhite}>
|
||
MCP 工具
|
||
</Text>
|
||
</HStack>
|
||
<Badge
|
||
bg="rgba(255, 215, 0, 0.2)"
|
||
color={goldAccent}
|
||
fontSize="xs"
|
||
borderRadius="full"
|
||
px={2}
|
||
>
|
||
{selectedTools.length} 个已选
|
||
</Badge>
|
||
</HStack>
|
||
|
||
<Accordion allowMultiple defaultIndex={[]}>
|
||
{MCP_TOOL_CATEGORIES.map((category, catIdx) => {
|
||
const categoryToolIds = category.tools.map((t) => t.id);
|
||
const selectedInCategory = categoryToolIds.filter((id) => selectedTools.includes(id));
|
||
const isAllSelected = selectedInCategory.length === categoryToolIds.length;
|
||
const isSomeSelected = selectedInCategory.length > 0 && !isAllSelected;
|
||
|
||
return (
|
||
<AccordionItem
|
||
key={catIdx}
|
||
border="none"
|
||
bg="rgba(255, 255, 255, 0.02)"
|
||
borderRadius="lg"
|
||
mb={2}
|
||
>
|
||
<AccordionButton
|
||
_hover={{ bg: 'rgba(255, 215, 0, 0.05)' }}
|
||
borderRadius="lg"
|
||
p={3}
|
||
>
|
||
<HStack flex="1" spacing={3}>
|
||
<Text fontSize="lg">{category.icon}</Text>
|
||
<Text fontSize="sm" fontWeight="medium" color={textWhite}>
|
||
{category.name}
|
||
</Text>
|
||
<Badge
|
||
bg="rgba(255, 215, 0, 0.2)"
|
||
color={goldAccent}
|
||
fontSize="xx-small"
|
||
borderRadius="full"
|
||
>
|
||
{selectedInCategory.length}/{category.tools.length}
|
||
</Badge>
|
||
</HStack>
|
||
<AccordionIcon color={goldAccent} />
|
||
</AccordionButton>
|
||
<AccordionPanel pb={3} pt={2}>
|
||
<VStack align="stretch" spacing={2}>
|
||
{/* 全选按钮 */}
|
||
<Button
|
||
size="xs"
|
||
variant="ghost"
|
||
color={isAllSelected ? goldAccent : textGray}
|
||
onClick={() => handleCategoryToggle(category.tools, isAllSelected)}
|
||
_hover={{ bg: 'rgba(255, 215, 0, 0.1)' }}
|
||
>
|
||
{isAllSelected ? '取消全选' : '全选'}
|
||
</Button>
|
||
|
||
{category.tools.map((tool) => (
|
||
<Checkbox
|
||
key={tool.id}
|
||
isChecked={selectedTools.includes(tool.id)}
|
||
onChange={(e) => handleToolToggle(tool.id, e.target.checked)}
|
||
colorScheme="yellow"
|
||
size="sm"
|
||
sx={{
|
||
'.chakra-checkbox__control': {
|
||
borderColor: borderGold,
|
||
bg: 'rgba(255, 255, 255, 0.05)',
|
||
_checked: {
|
||
bg: goldGradient,
|
||
borderColor: goldAccent,
|
||
},
|
||
},
|
||
}}
|
||
>
|
||
<VStack align="start" spacing={0} ml={2}>
|
||
<Text fontSize="xs" fontWeight="medium" color={textWhite}>
|
||
{tool.name}
|
||
</Text>
|
||
<Text fontSize="xx-small" color={textGray}>
|
||
{tool.description}
|
||
</Text>
|
||
</VStack>
|
||
</Checkbox>
|
||
))}
|
||
</VStack>
|
||
</AccordionPanel>
|
||
</AccordionItem>
|
||
);
|
||
})}
|
||
</Accordion>
|
||
</Box>
|
||
</VStack>
|
||
</Box>
|
||
</Collapse>
|
||
</Flex>
|
||
</Box>
|
||
);
|
||
};
|
||
|
||
/**
|
||
* 消息渲染器（深灰毛玻璃风格）
|
||
*/
|
||
const MessageRenderer = ({ message, userAvatar }) => {
|
||
const glassBg = 'rgba(30, 35, 40, 0.85)'; // 深灰色毛玻璃
|
||
const cardBg = 'rgba(40, 45, 50, 0.6)'; // 卡片背景
|
||
const goldAccent = '#FFD700';
|
||
const goldGradient = 'linear-gradient(135deg, #FFD700 0%, #FFA500 100%)';
|
||
const darkBg = '#1a1d23';
|
||
const borderGold = 'rgba(255, 215, 0, 0.3)';
|
||
const textWhite = '#E8E8E8'; // 柔和的白色
|
||
const textGray = '#9BA1A6'; // 柔和的灰色
|
||
|
||
switch (message.type) {
|
||
case MessageTypes.USER:
|
||
return (
|
||
<Flex justify="flex-end">
|
||
<HStack align="flex-start" maxW="75%">
|
||
<Box
|
||
bg={goldGradient}
|
||
color={darkBg}
|
||
px={4}
|
||
py={3}
|
||
borderRadius="lg"
|
||
boxShadow="0 4px 16px rgba(255, 215, 0, 0.3)"
|
||
backdropFilter="blur(10px)"
|
||
>
|
||
<Text fontSize="sm" whiteSpace="pre-wrap" fontWeight="medium">
|
||
{message.content}
|
||
</Text>
|
||
</Box>
|
||
<Avatar
|
||
size="sm"
|
||
src={userAvatar}
|
||
icon={<FiUser fontSize="1rem" />}
|
||
border="2px solid"
|
||
borderColor={goldAccent}
|
||
/>
|
||
</HStack>
|
||
</Flex>
|
||
);
|
||
|
||
case MessageTypes.AGENT_THINKING:
|
||
return (
|
||
<Flex justify="flex-start">
|
||
<HStack align="flex-start" maxW="75%">
|
||
<Box
|
||
w="32px"
|
||
h="32px"
|
||
borderRadius="lg"
|
||
bg="rgba(138, 43, 226, 0.2)"
|
||
border="2px solid"
|
||
borderColor="purple.400"
|
||
display="flex"
|
||
alignItems="center"
|
||
justifyContent="center"
|
||
>
|
||
<FiCpu fontSize="1rem" color="purple" />
|
||
</Box>
|
||
<Box
|
||
bg={glassBg}
|
||
backdropFilter="blur(20px)"
|
||
px={4}
|
||
py={3}
|
||
borderRadius="lg"
|
||
borderWidth="1px"
|
||
borderColor="rgba(138, 43, 226, 0.3)"
|
||
boxShadow="0 4px 16px rgba(138, 43, 226, 0.2)"
|
||
>
|
||
<HStack>
|
||
<Spinner size="sm" color="purple.400" />
|
||
<Text fontSize="sm" color="purple.300">
|
||
{message.content}
|
||
</Text>
|
||
</HStack>
|
||
</Box>
|
||
</HStack>
|
||
</Flex>
|
||
);
|
||
|
||
case MessageTypes.AGENT_PLAN:
|
||
return (
|
||
<Flex justify="flex-start">
|
||
<HStack align="flex-start" maxW="85%">
|
||
<Box
|
||
w="32px"
|
||
h="32px"
|
||
borderRadius="lg"
|
||
bg="rgba(59, 130, 246, 0.2)"
|
||
border="2px solid"
|
||
borderColor="blue.400"
|
||
display="flex"
|
||
alignItems="center"
|
||
justifyContent="center"
|
||
>
|
||
<FiCpu fontSize="1rem" color="blue" />
|
||
</Box>
|
||
<VStack align="stretch" flex="1">
|
||
<PlanCard plan={message.plan} stepResults={[]} />
|
||
</VStack>
|
||
</HStack>
|
||
</Flex>
|
||
);
|
||
|
||
case MessageTypes.AGENT_EXECUTING:
|
||
return (
|
||
<Flex justify="flex-start">
|
||
<HStack align="flex-start" maxW="85%">
|
||
<Box
|
||
w="32px"
|
||
h="32px"
|
||
borderRadius="lg"
|
||
bg="rgba(249, 115, 22, 0.2)"
|
||
border="2px solid"
|
||
borderColor="orange.400"
|
||
display="flex"
|
||
alignItems="center"
|
||
justifyContent="center"
|
||
>
|
||
<FiCpu fontSize="1rem" color="orange" />
|
||
</Box>
|
||
<VStack align="stretch" flex="1" spacing={3}>
|
||
<PlanCard plan={message.plan} stepResults={message.stepResults} />
|
||
{message.stepResults?.map((result, idx) => (
|
||
<StepResultCard key={idx} stepResult={result} />
|
||
))}
|
||
</VStack>
|
||
</HStack>
|
||
</Flex>
|
||
);
|
||
|
||
case MessageTypes.AGENT_RESPONSE:
|
||
return (
|
||
<Flex justify="flex-start">
|
||
<HStack align="flex-start" maxW="85%">
|
||
<Box
|
||
w="32px"
|
||
h="32px"
|
||
borderRadius="lg"
|
||
bg={goldGradient}
|
||
display="flex"
|
||
alignItems="center"
|
||
justifyContent="center"
|
||
boxShadow="0 2px 8px rgba(255, 215, 0, 0.3)"
|
||
>
|
||
<FiCpu fontSize="1rem" color={darkBg} />
|
||
</Box>
|
||
<VStack align="stretch" flex="1" spacing={3}>
|
||
{/* 最终总结 */}
|
||
<Box
|
||
bg={glassBg}
|
||
backdropFilter="blur(20px)"
|
||
px={4}
|
||
py={3}
|
||
borderRadius="lg"
|
||
borderWidth="1px"
|
||
borderColor={borderGold}
|
||
boxShadow="0 4px 16px rgba(255, 215, 0, 0.1)"
|
||
>
|
||
{message.isStreaming ? (
|
||
<Text fontSize="sm" whiteSpace="pre-wrap" color={textWhite}>
|
||
{message.content}
|
||
</Text>
|
||
) : (
|
||
<MarkdownWithCharts content={message.content} />
|
||
)}
|
||
|
||
{message.metadata && (
|
||
<HStack mt={3} spacing={4} fontSize="xs" color={textGray}>
|
||
<Text>总步骤: {message.metadata.total_steps}</Text>
|
||
<Text color="green.400">✓ {message.metadata.successful_steps}</Text>
|
||
{message.metadata.failed_steps > 0 && (
|
||
<Text color="red.400">✗ {message.metadata.failed_steps}</Text>
|
||
)}
|
||
<Text>耗时: {message.metadata.total_execution_time?.toFixed(1)}s</Text>
|
||
</HStack>
|
||
)}
|
||
</Box>
|
||
|
||
{/* 执行详情（可选） */}
|
||
{message.plan && message.stepResults && message.stepResults.length > 0 && (
|
||
<VStack align="stretch" spacing={2}>
|
||
<Divider borderColor={borderGold} />
|
||
<Text fontSize="xs" fontWeight="bold" color={textGray}>
|
||
📊 执行详情（点击展开查看）
|
||
</Text>
|
||
{message.stepResults.map((result, idx) => (
|
||
<StepResultCard key={idx} stepResult={result} />
|
||
))}
|
||
</VStack>
|
||
)}
|
||
</VStack>
|
||
</HStack>
|
||
</Flex>
|
||
);
|
||
|
||
case MessageTypes.ERROR:
|
||
return (
|
||
<Flex justify="flex-start">
|
||
<HStack align="flex-start" maxW="75%">
|
||
<Box
|
||
w="32px"
|
||
h="32px"
|
||
borderRadius="lg"
|
||
bg="rgba(239, 68, 68, 0.2)"
|
||
border="2px solid"
|
||
borderColor="red.400"
|
||
display="flex"
|
||
alignItems="center"
|
||
justifyContent="center"
|
||
>
|
||
<FiCpu fontSize="1rem" color="red" />
|
||
</Box>
|
||
<Box
|
||
bg="rgba(239, 68, 68, 0.1)"
|
||
backdropFilter="blur(20px)"
|
||
color="red.300"
|
||
px={4}
|
||
py={3}
|
||
borderRadius="lg"
|
||
borderWidth="1px"
|
||
borderColor="rgba(239, 68, 68, 0.3)"
|
||
>
|
||
<Text fontSize="sm">{message.content}</Text>
|
||
</Box>
|
||
</HStack>
|
||
</Flex>
|
||
);
|
||
|
||
default:
|
||
return null;
|
||
}
|
||
};
|
||
|
||
export default AgentChatV4;
|