@alifd/chat 0.3.36-beta.0 → 0.3.37-beta.0

package/lib/loading/__docs__/demo/basic/index.js

@@ -0,0 +1,37 @@
+"use strict";
+/**
+ * @demo 基本使用
+ * @en Basic
+ * @order 1
+ * @remarks Loading 组件的基本用法。
+ * - Basic usage of `Loading`
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const react_dom_1 = tslib_1.__importDefault(require("react-dom"));
+const chat_1 = require("@alifd/chat");
+require("@alifd/chat/es/loading/style");
+react_dom_1.default.render(react_1.default.createElement("div", null,
+    react_1.default.createElement("div", { style: {
+            "display": "flex",
+            "justifyContent": "space-around",
+            "marginBottom": "50px"
+        } },
+        react_1.default.createElement(chat_1.Loading, null,
+            react_1.default.createElement("div", null, "default")),
+        react_1.default.createElement(chat_1.Loading, { shape: "dot" },
+            react_1.default.createElement("div", null, "dot")),
+        react_1.default.createElement(chat_1.Loading, { shape: "bar" },
+            react_1.default.createElement("div", null, "bar"))),
+    react_1.default.createElement("div", { style: {
+            "display": "flex",
+            "justifyContent": "space-around"
+        } },
+        react_1.default.createElement(chat_1.Loading, { size: 'medium' },
+            react_1.default.createElement("div", null, "default")),
+        react_1.default.createElement(chat_1.Loading, { shape: "dot", size: 'medium' }),
+        react_1.default.createElement(chat_1.Loading, { shape: "dot", size: 'medium' },
+            react_1.default.createElement("div", null, "dot")),
+        react_1.default.createElement(chat_1.Loading, { shape: "bar", size: 'medium' },
+            react_1.default.createElement("div", null, "bar")))), mountNode);

package/lib/markdown/__docs__/demo/baisc/index.d.ts

@@ -0,0 +1 @@
+import '@alifd/chat/es/markdown/style';

package/lib/markdown/__docs__/demo/baisc/index.js

@@ -0,0 +1,246 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+/**
+ * @demo Markdown
+ * @en Markdown
+ * @order 1
+ * @remarks 可以通过设置 `content` 属性控制 Markdown 文本的内容。
+ * - The content of the Markdown text is controlled by a `content` attribute.
+ */
+const react_1 = tslib_1.__importDefault(require("react"));
+const react_dom_1 = tslib_1.__importDefault(require("react-dom"));
+const chat_1 = require("@alifd/chat");
+require("@alifd/chat/es/markdown/style");
+const markdownContent0 = `排序算法是计算机科学中一类基础而重要的算法，主要用于将数据集合或序列按照特定的顺序进行排列。以下是一些经典的排序算法简介：
+
+1. **冒泡排序**（Bubble Sort）: 通过重复遍历要排序的数列，比较每对相邻元素的值，如果顺序错误就把它们交换过来。遍历数列的工作重复进行直到没有再需要交换，这时数列就排序完成了。
+
+2. **插入排序**（Insertion Sort）: 将数组分为已排序和未排序两部分，初始时已排序部分只有一个元素。每次从未排序部分取出第一个元素，插入到已排序部分的正确位置，直到全部插入完成。
+
+3. **选择排序**（Selection Sort）: 遍历数组，每次从未排序部分找到最小（或最大）的元素，放到已排序部分的末尾。重复此过程，直到所有元素均排序完毕。
+
+4. **归并排序**（Merge Sort）: 采用分治法，将数组分成两半分别排序，再将排序好的两半合并成一个有序数组。这是一种典型的分而治之策略应用。
+
+5. **快速排序**（Quick Sort）: 选取一个基准值，通过一趟排序将待排记录分隔成独立的两部分，其中一部分的所有数据都比另一部分的所有数据要小，然后再按此方法对这两部分数据分别进行快速排序，整个排序过程可以递归进行。
+
+6. **计数排序**（Counting Sort）、**基数排序**（Radix Sort）、**桶排序**（Bucket Sort）: 这三者都属于非比较排序算法，适用于整数排序，特别是当输入的数据范围不是很大时效率很高。计数排序通过统计每个值出现的次数来排序；基数排序则是按照数字的每一位进行排序；桶排序则是将元素分布到若干个桶里，每个桶再分别排序。
+
+7. **希尔排序**（Shell Sort）: 是插入排序的一种更高效的改进版本，通过将原始数据分割成若干子序列，先使子序列基本有序，再对全体记录进行一次直接插入排序。
+![](https://static.dingtalk.com/media/lADPDetfXH_Pn3HNAbrNBDg_1080_442.jpg)
+<font color=common_red1_color>彩色</font>
+<font color=common_green1_color>文本</font>
+<font color=common_blue1_color>内容</font>
+![](https://img.alicdn.com/imgextra/i1/O1CN01OvFLW11mWeIU13AMp_!!6000000004962-0-tps-1002-1238.jpg)
+
+
+这些算法各有优缺点，适用场景也各不相同，实际应用中需要根据数据特性和需求来选择合适的排序算法。`;
+const markdownContent = `# 一级标题 [元气满满]
+## 二级标题 [元气满满]
+### 三级标题 [魔法棒]
+#### 四级标题
+##### 五级标题
+
+<font color=common_red1_color>彩色</font>
+<font color=common_green1_color>文本</font>
+<font color=common_blue1_color>内容</font>
+
+正文 **加粗文本** *斜体文本* [钉钉官网链接](https://www.dingtalk.com/) [元气满满]
+
+[链接复制](copy://testqiuqiu复制)
+[链接复制1](https://testqiuqiu复制)
+
+[链接发送消息](dtmd://dingtalkclient/sendMessage?content=%E7%A7%8B%E7%A7%8B%E7%9A%84%E6%B5%8B%E8%AF%95%E6%8C%87%E4%BB%A4%E5%A4%A7%E5%85%A8&context=%7B%22allowToDingtalk%22%3Afalse%2C%22source%22%3A%22user_chat%22%2C%22value%22%3A%226abbe0cb38ee49b09b3d0762054df4b8%22%7D)
+[链接发送消息1](https://dingtalkclient/sendMessage?content=%E7%A7%8B%E7%A7%8B%E7%9A%84%E6%B5%8B%E8%AF%95%E6%8C%87%E4%BB%A4%E5%A4%A7%E5%85%A8&context=%7B%22allowToDingtalk%22%3Afalse%2C%22source%22%3A%22user_chat%22%2C%22value%22%3A%226abbe0cb38ee49b09b3d0762054df4b8%22%7D)
+
+
+![](https://static.dingtalk.com/media/lADPDetfXH_Pn3HNAbrNBDg_1080_442.jpg)
+<font color=common_red1_color>彩色</font>
+<font color=common_green1_color>文本</font>
+<font color=common_blue1_color>内容</font>
+![](https://img.alicdn.com/imgextra/i1/O1CN01OvFLW11mWeIU13AMp_!!6000000004962-0-tps-1002-1238.jpg)
+
+![](https://static.dingtalk.com/media/lADPDetfXH_Pn3HNAbrNBDg_1080_442.jpg)
+<font color=common_red1_color>彩色</font>
+<font color=common_green1_color>文本</font>
+<font color=common_blue1_color>内容</font>
+![](https://img.alicdn.com/imgextra/i4/O1CN01dTkCbh2ABAQjD7Qgm_!!6000000008164-2-tps-219-48.png)
+
+
+<font sizeToken=common_h3_text_style__font_size colorTokenV2=common_blue1_color>蓝色三级标题</font>
+
+1. 第一个有序列表项
+    * 第一个无序列表项
+        * 第一个嵌套无序列表项
+        * 第二个嵌套无序列表项
+    * 第二个无序列表项
+2. 第二个有序列表项
+3. 第三个有序列表项
+
+| 表格标题 1 | 表格标题 2 | 表格标题 3 |
+| :- | :-: | -: |
+| 左对齐内容 1 | 剧中内容 1 | 右对齐内容 1 |
+| 左对齐内容 2 | 剧中内容 2 | 右对齐内容 2 |
+
+
+
+\`\`\`javascript
+console.log("Hello, world!");
+\`\`\`
+`;
+const markdownContent1 = `- **手机端**：
+
+	- **Android系统**：文件默认保存在dingtalk的文件夹内，路径不能设置或修改。建议通过手机的【文件管理】应用按最近的文件或文件类型查找。
+
+	- **iOS系统**：下载后需点击打开-储存到"文件"-选择需要保存的文件夹，然后再到手机【文件】APP中，在对应文件夹中即可找到该文件。如果您的苹果手机中没有【文件】APP，请前往App Store下载。
+
+	- ![参考图片](https://knowledgecloud.oss-cn-hangzhou.aliyuncs.com/kc/kc-media/kc-oss-1640921463663-image.png)
+
+- **电脑端**：
+
+	- 操作步骤为：【电脑端钉钉】-【左上角头像】-【设置与隐私】-【通用】-【文件下载】-【保存位置】点击"选择保存目录"后，您可以选择保存位置。如果您希望每次下载前都询问文件的保存位置，可以开启【下载前询问每个文件保存位置】选项。
+
+	- ![参考图片](//ly-alime-kc.oss-cn-zhangjiakou.aliyuncs.com/kc/kc-media/kc-oss-1713323565157-image.png)
+
+请注意，电脑端钉钉设置的文件保存位置仅对钉钉软件内下载的文件有效，不适用于网页版本的下载。`;
+const markdownContent2 = `**R1思考过程：**
+好的，我需要回答用户的问题：“HSF泛化调用怎么使用”。首先，我要仔细查看提供的企业内部检索文档，优先参考这些内容。
+
+根据内部文档中的多个引用，特别是[资料](https://blog.csdn.net/HSF_213156/article/details/123291093)、7和8，泛化调用的步骤大致包括配置HSFApiConsumerBean，设置泛化参数为true，初始化并获取GenericService代理，然后调用$invoke方法。具体来说，需要设置接口名称、版本、分组，并将generic属性设为true。之后通过GenericService的$invoke方法传递方法名、参数类型数组和参数值。需要注意的是，参数如果是POJO需要转为Map，返回结果也是Map类型。此外，[资料](https://help.aliyun.com/zh/edas/developer-reference/hsf-overview)提到参数顺序和泛型必须与方法声明一致，且返回值不能是单值类型。
+
+外部文档虽然也有相关信息，但根据规则，必须优先使用内部资料，所以主要依据内部引用。确认没有遗漏关键步骤后，整理出清晰的步骤，确保答案准确且符合内部文档的描述。
+
+**回复内容：**
+HSF泛化调用可通过以下步骤实现：
+
+**1. 配置HSF消费者Bean**//秋秋测试符号啊~！@#￥%……&*（）——+||||||《》，。***··————
+
+
+
+\`\`\`
+HSFApiConsumerBean hsfApiConsumerBean = new HSFApiConsumerBean();
+hsfApiConsumerBean.setInterfaceName("com.alibaba.XXX.XXService");
+hsfApiConsumerBean.setVersion("1.0.0");
+hsfApiConsumerBean.setGroup("HSF");
+hsfApiConsumerBean.setGeneric("true"); // 关键泛化配置
+hsfApiConsumerBean.init(true);
+
+秋秋测试符号啊123 ~！@#￥%……&*（）——+||||||？》《，。**··——————
+
+\`\`\`
+
+**2. 获取泛化接口代理**
+
+
+
+\`\`\`
+GenericService genericService = (GenericService) hsfApiConsumerBean.getObject();
+
+\`\`\`
+
+**3. 发起泛化调用**
+
+
+
+\`\`\`
+Map result = (Map) genericService.$invoke(
+    "queryOrder", // 方法名
+    new String[] { Long.class.getName() }, // 参数类型数组
+    new Object[] { 1L } // 参数值（POJO需转为Map）
+);
+
+\`\`\`
+
+**关键注意事项：**
+
+- 参数顺序、个数、泛型需与服务方法声明严格一致
+
+- 返回值需为Map/JSONObject等键值结构，单值类型（如String/Integer）不支持泛化调用
+
+- POJO参数需转换为Map结构，可使用com.taobao.hsf.util.PojoUtils进行转换
+
+- 无入参时传null：\`$invoke("methodName", null, null)`;
+react_dom_1.default.render(react_1.default.createElement("div", null,
+    react_1.default.createElement("div", { className: "MarkdownCard-basic-demo", style: { width: '640px', background: 'yellow' } },
+        react_1.default.createElement(chat_1.Markdown, { className: "custom-class", onReady: () => console.log('MarkdownCard is ready'), content: markdownContent, imagePreview: false, handleOpenLink: (url) => {
+                console.log('MarkdownCard handleOpenLink', url);
+            }, sendTextMessage: (text) => {
+                console.log('MarkdownCard sendTextMessage', text);
+            }, copyText: (text) => {
+                console.log('MarkdownCard copyText', text);
+            }, handleImageClick: (url) => {
+                console.log('MarkdownCard handleImageClick', url);
+            } }),
+        react_1.default.createElement("div", { style: { background: 'pink' } },
+            react_1.default.createElement("div", null, "\u5F00\u59CB\u6D4B\u8BD5\u751F\u6210\u4E2D"),
+            react_1.default.createElement(chat_1.Markdown, { className: "custom-class", generating: true, onReady: () => console.log('MarkdownCard is ready'), content: markdownContent1, imagePreview: false, handleOpenLink: (url) => {
+                    console.log('MarkdownCard handleOpenLink', url);
+                }, sendTextMessage: (text) => {
+                    console.log('MarkdownCard sendTextMessage', text);
+                }, copyText: (text) => {
+                    console.log('MarkdownCard copyText', text);
+                }, handleImageClick: (url) => {
+                    console.log('MarkdownCard handleImageClick', url);
+                } })),
+        react_1.default.createElement(chat_1.Markdown, { className: "custom-class", generating: true, onReady: () => console.log('MarkdownCard is ready'), content: markdownContent0, imagePreview: true, handleOpenLink: (url) => {
+                console.log('MarkdownCard handleOpenLink', url);
+            }, sendTextMessage: (text) => {
+                console.log('MarkdownCard sendTextMessage', text);
+            }, copyText: (text) => {
+                console.log('MarkdownCard copyText', text);
+            }, handleImageClick: (url) => {
+                console.log('MarkdownCard handleImageClick', url);
+            } }),
+        react_1.default.createElement(chat_1.Markdown, { className: "custom-class", generating: true, onReady: () => console.log('MarkdownCard is ready'), content: ``, imagePreview: false, handleOpenLink: (url) => {
+                console.log('MarkdownCard handleOpenLink', url);
+            }, sendTextMessage: (text) => {
+                console.log('MarkdownCard sendTextMessage', text);
+            }, copyText: (text) => {
+                console.log('MarkdownCard copyText', text);
+            }, handleImageClick: (url) => {
+                console.log('MarkdownCard handleImageClick', url);
+            } })),
+    react_1.default.createElement("div", { className: "MarkdownCard-basic-demo", style: { width: '360px', background: 'pink' } },
+        react_1.default.createElement(chat_1.Markdown, { className: "custom-class", onReady: () => console.log('MarkdownCard is ready'), content: markdownContent2, imagePreview: false, handleOpenLink: (url) => {
+                console.log('MarkdownCard handleOpenLink', url);
+            }, sendTextMessage: (text) => {
+                console.log('MarkdownCard sendTextMessage', text);
+            }, copyText: (text) => {
+                console.log('MarkdownCard copyText', text);
+            }, handleImageClick: (url) => {
+                console.log('MarkdownCard handleImageClick', url);
+            } }),
+        react_1.default.createElement("div", null, "\u5F00\u59CB\u6D4B\u8BD5\u751F\u6210\u4E2D"),
+        react_1.default.createElement(chat_1.Markdown, { className: "custom-class", generating: true, onReady: () => console.log('MarkdownCard is ready'), content: `1. 第一个有序列表项
+    * 第一个无序列表项
+        * 第一个嵌套无序列表项
+        * 第二个嵌套无序列表项
+    * 第二个无序列表项
+2. 第二个有序列表项
+3. 第三个有序列表项`, imagePreview: false, handleOpenLink: (url) => {
+                console.log('MarkdownCard handleOpenLink', url);
+            }, sendTextMessage: (text) => {
+                console.log('MarkdownCard sendTextMessage', text);
+            }, copyText: (text) => {
+                console.log('MarkdownCard copyText', text);
+            }, handleImageClick: (url) => {
+                console.log('MarkdownCard handleImageClick', url);
+            } }),
+        react_1.default.createElement(chat_1.Markdown, { className: "custom-class", generating: true, onReady: () => console.log('MarkdownCard is ready'), content: markdownContent0, imagePreview: true, handleOpenLink: (url) => {
+                console.log('MarkdownCard handleOpenLink', url);
+            }, sendTextMessage: (text) => {
+                console.log('MarkdownCard sendTextMessage', text);
+            }, copyText: (text) => {
+                console.log('MarkdownCard copyText', text);
+            }, handleImageClick: (url) => {
+                console.log('MarkdownCard handleImageClick', url);
+            } }),
+        react_1.default.createElement(chat_1.Markdown, { className: "custom-class", generating: true, onReady: () => console.log('MarkdownCard is ready'), content: ``, imagePreview: false, handleOpenLink: (url) => {
+                console.log('MarkdownCard handleOpenLink', url);
+            }, sendTextMessage: (text) => {
+                console.log('MarkdownCard sendTextMessage', text);
+            }, copyText: (text) => {
+                console.log('MarkdownCard copyText', text);
+            }, handleImageClick: (url) => {
+                console.log('MarkdownCard handleImageClick', url);
+            } }))), mountNode);

