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

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

@@ -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',