@ant-design/agentic-ui 2.29.15 → 2.29.16

package/README.md

@@ -1,251 +1,139 @@
-# Agentic UI - 面向智能体的 UI 组件库
+# Agentic UI
+
+<div align="center">
 
 [![NPM version](https://img.shields.io/npm/v/@ant-design/agentic-ui.svg?style=flat)](https://npmjs.org/package/@ant-design/agentic-ui)
 [![NPM downloads](http://img.shields.io/npm/dm/@ant-design/agentic-ui.svg?style=flat)](https://npmjs.org/package/@ant-design/agentic-ui)
+[![License](https://img.shields.io/npm/l/@ant-design/agentic-ui.svg)](https://npmjs.org/package/@ant-design/agentic-ui)
 
-> 从"回答一句话"到"完成一件事"——让智能体真正成为你的协作伙伴
-
-## ✨ 什么是 Agentic UI
+<p>面向智能体的 UI 组件库，提供多步推理可视化、工具调用展示、任务执行协同等 Agentic UI 能力。</p>
+<p>从“回答一句话”到“完成一件事”——让智能体真正成为你的协作伙伴。</p>
 
-**Agentic UI** 是一种面向"**思考—行动—观察**"闭环的智能体交互组件库，强调**任务执行全过程的协同**。
+</div>
 
-### 核心特性
+## ✨ 特性
 
-- 🤖 **多步推理可视化** - 展示智能体的思考、行动、观察过程
-- 🔧 **工具调用展示** - 可视化工具编排与执行状态
-- 👤 **人在回路** - 支持人工审批、干预或纠偏
-- 📊 **过程透明化** - 让 AI 决策过程可见、可控、可复盘
+- **🤖 多步推理可视化** - 清晰展示智能体的“思考—行动—观察”完整链路
+- **🔧 工具调用展示** - 可视化 API 调用、参数传递与执行结果
+- **🧠 智能体协同** - 支持任务分解、进度跟踪与人在回路（Human-in-the-loop）交互
+- **📝 流式 Markdown** - 支持打字机效果、数学公式、代码高亮与多模态输入
+- **🎨 开箱即用** - 基于 Ant Design 体系，提供完整的 TypeScript 类型定义
+- **🔌 插件化架构** - 灵活扩展图表、公式、代码格式化等能力
 
-### 与传统 Chat UI 的区别
+## 📦 安装
 
-| 维度       | Chat UI    | Agentic UI     |
-| ---------- | ---------- | -------------- |
-| 核心目标   | 回答一句话 | 完成一件事     |
-| 交互深度   | 单轮问答   | 端到端任务协同 |
-| 过程可见性 | 黑盒       | 透明化         |
-| 人机关系   | 被动响应   | 主动协作       |
+推荐使用 `npm` 或 `pnpm` 进行安装：
 
----
+```bash
+npm install @ant-design/agentic-ui
+# 或
+pnpm add @ant-design/agentic-ui
+# 或
+yarn add @ant-design/agentic-ui
+```
 
-## 🔄 交互范式演进
+## 🚀 快速开始
 
-### GUI vs LUI
+### 基础示例：AI 对话气泡
 
-**GUI**：用可视化控件逐步完成操作  
-**LUI**：用自然语言表达意图，系统解析并执行（常见为对话/命令式语言界面）
+展示一个包含思维链（Thought Chain）的 AI 回复气泡：
 
-| 对比维度           | GUI（传统界面）                          | LUI（语言界面）                                                  |
-| ------------------ | ---------------------------------------- | ---------------------------------------------------------------- |
-| **怎么操作**       | 点按钮、选菜单、填表单                   | 像聊天一样用自然语言说出你的需求                                 |
-| **交互方式**       | 一步步点，系统照做                       | 告诉目标，系统理解并帮你完成                                     |
-| **上手难度**       | 看得见的功能容易学，但界面复杂时难掌握   | 说话就行，但要说得清楚（比如"帮我订明天的会议室"比"订个会"更好） |
-| **功能好不好找**   | 功能都摆在界面上，一目了然               | 功能藏在对话里，需要提示或例子才知道能做什么                     |
-| **结果准不准**     | 点哪打哪，结果确定                       | 有时理解有偏差，可能需要你再解释一下                             |
-| **适合什么任务**   | 简单、明确的操作（如上传文件、开关设置） | 复杂或多条件的任务（如"找上周类似但更便宜的方案"）               |
-| **出错了怎么办**   | 可撤销、重试，操作步骤清晰               | 系统会问你确认，或让你修改说法                                   |
-| **能不能自动干活** | 得自己一步步点                           | 一句话就能触发一连串自动操作（比如查数据+发邮件）                |
+```tsx
+import { Bubble } from '@ant-design/agentic-ui';
 
-> **关键洞察**：GUI 的操作"翻译"为自然语言，仍是"人主导、系统执行一步"。
+export default () => (
+  <Bubble.AIBubble
+    content="我已经完成了数据分析，这是结果："
+    thoughtChain={[
+      { type: 'thought', content: '首先需要查询数据库' },
+      { type: 'action', content: '执行 SQL 查询' },
+      { type: 'observation', content: '获取到 1000 条记录' },
+    ]}
+  />
+);
+```
 
-### LUI vs Agentic UI
+## 🧩 组件概览
 
-**LUI** 侧重"用自然语言操控界面"  
-**Agentic UI** 侧重"给目标，由智能体规划并执行，过程可见可控"
+### 🤖 核心智能体组件
 
-| 维度                 | LUI（语言用户界面）                                                                                | Agentic UI（智能体用户界面）                                                                               |
-| -------------------- | -------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- |
-| **核心理念**         | "你说话，我照做"——把你的指令用自然语言说出来，系统帮你完成一步操作                                 | "你定目标，我来搞定"——你告诉它要达成什么目标，它自己想办法、分步骤完成，还能随时让你知道进展               |
-| **谁在干活？**       | 主要是你在操作，系统只是帮你"翻译"语言成点击或填写。比如你说"发邮件"，它弹出草稿，但还得你点"发送" | 主要是智能体（AI助手）在干活，它会自己查资料、填表格、发消息、调工具……但关键步骤会问你："这样行吗？"       |
-| **适合做什么？**     | 简单、一次性的任务：比如"总结这篇文章""把这段话改得更正式""查一下明天天气"                         | 复杂、多步骤的任务：比如"帮我策划一场线上活动，包括写文案、找场地、发邀请、跟踪报名情况"                   |
-| **怎么用工具？**     | 一次用一个工具，比如你说"翻译"，它就调翻译功能；你说"查数据"，它就查。不会自己组合多个工具         | 能自己决定用哪些工具、什么时候用、怎么组合。比如先查日历空闲时间，再写邮件，再发日程邀请，一气呵成         |
-| **你能看到过程吗？** | 通常只看到结果："好了，这是你要的摘要。"中间怎么做的？不太清楚                                     | 你能看到它"怎么想的""做了什么""卡在哪了"。比如："第一步我查了客户名单，第二步准备发邮件，但需要你确认模板" |
+| 组件 | 描述 |
+| --- | --- |
+| `Bubble` | 对话气泡，支持 AI（带思维链）和用户模式 |
+| `ThoughtChainList` | 独立展示智能体的“思考—行动—观察”推理过程 |
+| `TaskList` | 任务列表，展示多步骤任务的状态（进行中、完成、等待） |
+| `ToolUseBar` | 工具调用状态栏，展示 API 调用详情 |
+| `AgenticLayout` | 智能体应用的标准布局框架 |
+| `Workspace` | 包含文件管理、浏览器预览的智能体工作台 |
 
-> **核心升级**：从"语言控制界面"升级为"目标驱动的智能体协作者"。
+### ✍️ 编辑与输入
 
----
+| 组件 | 描述 |
+| --- | --- |
+| `MarkdownEditor` | 支持流式输出、插件扩展的 Markdown 编辑器 |
+| `MarkdownInputField` | 支持多模态（语音、文件）的输入框 |
+| `SchemaForm` | 基于 Schema 自动生成的表单组件 |
 
-## 🚀 快速开始
+### 🎯 交互与反馈
 
-### 安装
+| 组件 | 描述 |
+| --- | --- |
+| `SuggestionList` | 下一步操作或问题的建议列表 |
+| `WelcomeMessage` | 应用启动时的欢迎语引导 |
+| `History` | 会话历史记录管理 |
+| `AnswerAlert` | 用于展示结果状态的提示组件 |
 
-```bash
-npm install @ant-design/agentic-ui
-# 或
-pnpm add @ant-design/agentic-ui
-```
+## 💡 设计理念
 
-### 基础示例：AI 对话气泡
+**Agentic UI** 旨在解决传统 Chat UI 在处理复杂任务时的局限性。
 
-```tsx
-import { Bubble } from '@ant-design/agentic-ui';
+| 维度 | Chat UI (LUI) | Agentic UI |
+| --- | --- | --- |
+| **核心目标** | 回答一句话 | 完成一件事 |
+| **交互深度** | 单轮问答 | 端到端任务协同 |
+| **过程可见性** | 黑盒（只看结果） | 透明化（可见思考与工具调用） |
+| **人机关系** | 被动响应 | 主动协作 |
 
-<Bubble.AIBubble
-  content="我已经完成了数据分析，这是结果："
-  thoughtChain={[
-    { type: 'thought', content: '首先需要查询数据库' },
-    { type: 'action', content: '执行 SQL 查询' },
-    { type: 'observation', content: '获取到 1000 条记录' },
-  ]}
-/>;
-```
+我们不仅提供界面控件，更提供一种**面向过程**的交互范式，让用户理解 AI 的决策逻辑，从而建立信任并进行有效协作。
 
-### 任务列表组件
+## ⌨️ 本地开发
 
-```tsx | pure
-import { TaskList } from '@ant-design/agentic-ui';
+克隆仓库并安装依赖：
 
-<TaskList
-  tasks={[
-    { id: 1, title: '数据查询', status: 'completed' },
-    { id: 2, title: '数据分析', status: 'in_progress' },
-    { id: 3, title: '生成报告', status: 'pending' },
-  ]}
-/>;
+```bash
+git clone git@github.com:ant-design/agentic-ui.git
+cd agentic-ui
+pnpm install
 ```
 
-### 工具调用展示
+启动文档站点进行预览：
 
-```tsx | pure
-import { ToolUseBar } from '@ant-design/agentic-ui';
-
-<ToolUseBar
-  toolName="database_query"
-  status="running"
-  params={{ table: 'users', limit: 100 }}
-  result={{ count: 1000, data: [...] }}
-/>
+```bash
+pnpm start
+# 访问 http://localhost:8000
 ```
 
-### Markdown 编辑器（支持流式输出）
+运行测试：
 
-```tsx | pure
-import { MarkdownEditor } from '@ant-design/agentic-ui';
-
-<MarkdownEditor
-  initValue="# AI 生成内容"
-  typewriter={true} // 打字机效果
-  readonly={false}
-/>;
+```bash
+pnpm test
 ```
 
----
-
-## 🧩 完整组件列表
-
-### 🤖 核心智能体组件
+构建产物：
 
-| 组件               | 描述               | 主要功能                                     |
-| ------------------ | ------------------ | -------------------------------------------- |
-| `AgenticLayout`    | 智能体布局容器     | 提供统一的智能体应用布局结构                 |
-| `AgentRunBar`      | 智能体运行状态栏   | 显示运行、暂停、停止等状态控制               |
-| `Bubble`           | AI/用户对话气泡    | 展示对话内容，支持 AI 和用户消息的差异化展示 |
-| `ThoughtChainList` | 思维链可视化       | 展示"思考—行动—观察"的完整推理过程           |
-| `TaskList`         | 任务列表与进度跟踪 | 多步骤任务的状态管理与展示                   |
-| `ToolUseBar`       | 工具调用展示       | 可视化 API 调用、参数、状态与结果            |
-| `Workspace`        | 智能体工作空间     | 文件管理、浏览器、实时跟踪等功能             |
-
-### ✍️ 编辑与输入组件
-
-| 组件                 | 描述                   | 主要功能                                     |
-| -------------------- | ---------------------- | -------------------------------------------- |
-| `MarkdownEditor`     | 富文本 Markdown 编辑器 | 支持流式输出、打字机效果、完整 Markdown 语法 |
-| `MarkdownInputField` | Markdown 输入框        | 支持多模态输入、文件上传、语音输入           |
-
-### 📋 布局与容器组件
-
-| 组件             | 描述         | 主要功能                             |
-| ---------------- | ------------ | ------------------------------------ |
-| `ChatLayout`     | 聊天布局容器 | 标准聊天界面布局，支持左右栏、全屏等 |
-| `History`        | 历史记录组件 | 会话历史管理，支持搜索、筛选、导出   |
-| `WelcomeMessage` | 欢迎语组件   | 应用启动欢迎语，展示功能介绍         |
-| `Quote`          | 引用组件     | 引用消息或内容                       |
-
-### 🎯 交互与反馈组件
-
-| 组件             | 描述          | 主要功能                         |
-| ---------------- | ------------- | -------------------------------- |
-| `AnswerAlert`    | 答案提醒组件  | 显示成功、错误、警告、加载等状态 |
-| `BackTo`         | 返回顶部/底部 | 快速滚动到页面顶部或底部         |
-| `Loading`        | 加载动画      | 多种样式的加载状态展示           |
-| `SuggestionList` | 建议列表      | 智能推荐问题或操作               |
-| `ActionIconBox`  | 操作图标容器  | 统一的操作按钮样式               |
-
-### 🧠 智能体专属组件
-
-| 组件             | 描述           | 主要功能                     |
-| ---------------- | -------------- | ---------------------------- |
-| `ChatBootPage`   | 对话启动页组件 | 快速回复、案例推荐等引导功能 |
-| `SchemaEditor`   | Schema 编辑器  | 结构化数据编辑               |
-| `SchemaForm`     | Schema 表单    | 基于 Schema 自动生成表单     |
-| `SchemaRenderer` | Schema 渲染器  | 渲染结构化数据               |
-
-### 🔌 插件组件
-
-| 插件类型    | 描述           | 支持功能                        |
-| ----------- | -------------- | ------------------------------- |
-| `code`      | 代码高亮插件   | 支持 100+ 编程语言语法高亮      |
-| `katex`     | 数学公式插件   | 支持 LaTeX 数学公式渲染         |
-| `mermaid`   | 图表插件       | 支持流程图、时序图、甘特图等    |
-| `chart`     | 数据图表插件   | 支持 ECharts 各类数据可视化图表 |
-| `formatter` | 代码格式化插件 | 自动格式化代码                  |
-
-### 🛠️ 工具函数与 Hooks
-
-| 名称                 | 类型 | 描述                   |
-| -------------------- | ---- | ---------------------- |
-| `useAutoScroll`      | Hook | 自动滚动到底部         |
-| `useCopied`          | Hook | 复制到剪贴板           |
-| `useLanguage`        | Hook | 国际化语言切换         |
-| `useSpeechSynthesis` | Hook | 语音合成（文字转语音） |
-| `useClickAway`       | Hook | 点击外部区域           |
-| `useDebounceFn`      | Hook | 防抖函数               |
-| `useThrottleFn`      | Hook | 节流函数               |
-
----
-
-## 📦 特性
-
-- ✅ **开箱即用** - 预设样式与交互，快速集成
-- ✅ **TypeScript** - 完整的类型定义
-- ✅ **主题定制** - 基于 Ant Design 主题系统
-- ✅ **响应式** - 适配桌面端与移动端
-- ✅ **流式输出** - 支持打字机效果
-- ✅ **多模态** - 支持文本、图像、语音
-- ✅ **插件化** - 可扩展的插件系统
-- ✅ **国际化** - 内置多语言支持
-
----
-
-## 📖 文档与示例
-
-- [在线演示](https://ant-design.github.io/agentic-ui/)
-- [完整文档](./docs/)
-- [组件 API](./docs/components/)
-- [设计规范](./docs/design-system/)
-
----
-
-## 🌟 推荐使用场景
-
-- 🤖 **企业 Copilot** - 智能办公助手
-- 💬 **智能客服** - 知识检索与自动问答
-- 📊 **数据分析与 BI** - 智能分析助理
-- 🔄 **流程自动化（RPA）** - 协同智能体
-
----
+```bash
+pnpm build
+```
 
 ## 🤝 贡献
 
-欢迎贡献代码、报告问题或提出建议！
+欢迎参与共建！请查阅 [贡献指南](./CONTRIBUTING.md) 了解如何提交 Pull Request 和报告 Issue。
 
-查看 [贡献指南](./CONTRIBUTING.md) 了解详情。
+## 🔗 相关资源
 
----
+- [在线文档](https://ant-design.github.io/agentic-ui/)
+- [Ant Design](https://ant.design/)
 
 ## 📄 许可证
 
-[MIT License](./LICENSE)
-
----
-
-**让 AI 的思考过程透明化，让智能体真正成为你的协作伙伴 🤖**
+[MIT](./LICENSE)

package/dist/Bubble/List/PureBubbleList.js

@@ -119,11 +119,9 @@ export var PureBubbleList = function(props) {
                 }),
                 readonly: props.readonly,
                 onReply: onReply,
-                onDisLike: onDisLike,
-                onDislike: onDislike,
+                onDislike: onDislike || onDisLike,
                 onLike: onLike,
-                onCancelLike: onCancelLike,
-                onLikeCancel: onLikeCancel,
+                onLikeCancel: onLikeCancel || onCancelLike,
                 onAvatarClick: onAvatarClick,
                 onDoubleClick: onDoubleClick,
                 customConfig: bubbleRenderConfig === null || bubbleRenderConfig === void 0 ? void 0 : bubbleRenderConfig.customConfig,

package/dist/Components/LayoutHeader/index.js

@@ -102,7 +102,7 @@ import { useLayoutHeaderStyle } from "./style";
  *
  * @returns {React.ReactElement} 渲染的头部组件
  */ var LayoutHeader = function(param) {
-    var _param_title = param.title, title = _param_title === void 0 ? 'AI 助手' : _param_title, _param_showShare = param.showShare, showShare = _param_showShare === void 0 ? true : _param_showShare, _param_leftCollapsible = param.leftCollapsible, leftCollapsible = _param_leftCollapsible === void 0 ? true : _param_leftCollapsible, _param_rightCollapsible = param.rightCollapsible, rightCollapsible = _param_rightCollapsible === void 0 ? false : _param_rightCollapsible, controlledLeftCollapsed = param.leftCollapsed, controlledRightCollapsed = param.rightCollapsed, _param_leftDefaultCollapsed = param.leftDefaultCollapsed, leftDefaultCollapsed = _param_leftDefaultCollapsed === void 0 ? false : _param_leftDefaultCollapsed, _param_rightDefaultCollapsed = param.rightDefaultCollapsed, rightDefaultCollapsed = _param_rightDefaultCollapsed === void 0 ? false : _param_rightDefaultCollapsed, onLeftCollapse = param.onLeftCollapse, onRightCollapse = param.onRightCollapse, onShare = param.onShare, leftExtra = param.leftExtra, rightExtra = param.rightExtra, className = param.className;
+    var _param_title = param.title, title = _param_title === void 0 ? 'AI 助手' : _param_title, _param_showShare = param.showShare, showShare = _param_showShare === void 0 ? false : _param_showShare, _param_leftCollapsible = param.leftCollapsible, leftCollapsible = _param_leftCollapsible === void 0 ? false : _param_leftCollapsible, _param_rightCollapsible = param.rightCollapsible, rightCollapsible = _param_rightCollapsible === void 0 ? false : _param_rightCollapsible, controlledLeftCollapsed = param.leftCollapsed, controlledRightCollapsed = param.rightCollapsed, _param_leftDefaultCollapsed = param.leftDefaultCollapsed, leftDefaultCollapsed = _param_leftDefaultCollapsed === void 0 ? false : _param_leftDefaultCollapsed, _param_rightDefaultCollapsed = param.rightDefaultCollapsed, rightDefaultCollapsed = _param_rightDefaultCollapsed === void 0 ? false : _param_rightDefaultCollapsed, onLeftCollapse = param.onLeftCollapse, onRightCollapse = param.onRightCollapse, onShare = param.onShare, leftExtra = param.leftExtra, rightExtra = param.rightExtra, className = param.className;
     var locale = useContext(I18nContext).locale;
     var getPrefixCls = useContext(ConfigProvider.ConfigContext).getPrefixCls;
     var prefixCls = getPrefixCls('layout-header');

package/dist/Hooks/useLanguage.d.ts

@@ -356,6 +356,8 @@ export declare function useLanguage(): {
         'input.supportedFormatMessage': string;
         'input.sendButtonTooltip.send': string;
         'input.sendButtonTooltip.newline': string;
+        'input.sendButtonTooltip.send.mod': string;
+        'input.sendButtonTooltip.newline.mod': string;
         'common.name': string;
         'common.updateTime': string;
         'common.type': string;

package/dist/I18n/locales.d.ts

@@ -320,6 +320,8 @@ export declare const cnLabels: {
     'input.supportedFormatMessage': string;
     'input.sendButtonTooltip.send': string;
     'input.sendButtonTooltip.newline': string;
+    'input.sendButtonTooltip.send.mod': string;
+    'input.sendButtonTooltip.newline.mod': string;
     'common.name': string;
     'common.updateTime': string;
     'common.type': string;

package/dist/I18n/locales.js

@@ -340,6 +340,8 @@
     'input.supportedFormatMessage': '支持上传文件，每个文件不超过 ${maxSize}，支持 ${extensions}等格式。',
     'input.sendButtonTooltip.send': '按 Enter 键发送',
     'input.sendButtonTooltip.newline': '按 Shift+Enter 键换行',
+    'input.sendButtonTooltip.send.mod': '按 Cmd/Ctrl+Enter 键发送',
+    'input.sendButtonTooltip.newline.mod': '按 Enter 键换行',
     // Other translations
     'common.name': '名称',
     'common.updateTime': '更新时间',
@@ -715,6 +717,8 @@
     'input.supportedFormatMessage': 'Supports file upload, each file not exceeding ${maxSize}, formats such as ${extensions}.',
     'input.sendButtonTooltip.send': 'Press Enter to send',
     'input.sendButtonTooltip.newline': 'Press Shift+Enter for new line',
+    'input.sendButtonTooltip.send.mod': 'Press Cmd/Ctrl+Enter to send',
+    'input.sendButtonTooltip.newline.mod': 'Press Enter for new line',
     // Other translations
     'common.name': 'Name',
     'common.updateTime': 'Update Time',

package/dist/MarkdownEditor/editor/parser/parse/parseHtml.js

@@ -412,14 +412,22 @@ import partialJsonParse from "../json-parse";
     if (!isComment) {
         return {};
     }
+    var trimmedValue = value.trim();
+    if (!trimmedValue) {
+        return {};
+    }
+    var looksLikeJson = trimmedValue.startsWith('{') || trimmedValue.startsWith('[');
+    if (!looksLikeJson) {
+        return {};
+    }
     try {
-        return json5.parse(value);
+        return json5.parse(trimmedValue);
     } catch (e) {
         try {
-            return partialJsonParse(value);
+            return partialJsonParse(trimmedValue);
         } catch (parseError) {
             console.warn('Failed to parse HTML comment as JSON or partial JSON:', {
-                value: value,
+                value: trimmedValue,
                 error: parseError
             });
         }

package/dist/MarkdownEditor/editor/parser/parserMarkdownToSlateNode.d.ts

@@ -30,6 +30,14 @@ export declare class MarkdownToSlateParser {
     private config;
     private readonly plugins;
     constructor(config?: ParserMarkdownToSlateNodeConfig, plugins?: MarkdownEditorPlugin[]);
+    private preprocessMarkdown;
+    private buildMarkdownRoot;
+    private filterTopLevelSchema;
+    private createEmptyParagraph;
+    private createParseContext;
+    private parseHtmlCommentProps;
+    private resolveConfig;
+    private parseWithPlugins;
     /**
      * 解析 Markdown 字符串并返回解析后的结构和链接信息
      *