package/lib/message/__docs__/demo/basic/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @demo 基本使用
+ * @en Basic
+ * @order 1
+ * @remarks Message 组件的 toast 基本用法。
+ * - Basic usage of `Message`
+ */
+import '@alifd/chat/es/message/style';
+import '@alifd/chat/es/button/style';

package/lib/message/__docs__/demo/basic/index.js

@@ -0,0 +1,28 @@
+"use strict";
+/**
+ * @demo 基本使用
+ * @en Basic
+ * @order 1
+ * @remarks Message 组件的 toast 基本用法。
+ * - Basic usage of `Message`
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const react_dom_1 = tslib_1.__importDefault(require("react-dom"));
+const chat_1 = require("@alifd/chat");
+require("@alifd/chat/es/message/style");
+require("@alifd/chat/es/button/style");
+const showSuccess = () => chat_1.Message.success('success');
+const showWarning = () => chat_1.Message.warning('warning');
+const showError = () => chat_1.Message.error('error');
+const showNotice = () => chat_1.Message.notice('notice');
+const showHelp = () => chat_1.Message.help('help');
+const showLoading = () => chat_1.Message.loading('loading');
+react_dom_1.default.render(react_1.default.createElement("div", { className: "message-toast-quick-demo" },
+    react_1.default.createElement(chat_1.Button, { type: "primary", onClick: showSuccess }, "success"),
+    react_1.default.createElement(chat_1.Button, { type: "primary", onClick: showWarning }, "warning"),
+    react_1.default.createElement(chat_1.Button, { type: "primary", onClick: showError }, "error"),
+    react_1.default.createElement(chat_1.Button, { type: "primary", onClick: showNotice }, "notice"),
+    react_1.default.createElement(chat_1.Button, { type: "primary", onClick: showHelp }, "help"),
+    react_1.default.createElement(chat_1.Button, { type: "primary", onClick: showLoading }, "loading")), mountNode);

package/lib/origin/__docs__/demo/basic/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @demo 基本使用
+ * @en Basic
+ * @order 1
+ * @remarks Origin 组件的基本用法。
+ * - Basic usage of `Origin`
+ */
+import '@alifd/chat/es/origin/style';

