From 7e731a53a288abaa3c76a9fa636b52215deb5c6a Mon Sep 17 00:00:00 2001
From: Maifee Ul Asad <maifeeulasad@gmail.com>
Date: Sat, 14 Jun 2025 14:02:10 +0600
Subject: [PATCH 01/11] feat: reference in bubble #523

---
 components/bubble/Bubble.tsx | 137 ++++++++++++++++++++++++++++-------
 1 file changed, 109 insertions(+), 28 deletions(-)

diff --git a/components/bubble/Bubble.tsx b/components/bubble/Bubble.tsx
index 10adf1b41..d42cc4d4a 100644
--- a/components/bubble/Bubble.tsx
+++ b/components/bubble/Bubble.tsx
@@ -1,7 +1,8 @@
 import classnames from 'classnames';
 import React from 'react';
 
-import { Avatar } from 'antd';
+import { InfoCircleOutlined } from '@ant-design/icons';
+import { Avatar, Button, List, Modal, Popover } from 'antd';
 import useXComponentConfig from '../_util/hooks/use-x-component-config';
 import { useXProviderContext } from '../x-provider';
 import useTypedEffect from './hooks/useTypedEffect';
@@ -40,8 +41,10 @@ const Bubble: React.ForwardRefRenderFunction<BubbleRef, BubbleProps> = (props, r
     onTypingComplete,
     header,
     footer,
+    references,
     ...otherHtmlProps
   } = props;
+  console.log('Bubble', props);
 
   const { onUpdate } = React.useContext(BubbleContext);
 
@@ -148,6 +151,79 @@ const Bubble: React.ForwardRefRenderFunction<BubbleRef, BubbleProps> = (props, r
     </div>
   );
 
