TDesign Chat

https://tdesign.tencent.com/chat
Admin
TDesign Chat is a Vue component library for building AI chat interfaces that supports custom...
Tokens:3,513
Snippets:49
Trust Score:10
Update:3 months ago
Show doc for...
Tokens:
Raw
### Install with npm

Source: https://tdesign.tencent.com/chat

Use npm to install the TDesign Vue Next Chat component library.

```bash
npm i @tdesign-vue-next/chat
```

--------------------------------

### Setup for Auto-Import Plugins (npm)

Source: https://tdesign.tencent.com/chat

Install necessary packages for automatic component and import resolution using `unplugin-vue-components` and `unplugin-auto-import`. This setup is for npm users.

```bash
npm install -D @tdesign-vue-next/auto-import-resolver unplugin-vue-components unplugin-auto-import
```

--------------------------------

### Install with yarn

Source: https://tdesign.tencent.com/chat

Use yarn to install the TDesign Vue Next Chat component library.

```bash
yarn add @tdesign-vue-next/chat
```

--------------------------------

### Install with pnpm

Source: https://tdesign.tencent.com/chat

Use pnpm to install the TDesign Vue Next Chat component library.

```bash
pnpm add @tdesign-vue-next/chat
```

--------------------------------

### Custom Backend SSE Responses

Source: https://tdesign.tencent.com/chat

Example SSE responses from a custom backend API for chat messages. These are used when integrating with existing services or custom data structures.

```text
data: {"type": "think", "content": "正在分析您的问题..."}
data: {"type": "text", "content": "我是**腾讯云**助手"}
data: {"type": "text", "content": "很高兴为您服务！"}
```

--------------------------------

### AG-UI Standard Protocol Backend Responses

Source: https://tdesign.tencent.com/chat

Example SSE responses adhering to the AG-UI standard protocol. This protocol supports advanced features like tool invocation and state management.

```text
data: {"type": "RUN_STARTED", "runId": "run_456"}
data: {"type": "TEXT_MESSAGE_CONTENT", "delta": "正在处理您的请求..."}
data: {"type": "TOOL_CALL_START", "toolCallName": "search"}
data: {"type": "TOOL_CALL_RESULT", "content": "查询结果"}
data: {"type": "RUN_FINISHED", "runId": "run_456"}
```

--------------------------------

### Configure tsconfig.json for TDesign Chat Editor Hints

Source: https://tdesign.tencent.com/chat

Add `@tdesign-vue-next/chat/global` to the `compilerOptions.types` in your `tsconfig.json` to enable editor hints for TDesign chat components. This setup is recommended for VSCode users.

```json
{
  "compilerOptions": {
    "types": ["@tdesign-vue-next/chat/global"]
  }
}
```

--------------------------------

### Custom Protocol Frontend Configuration

Source: https://tdesign.tencent.com/chat

Configure the frontend to parse custom SSE data using the `onMessage` callback. This maps backend data to the component's required format.

```javascript
const chatServiceConfig = {
  endpoint: '/api/chat',
  onMessage: (chunk) => {
    const { type, content } = chunk.data;
    switch (type) {
      case 'text':
        return {
          type: 'markdown',
          data: content,
        };
      case 'think':
        return {
          type: 'thinking',
          data: {
            title: '思考中...',
            text: content,
          },
        };
      default:
        return null;
    }
  },
};
```

--------------------------------

### Basic Usage: Full Component Registration

Source: https://tdesign.tencent.com/chat

Import and use the Chat component by registering all components globally. This method is suitable for projects that extensively use components. Ensure to import the necessary CSS.

```javascript
import { createApp } from 'vue';
import App from './app.vue';
import TDesignChat from '@tdesign-vue-next/chat'; // 引入 Chat 组件

import '@tdesign-vue-next/chat/es/style/index.css';

const app = createApp(App);
app.use(TDesignChat);
```

--------------------------------

### AG-UI Protocol Frontend Configuration

Source: https://tdesign.tencent.com/chat

Configure the frontend to use the AG-UI protocol by setting the `protocol` option to 'agui'. This enables built-in support for AG-UI data conversion.

```javascript
const chatServiceConfig = {
  endpoint: '/api/agui/chat',
  protocol: 'agui', // 启用AG-UI协议
  stream: true,
};
```

--------------------------------

### On-Demand Usage: Importing Specific Components

Source: https://tdesign.tencent.com/chat

For projects with strict output size requirements, import individual components on demand. This leverages build tools like Webpack or Rollup for tree-shaking. Note that if using the theme generator, register components on demand in `main.ts`.

```javascript
import {
  ChatList as TChatList,
  ChatActionBar as TChatActionBar,
  ChatMarkdown as TChatMarkdown,
} from '@tdesign-vue-next/chat';
```

--------------------------------

### On-Demand Usage: Importing Global Styles

Source: https://tdesign.tencent.com/chat

When using on-demand imports and theme overrides, it's recommended to import a small set of global style variables in `main.ts`.

```javascript
import { createApp } from 'vue';
// 引入组件库的少量全局样式变量
import 'tdesign-vue-next/es/style/index.css';

const app = createApp(App);
```

--------------------------------

### Vite Configuration for Auto-Import

Source: https://tdesign.tencent.com/chat

Configure Vite to use `unplugin-auto-import` and `unplugin-vue-components` with `TDesignResolver` for automatic imports of TDesign Chat components. Ensure the `library` option is set to 'chat'.

```javascript
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { TDesignResolver } from '@tdesign-vue-next/auto-import-resolver';
export default {
  plugins: [
    // ...
    AutoImport({
      resolvers: [
        TDesignResolver({
          library: 'chat',
        }),
      ],
    }),
    Components({
      resolvers: [
        TDesignResolver({
          library: 'chat',
        }),
      ],
    }),
  ],
};
```

--------------------------------

### Basic Usage: Integrating with TDesign

Source: https://tdesign.tencent.com/chat

Combine TDesign Chat components with other TDesign components. This involves importing both TDesign and TDesignChat, along with their respective CSS files, and using them with the Vue app.

```javascript
import { createApp } from 'vue';
import App from './app.vue';
import TDesign from 'tdesign-vue-next';
import TDesignChat from '@tdesign-vue-next/chat'; // 引入 Chat 组件

import 'tdesign-vue-next/es/style/index.css'; // 引入少量全局样式变量
import '@tdesign-vue-next/chat/es/style/index.css';

const app = createApp(App);
app.use(TDesign).use(TDesignChat);
```

--------------------------------

### Webpack Configuration for Auto-Import

Source: https://tdesign.tencent.com/chat

Configure Webpack to use `unplugin-auto-import` and `unplugin-vue-components` with `TDesignResolver` for automatic imports of TDesign Chat components. Ensure the `library` option is set to 'chat'.

```javascript
const AutoImport = require('unplugin-auto-import/webpack');
const Components = require('unplugin-vue-components/webpack');
const { TDesignResolver } = require('@tdesign-vue-next/auto-import-resolver');
module.exports = {
  // ...
  plugins: [
    AutoImport.default({
      resolvers: [
        TDesignResolver({
          library: 'chat',
        }),
      ],
    }),
    Components.default({
      resolvers: [
        TDesignResolver({
          library: 'chat',
        }),
      ],
    }),
  ],
};
```
Tokens:
Raw