package/lib/origin/__docs__/demo/basic/index.js

@@ -0,0 +1,16 @@
+"use strict";
+/**
+ * @demo 基本使用
+ * @en Basic
+ * @order 1
+ * @remarks Origin 组件的基本用法。
+ * - Basic usage of `Origin`
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const react_dom_1 = tslib_1.__importDefault(require("react-dom"));
+const chat_1 = require("@alifd/chat");
+require("@alifd/chat/es/origin/style");
+react_dom_1.default.render(react_1.default.createElement("div", { className: "origin-basic-demo" },
+    react_1.default.createElement(chat_1.Origin, { text: '\u5185\u5916\u5C0F\u871C' })), mountNode);

package/lib/person-picker/__docs__/demo/basic/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @demo 人员选择器
+ * @en Size
+ * @order 1
+ * @remarks 可以通过设置 `size` 属性控制按钮的尺寸，可选值为 `large` `medium` `small`，其中默认值为 `medium`。
+ * - The size of a Button is controlled by a `size` attribute, supporting `large`, `medium`, `small`, the default value is `medium`.
+ */
+import '@alifd/chat/es/person-picker/style';

package/lib/person-picker/__docs__/demo/basic/index.js

@@ -0,0 +1,16 @@
+"use strict";
+/**
+ * @demo 人员选择器
+ * @en Size
+ * @order 1
+ * @remarks 可以通过设置 `size` 属性控制按钮的尺寸，可选值为 `large` `medium` `small`，其中默认值为 `medium`。
+ * - The size of a Button is controlled by a `size` attribute, supporting `large`, `medium`, `small`, the default value is `medium`.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const react_dom_1 = tslib_1.__importDefault(require("react-dom"));
+const chat_1 = require("@alifd/chat");
+require("@alifd/chat/es/person-picker/style");
+react_dom_1.default.render(react_1.default.createElement("div", null,
+    react_1.default.createElement(chat_1.PersonPicker, { defaultValue: [{ value: '339513', label: '柯曦' }] })), mountNode);

package/lib/radio-group/__docs__/demo/basic/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @demo 基础用法
+ * @en Basic
+ * @order 1
+ */
+import '@alifd/chat/es/radio-group/style';

