feat(bubble): add typing suffix support

- Add suffix option to typing configuration
- Display suffix while typing is in progress
- Update demo and tests to showcase typing suffix feature
- Set default suffix to empty string
- Add type assertions in test utils to pass lint check

components/bubble/Bubble.tsx

@@ -61,7 +61,7 @@ const Bubble: React.ForwardRefRenderFunction<BubbleRef, BubbleProps> = (props, r
   const contextConfig = useXComponentConfig('bubble');
 
   // ============================ Typing ============================
-  const [typingEnabled, typingStep, typingInterval] = useTypingConfig(typing);
+  const [typingEnabled, typingStep, typingInterval, typingSuffix] = useTypingConfig(typing);
 
   const [typedContent, isTyping] = useTypedEffect(
     content,
@@ -116,7 +116,12 @@ const Bubble: React.ForwardRefRenderFunction<BubbleRef, BubbleProps> = (props, r
   if (loading) {
     contentNode = loadingRender ? loadingRender() : <Loading prefixCls={prefixCls} />;
   } else {
-    contentNode = mergedContent as React.ReactNode;
+    contentNode = (
+      <>
+        {mergedContent as React.ReactNode}
+        {isTyping && typingSuffix}
+      </>
+    );
   }
 
   let fullContent: React.ReactNode = (

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

@@ -1308,7 +1308,7 @@ exports[`renders components/bubble/demo/typing.tsx extend context correctly 1`]
     <div
       class="ant-bubble-content ant-bubble-content-filled"
     >
-      A
+      A💗
     </div>
   </div>
   <button

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

@@ -1291,6 +1291,8 @@ exports[`renders components/bubble/demo/typing.tsx correctly 1`] = `
       class="ant-bubble-content ant-bubble-content-filled"
     >
       A
+      <!-- -->
+      💗
     </div>
   </div>
   <button

components/bubble/demo/typing.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
 import { UserOutlined } from '@ant-design/icons';
 import { Bubble } from '@ant-design/x';
 import { Button, Flex } from 'antd';
+import React from 'react';
 
 const text = 'Ant Design X love you! ';
 
@@ -12,7 +12,7 @@ const App = () => {
     <Flex vertical gap="small">
       <Bubble
         content={text.repeat(repeat)}
-        typing={{ step: 2, interval: 50 }}
+        typing={{ step: 2, interval: 50, suffix: <>💗</> }}
         avatar={{ icon: <UserOutlined /> }}
       />
 

components/bubble/hooks/useTypingConfig.ts

@@ -2,21 +2,25 @@ import * as React from 'react';
 import type { BubbleProps, TypingOption } from '../interface';
 
 function useTypingConfig(typing: BubbleProps['typing']) {
-  return React.useMemo<[enableTyping: boolean, step: number, interval: number]>(() => {
+  return React.useMemo<
+    [enableTyping: boolean, step: number, interval: number, suffix: React.ReactNode]
+  >(() => {
     if (!typing) {
-      return [false, 0, 0];
+      return [false, 0, 0, null];
     }
 
     let baseConfig: Required<TypingOption> = {
       step: 1,
       interval: 50,
+      // set default suffix is empty
+      suffix: '',
     };
 
     if (typeof typing === 'object') {
       baseConfig = { ...baseConfig, ...typing };
     }
 
-    return [true, baseConfig.step, baseConfig.interval];
+    return [true, baseConfig.step, baseConfig.interval, baseConfig.suffix];
   }, [typing]);
 }
 

components/bubble/interface.ts

@@ -9,6 +9,10 @@ export interface TypingOption {
    * @default 50
    */
   interval?: number;
+  /**
+   * @default ""
+   */
+  suffix?: React.ReactNode;
 }
 
 type SemanticType = 'avatar' | 'content' | 'header' | 'footer';

tests/utils.tsx

@@ -1,10 +1,10 @@
-import type { ReactElement } from 'react';
-import React, { createRef, StrictMode } from 'react';
-import type { RenderOptions } from '@testing-library/react';
+import type { RenderOptions, RenderResult } from '@testing-library/react';
 import { act, render } from '@testing-library/react';
 import MockDate from 'mockdate';
 import { _rs as onEsResize } from 'rc-resize-observer/es/utils/observerUtil';
 import { _rs as onLibResize } from 'rc-resize-observer/lib/utils/observerUtil';
+import type { ReactElement } from 'react';
+import React, { createRef, StrictMode } from 'react';
 
 export function assertsExist<T>(item?: T): asserts item is T {
   expect(item).not.toBeUndefined();
@@ -29,7 +29,7 @@ export const sleep = async (timeout = 0) => {
   });
 };
 
-const customRender = (ui: ReactElement, options?: Omit<RenderOptions, 'wrapper'>) =>
+const customRender = (ui: ReactElement, options?: Omit<RenderOptions, 'wrapper'>): RenderResult =>
   render(ui, { wrapper: StrictMode, ...options });
 
 export function renderHook<T>(func: () => T): { result: React.RefObject<T> } {