From 4f4f7f7ae27905c3e2aa09669bbb9a4d8ef3117b Mon Sep 17 00:00:00 2001
From: zaidmukaddam <zaidaltafmukaddam@gmail.com>
Date: Mon, 26 Aug 2024 13:16:00 +0530
Subject: [PATCH] improve citation component

---
 app/page.tsx   | 49 ++++++++++++++++++++++++++++++++-----------------
 package.json   |  1 +
 pnpm-lock.yaml |  3 +++
 3 files changed, 36 insertions(+), 17 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index c21ea78..06c69ce 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1241,28 +1241,39 @@ export default function Home() {
     href: string;
     children: React.ReactNode;
     index: number;
+    citationText: string;
   }
 
-  const CitationComponent: React.FC<CitationComponentProps> = React.memo(({ href, index }) => {
-    const faviconUrl = `https://www.google.com/s2/favicons?sz=128&domain=${new URL(href).hostname}`;
+  const CitationComponent: React.FC<CitationComponentProps> = React.memo(({ href, index, citationText }) => {
+    const { hostname } = new URL(href);
+    const faviconUrl = `https://www.google.com/s2/favicons?sz=128&domain=${hostname}`;
 
     return (
-      <HoverCard key={index}>
+      <HoverCard>
         <HoverCardTrigger asChild>
-          <a
-            href={href}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="cursor-help text-sm text-primary py-0.5 px-1.5 m-0 bg-secondary rounded-full no-underline"
-          >
-            {index + 1}
-          </a>
+          <sup>
+            <a
+              href={href}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="cursor-help text-sm text-primary py-0.5 px-1.5 m-0 bg-secondary rounded-full no-underline"
+            >
+              {index + 1}
+            </a>
+          </sup>
         </HoverCardTrigger>
-        <HoverCardContent className="flex items-center gap-1 !p-0 !px-0.5 max-w-xs bg-card text-card-foreground !m-0 h-6 rounded-xl">
-          <Image src={faviconUrl} alt="Favicon" width={16} height={16} className="w-4 h-4 flex-shrink-0 rounded-full" />
-          <a href={href} target="_blank" rel="noopener noreferrer" className="text-sm text-primary no-underline truncate">
-            {href}
-          </a>
+        <HoverCardContent className="w-fit p-2 m-0">
+          <div className="flex items-center justify-between mb-1 m-0">
+            <a
+              href={href}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-center m-0 h-8 hover:no-underline">
+              <Image src={faviconUrl} alt="Favicon" width={16} height={16} className="rounded-sm mr-2" />
+              <span className="text-sm">{hostname}</span>
+            </a>
+          </div>
+          <p className="text-sm font-medium m-0">{citationText}</p>
         </HoverCardContent>
       </HoverCard>
     );
@@ -1290,7 +1301,11 @@ export default function Home() {
         if (!href) return null;
         const index = citationLinks.findIndex((link) => link.link === href);
         return index !== -1 ? (
-          <CitationComponent href={href} index={index}>
+          <CitationComponent
+            href={href}
+            index={index}
+            citationText={citationLinks[index].text}
+          >
             {children}
           </CitationComponent>
         ) : (
diff --git a/package.json b/package.json
index e57777d..4364055 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
     "clsx": "^2.1.1",
     "date-fns": "^3.6.0",
     "framer-motion": "^11.3.19",
+    "katex": "^0.16.11",
     "lucide-react": "^0.424.0",
     "next": "^14.2.5",
     "openai": "^4.56.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 155708f..139de53 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -77,6 +77,9 @@ dependencies:
   framer-motion:
     specifier: ^11.3.19
     version: 11.3.20(react-dom@18.3.1)(react@18.3.1)
+  katex:
+    specifier: ^0.16.11
+    version: 0.16.11
   lucide-react:
     specifier: ^0.424.0
     version: 0.424.0(react@18.3.1)