From 9de6d289b91c08e8a6510688b5c4d6a05add799a Mon Sep 17 00:00:00 2001
From: chenshuai2144 <qixian.cs@outlook.com>
Date: Mon, 13 Jan 2025 01:29:04 +0800
Subject: [PATCH 1/4] =?UTF-8?q?chore:=20=E6=B7=BB=E5=8A=A0=20md-editor=20?=
 =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89=E6=B8=B2=E6=9F=93=E7=A4=BA=E4=BE=8B?=
 =?UTF-8?q?=E5=92=8C=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/bubble/demo/stream_markdown.md  |   7 +
 components/bubble/demo/stream_markdown.tsx | 303 +++++++++++++++++++++
 components/bubble/index.en-US.md           |   1 +
 components/bubble/index.zh-CN.md           |   1 +
 package.json                               |   5 +-
 5 files changed, 315 insertions(+), 2 deletions(-)
 create mode 100644 components/bubble/demo/stream_markdown.md
 create mode 100644 components/bubble/demo/stream_markdown.tsx

diff --git a/components/bubble/demo/stream_markdown.md b/components/bubble/demo/stream_markdown.md
new file mode 100644
index 000000000..13704d2c2
--- /dev/null
+++ b/components/bubble/demo/stream_markdown.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+配合 `@ant-design/md-editor` 实现自定义渲染内容。
+
+## en-US
+
+Cooperate with `@ant-design/md-editor` to achieve customized rendering content.
diff --git a/components/bubble/demo/stream_markdown.tsx b/components/bubble/demo/stream_markdown.tsx
new file mode 100644
index 000000000..075c85ade
--- /dev/null
+++ b/components/bubble/demo/stream_markdown.tsx
@@ -0,0 +1,303 @@
+import { UserOutlined } from '@ant-design/icons';
+import { MarkdownEditor, MarkdownEditorInstance, parserMdToSchema } from '@ant-design/md-editor';
+import { Bubble } from '@ant-design/x';
+import type { BubbleProps } from '@ant-design/x';
+import React, { useEffect, useRef } from 'react';
+
+const text = `## 创始人
+
+腾讯，全称深圳市腾讯计算机系统有限公司，是由五位创始人共同创立的，他们是马化腾、张志东、许晨晔、陈一丹和曾李青。 以下是关于这些创始人的详细信息： 马化腾 马化腾，1971 年 10 月 29 日出生于广东省东方县（现海南省东方市）八所港，广东汕头人，汉族，无党派人士。他毕业于深圳大学电子工程系计算机专业。马化腾是腾讯科技（深圳）有限公司的创始人、董事会主席、首席执行官，并曾是中华人民共和国第十二、十三届全国人民代表大会代表 。马化腾在 1998 年 11 月 11 日与合伙人共同注册成立了腾讯，并在 2004 年 6 月 16 日带领腾讯在香港联合交易所有限公司主板上市。 张志东 张志东，马化腾的同学，被称为 QQ 之父。他的计算机技术非常出色，曾是深圳大学最拔尖的学生之一。张志东在腾讯担任 CTO，并在 2014 年 9 月离职，转任腾讯公司终身荣誉顾问及腾讯学院荣誉院长等职位 。
+
+<!-- {"MarkdownType": "section", "id": "16" } -->
+
+
+## 表格
+
+
+| 业务          | 2021Q1  | 2021Q2  | 2021Q3  | 2021Q4  | 2022Q1  | 2022Q2  | 2022Q3  | 2022Q4  | 2023Q1  | 2023Q2  | 2023Q3  | 2023Q4  |
+| ------------- | ------- | ------- | ------- | ------- | ------- | ------- | ------- | ------- | ------- | ------- | ------- | ------- |
+| 收入          | 135,303 | 138,259 | 142,368 | 144,188 | 135,471 | 134,034 | 140,093 | 144,954 | 149,986 | 149,208 | 154,625 | 155,200 |
+| 增值服务      | 72,443  | 72,013  | 75,203  | 71,913  | 72,738  | 71,683  | 72,727  | 70,417  | 79,337  | 74,211  | 75,748  | 69,100  |
+| 网络游戏     | 43,600  | 43,000  | 44,900  | 42,800  | 43,600  | 42,500  | na      | na      | na      | 44,500  | 46,000  | 40,900  |
+| 社交网络收入 | 28,800  | 29,000  | 30,300  | 29,100  | 29,100  | 29,200  | na      | na      | na      | 29,700  | 29,700  | 28,200  |
+| 网络广告      | 21,820  | 22,833  | 22,495  | 21,518  | 17,988  | 18,638  | 21,443  | 24,660  | 20,964  | 25,003  | 25,721  | 29,794  |
+| 其他          | 41,040  | 43,413  | 44,670  | 50,757  | 44,745  | 43,713  | 45,923  | 49,877  | 49,685  | 49,994  | 53,156  | 54,379  |
+| 金融科技     | 39,028  | 41,892  | 43,317  | 47,958  | 42,768  | 42,208  | 44,844  | 47,244  | 48,701  | 48,635  | 52,048  | 52,435  |
+| 云           | 62,012   | 1,521   | 1,353   | 2,799   | 1,977   | 1,505   | 1,079   | 2,633   | 984     | 1,359   | 1,108   | 1,944   |
+
+
+## 定义列表
+
+| 业务 | 增值服务 | 网络游戏 | 社交网络收入 | 网络广告 | 其他    | 金融科技 | 云      |
+| ---- | -------- | -------- | ------------ | -------- | ------- | -------- | ------- |
+| 收入 | 135,303  | 138,259  | 142,368      | 144,188  | 135,471 | 134,034  | 140,093 |
+
+
+
+## Bar 图表
+
+<!-- {"chartType": "bar", "x":"业务", "y":"2021Q1"} -->
+
+| 业务          | 2021Q1  | 2021Q2  | 2021Q3  | 2021Q4  |
+| ------------- | ------- | ------- | ------- | ------- |
+| 收入          | 135,303 | 138,259 | 142,368 | 144,188 | 
+| 增值服务      | 72,443  | 72,013  | 75,203  | 71,913  |
+| 网络游戏     | 43,600  | 43,000  | 44,900  | 42,800  |
+| 社交网络收入 | 28,800  | 29,000  | 30,300  | 29,100  | 
+| 网络广告      | 21,820  | 22,833  | 22,495  | 21,518  | 
+| 其他          | 41,040  | 43,413  | 44,670  | 50,757  | 
+| 金融科技     | 39,028  | 41,892  | 43,317  | 47,958  | 
+| 云           | 162,012   | 111,521   | 111,353   | 112,799   |
+
+## Line 图表
+
+<!-- {"chartType": "line", "x":"业务", "y":"2021Q1"} -->
+
+| 业务          | 2021Q1  | 2021Q2  | 2021Q3  | 2021Q4  |
+| ------------- | ------- | ------- | ------- | ------- |
+| 收入          | 135,303 | 138,259 | 142,368 | 144,188 | 
+| 增值服务      | 72,443  | 72,013  | 75,203  | 71,913  |
+| 网络游戏     | 43,600  | 43,000  | 44,900  | 42,800  |
+| 社交网络收入 | 28,800  | 29,000  | 30,300  | 29,100  | 
+| 网络广告      | 21,820  | 22,833  | 22,495  | 21,518  | 
+| 其他          | 41,040  | 43,413  | 44,670  | 50,757  | 
+| 金融科技     | 39,028  | 41,892  | 43,317  | 47,958  | 
+| 云           | 162,012   | 111,521   | 111,353   | 112,799   | 
+
+## 图表 column
+
+<!-- {"chartType": "column", "x":"业务", "y":"2021Q1"} -->
+
+| 业务          | 2021Q1  | 2021Q2  | 2021Q3  | 2021Q4  |
+| ------------- | ------- | ------- | ------- | ------- |
+| 收入          | 135,303 | 138,259 | 142,368 | 144,188 | 
+| 增值服务      | 72,443  | 72,013  | 75,203  | 71,913  |
+| 网络游戏     | 43,600  | 43,000  | 44,900  | 42,800  |
+| 社交网络收入 | 28,800  | 29,000  | 30,300  | 29,100  | 
+| 网络广告      | 21,820  | 22,833  | 22,495  | 21,518  | 
+| 其他          | 41,040  | 43,413  | 44,670  | 50,757  | 
+| 金融科技     | 39,028  | 41,892  | 43,317  | 47,958  | 
+| 云           | 162,012   | 111,521   | 111,353   | 112,799   |
+
+## 图表 pie
+
+<!-- {"chartType": "pie", "x":"业务", "y":"2021Q1"} -->
+
+| 业务          | 2021Q1  | 2021Q2  | 2021Q3  | 2021Q4  |
+| ------------- | ------- | ------- | ------- | ------- |
+| 收入          | 135,303 | 138,259 | 142,368 | 144,188 | 
+| 增值服务      | 72,443  | 72,013  | 75,203  | 71,913  |
+| 网络游戏     | 43,600  | 43,000  | 44,900  | 42,800  |
+| 社交网络收入 | 28,800  | 29,000  | 30,300  | 29,100  | 
+| 网络广告      | 21,820  | 22,833  | 22,495  | 21,518  | 
+| 其他          | 41,040  | 43,413  | 44,670  | 50,757  | 
+| 金融科技     | 39,028  | 41,892  | 43,317  | 47,958  | 
+| 云           | 162,012   | 111,521   | 111,353   | 112,799   | 
+
+## 图表 area
+
+<!-- {"chartType": "area", "x":"业务", "y":"2021Q1"} -->
+
+| 业务          | 2021Q1  | 2021Q2  | 2021Q3  | 2021Q4  |
+| ------------- | ------- | ------- | ------- | ------- |
+| 收入          | 135,303 | 138,259 | 142,368 | 144,188 | 
+| 增值服务      | 72,443  | 72,013  | 75,203  | 71,913  |
+| 网络游戏     | 43,600  | 43,000  | 44,900  | 42,800  |
+| 社交网络收入 | 28,800  | 29,000  | 30,300  | 29,100  | 
+| 网络广告      | 21,820  | 22,833  | 22,495  | 21,518  | 
+| 其他          | 41,040  | 43,413  | 44,670  | 50,757  | 
+| 金融科技     | 39,028  | 41,892  | 43,317  | 47,958  | 
+| 云           | 162,012   | 111,521   | 111,353   | 112,799   | 
+
+
+## 图片
+
+![](https://mdn.alipayobjects.com/huamei_gcee1x/afts/img/A*9F0qRYV8EjUAAAAAAAAAAAAADml6AQ/original)
+
+## 视频
+
+![video:视频名](https://gw.alipayobjects.com/v/huamei_gcee1x/afts/video/A*NudQQry0ERwAAAAAAAAAAAAADtN3AQ)
+
+
+## 附件
+<!-- {"updateTime":"2014-07-29","collaborators":[{"Chen Shuai":33},{"Chen Shuai":33},{"Chen Shuai":33},{"Rui Ma":39},{"Rui Ma":39},{"Rui Ma":39},{"Chen Shuai":33},{"Rui Ma":39},{"ivan.cseeing":32},{"InvRet Sales Team":34},{"Chen Shuai":33},{"Rui Ma":39},{"Rui Ma":39},{"Chen Shuai":33},{"Rui Ma":39},{"Rui Ma":39},{"Chen Shuai":33}]} -->
+![attachment:测试附件.pdf](https://gw.alipayobjects.com/v/huamei_gcee1x/afts/video/A*NudQQry0ERwAAAAAAAAAAAAADtN3AQ)
+
+
+## 引用
+
+上上任的武汉大学校长是李晓红。[^1][^2]
+
+| 业务          | 2021Q1  | 2021Q2  | 2021Q3  | 2021Q4  | 
+| ------------- | ------- | ------- | ------- | ------- | 
+| 收入          | 135,303 | 138,259 | 142,368 | 144,188 | 
+| 增值服务      | 72,443  | 72,013  | 75,203  | 71,913  | 
+| 网络游戏     | 43,600  | 43,000  | 44,900  | 42,800  |
+| 社交网络收入 | 28,800  | 29,000  | 30,300  | 29,100  | 
+| 网络广告      | 21,820  | 22,833  | 22,495  | 21,518  | 
+| 其他          | 41,040  | 43,413  | 44,670  | 50,757  | 
+| 金融科技     | 39,028  | 41,892  | 43,317  | 47,958  | 
+| 云           | 162,012   | 111,521   | 111,353   | 112,799   |
+
+> 数据来自 [^3]
+
+
+## 列表
+
+腾讯六大事业群腾讯六大事业群腾讯六大事业群腾讯六大事业群腾讯六大事业群腾讯六大事业群腾讯六大事业群腾讯六大事业群腾讯六大事业群腾讯六大事业群腾讯六大事业群腾讯六大事业群腾讯六大事业群腾讯六大事业群
+
+- 互动娱乐事业群
+- 企业服务事业群
+- **微信**事业群
+- 互联网平台事业群
+- 技术工程事业群
+
+
+## 表单
+
+\`\`\`schema
+[
+  {
+    "title": "标题",
+    "dataIndex": "title",
+    "formItemProps": {
+      "rules": [{ "required": true, "message": "此项为必填项" }]
+    },
+    "width": "md"
+  },
+  {
+    "title": "状态",
+    "dataIndex": "state",
+    "valueType": "select",
+    "width": "md"
+  },
+  { "title": "标签", "dataIndex": "labels", "width": "md" },
+  {
+    "valueType": "switch",
+    "title": "开关",
+    "dataIndex": "Switch",
+    "fieldProps": { "style": { "width": "200px" } },
+    "width": "md"
+  },
+  {
+    "title": "创建时间",
+    "key": "showTime",
+    "dataIndex": "createName",
+    "width": "md"
+  },
+  { "title": "更新时间", "dataIndex": "updateName" },
+  {
+    "title": "分组",
+    "valueType": "group",
+    "columns": [
+      {
+        "title": "状态",
+        "dataIndex": "groupState",
+        "valueType": "select",
+        "width": "xs",
+        "colProps": { "xs": 12 }
+      },
+      {
+        "title": "标题",
+        "width": "md",
+        "dataIndex": "groupTitle",
+        "colProps": { "xs": 12 },
+        "formItemProps": {
+          "rules": [{ "required": true, "message": "此项为必填项" }]
+        }
+      }
+    ]
+  },
+  {
+    "title": "列表",
+    "valueType": "formList",
+    "dataIndex": "list",
+    "columns": [
+      {
+        "valueType": "group",
+        "columns": [
+          {
+            "title": "状态",
+            "dataIndex": "state",
+            "valueType": "select",
+            "colProps": { "xs": 24, "sm": 12 },
+            "width": "xs"
+          },
+          {
+            "title": "标题",
+            "dataIndex": "title",
+            "width": "md",
+            "formItemProps": {
+              "rules": [{ "required": true, "message": "此项为必填项" }]
+            },
+            "colProps": { "xs": 24, "sm": 12 }
+          }
+        ]
+      },
+      { "valueType": "dateTime", "dataIndex": "currentTime", "width": "md" }
+    ]
+  },
+  {
+    "title": "创建时间",
+    "dataIndex": "created_at",
+    "valueType": "dateRange",
+    "width": "md"
+  }
+]
+\`\`\`
+
+
+## 代码
+
+\`\`\`java
+Class A {
+  main() {
+    System.out.println("Hello World");
+  }
+}
+\`\`\`
+
+## 删除线
+~~腾讯六大事业群腾讯六大事业群腾讯六大事业群~~
+
+`.trim();
+
+const RenderMarkdown = ({ content }: { content: string }) => {
+  const instance = useRef<MarkdownEditorInstance | undefined>(undefined);
+  console.log(content);
+  useEffect(() => {
+    instance.current?.store.updateNodeList(parserMdToSchema(content).schema);
+  }, [content]);
+  return (
+    <MarkdownEditor
+      editorRef={instance}
+      toc={false}
+      reportMode={false}
+      width={'80vw'}
+      typewriter
+      height={'auto'}
+      readonly
+      initValue={content}
+    />
+  );
+};
+
+const renderMarkdown: BubbleProps['messageRender'] = (content) => (
+  <RenderMarkdown content={content} />
+);
+
+const App = () => {
+  return (
+    <div style={{ minHeight: 100, margin: 24 }}>
+      <Bubble
+        typing
+        variant="outlined"
+        content={text}
+        messageRender={renderMarkdown}
+        avatar={{ icon: <UserOutlined /> }}
+      />
+    </div>
+  );
+};
+
+export default App;
diff --git a/components/bubble/index.en-US.md b/components/bubble/index.en-US.md
index dd5a84789..9f76ffc70 100644
--- a/components/bubble/index.en-US.md
+++ b/components/bubble/index.en-US.md
@@ -25,6 +25,7 @@ Often used when chatting.
 <code src="./demo/loading.tsx">Loading</code>
 <code src="./demo/typing.tsx">Typing effect</code>
 <code src="./demo/markdown.tsx">Content render</code>
