From 663494c045e89d6ffab036354ff870f58747b582 Mon Sep 17 00:00:00 2001
From: layitf <18884265057@163.com>
Date: Sat, 4 Jan 2025 11:46:55 +0800
Subject: [PATCH 1/4] feat: Bubble support extra

---
 components/bubble/Bubble.tsx                 | 22 ++++++++++++++++++++
 components/bubble/demo/header-and-footer.tsx | 10 ++++++++-
 components/bubble/index.en-US.md             |  1 +
 components/bubble/index.zh-CN.md             |  1 +
 components/bubble/interface.ts               |  3 ++-
 components/bubble/style/index.ts             | 13 ++++++++++++
 6 files changed, 48 insertions(+), 2 deletions(-)

diff --git a/components/bubble/Bubble.tsx b/components/bubble/Bubble.tsx
index 48285161..380943c4 100644
--- a/components/bubble/Bubble.tsx
+++ b/components/bubble/Bubble.tsx
@@ -40,6 +40,7 @@ const Bubble: React.ForwardRefRenderFunction<BubbleRef, BubbleProps> = (props, r
     onTypingComplete,
     header,
     footer,
+    extra,
     ...otherHtmlProps
   } = props;
 
@@ -142,6 +143,27 @@ const Bubble: React.ForwardRefRenderFunction<BubbleRef, BubbleProps> = (props, r
     </div>
   );
 
+  if (extra) {
+    fullContent = (
+      <div className={`${prefixCls}-content-container`}>
+        {fullContent}
+        <div
+          className={classnames(
+            `${prefixCls}-extra`,
+            contextConfig.classNames.extra,
+            classNames.extra,
+          )}
+          style={{
+            ...contextConfig.styles.extra,
+            ...styles.extra,
+          }}
+        >
+          {extra}
+        </div>
+      </div>
+    );
+  }
+
   if (header || footer) {
     fullContent = (
       <div className={`${prefixCls}-content-wrapper`}>
diff --git a/components/bubble/demo/header-and-footer.tsx b/components/bubble/demo/header-and-footer.tsx
index dd458c8b..f28f7a6c 100644
--- a/components/bubble/demo/header-and-footer.tsx
+++ b/components/bubble/demo/header-and-footer.tsx
@@ -1,4 +1,4 @@
-import { CopyOutlined, SyncOutlined, UserOutlined } from '@ant-design/icons';
+import { CopyOutlined, MoreOutlined, SyncOutlined, UserOutlined } from '@ant-design/icons';
 import { Bubble } from '@ant-design/x';
 import { Button, Space, theme } from 'antd';
 import React from 'react';
@@ -17,6 +17,14 @@ const App: React.FC = () => {
           <Button color="default" variant="text" size="small" icon={<CopyOutlined />} />
         </Space>
       }
+      extra={
+        <Button
+          color="default"
+          variant="text"
+          size="small"
+          icon={<MoreOutlined style={{ transform: 'rotate(90deg)' }} />}
+        />
+      }
     />
   );
 };
diff --git a/components/bubble/index.en-US.md b/components/bubble/index.en-US.md
index e149fb33..ca4016f9 100644
--- a/components/bubble/index.en-US.md
+++ b/components/bubble/index.en-US.md
@@ -54,6 +54,7 @@ Common props ref：[Common props](/docs/react/common-props)
 | loadingRender | Customize loading content | () => ReactNode | - |  |
 | messageRender | Customize display content | (content?: string) => ReactNode | - |  |
 | onTypingComplete | Callback when typing effect is completed. If typing is not set, it will be triggered immediately when rendering. | () => void | - |  |
+| extra | Customize extra content | React.ReactNode | - |  |
 
 ### Bubble.List
 
diff --git a/components/bubble/index.zh-CN.md b/components/bubble/index.zh-CN.md
index 948457ac..a2d0d748 100644
--- a/components/bubble/index.zh-CN.md
+++ b/components/bubble/index.zh-CN.md
@@ -55,6 +55,7 @@ demo:
 | loadingRender | 自定义渲染加载态内容 | () => ReactNode | - |  |
 | messageRender | 自定义渲染内容 | (content?: string) => ReactNode | - |  |
 | onTypingComplete | 打字效果完成时的回调，如果没有设置 typing 将在渲染时立刻触发 | () => void | - |  |
+| extra | 自定义扩展内容 | React.ReactNode | - |  |
 
 ### Bubble.List
 
diff --git a/components/bubble/interface.ts b/components/bubble/interface.ts
index bbc0e229..65d0ebdf 100644
--- a/components/bubble/interface.ts
+++ b/components/bubble/interface.ts
@@ -15,7 +15,7 @@ export interface TypingOption {
   suffix?: React.ReactNode;
 }
 
