HaHafeng
3d35e9c58b
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
79 lines
2.0 KiB
TypeScript
79 lines
2.0 KiB
TypeScript
/**
|
||
* 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;
|
||
|