+<code src="./demo/stream_markdown.tsx">md-editor render</code>
 <code src="./demo/variant.tsx">Variant</code>
 <code src="./demo/shape.tsx">Shape</code>
 <code src="./demo/list.tsx">Bubble List</code>
diff --git a/components/bubble/index.zh-CN.md b/components/bubble/index.zh-CN.md
index 66e122fad..d0d7d3b95 100644
--- a/components/bubble/index.zh-CN.md
+++ b/components/bubble/index.zh-CN.md
@@ -26,6 +26,7 @@ demo:
 <code src="./demo/loading.tsx">加载中</code>
 <code src="./demo/typing.tsx">打字效果</code>
 <code src="./demo/markdown.tsx">自定义渲染</code>
+<code src="./demo/stream_markdown.tsx">使用 md-editor 自定义渲染</code>
 <code src="./demo/variant.tsx">变体</code>
 <code src="./demo/shape.tsx">形状</code>
 <code src="./demo/list.tsx">气泡列表</code>
diff --git a/package.json b/package.json
index e135af9d6..98d051247 100644
--- a/package.json
+++ b/package.json
@@ -97,6 +97,7 @@
   },
   "devDependencies": {
     "@ant-design/tools": "^18.0.2",
+    "@ant-design/md-editor": "^1.12.31",
     "@ant-design/v5-patch-for-react-19": "^1.0.3",
     "@antv/gpt-vis": "^0.4.1",
     "@biomejs/biome": "^1.9.0",
@@ -181,7 +182,6 @@
     "father": "4.5.1-beta.4",
     "fetch-jsonp": "^1.3.0",
     "fs-extra": "^11.2.0",
-    "react-intl": "7.0.4",
     "gh-pages": "^6.1.1",
     "glob": "^11.0.0",
     "happy-dom": "^16.0.0",
@@ -234,6 +234,7 @@
     "react-highlight-words": "^0.20.0",
     "react-infinite-scroll-component": "^6.1.0",
     "react-intersection-observer": "^9.13.1",
+    "react-intl": "7.0.4",
     "react-resizable": "^3.0.5",
     "react-router-dom": "^7.0.1",
     "react-sticky-box": "^2.0.5",
@@ -283,4 +284,4 @@
       "limit": "350 KiB"
     }
   ]
