# @ant-design/pro-chat 中文文档

规范地址：https://npmcn.com/package/%40ant-design/pro-chat/

版本：1\.15\.3
npm 元数据更新时间：2026-04-02T03:57:55.780Z
中文译文更新时间：2026-11-06T06:04:31.257Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40ant-design/pro-chat
原文对照：https://npmcn.com/package/%40ant-design/pro-chat/?lang=original
项目主页：https://github.com/ant-design/pro-chat
源码仓库：https://github.com/ant-design/pro-chat

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：381 kB，281 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：21 个
- peer 依赖：antd ^5，react ^18，antd-style ^3
- 首次发布：2023-10-20T04:22:39.648Z
- 最新版本发布：2024-10-15T07:01:17.397Z
- 近 30 天下载量：4896（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：115（近 12 个月 0 个）

## 中文简介

ai 聊天的解决方案

## 安装

```sh
npm install @ant-design/pro-chat
```

也可以使用：`pnpm add @ant-design/pro-chat`、`yarn add @ant-design/pro-chat`、`bun add @ant-design/pro-chat`

## README

![](https://gw.alipayobjects.com/zos/kitchen/wzToJwlSw%24/logo.svg) ![](https://gw.alipayobjects.com/zos/kitchen/qJ3l3EPsdW/split.svg) ![](https://mdn.alipayobjects.com/huamei_re70wt/afts/img/A*Mo27Sr3kS4kAAAAAAAAAAAAADmuEAQ/original)

# ProChat 语录

快速构建 LLM 聊天界面组件库 .

[![](https://img.shields.io/npm/v/@ant-design/pro-chat?color=1677FF&labelColor=black&logo=npm&logoColor=white&style=flat-square)](https://www.npmjs.com/package/@ant-design/pro-chat) [![](https://img.shields.io/npm/dt/@ant-design/pro-chat?labelColor=black&style=flat-square&color=1677FF)](https://www.npmjs.com/package/@ant-design/pro-chat) [![](https://img.shields.io/github/release-date/ant-design/pro-chat?color=1677FF&labelColor=black&style=flat-square)](https://github.com/ant-design/pro-chat/releases) [![](https://img.shields.io/github/actions/workflow/status/ant-design/pro-chat/test.yml?color=1677FF&label=test&labelColor=black&logo=githubactions&logoColor=white&style=flat-square)](https://github.com/ant-design/pro-chat/actions/workflows/test.yml) [![](https://img.shields.io/github/actions/workflow/status/ant-design/pro-chat/release.yml?color=1677FF&label=release&labelColor=black&logo=githubactions&logoColor=white&style=flat-square)](https://github.com/ant-design/pro-chat/actions/workflows/release.yml) [![](https://img.shields.io/codecov/c/github/ant-design/pro-chat?color=1677FF&labelColor=black&style=flat-square&logo=codecov&logoColor=white)](https://codecov.io/gh/ant-design/pro-chat)  
[![](https://img.shields.io/github/contributors/ant-design/pro-chat?color=1677FF&labelColor=black&style=flat-square)](https://github.com/ant-design/pro-chat/graphs/contributors) [![](https://img.shields.io/github/forks/ant-design/pro-chat?color=1677FF&labelColor=black&style=flat-square)](https://github.com/ant-design/pro-chat/network/members) [![](https://img.shields.io/github/stars/ant-design/pro-chat?color=1677FF&labelColor=black&style=flat-square)](https://github.com/ant-design/pro-chat/network/stargazers) [![](https://img.shields.io/github/issues/ant-design/pro-chat?color=1677FF&labelColor=black&style=flat-square)](https://github.com/ant-design/pro-chat/issues) [![](https://img.shields.io/github/license/ant-design/pro-chat?color=1677FF&labelColor=black&style=flat-square)](https://github.com/ant-design/pro-chat/blob/main/LICENSE)  
[![](https://img.shields.io/badge/-Ant%20Design-1677FF?labelColor=black&logo=antdesign&style=flat-square)](https://ant.design/) [![](https://img.shields.io/badge/docs%20by-dumi-blue?color=1677FF&labelColor=black&style=flat-square)](https://d.umijs.org/) [![](https://img.shields.io/badge/build%20with-father-028fe4.svg?color=1677FF&labelColor=black&style=flat-square)](https://github.com/umijs/father)

英语 [简体中文](https://npmcn.com/package/%40ant-design/pro-chat/README.zh-CN.md) • 妇女 [更改日志](https://npmcn.com/package/%40ant-design/pro-chat/CHANGELOG.md) 。 。 。 . [报告错误](https://github.com/ant-design/pro-chat/issues) • 妇女 [请求特性](https://github.com/ant-design/pro-chat/issues)

![](https://gw.alipayobjects.com/zos/kitchen/Aa%2452FxhWU/pro-chat.webp)

目录

#### 技选

-   [\* 安装](https://npmcn.com/package/%40ant-design/pro-chat/#readme--installation)
    -   [由 Next.js 编译](https://npmcn.com/package/%40ant-design/pro-chat/#readme-compile-with-nextjs)
-   [使用量](https://npmcn.com/package/%40ant-design/pro-chat/#readme--usage)
-   [\* 特性](https://npmcn.com/package/%40ant-design/pro-chat/#readme--features)
-   [显示大小写](https://npmcn.com/package/%40ant-design/pro-chat/#readme--showcase)
-   [QQ 浏览器兼容性](https://npmcn.com/package/%40ant-design/pro-chat/#readme--browser-compatibility)
-   [地方发展](https://npmcn.com/package/%40ant-design/pro-chat/#readme-%EF%B8%8F-local-development)
-   [捐款](https://npmcn.com/package/%40ant-design/pro-chat/#readme--contributing)
-   [生态系统](https://npmcn.com/package/%40ant-design/pro-chat/#readme-%EF%B8%8F-ecosystem)

## \* 安装

> \[大
> 
> 这个软件包是 [仅限无害环境管理](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c)。 。 。 .

要安装 `@ant-design/pro-chat`,运行以下命令:

```bash
$ pnpm install @ant-design/pro-chat
```

默认 `auto-install-peers` 以 pnpm 为单位 `true`。如果使用其他软件包管理器,可能需要安装 `antd` 财务报告和审定财务报表 `antd-style` 分别.

### 由 Next.js 编译

如果您在使用 Next.js 时有错误, 请检查 [这里](https://pro-chat.antdigital.dev/en-US/guide/nextjs#frequently-asked-questions)。 。 。 .

## 使用量

```jsx
import { ProChat } from '@ant-design/pro-chat';

export default () => (
  <ProChat
    request={async (messages) => {
      // Send a request with Message as the parameter
      return Message; // Supports both streaming and non-streaming
    }}
  />
);
```

  

## \* 特性

> \[注\]
> 
> ProChat专注于快速建立大型语言模型聊天对话框架. 它旨在增强开发者的能力,以方便地创建丰富,有活力和直观的聊天界面.

[![](https://next.ossinsight.io/widgets/official/compose-activity-trends/thumbnail.png?repo_id=707504998&image_size=auto&color_scheme=dark)](https://next.ossinsight.io/widgets/official/compose-activity-trends?repo_id=707504998)

**聊天接口组件的框架和解决方案:**

-   🔄 **自动聊天缓存**:保持对话连续性,不作任何额外努力,确保用户体验平稳.
-   💬 **简化对话**:提供不同对话风格的选择,满足不同的用户偏好.
-   ✏️ **信件编辑特性**:提供一套编辑工具,包括请求重做,编辑组合,并删除,用于精确的谈话控制.
-   📖 **自动降级**:提供丰富的文本体验,通过将Markdown转换为优美格式化的信息来浸润用户.
-   🎚️ **程序控制(参考)**:精确地命令聊天流出,使开发人员能够创建定制的对话体验.

  

**设计进化/ 进行中**

-   [ ] **自定义带有编辑能力的对话框渲染** - 说吧 [问题21](https://github.com/ant-design/pro-chat/issues/21)
-   [ ] **增强请求参数** - 向您的请求注入额外参数的力量在望
-   [ ] **个性化错误处理** - 为这些出人意料的时刻而制作独特的倒置和配置
-   [ ] **扩大的文件和全球化** - 获得全面指南和国际支持,以获得真正无边界的经验
-   [ ] **原子组件设计** - 设想一种既简单又多用途的模块化设计方法

  

## 显示大小写

让我们展示一下ProChat的一些签名特征:

| **精简对话框** | **内容编辑器** |
| --- | --- |
| 参与像河流一样自然流畅的简化对话 | 完善,重塑,并完善您与允许实时编辑的工具的对话. |
| ![](https://mdn.alipayobjects.com/huamei_re70wt/afts/img/A*0uQhSIzSS3YAAAAAAAAAAAAADmuEAQ/original) | ![](https://mdn.alipayobjects.com/huamei_re70wt/afts/img/A*wVSCTb7bq8UAAAAAAAAAAAAADmuEAQ/original) |
| **综合渲染器** |  |
| 潜入生动活泼的世界 与我们的Built -in Render, 一个工具 设计给文字生命. |  |
| ![](https://mdn.alipayobjects.com/huamei_re70wt/afts/img/A*e4JbQKfupVQAAAAAAAAAAAAADmuEAQ/original) |  |

  

## QQ 浏览器兼容性

> \[注\]
> 
> -   现代浏览器和Internet Explorer 11(与 [多元填充器](https://stackoverflow.com/questions/57020976/polyfills-in-2019-for-ie11)(中文(简体) )
> -   [电子](https://www.electronjs.org/)

| [![edge](https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png)](http://godban.github.io/browsers-support-badges/) | [![Edge](https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png)](http://godban.github.io/browsers-support-badges/) | [![chrome](https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png)](http://godban.github.io/browsers-support-badges/) | [![safari](https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png)](http://godban.github.io/browsers-support-badges/) | [![electron\_48x48](https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png)](http://godban.github.io/browsers-support-badges/) |
| --- | --- | --- | --- | --- |
| 边缘 | 上两个版本 | 上两个版本 | 上两个版本 | 上两个版本 |

  

## 地方发展

您可以使用 Github 代码空间进行在线开发 :

[![](https://github.com/codespaces/badge.svg)](https://codespaces.new/ant-design/pro-chat)

或者复制它用于本地发展:

```bash
$ git clone https://github.com/ant-design/pro-chat.git
$ cd pro-chat
$ pnpm install
$ pnpm dev
```

  

## 捐款

> \[大
> 
> 加入我们的合作生态系统。 你的贡献是我们项目的心跳。 这就是你如何成为我们充满生机的社区的一个组成部分:

-   **整合和创新**:将Ant Design Pro, umi, ProChat 纳入您的项目中. 你的用法和反馈对我们来说是宝贵的.
-   **声音你的洞察力**\-遇到故障了吗? 有问题吗? 你的观点很重要 通过提交来分享 [问题](https://github.com/ant-design/pro-chat/issues) 帮助我们增强用户体验.
-   **塑造未来**:有代码增强或功能创意? 我们邀请你提议 [拖动请求](https://github.com/ant-design/pro-chat/pulls) 并直接促进我们代码库的发展.

每个贡献,无论大小,都会被庆祝. 加入我们的任务,完善和提升开放源码企业UI组件的世界

[![](https://img.shields.io/badge/%E2%9D%A4%EF%B8%8F%20PR%20WELCOME-%E2%86%92-1677FF?labelColor=black&style=for-the-badge)](https://github.com/ant-design/pro-chat/pulls)

[

|   
![](https://contrib.rocks/image?repo=ant-design/pro-chat)  
  
 |
| --- |
| ![](https://next.ossinsight.io/widgets/official/compose-org-active-contributors/thumbnail.png?activity=active&period=past_28_days&owner_id=12101536&repo_ids=707504998&image_size=2x3&color_scheme=dark) | ![](https://next.ossinsight.io/widgets/official/compose-org-participants-growth/thumbnail.png?activity=active&period=past_28_days&owner_id=12101536&repo_ids=707504998&image_size=4x7&color_scheme=dark) |
| ![](https://next.ossinsight.io/widgets/official/compose-org-active-contributors/thumbnail.png?activity=new&period=past_28_days&owner_id=12101536&repo_ids=707504998&image_size=2x3&color_scheme=dark) |

](https://github.com/ant-design/pro-chat/graphs/contributors)  

## 生态系统

-   **[亲组件](https://github.com/ant-design/pro-components)** - 为企业级应用程序设计,像Pro一样使用蚂蚁设计.
-   **[编辑器](https://github.com/ant-design/pro-editor)** - 最终编辑器UI框架和组件.
-   **[前进](https://github.com/ant-design/pro-flow)** - React-Flow上的流程编辑框架基础.
-   **[ProChat 语录](https://github.com/ant-design/pro-chat)** - 用于快速构建 LLM 聊天界面的组件库.

  

* * *

#### 许可证

版权2023年至今 [亚足联](https://ant.design/) 打开 [蚂蚁数码](https://antdigital.com/)。 。 。 .  
这个项目是 [麻省理工学院](https://npmcn.com/package/%40ant-design/pro-chat/LICENSE) 有执照.

## 常见问题

### @ant-design/pro-chat 是什么？

ai 聊天的解决方案

### 如何安装 @ant-design/pro-chat？

在项目目录运行 npm install @ant-design/pro-chat，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：antd（^5）、react（^18）、antd-style（^3）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @ant-design/pro-chat 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @ant-design/pro-chat 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @ant-design/pro-chat 可以商用吗？

@ant-design/pro-chat 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @ant-design/pro-chat 的下载量有多少？

根据 npm 官方下载统计，@ant-design/pro-chat 在 2026/10/06 – 2026/11/04 这 30 天内被下载 4,896 次，日均约 163 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @ant-design/pro-chat 还在维护吗？

最新版本 1\.15\.3 发布于 2024/10/15（2 年前）；至今共发布 115 个版本，其中过去 12 个月发布了 0 个；首次发布于 2023/10/20。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。