feat: Bubble support extra

components/bubble/Bubble.tsx

@@ -40,6 +40,7 @@ const Bubble: React.ForwardRefRenderFunction<BubbleRef, BubbleProps> = (props, r
     onTypingComplete,
     header,
     footer,
+    extra,
     ...otherHtmlProps
   } = props;
 
@@ -139,6 +140,21 @@ const Bubble: React.ForwardRefRenderFunction<BubbleRef, BubbleProps> = (props, r
       )}
     >
       {contentNode}
+      {extra ? (
+        <div
+          className={classnames(
+            `${prefixCls}-extra`,
+            contextConfig.classNames.extra,
+            classNames.extra,
+          )}
+          style={{
+            ...contextConfig.styles.extra,
+            ...styles.extra,
+          }}
+        >
+          {extra}
+        </div>
+      ) : null}
     </div>
   );
 

components/bubble/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -1053,6 +1053,39 @@ exports[`renders components/bubble/demo/header-and-footer.tsx extend context cor
       class="ant-bubble-content ant-bubble-content-filled"
     >
       Hello, welcome to use Ant Design X! Just ask if you have any questions.
+      <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"

components/bubble/__tests__/__snapshots__/demo.test.ts.snap

@@ -1052,6 +1052,39 @@ exports[`renders components/bubble/demo/header-and-footer.tsx correctly 1`] = `
       class="ant-bubble-content ant-bubble-content-filled"
     >
       Hello, welcome to use Ant Design X! Just ask if you have any questions.
+      <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"

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)' }} />}
+        />
+      }
     />
   );
 };

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
 

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
 

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;
 }

components/bubble/style/index.ts

@@ -142,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})`,
+      },
     },
   };
 };