🎉 Ant Design X 2.0 正式发布了 🎉

[English](https://github.com/ant-design/x/issues/1357) | 中文

## 引言

<img width="2844" height="1178" alt="Image" src="https://mdn.alipayobjects.com/huamei_lkxviz/afts/img/NSOtQq5AwOcAAAAAfKAAAAgADtFMAQFr/fmt.webp" />

自去年11月22日 Ant Design X 1.0 发布以来，不少同学都选择 X 来开发 AI 应用，再次表达感谢，毕竟AI发展迅速、变化万千，在 X 落地过程中也发现不少需要优化的地方，同时结合社区同学的 ISSUES，在今年4月份我们开始规划 X 2.0 版本。今天，我们宣布Ant Design X V2 正式发布！
本次升级的重点为：1、底层依赖升级 Ant Design V6，同时将伴随 React 19 以及 CSS Variables 样式架构的升级。2、Ant Design X 2.0  升级为 monorepo 架构，拆分成三个子包：@ant-design/x、@ant-design/x-markdown、@ant-design/x-sdk，因此 Ant Design X 将升级为搭建AI应用的工具集。

**如果你的项目需要使用Ant Design X 2.0 :** 
- 需要将 Ant Design 升级到 v6 版本，React 最好可以升级到 19（版本兼容提升至 React 18）。
- V1 分支将切换至 v1.x-stable 进入半年维护周期，除非出现特别严重的 Bug，我们不会再对 V1 进行功能性更新。V1版本文档地址：https://1x-ant-design-x.antgroup.com/

<img width="2872" height="1606" alt="Image" src="https://mdn.alipayobjects.com/huamei_lkxviz/afts/img/KzcJQLZw0jAAAAAAR9AAAAgADtFMAQFr/fmt.webp" />

# 技术升级
## Ant Design 依赖升级到 V6，详情请看[从 v5 到 v6](https://ant.design/docs/react/migration-v6-cn)

Ant Design 进行 V6 版本的升级请看：

- 🌈 纯 CSS Variables 样式架构
-  🚫 不再支持 IE 
- 🧩 全量组件语义化结构
- ⚛ React 最低版本要求提升至 18

# 新特性与功能增强
## 核心 UI 组件库（@ant-design/x）

> 基于 RICH 范式的 React UI 组件库，提供开箱即用的智能对话界面组件，提供原子化组件，支持灵活组合。
> - 支持 TypeScript 
> - 组件语义化结构
> - 国际化定制
> - 深度主题定制

### 🔥 Bubble 组件全面升级
1、Bubble 和 Bubble.List 全面重构，Bubble 新增各种变体与形状、扩展渲染、流式渲染、渲染动画、可编辑气泡等能力，Bubble.List 新增全面的可控制的内容滚动等能力。

<img width="1088" height="630" alt="Image" src="https://mdn.alipayobjects.com/huamei_lkxviz/afts/img/AND7Q4LvhRwAAAAAgEAAAAgADtFMAQFr/original" />

2、新增  Bubble.System 和 Bubble.Divider 子消息组件

<img width="1046" height="646" alt="Image" src="https://mdn.alipayobjects.com/huamei_lkxviz/afts/img/bJFTS5nfsJYAAAAAgCAAAAgADtFMAQFr/original" />

### 🔥 Sender 输入框组件全面升级
1、词槽模式上线，可定制各种功能，提供多个操作方法

<img width="1162" height="242" alt="Image" src="https://mdn.alipayobjects.com/huamei_lkxviz/afts/img/5-LfSLdKpQ0AAAAAV4AAAAgADtFMAQFr/original" />

2、删除  actions 配置，扩展为 header、footer、prefix、suffix 四个位置配置。

<img width="1812" height="338" alt="Image" src="https://mdn.alipayobjects.com/huamei_lkxviz/afts/img/Q4NDRK-FdlYAAAAAQbAAAAgADtFMAQFr/fmt.webp" />

<img width="1820" height="554" alt="Image" src="https://mdn.alipayobjects.com/huamei_lkxviz/afts/img/GKAQT4MS2WIAAAAAQeAAAAgADtFMAQFr/original" />

### 🔥 ThoughtChain 思维链组件全面升级
1、视觉交互升级：更符合长程任务执行流程。

<img width="400" alt="Image" src="https://mdn.alipayobjects.com/huamei_lkxviz/afts/img/kwoRQ5JA6qIAAAAAQkAAAAgADtFMAQFr/original" />

2、新增简单思维链 ThoughtChain.Item，多种类型和状态可供选择。

<img width="1042" height="356" alt="Image" src="https://mdn.alipayobjects.com/huamei_lkxviz/afts/img/TUr1SYlM8vQAAAAASEAAAAgADtFMAQFr/original" />

### 🔥 FileCard 文件卡片
1、新增 FileCard 组件，可用于渲染各种文件卡片，图片、视频、音频文件的多种渲染形式。

<img width="1778" height="748" alt="Image" src="https://mdn.alipayobjects.com/huamei_lkxviz/afts/img/CIfLRpDl2FMAAAAAREAAAAgADtFMAQFr/original" />

<img width="350"  alt="Image" src="https://mdn.alipayobjects.com/huamei_lkxviz/afts/img/TLeTRKf3nbYAAAAAQbAAAAgADtFMAQFr/fmt.webp" />

<img width="350" height="1052" alt="Image" src="https://mdn.alipayobjects.com/huamei_lkxviz/afts/img/zSFdQbumohUAAAAAQ3AAAAgADtFMAQFr/fmt.webp" />

2、文件列表渲染也不在话下。

<img width="1798" height="640" alt="Image" src="https://mdn.alipayobjects.com/huamei_lkxviz/afts/img/8VBVSJioToYAAAAARZAAAAgADtFMAQFr/fmt.avif" />

3、以及专为多模态模型量身打造的图片加载能力（ gif 图效果不佳，请来官网查看）。

<img width="600" height="572" alt="Image" src="https://mdn.alipayobjects.com/huamei_lkxviz/afts/img/090mQb6_uDYAAAAAWqAAAAgADtFMAQFr/original" />

### 🆕 Think 思考过程组件
新增 Think 思考过程组件，配合 X Markdown 使用效果更佳。

<img width="532" height="256" alt="Image" src="https://mdn.alipayobjects.com/huamei_lkxviz/afts/img/_HAhRpeidU0AAAAAQ_AAAAgADtFMAQFr/original" />

### 🆕 Sources 来源引用组件
新增 Sources 来源引用组件，配合 X Markdown 使用效果更佳（ gif 图效果不佳，请来官网查看）。

<img width="540" height="256" alt="Image" src="https://mdn.alipayobjects.com/huamei_lkxviz/afts/img/bJ35QJ06mdcAAAAAQ0AAAAgADtFMAQFr/original" />

<img width="690" height="360" alt="Image" src="https://mdn.alipayobjects.com/huamei_lkxviz/afts/img/2wp9Q4jB1WkAAAAAR-AAAAgADtFMAQFr/original" />

### 🆕 Notification 系统通知组件

系统原生通知控制组件，提供发送通知、延迟关闭、指定通知关闭能力，同时提供 hook 调用能力和静态方法调用能力。

<img width="2874" height="1620" alt="Image" src="https://mdn.alipayobjects.com/huamei_lkxviz/afts/img/LMAtQrV3qRUAAAAASgAAAAgADtFMAQFr/fmt.avif" />

### 🆕 Actions 操作列表

1、新增预设能力： Copy 能力， Feedback 交互能力和 Audio 交互能力，以及自定义操作能力

<img width="600" height="256" alt="Image" src="https://mdn.alipayobjects.com/huamei_lkxviz/afts/img/_EeuR7eYTVUAAAAASyAAAAgADtFMAQFr/original" />

2、贴近大模型内容生成特性，新增渲染动画能力，包含左右渐变和渐变两种模式。

<img width="600" height="256" alt="Image" src="https://mdn.alipayobjects.com/huamei_lkxviz/afts/img/it9ATasS2R4AAAAARHAAAAgADtFMAQFr/original" />

### 🆕 Attachments 输入附件
新增分类型选择文件能力：同时设置 multiple 为 true 可以支持多选，设置 maxCount 可以限制最多选择的文件数量。
<img width="1796" height="388" alt="Image" src="https://mdn.alipayobjects.com/huamei_lkxviz/afts/img/yxuET7OG-2MAAAAAQEAAAAgADtFMAQFr/fmt.avif" />
### 🆕 Conversations 管理对话
优化分组能力、新增快捷键新增对话能力。
<img width="1304" height="498" alt="Image" src="https://mdn.alipayobjects.com/huamei_lkxviz/afts/img/z4zwSKv0nsoAAAAAQVAAAAgADtFMAQFr/original" />
### 🆕 XProvider
1、我们接入了组件国际化配置，目前默认支持中文和英文，当然你也可以提交需要的语言。
<img width="1846" height="990" alt="Image" src="https://mdn.alipayobjects.com/huamei_lkxviz/afts/img/mJV2QqWhQNkAAAAAQSAAAAgADtFMAQFr/fmt.webp" />
2、升级了主题配置：可以在 XProvider 为所有 Antd 组件、Antd X 组件、Antd X Markdown 组件配置  token，classname(s)，style(s)。
<img width="1824" height="1298" alt="Image" src="https://mdn.alipayobjects.com/huamei_lkxviz/afts/img/GUb4SL2loqgAAAAAQ3AAAAgADtFMAQFr/fmt.avif" />
3、可以为组件配置快捷键。
<img width="1834" height="644" alt="Image" src="https://mdn.alipayobjects.com/huamei_lkxviz/afts/img/j9sBQZinX2IAAAAAQNAAAAgADtFMAQFr/original" />
## 高性能 Markdown 流式渲染器（@ant-design/x-markdown）
> 专为 AI 流式场景打造的高性能 Markdown 渲染器。
### 🔥 流式语法处理
支持缓存未完成的 Markdown 语法和补全未完成的 Markdown 语法。
<img width="1762" height="1080" alt="Image" src="https://mdn.alipayobjects.com/huamei_lkxviz/afts/img/iNu5SaF3FrwAAAAAgDAAAAgADtFMAQFr/original" />

### 🔥 流式动画

![](https://mdn.alipayobjects.com/huamei_lkxviz/afts/img/xPX8S7rummAAAAAAgFAAAAgADtFMAQFr/original)

### 🔥 组件

<img width="1762" height="1080" alt="Image" src="https://mdn.alipayobjects.com/huamei_lkxviz/afts/img/9s9sTYEgGpsAAAAAgCAAAAgADtFMAQFr/original" />

### 🔥 插件集

XMarkdown 内置 LaTeX、Mermaid、代码高亮，并暴露 Marked 钩子，插件开箱即用，也可一键自定义。
#### Latex
<img width="2810" height="1550" alt="Image" src="https://mdn.alipayobjects.com/huamei_lkxviz/afts/img/V4fWSqdbR38AAAAAQuAAAAgADtFMAQFr/original" />

#### Mermaid

<img width="1472" height="1584" alt="Image" src="https://mdn.alipayobjects.com/huamei_lkxviz/afts/img/PuVqRpybMRkAAAAAQbAAAAgADtFMAQFr/fmt.webp" />

#### 代码高亮

<img width="1666" height="1700" alt="Image" src="https://mdn.alipayobjects.com/huamei_lkxviz/afts/img/S9rQTIyomxYAAAAARTAAAAgADtFMAQFr/original" />

#### 自定义插件

<img width="2330" height="1280" alt="Image" src="https://mdn.alipayobjects.com/huamei_lkxviz/afts/img/IvQbRZNPRsoAAAAAQqAAAAgADtFMAQFr/original" />
## 数据流与 SDK 工具（@ant-design/x-sdk）
> 提供管理 AI 对话应用数据流的工具 API。

### 🔥 useXChat

> 通过 Agent 进行会话数据管理，并产出供页面渲染使用的数据。

<img width="1302" height="662" alt="Image" src="https://mdn.alipayobjects.com/huamei_lkxviz/afts/img/dwodS5RmvY4AAAAAURAAAAgADtFMAQFr/original" />

### 🔥 useXConversations

提供会话列表管理，多会话保持，包括会话创建、删除、更新等操作能力。

<img width="690" height="360" alt="Image" src="https://mdn.alipayobjects.com/huamei_lkxviz/afts/img/b0sgT66WTlQAAAAARhAAAAgADtFMAQFr/original" />

<img width="840" height="464" alt="Image" src="https://mdn.alipayobjects.com/huamei_lkxviz/afts/img/b0sgT66WTlQAAAAARhAAAAgADtFMAQFr/original" />

### 🔥 Chat Provider

内置了 DefaultChatProvider、OpenAIChatProvider、DeepSeekChatProvider 三个数据处理，同时可以自定义 Chat Provider 满足各种模型或者 agent 调用。

###  🏗️ XRequest 和 XStream
将流请求和流处理迁移到 X-SDK。

# 升级指南
- 确保 Ant Design 升级为 V6 版本。
- 确保项目运行在 React 18 或更高版本。
- @ant-design/x 相关升级。
- - 我们对 Sender、ThoughtChain、Bubble 这三个组件进行了UI层面以及功能的全面升级，同时需要你参考应用页面设计来选取使用，因此无法使用统一工具兼容升级，但我们仍有一份[文档](https://x.ant-design-x/docs/react/migration-v2-cn)可以帮助您升级。
 - - v2版本已将 Tools 相关内容迁移到了 @ant-design/x-sdk，同时删除了 useXAgent，建议直接使用新的 useXChat，更多功能可看 [X-SDK 官网文档](https://x.ant.design/x-sdks/introduce-cn)。
- 不再支持 IE。

# 未来计划
-  基于 X 的 AI 应用脚手架 X-Pro。
-  AI应用内容生成规范以及接入方案 ：x-card ，目前还在设计中具体内容后续会在 [X Discussions](https://github.com/ant-design/x/discussions) 发布。
-  根据不同的模型厂商提供更多内置的 Chat Provider。
-  更多组件功能支持快捷键触发。
-  此外还有一些新的组件：GenScroller（生成式滚动）、Artifacts（微型浏览器）等正在开发中，敬请期待。
# 写在最后
感谢为 Ant Design X 2.0 付出的各位朋友。 —— 因为你们的参与，开源才如此美好。
[Chuck-Ray](https://github.com/Chuck-Ray)
[Div627](https://github.com/Div627)
[hy993658052](https://github.com/hy993658052)
[kimteayon](https://github.com/kimteayon)
[Rain120](https://github.com/Rain120)
[vanndxh](https://github.com/vanndxh)
[afc163](https://github.com/afc163)
[anxLiang](https://github.com/anxLiang)
[IsDyh01](https://github.com/IsDyh01)
[elrrrrrrr](https://github.com/elrrrrrrr)
[hylin](https://github.com/hylin)
[iamkun-2](https://github.com/iamkun-2)
[coding-ice](https://github.com/anxLiang)
[yuguaa](https://github.com/yuguaa)
[fireairforce](https://github.com/fireairforce)

Uh oh!

🎉 Ant Design X 2.0 正式发布了 🎉 #1358

Description

引言

技术升级

Ant Design 依赖升级到 V6，详情请看从 v5 到 v6

新特性与功能增强

核心 UI 组件库（@ant-design/x）

🔥 Bubble 组件全面升级

🔥 Sender 输入框组件全面升级

🔥 ThoughtChain 思维链组件全面升级

🔥 FileCard 文件卡片

🆕 Think 思考过程组件

🆕 Sources 来源引用组件

🆕 Notification 系统通知组件

🆕 Actions 操作列表

🆕 Attachments 输入附件

🆕 Conversations 管理对话

🆕 XProvider

高性能 Markdown 流式渲染器（@ant-design/x-markdown）

🔥 流式语法处理

🔥 流式动画

🔥 组件

🔥 插件集

Latex

Mermaid

代码高亮

自定义插件

🔥 useXChat

🔥 useXConversations

🔥 Chat Provider

🏗️ XRequest 和 XStream

升级指南

未来计划

写在最后

Metadata

Metadata

Assignees

Labels

Type

Fields

Projects

Milestone

Relationships

Development

Issue actions