✨ feat: enhanced url exploration for references (ant-design#332)

maifeeulasad · Nov 23, 2024 · 6f01cc9 · 6f01cc9
1 parent 4fbbb32
commit 6f01cc9
Showing 1 changed file with 26 additions and 8 deletions.
diff --git a/src/ChatItem/components/MessageContent.tsx b/src/ChatItem/components/MessageContent.tsx
@@ -9,6 +9,28 @@ import { Card, ConfigProvider, List } from 'antd';
 import { MarkdownProps } from '@ant-design/pro-editor';
 import { useStyles } from '../style';
 
+import { InfoCircleOutlined } from '@ant-design/icons';
+
+interface ExternalLinkProps {
+  url: string;
+}
+
+const ExternalLink: React.FC<ExternalLinkProps> = ({ url }) => {
+  const handleClick = () => {
+    window.open(url, '_blank', 'noopener noreferrer');
+  };
+
+  return (
+    <InfoCircleOutlined
+      style={{
+        cursor: 'pointer',
+        transition: 'color 0.3s ease',
+      }}
+      onClick={handleClick}
+    />
+  );
+};
+
 export interface MessageContentProps {
   editing?: ChatItemProps['editing'];
   message?: ReactNode;
@@ -46,13 +68,13 @@ const MessageContent = memo<MessageContentProps>(
     const { cx, styles } = useStyles({ editing, placement, primary, type });
     const { mobile } = useResponsive();
     // const references = [
-    //   { url: 'https://www.a.com', description: 'lots of meawww', title: 'bb' },
+    //   { url: 'https://www.a.com', description: 'lots of meawww', title: 'a' },
     //   { url: 'https://www.b.com', title: 'bb' },
     //   { url: 'http://woof.com', description: 'ghew ghew', title: 'dog' },
-    //   { url: 'https://www.a.com', description: 'lots of meawww', title: 'bb' },
+    //   { url: 'https://www.a.com', description: 'lots of meawww', title: 'bc' },
     //   { url: 'https://www.b.com', title: 'bb' },
     //   { url: 'http://woof.com', description: 'ghew ghew', title: 'dog' },
-    //   { url: 'https://www.a.com', description: 'lots of meawww', title: 'bb' },
+    //   { url: 'https://www.a.com', description: 'lots of meawww', title: 'bd' },
     //   { url: 'https://www.b.com', title: 'bb' },
     //   { url: 'http://woof.com', description: 'ghew ghew', title: 'dog' },
     //   { url: 'https://www.a.com', description: 'lots of meawww', title: 'bb' },
@@ -94,12 +116,8 @@ const MessageContent = memo<MessageContentProps>(
               dataSource={references}
               renderItem={({ title, description, url }) => (
                 <List.Item>
-                  <Card>
+                  <Card hoverable title={title} extra={<ExternalLink url={url} />}>
                     {description}
-                    <Card.Meta title={title} />
-                    <a href={url} target="_blank" rel="noopener noreferrer">
-                      {new URL(url).hostname}
-                    </a>
                   </Card>
                 </List.Item>
               )}