From 6f01cc9deea09bea60b41c5ac24763242236c2f8 Mon Sep 17 00:00:00 2001
From: Maifee Ul Asad <maifeeulasad@gmail.com>
Date: Sat, 23 Nov 2024 14:50:26 +0600
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20enhanced=20url=20exploratio?=
 =?UTF-8?q?n=20for=20references=20(#332)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/ChatItem/components/MessageContent.tsx | 34 +++++++++++++++++-----
 1 file changed, 26 insertions(+), 8 deletions(-)

diff --git a/src/ChatItem/components/MessageContent.tsx b/src/ChatItem/components/MessageContent.tsx
index 0725361..39bd476 100644
--- 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>
               )}