package/lib/radio-group/__docs__/demo/basic/index.js

@@ -0,0 +1,29 @@
+"use strict";
+/**
+ * @demo 基础用法
+ * @en Basic
+ * @order 1
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const react_dom_1 = tslib_1.__importDefault(require("react-dom"));
+const chat_1 = require("@alifd/chat");
+require("@alifd/chat/es/radio-group/style");
+const options1 = [
+    { label: '苹果', value: 'Apple', description: '很好吃的苹果' },
+    { label: '梨', value: 'Pear', description: '鲜嫩多汁' },
+    { label: '超级无敌好吃的来自意大利的桔子', value: 'Orange', description: '这是一个很长的文案，来描述同样很好吃的桔子' }
+];
+const options2 = [
+    { label: '因公', value: 'Company' },
+    { label: '因私', value: 'Personal' },
+];
+const onChange = (value) => {
+    console.log(value);
+};
+react_dom_1.default.render(react_1.default.createElement("div", null,
+    react_1.default.createElement("div", { style: { maxWidth: 400 } },
+        react_1.default.createElement(chat_1.RadioGroup, { options: options1, value: "Pear", onChange: onChange })),
+    react_1.default.createElement("div", { style: { maxWidth: 400, marginTop: 40 } },
+        react_1.default.createElement(chat_1.RadioGroup, { options: options2, onChange: onChange }))), mountNode);

package/lib/recommend/__docs__/demo/basic/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @demo 基本使用
+ * @en Basic
+ * @order 1
+ * @remarks recommend 猜你想问组件的基本用法。
+ * - Basic usage of `recommend`
+ */
+import '@alifd/chat/es/recommend/style';

