feat(aia): Complete AIA V2.0 with universal streaming capabilities
Major Updates: - Add StreamingService with OpenAI Compatible format (backend/common/streaming) - Upgrade Chat component V2 with Ant Design X integration - Implement AIA module with 12 intelligent agents - Create AgentHub with 100% prototype V11 restoration - Create ChatWorkspace with streaming response support - Add ThinkingBlock for deep thinking display - Add useAIStream Hook for OpenAI Compatible stream handling Backend Common Capabilities (~400 lines): - OpenAIStreamAdapter: SSE adapter with OpenAI format - StreamingService: unified streaming service - Support content and reasoning_content dual streams - Deep thinking tag processing (<think>...</think>) Frontend Common Capabilities (~2000 lines): - AIStreamChat: modern streaming chat component - ThinkingBlock: collapsible deep thinking display - ConversationList: conversation management with grouping - useAIStream: OpenAI Compatible stream handler Hook - useConversations: conversation state management Hook - Modern design styles (Ultramodern theme) AIA Module Frontend (~1500 lines): - AgentHub: 12 agent cards with timeline design - ChatWorkspace: fullscreen immersive chat interface - AgentCard: theme-colored cards (blue/yellow/teal/purple) - 5 phases, 12 agents configuration - Responsive layout (desktop + mobile) AIA Module Backend (~900 lines): - agentService: 12 agents config with system prompts - conversationService: refactored with StreamingService - attachmentService: file upload skeleton (30k token limit) - 12 API endpoints with authentication - Full CRUD for conversations and messages Documentation: - AIA module status and development guide - Universal capabilities catalog (11 services) - Quick reference card for developers - System overview updates Testing: - Stream response verified (HTTP 200) - Authentication working correctly - Auto conversation creation working - Deep thinking display working - Message input and send working Status: Core features completed (85%), attachment and history loading pending
This commit is contained in:
78
frontend-v2/src/modules/aia/components/AgentCard.tsx
Normal file
78
frontend-v2/src/modules/aia/components/AgentCard.tsx
Normal file
@@ -0,0 +1,78 @@
|
||||
/**
|
||||
* AgentCard - 智能体卡片组件
|
||||
*
|
||||
* 100%还原原型图V11的卡片设计：
|
||||
* - 背景色: #F6F9FF (蓝色系) / #F0FDFA (青色系-工具)
|
||||
* - 边框: #E0E7FF / #CCFBF1
|
||||
* - 圆角: 10px
|
||||
* - 内边距: 14px
|
||||
* - 最小高度: 145px
|
||||
* - 序号水印
|
||||
* - 悬停效果
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import * as LucideIcons from 'lucide-react';
|
||||
import type { AgentConfig } from '../types';
|
||||
import '../styles/agent-card.css';
|
||||
|
||||
interface AgentCardProps {
|
||||
agent: AgentConfig;
|
||||
onClick: (agent: AgentConfig) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* 动态获取 Lucide 图标
|
||||
*/
|
||||
const getIcon = (iconName: string): React.ComponentType<any> => {
|
||||
// 转换为 PascalCase
|
||||
const pascalCase = iconName
|
||||
.split('-')
|
||||
.map(word => word.charAt(0).toUpperCase() + word.slice(1))
|
||||
.join('');
|
||||
|
||||
return (LucideIcons as any)[pascalCase] || LucideIcons.HelpCircle;
|
||||
};
|
||||
|
||||
export const AgentCard: React.FC<AgentCardProps> = ({ agent, onClick }) => {
|
||||
const Icon = getIcon(agent.icon);
|
||||
const orderStr = String(agent.order).padStart(2, '0');
|
||||
|
||||
const handleClick = () => {
|
||||
if (agent.isTool && agent.toolUrl) {
|
||||
// 工具类：跳转外部链接
|
||||
window.location.href = agent.toolUrl;
|
||||
} else {
|
||||
onClick(agent);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`agent-card theme-${agent.theme} ${agent.isTool ? 'tool-card' : ''}`}
|
||||
onClick={handleClick}
|
||||
>
|
||||
{/* 工具类：右上角跳转图标 */}
|
||||
{agent.isTool && (
|
||||
<LucideIcons.ExternalLink className="link-icon" />
|
||||
)}
|
||||
|
||||
{/* 头部：图标 + 标题 + 序号 */}
|
||||
<div className="card-header">
|
||||
<div className="card-header-left">
|
||||
<div className="icon-box">
|
||||
<Icon className="agent-icon" />
|
||||
</div>
|
||||
<h3 className="card-title">{agent.name}</h3>
|
||||
</div>
|
||||
<span className="num-watermark">{orderStr}</span>
|
||||
</div>
|
||||
|
||||
{/* 描述文本 */}
|
||||
<p className="desc-text">{agent.description}</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AgentCard;
|
||||
|
||||
143
frontend-v2/src/modules/aia/components/AgentHub.tsx
Normal file
143
frontend-v2/src/modules/aia/components/AgentHub.tsx
Normal file
@@ -0,0 +1,143 @@
|
||||
/**
|
||||
* AgentHub - 智能体大厅主界面
|
||||
*
|
||||
* 100%还原原型图V11：
|
||||
* - 最大宽度 760px，居中
|
||||
* - 头部搜索框
|
||||
* - 时间轴设计（左侧序号圆点+连接线）
|
||||
* - 5个阶段，12个智能体卡片
|
||||
*/
|
||||
|
||||
import React, { useState, useMemo } from 'react';
|
||||
import { BrainCircuit, Search } from 'lucide-react';
|
||||
import { AgentCard } from './AgentCard';
|
||||
import { AGENTS, PHASES } from '../constants';
|
||||
import type { AgentConfig } from '../types';
|
||||
import '../styles/agent-hub.css';
|
||||
|
||||
interface AgentHubProps {
|
||||
onAgentSelect: (agent: AgentConfig) => void;
|
||||
}
|
||||
|
||||
export const AgentHub: React.FC<AgentHubProps> = ({ onAgentSelect }) => {
|
||||
const [searchValue, setSearchValue] = useState('');
|
||||
|
||||
// 按阶段分组智能体
|
||||
const agentsByPhase = useMemo(() => {
|
||||
const grouped: Record<number, AgentConfig[]> = {};
|
||||
AGENTS.forEach(agent => {
|
||||
if (!grouped[agent.phase]) {
|
||||
grouped[agent.phase] = [];
|
||||
}
|
||||
grouped[agent.phase].push(agent);
|
||||
});
|
||||
return grouped;
|
||||
}, []);
|
||||
|
||||
// 搜索提交
|
||||
const handleSearch = () => {
|
||||
if (searchValue.trim()) {
|
||||
// 默认进入第一个智能体并携带搜索内容
|
||||
const firstAgent = AGENTS[0];
|
||||
onAgentSelect({ ...firstAgent, initialQuery: searchValue } as any);
|
||||
}
|
||||
};
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||||
if (e.key === 'Enter') {
|
||||
handleSearch();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="agent-hub">
|
||||
{/* 主体内容 */}
|
||||
<main className="hub-main">
|
||||
{/* 头部搜索区 */}
|
||||
<div className="hub-header">
|
||||
<div className="header-title">
|
||||
<div className="title-icon">
|
||||
<BrainCircuit size={24} />
|
||||
</div>
|
||||
<h1 className="title-text">
|
||||
医学研究专属大模型
|
||||
<span className="title-badge">已接入DeepSeek</span>
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div className="search-box">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="输入研究想法，例如：SGLT2抑制剂对心衰患者预后的影响..."
|
||||
value={searchValue}
|
||||
onChange={(e) => setSearchValue(e.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
className="search-input"
|
||||
/>
|
||||
<button className="search-btn" onClick={handleSearch}>
|
||||
<Search size={20} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 流水线模块 */}
|
||||
<div className="pipeline-container">
|
||||
{PHASES.map((phase, phaseIndex) => {
|
||||
const isLast = phaseIndex === PHASES.length - 1;
|
||||
const agents = agentsByPhase[phase.phase] || [];
|
||||
|
||||
// 根据阶段确定列数
|
||||
let gridCols = 'grid-cols-3';
|
||||
if (phase.phase === 2) gridCols = 'grid-cols-3'; // 4个卡片，每行3个
|
||||
if (phase.phase === 3) gridCols = 'grid-cols-3'; // 1个卡片
|
||||
if (phase.phase === 4) gridCols = 'grid-cols-3'; // 2个卡片
|
||||
if (phase.phase === 5) gridCols = 'grid-cols-3'; // 2个卡片
|
||||
|
||||
return (
|
||||
<div
|
||||
key={phase.phase}
|
||||
className={`pipeline-stage ${isLast ? 'last-stage' : ''}`}
|
||||
>
|
||||
{/* 左侧时间轴 */}
|
||||
<div className="timeline-marker">
|
||||
<div className={`timeline-dot theme-${phase.theme}`}>
|
||||
{phase.phase}
|
||||
</div>
|
||||
{!isLast && <div className="timeline-line" />}
|
||||
</div>
|
||||
|
||||
{/* 阶段内容 */}
|
||||
<div className="stage-content">
|
||||
<h2 className="stage-title">
|
||||
{phase.name}
|
||||
{phase.isTool && (
|
||||
<span className="tool-badge">工具</span>
|
||||
)}
|
||||
</h2>
|
||||
|
||||
<div className={`agents-grid ${gridCols}`}>
|
||||
{agents.map(agent => (
|
||||
<AgentCard
|
||||
key={agent.id}
|
||||
agent={agent}
|
||||
onClick={onAgentSelect}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{/* 底部 */}
|
||||
<footer className="hub-footer">
|
||||
<p>© 2025 临床研究平台 - 医学研究专属大模型</p>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AgentHub;
|
||||
|
||||
465
frontend-v2/src/modules/aia/components/ChatWorkspace.tsx
Normal file
465
frontend-v2/src/modules/aia/components/ChatWorkspace.tsx
Normal file
@@ -0,0 +1,465 @@
|
||||
/**
|
||||
* ChatWorkspace - 沉浸式对话工作台
|
||||
*
|
||||
* 参考原型图V2，结合 Ant Design X 能力：
|
||||
* - 左侧边栏：会话列表
|
||||
* - 头部：智能体信息
|
||||
* - 消息区：流式响应 + 深度思考
|
||||
* - 输入区：附件上传
|
||||
*/
|
||||
|
||||
import React, { useState, useCallback, useEffect, useRef } from 'react';
|
||||
import {
|
||||
ChevronLeft,
|
||||
Plus,
|
||||
Menu,
|
||||
X,
|
||||
Download,
|
||||
Paperclip,
|
||||
Lightbulb,
|
||||
} from 'lucide-react';
|
||||
import * as LucideIcons from 'lucide-react';
|
||||
import { useAIStream } from '@/shared/components/Chat';
|
||||
import { ThinkingBlock } from '@/shared/components/Chat';
|
||||
import { getAccessToken } from '@/framework/auth/api';
|
||||
import { AGENTS, AGENT_PROMPTS, BRAND_COLORS } from '../constants';
|
||||
import type { AgentConfig, Conversation, Message } from '../types';
|
||||
import '../styles/chat-workspace.css';
|
||||
|
||||
interface ChatWorkspaceProps {
|
||||
agent: AgentConfig;
|
||||
initialQuery?: string;
|
||||
onBack: () => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* 动态获取图标
|
||||
*/
|
||||
const getIcon = (iconName: string): React.ComponentType<any> => {
|
||||
const pascalCase = iconName
|
||||
.split('-')
|
||||
.map(word => word.charAt(0).toUpperCase() + word.slice(1))
|
||||
.join('');
|
||||
return (LucideIcons as any)[pascalCase] || LucideIcons.Bot;
|
||||
};
|
||||
|
||||
export const ChatWorkspace: React.FC<ChatWorkspaceProps> = ({
|
||||
agent,
|
||||
initialQuery,
|
||||
onBack,
|
||||
}) => {
|
||||
const [sidebarOpen, setSidebarOpen] = useState(false);
|
||||
const [conversations, setConversations] = useState<Conversation[]>([]);
|
||||
const [currentConversationId, setCurrentConversationId] = useState<string | null>(null);
|
||||
const [isCreatingConversation, setIsCreatingConversation] = useState(false);
|
||||
const [messages, setMessages] = useState<Message[]>([]);
|
||||
const [inputValue, setInputValue] = useState('');
|
||||
const [deepThinkingEnabled, setDeepThinkingEnabled] = useState(true);
|
||||
const messagesEndRef = useRef<HTMLDivElement>(null);
|
||||
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
||||
|
||||
const AgentIcon = getIcon(agent.icon);
|
||||
const themeColor = BRAND_COLORS[agent.theme];
|
||||
|
||||
// 获取欢迎语
|
||||
const welcomePrompt = AGENT_PROMPTS[agent.id] || '有什么可以帮您的？';
|
||||
|
||||
// 流式响应 Hook（仅在有对话时初始化）
|
||||
const {
|
||||
content: streamContent,
|
||||
thinking: streamThinking,
|
||||
status: streamStatus,
|
||||
isStreaming,
|
||||
isThinking,
|
||||
error: streamError,
|
||||
sendMessage: sendStreamMessage,
|
||||
abort,
|
||||
} = useAIStream({
|
||||
apiEndpoint: currentConversationId
|
||||
? `/api/v1/aia/conversations/${currentConversationId}/messages/stream`
|
||||
: '',
|
||||
headers: {
|
||||
Authorization: `Bearer ${getAccessToken()}`,
|
||||
},
|
||||
});
|
||||
|
||||
// 创建对话
|
||||
const createConversation = useCallback(async () => {
|
||||
if (isCreatingConversation) return null;
|
||||
|
||||
setIsCreatingConversation(true);
|
||||
try {
|
||||
const token = getAccessToken();
|
||||
const response = await fetch('/api/v1/aia/conversations', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
body: JSON.stringify({
|
||||
agentId: agent.id,
|
||||
title: '新对话',
|
||||
}),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`创建对话失败: ${response.status}`);
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
const newConv: Conversation = {
|
||||
id: result.data.id,
|
||||
agentId: result.data.agentId,
|
||||
title: result.data.title,
|
||||
createdAt: new Date(result.data.createdAt),
|
||||
updatedAt: new Date(result.data.updatedAt),
|
||||
};
|
||||
|
||||
setConversations(prev => [newConv, ...prev]);
|
||||
setCurrentConversationId(newConv.id);
|
||||
return newConv.id;
|
||||
} catch (error) {
|
||||
console.error('[ChatWorkspace] 创建对话失败:', error);
|
||||
return null;
|
||||
} finally {
|
||||
setIsCreatingConversation(false);
|
||||
}
|
||||
}, [agent.id, isCreatingConversation]);
|
||||
|
||||
// 初始化：自动创建对话
|
||||
useEffect(() => {
|
||||
if (!currentConversationId && !isCreatingConversation) {
|
||||
createConversation();
|
||||
}
|
||||
}, [currentConversationId, isCreatingConversation, createConversation]);
|
||||
|
||||
// 滚动到底部
|
||||
const scrollToBottom = useCallback(() => {
|
||||
setTimeout(() => {
|
||||
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
|
||||
}, 100);
|
||||
}, []);
|
||||
|
||||
// 切换侧边栏
|
||||
const toggleSidebar = useCallback(() => {
|
||||
setSidebarOpen(prev => !prev);
|
||||
}, []);
|
||||
|
||||
// 新建对话
|
||||
const handleNewChat = useCallback(async () => {
|
||||
const convId = await createConversation();
|
||||
if (convId) {
|
||||
setMessages([]);
|
||||
setInputValue('');
|
||||
setSidebarOpen(false);
|
||||
}
|
||||
}, [createConversation]);
|
||||
|
||||
// 发送消息
|
||||
const handleSend = useCallback(async () => {
|
||||
const content = inputValue.trim();
|
||||
if (!content || isStreaming) return;
|
||||
|
||||
// 确保有对话 ID
|
||||
let convId = currentConversationId;
|
||||
if (!convId) {
|
||||
convId = await createConversation();
|
||||
if (!convId) {
|
||||
console.error('[ChatWorkspace] 创建对话失败');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// 添加用户消息
|
||||
const userMessage: Message = {
|
||||
id: `user-${Date.now()}`,
|
||||
role: 'user',
|
||||
content,
|
||||
createdAt: new Date(),
|
||||
};
|
||||
setMessages(prev => [...prev, userMessage]);
|
||||
setInputValue('');
|
||||
|
||||
// 重置 textarea 高度
|
||||
if (textareaRef.current) {
|
||||
textareaRef.current.style.height = 'auto';
|
||||
}
|
||||
|
||||
// 添加 AI 消息占位
|
||||
const aiMessageId = `ai-${Date.now()}`;
|
||||
const aiMessage: Message = {
|
||||
id: aiMessageId,
|
||||
role: 'assistant',
|
||||
content: '',
|
||||
thinking: '',
|
||||
createdAt: new Date(),
|
||||
};
|
||||
setMessages(prev => [...prev, aiMessage]);
|
||||
|
||||
// 调用流式API
|
||||
const result = await sendStreamMessage(content, {
|
||||
conversationId: convId,
|
||||
agentId: agent.id,
|
||||
enableDeepThinking: deepThinkingEnabled,
|
||||
});
|
||||
|
||||
// 更新对话标题
|
||||
if (conversations.find(c => c.id === convId)?.title === '新对话') {
|
||||
const title = content.length > 20 ? content.slice(0, 20) + '...' : content;
|
||||
setConversations(prev =>
|
||||
prev.map(c =>
|
||||
c.id === convId
|
||||
? { ...c, title, updatedAt: new Date() }
|
||||
: c
|
||||
)
|
||||
);
|
||||
}
|
||||
}, [inputValue, isStreaming, currentConversationId, agent.id, deepThinkingEnabled, conversations, sendStreamMessage, createConversation]);
|
||||
|
||||
// 处理键盘事件
|
||||
const handleKeyDown = useCallback((e: React.KeyboardEvent<HTMLTextAreaElement>) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
handleSend();
|
||||
}
|
||||
}, [handleSend]);
|
||||
|
||||
// 自动调整 textarea 高度
|
||||
const handleInputChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
|
||||
setInputValue(e.target.value);
|
||||
e.target.style.height = 'auto';
|
||||
e.target.style.height = e.target.scrollHeight + 'px';
|
||||
}, []);
|
||||
|
||||
// 更新流式消息
|
||||
useEffect(() => {
|
||||
if (streamContent || streamThinking) {
|
||||
setMessages(prev => {
|
||||
const lastMsg = prev[prev.length - 1];
|
||||
if (lastMsg && lastMsg.role === 'assistant') {
|
||||
return [
|
||||
...prev.slice(0, -1),
|
||||
{
|
||||
...lastMsg,
|
||||
content: streamContent,
|
||||
thinking: streamThinking,
|
||||
},
|
||||
];
|
||||
}
|
||||
return prev;
|
||||
});
|
||||
}
|
||||
}, [streamContent, streamThinking]);
|
||||
|
||||
// 消息变化时滚动
|
||||
useEffect(() => {
|
||||
scrollToBottom();
|
||||
}, [messages, scrollToBottom]);
|
||||
|
||||
// 切换深度思考
|
||||
const toggleDeepThinking = useCallback(() => {
|
||||
setDeepThinkingEnabled(prev => !prev);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="chat-workspace">
|
||||
{/* 移动端遮罩 */}
|
||||
{sidebarOpen && (
|
||||
<div className="mobile-overlay" onClick={toggleSidebar} />
|
||||
)}
|
||||
|
||||
{/* 左侧边栏 */}
|
||||
<aside className={`workspace-sidebar ${sidebarOpen ? 'open' : ''}`}>
|
||||
{/* 边栏头部 */}
|
||||
<div className="sidebar-header">
|
||||
<button className="back-btn" onClick={onBack}>
|
||||
<ChevronLeft size={20} />
|
||||
<span>返回大厅</span>
|
||||
</button>
|
||||
<button className="close-sidebar-btn" onClick={toggleSidebar}>
|
||||
<X size={20} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 新建对话按钮 */}
|
||||
<div className="sidebar-new">
|
||||
<button className="new-chat-btn" onClick={handleNewChat}>
|
||||
<Plus size={16} />
|
||||
新建对话
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 历史记录 */}
|
||||
<div className="sidebar-history">
|
||||
<div className="history-group">
|
||||
<div className="history-label">Today</div>
|
||||
{conversations.map(conv => (
|
||||
<button
|
||||
key={conv.id}
|
||||
className={`history-item ${currentConversationId === conv.id ? 'active' : ''}`}
|
||||
onClick={() => {
|
||||
if (currentConversationId !== conv.id) {
|
||||
setCurrentConversationId(conv.id);
|
||||
setMessages([]); // 清空消息，后续可加载历史消息
|
||||
setInputValue('');
|
||||
}
|
||||
setSidebarOpen(false);
|
||||
}}
|
||||
>
|
||||
{conv.title}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 用户信息 */}
|
||||
<div className="sidebar-user">
|
||||
<div className="user-avatar">U</div>
|
||||
<div className="user-info">
|
||||
<div className="user-name">Dr. Wang</div>
|
||||
<div className="user-plan">专业版会员</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
{/* 主对话区 */}
|
||||
<main className="workspace-main">
|
||||
{/* 头部 */}
|
||||
<header className="workspace-header">
|
||||
<div className="header-left">
|
||||
<button className="menu-btn" onClick={toggleSidebar}>
|
||||
<Menu size={20} />
|
||||
</button>
|
||||
<div
|
||||
className="agent-icon-box"
|
||||
style={{ backgroundColor: themeColor }}
|
||||
>
|
||||
<AgentIcon size={20} color="white" />
|
||||
</div>
|
||||
<div className="agent-info">
|
||||
<h2 className="agent-name">{agent.name}</h2>
|
||||
<div className="agent-status">
|
||||
<span className="status-dot" />
|
||||
<span className="status-text">Online</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="header-right">
|
||||
<button className="header-action" title="导出对话">
|
||||
<Download size={16} />
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* 对话区域 - 自定义布局 */}
|
||||
<div className="workspace-chat-container">
|
||||
{/* 消息区域 */}
|
||||
<div className="workspace-messages">
|
||||
{/* 欢迎消息（左上角，类似消息气泡） */}
|
||||
{messages.length === 0 && (
|
||||
<div className="welcome-card-container">
|
||||
<div className="welcome-icon" style={{ backgroundColor: themeColor }}>
|
||||
<AgentIcon size={20} color="white" />
|
||||
</div>
|
||||
<div className="welcome-card">
|
||||
<p className="welcome-text">{welcomePrompt}</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 加载中提示 */}
|
||||
{!currentConversationId && isCreatingConversation && (
|
||||
<div className="loading-container">
|
||||
<div className="loading-spinner">正在初始化对话...</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 消息列表 */}
|
||||
{currentConversationId && messages.map((msg, index) => (
|
||||
<div key={msg.id} className={`message-item ${msg.role}`}>
|
||||
{msg.role === 'assistant' && (
|
||||
<div className="message-avatar" style={{ backgroundColor: themeColor }}>
|
||||
<AgentIcon size={20} color="white" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="message-content-wrapper">
|
||||
{/* 深度思考块 */}
|
||||
{msg.role === 'assistant' && (msg.thinking || isThinking) && index === messages.length - 1 && (
|
||||
<ThinkingBlock
|
||||
content={streamThinking || msg.thinking || ''}
|
||||
isThinking={isThinking}
|
||||
defaultExpanded={true}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 消息内容 */}
|
||||
<div className={`message-bubble ${msg.role}`}>
|
||||
{msg.content}
|
||||
{msg.role === 'assistant' && isStreaming && index === messages.length - 1 && (
|
||||
<span className="typing-cursor">▊</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{msg.role === 'user' && (
|
||||
<div className="message-avatar user-avatar">U</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
|
||||
<div ref={messagesEndRef} />
|
||||
</div>
|
||||
|
||||
{/* 输入区域（靠下） */}
|
||||
<div className="workspace-input-area">
|
||||
{/* 深度思考按钮 */}
|
||||
<div className="input-toolbar">
|
||||
<button
|
||||
className={`deep-thinking-btn ${deepThinkingEnabled ? 'active' : ''}`}
|
||||
onClick={toggleDeepThinking}
|
||||
>
|
||||
<Lightbulb size={14} />
|
||||
深度思考
|
||||
</button>
|
||||
<button className="attachment-btn">
|
||||
<Paperclip size={16} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 输入框 */}
|
||||
<div className="input-box">
|
||||
<textarea
|
||||
ref={textareaRef}
|
||||
className="chat-textarea"
|
||||
placeholder="输入问题，或使用 / 呼出快捷指令..."
|
||||
rows={1}
|
||||
value={inputValue}
|
||||
onChange={handleInputChange}
|
||||
onKeyDown={handleKeyDown}
|
||||
disabled={isStreaming}
|
||||
/>
|
||||
<button
|
||||
className="send-btn"
|
||||
onClick={handleSend}
|
||||
disabled={!inputValue.trim() || isStreaming}
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<circle cx="12" cy="12" r="10"></circle>
|
||||
<path d="m16 12-4-4-4 4"></path>
|
||||
<path d="M12 16V8"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 底部提示 */}
|
||||
<p className="input-hint">内容由 AI 生成，需经过专业人员核实。支持 Markdown 公式与表格。</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ChatWorkspace;
|
||||
|
||||
8
frontend-v2/src/modules/aia/components/index.ts
Normal file
8
frontend-v2/src/modules/aia/components/index.ts
Normal file
@@ -0,0 +1,8 @@
|
||||
/**
|
||||
* AIA 模块组件导出
|
||||
*/
|
||||
|
||||
export { AgentHub } from './AgentHub';
|
||||
export { AgentCard } from './AgentCard';
|
||||
export { ChatWorkspace } from './ChatWorkspace';
|
||||
|
||||
172
frontend-v2/src/modules/aia/constants.ts
Normal file
172
frontend-v2/src/modules/aia/constants.ts
Normal file
@@ -0,0 +1,172 @@
|
||||
/**
|
||||
* AIA 模块常量配置
|
||||
*
|
||||
* 12个智能体模块配置（100%还原原型图V11）
|
||||
*/
|
||||
|
||||
import type { AgentConfig, PhaseConfig } from './types';
|
||||
|
||||
/**
|
||||
* 阶段配置
|
||||
*/
|
||||
export const PHASES: PhaseConfig[] = [
|
||||
{ phase: 1, name: '选题优化智能体', theme: 'blue' },
|
||||
{ phase: 2, name: '方案设计智能体', theme: 'blue' },
|
||||
{ phase: 3, name: '方案预评审', theme: 'yellow' },
|
||||
{ phase: 4, name: '数据处理与统计分析', theme: 'teal', isTool: true },
|
||||
{ phase: 5, name: '写作助手', theme: 'purple' },
|
||||
];
|
||||
|
||||
/**
|
||||
* 12个智能体配置
|
||||
*/
|
||||
export const AGENTS: AgentConfig[] = [
|
||||
// Phase 1: 选题优化智能体 (3个，每行3个)
|
||||
{
|
||||
id: 'TOPIC_01',
|
||||
name: '科学问题梳理',
|
||||
icon: 'list-tree',
|
||||
description: '从科学问题的清晰度、系统性、可验证性等角度使用科学理论对您的科学问题进行全面的评价。',
|
||||
theme: 'blue',
|
||||
phase: 1,
|
||||
order: 1,
|
||||
},
|
||||
{
|
||||
id: 'TOPIC_02',
|
||||
name: 'PICO 梳理',
|
||||
icon: 'target',
|
||||
description: '基于科学问题梳理研究对象、干预（暴露）、对照和结局指标，并评价并给出合理化的建议。',
|
||||
theme: 'blue',
|
||||
phase: 1,
|
||||
order: 2,
|
||||
},
|
||||
{
|
||||
id: 'TOPIC_03',
|
||||
name: '选题评价',
|
||||
icon: 'clipboard-check',
|
||||
description: '从创新性、临床价值、科学性和可行性等方面使用科学理论对您的临床问题进行全面的评价。',
|
||||
theme: 'blue',
|
||||
phase: 1,
|
||||
order: 3,
|
||||
},
|
||||
|
||||
// Phase 2: 方案设计智能体 (4个，每行3个)
|
||||
{
|
||||
id: 'DESIGN_04',
|
||||
name: '观察指标设计',
|
||||
icon: 'eye',
|
||||
description: '基于研究设计和因果关系提供可能的观察指标集。',
|
||||
theme: 'blue',
|
||||
phase: 2,
|
||||
order: 4,
|
||||
},
|
||||
{
|
||||
id: 'DESIGN_05',
|
||||
name: '病例报告表设计',
|
||||
icon: 'table',
|
||||
description: '基于研究方案设计梳理观察指标集并给出建议的病例报告表框架。',
|
||||
theme: 'blue',
|
||||
phase: 2,
|
||||
order: 5,
|
||||
},
|
||||
{
|
||||
id: 'DESIGN_06',
|
||||
name: '样本量计算',
|
||||
icon: 'calculator',
|
||||
description: '基于研究阶段和研究设计为研究提供科学合理的样本量估算结果。',
|
||||
theme: 'blue',
|
||||
phase: 2,
|
||||
order: 6,
|
||||
},
|
||||
{
|
||||
id: 'DESIGN_07',
|
||||
name: '临床研究方案撰写',
|
||||
icon: 'file-text',
|
||||
description: '基于科学问题、PICOS等信息，给出一个初步的临床研究设计方案，请尽量多给一些信息和需求。',
|
||||
theme: 'blue',
|
||||
phase: 2,
|
||||
order: 7,
|
||||
},
|
||||
|
||||
// Phase 3: 方案预评审 (1个)
|
||||
{
|
||||
id: 'REVIEW_08',
|
||||
name: '方法学评审智能体',
|
||||
icon: 'shield-check',
|
||||
description: '从研究问题、研究方案和临床意义方面，对研究进行临床研究方法学的全面评价。',
|
||||
theme: 'yellow',
|
||||
phase: 3,
|
||||
order: 8,
|
||||
},
|
||||
|
||||
// Phase 4: 数据处理与统计分析 (2个，工具类)
|
||||
{
|
||||
id: 'TOOL_09',
|
||||
name: '数据评价与预处理',
|
||||
icon: 'database',
|
||||
description: '对现有数据的质量进行自动评价，并给出数据质量报告，包括缺失值、异常值、定量分析等。',
|
||||
theme: 'teal',
|
||||
phase: 4,
|
||||
order: 9,
|
||||
isTool: true,
|
||||
toolUrl: '/dc',
|
||||
},
|
||||
{
|
||||
id: 'TOOL_10',
|
||||
name: '智能统计分析',
|
||||
icon: 'bar-chart-2',
|
||||
description: '内置3条智能研究路径（队列研究、预测模型、RCT研究），以及近百种统计分析工具。',
|
||||
theme: 'teal',
|
||||
phase: 4,
|
||||
order: 10,
|
||||
isTool: true,
|
||||
toolUrl: '/dc/analysis',
|
||||
},
|
||||
|
||||
// Phase 5: 写作助手 (2个)
|
||||
{
|
||||
id: 'WRITING_11',
|
||||
name: '论文润色',
|
||||
icon: 'pen-tool',
|
||||
description: '结合目标杂志，提供专业化的润色服务，给出合理化的修改建议。',
|
||||
theme: 'purple',
|
||||
phase: 5,
|
||||
order: 11,
|
||||
},
|
||||
{
|
||||
id: 'WRITING_12',
|
||||
name: '论文翻译',
|
||||
icon: 'languages',
|
||||
description: '结合目标杂志，提供专业化的翻译并进行润色，给出合理化的修改建议。',
|
||||
theme: 'purple',
|
||||
phase: 5,
|
||||
order: 12,
|
||||
},
|
||||
];
|
||||
|
||||
/**
|
||||
* 智能体欢迎语配置
|
||||
*/
|
||||
export const AGENT_PROMPTS: Record<string, string> = {
|
||||
'TOPIC_01': '你好！我是**科学问题梳理助手**。请告诉我你感兴趣的研究方向，我将从科学性、创新性等维度帮你梳理。',
|
||||
'TOPIC_02': '你好！我是**PICO梳理助手**。请描述你的研究想法，我来帮你拆解为 P (人群)、I (干预)、C (对照)、O (结局)。',
|
||||
'TOPIC_03': '你好！我是**选题评价助手**。请提供你的初步选题，我将从创新性、临床价值等方面进行评估。',
|
||||
'DESIGN_04': '你好！我是**观察指标设计助手**。请告诉我你的研究目的，我来帮你推荐主要和次要观察指标。',
|
||||
'DESIGN_05': '你好！我是**CRF设计助手**。我可以帮你构建病例报告表的框架。',
|
||||
'DESIGN_06': '你好！需要计算样本量吗？请告诉我研究类型（如RCT、队列研究）和主要指标的预期值。',
|
||||
'DESIGN_07': '你好！欢迎来到**方案设计工作台**。我们将基于科学问题和PICOS信息，共同撰写一份完整的临床研究方案。',
|
||||
'REVIEW_08': '你好！我是**方法学评审助手**。请上传你的方案草稿，我将模拟审稿人视角进行方法学审查。',
|
||||
'WRITING_11': 'Please paste the text you want to polish. I will check grammar, flow, and academic tone.',
|
||||
'WRITING_12': '你好！请贴入需要翻译的段落，我将为你提供地道的学术英语翻译。',
|
||||
};
|
||||
|
||||
/**
|
||||
* 品牌配色
|
||||
*/
|
||||
export const BRAND_COLORS = {
|
||||
blue: '#4F6EF2',
|
||||
teal: '#0D9488',
|
||||
purple: '#9333EA',
|
||||
yellow: '#CA8A04',
|
||||
} as const;
|
||||
|
||||
@@ -1,30 +1,50 @@
|
||||
import Placeholder from '@/shared/components/Placeholder'
|
||||
/**
|
||||
* AIA - AI Intelligent Assistant 模块入口
|
||||
*
|
||||
* 视图管理：
|
||||
* - Hub: 智能体大厅（12个模块展示）
|
||||
* - Chat: 沉浸式对话工作台
|
||||
*/
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import { AgentHub } from './components/AgentHub';
|
||||
import { ChatWorkspace } from './components/ChatWorkspace';
|
||||
import type { AgentConfig } from './types';
|
||||
|
||||
const AIAModule: React.FC = () => {
|
||||
const [currentView, setCurrentView] = useState<'hub' | 'chat'>('hub');
|
||||
const [selectedAgent, setSelectedAgent] = useState<AgentConfig | null>(null);
|
||||
const [initialQuery, setInitialQuery] = useState<string | undefined>();
|
||||
|
||||
// 选择智能体，进入对话
|
||||
const handleAgentSelect = (agent: AgentConfig & { initialQuery?: string }) => {
|
||||
setSelectedAgent(agent);
|
||||
setInitialQuery(agent.initialQuery);
|
||||
setCurrentView('chat');
|
||||
};
|
||||
|
||||
// 返回大厅
|
||||
const handleBack = () => {
|
||||
setCurrentView('hub');
|
||||
setSelectedAgent(null);
|
||||
setInitialQuery(undefined);
|
||||
};
|
||||
|
||||
const AIAModule = () => {
|
||||
return (
|
||||
<Placeholder
|
||||
title="AI智能问答模块"
|
||||
description="后续基于新架构重写，提供更好的用户体验"
|
||||
moduleName="AIA - AI Intelligent Assistant"
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export default AIAModule
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<>
|
||||
{currentView === 'hub' && (
|
||||
<AgentHub onAgentSelect={handleAgentSelect} />
|
||||
)}
|
||||
|
||||
{currentView === 'chat' && selectedAgent && (
|
||||
<ChatWorkspace
|
||||
agent={selectedAgent}
|
||||
initialQuery={initialQuery}
|
||||
onBack={handleBack}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default AIAModule;
|
||||
|
||||
210
frontend-v2/src/modules/aia/styles/agent-card.css
Normal file
210
frontend-v2/src/modules/aia/styles/agent-card.css
Normal file
@@ -0,0 +1,210 @@
|
||||
/**
|
||||
* AgentCard 智能体卡片样式
|
||||
*
|
||||
* 100%还原原型图V11
|
||||
*/
|
||||
|
||||
/* === 卡片基础样式 === */
|
||||
.agent-card {
|
||||
background-color: #F6F9FF;
|
||||
border: 1px solid #E0E7FF;
|
||||
border-radius: 10px;
|
||||
padding: 14px;
|
||||
min-height: 145px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease-in-out;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
.agent-card:hover {
|
||||
transform: translateY(-3px);
|
||||
border-color: #4F6EF2;
|
||||
border-width: 1.5px;
|
||||
background-color: #EEF4FF;
|
||||
box-shadow: 0 8px 16px rgba(79, 110, 242, 0.12);
|
||||
margin: -0.5px;
|
||||
}
|
||||
|
||||
/* === 工具卡片（青色主题） === */
|
||||
.agent-card.tool-card {
|
||||
background-color: #F0FDFA;
|
||||
border-color: #CCFBF1;
|
||||
}
|
||||
|
||||
.agent-card.tool-card:hover {
|
||||
border-color: #0D9488;
|
||||
background-color: #E0F2F1;
|
||||
box-shadow: 0 8px 16px rgba(13, 148, 136, 0.15);
|
||||
}
|
||||
|
||||
/* === 头部布局 === */
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.card-header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* === 图标容器 === */
|
||||
.icon-box {
|
||||
background-color: #FFFFFF;
|
||||
border: 1px solid #DCE6FF;
|
||||
border-radius: 4px;
|
||||
padding: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.agent-card:hover .icon-box {
|
||||
background-color: #DBEafe;
|
||||
border-color: #93C5FD;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.agent-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
color: #4F6EF2;
|
||||
}
|
||||
|
||||
/* 工具卡片图标 */
|
||||
.agent-card.tool-card .icon-box {
|
||||
border-color: #CCFBF1;
|
||||
}
|
||||
|
||||
.agent-card.tool-card .agent-icon {
|
||||
color: #0D9488;
|
||||
}
|
||||
|
||||
.agent-card.tool-card:hover .icon-box {
|
||||
background-color: #CCFBF1;
|
||||
border-color: #5EEAD4;
|
||||
}
|
||||
|
||||
/* 黄色主题图标 */
|
||||
.agent-card.theme-yellow .icon-box {
|
||||
border-color: #FEF08A;
|
||||
}
|
||||
|
||||
.agent-card.theme-yellow .agent-icon {
|
||||
color: #CA8A04;
|
||||
}
|
||||
|
||||
.agent-card.theme-yellow:hover {
|
||||
border-color: #CA8A04;
|
||||
background-color: #FEF9C3;
|
||||
}
|
||||
|
||||
.agent-card.theme-yellow:hover .icon-box {
|
||||
background-color: #FEF08A;
|
||||
border-color: #FACC15;
|
||||
}
|
||||
|
||||
/* 紫色主题图标 */
|
||||
.agent-card.theme-purple .icon-box {
|
||||
border-color: #E9D5FF;
|
||||
}
|
||||
|
||||
.agent-card.theme-purple .agent-icon {
|
||||
color: #9333EA;
|
||||
}
|
||||
|
||||
.agent-card.theme-purple:hover {
|
||||
border-color: #9333EA;
|
||||
background-color: #F3E8FF;
|
||||
}
|
||||
|
||||
.agent-card.theme-purple:hover .icon-box {
|
||||
background-color: #E9D5FF;
|
||||
border-color: #C084FC;
|
||||
}
|
||||
|
||||
/* === 标题 === */
|
||||
.card-title {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: #0f172a;
|
||||
margin: 0;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
/* === 序号水印 === */
|
||||
.num-watermark {
|
||||
color: #E0E7FF;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.agent-card:hover .num-watermark {
|
||||
color: #C7D2FE;
|
||||
}
|
||||
|
||||
.agent-card.tool-card .num-watermark {
|
||||
color: #CCFBF1;
|
||||
}
|
||||
|
||||
.agent-card.tool-card:hover .num-watermark {
|
||||
color: #99F6E4;
|
||||
}
|
||||
|
||||
.agent-card.theme-yellow .num-watermark {
|
||||
color: #FEF08A;
|
||||
}
|
||||
|
||||
.agent-card.theme-yellow:hover .num-watermark {
|
||||
color: #FDE047;
|
||||
}
|
||||
|
||||
.agent-card.theme-purple .num-watermark {
|
||||
color: #E9D5FF;
|
||||
}
|
||||
|
||||
.agent-card.theme-purple:hover .num-watermark {
|
||||
color: #D8B4FE;
|
||||
}
|
||||
|
||||
/* === 描述文本 === */
|
||||
.desc-text {
|
||||
text-align: justify;
|
||||
line-height: 1.5;
|
||||
font-size: 13px;
|
||||
color: #64748b;
|
||||
margin-top: 8px;
|
||||
flex-grow: 1;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* === 跳转图标（工具类） === */
|
||||
.link-icon {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
color: #94A3B8;
|
||||
opacity: 0.6;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.agent-card:hover .link-icon {
|
||||
opacity: 1;
|
||||
color: #0D9488;
|
||||
transform: translate(2px, -2px);
|
||||
}
|
||||
|
||||
292
frontend-v2/src/modules/aia/styles/agent-hub.css
Normal file
292
frontend-v2/src/modules/aia/styles/agent-hub.css
Normal file
@@ -0,0 +1,292 @@
|
||||
/**
|
||||
* AgentHub 智能体大厅样式
|
||||
*
|
||||
* 100%还原原型图V11
|
||||
*/
|
||||
|
||||
/* === CSS变量 === */
|
||||
:root {
|
||||
--brand-blue: #4F6EF2;
|
||||
--brand-hover: #3d5afe;
|
||||
--brand-teal: #0D9488;
|
||||
--brand-purple: #9333EA;
|
||||
--brand-yellow: #CA8A04;
|
||||
}
|
||||
|
||||
/* === 整体布局 === */
|
||||
.agent-hub {
|
||||
height: 100vh;
|
||||
overflow-y: auto;
|
||||
background-color: #FFFFFF;
|
||||
font-family: 'Noto Sans SC', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
/* === 主体内容 === */
|
||||
.hub-main {
|
||||
max-width: 760px;
|
||||
margin: 0 auto;
|
||||
padding: 24px 16px;
|
||||
}
|
||||
|
||||
/* === 头部搜索区 === */
|
||||
.hub-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 32px;
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.title-icon {
|
||||
background-color: var(--brand-blue);
|
||||
color: white;
|
||||
padding: 6px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.title-text {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.title-badge {
|
||||
font-size: 11px;
|
||||
font-weight: 400;
|
||||
color: var(--brand-blue);
|
||||
background-color: #eef2ff;
|
||||
border: 1px solid #e0e7ff;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* === 搜索框 === */
|
||||
.search-box {
|
||||
width: 100%;
|
||||
max-width: 672px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
padding: 10px 48px 10px 16px;
|
||||
border: 1px solid #cbd5e1;
|
||||
border-radius: 8px;
|
||||
background-color: #FFFFFF;
|
||||
font-size: 14px;
|
||||
color: #334155;
|
||||
transition: all 0.2s;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--brand-blue);
|
||||
box-shadow: 0 0 0 3px rgba(79, 110, 242, 0.1);
|
||||
}
|
||||
|
||||
.search-input::placeholder {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
top: 4px;
|
||||
bottom: 4px;
|
||||
padding: 0 20px;
|
||||
background-color: var(--brand-blue);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.search-btn:hover {
|
||||
background-color: var(--brand-hover);
|
||||
}
|
||||
|
||||
/* === 流水线容器 === */
|
||||
.pipeline-container {
|
||||
padding-left: 32px;
|
||||
}
|
||||
|
||||
/* === 阶段 === */
|
||||
.pipeline-stage {
|
||||
position: relative;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.pipeline-stage.last-stage {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* === 时间轴 === */
|
||||
.timeline-marker {
|
||||
position: absolute;
|
||||
left: -28px;
|
||||
top: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.timeline-dot {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--brand-blue);
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
z-index: 10;
|
||||
border: 2px solid white;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.timeline-dot.theme-teal {
|
||||
background-color: var(--brand-teal);
|
||||
}
|
||||
|
||||
.timeline-dot.theme-yellow {
|
||||
background-color: var(--brand-yellow);
|
||||
}
|
||||
|
||||
.timeline-dot.theme-purple {
|
||||
background-color: var(--brand-purple);
|
||||
}
|
||||
|
||||
.timeline-line {
|
||||
position: absolute;
|
||||
top: 28px;
|
||||
bottom: -28px;
|
||||
width: 2px;
|
||||
background-color: #e2e8f0;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.last-stage .timeline-line {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* === 阶段内容 === */
|
||||
.stage-content {
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
.stage-title {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
margin: 0 0 12px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.tool-badge {
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
color: var(--brand-teal);
|
||||
background-color: #f0fdfa;
|
||||
border: 1px solid #ccfbf1;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* === 卡片网格 === */
|
||||
.agents-grid {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.agents-grid.grid-cols-3 {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
/* === 底部 === */
|
||||
.hub-footer {
|
||||
margin-top: 32px;
|
||||
padding: 16px;
|
||||
border-top: 1px solid #f1f5f9;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hub-footer p {
|
||||
margin: 0;
|
||||
font-size: 10px;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
/* === 滚动条样式 === */
|
||||
.agent-hub::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.agent-hub::-webkit-scrollbar-track {
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.agent-hub::-webkit-scrollbar-thumb {
|
||||
background-color: #cbd5e1;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.agent-hub::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #94a3b8;
|
||||
}
|
||||
|
||||
/* === 响应式 === */
|
||||
@media (max-width: 768px) {
|
||||
.hub-main {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.hub-header {
|
||||
margin-top: 16px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.title-text {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.pipeline-container {
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
.timeline-marker {
|
||||
left: -24px;
|
||||
}
|
||||
|
||||
.agents-grid.grid-cols-3 {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
644
frontend-v2/src/modules/aia/styles/chat-workspace.css
Normal file
644
frontend-v2/src/modules/aia/styles/chat-workspace.css
Normal file
@@ -0,0 +1,644 @@
|
||||
/**
|
||||
* ChatWorkspace 对话工作台样式
|
||||
*
|
||||
* 参考原型图V2
|
||||
*/
|
||||
|
||||
/* === 整体布局 === */
|
||||
.chat-workspace {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
background-color: #FFFFFF;
|
||||
font-family: 'Noto Sans SC', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* === 移动端遮罩 === */
|
||||
.mobile-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 40;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.mobile-overlay {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* === 左侧边栏 === */
|
||||
.workspace-sidebar {
|
||||
position: fixed;
|
||||
z-index: 50;
|
||||
width: 256px;
|
||||
height: 100%;
|
||||
background-color: #f8fafc;
|
||||
border-right: 1px solid #e2e8f0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.workspace-sidebar.open {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.workspace-sidebar {
|
||||
position: relative;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 边栏头部 */
|
||||
.sidebar-header {
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 0;
|
||||
background: none;
|
||||
border: none;
|
||||
color: #64748b;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.back-btn:hover {
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.close-sidebar-btn {
|
||||
padding: 4px;
|
||||
background: none;
|
||||
border: none;
|
||||
color: #94a3b8;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.close-sidebar-btn {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* 新建对话按钮 */
|
||||
.sidebar-new {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.new-chat-btn {
|
||||
width: 100%;
|
||||
padding: 10px 16px;
|
||||
background-color: #FFFFFF;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #334155;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
transition: all 0.2s;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.new-chat-btn:hover {
|
||||
border-color: #4F6EF2;
|
||||
color: #4F6EF2;
|
||||
}
|
||||
|
||||
/* 历史记录 */
|
||||
.sidebar-history {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0 8px 16px;
|
||||
}
|
||||
|
||||
.history-group {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.history-label {
|
||||
padding: 8px 8px;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
color: #94a3b8;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.history-item {
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
background: none;
|
||||
border: none;
|
||||
border-left: 2px solid transparent;
|
||||
border-radius: 8px;
|
||||
font-size: 12px;
|
||||
color: #64748b;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.history-item:hover {
|
||||
background-color: #f1f5f9;
|
||||
}
|
||||
|
||||
.history-item.active {
|
||||
background-color: rgba(226, 232, 240, 0.5);
|
||||
color: #1e293b;
|
||||
font-weight: 500;
|
||||
border-left-color: #4F6EF2;
|
||||
}
|
||||
|
||||
/* 用户信息 */
|
||||
.sidebar-user {
|
||||
padding: 16px;
|
||||
border-top: 1px solid #e2e8f0;
|
||||
background-color: rgba(241, 245, 249, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
background-color: #4F6EF2;
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #334155;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.user-plan {
|
||||
font-size: 10px;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
/* === 主对话区 === */
|
||||
.workspace-main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 头部 */
|
||||
.workspace-header {
|
||||
height: 56px;
|
||||
padding: 0 16px;
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(8px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.menu-btn {
|
||||
padding: 8px;
|
||||
margin-left: -8px;
|
||||
background: none;
|
||||
border: none;
|
||||
color: #64748b;
|
||||
cursor: pointer;
|
||||
border-radius: 6px;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.menu-btn:hover {
|
||||
background-color: #f1f5f9;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.menu-btn {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.agent-icon-box {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.agent-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.agent-name {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
margin: 0;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.agent-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background-color: #22c55e;
|
||||
}
|
||||
|
||||
.status-text {
|
||||
font-size: 10px;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.header-action {
|
||||
padding: 8px;
|
||||
background: none;
|
||||
border: none;
|
||||
color: #94a3b8;
|
||||
cursor: pointer;
|
||||
border-radius: 6px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.header-action:hover {
|
||||
color: #4F6EF2;
|
||||
background-color: #f1f5f9;
|
||||
}
|
||||
|
||||
/* 对话区域容器 */
|
||||
.workspace-chat-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 消息区域 */
|
||||
.workspace-messages {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
/* 欢迎卡片容器（左上角，类似消息气泡） */
|
||||
.welcome-card-container {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
max-width: 100%;
|
||||
animation: fadeIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
/* 欢迎卡片 */
|
||||
.welcome-card {
|
||||
background-color: #f8fafc;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 12px;
|
||||
border-top-left-radius: 4px;
|
||||
padding: 12px 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
max-width: 85%;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.welcome-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.welcome-text {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
color: #334155;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* === 消息项 === */
|
||||
.message-item {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
animation: fadeIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
.message-item.user {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
/* 消息头像 */
|
||||
.message-avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.message-avatar.user-avatar {
|
||||
background-color: #e2e8f0;
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 消息内容包装 */
|
||||
.message-content-wrapper {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
max-width: 85%;
|
||||
}
|
||||
|
||||
.message-item.user .message-content-wrapper {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
/* 消息气泡 */
|
||||
.message-bubble {
|
||||
padding: 12px 16px;
|
||||
border-radius: 12px;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.message-bubble.user {
|
||||
background: linear-gradient(135deg, #4F6EF2 0%, #3d5afe 100%);
|
||||
color: white;
|
||||
border-radius: 12px;
|
||||
border-top-right-radius: 4px;
|
||||
box-shadow: 0 2px 8px rgba(79, 110, 242, 0.25);
|
||||
}
|
||||
|
||||
.message-bubble.assistant {
|
||||
background-color: #f8fafc;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-top-left-radius: 4px;
|
||||
color: #334155;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
/* 打字光标 */
|
||||
.typing-cursor {
|
||||
display: inline-block;
|
||||
animation: blink 0.8s step-end infinite;
|
||||
color: #4F6EF2;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 加载中提示 */
|
||||
.loading-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
font-size: 14px;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
/* 输入区域（靠下） */
|
||||
.workspace-input-area {
|
||||
padding: 16px 24px 24px;
|
||||
background-color: #FFFFFF;
|
||||
border-top: 1px solid #f1f5f9;
|
||||
}
|
||||
|
||||
/* 工具栏 */
|
||||
.input-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.deep-thinking-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 12px;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 16px;
|
||||
background-color: #FFFFFF;
|
||||
font-size: 13px;
|
||||
color: #64748b;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.deep-thinking-btn.active {
|
||||
background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);
|
||||
border-color: transparent;
|
||||
color: white;
|
||||
box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
|
||||
}
|
||||
|
||||
.deep-thinking-btn:hover:not(.active) {
|
||||
border-color: #a78bfa;
|
||||
color: #8b5cf6;
|
||||
}
|
||||
|
||||
.attachment-btn {
|
||||
padding: 6px;
|
||||
background: none;
|
||||
border: none;
|
||||
color: #94a3b8;
|
||||
cursor: pointer;
|
||||
border-radius: 6px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.attachment-btn:hover {
|
||||
background-color: #f1f5f9;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
/* 输入框 */
|
||||
.input-box {
|
||||
position: relative;
|
||||
background-color: #f8fafc;
|
||||
border: 2px solid #e2e8f0;
|
||||
border-radius: 16px;
|
||||
transition: all 0.3s;
|
||||
max-width: 1024px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.input-box:focus-within {
|
||||
border-color: #4F6EF2;
|
||||
box-shadow: 0 0 0 4px rgba(79, 110, 242, 0.1);
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.chat-textarea {
|
||||
width: 100%;
|
||||
padding: 14px 56px 14px 16px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
font-size: 14px;
|
||||
color: #334155;
|
||||
resize: none;
|
||||
max-height: 128px;
|
||||
font-family: inherit;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.chat-textarea::placeholder {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.chat-textarea:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.send-btn {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
bottom: 8px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background-color: #1e293b;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.send-btn:hover {
|
||||
background-color: #334155;
|
||||
}
|
||||
|
||||
.send-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* 输入提示 */
|
||||
.input-hint {
|
||||
text-align: center;
|
||||
margin-top: 8px;
|
||||
font-size: 10px;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
|
||||
/* === 滚动条 === */
|
||||
.sidebar-history::-webkit-scrollbar,
|
||||
.workspace-messages::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.sidebar-history::-webkit-scrollbar-track,
|
||||
.workspace-messages::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.sidebar-history::-webkit-scrollbar-thumb,
|
||||
.workspace-messages::-webkit-scrollbar-thumb {
|
||||
background-color: #cbd5e1;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.sidebar-history::-webkit-scrollbar-thumb:hover,
|
||||
.workspace-messages::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #94a3b8;
|
||||
}
|
||||
|
||||
61
frontend-v2/src/modules/aia/types.ts
Normal file
61
frontend-v2/src/modules/aia/types.ts
Normal file
@@ -0,0 +1,61 @@
|
||||
/**
|
||||
* AIA 模块类型定义
|
||||
*/
|
||||
|
||||
/**
|
||||
* 智能体阶段主题色
|
||||
*/
|
||||
export type AgentTheme = 'blue' | 'yellow' | 'teal' | 'purple';
|
||||
|
||||
/**
|
||||
* 智能体配置
|
||||
*/
|
||||
export interface AgentConfig {
|
||||
id: string;
|
||||
name: string;
|
||||
icon: string;
|
||||
description: string;
|
||||
theme: AgentTheme;
|
||||
phase: number;
|
||||
order: number;
|
||||
isTool?: boolean; // 是否为工具类（跳转外部）
|
||||
toolUrl?: string; // 工具跳转地址
|
||||
}
|
||||
|
||||
/**
|
||||
* 阶段配置
|
||||
*/
|
||||
export interface PhaseConfig {
|
||||
phase: number;
|
||||
name: string;
|
||||
theme: AgentTheme;
|
||||
isTool?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* 视图状态
|
||||
*/
|
||||
export type ViewState = 'hub' | 'chat';
|
||||
|
||||
/**
|
||||
* 会话
|
||||
*/
|
||||
export interface Conversation {
|
||||
id: string;
|
||||
agentId: string;
|
||||
title: string;
|
||||
createdAt: Date;
|
||||
updatedAt: Date;
|
||||
}
|
||||
|
||||
/**
|
||||
* 消息
|
||||
*/
|
||||
export interface Message {
|
||||
id: string;
|
||||
role: 'user' | 'assistant';
|
||||
content: string;
|
||||
thinking?: string;
|
||||
createdAt: Date;
|
||||
}
|
||||
|
||||
469
frontend-v2/src/shared/components/Chat/AIStreamChat.tsx
Normal file
469
frontend-v2/src/shared/components/Chat/AIStreamChat.tsx
Normal file
@@ -0,0 +1,469 @@
|
||||
/**
|
||||
* AIStreamChat - 流式对话组件
|
||||
*
|
||||
* 基于 Ant Design X 构建的现代感 AI 对话组件
|
||||
* 支持：
|
||||
* - OpenAI Compatible 流式响应
|
||||
* - 深度思考展示
|
||||
* - 打字机效果
|
||||
* - 快捷提示
|
||||
* - 附件上传
|
||||
*/
|
||||
|
||||
import React, { useState, useCallback, useRef, useEffect, useMemo } from 'react';
|
||||
import { Bubble, Sender, Welcome, Prompts } from '@ant-design/x';
|
||||
import { Button, Space, Upload, message as antMessage } from 'antd';
|
||||
import {
|
||||
ThunderboltOutlined,
|
||||
PaperClipOutlined,
|
||||
SendOutlined,
|
||||
StopOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import type { BubbleProps } from '@ant-design/x/es/bubble/interface';
|
||||
import { useAIStream } from './hooks/useAIStream';
|
||||
import { ThinkingBlock } from './ThinkingBlock';
|
||||
import type { ChatMessage } from './types';
|
||||
import './styles/ai-stream-chat.css';
|
||||
|
||||
/**
|
||||
* 快捷提示项
|
||||
*/
|
||||
export interface PromptItem {
|
||||
key: string;
|
||||
icon?: React.ReactNode;
|
||||
label: string;
|
||||
description?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 欢迎配置
|
||||
*/
|
||||
export interface WelcomeConfig {
|
||||
title: string;
|
||||
description?: string;
|
||||
icon?: React.ReactNode;
|
||||
prompts?: PromptItem[];
|
||||
}
|
||||
|
||||
/**
|
||||
* AIStreamChat Props
|
||||
*/
|
||||
export interface AIStreamChatProps {
|
||||
/** API 端点 */
|
||||
apiEndpoint: string;
|
||||
/** 请求头（如 Authorization） */
|
||||
headers?: Record<string, string>;
|
||||
/** 会话 ID */
|
||||
conversationId?: string;
|
||||
/** 智能体 ID */
|
||||
agentId?: string;
|
||||
/** 是否启用深度思考 */
|
||||
enableDeepThinking?: boolean;
|
||||
/** 欢迎配置 */
|
||||
welcome?: WelcomeConfig;
|
||||
/** 快捷提示 */
|
||||
prompts?: PromptItem[];
|
||||
/** 初始消息 */
|
||||
initialMessages?: ChatMessage[];
|
||||
/** 消息发送回调 */
|
||||
onMessageSent?: (message: ChatMessage) => void;
|
||||
/** 消息接收回调 */
|
||||
onMessageReceived?: (message: ChatMessage) => void;
|
||||
/** 错误回调 */
|
||||
onError?: (error: Error) => void;
|
||||
/** 支持附件上传 */
|
||||
enableAttachment?: boolean;
|
||||
/** 自定义类名 */
|
||||
className?: string;
|
||||
/** 占位文本 */
|
||||
placeholder?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 内部消息格式
|
||||
*/
|
||||
interface InternalMessage {
|
||||
id: string | number;
|
||||
role: 'user' | 'assistant';
|
||||
content: string;
|
||||
thinking?: string;
|
||||
status: 'local' | 'loading' | 'streaming' | 'thinking' | 'success' | 'error';
|
||||
timestamp: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* 流式对话组件
|
||||
*/
|
||||
export const AIStreamChat: React.FC<AIStreamChatProps> = ({
|
||||
apiEndpoint,
|
||||
headers = {},
|
||||
conversationId,
|
||||
agentId,
|
||||
enableDeepThinking = false,
|
||||
welcome,
|
||||
prompts = [],
|
||||
initialMessages = [],
|
||||
onMessageSent,
|
||||
onMessageReceived,
|
||||
onError,
|
||||
enableAttachment = false,
|
||||
className = '',
|
||||
placeholder = '输入消息...',
|
||||
}) => {
|
||||
// 消息列表
|
||||
const [messages, setMessages] = useState<InternalMessage[]>(() =>
|
||||
initialMessages.map(m => ({
|
||||
...m,
|
||||
status: 'success' as const,
|
||||
timestamp: m.timestamp || Date.now(),
|
||||
}))
|
||||
);
|
||||
|
||||
// 输入框值
|
||||
const [inputValue, setInputValue] = useState('');
|
||||
|
||||
// 深度思考开关
|
||||
const [deepThinkingEnabled, setDeepThinkingEnabled] = useState(enableDeepThinking);
|
||||
|
||||
// 附件列表
|
||||
const [attachments, setAttachments] = useState<any[]>([]);
|
||||
|
||||
// 滚动容器 ref
|
||||
const messagesEndRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// 流式响应 Hook
|
||||
const {
|
||||
content: streamContent,
|
||||
thinking: streamThinking,
|
||||
status: streamStatus,
|
||||
isStreaming,
|
||||
isThinking,
|
||||
error: streamError,
|
||||
sendMessage,
|
||||
abort,
|
||||
reset: resetStream,
|
||||
} = useAIStream({
|
||||
apiEndpoint,
|
||||
headers,
|
||||
});
|
||||
|
||||
// 当前正在流式输出的消息 ID
|
||||
const streamingMessageIdRef = useRef<string | null>(null);
|
||||
|
||||
// 滚动到底部
|
||||
const scrollToBottom = useCallback(() => {
|
||||
setTimeout(() => {
|
||||
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
|
||||
}, 100);
|
||||
}, []);
|
||||
|
||||
// 消息变化时滚动
|
||||
useEffect(() => {
|
||||
scrollToBottom();
|
||||
}, [messages, streamContent, scrollToBottom]);
|
||||
|
||||
// 更新流式消息内容
|
||||
useEffect(() => {
|
||||
if (!streamingMessageIdRef.current) return;
|
||||
|
||||
setMessages(prev =>
|
||||
prev.map(msg =>
|
||||
msg.id === streamingMessageIdRef.current
|
||||
? {
|
||||
...msg,
|
||||
content: streamContent,
|
||||
thinking: streamThinking,
|
||||
status: streamStatus === 'complete' ? 'success' : streamStatus,
|
||||
}
|
||||
: msg
|
||||
)
|
||||
);
|
||||
|
||||
// 流式完成后
|
||||
if (streamStatus === 'complete' && streamingMessageIdRef.current) {
|
||||
const finalMessage: ChatMessage = {
|
||||
id: streamingMessageIdRef.current,
|
||||
role: 'assistant',
|
||||
content: streamContent,
|
||||
status: 'success',
|
||||
timestamp: Date.now(),
|
||||
metadata: { thinking: streamThinking },
|
||||
};
|
||||
onMessageReceived?.(finalMessage);
|
||||
streamingMessageIdRef.current = null;
|
||||
}
|
||||
}, [streamContent, streamThinking, streamStatus, onMessageReceived]);
|
||||
|
||||
// 错误处理
|
||||
useEffect(() => {
|
||||
if (streamError && streamingMessageIdRef.current) {
|
||||
setMessages(prev =>
|
||||
prev.map(msg =>
|
||||
msg.id === streamingMessageIdRef.current
|
||||
? { ...msg, content: `错误: ${streamError}`, status: 'error' }
|
||||
: msg
|
||||
)
|
||||
);
|
||||
onError?.(new Error(streamError));
|
||||
streamingMessageIdRef.current = null;
|
||||
}
|
||||
}, [streamError, onError]);
|
||||
|
||||
/**
|
||||
* 发送消息
|
||||
*/
|
||||
const handleSend = useCallback(async (text?: string) => {
|
||||
const content = text || inputValue;
|
||||
if (!content.trim() || isStreaming) return;
|
||||
|
||||
// 清空输入
|
||||
setInputValue('');
|
||||
|
||||
// 添加用户消息
|
||||
const userMessage: InternalMessage = {
|
||||
id: `user-${Date.now()}`,
|
||||
role: 'user',
|
||||
content,
|
||||
status: 'success',
|
||||
timestamp: Date.now(),
|
||||
};
|
||||
setMessages(prev => [...prev, userMessage]);
|
||||
onMessageSent?.({
|
||||
id: userMessage.id,
|
||||
role: 'user',
|
||||
content,
|
||||
status: 'success',
|
||||
timestamp: userMessage.timestamp,
|
||||
});
|
||||
|
||||
// 添加 AI 消息占位
|
||||
const aiMessageId = `ai-${Date.now()}`;
|
||||
streamingMessageIdRef.current = aiMessageId;
|
||||
|
||||
const aiMessage: InternalMessage = {
|
||||
id: aiMessageId,
|
||||
role: 'assistant',
|
||||
content: '',
|
||||
thinking: '',
|
||||
status: 'loading',
|
||||
timestamp: Date.now(),
|
||||
};
|
||||
setMessages(prev => [...prev, aiMessage]);
|
||||
|
||||
// 重置流式状态
|
||||
resetStream();
|
||||
|
||||
// 发送请求
|
||||
await sendMessage(content, {
|
||||
conversationId,
|
||||
agentId,
|
||||
enableDeepThinking: deepThinkingEnabled,
|
||||
attachmentIds: attachments.map(a => a.id),
|
||||
});
|
||||
|
||||
// 清空附件
|
||||
setAttachments([]);
|
||||
}, [
|
||||
inputValue,
|
||||
isStreaming,
|
||||
conversationId,
|
||||
agentId,
|
||||
deepThinkingEnabled,
|
||||
attachments,
|
||||
onMessageSent,
|
||||
sendMessage,
|
||||
resetStream,
|
||||
]);
|
||||
|
||||
/**
|
||||
* 处理快捷提示点击
|
||||
*/
|
||||
const handlePromptClick = useCallback((item: PromptItem) => {
|
||||
handleSend(item.label);
|
||||
}, [handleSend]);
|
||||
|
||||
/**
|
||||
* 停止生成
|
||||
*/
|
||||
const handleStop = useCallback(() => {
|
||||
abort();
|
||||
if (streamingMessageIdRef.current) {
|
||||
setMessages(prev =>
|
||||
prev.map(msg =>
|
||||
msg.id === streamingMessageIdRef.current
|
||||
? { ...msg, status: 'success' }
|
||||
: msg
|
||||
)
|
||||
);
|
||||
streamingMessageIdRef.current = null;
|
||||
}
|
||||
}, [abort]);
|
||||
|
||||
/**
|
||||
* 渲染消息内容
|
||||
*/
|
||||
const renderMessageContent = useCallback((msg: InternalMessage) => {
|
||||
// 显示思考过程
|
||||
const showThinking = msg.role === 'assistant' && (msg.thinking || isThinking);
|
||||
|
||||
return (
|
||||
<div className="message-wrapper">
|
||||
{/* 深度思考块 */}
|
||||
{showThinking && (
|
||||
<ThinkingBlock
|
||||
content={msg.id === streamingMessageIdRef.current ? streamThinking : (msg.thinking || '')}
|
||||
isThinking={msg.id === streamingMessageIdRef.current && isThinking}
|
||||
defaultExpanded={true}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 消息内容 */}
|
||||
<div className="message-text">
|
||||
{msg.content}
|
||||
{msg.status === 'streaming' && (
|
||||
<span className="typing-cursor">▊</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}, [streamThinking, isThinking]);
|
||||
|
||||
// 转换为 Bubble.List 格式
|
||||
const bubbleItems: BubbleProps[] = useMemo(() => {
|
||||
return messages.map((msg) => ({
|
||||
key: msg.id,
|
||||
placement: msg.role === 'user' ? 'end' : 'start',
|
||||
content: renderMessageContent(msg),
|
||||
loading: msg.status === 'loading',
|
||||
typing: msg.status === 'streaming' ? { step: 2, interval: 50 } : undefined,
|
||||
}));
|
||||
}, [messages, renderMessageContent]);
|
||||
|
||||
// 是否显示欢迎页
|
||||
const showWelcome = messages.length === 0 && welcome;
|
||||
|
||||
// 发送按钮
|
||||
const sendButton = isStreaming ? (
|
||||
<Button
|
||||
type="text"
|
||||
danger
|
||||
icon={<StopOutlined />}
|
||||
onClick={handleStop}
|
||||
/>
|
||||
) : (
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<SendOutlined />}
|
||||
disabled={!inputValue.trim()}
|
||||
onClick={() => handleSend()}
|
||||
/>
|
||||
);
|
||||
|
||||
// 深度思考按钮
|
||||
const deepThinkingButton = (
|
||||
<Button
|
||||
type={deepThinkingEnabled ? 'primary' : 'default'}
|
||||
ghost={deepThinkingEnabled}
|
||||
icon={<ThunderboltOutlined />}
|
||||
onClick={() => setDeepThinkingEnabled(!deepThinkingEnabled)}
|
||||
className={`deep-thinking-btn ${deepThinkingEnabled ? 'active' : ''}`}
|
||||
>
|
||||
深度思考
|
||||
</Button>
|
||||
);
|
||||
|
||||
// 附件按钮
|
||||
const attachmentButton = enableAttachment && (
|
||||
<Upload
|
||||
beforeUpload={(file) => {
|
||||
if (attachments.length >= 5) {
|
||||
antMessage.warning('最多上传 5 个附件');
|
||||
return false;
|
||||
}
|
||||
setAttachments(prev => [...prev, { id: Date.now(), file }]);
|
||||
return false;
|
||||
}}
|
||||
showUploadList={false}
|
||||
>
|
||||
<Button type="text" icon={<PaperClipOutlined />} />
|
||||
</Upload>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={`ai-stream-chat ${className}`}>
|
||||
{/* 消息区域 */}
|
||||
<div className="chat-messages-area">
|
||||
{showWelcome ? (
|
||||
<div className="welcome-container">
|
||||
<Welcome
|
||||
icon={welcome.icon}
|
||||
title={welcome.title}
|
||||
description={welcome.description}
|
||||
className="welcome-card"
|
||||
/>
|
||||
|
||||
{/* 快捷提示 */}
|
||||
{(welcome.prompts || prompts).length > 0 && (
|
||||
<Prompts
|
||||
items={(welcome.prompts || prompts).map(p => ({
|
||||
key: p.key,
|
||||
icon: p.icon,
|
||||
label: p.label,
|
||||
description: p.description,
|
||||
}))}
|
||||
onItemClick={(_, item) => handlePromptClick(item as unknown as PromptItem)}
|
||||
className="welcome-prompts"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<Bubble.List
|
||||
items={bubbleItems}
|
||||
className="messages-list"
|
||||
/>
|
||||
)}
|
||||
<div ref={messagesEndRef} />
|
||||
</div>
|
||||
|
||||
{/* 输入区域 */}
|
||||
<div className="chat-input-area">
|
||||
<div className="input-toolbar">
|
||||
{deepThinkingButton}
|
||||
{attachmentButton}
|
||||
</div>
|
||||
|
||||
<Sender
|
||||
value={inputValue}
|
||||
onChange={setInputValue}
|
||||
onSubmit={handleSend}
|
||||
placeholder={placeholder}
|
||||
loading={isStreaming}
|
||||
className="chat-sender"
|
||||
actions={sendButton}
|
||||
/>
|
||||
|
||||
{/* 附件预览 */}
|
||||
{attachments.length > 0 && (
|
||||
<div className="attachments-preview">
|
||||
{attachments.map((att, index) => (
|
||||
<div key={att.id} className="attachment-item">
|
||||
<PaperClipOutlined />
|
||||
<span>{att.file.name}</span>
|
||||
<Button
|
||||
type="text"
|
||||
size="small"
|
||||
onClick={() => setAttachments(prev => prev.filter((_, i) => i !== index))}
|
||||
>
|
||||
×
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AIStreamChat;
|
||||
|
||||
169
frontend-v2/src/shared/components/Chat/ConversationList.tsx
Normal file
169
frontend-v2/src/shared/components/Chat/ConversationList.tsx
Normal file
@@ -0,0 +1,169 @@
|
||||
/**
|
||||
* ConversationList - 会话列表组件
|
||||
*
|
||||
* 现代感设计的会话列表，支持：
|
||||
* - 分组显示（今天、昨天、更早）
|
||||
* - 新建会话
|
||||
* - 会话切换
|
||||
* - 会话删除
|
||||
* - 智能体图标
|
||||
*/
|
||||
|
||||
import React, { useMemo } from 'react';
|
||||
import { Button, Typography, Dropdown, Empty } from 'antd';
|
||||
import {
|
||||
PlusOutlined,
|
||||
MessageOutlined,
|
||||
DeleteOutlined,
|
||||
MoreOutlined,
|
||||
RobotOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import type { Conversation, ConversationGroup } from './hooks/useConversations';
|
||||
import './styles/conversation-list.css';
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
/**
|
||||
* ConversationList Props
|
||||
*/
|
||||
export interface ConversationListProps {
|
||||
/** 分组会话列表 */
|
||||
groups: ConversationGroup[];
|
||||
/** 当前会话 ID */
|
||||
currentId: string | null;
|
||||
/** 会话点击回调 */
|
||||
onSelect: (id: string) => void;
|
||||
/** 新建会话回调 */
|
||||
onNew: () => void;
|
||||
/** 删除会话回调 */
|
||||
onDelete?: (id: string) => void;
|
||||
/** 标题 */
|
||||
title?: string;
|
||||
/** Logo */
|
||||
logo?: React.ReactNode;
|
||||
/** 自定义类名 */
|
||||
className?: string;
|
||||
/** 是否加载中 */
|
||||
loading?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* 会话列表组件
|
||||
*/
|
||||
export const ConversationList: React.FC<ConversationListProps> = ({
|
||||
groups,
|
||||
currentId,
|
||||
onSelect,
|
||||
onNew,
|
||||
onDelete,
|
||||
title = 'AI 助手',
|
||||
logo,
|
||||
className = '',
|
||||
loading = false,
|
||||
}) => {
|
||||
// 会话项菜单
|
||||
const getMenuItems = (conv: Conversation) => [
|
||||
{
|
||||
key: 'delete',
|
||||
icon: <DeleteOutlined />,
|
||||
label: '删除对话',
|
||||
danger: true,
|
||||
onClick: () => onDelete?.(conv.id),
|
||||
},
|
||||
];
|
||||
|
||||
// 是否为空
|
||||
const isEmpty = useMemo(() => {
|
||||
return groups.every(g => g.conversations.length === 0);
|
||||
}, [groups]);
|
||||
|
||||
return (
|
||||
<div className={`conversation-list ${className}`}>
|
||||
{/* 头部 */}
|
||||
<div className="conversation-list-header">
|
||||
<div className="conversation-list-logo">
|
||||
{logo || <RobotOutlined className="default-logo" />}
|
||||
<span className="conversation-list-title">{title}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 新建会话按钮 */}
|
||||
<div className="conversation-list-new">
|
||||
<Button
|
||||
type="default"
|
||||
icon={<PlusOutlined />}
|
||||
onClick={onNew}
|
||||
block
|
||||
className="new-conversation-btn"
|
||||
>
|
||||
新对话
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 会话列表 */}
|
||||
<div className="conversation-list-content">
|
||||
{isEmpty ? (
|
||||
<Empty
|
||||
image={Empty.PRESENTED_IMAGE_SIMPLE}
|
||||
description="暂无对话"
|
||||
className="conversation-empty"
|
||||
/>
|
||||
) : (
|
||||
groups.map(group => (
|
||||
<div key={group.key} className="conversation-group">
|
||||
<div className="conversation-group-label">
|
||||
<Text type="secondary">{group.label}</Text>
|
||||
</div>
|
||||
|
||||
{group.conversations.map(conv => (
|
||||
<div
|
||||
key={conv.id}
|
||||
className={`conversation-item ${currentId === conv.id ? 'active' : ''}`}
|
||||
onClick={() => onSelect(conv.id)}
|
||||
>
|
||||
<div className="conversation-item-icon">
|
||||
{conv.agentIcon ? (
|
||||
<span className="agent-icon">{conv.agentIcon}</span>
|
||||
) : (
|
||||
<MessageOutlined />
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="conversation-item-content">
|
||||
<div className="conversation-item-title">
|
||||
{conv.title || '新对话'}
|
||||
</div>
|
||||
{conv.lastMessage && (
|
||||
<div className="conversation-item-preview">
|
||||
{conv.lastMessage}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{onDelete && (
|
||||
<Dropdown
|
||||
menu={{ items: getMenuItems(conv) }}
|
||||
trigger={['click']}
|
||||
placement="bottomRight"
|
||||
>
|
||||
<Button
|
||||
type="text"
|
||||
size="small"
|
||||
icon={<MoreOutlined />}
|
||||
className="conversation-item-more"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
/>
|
||||
</Dropdown>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ConversationList;
|
||||
|
||||
@@ -1,196 +1,200 @@
|
||||
# Chat 通用组件库
|
||||
# Chat 通用组件库 V2
|
||||
|
||||
> 基于 **Ant Design X** 构建的 AI 对话通用组件，支持多场景复用
|
||||
> 基于 **Ant Design X 2.x** 构建的现代感 AI 对话组件
|
||||
> 支持流式响应、深度思考、会话管理等完整能力
|
||||
|
||||
---
|
||||
|
||||
## 🆕 V2 新特性
|
||||
|
||||
- ✅ **流式响应** - 逐字显示，打字机效果
|
||||
- ✅ **深度思考** - ThinkingBlock 组件，可折叠展示
|
||||
- ✅ **OpenAI Compatible** - 兼容标准 API 格式
|
||||
- ✅ **会话管理** - ConversationList 组件，分组显示
|
||||
- ✅ **现代感设计** - 参考 Ant Design X Ultramodern
|
||||
|
||||
---
|
||||
|
||||
## 📚 技术栈
|
||||
|
||||
- **@ant-design/x** (2.1.0) - UI 组件（Bubble, Sender）
|
||||
- **@ant-design/x-sdk** (2.1.0) - 数据流管理（可选）
|
||||
- **@ant-design/x** (2.1.0+) - UI 组件（Bubble, Sender, Welcome, Prompts, Think）
|
||||
- **React 19** + **TypeScript 5**
|
||||
- **Prism.js** - 代码语法高亮
|
||||
|
||||
---
|
||||
|
||||
## ✨ 特性
|
||||
|
||||
- ✅ **多场景支持**：AIA、PKB（个人知识库）、Tool C 等
|
||||
- ✅ **开箱即用**：基于 Ant Design X，无需复杂配置
|
||||
- ✅ **类型安全**：完整的 TypeScript 类型定义
|
||||
- ✅ **高度可定制**：支持自定义消息渲染、样式配置
|
||||
- ✅ **代码执行**：Tool C 专用，支持代码块展示和执行
|
||||
|
||||
---
|
||||
|
||||
## 📦 安装
|
||||
|
||||
组件已内置在项目中，无需额外安装。如需单独使用，确保安装以下依赖：
|
||||
|
||||
```bash
|
||||
npm install @ant-design/x @ant-design/x-sdk prismjs
|
||||
```
|
||||
- **OpenAI Compatible API** - 标准流式格式
|
||||
|
||||
---
|
||||
|
||||
## 🚀 快速开始
|
||||
|
||||
### 基础用法
|
||||
### 流式对话（推荐）
|
||||
|
||||
```typescript
|
||||
import { ChatContainer } from '@/shared/components/Chat';
|
||||
```tsx
|
||||
import { AIStreamChat } from '@/shared/components/Chat';
|
||||
|
||||
<ChatContainer
|
||||
conversationType="aia"
|
||||
providerConfig={{
|
||||
apiEndpoint: '/api/chat',
|
||||
<AIStreamChat
|
||||
apiEndpoint="/api/v1/aia/conversations/xxx/messages/stream"
|
||||
headers={{ Authorization: `Bearer ${token}` }}
|
||||
conversationId="xxx"
|
||||
agentId="general"
|
||||
enableDeepThinking={true}
|
||||
welcome={{
|
||||
title: 'AI 智能助手',
|
||||
description: '有什么可以帮您的？',
|
||||
prompts: [
|
||||
{ key: '1', label: '帮我分析数据', icon: '📊' },
|
||||
{ key: '2', label: '写一份报告', icon: '📝' },
|
||||
],
|
||||
}}
|
||||
/>
|
||||
```
|
||||
|
||||
### Tool C 集成（完整示例）
|
||||
### 带会话列表的完整布局
|
||||
|
||||
```typescript
|
||||
import { ChatContainer, MessageRenderer } from '@/shared/components/Chat';
|
||||
```tsx
|
||||
import { AIStreamChat, ConversationList, useConversations } from '@/shared/components/Chat';
|
||||
|
||||
<ChatContainer
|
||||
conversationType="tool-c"
|
||||
conversationKey={sessionId}
|
||||
providerConfig={{
|
||||
apiEndpoint: `/api/dc/tool-c/process`,
|
||||
requestFn: async (message: string) => {
|
||||
const response = await fetch(`/api/dc/tool-c/process`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ sessionId, userMessage: message }),
|
||||
});
|
||||
return await response.json();
|
||||
},
|
||||
}}
|
||||
customMessageRenderer={(msgInfo) => (
|
||||
<MessageRenderer
|
||||
messageInfo={msgInfo}
|
||||
onExecuteCode={handleExecuteCode}
|
||||
isExecuting={isExecuting}
|
||||
/>
|
||||
)}
|
||||
onMessageReceived={(msg) => {
|
||||
if (msg.metadata?.newDataPreview) {
|
||||
updateDataGrid(msg.metadata.newDataPreview);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
function ChatPage() {
|
||||
const {
|
||||
groupedConversations,
|
||||
currentId,
|
||||
setCurrent,
|
||||
addConversation,
|
||||
deleteConversation,
|
||||
} = useConversations();
|
||||
|
||||
return (
|
||||
<div style={{ display: 'flex', height: '100vh' }}>
|
||||
{/* 左侧会话列表 */}
|
||||
<ConversationList
|
||||
groups={groupedConversations}
|
||||
currentId={currentId}
|
||||
onSelect={setCurrent}
|
||||
onNew={() => addConversation({ title: '新对话' })}
|
||||
onDelete={deleteConversation}
|
||||
title="AI 助手"
|
||||
/>
|
||||
|
||||
{/* 右侧对话区域 */}
|
||||
<div style={{ flex: 1 }}>
|
||||
<AIStreamChat
|
||||
apiEndpoint={`/api/v1/aia/conversations/${currentId}/messages/stream`}
|
||||
conversationId={currentId}
|
||||
enableDeepThinking={true}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📖 API 文档
|
||||
|
||||
### ChatContainer Props
|
||||
### AIStreamChat Props
|
||||
|
||||
| 参数 | 类型 | 必填 | 默认值 | 说明 |
|
||||
|------|------|------|--------|------|
|
||||
| `conversationType` | `ConversationType` | ✅ | - | 对话类型（'aia' \| 'pkb' \| 'tool-c'） |
|
||||
| `conversationKey` | `string` | ❌ | - | 会话 ID（用于多会话管理） |
|
||||
| `providerConfig` | `ChatProviderConfig` | ✅ | - | API 配置 |
|
||||
| `defaultMessages` | `ChatMessage[]` | ❌ | `[]` | 初始消息列表 |
|
||||
| `customMessageRenderer` | `Function` | ❌ | - | 自定义消息渲染器 |
|
||||
| `senderProps` | `SenderProps` | ❌ | `{}` | Sender 组件配置 |
|
||||
| `apiEndpoint` | `string` | ✅ | - | API 端点（需支持 OpenAI Compatible 格式） |
|
||||
| `headers` | `Record<string, string>` | ❌ | `{}` | 请求头（如 Authorization） |
|
||||
| `conversationId` | `string` | ❌ | - | 会话 ID |
|
||||
| `agentId` | `string` | ❌ | - | 智能体 ID |
|
||||
| `enableDeepThinking` | `boolean` | ❌ | `false` | 是否启用深度思考 |
|
||||
| `welcome` | `WelcomeConfig` | ❌ | - | 欢迎页配置 |
|
||||
| `prompts` | `PromptItem[]` | ❌ | `[]` | 快捷提示列表 |
|
||||
| `enableAttachment` | `boolean` | ❌ | `false` | 是否支持附件上传 |
|
||||
| `placeholder` | `string` | ❌ | `'输入消息...'` | 输入框占位文本 |
|
||||
| `onMessageSent` | `Function` | ❌ | - | 消息发送回调 |
|
||||
| `onMessageReceived` | `Function` | ❌ | - | 消息接收回调 |
|
||||
| `onError` | `Function` | ❌ | - | 错误回调 |
|
||||
|
||||
### ChatProviderConfig
|
||||
### ThinkingBlock Props
|
||||
|
||||
```typescript
|
||||
interface ChatProviderConfig {
|
||||
apiEndpoint: string; // API 端点
|
||||
method?: 'GET' | 'POST'; // 请求方法
|
||||
headers?: Record<string, string>; // 请求头
|
||||
requestFn?: (message: string, context?: any) => Promise<any>; // 自定义请求函数
|
||||
}
|
||||
| 参数 | 类型 | 必填 | 默认值 | 说明 |
|
||||
|------|------|------|--------|------|
|
||||
| `content` | `string` | ✅ | - | 思考内容 |
|
||||
| `isThinking` | `boolean` | ❌ | `false` | 是否正在思考 |
|
||||
| `duration` | `number` | ❌ | - | 思考耗时（秒） |
|
||||
| `defaultExpanded` | `boolean` | ❌ | `false` | 默认是否展开 |
|
||||
|
||||
### ConversationList Props
|
||||
|
||||
| 参数 | 类型 | 必填 | 默认值 | 说明 |
|
||||
|------|------|------|--------|------|
|
||||
| `groups` | `ConversationGroup[]` | ✅ | - | 分组会话列表 |
|
||||
| `currentId` | `string \| null` | ✅ | - | 当前会话 ID |
|
||||
| `onSelect` | `Function` | ✅ | - | 会话点击回调 |
|
||||
| `onNew` | `Function` | ✅ | - | 新建会话回调 |
|
||||
| `onDelete` | `Function` | ❌ | - | 删除会话回调 |
|
||||
| `title` | `string` | ❌ | `'AI 助手'` | 标题 |
|
||||
| `logo` | `ReactNode` | ❌ | - | Logo |
|
||||
|
||||
---
|
||||
|
||||
## 🎣 Hooks
|
||||
|
||||
### useAIStream
|
||||
|
||||
处理 OpenAI Compatible 格式的流式响应。
|
||||
|
||||
```tsx
|
||||
import { useAIStream } from '@/shared/components/Chat';
|
||||
|
||||
const {
|
||||
content, // 当前内容
|
||||
thinking, // 思考内容
|
||||
status, // 流式状态
|
||||
isStreaming, // 是否正在流式输出
|
||||
isThinking, // 是否正在思考
|
||||
error, // 错误信息
|
||||
sendMessage, // 发送消息
|
||||
abort, // 中断请求
|
||||
reset, // 重置状态
|
||||
} = useAIStream({
|
||||
apiEndpoint: '/api/v1/aia/chat/stream',
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
});
|
||||
```
|
||||
|
||||
### ChatMessage
|
||||
### useConversations
|
||||
|
||||
```typescript
|
||||
interface ChatMessage {
|
||||
id: string | number;
|
||||
role: 'user' | 'assistant' | 'system';
|
||||
content: string;
|
||||
status?: 'local' | 'loading' | 'success' | 'error';
|
||||
code?: string; // Tool C 专用
|
||||
explanation?: string; // Tool C 专用
|
||||
timestamp?: number;
|
||||
metadata?: Record<string, any>;
|
||||
}
|
||||
管理多会话状态。
|
||||
|
||||
```tsx
|
||||
import { useConversations } from '@/shared/components/Chat';
|
||||
|
||||
const {
|
||||
conversations, // 会话列表
|
||||
groupedConversations, // 分组会话
|
||||
current, // 当前会话
|
||||
currentId, // 当前会话 ID
|
||||
setCurrent, // 设置当前会话
|
||||
addConversation, // 添加会话
|
||||
updateConversation, // 更新会话
|
||||
deleteConversation, // 删除会话
|
||||
} = useConversations();
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎨 自定义渲染
|
||||
## 🔌 后端 API 格式
|
||||
|
||||
### MessageRenderer（默认渲染器）
|
||||
### OpenAI Compatible SSE 格式
|
||||
|
||||
```typescript
|
||||
import { MessageRenderer } from '@/shared/components/Chat';
|
||||
后端需要输出以下格式的 SSE 流：
|
||||
|
||||
<MessageRenderer
|
||||
messageInfo={msgInfo}
|
||||
onExecuteCode={(code) => console.log('Execute:', code)}
|
||||
isExecuting={false}
|
||||
/>
|
||||
```
|
||||
data: {"id":"chatcmpl-xxx","object":"chat.completion.chunk","choices":[{"delta":{"role":"assistant"}}]}\n\n
|
||||
data: {"id":"chatcmpl-xxx","object":"chat.completion.chunk","choices":[{"delta":{"reasoning_content":"让我思考一下..."}}]}\n\n
|
||||
data: {"id":"chatcmpl-xxx","object":"chat.completion.chunk","choices":[{"delta":{"content":"好的，"}}]}\n\n
|
||||
data: {"id":"chatcmpl-xxx","object":"chat.completion.chunk","choices":[{"delta":{"content":"我来帮您..."}}]}\n\n
|
||||
data: {"id":"chatcmpl-xxx","object":"chat.completion.chunk","choices":[{"delta":{},"finish_reason":"stop"}]}\n\n
|
||||
data: [DONE]\n\n
|
||||
```
|
||||
|
||||
### CodeBlockRenderer（代码块渲染器）
|
||||
|
||||
```typescript
|
||||
import { CodeBlockRenderer } from '@/shared/components/Chat';
|
||||
|
||||
<CodeBlockRenderer
|
||||
code="df['age'].fillna(df['age'].mean(), inplace=True)"
|
||||
language="python"
|
||||
onExecute={handleExecute}
|
||||
isExecuting={false}
|
||||
executionResult={{ success: true }}
|
||||
/>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔧 高级用法
|
||||
|
||||
### 自定义消息渲染
|
||||
|
||||
```typescript
|
||||
<ChatContainer
|
||||
conversationType="custom"
|
||||
providerConfig={{ apiEndpoint: '/api/custom' }}
|
||||
customMessageRenderer={(msgInfo) => {
|
||||
const msg = msgInfo.message;
|
||||
return (
|
||||
<div>
|
||||
<strong>{msg.role}:</strong> {msg.content}
|
||||
{msg.code && <pre>{msg.code}</pre>}
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
```
|
||||
|
||||
### 处理后端响应
|
||||
|
||||
后端 API 应返回以下格式：
|
||||
|
||||
```json
|
||||
{
|
||||
"messageId": "xxx",
|
||||
"explanation": "好的，我将帮您...",
|
||||
"code": "df['sex'].fillna(df['sex'].mode()[0], inplace=True)",
|
||||
"success": true,
|
||||
"metadata": {
|
||||
"newDataPreview": [...]
|
||||
}
|
||||
}
|
||||
```
|
||||
关键字段：
|
||||
- `choices[0].delta.content` - 正文内容
|
||||
- `choices[0].delta.reasoning_content` - 深度思考内容（DeepSeek 风格）
|
||||
- `choices[0].finish_reason` - 完成原因
|
||||
|
||||
---
|
||||
|
||||
@@ -198,99 +202,49 @@ import { CodeBlockRenderer } from '@/shared/components/Chat';
|
||||
|
||||
```
|
||||
shared/components/Chat/
|
||||
├── types.ts # TypeScript 类型定义
|
||||
├── ChatContainer.tsx # 核心容器组件
|
||||
├── MessageRenderer.tsx # 默认消息渲染器
|
||||
├── CodeBlockRenderer.tsx # 代码块渲染器
|
||||
├── index.ts # 统一导出
|
||||
├── types.ts # 类型定义
|
||||
├── AIStreamChat.tsx # 🆕 流式对话组件（推荐）
|
||||
├── ThinkingBlock.tsx # 🆕 深度思考展示
|
||||
├── ConversationList.tsx # 🆕 会话列表
|
||||
├── ChatContainer.tsx # 传统对话容器（向后兼容）
|
||||
├── MessageRenderer.tsx # 消息渲染器
|
||||
├── CodeBlockRenderer.tsx # 代码块渲染器
|
||||
├── hooks/
|
||||
│ ├── index.ts
|
||||
│ ├── useAIStream.ts # 🆕 流式响应 Hook
|
||||
│ └── useConversations.ts # 🆕 会话管理 Hook
|
||||
├── styles/
|
||||
│ └── chat.css # 样式文件
|
||||
├── index.ts # 统一导出
|
||||
└── README.md # 本文档
|
||||
│ ├── chat.css # 传统样式
|
||||
│ ├── ai-stream-chat.css # 🆕 流式对话样式
|
||||
│ ├── thinking.css # 🆕 深度思考样式
|
||||
│ └── conversation-list.css # 🆕 会话列表样式
|
||||
└── README.md # 本文档
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎯 使用场景
|
||||
## 🎨 设计风格
|
||||
|
||||
### 1. AIA（AI智能问答）
|
||||
采用**现代感设计**（参考 Ant Design X Ultramodern）：
|
||||
|
||||
```typescript
|
||||
<ChatContainer
|
||||
conversationType="aia"
|
||||
providerConfig={{
|
||||
apiEndpoint: '/api/aia/chat',
|
||||
}}
|
||||
/>
|
||||
```
|
||||
|
||||
### 2. PKB（个人知识库）
|
||||
|
||||
```typescript
|
||||
<ChatContainer
|
||||
conversationType="pkb"
|
||||
conversationKey={knowledgeBaseId}
|
||||
providerConfig={{
|
||||
apiEndpoint: '/api/pkb/query',
|
||||
}}
|
||||
/>
|
||||
```
|
||||
|
||||
### 3. Tool C（数据清洗）
|
||||
|
||||
```typescript
|
||||
<ChatContainer
|
||||
conversationType="tool-c"
|
||||
conversationKey={sessionId}
|
||||
providerConfig={{
|
||||
apiEndpoint: '/api/dc/tool-c/process',
|
||||
}}
|
||||
customMessageRenderer={(msgInfo) => (
|
||||
<MessageRenderer
|
||||
messageInfo={msgInfo}
|
||||
onExecuteCode={handleExecuteCode}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🐛 常见问题
|
||||
|
||||
### Q1: 如何自定义样式？
|
||||
|
||||
通过 `className` 和 `style` 属性：
|
||||
|
||||
```typescript
|
||||
<ChatContainer
|
||||
className="my-custom-chat"
|
||||
style={{ height: '600px' }}
|
||||
// ...
|
||||
/>
|
||||
```
|
||||
|
||||
或修改 `styles/chat.css`。
|
||||
|
||||
### Q2: 如何处理流式响应？
|
||||
|
||||
当前版本暂不支持流式响应，计划在后续版本中支持。
|
||||
|
||||
### Q3: 如何添加新的对话类型？
|
||||
|
||||
1. 在 `types.ts` 中扩展 `ConversationType`
|
||||
2. 根据需要自定义 `customMessageRenderer`
|
||||
- **配色**：主色 Indigo (#6366f1)，思考色 Violet (#a78bfa)
|
||||
- **圆角**：大圆角 12-16px
|
||||
- **阴影**：柔和阴影，层次分明
|
||||
- **动画**：流畅过渡，微交互
|
||||
- **布局**：清爽简洁，留白适度
|
||||
|
||||
---
|
||||
|
||||
## 📝 开发记录
|
||||
|
||||
- **2025-12-07**: 初始版本，基于 Ant Design X 2.1.0 重构
|
||||
- 完整开发记录：`docs/03-业务模块/DC-数据清洗整理/06-开发记录/`
|
||||
- **2025-01-14**: V2 版本发布，新增流式响应、深度思考、会话管理
|
||||
- **2025-12-07**: V1 初始版本，基于 Ant Design X 2.1.0 构建
|
||||
|
||||
---
|
||||
|
||||
## 📚 参考资料
|
||||
|
||||
- [Ant Design X 官方文档](https://x.ant.design)
|
||||
- [Ant Design X SDK 文档](https://x.ant.design/x-sdks/introduce-cn)
|
||||
- [项目架构文档](../../../docs/00-系统总体设计/)
|
||||
- [Ant Design X Ultramodern Playground](https://x.ant.design/docs/playground/ultramodern-cn)
|
||||
- [OpenAI API 流式响应格式](https://platform.openai.com/docs/api-reference/chat/streaming)
|
||||
|
||||
132
frontend-v2/src/shared/components/Chat/ThinkingBlock.tsx
Normal file
132
frontend-v2/src/shared/components/Chat/ThinkingBlock.tsx
Normal file
@@ -0,0 +1,132 @@
|
||||
/**
|
||||
* ThinkingBlock - 深度思考展示组件
|
||||
*
|
||||
* 展示 AI 的深度思考过程，支持：
|
||||
* - 流式显示思考内容
|
||||
* - 折叠/展开
|
||||
* - 思考时间显示
|
||||
* - 现代感动画效果
|
||||
*/
|
||||
|
||||
import React, { useState, useEffect, useMemo } from 'react';
|
||||
import { Collapse, Typography } from 'antd';
|
||||
import {
|
||||
ThunderboltOutlined,
|
||||
LoadingOutlined,
|
||||
CheckCircleOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import './styles/thinking.css';
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
/**
|
||||
* ThinkingBlock Props
|
||||
*/
|
||||
export interface ThinkingBlockProps {
|
||||
/** 思考内容 */
|
||||
content: string;
|
||||
/** 是否正在思考 */
|
||||
isThinking?: boolean;
|
||||
/** 思考耗时（秒） */
|
||||
duration?: number;
|
||||
/** 默认是否展开 */
|
||||
defaultExpanded?: boolean;
|
||||
/** 自定义类名 */
|
||||
className?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 深度思考展示组件
|
||||
*/
|
||||
export const ThinkingBlock: React.FC<ThinkingBlockProps> = ({
|
||||
content,
|
||||
isThinking = false,
|
||||
duration,
|
||||
defaultExpanded = false,
|
||||
className = '',
|
||||
}) => {
|
||||
const [expanded, setExpanded] = useState(defaultExpanded);
|
||||
const [startTime] = useState(Date.now());
|
||||
const [elapsedTime, setElapsedTime] = useState(0);
|
||||
|
||||
// 计时器
|
||||
useEffect(() => {
|
||||
if (!isThinking) return;
|
||||
|
||||
const timer = setInterval(() => {
|
||||
setElapsedTime(Math.floor((Date.now() - startTime) / 1000));
|
||||
}, 1000);
|
||||
|
||||
return () => clearInterval(timer);
|
||||
}, [isThinking, startTime]);
|
||||
|
||||
// 显示时间
|
||||
const displayTime = useMemo(() => {
|
||||
const seconds = duration ?? elapsedTime;
|
||||
if (seconds < 60) {
|
||||
return `${seconds}秒`;
|
||||
}
|
||||
const minutes = Math.floor(seconds / 60);
|
||||
const remainingSeconds = seconds % 60;
|
||||
return `${minutes}分${remainingSeconds}秒`;
|
||||
}, [duration, elapsedTime]);
|
||||
|
||||
// 状态图标
|
||||
const StatusIcon = isThinking ? (
|
||||
<LoadingOutlined className="thinking-icon spinning" />
|
||||
) : (
|
||||
<CheckCircleOutlined className="thinking-icon done" />
|
||||
);
|
||||
|
||||
// 标题
|
||||
const title = (
|
||||
<div className="thinking-header">
|
||||
<ThunderboltOutlined className="thinking-bolt" />
|
||||
<span className="thinking-title">
|
||||
{isThinking ? '深度思考中...' : '深度思考'}
|
||||
</span>
|
||||
{StatusIcon}
|
||||
<Text className="thinking-time" type="secondary">
|
||||
{displayTime}
|
||||
</Text>
|
||||
</div>
|
||||
);
|
||||
|
||||
// 如果没有内容且不在思考中，不显示
|
||||
if (!content && !isThinking) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`thinking-block ${isThinking ? 'thinking' : 'done'} ${className}`}>
|
||||
<Collapse
|
||||
activeKey={expanded ? ['thinking'] : []}
|
||||
onChange={(keys) => setExpanded(keys.includes('thinking'))}
|
||||
bordered={false}
|
||||
expandIconPosition="end"
|
||||
items={[{
|
||||
key: 'thinking',
|
||||
label: title,
|
||||
children: (
|
||||
<div className="thinking-content">
|
||||
{content ? (
|
||||
<div className="thinking-text">
|
||||
{content}
|
||||
{isThinking && <span className="thinking-cursor">▊</span>}
|
||||
</div>
|
||||
) : isThinking ? (
|
||||
<div className="thinking-placeholder">
|
||||
<LoadingOutlined style={{ fontSize: 14, marginRight: 8 }} />
|
||||
<span>正在分析问题...</span>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
),
|
||||
}]}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ThinkingBlock;
|
||||
|
||||
21
frontend-v2/src/shared/components/Chat/hooks/index.ts
Normal file
21
frontend-v2/src/shared/components/Chat/hooks/index.ts
Normal file
@@ -0,0 +1,21 @@
|
||||
/**
|
||||
* Chat 通用组件 - Hooks 导出
|
||||
*/
|
||||
|
||||
export { useAIStream } from './useAIStream';
|
||||
export type {
|
||||
UseAIStreamConfig,
|
||||
UseAIStreamReturn,
|
||||
StreamStatus,
|
||||
StreamResult,
|
||||
SendOptions,
|
||||
} from './useAIStream';
|
||||
|
||||
export { useConversations } from './useConversations';
|
||||
export type {
|
||||
UseConversationsConfig,
|
||||
UseConversationsReturn,
|
||||
Conversation,
|
||||
ConversationGroup,
|
||||
} from './useConversations';
|
||||
|
||||
313
frontend-v2/src/shared/components/Chat/hooks/useAIStream.ts
Normal file
313
frontend-v2/src/shared/components/Chat/hooks/useAIStream.ts
Normal file
@@ -0,0 +1,313 @@
|
||||
/**
|
||||
* useAIStream - AI 流式响应 Hook
|
||||
*
|
||||
* 处理 OpenAI Compatible 格式的 SSE 流式响应
|
||||
* 支持：
|
||||
* - 内容流式显示
|
||||
* - 深度思考展示（reasoning_content）
|
||||
* - 中断请求
|
||||
* - 错误处理
|
||||
*/
|
||||
|
||||
import { useState, useCallback, useRef } from 'react';
|
||||
|
||||
/**
|
||||
* OpenAI Compatible Chunk 格式
|
||||
*/
|
||||
interface OpenAIChunk {
|
||||
id: string;
|
||||
object: string;
|
||||
created: number;
|
||||
model: string;
|
||||
choices: Array<{
|
||||
index: number;
|
||||
delta: {
|
||||
role?: string;
|
||||
content?: string;
|
||||
reasoning_content?: string;
|
||||
};
|
||||
finish_reason: string | null;
|
||||
}>;
|
||||
usage?: {
|
||||
prompt_tokens: number;
|
||||
completion_tokens: number;
|
||||
total_tokens: number;
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 流式状态
|
||||
*/
|
||||
export type StreamStatus = 'idle' | 'connecting' | 'streaming' | 'thinking' | 'complete' | 'error' | 'aborted';
|
||||
|
||||
/**
|
||||
* 流式响应结果
|
||||
*/
|
||||
export interface StreamResult {
|
||||
content: string;
|
||||
thinking: string;
|
||||
messageId: string;
|
||||
usage?: {
|
||||
promptTokens: number;
|
||||
completionTokens: number;
|
||||
totalTokens: number;
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* useAIStream Hook 配置
|
||||
*/
|
||||
export interface UseAIStreamConfig {
|
||||
/** API 端点 */
|
||||
apiEndpoint: string;
|
||||
/** 请求头 */
|
||||
headers?: Record<string, string>;
|
||||
/** 超时时间（毫秒） */
|
||||
timeout?: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* useAIStream Hook 返回值
|
||||
*/
|
||||
export interface UseAIStreamReturn {
|
||||
/** 当前内容 */
|
||||
content: string;
|
||||
/** 思考内容 */
|
||||
thinking: string;
|
||||
/** 流式状态 */
|
||||
status: StreamStatus;
|
||||
/** 是否正在流式输出 */
|
||||
isStreaming: boolean;
|
||||
/** 是否正在思考 */
|
||||
isThinking: boolean;
|
||||
/** 错误信息 */
|
||||
error: string | null;
|
||||
/** 发送消息 */
|
||||
sendMessage: (message: string, options?: SendOptions) => Promise<StreamResult | null>;
|
||||
/** 中断请求 */
|
||||
abort: () => void;
|
||||
/** 重置状态 */
|
||||
reset: () => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* 发送选项
|
||||
*/
|
||||
export interface SendOptions {
|
||||
/** 会话 ID */
|
||||
conversationId?: string;
|
||||
/** 智能体 ID */
|
||||
agentId?: string;
|
||||
/** 启用深度思考 */
|
||||
enableDeepThinking?: boolean;
|
||||
/** 附件 ID 列表 */
|
||||
attachmentIds?: string[];
|
||||
/** 额外参数 */
|
||||
extra?: Record<string, any>;
|
||||
}
|
||||
|
||||
/**
|
||||
* AI 流式响应 Hook
|
||||
*/
|
||||
export function useAIStream(config: UseAIStreamConfig): UseAIStreamReturn {
|
||||
const { apiEndpoint, headers = {}, timeout = 60000 } = config;
|
||||
|
||||
// 状态
|
||||
const [content, setContent] = useState('');
|
||||
const [thinking, setThinking] = useState('');
|
||||
const [status, setStatus] = useState<StreamStatus>('idle');
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
// Refs
|
||||
const abortControllerRef = useRef<AbortController | null>(null);
|
||||
const messageIdRef = useRef<string>('');
|
||||
|
||||
/**
|
||||
* 重置状态
|
||||
*/
|
||||
const reset = useCallback(() => {
|
||||
setContent('');
|
||||
setThinking('');
|
||||
setStatus('idle');
|
||||
setError(null);
|
||||
messageIdRef.current = '';
|
||||
}, []);
|
||||
|
||||
/**
|
||||
* 中断请求
|
||||
*/
|
||||
const abort = useCallback(() => {
|
||||
if (abortControllerRef.current) {
|
||||
abortControllerRef.current.abort();
|
||||
abortControllerRef.current = null;
|
||||
setStatus('aborted');
|
||||
}
|
||||
}, []);
|
||||
|
||||
/**
|
||||
* 发送消息
|
||||
*/
|
||||
const sendMessage = useCallback(async (
|
||||
message: string,
|
||||
options: SendOptions = {}
|
||||
): Promise<StreamResult | null> => {
|
||||
// 重置状态
|
||||
reset();
|
||||
setStatus('connecting');
|
||||
|
||||
// 创建 AbortController
|
||||
abortControllerRef.current = new AbortController();
|
||||
const signal = abortControllerRef.current.signal;
|
||||
|
||||
// 设置超时
|
||||
const timeoutId = setTimeout(() => {
|
||||
abort();
|
||||
setError('请求超时');
|
||||
}, timeout);
|
||||
|
||||
let fullContent = '';
|
||||
let fullThinking = '';
|
||||
let usage: StreamResult['usage'] | undefined;
|
||||
|
||||
try {
|
||||
const response = await fetch(apiEndpoint, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Accept': 'text/event-stream',
|
||||
...headers,
|
||||
},
|
||||
body: JSON.stringify({
|
||||
content: message,
|
||||
conversationId: options.conversationId,
|
||||
agentId: options.agentId,
|
||||
enableDeepThinking: options.enableDeepThinking,
|
||||
attachmentIds: options.attachmentIds,
|
||||
...options.extra,
|
||||
}),
|
||||
signal,
|
||||
});
|
||||
|
||||
clearTimeout(timeoutId);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
|
||||
}
|
||||
|
||||
const reader = response.body?.getReader();
|
||||
if (!reader) {
|
||||
throw new Error('无法获取响应流');
|
||||
}
|
||||
|
||||
const decoder = new TextDecoder();
|
||||
let buffer = '';
|
||||
|
||||
setStatus('streaming');
|
||||
|
||||
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() || '';
|
||||
|
||||
for (const line of lines) {
|
||||
if (!line.startsWith('data: ')) continue;
|
||||
|
||||
const data = line.slice(6).trim();
|
||||
|
||||
// [DONE] 标识
|
||||
if (data === '[DONE]') {
|
||||
setStatus('complete');
|
||||
continue;
|
||||
}
|
||||
|
||||
try {
|
||||
const chunk: OpenAIChunk = JSON.parse(data);
|
||||
|
||||
// 错误处理
|
||||
if ((chunk as any).error) {
|
||||
throw new Error((chunk as any).error.message);
|
||||
}
|
||||
|
||||
// 保存消息 ID
|
||||
if (chunk.id && !messageIdRef.current) {
|
||||
messageIdRef.current = chunk.id;
|
||||
}
|
||||
|
||||
// 处理 choices
|
||||
const delta = chunk.choices?.[0]?.delta;
|
||||
if (delta) {
|
||||
// 思考内容
|
||||
if (delta.reasoning_content) {
|
||||
setStatus('thinking');
|
||||
fullThinking += delta.reasoning_content;
|
||||
setThinking(fullThinking);
|
||||
}
|
||||
|
||||
// 正文内容
|
||||
if (delta.content) {
|
||||
setStatus('streaming');
|
||||
fullContent += delta.content;
|
||||
setContent(fullContent);
|
||||
}
|
||||
}
|
||||
|
||||
// 使用量
|
||||
if (chunk.usage) {
|
||||
usage = {
|
||||
promptTokens: chunk.usage.prompt_tokens,
|
||||
completionTokens: chunk.usage.completion_tokens,
|
||||
totalTokens: chunk.usage.total_tokens,
|
||||
};
|
||||
}
|
||||
|
||||
// 完成标识
|
||||
if (chunk.choices?.[0]?.finish_reason === 'stop') {
|
||||
setStatus('complete');
|
||||
}
|
||||
} catch (parseError) {
|
||||
console.warn('[useAIStream] 解析 Chunk 失败:', data, parseError);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
content: fullContent,
|
||||
thinking: fullThinking,
|
||||
messageId: messageIdRef.current,
|
||||
usage,
|
||||
};
|
||||
|
||||
} catch (err: any) {
|
||||
clearTimeout(timeoutId);
|
||||
|
||||
if (err.name === 'AbortError') {
|
||||
setStatus('aborted');
|
||||
return null;
|
||||
}
|
||||
|
||||
setError(err.message || '请求失败');
|
||||
setStatus('error');
|
||||
console.error('[useAIStream] 错误:', err);
|
||||
return null;
|
||||
}
|
||||
}, [apiEndpoint, headers, timeout, reset, abort]);
|
||||
|
||||
return {
|
||||
content,
|
||||
thinking,
|
||||
status,
|
||||
isStreaming: status === 'streaming' || status === 'connecting',
|
||||
isThinking: status === 'thinking',
|
||||
error,
|
||||
sendMessage,
|
||||
abort,
|
||||
reset,
|
||||
};
|
||||
}
|
||||
|
||||
export default useAIStream;
|
||||
|
||||
242
frontend-v2/src/shared/components/Chat/hooks/useConversations.ts
Normal file
242
frontend-v2/src/shared/components/Chat/hooks/useConversations.ts
Normal file
@@ -0,0 +1,242 @@
|
||||
/**
|
||||
* useConversations - 会话管理 Hook
|
||||
*
|
||||
* 管理多会话状态，支持：
|
||||
* - 会话列表 CRUD
|
||||
* - 当前会话切换
|
||||
* - 会话分组（今天、昨天、更早）
|
||||
*/
|
||||
|
||||
import { useState, useCallback, useMemo } from 'react';
|
||||
|
||||
/**
|
||||
* 会话信息
|
||||
*/
|
||||
export interface Conversation {
|
||||
id: string;
|
||||
title: string;
|
||||
agentId?: string;
|
||||
agentName?: string;
|
||||
agentIcon?: string;
|
||||
createdAt: Date;
|
||||
updatedAt: Date;
|
||||
messageCount?: number;
|
||||
lastMessage?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 会话分组
|
||||
*/
|
||||
export interface ConversationGroup {
|
||||
label: string;
|
||||
key: 'today' | 'yesterday' | 'earlier';
|
||||
conversations: Conversation[];
|
||||
}
|
||||
|
||||
/**
|
||||
* useConversations 配置
|
||||
*/
|
||||
export interface UseConversationsConfig {
|
||||
/** 初始会话列表 */
|
||||
initialConversations?: Conversation[];
|
||||
/** 当前会话 ID */
|
||||
currentId?: string;
|
||||
/** 会话变更回调 */
|
||||
onConversationChange?: (conversation: Conversation | null) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* useConversations 返回值
|
||||
*/
|
||||
export interface UseConversationsReturn {
|
||||
/** 会话列表 */
|
||||
conversations: Conversation[];
|
||||
/** 分组会话 */
|
||||
groupedConversations: ConversationGroup[];
|
||||
/** 当前会话 */
|
||||
current: Conversation | null;
|
||||
/** 当前会话 ID */
|
||||
currentId: string | null;
|
||||
/** 设置当前会话 */
|
||||
setCurrent: (id: string | null) => void;
|
||||
/** 添加会话 */
|
||||
addConversation: (conversation: Omit<Conversation, 'id' | 'createdAt' | 'updatedAt'>) => Conversation;
|
||||
/** 更新会话 */
|
||||
updateConversation: (id: string, updates: Partial<Conversation>) => void;
|
||||
/** 删除会话 */
|
||||
deleteConversation: (id: string) => void;
|
||||
/** 设置会话列表 */
|
||||
setConversations: (conversations: Conversation[]) => void;
|
||||
/** 刷新会话列表（外部调用） */
|
||||
refresh: () => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成唯一 ID
|
||||
*/
|
||||
function generateId(): string {
|
||||
return `conv-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* 判断是否是今天
|
||||
*/
|
||||
function isToday(date: Date): boolean {
|
||||
const today = new Date();
|
||||
return (
|
||||
date.getDate() === today.getDate() &&
|
||||
date.getMonth() === today.getMonth() &&
|
||||
date.getFullYear() === today.getFullYear()
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* 判断是否是昨天
|
||||
*/
|
||||
function isYesterday(date: Date): boolean {
|
||||
const yesterday = new Date();
|
||||
yesterday.setDate(yesterday.getDate() - 1);
|
||||
return (
|
||||
date.getDate() === yesterday.getDate() &&
|
||||
date.getMonth() === yesterday.getMonth() &&
|
||||
date.getFullYear() === yesterday.getFullYear()
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* 会话管理 Hook
|
||||
*/
|
||||
export function useConversations(config: UseConversationsConfig = {}): UseConversationsReturn {
|
||||
const { initialConversations = [], onConversationChange } = config;
|
||||
|
||||
// 会话列表
|
||||
const [conversations, setConversationsState] = useState<Conversation[]>(initialConversations);
|
||||
|
||||
// 当前会话 ID
|
||||
const [currentId, setCurrentId] = useState<string | null>(config.currentId || null);
|
||||
|
||||
// 当前会话
|
||||
const current = useMemo(() => {
|
||||
if (!currentId) return null;
|
||||
return conversations.find(c => c.id === currentId) || null;
|
||||
}, [conversations, currentId]);
|
||||
|
||||
// 分组会话
|
||||
const groupedConversations = useMemo<ConversationGroup[]>(() => {
|
||||
const today: Conversation[] = [];
|
||||
const yesterday: Conversation[] = [];
|
||||
const earlier: Conversation[] = [];
|
||||
|
||||
// 按更新时间排序
|
||||
const sorted = [...conversations].sort(
|
||||
(a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime()
|
||||
);
|
||||
|
||||
sorted.forEach(conv => {
|
||||
const updatedAt = new Date(conv.updatedAt);
|
||||
if (isToday(updatedAt)) {
|
||||
today.push(conv);
|
||||
} else if (isYesterday(updatedAt)) {
|
||||
yesterday.push(conv);
|
||||
} else {
|
||||
earlier.push(conv);
|
||||
}
|
||||
});
|
||||
|
||||
const groups: ConversationGroup[] = [];
|
||||
if (today.length > 0) {
|
||||
groups.push({ label: '今天', key: 'today', conversations: today });
|
||||
}
|
||||
if (yesterday.length > 0) {
|
||||
groups.push({ label: '昨天', key: 'yesterday', conversations: yesterday });
|
||||
}
|
||||
if (earlier.length > 0) {
|
||||
groups.push({ label: '更早', key: 'earlier', conversations: earlier });
|
||||
}
|
||||
|
||||
return groups;
|
||||
}, [conversations]);
|
||||
|
||||
/**
|
||||
* 设置当前会话
|
||||
*/
|
||||
const setCurrent = useCallback((id: string | null) => {
|
||||
setCurrentId(id);
|
||||
const conv = id ? conversations.find(c => c.id === id) : null;
|
||||
onConversationChange?.(conv || null);
|
||||
}, [conversations, onConversationChange]);
|
||||
|
||||
/**
|
||||
* 添加会话
|
||||
*/
|
||||
const addConversation = useCallback((
|
||||
data: Omit<Conversation, 'id' | 'createdAt' | 'updatedAt'>
|
||||
): Conversation => {
|
||||
const now = new Date();
|
||||
const newConversation: Conversation = {
|
||||
...data,
|
||||
id: generateId(),
|
||||
createdAt: now,
|
||||
updatedAt: now,
|
||||
};
|
||||
|
||||
setConversationsState(prev => [newConversation, ...prev]);
|
||||
return newConversation;
|
||||
}, []);
|
||||
|
||||
/**
|
||||
* 更新会话
|
||||
*/
|
||||
const updateConversation = useCallback((id: string, updates: Partial<Conversation>) => {
|
||||
setConversationsState(prev =>
|
||||
prev.map(conv =>
|
||||
conv.id === id
|
||||
? { ...conv, ...updates, updatedAt: new Date() }
|
||||
: conv
|
||||
)
|
||||
);
|
||||
}, []);
|
||||
|
||||
/**
|
||||
* 删除会话
|
||||
*/
|
||||
const deleteConversation = useCallback((id: string) => {
|
||||
setConversationsState(prev => prev.filter(conv => conv.id !== id));
|
||||
|
||||
// 如果删除的是当前会话，清空选择
|
||||
if (currentId === id) {
|
||||
setCurrent(null);
|
||||
}
|
||||
}, [currentId, setCurrent]);
|
||||
|
||||
/**
|
||||
* 设置会话列表
|
||||
*/
|
||||
const setConversations = useCallback((newConversations: Conversation[]) => {
|
||||
setConversationsState(newConversations);
|
||||
}, []);
|
||||
|
||||
/**
|
||||
* 刷新（占位，由外部实现）
|
||||
*/
|
||||
const refresh = useCallback(() => {
|
||||
// 由外部实现数据获取
|
||||
console.log('[useConversations] refresh called');
|
||||
}, []);
|
||||
|
||||
return {
|
||||
conversations,
|
||||
groupedConversations,
|
||||
current,
|
||||
currentId,
|
||||
setCurrent,
|
||||
addConversation,
|
||||
updateConversation,
|
||||
deleteConversation,
|
||||
setConversations,
|
||||
refresh,
|
||||
};
|
||||
}
|
||||
|
||||
export default useConversations;
|
||||
|
||||
@@ -1,13 +1,62 @@
|
||||
/**
|
||||
* Chat 通用组件库 - 统一导出
|
||||
*
|
||||
* 用于前端通用能力层的 AI 对话组件
|
||||
* 基于 Ant Design X 构建的 AI 对话通用组件
|
||||
* 支持流式响应、深度思考、会话管理等能力
|
||||
*
|
||||
* @version 2.0.0 (升级版)
|
||||
*/
|
||||
|
||||
// ============================================
|
||||
// 核心组件
|
||||
// ============================================
|
||||
|
||||
/** 流式对话组件（推荐） */
|
||||
export { AIStreamChat } from './AIStreamChat';
|
||||
export type { AIStreamChatProps, WelcomeConfig, PromptItem } from './AIStreamChat';
|
||||
|
||||
/** 深度思考展示组件 */
|
||||
export { ThinkingBlock } from './ThinkingBlock';
|
||||
export type { ThinkingBlockProps } from './ThinkingBlock';
|
||||
|
||||
/** 会话列表组件 */
|
||||
export { ConversationList } from './ConversationList';
|
||||
export type { ConversationListProps } from './ConversationList';
|
||||
|
||||
// ============================================
|
||||
// 传统组件（向后兼容）
|
||||
// ============================================
|
||||
|
||||
/** 传统对话容器（非流式） */
|
||||
export { ChatContainer } from './ChatContainer';
|
||||
|
||||
/** 消息渲染器 */
|
||||
export { MessageRenderer } from './MessageRenderer';
|
||||
|
||||
/** 代码块渲染器 */
|
||||
export { CodeBlockRenderer } from './CodeBlockRenderer';
|
||||
|
||||
// ============================================
|
||||
// Hooks
|
||||
// ============================================
|
||||
|
||||
export { useAIStream, useConversations } from './hooks';
|
||||
export type {
|
||||
UseAIStreamConfig,
|
||||
UseAIStreamReturn,
|
||||
StreamStatus,
|
||||
StreamResult,
|
||||
SendOptions,
|
||||
UseConversationsConfig,
|
||||
UseConversationsReturn,
|
||||
Conversation,
|
||||
ConversationGroup,
|
||||
} from './hooks';
|
||||
|
||||
// ============================================
|
||||
// 类型定义
|
||||
// ============================================
|
||||
|
||||
export type {
|
||||
ChatContainerProps,
|
||||
ChatMessage,
|
||||
@@ -17,4 +66,3 @@ export type {
|
||||
CodeBlockRendererProps,
|
||||
ChatProviderConfig,
|
||||
} from './types';
|
||||
|
||||
|
||||
277
frontend-v2/src/shared/components/Chat/styles/ai-stream-chat.css
Normal file
277
frontend-v2/src/shared/components/Chat/styles/ai-stream-chat.css
Normal file
@@ -0,0 +1,277 @@
|
||||
/**
|
||||
* AIStreamChat 流式对话组件样式
|
||||
*
|
||||
* 现代感设计（参考 Ant Design X Ultramodern）：
|
||||
* - 大标题欢迎页
|
||||
* - 卡片式消息
|
||||
* - 渐变按钮
|
||||
* - 流畅动画
|
||||
*/
|
||||
|
||||
.ai-stream-chat {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
|
||||
}
|
||||
|
||||
/* 消息区域 */
|
||||
.chat-messages-area {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
/* 欢迎页 */
|
||||
.welcome-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 60vh;
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
.welcome-card {
|
||||
max-width: 600px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.welcome-card :global(.ant-welcome-icon) {
|
||||
font-size: 64px;
|
||||
margin-bottom: 24px;
|
||||
color: #6366f1;
|
||||
}
|
||||
|
||||
.welcome-card :global(.ant-welcome-title) {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
letter-spacing: -0.02em;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.welcome-card :global(.ant-welcome-description) {
|
||||
font-size: 16px;
|
||||
color: #6b7280;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* 快捷提示 */
|
||||
.welcome-prompts {
|
||||
margin-top: 32px;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.welcome-prompts :global(.ant-prompts-item) {
|
||||
padding: 16px 20px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #e5e7eb;
|
||||
background: white;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.welcome-prompts :global(.ant-prompts-item:hover) {
|
||||
border-color: #6366f1;
|
||||
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.12);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.welcome-prompts :global(.ant-prompts-item-icon) {
|
||||
color: #6366f1;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
/* 消息列表 */
|
||||
.messages-list {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* 消息气泡样式 */
|
||||
.messages-list :global(.ant-bubble) {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* AI 消息 */
|
||||
.messages-list :global(.ant-bubble-start) {
|
||||
background: white;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||||
padding: 16px 20px;
|
||||
max-width: 85%;
|
||||
}
|
||||
|
||||
/* 用户消息 */
|
||||
.messages-list :global(.ant-bubble-end) {
|
||||
background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
|
||||
color: white;
|
||||
border-radius: 16px;
|
||||
padding: 12px 18px;
|
||||
max-width: 70%;
|
||||
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
|
||||
}
|
||||
|
||||
.messages-list :global(.ant-bubble-end *) {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
/* 消息内容包装 */
|
||||
.message-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.message-text {
|
||||
font-size: 15px;
|
||||
line-height: 1.7;
|
||||
color: #334155;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
/* 打字光标 */
|
||||
.typing-cursor {
|
||||
display: inline-block;
|
||||
animation: cursor-blink 0.8s step-end infinite;
|
||||
color: #6366f1;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
@keyframes cursor-blink {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 输入区域 */
|
||||
.chat-input-area {
|
||||
padding: 16px 24px 24px;
|
||||
background: white;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
/* 工具栏 */
|
||||
.input-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
/* 深度思考按钮 */
|
||||
.deep-thinking-btn {
|
||||
border-radius: 20px;
|
||||
font-size: 13px;
|
||||
height: 32px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.deep-thinking-btn.active {
|
||||
background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);
|
||||
border-color: transparent;
|
||||
color: white;
|
||||
box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
|
||||
}
|
||||
|
||||
.deep-thinking-btn.active:hover {
|
||||
background: linear-gradient(135deg, #9f7ff6 0%, #7c3aed 100%);
|
||||
}
|
||||
|
||||
/* 发送器 */
|
||||
.chat-sender {
|
||||
border-radius: 16px;
|
||||
border: 2px solid #e5e7eb;
|
||||
background: #f9fafb;
|
||||
transition: all 0.3s ease;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.chat-sender:focus-within {
|
||||
border-color: #6366f1;
|
||||
background: white;
|
||||
box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
|
||||
}
|
||||
|
||||
.chat-sender :global(.ant-sender-content) {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.chat-sender :global(.ant-sender-actions) {
|
||||
padding: 8px 12px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* 附件预览 */
|
||||
.attachments-preview {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.attachment-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 12px;
|
||||
background: #f3f4f6;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
color: #4b5563;
|
||||
}
|
||||
|
||||
.attachment-item :global(.anticon) {
|
||||
color: #6366f1;
|
||||
}
|
||||
|
||||
/* 滚动条 */
|
||||
.chat-messages-area::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.chat-messages-area::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.chat-messages-area::-webkit-scrollbar-thumb {
|
||||
background: #e5e7eb;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.chat-messages-area::-webkit-scrollbar-thumb:hover {
|
||||
background: #d1d5db;
|
||||
}
|
||||
|
||||
/* 响应式 */
|
||||
@media (max-width: 768px) {
|
||||
.chat-messages-area {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.chat-input-area {
|
||||
padding: 12px 16px 16px;
|
||||
}
|
||||
|
||||
.welcome-card :global(.ant-welcome-title) {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.messages-list :global(.ant-bubble-start),
|
||||
.messages-list :global(.ant-bubble-end) {
|
||||
max-width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
/* 暗色模式支持（预留） */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
/* 可在此添加暗色模式样式 */
|
||||
}
|
||||
|
||||
@@ -0,0 +1,213 @@
|
||||
/**
|
||||
* ConversationList 会话列表样式
|
||||
*
|
||||
* 现代感设计（参考 Ant Design X Ultramodern）：
|
||||
* - 简洁清爽
|
||||
* - 柔和阴影
|
||||
* - 流畅过渡
|
||||
*/
|
||||
|
||||
.conversation-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 280px;
|
||||
background: #ffffff;
|
||||
border-right: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
/* 头部 */
|
||||
.conversation-list-header {
|
||||
padding: 20px 16px;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
}
|
||||
|
||||
.conversation-list-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.conversation-list-logo .default-logo {
|
||||
font-size: 24px;
|
||||
color: #6366f1;
|
||||
}
|
||||
|
||||
.conversation-list-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #111827;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
/* 新建会话按钮 */
|
||||
.conversation-list-new {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.new-conversation-btn {
|
||||
height: 44px;
|
||||
border-radius: 12px;
|
||||
border: 1px dashed #d1d5db;
|
||||
background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
|
||||
color: #6366f1;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.new-conversation-btn:hover {
|
||||
border-color: #6366f1;
|
||||
background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
|
||||
color: #4f46e5;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
|
||||
}
|
||||
|
||||
/* 会话列表内容 */
|
||||
.conversation-list-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
/* 分组标签 */
|
||||
.conversation-group {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.conversation-group-label {
|
||||
padding: 8px 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
/* 会话项 */
|
||||
.conversation-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
margin-bottom: 4px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.conversation-item:hover {
|
||||
background: #f9fafb;
|
||||
}
|
||||
|
||||
.conversation-item.active {
|
||||
background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
|
||||
}
|
||||
|
||||
.conversation-item.active::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 3px;
|
||||
height: 24px;
|
||||
background: #6366f1;
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
|
||||
/* 会话图标 */
|
||||
.conversation-item-icon {
|
||||
flex-shrink: 0;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 10px;
|
||||
background: #f3f4f6;
|
||||
color: #6b7280;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.conversation-item.active .conversation-item-icon {
|
||||
background: #6366f1;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.agent-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
/* 会话内容 */
|
||||
.conversation-item-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.conversation-item-title {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #111827;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.conversation-item-preview {
|
||||
font-size: 12px;
|
||||
color: #6b7280;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-top: 4px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* 更多按钮 */
|
||||
.conversation-item-more {
|
||||
opacity: 0;
|
||||
flex-shrink: 0;
|
||||
color: #9ca3af;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.conversation-item:hover .conversation-item-more {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* 空状态 */
|
||||
.conversation-empty {
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
/* 滚动条 */
|
||||
.conversation-list-content::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.conversation-list-content::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.conversation-list-content::-webkit-scrollbar-thumb {
|
||||
background: #e5e7eb;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.conversation-list-content::-webkit-scrollbar-thumb:hover {
|
||||
background: #d1d5db;
|
||||
}
|
||||
|
||||
/* 响应式 */
|
||||
@media (max-width: 768px) {
|
||||
.conversation-list {
|
||||
width: 100%;
|
||||
border-right: none;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
max-height: 40vh;
|
||||
}
|
||||
}
|
||||
|
||||
150
frontend-v2/src/shared/components/Chat/styles/thinking.css
Normal file
150
frontend-v2/src/shared/components/Chat/styles/thinking.css
Normal file
@@ -0,0 +1,150 @@
|
||||
/**
|
||||
* ThinkingBlock 深度思考组件样式
|
||||
*
|
||||
* 现代感设计：
|
||||
* - 渐变边框
|
||||
* - 柔和阴影
|
||||
* - 流畅动画
|
||||
*/
|
||||
|
||||
.thinking-block {
|
||||
margin: 12px 0;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
|
||||
border: 1px solid #e2e8f0;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.thinking-block.thinking {
|
||||
border-color: #a78bfa;
|
||||
box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.2), 0 4px 12px rgba(167, 139, 250, 0.1);
|
||||
}
|
||||
|
||||
.thinking-block.done {
|
||||
border-color: #10b981;
|
||||
}
|
||||
|
||||
/* 折叠面板样式覆盖 */
|
||||
.thinking-block :global(.ant-collapse) {
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.thinking-block :global(.ant-collapse-item) {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.thinking-block :global(.ant-collapse-header) {
|
||||
padding: 12px 16px !important;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.thinking-block :global(.ant-collapse-content) {
|
||||
border-top: 1px solid #e2e8f0;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.thinking-block :global(.ant-collapse-content-box) {
|
||||
padding: 16px !important;
|
||||
}
|
||||
|
||||
/* 头部样式 */
|
||||
.thinking-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.thinking-bolt {
|
||||
font-size: 16px;
|
||||
color: #a78bfa;
|
||||
}
|
||||
|
||||
.thinking-block.thinking .thinking-bolt {
|
||||
animation: pulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.thinking-title {
|
||||
font-weight: 500;
|
||||
color: #334155;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.thinking-icon {
|
||||
font-size: 14px;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.thinking-icon.spinning {
|
||||
color: #a78bfa;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
.thinking-icon.done {
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
.thinking-time {
|
||||
font-size: 12px;
|
||||
color: #94a3b8;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
/* 内容样式 */
|
||||
.thinking-content {
|
||||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.thinking-text {
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.thinking-cursor {
|
||||
display: inline-block;
|
||||
animation: blink 0.8s step-end infinite;
|
||||
color: #a78bfa;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.thinking-placeholder {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
color: #94a3b8;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* 动画 */
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.6;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user