From 78691267b6cda7470a7be460347da0431a2be2dc Mon Sep 17 00:00:00 2001
From: bqxbqx <132878537+BQXBQX@users.noreply.github.com>
Date: Mon, 16 Dec 2024 14:57:57 +0800
Subject: [PATCH] feat(bubble): add typing suffix support (#316)

* feat(bubble): add typing suffix support

* docs(Bubble): improve typing demo documentation
---
 components/bubble/Bubble.tsx                  | 11 ++++--
 .../__snapshots__/demo-extend.test.ts.snap    | 36 ++++++++++++++++++
 .../__tests__/__snapshots__/demo.test.ts.snap | 38 +++++++++++++++++++
 components/bubble/demo/typing.tsx             |  7 +++-
 components/bubble/hooks/useTypingConfig.ts    | 10 +++--
 components/bubble/interface.ts                |  4 ++
 6 files changed, 99 insertions(+), 7 deletions(-)

diff --git a/components/bubble/Bubble.tsx b/components/bubble/Bubble.tsx
index 1ef00ed6..f0f4eacc 100644
--- a/components/bubble/Bubble.tsx
+++ b/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,
@@ -101,7 +101,7 @@ const Bubble: React.ForwardRefRenderFunction<BubbleRef, BubbleProps> = (props, r
     `${prefixCls}-${placement}`,
     {
       [`${prefixCls}-rtl`]: direction === 'rtl',
-      [`${prefixCls}-typing`]: isTyping && !loading && !messageRender,
+      [`${prefixCls}-typing`]: isTyping && !loading && !messageRender && !typingSuffix,
     },
   );
 
@@ -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 = (
diff --git a/components/bubble/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/bubble/__tests__/__snapshots__/demo-extend.test.ts.snap
index 6df281c9..9b97babf 100644
--- a/components/bubble/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/bubble/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1918,6 +1918,42 @@ exports[`renders components/bubble/demo/typing.tsx extend context correctly 1`]
       A
     </div>
   </div>
+  <div
+    class="ant-bubble ant-bubble-start"
+  >
+    <div
+      class="ant-bubble-avatar"
+    >
+      <span
+        class="ant-avatar ant-avatar-circle ant-avatar-icon"
+      >
+        <span
+          aria-label="user"
+          class="anticon anticon-user"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="user"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+    <div
+      class="ant-bubble-content ant-bubble-content-filled"
+    >
+      A💗
+    </div>
+  </div>
   <button
     class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
     style="align-self: flex-end;"
diff --git a/components/bubble/__tests__/__snapshots__/demo.test.ts.snap b/components/bubble/__tests__/__snapshots__/demo.test.ts.snap
index 1251b03c..3f72ca3c 100644
--- a/components/bubble/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/bubble/__tests__/__snapshots__/demo.test.ts.snap
@@ -1898,6 +1898,44 @@ exports[`renders components/bubble/demo/typing.tsx correctly 1`] = `
       A
     </div>
   </div>
+  <div
+    class="ant-bubble ant-bubble-start"
+  >
+    <div
+      class="ant-bubble-avatar"
+    >
+      <span
+        class="ant-avatar ant-avatar-circle ant-avatar-icon"
+      >
+        <span
+          aria-label="user"
+          class="anticon anticon-user"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="user"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+    <div
+      class="ant-bubble-content ant-bubble-content-filled"
+    >
+      A
+      <!-- -->
+      💗
+    </div>
+  </div>
   <button
     class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
     style="align-self:flex-end"
diff --git a/components/bubble/demo/typing.tsx b/components/bubble/demo/typing.tsx
index e0723898..3b334148 100644
--- a/components/bubble/demo/typing.tsx
+++ b/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! ';
 
@@ -15,6 +15,11 @@ const App = () => {
         typing={{ step: 2, interval: 50 }}
         avatar={{ icon: <UserOutlined /> }}
       />
+      <Bubble
+        content={text.repeat(repeat)}
+        typing={{ step: 2, interval: 50, suffix: <>💗</> }}
+        avatar={{ icon: <UserOutlined /> }}
+      />
 
       <Button
         style={{ alignSelf: 'flex-end' }}
diff --git a/components/bubble/hooks/useTypingConfig.ts b/components/bubble/hooks/useTypingConfig.ts
index 9513382a..e80f4309 100644
--- a/components/bubble/hooks/useTypingConfig.ts
+++ b/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: null,
     };
 
     if (typeof typing === 'object') {
       baseConfig = { ...baseConfig, ...typing };
     }
 
-    return [true, baseConfig.step, baseConfig.interval];
+    return [true, baseConfig.step, baseConfig.interval, baseConfig.suffix];
   }, [typing]);
 }
 
diff --git a/components/bubble/interface.ts b/components/bubble/interface.ts
index 5b939090..bbc0e229 100644
--- a/components/bubble/interface.ts
+++ b/components/bubble/interface.ts
@@ -9,6 +9,10 @@ export interface TypingOption {
    * @default 50
    */
   interval?: number;
+  /**
+   * @default null
+   */
+  suffix?: React.ReactNode;
 }
 
 type SemanticType = 'avatar' | 'content' | 'header' | 'footer';