+  // =========================== Reference ============================
+
+  const referencesContent: React.ReactNode = React.useMemo(() => {
+    const ReferencesOverlay = () => {
+      const [isModalVisible, setIsModalVisible] = React.useState(false);
+      if (!references || references.length === 0) {
+        return null;
+      }
+
+      const count = references.length;
+
+      const button = (
+        <Button
+          icon={<InfoCircleOutlined />}
+          onClick={() => setIsModalVisible(true)}
+          className={classnames(`${prefixCls}-references-toggle`)}
+          style={{ cursor: 'pointer', color: '#1890ff', ...contextConfig.styles.references }}
+        >
+          {count} reference{count > 1 ? 's' : ''} used
+        </Button>
+      );
+
+      return (
+        <>
+          <Popover content={button} trigger="hover" placement="bottom">
+            <Button
+              shape="circle"
+              icon={<InfoCircleOutlined />}
+              className={classnames(`${prefixCls}-references-toggle`)}
+              style={{ cursor: 'pointer' }}
+            />
+          </Popover>
+          <Modal
+            title="References"
+            open={isModalVisible}
+            onCancel={() => setIsModalVisible(false)}
+            footer={null}
+            destroyOnClose
+            className={classnames(`${prefixCls}-references-modal`)}
+          >
+            <List
+              dataSource={references}
+              renderItem={(ref, index) => (
+                <List.Item key={index} className={`${prefixCls}-reference-item`}>
+                  <a
+                    href={ref.url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className={`${prefixCls}-reference`}
+                  >
+                    <div>{ref.title}</div>
+                    {ref.description && (
+                      <span className={`${prefixCls}-reference-description`}>
+                        {ref.description}
+                      </span>
+                    )}
+                  </a>
+                </List.Item>
+              )}
+              className={classnames(
+                `${prefixCls}-references-list`,
+                contextConfig.classNames.references,
+              )}
+              style={contextConfig.styles.references}
+            />
+          </Modal>
+        </>
+      );
+    };
+
+    return <ReferencesOverlay />;
+  }, [references, prefixCls, contextConfig]);
+
   if (header || footer) {
     fullContent = (
       <div className={`${prefixCls}-content-wrapper`}>
@@ -187,34 +263,39 @@ const Bubble: React.ForwardRefRenderFunction<BubbleRef, BubbleProps> = (props, r
   }
 
   return wrapCSSVar(
-    <div
-      style={{
-        ...contextConfig.style,
-        ...style,
-      }}
-      className={mergedCls}
-      {...otherHtmlProps}
-      ref={divRef}
-    >
-      {/* Avatar */}
-      {avatar && (
-        <div
-          style={{
-            ...contextConfig.styles.avatar,
-            ...styles.avatar,
-          }}
-          className={classnames(
-            `${prefixCls}-avatar`,
-            contextConfig.classNames.avatar,
-            classNames.avatar,
-          )}
-        >
-          {avatarNode}
-        </div>
-      )}
+    <div>
+      <div
+        style={{
+          ...contextConfig.style,
+          ...style,
+        }}
+        className={mergedCls}
+        {...otherHtmlProps}
+        ref={divRef}
+      >
+        {/* Avatar */}
+        {avatar && (
+          <div
+            style={{
+              ...contextConfig.styles.avatar,
+              ...styles.avatar,
+            }}
+            className={classnames(
+              `${prefixCls}-avatar`,
+              contextConfig.classNames.avatar,
+              classNames.avatar,
+            )}
+          >
+            {avatarNode}
+          </div>
+        )}
 
-      {/* Content */}
-      {fullContent}
+        {/* Content */}
+        {fullContent}
+
+        {/* Source */}
+        {referencesContent}
+      </div>
     </div>,
   );
 };

From b0cc41dc8667937fb22a6439ce995fd088d169d1 Mon Sep 17 00:00:00 2001
From: Maifee Ul Asad <maifeeulasad@gmail.com>
Date: Sat, 14 Jun 2025 14:03:17 +0600
Subject: [PATCH 02/11] feat: reference in bubble interface #523

---
 components/bubble/interface.ts | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/components/bubble/interface.ts b/components/bubble/interface.ts
index 844b83faa..b7f9c4f5f 100644
--- a/components/bubble/interface.ts
+++ b/components/bubble/interface.ts
@@ -16,6 +16,12 @@ export interface TypingOption {
   suffix?: React.ReactNode;
 }
 
+export interface ChatReference {
+  description?: string;
+  title: string;
+  url: string;
+}
+
 type SemanticType = 'avatar' | 'content' | 'header' | 'footer';
 
 export type BubbleContentType = React.ReactNode | AnyObject;
@@ -38,4 +44,5 @@ export interface BubbleProps<ContentType extends BubbleContentType = string>
   onTypingComplete?: VoidFunction;
   header?: React.ReactNode;
   footer?: React.ReactNode;
+  references?: ChatReference[];
 }

From a14eb310137cff553db475b19d18bf9611075dec Mon Sep 17 00:00:00 2001
From: Maifee Ul Asad <maifeeulasad@gmail.com>
Date: Sat, 14 Jun 2025 14:06:19 +0600
Subject: [PATCH 03/11] docs: added reference in bubble as example

---
 components/bubble/demo/reference.tsx | 79 ++++++++++++++++++++++++++++
 1 file changed, 79 insertions(+)
 create mode 100644 components/bubble/demo/reference.tsx

diff --git a/components/bubble/demo/reference.tsx b/components/bubble/demo/reference.tsx
new file mode 100644
index 000000000..ec334212e
--- /dev/null
+++ b/components/bubble/demo/reference.tsx
@@ -0,0 +1,79 @@
+import { UserOutlined } from '@ant-design/icons';
+import { Bubble } from '@ant-design/x';
+import { Flex } from 'antd';
+import React from 'react';
+
+const fooAvatar: React.CSSProperties = {
+  color: '#f56a00',
+  backgroundColor: '#fde3cf',
+};
+
+const barAvatar: React.CSSProperties = {
+  color: '#fff',
+  backgroundColor: '#87d068',
+};
+
+const hideAvatar: React.CSSProperties = {
+  visibility: 'hidden',
+};
+
+const App: React.FC = () => (
+  <Flex gap="middle" vertical>
+    <Bubble
+      placement="start"
+      content="Good morning, how are you?"
+      avatar={{ icon: <UserOutlined />, style: fooAvatar }}
+      references={[
+        {
+          title: 'Ant Design',
+          url: 'https://ant.design',
+          description: 'Ant Design official website',
+        },
+        {
+          title: 'React',
+          url: 'https://react.dev',
+          description: 'React official documentation',
+        },
+        {
+          title: 'GitHub',
+          url: 'https://github.com',
+          description: 'GitHub homepage',
+        },
+        {
+          title: 'GitHub - Maifee Ul Asad',
+          url: 'https://github.com',
+        },
+      ]}
+    />
+    <Bubble
+      placement="start"
+      content="What a beautiful day!"
+      styles={{ avatar: hideAvatar }}
+      avatar={{}}
+      references={[
+        {
+          title: 'React',
+          url: 'https://react.dev',
+          description: 'React official documentation',
+        },
+        {
+          title: 'GitHub',
+          url: 'https://github.com',
+          description: 'GitHub homepage',
+        },
+        {
+          title: 'GitHub - Maifee Ul Asad',
+          url: 'https://github.com',
+        },
+      ]}
+    />
+    <Bubble
+      placement="end"
+      content="Hi, good morning, I'm fine!"
+      avatar={{ icon: <UserOutlined />, style: barAvatar }}
+    />
+    <Bubble placement="end" content="Thank you!" styles={{ avatar: hideAvatar }} avatar={{}} />
+  </Flex>
+);
+
+export default App;

From aab01abae35f1467ae672cf92f07d44b2c1bc564 Mon Sep 17 00:00:00 2001
From: Maifee Ul Asad <maifeeulasad@gmail.com>
Date: Sat, 14 Jun 2025 14:07:17 +0600
Subject: [PATCH 04/11] docs: linked reference in bubble in `en-us`, `zh-cn`
 docs

---
 components/bubble/index.en-US.md | 1 +
 components/bubble/index.zh-CN.md | 1 +
 2 files changed, 2 insertions(+)

diff --git a/components/bubble/index.en-US.md b/components/bubble/index.en-US.md
index db3e7891c..ee2a1fd8e 100644
--- a/components/bubble/index.en-US.md
+++ b/components/bubble/index.en-US.md
@@ -30,6 +30,7 @@ Often used when chatting.
 <code src="./demo/bubble-custom.tsx">Semantic Custom</code>
 <code src="./demo/list-custom.tsx">Custom List Content</code>
 <code src="./demo/gpt-vis.tsx">Using GPT-Vis to render charts</code>
+<code src="./demo/reference" debug>Reference</code>
 <code src="./demo/debug.tsx" debug>debug</code>
 <code src="./demo/debug-list.tsx" debug>debug list</code>
 
diff --git a/components/bubble/index.zh-CN.md b/components/bubble/index.zh-CN.md
index c4d28c3a7..e3029fd15 100644
--- a/components/bubble/index.zh-CN.md
+++ b/components/bubble/index.zh-CN.md
@@ -31,6 +31,7 @@ demo:
 <code src="./demo/bubble-custom.tsx">语义化自定义</code>
 <code src="./demo/list-custom.tsx">自定义列表内容</code>
 <code src="./demo/gpt-vis.tsx">使用 GPT-Vis 渲染图表</code>
+<code src="./demo/reference" debug>参考</code>
 <code src="./demo/debug.tsx" debug>debug</code>
 <code src="./demo/debug-list.tsx" debug>debug list</code>
 

From 0f8eeeeb70051e94850165170767b7025da1a05c Mon Sep 17 00:00:00 2001
From: Maifee Ul Asad <maifeeulasad@gmail.com>
Date: Sat, 14 Jun 2025 14:35:28 +0600
Subject: [PATCH 05/11] chores: removed console.log and basic example
 correction

---
 components/bubble/Bubble.tsx         | 1 -
 components/bubble/demo/reference.tsx | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/components/bubble/Bubble.tsx b/components/bubble/Bubble.tsx
index d42cc4d4a..a1c72f43c 100644
--- a/components/bubble/Bubble.tsx
+++ b/components/bubble/Bubble.tsx
@@ -44,7 +44,6 @@ const Bubble: React.ForwardRefRenderFunction<BubbleRef, BubbleProps> = (props, r
     references,
     ...otherHtmlProps
   } = props;
-  console.log('Bubble', props);
 
   const { onUpdate } = React.useContext(BubbleContext);
 
diff --git a/components/bubble/demo/reference.tsx b/components/bubble/demo/reference.tsx
index ec334212e..bdb27e47f 100644
--- a/components/bubble/demo/reference.tsx
+++ b/components/bubble/demo/reference.tsx
@@ -63,7 +63,7 @@ const App: React.FC = () => (
         },
         {
           title: 'GitHub - Maifee Ul Asad',
-          url: 'https://github.com',
+          url: 'https://github.com/maifeeulasad',
         },
       ]}
     />

