wip

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,14 @@
+"use client";
+
+import styles from "./DataPanel.module.scss";
+import RelatedBrains from "./components/RelatedBrains/RelatedBrains";
+
+const DataPanel = (): JSX.Element => {
+  return (
+    <div className={styles.data_panel_wrapper}>
+      <RelatedBrains />
+    </div>
+  );
+};
+
+export default DataPanel;

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

@@ -0,0 +1,4 @@
+.related_brains_wrapper {
+  border-radius: 3px;
+  border: 1px solid black;
+}

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

@@ -0,0 +1,9 @@
+"use client";
+
+import styles from "./RelatedBrains.module.scss";
+
+const RelatedBrains = (): JSX.Element => {
+  return <div className={styles.related_brains_wrapper}>hey</div>;
+};
+
+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.$ivory;
+  padding: Spacings.$spacing06;
+  display: flex;
+  gap: Spacings.$spacing05;
+
+  &.feeding {
+    background-color: Colors.$chat-bg-gray;
+  }
+
+  .data_panel_wrapper {
+    height: 100%;
+    width: 25%;
+  }
+}

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

@@ -1,40 +1,52 @@
 "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 { isMobile } = useDevice();
 
   useChatNotificationsSync();
 
   return (
-    <div className="flex flex-1">
+    <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",
-          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`}
+          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>
-      <div className="bg-red-500 h-full w-64"></div>
+      {!isMobile && (
+        <div className={styles.data_panel_wrapper}>
+          <DataPanel />
+        </div>
+      )}
     </div>
   );
 };

frontend/lib/components/ui/Icon/Icon.module.scss

@@ -25,7 +25,7 @@
   color: Colors.$black;
 
   &.hovered {
-    color: Colors.$accent;
+    color: Colors.$primary;
   }
 }
 

frontend/lib/components/ui/TextButton/TextButton.module.scss

@@ -13,6 +13,6 @@
   color: Colors.$black;
 
   &.hovered {
-    color: Colors.$accent;
+    color: Colors.$primary;
   }
 }

frontend/styles/_Colors.module.scss

@@ -1,8 +1,9 @@
-$white: #FFFFFF;
-$black: #11243E;
-$primary: #6142D4;
-$secondary: #F3ECFF;
-$tertiary: #F6F4FF;
-$accent: #13ABBA;
-$highlight: #FAFAFA;
-$ivory: #FCFAF6,
+$white: #ffffff;
+$black: #11243e;
+$primary: #6142d4;
+$secondary: #f3ecff;
+$tertiary: #f6f4ff;
+$accent: #13abba;
+$highlight: #fafafa;
+$ivory: #fcfaf6;
+$chat-bg-gray: #d9d9d9;