package/lib/recommend/__docs__/demo/basic/index.js

@@ -0,0 +1,54 @@
+"use strict";
+/**
+ * @demo 基本使用
+ * @en Basic
+ * @order 1
+ * @remarks recommend 猜你想问组件的基本用法。
+ * - Basic usage of `recommend`
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const react_dom_1 = tslib_1.__importDefault(require("react-dom"));
+const chat_1 = require("@alifd/chat");
+require("@alifd/chat/es/recommend/style");
+react_dom_1.default.render(react_1.default.createElement("div", { className: "origin-basic-demo" },
+    react_1.default.createElement("div", { style: {
+            width: '500px',
+        } },
+        react_1.default.createElement(chat_1.Recommend, { defaultExpanded: false, recommendList: [
+                {
+                    name: '上证指数(000001)股票价格_行情_走势图 - 东方财富',
+                    title: '上证指数(000001)股票价格_行情_走势图 - 东方财富',
+                    url: 'https://quote.eastmoney.com/zs000001.html',
+                },
+                {
+                    name: '今日股市_今天中国股票金融市场行情_英为财情Investing.com',
+                    title: '今日股市_今天中国股票金融市场行情_英为财情Investing.com',
+                    url: 'https://m.cn.investing.com/markets/china',
+                },
+                {
+                    name: '今日股市_今天中国股票金融市场行情_英为财情Investing.com',
+                    title: '今日股市_今天中国股票金融市场行情_英为财情Investing.com',
+                    url: 'https://m.cn.investing.com/markets/china',
+                },
+                {
+                    name: '今日股市_今天中国股票金融市场行情_英为财情Investing.com',
+                    title: '今日股市_今天中国股票金融市场行情_英为财情Investing.com',
+                    url: 'https://m.cn.investing.com/markets/china',
+                },
+                {
+                    name: '今日股市_今天中国股票金融市场行情_英为财情Investing.com',
+                    title: '今日股市_今天中国股票金融市场行情_英为财情Investing.com',
+                    url: 'https://m.cn.investing.com/markets/china',
+                },
+                {
+                    name: '今日股市_今天中国股票金融市场行情_英为财情Investing.com',
+                    title: '今日股市_今天中国股票金融市场行情_英为财情Investing.com',
+                    url: 'https://m.cn.investing.com/markets/china',
+                },
+            ], onToggle: onToggle => {
+                console.log('onToggle：', onToggle);
+            }, onItemClick: (item, index) => {
+                console.log('onItemClick：', item, index);
+            } }))), mountNode);

package/lib/reference/__docs__/demo/basic/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @demo 基本使用
+ * @en Basic
+ * @order 1
+ * @remarks StopGenerate 组件的基本用法。
+ * - Basic usage of `StopGenerateP`
+ */
+import '@alifd/chat/es/reference/style';

