feat(panel): added

frontend/app/brains-management/page.tsx

@@ -11,7 +11,7 @@ const BrainsManagement = (): JSX.Element => {
   const { t } = useTranslation("chat");
 
   return (
-    <div className="flex flex-col flex-1 bg-highlight">
+    <div className="flex flex-col flex-1 bg-white">
       <div className="w-full h-full p-6 flex flex-col flex-1 overflow-auto">
         <div className="w-full mb-10">
           <div className="flex flex-row justify-center items-center gap-2">

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

@@ -0,0 +1,7 @@
+@use "@/styles/Spacings.module.scss";
+
+.data_panel_wrapper {
+  display: flex;
+  flex-direction: column;
+  row-gap: Spacings.$spacing05;
+}

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

@@ -0,0 +1,33 @@
+"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 closeBrains={lastMessageRelatedBrain} />
+    </div>
+  );
+};
+
+export default DataPanel;

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

@@ -0,0 +1,50 @@
+@use "@/styles/Colors.module.scss";
+@use "@/styles/Spacings.module.scss";
+
+.close_brains_wrapper {
+  display: flex;
+  flex-direction: column;
+  padding-bottom: Spacings.$spacing03;
+  gap: Spacings.$spacing01;
+
+  .brain_line {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    padding-left: Spacings.$spacing03;
+    padding-right: Spacings.$spacing05;
+    overflow: hidden;
+
+    .left {
+      display: flex;
+      align-items: center;
+      gap: Spacings.$spacing03;
+
+      .copy_icon {
+        visibility: hidden;
+      }
+
+      .brain_name {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        &.current {
+          color: Colors.$primary;
+        }
+      }
+    }
+
+    .similarity_score {
+      cursor: help;
+    }
+
+    &:hover {
+      .left .copy_icon {
+        visibility: visible;
+        cursor: pointer;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,94 @@
+import { useEffect, useState } from "react";
+
+import { FoldableSection } from "@/lib/components/ui/FoldableSection/FoldableSection";
+import Icon from "@/lib/components/ui/Icon/Icon";
+import { useChatContext } from "@/lib/context";
+import { CloseBrain } from "@/lib/types/MessageMetadata";
+
+import styles from "./RelatedBrains.module.scss";
+
+interface RelatedBrainsProps {
+  closeBrains: CloseBrain[];
+}
+
+interface CloseBrainProps {
+  color: string;
+  isCurrentBrain: boolean;
+}
+
+const RelatedBrains = ({ closeBrains }: RelatedBrainsProps): JSX.Element => {
+  const [closeBrainsProps, setCloseBrainProps] = useState<CloseBrainProps[]>(
+    []
+  );
+  const { messages } = useChatContext();
+  const lerp = (start: number, end: number, t: number): number => {
+    return start * (1 - t) + end * t;
+  };
+
+  useEffect(() => {
+    const newProps = closeBrains.map((brain) => {
+      const t = Math.pow(brain.similarity, 2);
+      const r = Math.round(lerp(211, 138, t));
+      const g = Math.round(lerp(211, 43, t));
+      const b = Math.round(lerp(211, 226, t));
+      const isCurrentBrain =
+        brain.name === messages[messages.length - 1].brain_name;
+
+      return { color: `rgb(${r}, ${g}, ${b})`, isCurrentBrain: isCurrentBrain };
+    });
+    setCloseBrainProps(newProps);
+  }, [closeBrains, messages]);
+
+  if (closeBrains.length === 0) {
+    return <></>;
+  }
+
+  return (
+    <FoldableSection
+      label="Related Brains (Beta)"
+      icon="brain"
+      foldedByDefault={true}
+    >
+      <div className={styles.close_brains_wrapper}>
+        {closeBrains.map((brain, index) => (
+          <div className={styles.brain_line} key={index}>
+            <div className={styles.left}>
+              <div className={styles.copy_icon}>
+                <Icon
+                  name="copy"
+                  size="normal"
+                  color="black"
+                  handleHover={true}
+                  onClick={() =>
+                    void navigator.clipboard.writeText("@" + brain.name)
+                  }
+                ></Icon>
+              </div>
+              <p
+                className={`
+              ${styles.brain_name ?? ""} 
+              ${
+                closeBrainsProps[index]?.isCurrentBrain
+                  ? styles.current ?? ""
+                  : ""
+              }
+              `}
+              >
+                @{brain.name}
+              </p>
+            </div>
+            <div
+              className={styles.similarity_score}
+              title="Similarity score"
+              style={{ color: closeBrainsProps[index]?.color }}
+            >
+              {Math.round(brain.similarity * 100)}
+            </div>
+          </div>
+        ))}
+      </div>
+    </FoldableSection>
+  );
+};
+
+export default RelatedBrains;

frontend/app/chat/[chatId]/hooks/useChat.ts

@@ -83,7 +83,7 @@ export const useChat = () => {
       }
 
       const chatQuestion: ChatQuestion = {
-        model,
+        model, // eslint-disable-line @typescript-eslint/no-unsafe-assignment
         question,
         temperature: temperature,
         max_tokens: maxTokens,
@@ -93,7 +93,6 @@ export const useChat = () => {
 
       callback?.();
       await addStreamQuestion(currentChatId, chatQuestion);
-
     } catch (error) {
       console.error({ error });
 

frontend/app/chat/[chatId]/page.module.scss

@@ -0,0 +1,20 @@
+@use "@/styles/Colors.module.scss";
+@use "@/styles/Spacings.module.scss";
+
+.chat_page_container {
+  display: flex;
+  flex: 1 1 0%;
+  background-color: Colors.$white;
+  padding: Spacings.$spacing06;
+  display: flex;
+  gap: Spacings.$spacing09;
+
+  &.feeding {
+    background-color: Colors.$chat-bg-gray;
+  }
+
+  .data_panel_wrapper {
+    height: 100%;
+    width: 30%;
+  }
+}

frontend/app/chat/[chatId]/page.tsx

@@ -1,41 +1,54 @@
 "use client";
 
 import { useKnowledgeToFeedContext } from "@/lib/context/KnowledgeToFeedProvider/hooks/useKnowledgeToFeedContext";
+import { useDevice } from "@/lib/hooks/useDevice";
 import { useCustomDropzone } from "@/lib/hooks/useDropzone";
 import { cn } from "@/lib/utils";
 
 import { ActionsBar } from "./components/ActionsBar";
 import { ChatDialogueArea } from "./components/ChatDialogueArea/ChatDialogue";
+import DataPanel from "./components/DataPanel/DataPanel";
 import { useChatNotificationsSync } from "./hooks/useChatNotificationsSync";
+import styles from "./page.module.scss";
 
 const SelectedChatPage = (): JSX.Element => {
-    const { getRootProps } = useCustomDropzone();
-    const { shouldDisplayFeedCard } = useKnowledgeToFeedContext();
+  const { getRootProps } = useCustomDropzone();
+  const { shouldDisplayFeedCard } = useKnowledgeToFeedContext();
+  const { isMobile } = useDevice();
 
-    useChatNotificationsSync();
+  useChatNotificationsSync();
 
-    return (
-        <div className="flex flex-1">
-            <div
-                className={cn(
-                    "flex flex-col flex-1 items-center justify-stretch w-full h-full overflow-hidden",
-                    shouldDisplayFeedCard ? "bg-chat-bg-gray" : "bg-ivory",
-                    "dark:bg-black transition-colors ease-out duration-500"
-                )}
-                data-testid="chat-page"
-                {...getRootProps()}
-            >
-                <div
-                    className={`flex flex-col flex-1 w-full max-w-4xl h-full dark:shadow-primary/25 overflow-hidden p-2 sm:p-4 md:p-6 lg:p-8`}
-                >
-                    <div className="flex flex-1 flex-col overflow-y-auto">
-                        <ChatDialogueArea />
-                    </div>
-                    <ActionsBar />
-                </div>
-            </div>
+  return (
+    <div
+      className={`
+      ${styles.chat_page_container ?? ""} 
+      ${shouldDisplayFeedCard ? styles.feeding ?? "" : ""}
+      `}
+      data-testid="chat-page"
+      {...getRootProps()}
+    >
+      <div
+        className={cn(
+          "flex flex-col flex-1 items-center justify-stretch w-full h-full overflow-hidden",
+          "dark:bg-black transition-colors ease-out duration-500"
+        )}
+      >
+        <div
+          className={`flex flex-col flex-1 w-full max-w-4xl h-full dark:shadow-primary/25 overflow-hidden`}
+        >
+          <div className="flex flex-1 flex-col overflow-y-auto">
+            <ChatDialogueArea />
+          </div>
+          <ActionsBar />
         </div>
-    );
+      </div>
+      {!isMobile && (
+        <div className={styles.data_panel_wrapper}>
+          <DataPanel />
+        </div>
+      )}
+    </div>
+  );
 };
 
 export default SelectedChatPage;

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;
@@ -18,6 +20,7 @@ export type ChatMessage = {
   brain_name?: string;
   metadata?: {
     sources?: [string];
+    close_brains?: CloseBrain[];
   };
 };
 

frontend/app/search/page.module.scss

@@ -6,7 +6,7 @@
 @use "@/styles/Variables.module.scss";
 
 .search_page_container {
-  background-color: Colors.$ivory;
+  background-color: Colors.$white;
   width: 100%;
   height: 100%;
   display: flex;