-type SemanticType = 'avatar' | 'content' | 'header' | 'footer';
+type SemanticType = 'avatar' | 'content' | 'header' | 'footer' | 'extra';
 
 export interface BubbleProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'content'> {
   prefixCls?: string;
@@ -34,4 +34,5 @@ export interface BubbleProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
   onTypingComplete?: VoidFunction;
   header?: React.ReactNode;
   footer?: React.ReactNode;
+  extra?: React.ReactNode;
 }
diff --git a/components/bubble/style/index.ts b/components/bubble/style/index.ts
index b7319603..8c58247c 100644
--- a/components/bubble/style/index.ts
+++ b/components/bubble/style/index.ts
@@ -101,6 +101,19 @@ const genBubbleStyle: GenerateStyle<BubbleToken> = (token) => {
         maxWidth: '100%',
       },
 
+      [`& ${componentCls}-content-container`]: {
+        display: 'flex',
+        columnGap: token.paddingXS,
+      },
+
+      [`&-end ${componentCls}-content-container`]: {
+        flexDirection: 'row-reverse',
+      },
+
+      [`& ${componentCls}-extra`]: {
+        alignSelf: 'flex-end',
+      },
+
       [`& ${componentCls}-content`]: {
         position: 'relative',
         boxSizing: 'border-box',

From d17f95b2a5112b17f82496a0d94f44d2377a6619 Mon Sep 17 00:00:00 2001
From: layitf <18884265057@163.com>
Date: Sat, 4 Jan 2025 12:38:28 +0800
Subject: [PATCH 2/4] test: Update snapshot file

---
 .../__snapshots__/demo-extend.test.ts.snap    | 41 ++++++++++++++++++-
 .../__tests__/__snapshots__/demo.test.ts.snap | 41 ++++++++++++++++++-
 2 files changed, 78 insertions(+), 4 deletions(-)

diff --git a/components/bubble/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/bubble/__tests__/__snapshots__/demo-extend.test.ts.snap
index 9b97babf..e9c21814 100644
--- a/components/bubble/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/bubble/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1050,9 +1050,46 @@ exports[`renders components/bubble/demo/header-and-footer.tsx extend context cor
       Ant Design X
     </div>
     <div
-      class="ant-bubble-content ant-bubble-content-filled"
+      class="ant-bubble-content-container"
     >
-      Hello, welcome to use Ant Design X! Just ask if you have any questions.
+      <div
+        class="ant-bubble-content ant-bubble-content-filled"
+      >
+        Hello, welcome to use Ant Design X! Just ask if you have any questions.
+      </div>
+      <div
+        class="ant-bubble-extra"
+      >
+        <button
+          class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
+          type="button"
+        >
+          <span
+            class="ant-btn-icon"
+          >
+            <span
+              aria-label="more"
+              class="anticon anticon-more"
+              role="img"
+              style="transform: rotate(90deg);"
+            >
+              <svg
+                aria-hidden="true"
+                data-icon="more"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M456 231a56 56 0 10112 0 56 56 0 10-112 0zm0 280a56 56 0 10112 0 56 56 0 10-112 0zm0 280a56 56 0 10112 0 56 56 0 10-112 0z"
+                />
+              </svg>
+            </span>
+          </span>
+        </button>
+      </div>
     </div>
     <div
       class="ant-bubble-footer"
diff --git a/components/bubble/__tests__/__snapshots__/demo.test.ts.snap b/components/bubble/__tests__/__snapshots__/demo.test.ts.snap
index 28f3ea13..01f3d8fb 100644
--- a/components/bubble/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/bubble/__tests__/__snapshots__/demo.test.ts.snap
@@ -1049,9 +1049,46 @@ exports[`renders components/bubble/demo/header-and-footer.tsx correctly 1`] = `
       Ant Design X
     </div>
     <div
-      class="ant-bubble-content ant-bubble-content-filled"
+      class="ant-bubble-content-container"
     >
-      Hello, welcome to use Ant Design X! Just ask if you have any questions.
+      <div
+        class="ant-bubble-content ant-bubble-content-filled"
+      >
+        Hello, welcome to use Ant Design X! Just ask if you have any questions.
+      </div>
+      <div
+        class="ant-bubble-extra"
+      >
+        <button
+          class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
+          type="button"
+        >
+          <span
+            class="ant-btn-icon"
+          >
+            <span
+              aria-label="more"
+              class="anticon anticon-more"
+              role="img"
+              style="transform:rotate(90deg)"
+            >
+              <svg
+                aria-hidden="true"
+                data-icon="more"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M456 231a56 56 0 10112 0 56 56 0 10-112 0zm0 280a56 56 0 10112 0 56 56 0 10-112 0zm0 280a56 56 0 10112 0 56 56 0 10-112 0z"
+                />
+              </svg>
+            </span>
+          </span>
+        </button>
+      </div>
     </div>
     <div
       class="ant-bubble-footer"

From 492be04001c4201c95c2ee74d2a0b38132932e7c Mon Sep 17 00:00:00 2001
From: layitf <18884265057@163.com>
Date: Wed, 8 Jan 2025 00:36:48 +0800
Subject: [PATCH 3/4] feat: Bubble support extra

---
 components/bubble/Bubble.tsx     | 14 ++++----------
 components/bubble/style/index.ts | 26 +++++++++++++-------------
 2 files changed, 17 insertions(+), 23 deletions(-)

diff --git a/components/bubble/Bubble.tsx b/components/bubble/Bubble.tsx
index 380943c4..e9339d8b 100644
--- a/components/bubble/Bubble.tsx
+++ b/components/bubble/Bubble.tsx
@@ -140,13 +140,7 @@ const Bubble: React.ForwardRefRenderFunction<BubbleRef, BubbleProps> = (props, r
       )}
     >
       {contentNode}
-    </div>
-  );
-
-  if (extra) {
-    fullContent = (
-      <div className={`${prefixCls}-content-container`}>
-        {fullContent}
+      {extra ? (
         <div
           className={classnames(
             `${prefixCls}-extra`,
@@ -160,9 +154,9 @@ const Bubble: React.ForwardRefRenderFunction<BubbleRef, BubbleProps> = (props, r
         >
           {extra}
         </div>
-      </div>
-    );
-  }
+      ) : null}
+    </div>
+  );
 
   if (header || footer) {
     fullContent = (
diff --git a/components/bubble/style/index.ts b/components/bubble/style/index.ts
index 8c58247c..d017a12e 100644
--- a/components/bubble/style/index.ts
+++ b/components/bubble/style/index.ts
@@ -101,19 +101,6 @@ const genBubbleStyle: GenerateStyle<BubbleToken> = (token) => {
         maxWidth: '100%',
       },
 
-      [`& ${componentCls}-content-container`]: {
-        display: 'flex',
-        columnGap: token.paddingXS,
-      },
-
-      [`&-end ${componentCls}-content-container`]: {
-        flexDirection: 'row-reverse',
-      },
-
-      [`& ${componentCls}-extra`]: {
-        alignSelf: 'flex-end',
-      },
-
       [`& ${componentCls}-content`]: {
         position: 'relative',
         boxSizing: 'border-box',
@@ -155,6 +142,19 @@ const genBubbleStyle: GenerateStyle<BubbleToken> = (token) => {
           },
         },
       },
+
+      [`& ${componentCls}-extra`]: {
+        position: 'absolute',
+        bottom: 0,
+      },
+
+      [`&-start ${componentCls}-extra`]: {
+        left: `calc(100% + ${token.paddingXS})`,
+      },
+
+      [`&-end ${componentCls}-extra`]: {
+        right: `calc(100% + ${token.paddingXS})`,
+      },
     },
   };
 };

