@alicloud/appflow-chat 0.0.1-beta.1

package/README-ZH.md

@@ -0,0 +1,188 @@
+# Appflow Chat SDK
+
+AI 聊天机器人组件库，提供聊天服务和 UI 组件。
+
+## 安装
+
+### 基础安装
+
+```bash
+# 阿里内部
+tnpm install @ali/appflow-chat
+
+# NPM 官方
+npm install appflow-chat
+```
+
+### 安装 Peer Dependencies
+
+本 SDK 需要以下 peer dependencies，请确保你的项目中已安装：
+
+```bash
+npm install react react-dom antd
+```
+
+| 依赖 | 说明 |
+|-----|------|
+| `react` | React 核心库 |
+| `react-dom` | React DOM 渲染 |
+| `antd` | Ant Design UI 组件库 |
+
+## 快速开始
+
+### 1. 初始化服务
+
+```typescript
+import { chatService } from '@ali/appflow-chat';
+
+// 初始化
+const config = await chatService.setup({
+  integrateId: 'your-integrate-id',
+  domain: 'https://your-domain.com',
+  access_session_token: 'optional-token'
+});
+
+console.log('欢迎语:', config.welcome);
+console.log('推荐问题:', config.questions);
+```
+
+### 2. 发送消息
+
+```typescript
+// 发送文本消息
+chatService.chat({ text: '你好' })
+  .onMessage((content, done, meta) => {
+    console.log('AI回复:', content);
+    if (done) {
+      console.log('回复完成');
+    }
+  })
+  .onError((error) => {
+    console.error('错误:', error);
+  });
+```
+
+### 3. 使用 UI 组件
+
+```tsx
+import { MessageBubble, RichMessageBubble } from '@ali/appflow-chat';
+
+// 简单消息气泡
+<MessageBubble 
+  content="这是AI的回复，支持**Markdown**格式"
+  role="bot"
+  status="Success"
+/>
+
+// 富文本消息气泡（支持图表、表格等）
+<RichMessageBubble 
+  content={richContent}
+  messageType="rich"
+  status="Success"
+/>
+```
+
+### 4. 使用 MarkdownView 组件
+
+```tsx
+import { MarkdownView } from '@ali/appflow-chat';
+
+// 渲染 Markdown 内容
+<MarkdownView 
+  content="# 标题\n\n这是一段 **Markdown** 内容，支持：\n- 代码高亮\n- 数学公式\n- 图表渲染"
+  waitingMessage="正在思考..."
+/>
+```
+
+### 5. 使用 Core 组件（高级定制）
+
+```tsx
+import { BubbleContent, SourceContent } from '@ali/appflow-chat';
+
+// 自定义消息气泡
+<div className="my-bubble">
+  <BubbleContent content={content} status={status}>
+    {/* 自定义参考资料组件 */}
+    <SourceContent items={references} />
+  </BubbleContent>
+</div>
+```
+
+## API 文档
+
+### ChatService
+
+| 方法 | 说明 |
+|-----|------|
+| `setup(config)` | 初始化 SDK |
+| `chat(message)` | 发送消息 |
+| `upload(file)` | 上传文件 |
+| `cancel()` | 取消当前请求 |
+| `clear()` | 清除会话 |
+| `getHistory(sessionId?)` | 获取历史记录 |
+| `getSessions()` | 获取会话列表 |
+| `sendEventCallback(data)` | 发送事件回调（用于 humanVerify 等场景） |
+| `submitHumanVerify(data)` | 提交人工审核结果（sendEventCallback 的便捷封装） |
+
+### UI 组件
+
+| 组件 | 说明 |
+|-----|------|
+| `MarkdownRenderer` | Markdown 渲染组件（带交互） |
+| `MessageBubble` | 消息气泡组件 |
+| `RichMessageBubble` | 富文本消息气泡组件 |
+| `DocReferences` | 参考资料组件 |
+| `WebSearchPanel` | 网页搜索结果面板 |
+| `HumanVerify` | 人工审核表单组件 |
+| `HistoryCard` | 历史审核记录卡片组件 |
+| `CustomParamsRenderer` | 自定义参数渲染器组件 |
+
+### Markdown 组件
+
+| 组件 | 说明 |
+|-----|------|
+| `MarkdownView` | Markdown 渲染核心组件，支持代码高亮、数学公式、图表等 |
+
+### Core 组件
+
+| 组件 | 说明 |
+|-----|------|
+| `BubbleContent` | 气泡内容核心组件 |
+| `RichBubbleContent` | 富文本气泡内容核心组件 |
+| `SourceContent` | 参考资料核心组件 |
+| `WebSearchContent` | 网页搜索核心组件 |
+
+## 项目结构
+
+```
+src/
+├── index.ts                 # 入口文件
+├── services/
+│   └── ChatService.ts       # 聊天服务
+├── components/              # SDK 组件（简化接口）
+│   ├── MarkdownRenderer.tsx
+│   ├── MessageBubble.tsx
+│   ├── RichMessageBubble.tsx
+│   ├── DocReferences.tsx
+│   ├── WebSearchPanel.tsx
+│   └── HumanVerify/         # 人工审核组件
+│       ├── HumanVerify.tsx
+│       ├── HistoryCard.tsx
+│       └── CustomParamsRenderer/
+├── core/                    # Core 组件（纯展示）
+│   ├── BubbleContent.tsx
+│   ├── RichBubbleContent.tsx
+│   ├── SourceContent.tsx
+│   └── WebSearchContent.tsx
+├── markdown/                # Markdown 渲染
+│   ├── index.tsx            # MarkdownView 组件
+│   └── ...
+├── hooks/
+│   └── usePreSignUpload.ts
+└── utils/
+    └── loadEcharts.ts
+```
+
+## License
+
+MIT