From b93d9907e5c837935d38cb6fadd7d73855a7bf54 Mon Sep 17 00:00:00 2001
From: Maifee Ul Asad <maifeeulasad@gmail.com>
Date: Sat, 14 Jun 2025 15:23:22 +0600
Subject: [PATCH 06/11] fix: reference overflow in bubble

---
 components/bubble/Bubble.tsx         |   7 +-
 components/bubble/demo/reference.tsx | 112 +++++++++++++++++++++++++++
 2 files changed, 118 insertions(+), 1 deletion(-)

diff --git a/components/bubble/Bubble.tsx b/components/bubble/Bubble.tsx
index a1c72f43c..9e163e7ae 100644
--- a/components/bubble/Bubble.tsx
+++ b/components/bubble/Bubble.tsx
@@ -183,6 +183,7 @@ const Bubble: React.ForwardRefRenderFunction<BubbleRef, BubbleProps> = (props, r
             />
           </Popover>
           <Modal
+            style={{ maxHeight: '80vh' }}
             title="References"
             open={isModalVisible}
             onCancel={() => setIsModalVisible(false)}
@@ -213,7 +214,11 @@ const Bubble: React.ForwardRefRenderFunction<BubbleRef, BubbleProps> = (props, r
                 `${prefixCls}-references-list`,
                 contextConfig.classNames.references,
               )}
-              style={contextConfig.styles.references}
+              style={{
+                ...contextConfig.styles.references,
+                maxHeight: '100%',
+                overflowY: 'auto',
+              }}
             />
           </Modal>
         </>
diff --git a/components/bubble/demo/reference.tsx b/components/bubble/demo/reference.tsx
index bdb27e47f..b6e84bb98 100644
--- a/components/bubble/demo/reference.tsx
+++ b/components/bubble/demo/reference.tsx
@@ -43,6 +43,118 @@ const App: React.FC = () => (
           title: 'GitHub - Maifee Ul Asad',
           url: 'https://github.com',
         },
+        {
+          title: 'GitHub - Maifee Ul Asad',
+          url: 'https://github.com',
+        },
+        {
+          title: 'GitHub - Maifee Ul Asad',
+          url: 'https://github.com',
+        },
+        {
+          title: 'GitHub - Maifee Ul Asad',
+          url: 'https://github.com',
+        },
+        {
+          title: 'GitHub - Maifee Ul Asad',
+          url: 'https://github.com',
+        },
+        {
+          title: 'GitHub - Maifee Ul Asad',
+          url: 'https://github.com',
+        },
+        {
+          title: 'GitHub - Maifee Ul Asad',
+          url: 'https://github.com',
+        },
+        {
+          title: 'GitHub - Maifee Ul Asad',
+          url: 'https://github.com',
+        },
+        {
+          title: 'GitHub - Maifee Ul Asad',
+          url: 'https://github.com',
+        },
+        {
+          title: 'GitHub - Maifee Ul Asad',
+          url: 'https://github.com',
+        },
+        {
+          title: 'GitHub - Maifee Ul Asad',
+          url: 'https://github.com',
+        },
+        {
+          title: 'GitHub - Maifee Ul Asad',
+          url: 'https://github.com',
+        },
+        {
+          title: 'GitHub - Maifee Ul Asad',
+          url: 'https://github.com',
+        },
+        {
+          title: 'GitHub - Maifee Ul Asad',
+          url: 'https://github.com',
+        },
+        {
+          title: 'GitHub - Maifee Ul Asad',
+          url: 'https://github.com',
+        },
+        {
+          title: 'GitHub - Maifee Ul Asad',
+          url: 'https://github.com',
+        },
+        {
+          title: 'GitHub - Maifee Ul Asad',
+          url: 'https://github.com',
+        },
+        {
+          title: 'GitHub - Maifee Ul Asad',
+          url: 'https://github.com',
+        },
+        {
+          title: 'GitHub - Maifee Ul Asad',
+          url: 'https://github.com',
+        },
+        {
+          title: 'GitHub - Maifee Ul Asad',
+          url: 'https://github.com',
+        },
+        {
+          title: 'GitHub - Maifee Ul Asad',
+          url: 'https://github.com',
+        },
+        {
+          title: 'GitHub - Maifee Ul Asad',
+          url: 'https://github.com',
+        },
+        {
+          title: 'GitHub - Maifee Ul Asad',
+          url: 'https://github.com',
+        },
+        {
+          title: 'GitHub - Maifee Ul Asad',
+          url: 'https://github.com',
+        },
+        {
+          title: 'GitHub - Maifee Ul Asad',
+          url: 'https://github.com',
+        },
+        {
+          title: 'GitHub - Maifee Ul Asad',
+          url: 'https://github.com',
+        },
+        {
+          title: 'GitHub - Maifee Ul Asad',
+          url: 'https://github.com',
+        },
+        {
+          title: 'GitHub - Maifee Ul Asad',
+          url: 'https://github.com',
+        },
+        {
+          title: 'GitHub - Maifee Ul Asad',
+          url: 'https://github.com',
+        },
       ]}
     />
     <Bubble

From 3f1f3206cd18a862a7b669b6ab1030a864e4cb69 Mon Sep 17 00:00:00 2001
From: Maifee Ul Asad <maifeeulasad@gmail.com>
Date: Sat, 14 Jun 2025 15:35:31 +0600
Subject: [PATCH 07/11] chores: fixed for review comment in MR

---
 components/bubble/Bubble.tsx | 202 ++++++++++++++++-------------------
 1 file changed, 95 insertions(+), 107 deletions(-)

diff --git a/components/bubble/Bubble.tsx b/components/bubble/Bubble.tsx
index 9e163e7ae..53b488fcb 100644
--- a/components/bubble/Bubble.tsx
+++ b/components/bubble/Bubble.tsx
@@ -7,7 +7,7 @@ import useXComponentConfig from '../_util/hooks/use-x-component-config';
 import { useXProviderContext } from '../x-provider';
 import useTypedEffect from './hooks/useTypedEffect';
 import useTypingConfig from './hooks/useTypingConfig';
-import type { BubbleContentType, BubbleProps } from './interface';
+import type { BubbleContentType, BubbleProps, ChatReference } from './interface';
 import Loading from './loading';
 import useStyle from './style';
 
@@ -150,84 +150,80 @@ const Bubble: React.ForwardRefRenderFunction<BubbleRef, BubbleProps> = (props, r
     </div>
   );
 
