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;
|
||||
|
||||
Reference in New Issue
Block a user