Appflow Chat SDK

AI chatbot component library providing chat services and UI components.

中文文档

Installation

Basic Installation

npm install @alicloud/appflow-chat

Install Peer Dependencies

This SDK requires the following peer dependencies. Please ensure they are installed in your project:

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

import { chatService } from '@alicloud/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

// 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

import { MessageBubble, RichMessageBubble } from '@alicloud/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

import { MarkdownView } from '@alicloud/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)

import { BubbleContent, SourceContent } from '@alicloud/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