feat(dc): Complete Tool C Day 5 - AI Chat + Ant Design X Integration
Summary: - Upgrade to Ant Design 6.0.1 + install Ant Design X (2.1.0) + X SDK (2.1.0) - Develop frontend common capability layer: Chat component library (~968 lines) * ChatContainer.tsx - Core container component * MessageRenderer.tsx - Message renderer * CodeBlockRenderer.tsx - Code block renderer with syntax highlighting * Complete TypeScript types and documentation - Integrate ChatContainer into Tool C - Fix 7 critical UI issues: * AG Grid module registration error * UI refinement (borders, shadows, gradients) * Add AI welcome message * Auto-clear input field after sending * Remove page scrollbars * Manual code execution (not auto-run) * Support simple Q&A (new /ai/chat API) - Complete end-to-end testing - Update all documentation (4 status docs + 6 dev logs) Technical Stack: - Frontend: React 19 + Ant Design 6.0 + Ant Design X 2.1 - Components: Bubble, Sender from @ant-design/x - Total code: ~5418 lines Status: Tool C MVP completed, production ready
This commit is contained in:
162
frontend-v2/src/shared/components/Chat/ChatContainer.tsx
Normal file
162
frontend-v2/src/shared/components/Chat/ChatContainer.tsx
Normal file
@@ -0,0 +1,162 @@
|
||||
/**
|
||||
* ChatContainer - 通用 AI 对话容器组件
|
||||
*
|
||||
* 基于 Ant Design X + X SDK 构建
|
||||
* 支持多场景：AIA、PKB、Tool C
|
||||
*
|
||||
* 注意：由于 Ant Design X SDK 的复杂性，这里采用简化实现
|
||||
* 直接管理消息状态，不使用 useXChat Hook
|
||||
*/
|
||||
|
||||
import React, { useState, useCallback } from 'react';
|
||||
import { Bubble, Sender } from '@ant-design/x';
|
||||
import type { ChatContainerProps, ChatMessage } from './types';
|
||||
import type { BubbleItemType } from '@ant-design/x/es/bubble/interface';
|
||||
import './styles/chat.css';
|
||||
|
||||
/**
|
||||
* ChatContainer 组件（简化实现）
|
||||
*/
|
||||
export const ChatContainer: React.FC<ChatContainerProps> = ({
|
||||
conversationKey: _conversationKey,
|
||||
defaultMessages = [],
|
||||
providerConfig,
|
||||
customMessageRenderer,
|
||||
senderProps = {},
|
||||
onMessageSent,
|
||||
onMessageReceived,
|
||||
onError,
|
||||
className = '',
|
||||
style = {},
|
||||
}) => {
|
||||
// 如果没有默认消息，添加欢迎语
|
||||
const initialMessages = defaultMessages.length > 0 ? defaultMessages : [{
|
||||
id: 'welcome',
|
||||
role: 'assistant' as const,
|
||||
content: '您好！我是您的 AI 数据分析师。我可以帮您编写代码来清洗数据。试试说："把年龄大于60的设为老年组"。',
|
||||
status: 'success' as const,
|
||||
timestamp: Date.now(),
|
||||
}];
|
||||
|
||||
const [messages, setMessages] = useState<ChatMessage[]>(initialMessages);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
// 处理消息发送
|
||||
const handleSend = useCallback(async (messageContent: string) => {
|
||||
if (!messageContent.trim()) return; // 防止发送空消息
|
||||
|
||||
// 1. 添加用户消息
|
||||
const userMessage: ChatMessage = {
|
||||
id: Date.now(),
|
||||
role: 'user',
|
||||
content: messageContent,
|
||||
status: 'success',
|
||||
timestamp: Date.now(),
|
||||
};
|
||||
|
||||
setMessages(prev => [...prev, userMessage]);
|
||||
|
||||
if (onMessageSent) {
|
||||
onMessageSent(userMessage);
|
||||
}
|
||||
|
||||
// 2. 显示加载状态
|
||||
const loadingMessage: ChatMessage = {
|
||||
id: 'loading',
|
||||
role: 'assistant',
|
||||
content: '正在思考...',
|
||||
status: 'loading',
|
||||
timestamp: Date.now(),
|
||||
};
|
||||
|
||||
setMessages(prev => [...prev, loadingMessage]);
|
||||
setIsLoading(true);
|
||||
|
||||
try {
|
||||
// 3. 调用后端 API
|
||||
let response;
|
||||
if (providerConfig.requestFn) {
|
||||
response = await providerConfig.requestFn(messageContent, { messages });
|
||||
} else {
|
||||
const res = await fetch(providerConfig.apiEndpoint, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ message: messageContent }),
|
||||
});
|
||||
|
||||
if (!res.ok) throw new Error('API 请求失败');
|
||||
response = await res.json();
|
||||
}
|
||||
|
||||
// 4. 移除加载消息，添加 AI 响应
|
||||
const aiMessage: ChatMessage = {
|
||||
id: response.messageId || Date.now(),
|
||||
role: 'assistant',
|
||||
content: response.explanation || response.message || response.content || '',
|
||||
status: 'success',
|
||||
code: response.code,
|
||||
explanation: response.explanation,
|
||||
timestamp: Date.now(),
|
||||
metadata: response.metadata,
|
||||
};
|
||||
|
||||
setMessages(prev => prev.filter(m => m.id !== 'loading').concat(aiMessage));
|
||||
|
||||
if (onMessageReceived) {
|
||||
onMessageReceived(aiMessage);
|
||||
}
|
||||
|
||||
} catch (error: any) {
|
||||
// 5. 错误处理
|
||||
const errorMessage: ChatMessage = {
|
||||
id: Date.now(),
|
||||
role: 'assistant',
|
||||
content: `抱歉，处理您的请求时出现错误：${error.message}`,
|
||||
status: 'error',
|
||||
timestamp: Date.now(),
|
||||
};
|
||||
|
||||
setMessages(prev => prev.filter(m => m.id !== 'loading').concat(errorMessage));
|
||||
|
||||
if (onError) {
|
||||
onError(error);
|
||||
}
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, [messages, providerConfig, onMessageSent, onMessageReceived, onError]);
|
||||
|
||||
// 转换消息为 Bubble.List 所需格式
|
||||
const bubbleItems: BubbleItemType[] = messages.map((msg) => ({
|
||||
key: msg.id,
|
||||
role: msg.role,
|
||||
content: customMessageRenderer
|
||||
? customMessageRenderer({ id: msg.id, message: msg, status: msg.status || 'success' })
|
||||
: msg.content,
|
||||
status: msg.status,
|
||||
}));
|
||||
|
||||
return (
|
||||
<div className={`chat-container ${className}`} style={style}>
|
||||
{/* 消息列表 */}
|
||||
<div className="chat-messages">
|
||||
<Bubble.List
|
||||
items={bubbleItems}
|
||||
autoScroll={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 输入框 */}
|
||||
<div className="chat-input">
|
||||
<Sender
|
||||
placeholder="输入消息..."
|
||||
loading={isLoading}
|
||||
onSubmit={handleSend}
|
||||
{...senderProps}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ChatContainer;
|
||||
70
frontend-v2/src/shared/components/Chat/CodeBlockRenderer.tsx
Normal file
70
frontend-v2/src/shared/components/Chat/CodeBlockRenderer.tsx
Normal file
@@ -0,0 +1,70 @@
|
||||
/**
|
||||
* CodeBlockRenderer - 代码块渲染器
|
||||
*
|
||||
* Tool C 专用：显示 AI 生成的代码，支持语法高亮和执行
|
||||
*/
|
||||
|
||||
import React, { useEffect } from 'react';
|
||||
import { Button } from 'antd';
|
||||
import { PlayCircleOutlined, LoadingOutlined } from '@ant-design/icons';
|
||||
import Prism from 'prismjs';
|
||||
import 'prismjs/themes/prism-tomorrow.css';
|
||||
import 'prismjs/components/prism-python';
|
||||
import type { CodeBlockRendererProps } from './types';
|
||||
|
||||
export const CodeBlockRenderer: React.FC<CodeBlockRendererProps> = ({
|
||||
code,
|
||||
language = 'python',
|
||||
onExecute,
|
||||
isExecuting = false,
|
||||
executionResult,
|
||||
}) => {
|
||||
// 语法高亮
|
||||
useEffect(() => {
|
||||
Prism.highlightAll();
|
||||
}, [code]);
|
||||
|
||||
const handleExecute = () => {
|
||||
if (onExecute && !isExecuting) {
|
||||
onExecute(code);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="code-block-container">
|
||||
<div className="code-block-header">
|
||||
<span className="code-language">{language}</span>
|
||||
{onExecute && (
|
||||
<Button
|
||||
type="primary"
|
||||
size="small"
|
||||
icon={isExecuting ? <LoadingOutlined /> : <PlayCircleOutlined />}
|
||||
onClick={handleExecute}
|
||||
disabled={isExecuting}
|
||||
className="execute-button"
|
||||
>
|
||||
{isExecuting ? '执行中...' : '运行代码'}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<pre className="code-block">
|
||||
<code className={`language-${language}`}>
|
||||
{code}
|
||||
</code>
|
||||
</pre>
|
||||
|
||||
{executionResult && (
|
||||
<div className={`execution-result ${executionResult.success ? 'success' : 'error'}`}>
|
||||
{executionResult.success ? (
|
||||
<span>✅ 执行成功</span>
|
||||
) : (
|
||||
<span>❌ {executionResult.message || '执行失败'}</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CodeBlockRenderer;
|
||||
63
frontend-v2/src/shared/components/Chat/MessageRenderer.tsx
Normal file
63
frontend-v2/src/shared/components/Chat/MessageRenderer.tsx
Normal file
@@ -0,0 +1,63 @@
|
||||
/**
|
||||
* MessageRenderer - 消息渲染器
|
||||
*
|
||||
* 为不同场景提供自定义消息渲染
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import type { MessageInfo } from '@ant-design/x-sdk';
|
||||
import type { ChatMessage } from './types';
|
||||
import { CodeBlockRenderer } from './CodeBlockRenderer';
|
||||
|
||||
export interface MessageRendererProps {
|
||||
messageInfo: MessageInfo<ChatMessage>;
|
||||
onExecuteCode?: (code: string) => void;
|
||||
isExecuting?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* 默认消息渲染器
|
||||
*/
|
||||
export const MessageRenderer: React.FC<MessageRendererProps> = ({
|
||||
messageInfo,
|
||||
onExecuteCode,
|
||||
isExecuting = false,
|
||||
}) => {
|
||||
const message = messageInfo.message;
|
||||
|
||||
return (
|
||||
<div className="message-content">
|
||||
{/* 文本内容 */}
|
||||
{message.explanation && (
|
||||
<div className="message-explanation">
|
||||
{message.explanation}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!message.explanation && message.content && (
|
||||
<div className="message-text">
|
||||
{message.content}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 代码块（Tool C 专用） */}
|
||||
{message.code && (
|
||||
<CodeBlockRenderer
|
||||
code={message.code}
|
||||
language="python"
|
||||
onExecute={onExecuteCode}
|
||||
isExecuting={isExecuting}
|
||||
executionResult={
|
||||
message.status === 'success'
|
||||
? { success: true }
|
||||
: message.status === 'error'
|
||||
? { success: false, message: '执行失败' }
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MessageRenderer;
|
||||
296
frontend-v2/src/shared/components/Chat/README.md
Normal file
296
frontend-v2/src/shared/components/Chat/README.md
Normal file
@@ -0,0 +1,296 @@
|
||||
# Chat 通用组件库
|
||||
|
||||
> 基于 **Ant Design X** 构建的 AI 对话通用组件，支持多场景复用
|
||||
|
||||
## 📚 技术栈
|
||||
|
||||
- **@ant-design/x** (2.1.0) - UI 组件（Bubble, Sender）
|
||||
- **@ant-design/x-sdk** (2.1.0) - 数据流管理（可选）
|
||||
- **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
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🚀 快速开始
|
||||
|
||||
### 基础用法
|
||||
|
||||
```typescript
|
||||
import { ChatContainer } from '@/shared/components/Chat';
|
||||
|
||||
<ChatContainer
|
||||
conversationType="aia"
|
||||
providerConfig={{
|
||||
apiEndpoint: '/api/chat',
|
||||
}}
|
||||
/>
|
||||
```
|
||||
|
||||
### Tool C 集成（完整示例）
|
||||
|
||||
```typescript
|
||||
import { ChatContainer, MessageRenderer } 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);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📖 API 文档
|
||||
|
||||
### ChatContainer Props
|
||||
|
||||
| 参数 | 类型 | 必填 | 默认值 | 说明 |
|
||||
|------|------|------|--------|------|
|
||||
| `conversationType` | `ConversationType` | ✅ | - | 对话类型（'aia' \| 'pkb' \| 'tool-c'） |
|
||||
| `conversationKey` | `string` | ❌ | - | 会话 ID（用于多会话管理） |
|
||||
| `providerConfig` | `ChatProviderConfig` | ✅ | - | API 配置 |
|
||||
| `defaultMessages` | `ChatMessage[]` | ❌ | `[]` | 初始消息列表 |
|
||||
| `customMessageRenderer` | `Function` | ❌ | - | 自定义消息渲染器 |
|
||||
| `senderProps` | `SenderProps` | ❌ | `{}` | Sender 组件配置 |
|
||||
| `onMessageSent` | `Function` | ❌ | - | 消息发送回调 |
|
||||
| `onMessageReceived` | `Function` | ❌ | - | 消息接收回调 |
|
||||
| `onError` | `Function` | ❌ | - | 错误回调 |
|
||||
|
||||
### ChatProviderConfig
|
||||
|
||||
```typescript
|
||||
interface ChatProviderConfig {
|
||||
apiEndpoint: string; // API 端点
|
||||
method?: 'GET' | 'POST'; // 请求方法
|
||||
headers?: Record<string, string>; // 请求头
|
||||
requestFn?: (message: string, context?: any) => Promise<any>; // 自定义请求函数
|
||||
}
|
||||
```
|
||||
|
||||
### ChatMessage
|
||||
|
||||
```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>;
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎨 自定义渲染
|
||||
|
||||
### MessageRenderer（默认渲染器）
|
||||
|
||||
```typescript
|
||||
import { MessageRenderer } from '@/shared/components/Chat';
|
||||
|
||||
<MessageRenderer
|
||||
messageInfo={msgInfo}
|
||||
onExecuteCode={(code) => console.log('Execute:', code)}
|
||||
isExecuting={false}
|
||||
/>
|
||||
```
|
||||
|
||||
### 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": [...]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📁 文件结构
|
||||
|
||||
```
|
||||
shared/components/Chat/
|
||||
├── types.ts # TypeScript 类型定义
|
||||
├── ChatContainer.tsx # 核心容器组件
|
||||
├── MessageRenderer.tsx # 默认消息渲染器
|
||||
├── CodeBlockRenderer.tsx # 代码块渲染器
|
||||
├── styles/
|
||||
│ └── chat.css # 样式文件
|
||||
├── index.ts # 统一导出
|
||||
└── README.md # 本文档
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎯 使用场景
|
||||
|
||||
### 1. AIA（AI智能问答）
|
||||
|
||||
```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`
|
||||
|
||||
---
|
||||
|
||||
## 📝 开发记录
|
||||
|
||||
- **2025-12-07**: 初始版本，基于 Ant Design X 2.1.0 重构
|
||||
- 完整开发记录：`docs/03-业务模块/DC-数据清洗整理/06-开发记录/`
|
||||
|
||||
---
|
||||
|
||||
## 📚 参考资料
|
||||
|
||||
- [Ant Design X 官方文档](https://x.ant.design)
|
||||
- [Ant Design X SDK 文档](https://x.ant.design/x-sdks/introduce-cn)
|
||||
- [项目架构文档](../../../docs/00-系统总体设计/)
|
||||
20
frontend-v2/src/shared/components/Chat/index.ts
Normal file
20
frontend-v2/src/shared/components/Chat/index.ts
Normal file
@@ -0,0 +1,20 @@
|
||||
/**
|
||||
* Chat 通用组件库 - 统一导出
|
||||
*
|
||||
* 用于前端通用能力层的 AI 对话组件
|
||||
*/
|
||||
|
||||
export { ChatContainer } from './ChatContainer';
|
||||
export { MessageRenderer } from './MessageRenderer';
|
||||
export { CodeBlockRenderer } from './CodeBlockRenderer';
|
||||
|
||||
export type {
|
||||
ChatContainerProps,
|
||||
ChatMessage,
|
||||
MessageRole,
|
||||
MessageStatus,
|
||||
ConversationType,
|
||||
CodeBlockRendererProps,
|
||||
ChatProviderConfig,
|
||||
} from './types';
|
||||
|
||||
143
frontend-v2/src/shared/components/Chat/styles/chat.css
Normal file
143
frontend-v2/src/shared/components/Chat/styles/chat.css
Normal file
@@ -0,0 +1,143 @@
|
||||
/**
|
||||
* Chat 通用组件样式
|
||||
* 基于 Ant Design X
|
||||
*/
|
||||
|
||||
/* ========== ChatContainer ========== */
|
||||
.chat-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
background: #ffffff;
|
||||
border-left: 1px solid #e2e8f0; /* 增强左侧边框 */
|
||||
}
|
||||
|
||||
.chat-messages {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 20px;
|
||||
background: linear-gradient(to bottom, #ffffff 0%, #f8fafc 100%); /* 渐变背景 */
|
||||
}
|
||||
|
||||
.chat-input {
|
||||
border-top: 2px solid #e2e8f0; /* 增强顶部边框 */
|
||||
padding: 16px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05); /* 添加阴影 */
|
||||
}
|
||||
|
||||
/* ========== MessageRenderer ========== */
|
||||
.message-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.message-explanation {
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
color: #262626;
|
||||
}
|
||||
|
||||
.message-text {
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
color: #595959;
|
||||
}
|
||||
|
||||
/* ========== CodeBlockRenderer ========== */
|
||||
.code-block-container {
|
||||
margin-top: 12px;
|
||||
border: 2px solid #10b981; /* 翠绿色边框 */
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
background: #1e1e1e;
|
||||
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15); /* 翠绿色阴影 */
|
||||
}
|
||||
|
||||
.code-block-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8px 12px;
|
||||
background: #2d2d2d;
|
||||
border-bottom: 1px solid #404040;
|
||||
}
|
||||
|
||||
.code-language {
|
||||
font-size: 12px;
|
||||
color: #a0a0a0;
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.execute-button {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.code-block {
|
||||
margin: 0;
|
||||
padding: 16px;
|
||||
background: #1e1e1e;
|
||||
overflow-x: auto;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.code-block code {
|
||||
font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
|
||||
color: #d4d4d4;
|
||||
}
|
||||
|
||||
.execution-result {
|
||||
padding: 8px 12px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.execution-result.success {
|
||||
background: #f6ffed;
|
||||
color: #52c41a;
|
||||
border-top: 1px solid #b7eb8f;
|
||||
}
|
||||
|
||||
.execution-result.error {
|
||||
background: #fff2e8;
|
||||
color: #fa541c;
|
||||
border-top: 1px solid #ffbb96;
|
||||
}
|
||||
|
||||
/* ========== 响应式 ========== */
|
||||
@media (max-width: 768px) {
|
||||
.chat-messages {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.chat-input {
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.code-block {
|
||||
padding: 12px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== 滚动条样式 ========== */
|
||||
.chat-messages::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.chat-messages::-webkit-scrollbar-track {
|
||||
background: #f0f0f0;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.chat-messages::-webkit-scrollbar-thumb {
|
||||
background: #bfbfbf;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.chat-messages::-webkit-scrollbar-thumb:hover {
|
||||
background: #8c8c8c;
|
||||
}
|
||||
150
frontend-v2/src/shared/components/Chat/types.ts
Normal file
150
frontend-v2/src/shared/components/Chat/types.ts
Normal file
@@ -0,0 +1,150 @@
|
||||
/**
|
||||
* Chat 通用组件库 - TypeScript 类型定义
|
||||
*
|
||||
* 基于 Ant Design X 和 X SDK 构建
|
||||
* 支持多种对话场景：AIA、PKB（个人知识库）、Tool C 等
|
||||
*/
|
||||
|
||||
import { ReactNode } from 'react';
|
||||
import type { BubbleProps } from '@ant-design/x/es/bubble/interface';
|
||||
import type { SenderProps } from '@ant-design/x/es/sender/interface';
|
||||
import type { MessageInfo } from '@ant-design/x-sdk';
|
||||
|
||||
/**
|
||||
* 对话类型
|
||||
* 用于区分不同业务场景，可扩展
|
||||
*/
|
||||
export type ConversationType =
|
||||
| 'aia' // AI智能问答
|
||||
| 'pkb' // 个人知识库（PKB = AI知识库）
|
||||
| 'tool-c' // DC工具C
|
||||
| string; // 可扩展
|
||||
|
||||
/**
|
||||
* 消息角色
|
||||
*/
|
||||
export type MessageRole = 'user' | 'assistant' | 'system';
|
||||
|
||||
/**
|
||||
* 消息状态（来自 X SDK）
|
||||
*/
|
||||
export type MessageStatus = 'local' | 'loading' | 'updating' | 'success' | 'error' | 'abort';
|
||||
|
||||
/**
|
||||
* 通用聊天消息（扩展 X SDK 的 MessageInfo）
|
||||
*/
|
||||
export interface ChatMessage {
|
||||
id: string | number;
|
||||
role: MessageRole;
|
||||
content: string;
|
||||
status?: MessageStatus;
|
||||
code?: string; // Tool C 专用：AI 生成的代码
|
||||
explanation?: string; // Tool C 专用：代码解释
|
||||
timestamp?: number;
|
||||
metadata?: Record<string, any>;
|
||||
}
|
||||
|
||||
/**
|
||||
* Chat Provider 配置
|
||||
* 用于对接后端 API
|
||||
*/
|
||||
export interface ChatProviderConfig {
|
||||
/**
|
||||
* API 端点
|
||||
*/
|
||||
apiEndpoint: string;
|
||||
|
||||
/**
|
||||
* 请求方法
|
||||
*/
|
||||
method?: 'GET' | 'POST';
|
||||
|
||||
/**
|
||||
* 请求头
|
||||
*/
|
||||
headers?: Record<string, string>;
|
||||
|
||||
/**
|
||||
* 自定义请求函数
|
||||
*/
|
||||
requestFn?: (message: string, context?: any) => Promise<any>;
|
||||
}
|
||||
|
||||
/**
|
||||
* ChatContainer 组件 Props
|
||||
*/
|
||||
export interface ChatContainerProps {
|
||||
/**
|
||||
* 对话类型（必填）
|
||||
*/
|
||||
conversationType: ConversationType;
|
||||
|
||||
/**
|
||||
* 会话 ID（可选，用于多会话管理）
|
||||
*/
|
||||
conversationKey?: string;
|
||||
|
||||
/**
|
||||
* 初始消息列表
|
||||
*/
|
||||
defaultMessages?: ChatMessage[];
|
||||
|
||||
/**
|
||||
* Chat Provider 配置
|
||||
*/
|
||||
providerConfig: ChatProviderConfig;
|
||||
|
||||
/**
|
||||
* 自定义消息渲染器（可选）
|
||||
*/
|
||||
customMessageRenderer?: (message: MessageInfo<ChatMessage>) => ReactNode;
|
||||
|
||||
/**
|
||||
* 自定义 Bubble 配置
|
||||
*/
|
||||
bubbleProps?: Partial<BubbleProps>;
|
||||
|
||||
/**
|
||||
* 自定义 Sender 配置
|
||||
*/
|
||||
senderProps?: Partial<SenderProps>;
|
||||
|
||||
/**
|
||||
* 消息发送成功回调
|
||||
*/
|
||||
onMessageSent?: (message: ChatMessage) => void;
|
||||
|
||||
/**
|
||||
* 消息接收成功回调
|
||||
*/
|
||||
onMessageReceived?: (message: ChatMessage) => void;
|
||||
|
||||
/**
|
||||
* 错误回调
|
||||
*/
|
||||
onError?: (error: Error) => void;
|
||||
|
||||
/**
|
||||
* 自定义样式类名
|
||||
*/
|
||||
className?: string;
|
||||
|
||||
/**
|
||||
* 自定义样式
|
||||
*/
|
||||
style?: React.CSSProperties;
|
||||
}
|
||||
|
||||
/**
|
||||
* CodeBlockRenderer 组件 Props（Tool C 专用）
|
||||
*/
|
||||
export interface CodeBlockRendererProps {
|
||||
code: string;
|
||||
language?: string;
|
||||
onExecute?: (code: string) => void;
|
||||
isExecuting?: boolean;
|
||||
executionResult?: {
|
||||
success: boolean;
|
||||
message?: string;
|
||||
};
|
||||
}
|
||||
12
frontend-v2/src/shared/components/index.ts
Normal file
12
frontend-v2/src/shared/components/index.ts
Normal file
@@ -0,0 +1,12 @@
|
||||
/**
|
||||
* Shared Components - 通用组件统一导出
|
||||
*
|
||||
* 前端通用能力层组件
|
||||
*/
|
||||
|
||||
// Chat 组件库
|
||||
export * from './Chat';
|
||||
|
||||
// 其他通用组件
|
||||
export { default as Placeholder } from './Placeholder';
|
||||
|
||||
Reference in New Issue
Block a user