package/lib/reference/__docs__/demo/basic/index.js

@@ -0,0 +1,86 @@
+"use strict";
+/**
+ * @demo 基本使用
+ * @en Basic
+ * @order 1
+ * @remarks StopGenerate 组件的基本用法。
+ * - Basic usage of `StopGenerateP`
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const react_dom_1 = tslib_1.__importDefault(require("react-dom"));
+const chat_1 = require("@alifd/chat");
+require("@alifd/chat/es/reference/style");
+const testList = [
+    {
+        "sourceCode": "google_search",
+        "name": "上证指数(000001)股票价格_行情_走势图 - 东方财富",
+        "title": "上证指数(000001)股票价格_行情_走势图 - 东方财富",
+        "url": "https://quote.eastmoney.com/zs000001.html",
+        "sourceIcon": "https://img.alicdn.com/imgextra/i1/O1CN018RqHSQ1ujUKQaHXSf_!!6000000006073-2-tps-32-32.png",
+        "modifyTime": "2024-12-31 12:00:00",
+        "content": "上证指数(000001)股票价格_行情_走势图 - 东方财富详细描述上证指数(000001)股票价格_行情_走势图 - 东方财富详细描述上证指数(000001)股票价格_行情_走势图 - 东方财富详细描述上证指数(000001)股票价格_行情_走势图 - 东方财富详细描述上证指数(000001)股票价格_行情_走势图 - 东方财富详细描述"
+    },
+    {
+        "sourceCode": "google_search",
+        "name": "今日股市_今天中国股票金融市场行情_英为财情Investing.com今日股市_今天中国股票金融市场行情_英为财情Investing.com今日股市_今天中国股票金融市场行情_英为财情Investing.com",
+        "title": "今日股市_今天中国股票金融市场行情_英为财情Investing.com",
+        "url": "https://m.cn.investing.com/markets/china",
+        "sourceIcon": "https://img.alicdn.com/imgextra/i3/O1CN01qByVMl24oCXEdCCBD_!!6000000007437-55-tps-28-16.svg",
+        "content": "今日股市_今天中国股票金融市场行情_英为财情Investing.co详细描述今日股市_今天中国股票金融市场行情_英为财情Investing.co详细描述今日股市_今天中国股票金融市场行情_英为财情Investing.co详细描述今日股市_今天中国股票金融市场行情_英为财情Investing.co详细描述今日股市_今天中国股票金融市场行情_英为财情Investing.co详细描述"
+    },
+    {
+        "sourceCode": "google_search",
+        "name": "今日股市_今天中国股票金融市场行情_英为财情Investing.com",
+        "title": "今日股市_今天中国股票金融市场行情_英为财情Investing.com",
+        "url": "https://m.cn.investing.com/markets/china",
+        "sourceIcon": "https://img.alicdn.com/imgextra/i4/O1CN01K1YBme1jne9cQqQHM_!!6000000004593-0-tps-2960-660.jpg",
+        "modifyTime": "2024-12-31 12:00:00",
+        "content": "上证指数(000001)股票价格_行情_走势图 - 东方财富详细描述上证指数(000001)股票价格_行情_走势图 - 东方财富详细描述上证指数(000001)股票价格_行情_走势图 - 东方财富详细描述上证指数(000001)股票价格_行情_走势图 - 东方财富详细描述上证指数(000001)股票价格_行情_走势图 - 东方财富详细描述"
+    },
+];
+// 小蜜-知识卡片使用场景：点击头部 + 展开按钮，都进行展开和关闭，点击内容区域不需要响应
+// 搜索-知识卡片使用场景
+// 点击头部，打开详情面板；
+// 点击展开按钮，进行面板展开和关闭；
+// 点击内容区域，打开详情面板
+// 搜索-引用信息使用场景
+react_dom_1.default.render(react_1.default.createElement("div", { className: "origin-basic-demo" },
+    react_1.default.createElement("div", { style: {
+            width: '500px'
+        } },
+        react_1.default.createElement(chat_1.Reference, { defaultExpanded: false, header: {
+                icon: 'success',
+                title: '参考来源'
+            }, listItems: testList, onItemClick: (item, index) => {
+                console.log('onItemClick：', item, index);
+            }, onHeaderClose: () => {
+                console.log('Reference onClose');
+            }, onContentClick: () => {
+                console.log('Reference onDetailClick');
+            } }),
+        react_1.default.createElement(chat_1.Reference, { defaultExpanded: false, header: {
+                icon: 'success',
+                title: '参考来源'
+            }, listItems: testList, onHeaderClick: (expanded) => {
+                console.log('onHeaderClick', expanded);
+            }, onItemClick: (item, index) => {
+                console.log('onItemClick：', item, index);
+            }, onHeaderClose: () => {
+                console.log('Reference onClose');
+            }, onContentClick: () => {
+                console.log('Reference onDetailClick');
+            } }),
+        react_1.default.createElement(chat_1.Reference, { defaultExpanded: false, mode: 'detail', header: {
+                icon: 'close',
+                title: '参考来源'
+            }, listItems: testList, onHeaderClick: (expanded) => {
+                console.log('onHeaderClick', expanded);
+            }, onItemClick: (item, index) => {
+                console.log('onItemClick：', item, index);
+            }, onHeaderClose: () => {
+                console.log('Reference onClose');
+            }, onContentClick: () => {
+                console.log('Reference onDetailClick');
+            } }))), mountNode);

package/lib/rich-text-input/__docs__/demo/basic/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @demo 基本使用
+ * @en Basic
+ * @order 1
+ * @remarks <RichTextInput></RichTextInput> 组件的基本用法。
+ * - Basic usage of `RichTextInput`
+ */
+import '@alifd/chat/es/rich-text-input/style';

