first card

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

@@ -1,12 +1,31 @@
 "use client";
 
+import { useEffect, useState } from "react";
+
+import { useChatContext } from "@/lib/context";
+import { CloseBrain } from "@/lib/types/MessageMetadata";
+
 import styles from "./DataPanel.module.scss";
 import RelatedBrains from "./components/RelatedBrains/RelatedBrains";
 
 const DataPanel = (): JSX.Element => {
+  const { messages } = useChatContext();
+  const [lastMessageRelatedBrain, setLastMessageRelatedBrain] = useState<
+    CloseBrain[]
+  >([]);
+
+  useEffect(() => {
+    if (messages.length > 0) {
+      const lastMessage = messages[messages.length - 1];
+      if (lastMessage?.metadata?.close_brains) {
+        setLastMessageRelatedBrain(lastMessage.metadata.close_brains);
+      }
+    }
+  }, [lastMessageRelatedBrain, messages]);
+
   return (
     <div className={styles.data_panel_wrapper}>
-      <RelatedBrains />
+      <RelatedBrains closeBrains={lastMessageRelatedBrain} />
     </div>
   );
 };

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

@@ -1,9 +1,22 @@
-"use client";
+import { CloseBrain } from "@/lib/types/MessageMetadata";
 
 import styles from "./RelatedBrains.module.scss";
 
-const RelatedBrains = (): JSX.Element => {
-  return <div className={styles.related_brains_wrapper}>hey</div>;
+interface RelatedBrainsProps {
+  closeBrains: CloseBrain[];
+}
+
+const RelatedBrains = ({ closeBrains }: RelatedBrainsProps): JSX.Element => {
+  return (
+    <div className={styles.related_brains_wrapper}>
+      {closeBrains.map((brain, index) => (
+        <div key={index}>
+          <p>Brain: {brain.name}</p>
+          <p>Similarity: {brain.similarity}</p>
+        </div>
+      ))}
+    </div>
+  );
 };
 
 export default RelatedBrains;

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

@@ -1,5 +1,7 @@
 import { UUID } from "crypto";
 
+import { CloseBrain } from "@/lib/types/MessageMetadata";
+
 export type ChatQuestion = {
   model?: string;
   question?: string;
@@ -17,7 +19,8 @@ export type ChatMessage = {
   prompt_title?: string;
   brain_name?: string;
   metadata?: {
-    sources?: [string];
+    sources?: string[];
+    close_brains?: CloseBrain[];
   };
 };
 

frontend/lib/types/MessageMetadata.ts

@@ -0,0 +1,9 @@
+export interface CloseBrain {
+  id: string;
+  similarity: number;
+  name: string;
+}
+
+export interface MessageMetadata {
+  closeBrains: CloseBrain[];
+}