feat: Bubble 气泡组件增加一个 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>
+      )}
     </div>
   );
 

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';
@@ -23,6 +23,14 @@ const App: React.FC = () => {
           />
         </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

@@ -16,7 +16,7 @@ export interface TypingOption {
   suffix?: React.ReactNode;
 }
 
-type SemanticType = 'avatar' | 'content' | 'header' | 'footer';
+type SemanticType = 'avatar' | 'content' | 'header' | 'footer' | 'extra';
 
 export type BubbleContentType = React.ReactNode | AnyObject;
 
@@ -38,4 +38,5 @@ export interface BubbleProps<ContentType extends BubbleContentType = string>
   onTypingComplete?: VoidFunction;
   header?: React.ReactNode;
   footer?: React.ReactNode | ((content: BubbleContentType) => 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`]: {
+        insetInlineStart: `calc(100% + ${token.paddingXS})`,
+      },
+
+      [`&-end ${componentCls}-extra`]: {
+        insetInlineEnd: `calc(100% + ${token.paddingXS})`,
+      },
     },
   };
 };