package/lib/rich-text-input/__docs__/demo/basic/index.js

@@ -0,0 +1,22 @@
+"use strict";
+/**
+ * @demo 基本使用
+ * @en Basic
+ * @order 1
+ * @remarks <RichTextInput></RichTextInput> 组件的基本用法。
+ * - Basic usage of `RichTextInput`
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const react_dom_1 = tslib_1.__importDefault(require("react-dom"));
+const chat_1 = require("@alifd/chat");
+require("@alifd/chat/es/rich-text-input/style");
+react_dom_1.default.render(react_1.default.createElement("div", { className: "origin-basic-demo" },
+    react_1.default.createElement(chat_1.RichTextInput, { placeholder: "\u8BF7\u8F93\u5165\u5185\u5BB9", onChange: value => {
+            console.log('onChange：', value);
+        }, header: react_1.default.createElement("div", null, "\u8FD9\u662F\u5934\u90E8"), footer: react_1.default.createElement("div", null, "\u8FD9\u662F\u5C3E\u90E8"), enableQuerySug: true, querySugList: [
+            { label: '相关问题1', value: '相关问题1' },
+            { label: '相关问题2', value: '相关问题2' },
+            { label: '相关问题3', value: '相关问题3' },
+        ] })), mountNode);

package/lib/select/__docs__/demo/basic/index.d.ts

@@ -0,0 +1 @@
+import '@alifd/chat/es/select/style';

package/lib/select/__docs__/demo/basic/index.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const react_dom_1 = tslib_1.__importDefault(require("react-dom"));
+const chat_1 = require("@alifd/chat");
+require("@alifd/chat/es/select/style");
+const onChange = (v) => {
+    console.log(v);
+};
+const options = [
+    { label: '选项1', value: 'option1' },
+    { label: '选项2', value: 'option2' },
+    { label: '选项3', value: 'option3', disabled: true },
+    { label: '选项4', value: 'option4' },
+];
+react_dom_1.default.render(react_1.default.createElement("div", null,
+    react_1.default.createElement(chat_1.Select, { display: "select", dataSource: options, defaultValue: "option1", onChange: onChange }),
+    react_1.default.createElement("div", { style: { marginTop: '16px' } },
+        react_1.default.createElement(chat_1.Select, { mode: "multiple", display: "button", onChange: (v) => {
+                console.log('button mode change:', v);
+            }, dataSource: options, value: ['option1', 'option3'] }))), mountNode);
+// flex: 1 0 calc(33.33% - 6px);
+// color: var(--btn-pure-normal-color, #333333);
+// margin-right: 8px;