-  // =========================== Reference ============================
-
-  const referencesContent: React.ReactNode = React.useMemo(() => {
-    const ReferencesOverlay = () => {
-      const [isModalVisible, setIsModalVisible] = React.useState(false);
-      if (!references || references.length === 0) {
-        return null;
-      }
-
-      const count = references.length;
+  // =========================== References Overlay ============================
+  const ReferencesOverlay: React.FC<{ refsData: ChatReference[] }> = ({ refsData }) => {
+    const [isModalVisible, setIsModalVisible] = React.useState(false);
+    if (!refsData || refsData.length === 0) return null;
+
+    const count = refsData.length;
+    const button = (
+      <Button
+        icon={<InfoCircleOutlined />}
+        onClick={() => setIsModalVisible(true)}
+        className={classnames(`${prefixCls}-references-toggle`)}
+        style={{ cursor: 'pointer', color: '#1890ff', ...contextConfig.styles.references }}
+      >
+        {count} reference{count > 1 ? 's' : ''} used
+      </Button>
+    );
 
-      const button = (
-        <Button
-          icon={<InfoCircleOutlined />}
-          onClick={() => setIsModalVisible(true)}
-          className={classnames(`${prefixCls}-references-toggle`)}
-          style={{ cursor: 'pointer', color: '#1890ff', ...contextConfig.styles.references }}
+    return (
+      <>
+        <Popover content={button} trigger="hover" placement="bottom">
+          <Button
+            shape="circle"
+            icon={<InfoCircleOutlined />}
+            className={classnames(`${prefixCls}-references-toggle`)}
+            style={{ cursor: 'pointer' }}
+          />
+        </Popover>
+        <Modal
+          title="References"
+          open={isModalVisible}
+          onCancel={() => setIsModalVisible(false)}
+          footer={null}
+          destroyOnClose
+          className={classnames(`${prefixCls}-references-modal`)}
+          style={{ maxHeight: '80vh' }}
         >
-          {count} reference{count > 1 ? 's' : ''} used
-        </Button>
-      );
-
-      return (
-        <>
-          <Popover content={button} trigger="hover" placement="bottom">
-            <Button
-              shape="circle"
-              icon={<InfoCircleOutlined />}
-              className={classnames(`${prefixCls}-references-toggle`)}
-              style={{ cursor: 'pointer' }}
-            />
-          </Popover>
-          <Modal
-            style={{ maxHeight: '80vh' }}
-            title="References"
-            open={isModalVisible}
-            onCancel={() => setIsModalVisible(false)}
-            footer={null}
-            destroyOnClose
-            className={classnames(`${prefixCls}-references-modal`)}
-          >
-            <List
-              dataSource={references}
-              renderItem={(ref, index) => (
-                <List.Item key={index} className={`${prefixCls}-reference-item`}>
-                  <a
-                    href={ref.url}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className={`${prefixCls}-reference`}
-                  >
-                    <div>{ref.title}</div>
-                    {ref.description && (
-                      <span className={`${prefixCls}-reference-description`}>
-                        {ref.description}
-                      </span>
-                    )}
-                  </a>
-                </List.Item>
-              )}
-              className={classnames(
-                `${prefixCls}-references-list`,
-                contextConfig.classNames.references,
-              )}
-              style={{
-                ...contextConfig.styles.references,
-                maxHeight: '100%',
-                overflowY: 'auto',
-              }}
-            />
-          </Modal>
-        </>
-      );
-    };
-
-    return <ReferencesOverlay />;
-  }, [references, prefixCls, contextConfig]);
+          <List
+            dataSource={refsData}
+            renderItem={(ref, index) => (
+              <List.Item key={index} className={`${prefixCls}-reference-item`}>
+                <a
+                  href={ref.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className={`${prefixCls}-reference`}
+                >
+                  <div>{ref.title}</div>
+                  {ref.description && (
+                    <span className={`${prefixCls}-reference-description`}>{ref.description}</span>
+                  )}
+                </a>
+              </List.Item>
+            )}
+            className={classnames(
+              `${prefixCls}-references-list`,
+              contextConfig.classNames.references,
+            )}
+            style={{
+              ...contextConfig.styles.references,
+              maxHeight: '100%',
+              overflowY: 'auto',
+            }}
+          />
+        </Modal>
+      </>
+    );
+  };
+
+  const referencesContent: React.ReactNode = React.useMemo<React.ReactNode>(
+    () => <ReferencesOverlay refsData={references ?? []} />,
+    [references],
+  );
 
+  // ============================ Header/Footer Wrapper ============================
   if (header || footer) {
     fullContent = (
       <div className={`${prefixCls}-content-wrapper`}>
@@ -267,39 +263,31 @@ const Bubble: React.ForwardRefRenderFunction<BubbleRef, BubbleProps> = (props, r
   }
 
   return wrapCSSVar(
-    <div>
-      <div
-        style={{
-          ...contextConfig.style,
-          ...style,
-        }}
-        className={mergedCls}
-        {...otherHtmlProps}
-        ref={divRef}
-      >
-        {/* Avatar */}
-        {avatar && (
-          <div
-            style={{
-              ...contextConfig.styles.avatar,
-              ...styles.avatar,
-            }}
-            className={classnames(
-              `${prefixCls}-avatar`,
-              contextConfig.classNames.avatar,
-              classNames.avatar,
-            )}
-          >
-            {avatarNode}
-          </div>
-        )}
+    <div
+      style={{ ...contextConfig.style, ...style }}
+      className={mergedCls}
+      {...otherHtmlProps}
+      ref={divRef}
+    >
+      {/* Avatar */}
+      {avatar && (
+        <div
+          style={{ ...contextConfig.styles.avatar, ...styles.avatar }}
+          className={classnames(
+            `${prefixCls}-avatar`,
+            contextConfig.classNames.avatar,
+            classNames.avatar,
+          )}
+        >
+          {avatarNode}
+        </div>
+      )}
 
-        {/* Content */}
-        {fullContent}
+      {/* Content */}
+      {fullContent}
 
-        {/* Source */}
-        {referencesContent}
-      </div>
+      {/* Source */}
+      {referencesContent}
     </div>,
   );
 };

From 9e8873eb3a7902af62962070ba6b0277e4d5860e Mon Sep 17 00:00:00 2001
From: Maifee Ul Asad <maifeeulasad@gmail.com>
Date: Sat, 14 Jun 2025 15:38:51 +0600
Subject: [PATCH 08/11] chores: undo unnecessary change

---
 components/bubble/Bubble.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/components/bubble/Bubble.tsx b/components/bubble/Bubble.tsx
index 53b488fcb..59f31b181 100644
--- a/components/bubble/Bubble.tsx
+++ b/components/bubble/Bubble.tsx
@@ -264,7 +264,10 @@ const Bubble: React.ForwardRefRenderFunction<BubbleRef, BubbleProps> = (props, r
 
   return wrapCSSVar(
     <div
-      style={{ ...contextConfig.style, ...style }}
+      style={{
+        ...contextConfig.style,
+        ...style,
+      }}
       className={mergedCls}
       {...otherHtmlProps}
       ref={divRef}
@@ -272,7 +275,10 @@ const Bubble: React.ForwardRefRenderFunction<BubbleRef, BubbleProps> = (props, r
       {/* Avatar */}
       {avatar && (
         <div
-          style={{ ...contextConfig.styles.avatar, ...styles.avatar }}
+          style={{
+            ...contextConfig.styles.avatar,
+            ...styles.avatar,
+          }}
           className={classnames(
             `${prefixCls}-avatar`,
             contextConfig.classNames.avatar,

From 8cca016a48cef33052a65b987507ecb4db4f0356 Mon Sep 17 00:00:00 2001
From: Maifee Ul Asad <maifeeulasad@gmail.com>
Date: Mon, 16 Jun 2025 17:41:24 +0600
Subject: [PATCH 09/11] docs: updated docs for chat-reference

---
 components/bubble/index.en-US.md | 17 ++++++++++++++++-
 components/bubble/index.zh-CN.md | 15 ++++++++++++++-
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/components/bubble/index.en-US.md b/components/bubble/index.en-US.md
index c3eb3998b..739e1fce5 100644
--- a/components/bubble/index.en-US.md
+++ b/components/bubble/index.en-US.md
@@ -31,7 +31,7 @@ Often used when chatting.
 <code src="./demo/semantic-list-custom.tsx">Semantic custom list content</code>
 <code src="./demo/list-custom.tsx">Custom List Content</code>
 <code src="./demo/gpt-vis.tsx">Using GPT-Vis to render charts</code>
-<code src="./demo/reference" debug>Reference</code>
+<code src="./demo/reference.tsx">Reference</code>
 <code src="./demo/debug.tsx" debug>debug</code>
 <code src="./demo/debug-list.tsx" debug>debug list</code>
 
@@ -58,6 +58,7 @@ Common props ref：[Common props](/docs/react/common-props)
 | loadingRender | Customize loading content | () => ReactNode | - |  |
 | messageRender | Customize display content | <ContentType extends [BubbleContentType](https://github.com/ant-design/x/blob/d3232c925a0dc61ad763c6664e16f07323ebca4a/components/bubble/interface.ts#L21) = string>(content?: ContentType) => ReactNode | - |  |
 | onTypingComplete | Callback when typing effect is completed. If typing is not set, it will be triggered immediately when rendering. | () => void | - |  |
+| references       | Array of source links (title, url, optional description); displays an info-icon trigger with popover/modal listing. | [ChatReference](#chat-reference) []  | - | |
 
 #### ContentType
 
@@ -89,6 +90,20 @@ type CustomContentType {
 
 <code src="./demo/_semantic.tsx" simplify="true"></code>
 
+## Chat Reference
+
+Reference link data for `Bubble`. Pass an array of these via the `references` prop to enable an info-icon trigger with popover and then modal listing.
+
+```typescript
+export interface ChatReference {
+  description?: string;
+  title: string;
+  url: string;
+}
+```
+
+When provided, the `references` prop will render an info icon in the bubble. Clicking the icon will show a list of references, each with a title (as a clickable link), and an optional description.
+
 ## Design Token
 
 <ComponentTokenTable component="Bubble"></ComponentTokenTable>
diff --git a/components/bubble/index.zh-CN.md b/components/bubble/index.zh-CN.md
index 66006492a..f28aa40f5 100644
--- a/components/bubble/index.zh-CN.md
+++ b/components/bubble/index.zh-CN.md
@@ -32,7 +32,7 @@ demo:
 <code src="./demo/semantic-list-custom.tsx">语义化自定义</code>
 <code src="./demo/list-custom.tsx">自定义列表内容</code>
 <code src="./demo/gpt-vis.tsx">使用 GPT-Vis 渲染图表</code>
-<code src="./demo/reference" debug>参考</code>
+<code src="./demo/reference.tsx">参考</code>
 <code src="./demo/debug.tsx" debug>debug</code>
 <code src="./demo/debug-list.tsx" debug>debug list</code>
 
@@ -59,6 +59,7 @@ demo:
 | loadingRender | 自定义渲染加载态内容 | () => ReactNode | - |  |
 | messageRender | 自定义渲染内容 | (content?: ContentType) => ReactNode | - |  |
 | onTypingComplete | 打字效果完成时的回调，如果没有设置 typing 将在渲染时立刻触发 | () => void | - |  |
+| references | 引用源链接数组（包含标题、URL 和可选描述）；渲染信息图标以触发悬浮提示，并通过模态框列表展示。 | [聊天引用](#聊天引用)[] | - | |
 
 #### ContentType
 
@@ -90,6 +91,18 @@ type CustomContentType {
 
 <code src="./demo/_semantic.tsx" simplify="true"></code>
 
+## 聊天引用
+
+`Bubble` 的引用链接数据。通过 `references` 属性传入该接口数组，可启用信息图标触发 Popover，并通过 Modal 列表展示引用。
+
+```typescript
+export interface ChatReference {
+  description?: string;
+  title: string;
+  url: string;
+}
+```
+
 ## 主题变量（Design Token）
 
 <ComponentTokenTable component="Bubble"></ComponentTokenTable>

From 9c616eaf704a0c9c3f128f25e5a018449702d3d1 Mon Sep 17 00:00:00 2001
From: Maifee Ul Asad <maifeeulasad@gmail.com>
Date: Fri, 19 Sep 2025 19:57:10 +0600
Subject: [PATCH 10/11] fix: updated snap for test

---
 .../__snapshots__/demo-extend.test.ts.snap    | 313 ++++++++++++++++++
 .../__tests__/__snapshots__/demo.test.ts.snap | 191 +++++++++++
 .../__tests__/__snapshots__/demo.test.ts.snap |   2 +-
 tests/shared/__snapshots__/demoTest.tsx.snap  |   0
 4 files changed, 505 insertions(+), 1 deletion(-)
 create mode 100644 tests/shared/__snapshots__/demoTest.tsx.snap

diff --git a/components/bubble/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/bubble/__tests__/__snapshots__/demo-extend.test.ts.snap
index 1369428be..3ed7d67e7 100644
--- a/components/bubble/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/bubble/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -2393,6 +2393,319 @@ exports[`renders components/bubble/demo/markdown.tsx extend context correctly 1`
 
 exports[`renders components/bubble/demo/markdown.tsx extend context correctly 2`] = `[]`;
 
+exports[`renders components/bubble/demo/reference.tsx extend context correctly 1`] = `
+<div
+  class="ant-flex ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
+>
+  <div
+    class="ant-bubble ant-bubble-start"
+  >
+    <div
+      class="ant-bubble-avatar"
+    >
+      <span
+        class="ant-avatar ant-avatar-circle ant-avatar-icon"
+        style="color: #f56a00; background-color: #fde3cf;"
+      >
+        <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"
+    >
+      Good morning, how are you?
+    </div>
+    <button
+      aria-describedby="test-id"
+      class="ant-btn ant-btn-circle ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-bubble-references-toggle"
+      style="cursor: pointer;"
+      type="button"
+    >
+      <span
+        class="ant-btn-icon"
+      >
+        <span
+          aria-label="info-circle"
+          class="anticon anticon-info-circle"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="info-circle"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
+            />
+            <path
+              d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
+            />
+          </svg>
+        </span>
+      </span>
+    </button>
+    <div
+      class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-placement-bottom"
+      style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; right: auto; bottom: auto; box-sizing: border-box;"
+    >
+      <div
+        class="ant-popover-arrow"
+        style="position: absolute; top: 0px; left: 0px;"
+      />
+      <div
+        class="ant-popover-content"
+      >
+        <div
+          class="ant-popover-inner"
+          id="test-id"
+          role="tooltip"
+        >
+          <div
+            class="ant-popover-inner-content"
+          >
+            <button
+              class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-bubble-references-toggle"
+              style="cursor: pointer; color: #1890ff;"
+              type="button"
+            >
+              <span
+                class="ant-btn-icon"
+              >
+                <span
+                  aria-label="info-circle"
+                  class="anticon anticon-info-circle"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="info-circle"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
+                    />
+                    <path
+                      d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
+                    />
+                  </svg>
+                </span>
+              </span>
+              <span>
+                32 references used
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-bubble ant-bubble-start"
+  >
+    <div
+      class="ant-bubble-avatar"
+      style="visibility: hidden;"
+    >
+      <span
+        class="ant-avatar ant-avatar-circle"
+      >
+        <span
+          class="ant-avatar-string"
+          style="transform: scale(1);"
+        />
+      </span>
+    </div>
+    <div
+      class="ant-bubble-content ant-bubble-content-filled"
+    >
+      What a beautiful day!
+    </div>
+    <button
+      aria-describedby="test-id"
+      class="ant-btn ant-btn-circle ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-bubble-references-toggle"
+      style="cursor: pointer;"
+      type="button"
+    >
+      <span
+        class="ant-btn-icon"
+      >
+        <span
+          aria-label="info-circle"
+          class="anticon anticon-info-circle"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="info-circle"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
+            />
+            <path
+              d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
+            />
+          </svg>
+        </span>
+      </span>
+    </button>
+    <div
+      class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-placement-bottom"
+      style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; right: auto; bottom: auto; box-sizing: border-box;"
+    >
+      <div
+        class="ant-popover-arrow"
+        style="position: absolute; top: 0px; left: 0px;"
+      />
+      <div
+        class="ant-popover-content"
+      >
+        <div
+          class="ant-popover-inner"
+          id="test-id"
+          role="tooltip"
+        >
+          <div
+            class="ant-popover-inner-content"
+          >
+            <button
+              class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-bubble-references-toggle"
+              style="cursor: pointer; color: #1890ff;"
+              type="button"
+            >
+              <span
+                class="ant-btn-icon"
+              >
+                <span
+                  aria-label="info-circle"
+                  class="anticon anticon-info-circle"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="info-circle"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
+                    />
+                    <path
+                      d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
+                    />
+                  </svg>
+                </span>
+              </span>
+              <span>
+                3 references used
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-bubble ant-bubble-end"
+  >
+    <div
+      class="ant-bubble-avatar"
+    >
+      <span
+        class="ant-avatar ant-avatar-circle ant-avatar-icon"
+        style="color: #fff; background-color: #87d068;"
+      >
+        <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"
+    >
+      Hi, good morning, I'm fine!
+    </div>
+  </div>
+  <div
+    class="ant-bubble ant-bubble-end"
+  >
+    <div
+      class="ant-bubble-avatar"
+      style="visibility: hidden;"
+    >
+      <span
+        class="ant-avatar ant-avatar-circle"
+      >
+        <span
+          class="ant-avatar-string"
+          style="transform: scale(1);"
+        />
+      </span>
+    </div>
+    <div
+      class="ant-bubble-content ant-bubble-content-filled"
+    >
+      Thank you!
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders components/bubble/demo/reference.tsx extend context correctly 2`] = `
+[
+  "Warning: [antd: Modal] \`destroyOnClose\` is deprecated. Please use \`destroyOnHidden\` instead.",
+]
+`;
+
 exports[`renders components/bubble/demo/semantic-list-custom.tsx extend context correctly 1`] = `
 <div
   class="ant-bubble-list ant-bubble-list-reach-end"
diff --git a/components/bubble/__tests__/__snapshots__/demo.test.ts.snap b/components/bubble/__tests__/__snapshots__/demo.test.ts.snap
index 8d2c2f46d..ebd57dc16 100644
--- a/components/bubble/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/bubble/__tests__/__snapshots__/demo.test.ts.snap
@@ -2295,6 +2295,197 @@ exports[`renders components/bubble/demo/markdown.tsx correctly 1`] = `
 </div>
 `;
 
+exports[`renders components/bubble/demo/reference.tsx correctly 1`] = `
+<div
+  class="ant-flex ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
+>
+  <div
+    class="ant-bubble ant-bubble-start"
+  >
+    <div
+      class="ant-bubble-avatar"
+    >
+      <span
+        class="ant-avatar ant-avatar-circle ant-avatar-icon"
+        style="color:#f56a00;background-color:#fde3cf"
+      >
+        <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"
+    >
+      Good morning, how are you?
+    </div>
+    <button
+      aria-describedby="test-id"
+      class="ant-btn ant-btn-circle ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-bubble-references-toggle"
+      style="cursor:pointer"
+      type="button"
+    >
+      <span
+        class="ant-btn-icon"
+      >
+        <span
+          aria-label="info-circle"
+          class="anticon anticon-info-circle"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="info-circle"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
+            />
+            <path
+              d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
+            />
+          </svg>
+        </span>
+      </span>
+    </button>
+  </div>
+  <div
+    class="ant-bubble ant-bubble-start"
+  >
+    <div
+      class="ant-bubble-avatar"
+      style="visibility:hidden"
+    >
+      <span
+        class="ant-avatar ant-avatar-circle"
+      >
+        <span
+          class="ant-avatar-string"
+          style="opacity:0"
+        />
+      </span>
+    </div>
+    <div
+      class="ant-bubble-content ant-bubble-content-filled"
+    >
+      What a beautiful day!
+    </div>
+    <button
+      aria-describedby="test-id"
+      class="ant-btn ant-btn-circle ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-bubble-references-toggle"
+      style="cursor:pointer"
+      type="button"
+    >
+      <span
+        class="ant-btn-icon"
+      >
+        <span
+          aria-label="info-circle"
+          class="anticon anticon-info-circle"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="info-circle"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
+            />
+            <path
+              d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
+            />
+          </svg>
+        </span>
+      </span>
+    </button>
+  </div>
+  <div
+    class="ant-bubble ant-bubble-end"
+  >
+    <div
+      class="ant-bubble-avatar"
+    >
+      <span
+        class="ant-avatar ant-avatar-circle ant-avatar-icon"
+        style="color:#fff;background-color:#87d068"
+      >
+        <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"
+    >
+      Hi, good morning, I'm fine!
+    </div>
+  </div>
+  <div
+    class="ant-bubble ant-bubble-end"
+  >
+    <div
+      class="ant-bubble-avatar"
+      style="visibility:hidden"
+    >
+      <span
+        class="ant-avatar ant-avatar-circle"
+      >
+        <span
+          class="ant-avatar-string"
+          style="opacity:0"
+        />
+      </span>
+    </div>
+    <div
+      class="ant-bubble-content ant-bubble-content-filled"
+    >
+      Thank you!
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders components/bubble/demo/semantic-list-custom.tsx correctly 1`] = `
 <div
   class="ant-bubble-list ant-bubble-list-reach-end"
diff --git a/components/use-x-agent/__tests__/__snapshots__/demo.test.ts.snap b/components/use-x-agent/__tests__/__snapshots__/demo.test.ts.snap
index 38d5cf149..36ec0bc7b 100644
--- a/components/use-x-agent/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/use-x-agent/__tests__/__snapshots__/demo.test.ts.snap
@@ -7,7 +7,7 @@ Array [
     class="ant-form ant-form-vertical"
   >
     <div
-      class="ant-form-item"
+      class="ant-form-item ant-form-item-vertical"
     >
       <div
         class="ant-row ant-form-item-row"
diff --git a/tests/shared/__snapshots__/demoTest.tsx.snap b/tests/shared/__snapshots__/demoTest.tsx.snap
new file mode 100644
index 000000000..e69de29bb

From 5efe4fbf4d425d7b5559d2f50c086a53c207020e Mon Sep 17 00:00:00 2001
From: Maifee Ul Asad <maifeeulasad@gmail.com>
Date: Fri, 19 Sep 2025 20:32:57 +0600
Subject: [PATCH 11/11] fix: updated snap after merging from main

---
 .../__snapshots__/demo-extend.test.ts.snap    | 315 +++++++++++++++++-
 .../__tests__/__snapshots__/demo.test.ts.snap | 193 ++++++++++-
 2 files changed, 506 insertions(+), 2 deletions(-)

diff --git a/components/bubble/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/bubble/__tests__/__snapshots__/demo-extend.test.ts.snap
index 8d4c3542b..18f5a98f8 100644
--- a/components/bubble/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/bubble/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders components/bubble/demo/avatar-and-placement.tsx extend context correctly 1`] = `
 <div
@@ -3569,6 +3569,319 @@ exports[`renders components/bubble/demo/onScroll.tsx extend context correctly 1`
 
 exports[`renders components/bubble/demo/onScroll.tsx extend context correctly 2`] = `[]`;
 
+exports[`renders components/bubble/demo/reference.tsx extend context correctly 1`] = `
+<div
+  class="ant-flex ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
+>
+  <div
+    class="ant-bubble ant-bubble-start"
+  >
+    <div
+      class="ant-bubble-avatar"
+    >
+      <span
+        class="ant-avatar ant-avatar-circle ant-avatar-icon"
+        style="color: #f56a00; background-color: #fde3cf;"
+      >
+        <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"
+    >
+      Good morning, how are you?
+    </div>
+    <button
+      aria-describedby="test-id"
+      class="ant-btn ant-btn-circle ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-bubble-references-toggle"
+      style="cursor: pointer;"
+      type="button"
+    >
+      <span
+        class="ant-btn-icon"
+      >
+        <span
+          aria-label="info-circle"
+          class="anticon anticon-info-circle"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="info-circle"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
+            />
+            <path
+              d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
+            />
+          </svg>
+        </span>
+      </span>
+    </button>
+    <div
+      class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-placement-bottom"
+      style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; right: auto; bottom: auto; box-sizing: border-box;"
+    >
+      <div
+        class="ant-popover-arrow"
+        style="position: absolute; top: 0px; left: 0px;"
+      />
+      <div
+        class="ant-popover-content"
+      >
+        <div
+          class="ant-popover-inner"
+          id="test-id"
+          role="tooltip"
+        >
+          <div
+            class="ant-popover-inner-content"
+          >
+            <button
+              class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-bubble-references-toggle"
+              style="cursor: pointer; color: #1890ff;"
+              type="button"
+            >
+              <span
+                class="ant-btn-icon"
+              >
+                <span
+                  aria-label="info-circle"
+                  class="anticon anticon-info-circle"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="info-circle"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
+                    />
+                    <path
+                      d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
+                    />
+                  </svg>
+                </span>
+              </span>
+              <span>
+                32 references used
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-bubble ant-bubble-start"
+  >
+    <div
+      class="ant-bubble-avatar"
+      style="visibility: hidden;"
+    >
+      <span
+        class="ant-avatar ant-avatar-circle"
+      >
+        <span
+          class="ant-avatar-string"
+          style="transform: scale(1);"
+        />
+      </span>
+    </div>
+    <div
+      class="ant-bubble-content ant-bubble-content-filled"
+    >
+      What a beautiful day!
+    </div>
+    <button
+      aria-describedby="test-id"
+      class="ant-btn ant-btn-circle ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-bubble-references-toggle"
+      style="cursor: pointer;"
+      type="button"
+    >
+      <span
+        class="ant-btn-icon"
+      >
+        <span
+          aria-label="info-circle"
+          class="anticon anticon-info-circle"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="info-circle"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
+            />
+            <path
+              d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
+            />
+          </svg>
+        </span>
+      </span>
+    </button>
+    <div
+      class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-placement-bottom"
+      style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; right: auto; bottom: auto; box-sizing: border-box;"
+    >
+      <div
+        class="ant-popover-arrow"
+        style="position: absolute; top: 0px; left: 0px;"
+      />
+      <div
+        class="ant-popover-content"
+      >
+        <div
+          class="ant-popover-inner"
+          id="test-id"
+          role="tooltip"
+        >
+          <div
+            class="ant-popover-inner-content"
+          >
+            <button
+              class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-bubble-references-toggle"
+              style="cursor: pointer; color: #1890ff;"
+              type="button"
+            >
+              <span
+                class="ant-btn-icon"
+              >
+                <span
+                  aria-label="info-circle"
+                  class="anticon anticon-info-circle"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="info-circle"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
+                    />
+                    <path
+                      d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
+                    />
+                  </svg>
+                </span>
+              </span>
+              <span>
+                3 references used
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-bubble ant-bubble-end"
+  >
+    <div
+      class="ant-bubble-avatar"
+    >
+      <span
+        class="ant-avatar ant-avatar-circle ant-avatar-icon"
+        style="color: #fff; background-color: #87d068;"
+      >
+        <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"
+    >
+      Hi, good morning, I'm fine!
+    </div>
+  </div>
+  <div
+    class="ant-bubble ant-bubble-end"
+  >
+    <div
+      class="ant-bubble-avatar"
+      style="visibility: hidden;"
+    >
+      <span
+        class="ant-avatar ant-avatar-circle"
+      >
+        <span
+          class="ant-avatar-string"
+          style="transform: scale(1);"
+        />
+      </span>
+    </div>
+    <div
+      class="ant-bubble-content ant-bubble-content-filled"
+    >
+      Thank you!
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders components/bubble/demo/reference.tsx extend context correctly 2`] = `
+[
+  "Warning: [antd: Modal] \`destroyOnClose\` is deprecated. Please use \`destroyOnHidden\` instead.",
+]
+`;
+
 exports[`renders components/bubble/demo/semantic-list-custom.tsx extend context correctly 1`] = `
 <div
   class="ant-bubble-list ant-bubble-list-reach-end"
diff --git a/components/bubble/__tests__/__snapshots__/demo.test.ts.snap b/components/bubble/__tests__/__snapshots__/demo.test.ts.snap
index 9260329df..c968e1bc9 100644
--- a/components/bubble/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/bubble/__tests__/__snapshots__/demo.test.ts.snap
@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders components/bubble/demo/avatar-and-placement.tsx correctly 1`] = `
 <div
@@ -3471,6 +3471,197 @@ exports[`renders components/bubble/demo/onScroll.tsx correctly 1`] = `
 </div>
 `;
 
+exports[`renders components/bubble/demo/reference.tsx correctly 1`] = `
+<div
+  class="ant-flex ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
+>
+  <div
+    class="ant-bubble ant-bubble-start"
+  >
+    <div
+      class="ant-bubble-avatar"
+    >
+      <span
+        class="ant-avatar ant-avatar-circle ant-avatar-icon"
+        style="color:#f56a00;background-color:#fde3cf"
+      >
+        <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"
+    >
+      Good morning, how are you?
+    </div>
+    <button
+      aria-describedby="test-id"
+      class="ant-btn ant-btn-circle ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-bubble-references-toggle"
+      style="cursor:pointer"
+      type="button"
+    >
+      <span
+        class="ant-btn-icon"
+      >
+        <span
+          aria-label="info-circle"
+          class="anticon anticon-info-circle"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="info-circle"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
+            />
+            <path
+              d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
+            />
+          </svg>
+        </span>
+      </span>
+    </button>
+  </div>
+  <div
+    class="ant-bubble ant-bubble-start"
+  >
+    <div
+      class="ant-bubble-avatar"
+      style="visibility:hidden"
+    >
+      <span
+        class="ant-avatar ant-avatar-circle"
+      >
+        <span
+          class="ant-avatar-string"
+          style="opacity:0"
+        />
+      </span>
+    </div>
+    <div
+      class="ant-bubble-content ant-bubble-content-filled"
+    >
+      What a beautiful day!
+    </div>
+    <button
+      aria-describedby="test-id"
+      class="ant-btn ant-btn-circle ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-bubble-references-toggle"
+      style="cursor:pointer"
+      type="button"
+    >
+      <span
+        class="ant-btn-icon"
+      >
+        <span
+          aria-label="info-circle"
+          class="anticon anticon-info-circle"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="info-circle"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
+            />
+            <path
+              d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
+            />
+          </svg>
+        </span>
+      </span>
+    </button>
+  </div>
+  <div
+    class="ant-bubble ant-bubble-end"
+  >
+    <div
+      class="ant-bubble-avatar"
+    >
+      <span
+        class="ant-avatar ant-avatar-circle ant-avatar-icon"
+        style="color:#fff;background-color:#87d068"
+      >
+        <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"
+    >
+      Hi, good morning, I'm fine!
+    </div>
+  </div>
+  <div
+    class="ant-bubble ant-bubble-end"
+  >
+    <div
+      class="ant-bubble-avatar"
+      style="visibility:hidden"
+    >
+      <span
+        class="ant-avatar ant-avatar-circle"
+      >
+        <span
+          class="ant-avatar-string"
+          style="opacity:0"
+        />
+      </span>
+    </div>
+    <div
+      class="ant-bubble-content ant-bubble-content-filled"
+    >
+      Thank you!
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders components/bubble/demo/semantic-list-custom.tsx correctly 1`] = `
 <div
   class="ant-bubble-list ant-bubble-list-reach-end"