reference in bubble

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,6 +41,7 @@ const Bubble: React.ForwardRefRenderFunction<BubbleRef, BubbleProps> = (props, r
     onTypingComplete,
     header,
     footer,
+    references,
     ...otherHtmlProps
   } = props;
 
@@ -148,6 +150,84 @@ 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
+            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]);
+
   if (header || footer) {
     fullContent = (
       <div className={`${prefixCls}-content-wrapper`}>
@@ -187,34 +267,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>,
   );
 };

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