-}
\ No newline at end of file
+}

From 26ecf2b5a36b3615d91183f77bdf19c7b1d6ac1e Mon Sep 17 00:00:00 2001
From: chenshuai2144 <qixian.cs@outlook.com>
Date: Mon, 13 Jan 2025 01:30:12 +0800
Subject: [PATCH 2/4] =?UTF-8?q?fix:=20=E8=B0=83=E6=95=B4=20Bubble=20?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E7=9A=84=20typing=20=E5=B1=9E=E6=80=A7?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/bubble/demo/stream_markdown.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/components/bubble/demo/stream_markdown.tsx b/components/bubble/demo/stream_markdown.tsx
index 075c85ade..3fd85914b 100644
--- a/components/bubble/demo/stream_markdown.tsx
+++ b/components/bubble/demo/stream_markdown.tsx
@@ -290,7 +290,10 @@ const App = () => {
   return (
     <div style={{ minHeight: 100, margin: 24 }}>
       <Bubble
-        typing
+        typing={{
+          step: 10,
+          interval: 50,
+        }}
         variant="outlined"
         content={text}
         messageRender={renderMarkdown}

From 608849bc13717582ebadbf4c1c29a7161757545d Mon Sep 17 00:00:00 2001
From: chenshuai2144 <qixian.cs@outlook.com>
Date: Mon, 13 Jan 2025 01:32:57 +0800
Subject: [PATCH 3/4] =?UTF-8?q?fix:=20=E7=A7=BB=E9=99=A4=20RenderMarkdown?=
 =?UTF-8?q?=20=E7=BB=84=E4=BB=B6=E4=B8=AD=E7=9A=84=E8=B0=83=E8=AF=95?=
 =?UTF-8?q?=E6=97=A5=E5=BF=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/bubble/demo/stream_markdown.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/components/bubble/demo/stream_markdown.tsx b/components/bubble/demo/stream_markdown.tsx
index 3fd85914b..fd1517478 100644
--- a/components/bubble/demo/stream_markdown.tsx
+++ b/components/bubble/demo/stream_markdown.tsx
@@ -264,7 +264,6 @@ Class A {
 
 const RenderMarkdown = ({ content }: { content: string }) => {
   const instance = useRef<MarkdownEditorInstance | undefined>(undefined);
-  console.log(content);
   useEffect(() => {
     instance.current?.store.updateNodeList(parserMdToSchema(content).schema);
   }, [content]);

From b74aa85d3acc2d3e87539766f2615385a39fdfb2 Mon Sep 17 00:00:00 2001
From: chenshuai2144 <qixian.cs@outlook.com>
Date: Mon, 13 Jan 2025 01:34:30 +0800
Subject: [PATCH 4/4] =?UTF-8?q?test:=20=E6=9B=B4=E6=96=B0=E5=BF=AB?=
 =?UTF-8?q?=E7=85=A7=E4=BB=A5=E6=B7=BB=E5=8A=A0=20radio=20=E8=BE=93?=
 =?UTF-8?q?=E5=85=A5=E7=9A=84=20name=20=E5=B1=9E=E6=80=A7=E5=92=8C?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4=E8=A7=92=E8=89=B2=E5=B1=9E=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../__snapshots__/demo-extend.test.ts.snap    |   9 +-
 .../__snapshots__/demo.test.tsx.snap          |  11 +-
 .../__snapshots__/demo-extend.test.ts.snap    |  92 +++++++-------
 .../__tests__/__snapshots__/demo.test.ts.snap |  92 +++++++-------
 .../__snapshots__/index.test.tsx.snap         | 118 +++++++++---------
 .../__snapshots__/demo-extend.test.ts.snap    |   3 +
 .../__tests__/__snapshots__/demo.test.ts.snap |   3 +
 7 files changed, 168 insertions(+), 160 deletions(-)

diff --git a/components/attachments/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/attachments/__tests__/__snapshots__/demo-extend.test.ts.snap
index 0e2bf99ec..c332827d5 100644
--- a/components/attachments/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/attachments/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -747,8 +747,9 @@ exports[`renders components/attachments/demo/overflow.tsx extend context correct
     <div
       aria-label="segmented control"
       class="ant-segmented"
-      role="listbox"
+      role="radiogroup"
       style="margin-inline-end: auto;"
+      tabindex="0"
     >
       <div
         class="ant-segmented-group"
@@ -759,12 +760,12 @@ exports[`renders components/attachments/demo/overflow.tsx extend context correct
           <input
             checked=""
             class="ant-segmented-item-input"
+            name="test-id"
             type="radio"
           />
           <div
             aria-selected="true"
             class="ant-segmented-item-label"
-            role="option"
             title="Wrap"
           >
             Wrap
@@ -775,12 +776,12 @@ exports[`renders components/attachments/demo/overflow.tsx extend context correct
         >
           <input
             class="ant-segmented-item-input"
+            name="test-id"
             type="radio"
           />
           <div
             aria-selected="false"
             class="ant-segmented-item-label"
-            role="option"
             title="Scroll X"
           >
             Scroll X
@@ -791,12 +792,12 @@ exports[`renders components/attachments/demo/overflow.tsx extend context correct
         >
           <input
             class="ant-segmented-item-input"
+            name="test-id"
             type="radio"
           />
           <div
             aria-selected="false"
             class="ant-segmented-item-label"
-            role="option"
             title="Scroll Y"
           >
             Scroll Y
diff --git a/components/attachments/__tests__/__snapshots__/demo.test.tsx.snap b/components/attachments/__tests__/__snapshots__/demo.test.tsx.snap
index fcd30dba8..926721f28 100644
--- a/components/attachments/__tests__/__snapshots__/demo.test.tsx.snap
+++ b/components/attachments/__tests__/__snapshots__/demo.test.tsx.snap
@@ -677,8 +677,9 @@ Array [
       <div
         aria-label="segmented control"
         class="ant-segmented"
-        role="listbox"
+        role="radiogroup"
         style="margin-inline-end:auto"
+        tabindex="0"
       >
         <div
           class="ant-segmented-group"
@@ -689,12 +690,12 @@ Array [
             <input
               checked=""
               class="ant-segmented-item-input"
+              name="test-id"
               type="radio"
             />
             <div
               aria-selected="true"
               class="ant-segmented-item-label"
-              role="option"
               title="Wrap"
             >
               Wrap
@@ -705,12 +706,12 @@ Array [
           >
             <input
               class="ant-segmented-item-input"
+              name="test-id"
               type="radio"
             />
             <div
               aria-selected="false"
               class="ant-segmented-item-label"
-              role="option"
               title="Scroll X"
             >
               Scroll X
@@ -721,12 +722,12 @@ Array [
           >
             <input
               class="ant-segmented-item-input"
+              name="test-id"
               type="radio"
             />
             <div
               aria-selected="false"
               class="ant-segmented-item-label"
-              role="option"
               title="Scroll Y"
             >
               Scroll Y
@@ -1905,7 +1906,7 @@ Array [
 exports[`renders components/attachments/demo/placeholder.tsx correctly 1`] = `
 <div
   class="ant-flex ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
-  style="padding:16px;background:rgba(0, 0, 0, 0.04)"
+  style="padding:16px;background:rgba(0,0,0,0.04)"
 >
   <div
     style="border-radius:6px;overflow:hidden;background:#ffffff"
diff --git a/components/bubble/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/bubble/__tests__/__snapshots__/demo-extend.test.ts.snap
index 9b97babf3..04321d8ee 100644
--- a/components/bubble/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/bubble/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -442,7 +442,7 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
       class="ant-bubble-content ant-bubble-content-outlined ant-bubble-content-round"
     >
       <div
-        class="acss-8wqn66"
+        class="acss-xvmduq"
       >
         block block block block block block block block block block block block block block block block block block block block block block block block block
       </div>
@@ -455,7 +455,7 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
       class="ant-bubble-content ant-bubble-content-shadow"
     >
       <div
-        class="acss-13qb3y4"
+        class="acss-56hdzn"
       >
         fixed width content
       </div>
@@ -496,7 +496,7 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
       class="ant-bubble-content ant-bubble-content-outlined ant-bubble-content-round"
     >
       <div
-        class="acss-8wqn66"
+        class="acss-xvmduq"
       >
         block block block block block block block block block block block block block block block block block block block block block block block block block
       </div>
@@ -509,7 +509,7 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
       class="ant-bubble-content ant-bubble-content-shadow"
     >
       <div
-        class="acss-13qb3y4"
+        class="acss-56hdzn"
       >
         fixed width content
       </div>
@@ -529,7 +529,7 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
     class="ant-bubble ant-bubble-start"
   >
     <div
-      class="ant-bubble-avatar acss-8wqn66"
+      class="ant-bubble-avatar acss-xvmduq"
     >
       <span
         class="ant-avatar ant-avatar-circle ant-avatar-image"
@@ -543,7 +543,7 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
       class="ant-bubble-content-wrapper"
     >
       <div
-        class="ant-bubble-header acss-8wqn66"
+        class="ant-bubble-header acss-xvmduq"
       >
         header
       </div>
@@ -553,7 +553,7 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
         string bubble
       </div>
       <div
-        class="ant-bubble-footer acss-8wqn66"
+        class="ant-bubble-footer acss-xvmduq"
       >
         <div>
           footer
@@ -565,7 +565,7 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
     class="ant-bubble ant-bubble-start"
   >
     <div
-      class="ant-bubble-avatar acss-8wqn66"
+      class="ant-bubble-avatar acss-xvmduq"
     >
       <span
         class="ant-avatar ant-avatar-circle ant-avatar-image"
@@ -579,7 +579,7 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
       class="ant-bubble-content-wrapper"
     >
       <div
-        class="ant-bubble-header acss-8wqn66"
+        class="ant-bubble-header acss-xvmduq"
       >
         header
       </div>
@@ -589,7 +589,7 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
         longgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
       </div>
       <div
-        class="ant-bubble-footer acss-8wqn66"
+        class="ant-bubble-footer acss-xvmduq"
       >
         <div>
           footer
@@ -601,7 +601,7 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
     class="ant-bubble ant-bubble-start"
   >
     <div
-      class="ant-bubble-avatar acss-8wqn66"
+      class="ant-bubble-avatar acss-xvmduq"
     >
       <span
         class="ant-avatar ant-avatar-circle ant-avatar-image"
@@ -615,7 +615,7 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
       class="ant-bubble-content-wrapper"
     >
       <div
-        class="ant-bubble-header acss-8wqn66"
+        class="ant-bubble-header acss-xvmduq"
       >
         header
       </div>
@@ -623,13 +623,13 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
         class="ant-bubble-content ant-bubble-content-outlined ant-bubble-content-round acss-c2h5kd"
       >
         <div
-          class="acss-8wqn66"
+          class="acss-xvmduq"
         >
           block block block block block block block block block block block block block block block block block block block block block block block block block
         </div>
       </div>
       <div
-        class="ant-bubble-footer acss-8wqn66"
+        class="ant-bubble-footer acss-xvmduq"
       >
         <div>
           footer
@@ -641,7 +641,7 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
     class="ant-bubble ant-bubble-start"
   >
     <div
-      class="ant-bubble-avatar acss-8wqn66"
+      class="ant-bubble-avatar acss-xvmduq"
     >
       <span
         class="ant-avatar ant-avatar-circle ant-avatar-image"
@@ -655,7 +655,7 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
       class="ant-bubble-content-wrapper"
     >
       <div
-        class="ant-bubble-header acss-8wqn66"
+        class="ant-bubble-header acss-xvmduq"
       >
         header
       </div>
@@ -663,13 +663,13 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
         class="ant-bubble-content ant-bubble-content-shadow acss-c2h5kd"
       >
         <div
-          class="acss-13qb3y4"
+          class="acss-56hdzn"
         >
           fixed width content
         </div>
       </div>
       <div
-        class="ant-bubble-footer acss-8wqn66"
+        class="ant-bubble-footer acss-xvmduq"
       >
         <div>
           footer
@@ -691,7 +691,7 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
     class="ant-bubble ant-bubble-end"
   >
     <div
-      class="ant-bubble-avatar acss-8wqn66"
+      class="ant-bubble-avatar acss-xvmduq"
     >
       <span
         class="ant-avatar ant-avatar-circle ant-avatar-image"
@@ -705,7 +705,7 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
       class="ant-bubble-content-wrapper"
     >
       <div
-        class="ant-bubble-header acss-8wqn66"
+        class="ant-bubble-header acss-xvmduq"
       >
         header
       </div>
@@ -715,7 +715,7 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
         string bubble
       </div>
       <div
-        class="ant-bubble-footer acss-8wqn66"
+        class="ant-bubble-footer acss-xvmduq"
       >
         <div>
           footer
@@ -727,7 +727,7 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
     class="ant-bubble ant-bubble-end"
   >
     <div
-      class="ant-bubble-avatar acss-8wqn66"
+      class="ant-bubble-avatar acss-xvmduq"
     >
       <span
         class="ant-avatar ant-avatar-circle ant-avatar-image"
@@ -741,7 +741,7 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
       class="ant-bubble-content-wrapper"
     >
       <div
-        class="ant-bubble-header acss-8wqn66"
+        class="ant-bubble-header acss-xvmduq"
       >
         header
       </div>
@@ -751,7 +751,7 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
         longgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
       </div>
       <div
-        class="ant-bubble-footer acss-8wqn66"
+        class="ant-bubble-footer acss-xvmduq"
       >
         <div>
           footer
@@ -763,7 +763,7 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
     class="ant-bubble ant-bubble-end"
   >
     <div
-      class="ant-bubble-avatar acss-8wqn66"
+      class="ant-bubble-avatar acss-xvmduq"
     >
       <span
         class="ant-avatar ant-avatar-circle ant-avatar-image"
@@ -777,7 +777,7 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
       class="ant-bubble-content-wrapper"
     >
       <div
-        class="ant-bubble-header acss-8wqn66"
+        class="ant-bubble-header acss-xvmduq"
       >
         header
       </div>
@@ -785,13 +785,13 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
         class="ant-bubble-content ant-bubble-content-outlined ant-bubble-content-round acss-c2h5kd"
       >
         <div
-          class="acss-8wqn66"
+          class="acss-xvmduq"
         >
           block block block block block block block block block block block block block block block block block block block block block block block block block
         </div>
       </div>
       <div
-        class="ant-bubble-footer acss-8wqn66"
+        class="ant-bubble-footer acss-xvmduq"
       >
         <div>
           footer
@@ -803,7 +803,7 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
     class="ant-bubble ant-bubble-end"
   >
     <div
-      class="ant-bubble-avatar acss-8wqn66"
+      class="ant-bubble-avatar acss-xvmduq"
     >
       <span
         class="ant-avatar ant-avatar-circle ant-avatar-image"
@@ -817,7 +817,7 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
       class="ant-bubble-content-wrapper"
     >
       <div
-        class="ant-bubble-header acss-8wqn66"
+        class="ant-bubble-header acss-xvmduq"
       >
         header
       </div>
@@ -825,13 +825,13 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
         class="ant-bubble-content ant-bubble-content-shadow acss-c2h5kd"
       >
         <div
-          class="acss-13qb3y4"
+          class="acss-56hdzn"
         >
           fixed width content
         </div>
       </div>
       <div
-        class="ant-bubble-footer acss-8wqn66"
+        class="ant-bubble-footer acss-xvmduq"
       >
         <div>
           footer
@@ -856,7 +856,7 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
       class="ant-bubble ant-bubble-start"
     >
       <div
-        class="ant-bubble-avatar acss-8wqn66"
+        class="ant-bubble-avatar acss-xvmduq"
       >
         <span
           class="ant-avatar ant-avatar-circle ant-avatar-image"
@@ -870,7 +870,7 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
         class="ant-bubble-content-wrapper"
       >
         <div
-          class="ant-bubble-header acss-8wqn66"
+          class="ant-bubble-header acss-xvmduq"
         >
           header
         </div>
@@ -880,7 +880,7 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
           string bubble
         </div>
         <div
-          class="ant-bubble-footer acss-8wqn66"
+          class="ant-bubble-footer acss-xvmduq"
         >
           <div>
             footer
@@ -892,7 +892,7 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
       class="ant-bubble ant-bubble-end"
     >
       <div
-        class="ant-bubble-avatar acss-8wqn66"
+        class="ant-bubble-avatar acss-xvmduq"
       >
         <span
           class="ant-avatar ant-avatar-circle ant-avatar-image"
@@ -906,7 +906,7 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
         class="ant-bubble-content-wrapper"
       >
         <div
-          class="ant-bubble-header acss-8wqn66"
+          class="ant-bubble-header acss-xvmduq"
         >
           header
         </div>
@@ -916,7 +916,7 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
           longgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
         </div>
         <div
-          class="ant-bubble-footer acss-8wqn66"
+          class="ant-bubble-footer acss-xvmduq"
         >
           <div>
             footer
@@ -928,7 +928,7 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
       class="ant-bubble ant-bubble-start"
     >
       <div
-        class="ant-bubble-avatar acss-8wqn66"
+        class="ant-bubble-avatar acss-xvmduq"
       >
         <span
           class="ant-avatar ant-avatar-circle ant-avatar-image"
@@ -942,7 +942,7 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
         class="ant-bubble-content-wrapper"
       >
         <div
-          class="ant-bubble-header acss-8wqn66"
+          class="ant-bubble-header acss-xvmduq"
         >
           header
         </div>
@@ -950,13 +950,13 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
           class="ant-bubble-content ant-bubble-content-outlined ant-bubble-content-round acss-c2h5kd"
         >
           <div
-            class="acss-8wqn66"
+            class="acss-xvmduq"
           >
             block block block block block block block block block block block block block block block block block block block block block block block block block
           </div>
         </div>
         <div
-          class="ant-bubble-footer acss-8wqn66"
+          class="ant-bubble-footer acss-xvmduq"
         >
           <div>
             footer
@@ -968,7 +968,7 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
       class="ant-bubble ant-bubble-end"
     >
       <div
-        class="ant-bubble-avatar acss-8wqn66"
+        class="ant-bubble-avatar acss-xvmduq"
       >
         <span
           class="ant-avatar ant-avatar-circle ant-avatar-image"
@@ -982,7 +982,7 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
         class="ant-bubble-content-wrapper"
       >
         <div
-          class="ant-bubble-header acss-8wqn66"
+          class="ant-bubble-header acss-xvmduq"
         >
           header
         </div>
@@ -990,13 +990,13 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
           class="ant-bubble-content ant-bubble-content-shadow acss-c2h5kd"
         >
           <div
-            class="acss-13qb3y4"
+            class="acss-56hdzn"
           >
             fixed width content
           </div>
         </div>
         <div
-          class="ant-bubble-footer acss-8wqn66"
+          class="ant-bubble-footer acss-xvmduq"
         >
           <div>
             footer
diff --git a/components/bubble/__tests__/__snapshots__/demo.test.ts.snap b/components/bubble/__tests__/__snapshots__/demo.test.ts.snap
index 28f3ea13a..823f6ed36 100644
--- a/components/bubble/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/bubble/__tests__/__snapshots__/demo.test.ts.snap
@@ -442,7 +442,7 @@ Array [
         class="ant-bubble-content ant-bubble-content-outlined ant-bubble-content-round"
       >
         <div
-          class="acss-8wqn66"
+          class="acss-xvmduq"
         >
           block block block block block block block block block block block block block block block block block block block block block block block block block
         </div>
@@ -455,7 +455,7 @@ Array [
         class="ant-bubble-content ant-bubble-content-shadow"
       >
         <div
-          class="acss-13qb3y4"
+          class="acss-56hdzn"
         >
           fixed width content
         </div>
@@ -496,7 +496,7 @@ Array [
         class="ant-bubble-content ant-bubble-content-outlined ant-bubble-content-round"
       >
         <div
-          class="acss-8wqn66"
+          class="acss-xvmduq"
         >
           block block block block block block block block block block block block block block block block block block block block block block block block block
         </div>
@@ -509,7 +509,7 @@ Array [
         class="ant-bubble-content ant-bubble-content-shadow"
       >
         <div
-          class="acss-13qb3y4"
+          class="acss-56hdzn"
         >
           fixed width content
         </div>
@@ -529,7 +529,7 @@ Array [
       class="ant-bubble ant-bubble-start"
     >
       <div
-        class="ant-bubble-avatar acss-8wqn66"
+        class="ant-bubble-avatar acss-xvmduq"
       >
         <span
           class="ant-avatar ant-avatar-circle ant-avatar-image"
@@ -543,7 +543,7 @@ Array [
         class="ant-bubble-content-wrapper"
       >
         <div
-          class="ant-bubble-header acss-8wqn66"
+          class="ant-bubble-header acss-xvmduq"
         >
           header
         </div>
@@ -553,7 +553,7 @@ Array [
           string bubble
         </div>
         <div
-          class="ant-bubble-footer acss-8wqn66"
+          class="ant-bubble-footer acss-xvmduq"
         >
           <div>
             footer
@@ -565,7 +565,7 @@ Array [
       class="ant-bubble ant-bubble-start"
     >
       <div
-        class="ant-bubble-avatar acss-8wqn66"
+        class="ant-bubble-avatar acss-xvmduq"
       >
         <span
           class="ant-avatar ant-avatar-circle ant-avatar-image"
@@ -579,7 +579,7 @@ Array [
         class="ant-bubble-content-wrapper"
       >
         <div
-          class="ant-bubble-header acss-8wqn66"
+          class="ant-bubble-header acss-xvmduq"
         >
           header
         </div>
@@ -589,7 +589,7 @@ Array [
           longgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
         </div>
         <div
-          class="ant-bubble-footer acss-8wqn66"
+          class="ant-bubble-footer acss-xvmduq"
         >
           <div>
             footer
@@ -601,7 +601,7 @@ Array [
       class="ant-bubble ant-bubble-start"
     >
       <div
-        class="ant-bubble-avatar acss-8wqn66"
+        class="ant-bubble-avatar acss-xvmduq"
       >
         <span
           class="ant-avatar ant-avatar-circle ant-avatar-image"
@@ -615,7 +615,7 @@ Array [
         class="ant-bubble-content-wrapper"
       >
         <div
-          class="ant-bubble-header acss-8wqn66"
+          class="ant-bubble-header acss-xvmduq"
         >
           header
         </div>
@@ -623,13 +623,13 @@ Array [
           class="ant-bubble-content ant-bubble-content-outlined ant-bubble-content-round acss-c2h5kd"
         >
           <div
-            class="acss-8wqn66"
+            class="acss-xvmduq"
           >
             block block block block block block block block block block block block block block block block block block block block block block block block block
           </div>
         </div>
         <div
-          class="ant-bubble-footer acss-8wqn66"
+          class="ant-bubble-footer acss-xvmduq"
         >
           <div>
             footer
@@ -641,7 +641,7 @@ Array [
       class="ant-bubble ant-bubble-start"
     >
       <div
-        class="ant-bubble-avatar acss-8wqn66"
+        class="ant-bubble-avatar acss-xvmduq"
       >
         <span
           class="ant-avatar ant-avatar-circle ant-avatar-image"
@@ -655,7 +655,7 @@ Array [
         class="ant-bubble-content-wrapper"
       >
         <div
-          class="ant-bubble-header acss-8wqn66"
+          class="ant-bubble-header acss-xvmduq"
         >
           header
         </div>
@@ -663,13 +663,13 @@ Array [
           class="ant-bubble-content ant-bubble-content-shadow acss-c2h5kd"
         >
           <div
-            class="acss-13qb3y4"
+            class="acss-56hdzn"
           >
             fixed width content
           </div>
         </div>
         <div
-          class="ant-bubble-footer acss-8wqn66"
+          class="ant-bubble-footer acss-xvmduq"
         >
           <div>
             footer
@@ -691,7 +691,7 @@ Array [
       class="ant-bubble ant-bubble-end"
     >
       <div
-        class="ant-bubble-avatar acss-8wqn66"
+        class="ant-bubble-avatar acss-xvmduq"
       >
         <span
           class="ant-avatar ant-avatar-circle ant-avatar-image"
@@ -705,7 +705,7 @@ Array [
         class="ant-bubble-content-wrapper"
       >
         <div
-          class="ant-bubble-header acss-8wqn66"
+          class="ant-bubble-header acss-xvmduq"
         >
           header
         </div>
@@ -715,7 +715,7 @@ Array [
           string bubble
         </div>
         <div
-          class="ant-bubble-footer acss-8wqn66"
+          class="ant-bubble-footer acss-xvmduq"
         >
           <div>
             footer
@@ -727,7 +727,7 @@ Array [
       class="ant-bubble ant-bubble-end"
     >
       <div
-        class="ant-bubble-avatar acss-8wqn66"
+        class="ant-bubble-avatar acss-xvmduq"
       >
         <span
           class="ant-avatar ant-avatar-circle ant-avatar-image"
@@ -741,7 +741,7 @@ Array [
         class="ant-bubble-content-wrapper"
       >
         <div
-          class="ant-bubble-header acss-8wqn66"
+          class="ant-bubble-header acss-xvmduq"
         >
           header
         </div>
@@ -751,7 +751,7 @@ Array [
           longgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
         </div>
         <div
-          class="ant-bubble-footer acss-8wqn66"
+          class="ant-bubble-footer acss-xvmduq"
         >
           <div>
             footer
@@ -763,7 +763,7 @@ Array [
       class="ant-bubble ant-bubble-end"
     >
       <div
-        class="ant-bubble-avatar acss-8wqn66"
+        class="ant-bubble-avatar acss-xvmduq"
       >
         <span
           class="ant-avatar ant-avatar-circle ant-avatar-image"
@@ -777,7 +777,7 @@ Array [
         class="ant-bubble-content-wrapper"
       >
         <div
-          class="ant-bubble-header acss-8wqn66"
+          class="ant-bubble-header acss-xvmduq"
         >
           header
         </div>
@@ -785,13 +785,13 @@ Array [
           class="ant-bubble-content ant-bubble-content-outlined ant-bubble-content-round acss-c2h5kd"
         >
           <div
-            class="acss-8wqn66"
+            class="acss-xvmduq"
           >
             block block block block block block block block block block block block block block block block block block block block block block block block block
           </div>
         </div>
         <div
-          class="ant-bubble-footer acss-8wqn66"
+          class="ant-bubble-footer acss-xvmduq"
         >
           <div>
             footer
@@ -803,7 +803,7 @@ Array [
       class="ant-bubble ant-bubble-end"
     >
       <div
-        class="ant-bubble-avatar acss-8wqn66"
+        class="ant-bubble-avatar acss-xvmduq"
       >
         <span
           class="ant-avatar ant-avatar-circle ant-avatar-image"
@@ -817,7 +817,7 @@ Array [
         class="ant-bubble-content-wrapper"
       >
         <div
-          class="ant-bubble-header acss-8wqn66"
+          class="ant-bubble-header acss-xvmduq"
         >
           header
         </div>
@@ -825,13 +825,13 @@ Array [
           class="ant-bubble-content ant-bubble-content-shadow acss-c2h5kd"
         >
           <div
-            class="acss-13qb3y4"
+            class="acss-56hdzn"
           >
             fixed width content
           </div>
         </div>
         <div
-          class="ant-bubble-footer acss-8wqn66"
+          class="ant-bubble-footer acss-xvmduq"
         >
           <div>
             footer
@@ -856,7 +856,7 @@ Array [
         class="ant-bubble ant-bubble-start"
       >
         <div
-          class="ant-bubble-avatar acss-8wqn66"
+          class="ant-bubble-avatar acss-xvmduq"
         >
           <span
             class="ant-avatar ant-avatar-circle ant-avatar-image"
@@ -870,7 +870,7 @@ Array [
           class="ant-bubble-content-wrapper"
         >
           <div
-            class="ant-bubble-header acss-8wqn66"
+            class="ant-bubble-header acss-xvmduq"
           >
             header
           </div>
@@ -880,7 +880,7 @@ Array [
             string bubble
           </div>
           <div
-            class="ant-bubble-footer acss-8wqn66"
+            class="ant-bubble-footer acss-xvmduq"
           >
             <div>
               footer
@@ -892,7 +892,7 @@ Array [
         class="ant-bubble ant-bubble-end"
       >
         <div
-          class="ant-bubble-avatar acss-8wqn66"
+          class="ant-bubble-avatar acss-xvmduq"
         >
           <span
             class="ant-avatar ant-avatar-circle ant-avatar-image"
@@ -906,7 +906,7 @@ Array [
           class="ant-bubble-content-wrapper"
         >
           <div
-            class="ant-bubble-header acss-8wqn66"
+            class="ant-bubble-header acss-xvmduq"
           >
             header
           </div>
@@ -916,7 +916,7 @@ Array [
             longgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
           </div>
           <div
-            class="ant-bubble-footer acss-8wqn66"
+            class="ant-bubble-footer acss-xvmduq"
           >
             <div>
               footer
@@ -928,7 +928,7 @@ Array [
         class="ant-bubble ant-bubble-start"
       >
         <div
-          class="ant-bubble-avatar acss-8wqn66"
+          class="ant-bubble-avatar acss-xvmduq"
         >
           <span
             class="ant-avatar ant-avatar-circle ant-avatar-image"
@@ -942,7 +942,7 @@ Array [
           class="ant-bubble-content-wrapper"
         >
           <div
-            class="ant-bubble-header acss-8wqn66"
+            class="ant-bubble-header acss-xvmduq"
           >
             header
           </div>
@@ -950,13 +950,13 @@ Array [
             class="ant-bubble-content ant-bubble-content-outlined ant-bubble-content-round acss-c2h5kd"
           >
             <div
-              class="acss-8wqn66"
+              class="acss-xvmduq"
             >
               block block block block block block block block block block block block block block block block block block block block block block block block block
             </div>
           </div>
           <div
-            class="ant-bubble-footer acss-8wqn66"
+            class="ant-bubble-footer acss-xvmduq"
           >
             <div>
               footer
@@ -968,7 +968,7 @@ Array [
         class="ant-bubble ant-bubble-end"
       >
         <div
-          class="ant-bubble-avatar acss-8wqn66"
+          class="ant-bubble-avatar acss-xvmduq"
         >
           <span
             class="ant-avatar ant-avatar-circle ant-avatar-image"
@@ -982,7 +982,7 @@ Array [
           class="ant-bubble-content-wrapper"
         >
           <div
-            class="ant-bubble-header acss-8wqn66"
+            class="ant-bubble-header acss-xvmduq"
           >
             header
           </div>
@@ -990,13 +990,13 @@ Array [
             class="ant-bubble-content ant-bubble-content-shadow acss-c2h5kd"
           >
             <div
-              class="acss-13qb3y4"
+              class="acss-56hdzn"
             >
               fixed width content
             </div>
           </div>
           <div
-            class="ant-bubble-footer acss-8wqn66"
+            class="ant-bubble-footer acss-xvmduq"
           >
             <div>
               footer
diff --git a/components/sender/__tests__/__snapshots__/index.test.tsx.snap b/components/sender/__tests__/__snapshots__/index.test.tsx.snap
index 01890f12f..0e0ad0ee3 100644
--- a/components/sender/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/sender/__tests__/__snapshots__/index.test.tsx.snap
@@ -3,77 +3,77 @@
 exports[`Sender Component loading state 1`] = `
 <DocumentFragment>
   <div
-  class="ant-sender"
->
-  <div
-    class="ant-sender-content"
+    class="ant-sender"
   >
-    <textarea
-      class="ant-input ant-input-borderless ant-sender-input"
-      style="overflow-y: hidden; resize: none;"
-    />
     <div
-      class="ant-sender-actions-list"
+      class="ant-sender-content"
     >
+      <textarea
+        class="ant-input ant-input-borderless ant-sender-input"
+        style="overflow-y: hidden; resize: none;"
+      />
       <div
-        class="ant-sender-actions-list-presets ant-flex"
+        class="ant-sender-actions-list"
       >
-        <button
-          class="ant-btn ant-btn-circle ant-btn-text ant-btn-color-primary ant-btn-variant-text ant-sender-actions-btn ant-sender-actions-btn-loading-button"
-          type="button"
+        <div
+          class="ant-sender-actions-list-presets ant-flex"
         >
-          <svg
-            class="ant-sender-actions-btn-loading-icon"
-            color="currentColor"
-            viewBox="0 0 1000 1000"
-            xmlns="http://www.w3.org/2000/svg"
-            xmlns:xlink="http://www.w3.org/1999/xlink"
+          <button
+            class="ant-btn ant-btn-circle ant-btn-text ant-btn-color-primary ant-btn-variant-text ant-sender-actions-btn ant-sender-actions-btn-loading-button"
+            type="button"
           >
-            <title>
-              Stop Loading
-            </title>
-            <rect
-              fill="currentColor"
-              height="250"
-              rx="24"
-              ry="24"
-              width="250"
-              x="375"
-              y="375"
-            />
-            <circle
-              cx="500"
-              cy="500"
-              fill="none"
-              opacity="0.45"
-              r="450"
-              stroke="currentColor"
-              stroke-width="100"
-            />
-            <circle
-              cx="500"
-              cy="500"
-              fill="none"
-              r="450"
-              stroke="currentColor"
-              stroke-dasharray="600 9999999"
-              stroke-width="100"
+            <svg
+              class="ant-sender-actions-btn-loading-icon"
+              color="currentColor"
+              viewBox="0 0 1000 1000"
+              xmlns="http://www.w3.org/2000/svg"
+              xmlns:xlink="http://www.w3.org/1999/xlink"
             >
-              <animatetransform
-                attributeName="transform"
-                dur="1s"
-                from="0 500 500"
-                repeatCount="indefinite"
-                to="360 500 500"
-                type="rotate"
+              <title>
+                Stop Loading
+              </title>
+              <rect
+                fill="currentColor"
+                height="250"
+                rx="24"
+                ry="24"
+                width="250"
+                x="375"
+                y="375"
               />
-            </circle>
-          </svg>
-        </button>
+              <circle
+                cx="500"
+                cy="500"
+                fill="none"
+                opacity="0.45"
+                r="450"
+                stroke="currentColor"
+                stroke-width="100"
+              />
+              <circle
+                cx="500"
+                cy="500"
+                fill="none"
+                r="450"
+                stroke="currentColor"
+                stroke-dasharray="600 9999999"
+                stroke-width="100"
+              >
+                <animatetransform
+                  attributeName="transform"
+                  dur="1s"
+                  from="0 500 500"
+                  repeatCount="indefinite"
+                  to="360 500 500"
+                  type="rotate"
+                />
+              </circle>
+            </svg>
+          </button>
+        </div>
       </div>
     </div>
   </div>
-</div>
 </DocumentFragment>
 `;
 
diff --git a/components/thought-chain/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/thought-chain/__tests__/__snapshots__/demo-extend.test.ts.snap
index a418bb4d7..7d89de63b 100644
--- a/components/thought-chain/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/thought-chain/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1403,6 +1403,7 @@ exports[`renders components/thought-chain/demo/size.tsx extend context correctly
         >
           <input
             class="ant-radio-button-input"
+            name="test-id"
             type="radio"
             value="large"
           />
@@ -1423,6 +1424,7 @@ exports[`renders components/thought-chain/demo/size.tsx extend context correctly
           <input
             checked=""
             class="ant-radio-button-input"
+            name="test-id"
             type="radio"
             value="middle"
           />
@@ -1442,6 +1444,7 @@ exports[`renders components/thought-chain/demo/size.tsx extend context correctly
         >
           <input
             class="ant-radio-button-input"
+            name="test-id"
             type="radio"
             value="small"
           />
diff --git a/components/thought-chain/__tests__/__snapshots__/demo.test.ts.snap b/components/thought-chain/__tests__/__snapshots__/demo.test.ts.snap
index 7d477a519..a1486f4e1 100644
--- a/components/thought-chain/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/thought-chain/__tests__/__snapshots__/demo.test.ts.snap
@@ -980,6 +980,7 @@ exports[`renders components/thought-chain/demo/size.tsx correctly 1`] = `
         >
           <input
             class="ant-radio-button-input"
+            name="test-id"
             type="radio"
             value="large"
           />
@@ -1000,6 +1001,7 @@ exports[`renders components/thought-chain/demo/size.tsx correctly 1`] = `
           <input
             checked=""
             class="ant-radio-button-input"
+            name="test-id"
             type="radio"
             value="middle"
           />
@@ -1019,6 +1021,7 @@ exports[`renders components/thought-chain/demo/size.tsx correctly 1`] = `
         >
           <input
             class="ant-radio-button-input"
+            name="test-id"
             type="radio"
             value="small"
           />