stash commit

frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/MessageRow.tsx

@@ -1,5 +1,7 @@
 import React from "react";
 
+import { Source } from "@/lib/types/MessageMetadata";
+
 import { CopyButton } from "./components/CopyButton";
 import { MessageContent } from "./components/MessageContent";
 import { QuestionBrain } from "./components/QuestionBrain";
@@ -13,7 +15,7 @@ type MessageRowProps = {
   promptName?: string | null;
   children?: React.ReactNode;
   metadata?: {
-    sources?: [string] | [];
+    sources?: Source[];
   };
 };
 

frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/SourcesButton.tsx

@@ -2,10 +2,11 @@ import { useEffect, useRef, useState } from "react";
 import ReactDOM from "react-dom";
 import { FaQuestionCircle } from "react-icons/fa";
 
+import { Source } from "@/lib/types/MessageMetadata";
 import { useEventTracking } from "@/services/analytics/june/useEventTracking";
 
 type SourcesButtonProps = {
-  sources: [string] | [];
+  sources: Source[];
 };
 
 export const SourcesButton = ({ sources }: SourcesButtonProps): JSX.Element => {
@@ -39,7 +40,7 @@ export const SourcesButton = ({ sources }: SourcesButtonProps): JSX.Element => {
     <ul className="list-disc list-inside">
       {sources.map((source, index) => (
         <li key={index} className="truncate">
-          {source.trim()}
+          {source.name}
         </li>
       ))}
     </ul>

frontend/app/chat/[chatId]/components/DataPanel/DataPanel.tsx

@@ -19,7 +19,7 @@ const DataPanel = (): JSX.Element => {
       const lastMessage = messages[messages.length - 1];
       setLastMessageMetadata({
         closeBrains: lastMessage.metadata?.close_brains ?? [],
-        sources: lastMessage.metadata?.sources ?? [""],
+        sources: lastMessage.metadata?.sources ?? [],
       });
     }
   }, [messages]);

frontend/app/chat/[chatId]/components/DataPanel/components/RelatedBrains/RelatedBrains.module.scss

@@ -20,6 +20,7 @@
       display: flex;
       align-items: center;
       gap: Spacings.$spacing03;
+      overflow: hidden;
 
       .copy_icon {
         visibility: hidden;

frontend/app/chat/[chatId]/components/DataPanel/components/Sources/Sources.tsx

@@ -1,14 +1,28 @@
+import { useEffect } from "react";
+
 import { FoldableSection } from "@/lib/components/ui/FoldableSection/FoldableSection";
+import { Source } from "@/lib/types/MessageMetadata";
 
 interface SourcesProps {
-  sources?: [string];
+  sources?: Source[];
 }
 
 const Sources = ({ sources }: SourcesProps): JSX.Element => {
+  useEffect(() => {
+    console.info(sources);
+  }, [sources]);
+
   return (
     <FoldableSection label="Sources" icon="file">
       {sources?.map((source, index) => (
-        <div key={index}>{source}</div>
+        <a
+          href={source.source_url}
+          key={index}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <div>{source.name}</div>
+        </a>
       ))}
     </FoldableSection>
   );

frontend/app/chat/[chatId]/types/index.ts

@@ -1,6 +1,6 @@
 import { UUID } from "crypto";
 
-import { CloseBrain } from "@/lib/types/MessageMetadata";
+import { CloseBrain, Source } from "@/lib/types/MessageMetadata";
 
 export type ChatQuestion = {
   model?: string;
@@ -20,7 +20,7 @@ export type ChatMessage = {
   brain_name?: string;
   brain_id?: UUID;
   metadata?: {
-    sources?: [string];
+    sources?: Source[];
     close_brains?: CloseBrain[];
   };
 };

frontend/lib/types/MessageMetadata.ts

@@ -4,7 +4,13 @@ export interface CloseBrain {
   name: string;
 }
 
+export interface Source {
+  name: string;
+  source_url: string;
+  type: string;
+}
+
 export interface MessageMetadata {
   closeBrains: CloseBrain[];
-  sources: [string];
+  sources: Source[];
 }