From 6b94a5d86e816b33d07ef4272171b6962a1d62f0 Mon Sep 17 00:00:00 2001
From: layitf <18884265057@163.com>
Date: Wed, 8 Jan 2025 00:53:36 +0800
Subject: [PATCH 4/4] test: Update snapshot file

---
 .../__tests__/__snapshots__/demo-extend.test.ts.snap      | 8 ++------
 .../bubble/__tests__/__snapshots__/demo.test.ts.snap      | 8 ++------
 2 files changed, 4 insertions(+), 12 deletions(-)

diff --git a/components/bubble/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/bubble/__tests__/__snapshots__/demo-extend.test.ts.snap
index e9c21814..edb7fa1b 100644
--- a/components/bubble/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/bubble/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1050,13 +1050,9 @@ exports[`renders components/bubble/demo/header-and-footer.tsx extend context cor
       Ant Design X
     </div>
     <div
-      class="ant-bubble-content-container"
+      class="ant-bubble-content ant-bubble-content-filled"
     >
-      <div
-        class="ant-bubble-content ant-bubble-content-filled"
-      >
-        Hello, welcome to use Ant Design X! Just ask if you have any questions.
-      </div>
+      Hello, welcome to use Ant Design X! Just ask if you have any questions.
       <div
         class="ant-bubble-extra"
       >
diff --git a/components/bubble/__tests__/__snapshots__/demo.test.ts.snap b/components/bubble/__tests__/__snapshots__/demo.test.ts.snap
index 01f3d8fb..6fbc594a 100644
--- a/components/bubble/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/bubble/__tests__/__snapshots__/demo.test.ts.snap
@@ -1049,13 +1049,9 @@ exports[`renders components/bubble/demo/header-and-footer.tsx correctly 1`] = `
       Ant Design X
     </div>
     <div
-      class="ant-bubble-content-container"
+      class="ant-bubble-content ant-bubble-content-filled"
     >
-      <div
-        class="ant-bubble-content ant-bubble-content-filled"
-      >
-        Hello, welcome to use Ant Design X! Just ask if you have any questions.
-      </div>
+      Hello, welcome to use Ant Design X! Just ask if you have any questions.
       <div
         class="ant-bubble-extra"
       >