前言

新用户请直接使用 ant-design/x

一些道歉和想说的：https://github.com/ant-design/pro-chat/issues/340

目录

目录

• 📦 安装
  • 使用 Next.js 编译
• 🔨 使用
• ✨ 特性
• 👀 展示
• 🖥 浏览器兼容性
• ⌨️ 本地开发
• 🤝 贡献
• 🛣️ 生态系统

📦 安装

[!IMPORTANT]

本包仅支持 ESM 格式（详见：gist）。

要安装 @ant-design/pro-chat，请运行以下命令：

$ pnpm install @ant-design/pro-chat

pnpm 默认会自动安装依赖项。如果您使用其他包管理工具，则可能需要单独安装 antd 和 antd-style。

使用 Next.js 编译

如果您在使用 Next.js 时遇到问题，请参阅此处。

🔨 使用

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

export default () => (
  <ProChat
    request={async (messages) => {
      // 以 Message 对象作为参数发送请求
      return Message; // 支持流式与非流式响应
    }}
  />
);

✨ 特性

[!NOTE]

ProChat 致力于快速搭建大型语言模型聊天对话框架，旨在帮助开发者轻松创建丰富、动态且直观的聊天界面。

聊天界面组件框架与解决方案：

• 🔄 自动聊天缓存：无需额外操作即可保持对话连续性，确保流畅的用户体验。
• 💬 流式对话：提供多种对话风格供选择，满足不同用户的偏好。
• ✏️ 消息编辑功能：配备请求重做、组合编辑和删除等工具，实现精准的对话控制。
• 📖 自动渲染 Markdown：将 Markdown 转换为格式精美的消息，带来沉浸式的富文本体验。
• 🎚️ 程序化控制（Ref）：精确指挥聊天流程，让开发者打造个性化的对话体验。

设计演进 / 进行中

• 具备编辑能力的自定义对话渲染 - issue/21
• 增强的请求参数 - 未来将支持在请求中注入更多参数
• 个性化错误处理 - 可为意外情况定制独特的回退方案和配置
• 扩展文档与国际化 - 提供全面指南和多语言支持，实现真正的无国界体验
• 原子化组件设计 - 预计采用模块化设计方法，兼具简洁性和灵活性。

👀 展示

让我们展示一下 ProChat 的几项特色功能：

流式对话	内容编辑器
体验如河流般自然流畅的流式对话	使用实时编辑工具，精细调整并完善您的对话内容。
集成渲染
通过内置渲染功能，进入生动的聊天世界，让文字跃然眼前。

🖥 浏览器兼容性

[!NOTE]

• 现代浏览器及 Internet Explorer 11（需配合 polyfills）
• Electron

Edge	最近两个版本	最近两个版本	最近两个版本	最近两个版本

⌨️ 本地开发

您可以通过 Github Codespaces 进行在线开发：

或者克隆代码库进行本地开发：

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

🤝 贡献

[!IMPORTANT]

加入我们的协作生态系统。您的贡献是我们项目的脉搏。以下是如何成为我们充满活力的社区不可或缺的一部分：

• 集成与创新：将 Ant Design Pro、umi 和 ProChat 集成到您的项目中。您在实际使用中的反馈对我们来说至关重要。
• 分享您的见解：遇到问题了吗？有疑问吗？您的观点很重要。请通过提交 issues 与我们分享，帮助我们提升用户体验。
• 塑造未来：是否有代码改进或功能建议？我们诚邀您提出 pull requests，直接参与代码库的演进。

无论大小，每一份贡献都值得庆祝。加入我们，共同致力于完善和提升开源企业级 UI 组件的世界。 😃

🛣️ 生态系统

• ProComponents - 专为企业级应用设计，像专业人士一样使用 Ant Design！
• ProEditor - 最强大的编辑器 UI 框架和组件。
• ProFlow - 基于 React-Flow 的流程编辑器框架。
• ProChat - 用于快速构建 LLM 聊天界面的组件库。

---

📝 许可证

版权所有 © 2023 - 至今 AFX & Ant Digital。
本项目采用 MIT 许可证。

ProChat 快速上手指南

ProChat 是一个用于快速构建大语言模型（LLM）聊天界面的组件库，基于 Ant Design 生态，帮助开发者轻松创建丰富、动态且直观的对话应用。

环境准备

在开始之前，请确保你的开发环境满足以下要求：

• Node.js: 建议使用 LTS 版本（支持 ESM 模块）。
• 包管理器: 推荐使用 pnpm（默认配置最友好），也可使用 npm 或 yarn。
• 前置依赖:
  • 该包仅支持 ESM 模式。
  • 若不使用 pnpm，可能需要手动安装 peer dependencies：antd 和 antd-style。
• 浏览器兼容性: 支持现代浏览器（Edge, Firefox, Chrome, Safari 最近 2 个版本）及 Electron。

安装步骤

推荐使用 pnpm 进行安装，它将自动处理关联依赖：

pnpm install @ant-design/pro-chat

如果你使用的是 npm 或 yarn，请确保同时安装必要的依赖：

# npm 示例
npm install @ant-design/pro-chat antd antd-style

# yarn 示例
yarn add @ant-design/pro-chat antd antd-style

注意：如果你在 Next.js 项目中遇到编译错误，请参考官方文档中关于 Next.js 的特定配置指南。

基本使用

引入 ProChat 组件并配置 request 属性即可快速启动一个聊天界面。request 函数接收消息历史列表，并返回后端响应（支持流式和非流式）。

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

export default () => (
  <ProChat
    request={async (messages) => {
      // 以 messages 为参数发送请求
      // 此处模拟返回，实际开发中请替换为你的 API 调用
      return "Hello! I am ProChat."; 
      // 支持返回 Stream 对象实现打字机效果
    }}
  />
);

核心功能概览：

• 自动缓存：无需额外配置，自动维持对话上下文。
• 消息编辑：支持对已发送消息进行编辑、重试或删除。
• Markdown 渲染：内置 Markdown 解析，完美展示代码块和富文本。
• 编程式控制：通过 Ref 精确控制聊天流程。