reference in bubble

components/bubble/Bubble.tsx

@@ -1,12 +1,13 @@
 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';
 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';
 
@@ -40,6 +41,7 @@ const Bubble: React.ForwardRefRenderFunction<BubbleRef, BubbleProps> = (props, r
     onTypingComplete,
     header,
     footer,
+    references,
     ...otherHtmlProps
   } = props;
 
@@ -148,6 +150,80 @@ const Bubble: React.ForwardRefRenderFunction<BubbleRef, BubbleProps> = (props, r
     </div>
   );
 
+  // =========================== 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>
+    );
+
+    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' }}
+        >
+          <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`}>
@@ -215,6 +291,9 @@ const Bubble: React.ForwardRefRenderFunction<BubbleRef, BubbleProps> = (props, r
 
       {/* Content */}
       {fullContent}
+
+      {/* Source */}
+      {referencesContent}
     </div>,
   );
 };

components/bubble/demo/reference.tsx

@@ -0,0 +1,191 @@
+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',
+        },
+        {
+          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
+      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/maifeeulasad',
+        },
+      ]}
+    />
+    <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;

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>
 

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>
 

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[];
 }