feat(message-rendering): create citation component

Create new citation component to fix errors with tailwind not compiling CSS classes for the anchor tag

src/components/Citation.tsx

@@ -0,0 +1,19 @@
+const Citation = ({
+  href,
+  children,
+}: {
+  href: string;
+  children: React.ReactNode;
+}) => {
+  return (
+    <a
+      href={href}
+      target="_blank"
+      className="bg-light-secondary dark:bg-dark-secondary px-1 rounded ml-1 no-underline text-xs text-black/70 dark:text-white/70 relative"
+    >
+      {children}
+    </a>
+  );
+};
+
+export default Citation;

src/components/MessageBox.tsx

@@ -20,6 +20,7 @@ import SearchVideos from './SearchVideos';
 import { useSpeech } from 'react-text-to-speech';
 import ThinkBox from './ThinkBox';
 import { useChat, Section } from '@/lib/hooks/useChat';
+import Citation from './Citation';
 
 const ThinkTagProcessor = ({
   children,
@@ -46,7 +47,6 @@ const MessageBox = ({
 }) => {
   const { loading, chatTurns, sendMessage, rewrite } = useChat();
 
-  // Use the pre-processed data from section
   const parsedMessage = section.parsedAssistantMessage || '';
   const speechMessage = section.speechMessage || '';
   const thinkingEnded = section.thinkingEnded;
@@ -61,6 +61,9 @@ const MessageBox = ({
           thinkingEnded: thinkingEnded,
         },
       },
+      citation: {
+        component: Citation,
+      },
     },
   };
 

src/lib/hooks/useChat.tsx

@@ -446,7 +446,7 @@ export const ChatProvider = ({
                     const url = source?.metadata?.url;
 
                     if (url) {
-                      return `<a href="${url}" target="_blank" className="bg-light-secondary dark:bg-dark-secondary px-1 rounded ml-1 no-underline text-xs text-black/70 dark:text-white/70 relative">${numStr}</a>`;
+                      return `<citation href="${url}">${numStr}</citation>`;
                     } else {
                       return ``;
                     }