package/README.md

@@ -0,0 +1,190 @@
+# Appflow Chat SDK
+
+AI chatbot component library providing chat services and UI components.
+
+[中文文档](./README-ZH.md)
+
+## Installation
+
+### Basic Installation
+
+```bash
+# Alibaba Internal
+tnpm install @ali/appflow-chat
+
+# NPM Official
+npm install appflow-chat
+```
+
+### Install Peer Dependencies
+
+This SDK requires the following peer dependencies. Please ensure they are installed in your project:
+
+```bash
+npm install react react-dom antd
+```
+
+| Dependency | Description |
+|-----|------|
+| `react` | React core library |
+| `react-dom` | React DOM rendering |
+| `antd` | Ant Design UI component library |
+
+## Quick Start
+
+### 1. Initialize Service
+
+```typescript
+import { chatService } from '@ali/appflow-chat';
+
+// Initialize
+const config = await chatService.setup({
+  integrateId: 'your-integrate-id',
+  domain: 'https://your-domain.com',
+  access_session_token: 'optional-token'
+});
+
+console.log('Welcome message:', config.welcome);
+console.log('Suggested questions:', config.questions);
+```
+
+### 2. Send Messages
+
+```typescript
+// Send text message
+chatService.chat({ text: 'Hello' })
+  .onMessage((content, done, meta) => {
+    console.log('AI response:', content);
+    if (done) {
+      console.log('Response complete');
+    }
+  })
+  .onError((error) => {
+    console.error('Error:', error);
+  });
+```
+
+### 3. Use UI Components
+
+```tsx
+import { MessageBubble, RichMessageBubble } from '@ali/appflow-chat';
+
+// Simple message bubble
+<MessageBubble 
+  content="This is AI response, supports **Markdown** format"
+  role="bot"
+  status="Success"
+/>
+
+// Rich text message bubble (supports charts, tables, etc.)
+<RichMessageBubble 
+  content={richContent}
+  messageType="rich"
+  status="Success"
+/>
+```
+
+### 4. Use MarkdownView Component
+
+```tsx
+import { MarkdownView } from '@ali/appflow-chat';
+
+// Render Markdown content
+<MarkdownView 
+  content="# Title\n\nThis is **Markdown** content, supports:\n- Code highlighting\n- Math formulas\n- Chart rendering"
+  waitingMessage="Thinking..."
+/>
+```
+
+### 5. Use Core Components (Advanced Customization)
+
+```tsx
+import { BubbleContent, SourceContent } from '@ali/appflow-chat';
+
+// Custom message bubble
+<div className="my-bubble">
+  <BubbleContent content={content} status={status}>
+    {/* Custom reference component */}
+    <SourceContent items={references} />
+  </BubbleContent>
+</div>
+```
+
+## API Documentation
+
+### ChatService
+
+| Method | Description |
+|-----|------|
+| `setup(config)` | Initialize SDK |
+| `chat(message)` | Send message |
+| `upload(file)` | Upload file |
+| `cancel()` | Cancel current request |
+| `clear()` | Clear session |
+| `getHistory(sessionId?)` | Get chat history |
+| `getSessions()` | Get session list |
+| `sendEventCallback(data)` | Send event callback (for humanVerify, cardCallBack, etc.) |
+| `submitHumanVerify(data)` | Submit human verification result (convenience wrapper for sendEventCallback) |
+
+### UI Components
+
+| Component | Description |
+|-----|------|
+| `MarkdownRenderer` | Markdown rendering component (with interactions) |
+| `MessageBubble` | Message bubble component |
+| `RichMessageBubble` | Rich text message bubble component |
+| `DocReferences` | Document references component |
+| `WebSearchPanel` | Web search results panel |
+| `HumanVerify` | Human verification form component |
+| `HistoryCard` | History card component for approval records |
+| `CustomParamsRenderer` | Custom parameters renderer component |
+
+### Markdown Components
+
+| Component | Description |
+|-----|------|
+| `MarkdownView` | Core Markdown rendering component, supports code highlighting, math formulas, charts, etc. |
+
+### Core Components
+
+| Component | Description |
+|-----|------|
+| `BubbleContent` | Core bubble content component |
+| `RichBubbleContent` | Core rich text bubble content component |
+| `SourceContent` | Core reference content component |
+| `WebSearchContent` | Core web search content component |
+
+## Project Structure
+
+```
+src/
+├── index.ts                 # Entry file
+├── services/
+│   └── ChatService.ts       # Chat service
+├── components/              # SDK components (simplified interface)
+│   ├── MarkdownRenderer.tsx
+│   ├── MessageBubble.tsx
+│   ├── RichMessageBubble.tsx
+│   ├── DocReferences.tsx
+│   ├── WebSearchPanel.tsx
+│   └── HumanVerify/         # Human verification components
+│       ├── HumanVerify.tsx
+│       ├── HistoryCard.tsx
+│       └── CustomParamsRenderer/
+├── core/                    # Core components (pure display)
+│   ├── BubbleContent.tsx
+│   ├── RichBubbleContent.tsx
+│   ├── SourceContent.tsx
+│   └── WebSearchContent.tsx
+├── markdown/                # Markdown rendering
+│   ├── index.tsx            # MarkdownView component
+│   └── ...
+├── hooks/
+│   └── usePreSignUpload.ts
+└── utils/
+    └── loadEcharts.ts
+```
+
+## License
+
+MIT