From a4ce869d753582311b50203b2bfa724eb3f9b0fd Mon Sep 17 00:00:00 2001
From: Antoine Dewez <44063631+Zewed@users.noreply.github.com>
Date: Mon, 24 Jun 2024 16:38:58 +0200
Subject: [PATCH] feat(frontend): brain studio interface (#2712)

# Description

Please include a summary of the changes and the related issue. Please
also include relevant motivation and context.

## Checklist before requesting a review

Please delete options that are not relevant.

- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my code
- [ ] I have commented hard-to-understand areas
- [ ] I have ideally added tests that prove my fix is effective or that
my feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged

## Screenshots (if appropriate):
---
 .../MenuControlButton.module.scss             |  6 +-
 .../BrainItem/BrainItem.module.scss           | 71 ++++++++++---------
 .../BrainsList/BrainItem/BrainItem.tsx        | 49 +++++++------
 .../BrainsList/BrainsList.module.scss         | 34 ++-------
 .../ManageBrains/BrainsList/BrainsList.tsx    |  4 --
 .../ui/OptionsModal/OptionsModal.module.scss  | 15 ++--
 .../ui/OptionsModal/OptionsModal.tsx          |  5 +-
 .../components/ui/Toast/components/Toast.tsx  |  4 +-
 8 files changed, 86 insertions(+), 102 deletions(-)

diff --git a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/MenuControlButton/MenuControlButton.module.scss b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/MenuControlButton/MenuControlButton.module.scss
index fa62eb831343..01a1b9729e18 100644
--- a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/MenuControlButton/MenuControlButton.module.scss
+++ b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/MenuControlButton/MenuControlButton.module.scss
@@ -2,11 +2,11 @@
 @use "styles/Spacings.module.scss";
 
 .menu_icon {
-  width: IconSizes.$large;
-  height: IconSizes.$large;
+  width: IconSizes.$normal;
+  height: IconSizes.$normal;
   cursor: pointer;
 
   &:hover {
     color: var(--accent);
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/app/studio/BrainsTabs/components/ManageBrains/BrainsList/BrainItem/BrainItem.module.scss b/frontend/app/studio/BrainsTabs/components/ManageBrains/BrainsList/BrainItem/BrainItem.module.scss
index 10d4cc2ee931..e236ba36755a 100644
--- a/frontend/app/studio/BrainsTabs/components/ManageBrains/BrainsList/BrainItem/BrainItem.module.scss
+++ b/frontend/app/studio/BrainsTabs/components/ManageBrains/BrainsList/BrainItem/BrainItem.module.scss
@@ -8,56 +8,63 @@
   padding-inline: Spacings.$spacing05;
   overflow: hidden;
   display: flex;
-  gap: Spacings.$spacing02;
-  justify-content: space-between;
+  flex-direction: column;
+  gap: Spacings.$spacing03;
   align-items: center;
   cursor: pointer;
-  margin-block: Spacings.$spacing03;
   border: 1px solid var(--border-1);
   border-radius: Radius.$normal;
-  padding-block: Spacings.$spacing03;
+  padding-block: Spacings.$spacing04;
   position: relative;
   overflow: visible;
+  overflow: hidden;
+  height: 100%;
 
   &:hover {
     border-color: var(--primary-0);
-    background-color: var(--background-special-0);
+    color: var(--text-3);
   }
 
-  .dark_image {
-    filter: invert(100%);
+  .brain_header {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    align-items: center;
+
+    .left {
+      display: flex;
+      gap: Spacings.$spacing03;
+      @include Typography.H2;
+      align-items: center;
+    }
   }
 
-  .brain_info_wrapper {
-    padding-block: Spacings.$spacing03;
-    padding-left: Spacings.$spacing03;
+  .model {
     display: flex;
-    overflow: hidden;
-    gap: Spacings.$spacing05;
-    overflow: hidden;
-    flex: 1;
+    gap: Spacings.$spacing03;
+    align-items: center;
+    font-size: Typography.$small;
+    width: 100%;
 
-    .name {
-      @include Typography.EllipsisOverflow;
-      width: 200px;
-      color: var(--text-3);
+    .title {
+      font-weight: 500;
     }
 
-    .description {
-      @include Typography.EllipsisOverflow;
-      flex: 1;
-      color: var(--text-2);
+    .model_type {
+      color: var(--text-4);
     }
+  }
 
-    @media (max-width: ScreenSizes.$small) {
-      .name {
-        width: auto;
-      }
-
-      .description {
-        display: none;
-      }
-    }
+  .description {
+    width: 100%;
+    font-style: italic;
+    font-size: Typography.$tiny;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 5;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: var(--text-4);
   }
 
   .options_modal {
@@ -67,4 +74,4 @@
     z-index: ZIndexes.$modal;
     padding-bottom: Spacings.$spacing01;
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/app/studio/BrainsTabs/components/ManageBrains/BrainsList/BrainItem/BrainItem.tsx b/frontend/app/studio/BrainsTabs/components/ManageBrains/BrainsList/BrainItem/BrainItem.tsx
index 325d106e37ec..9d41a8f223bb 100644
--- a/frontend/app/studio/BrainsTabs/components/ManageBrains/BrainsList/BrainItem/BrainItem.tsx
+++ b/frontend/app/studio/BrainsTabs/components/ManageBrains/BrainsList/BrainItem/BrainItem.tsx
@@ -1,8 +1,7 @@
-import Image from "next/image";
-import Link from "next/link";
 import { useEffect, useRef, useState } from "react";
 
 import { DeleteOrUnsubscribeConfirmationModal } from "@/app/studio/[brainId]/BrainManagementTabs/components/DeleteOrUnsubscribeModal/DeleteOrUnsubscribeConfirmationModal";
+import { useBrainFetcher } from "@/app/studio/[brainId]/BrainManagementTabs/hooks/useBrainFetcher";
 import { useBrainManagementTabs } from "@/app/studio/[brainId]/BrainManagementTabs/hooks/useBrainManagementTabs";
 import { getBrainPermissions } from "@/app/studio/[brainId]/BrainManagementTabs/utils/getBrainPermissions";
 import Icon from "@/lib/components/ui/Icon/Icon";
@@ -33,6 +32,7 @@ export const BrainItem = ({ brain, even }: BrainItemProps): JSX.Element => {
     brainId: brain.id,
     userAccessibleBrains: allBrains,
   });
+  const { brain: fetchedBrain } = useBrainFetcher({ brainId: brain.id });
   const { isDarkMode } = useUserSettingsContext();
 
   const iconRef = useRef<HTMLDivElement | null>(null);
@@ -73,46 +73,45 @@ export const BrainItem = ({ brain, even }: BrainItemProps): JSX.Element => {
 
   return (
     <>
-      <div
+      <a
         className={`
       ${even ? styles.even : styles.odd}
       ${styles.brain_item_wrapper}
       `}
+        href={`/studio/${brain.id}`}
       >
-        <Image
-          className={isDarkMode ? styles.dark_image : ""}
-          src={
-            brain.integration_logo_url
-              ? brain.integration_logo_url
-              : "/default_brain_image.png"
-          }
-          alt="logo_image"
-          width={18}
-          height={18}
-        />
-
-        <Link
-          className={styles.brain_info_wrapper}
-          href={`/studio/${brain.id}`}
-        >
-          <span className={styles.name}>{brain.name}</span>
-          <span className={styles.description}>{brain.description}</span>
-        </Link>
-        <div>
+        <div className={styles.brain_header}>
+          <div className={styles.left}>
+            <Icon name="brain" color="primary" size="large" />
+            <span className={styles.name}>{brain.name}</span>
+          </div>
           <div
             ref={iconRef}
             onClick={(event: React.MouseEvent<HTMLElement>) => {
               event.nativeEvent.stopImmediatePropagation();
+              event.stopPropagation();
+              event.preventDefault();
               setOptionsOpened(!optionsOpened);
             }}
+            className={styles.icon}
           >
             <Icon
               name="options"
-              size="normal"
+              size="small"
               color="black"
               handleHover={true}
             />
           </div>
+        </div>
+        <div className={styles.model}>
+          <span className={styles.title}>Model:</span>
+          <span className={styles.model_type}>
+            {fetchedBrain?.model ?? "gpt-3.5-turbo-0125"}
+          </span>
+        </div>
+
+        <span className={styles.description}>{brain.description}</span>
+        <div>
           <DeleteOrUnsubscribeConfirmationModal
             isOpen={isDeleteOrUnsubscribeModalOpened}
             setOpen={setIsDeleteOrUnsubscribeModalOpened}
@@ -126,7 +125,7 @@ export const BrainItem = ({ brain, even }: BrainItemProps): JSX.Element => {
         <div ref={optionsRef} className={styles.options_modal}>
           {optionsOpened && <OptionsModal options={options} />}
         </div>
-      </div>
+      </a>
     </>
   );
 };
diff --git a/frontend/app/studio/BrainsTabs/components/ManageBrains/BrainsList/BrainsList.module.scss b/frontend/app/studio/BrainsTabs/components/ManageBrains/BrainsList/BrainsList.module.scss
index ad9189abf9f1..19889528427f 100644
--- a/frontend/app/studio/BrainsTabs/components/ManageBrains/BrainsList/BrainsList.module.scss
+++ b/frontend/app/studio/BrainsTabs/components/ManageBrains/BrainsList/BrainsList.module.scss
@@ -4,34 +4,14 @@
 @use "styles/Typography.module.scss";
 
 .brains_wrapper {
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  row-gap: Spacings.$spacing04;
+  column-gap: Spacings.$spacing04;
   border-radius: Radius.$big;
   overflow: hidden;
   width: 100%;
   overflow-y: scroll;
-
-  .columns {
-    @include Typography.H3;
-    display: flex;
-    padding: Spacings.$spacing05;
-    gap: Spacings.$spacing05;
-    background-color: var(--background-1);
-    margin-bottom: Spacings.$spacing03;
-    padding-left: Spacings.$spacing09;
-
-    .name {
-      width: 200px;
-    }
-
-    .description {
-      color: var(--text-2);
-    }
-
-    @media (max-width: ScreenSizes.$small) {
-      .description {
-        display: none;
-      }
-    }
-  }
-}
\ No newline at end of file
+  padding: Spacings.$spacing01;
+  padding-bottom: Spacings.$spacing07;
+}
diff --git a/frontend/app/studio/BrainsTabs/components/ManageBrains/BrainsList/BrainsList.tsx b/frontend/app/studio/BrainsTabs/components/ManageBrains/BrainsList/BrainsList.tsx
index 0f1ee70a3f2c..3de5015562b6 100644
--- a/frontend/app/studio/BrainsTabs/components/ManageBrains/BrainsList/BrainsList.tsx
+++ b/frontend/app/studio/BrainsTabs/components/ManageBrains/BrainsList/BrainsList.tsx
@@ -10,10 +10,6 @@ type BrainsListProps = {
 export const BrainsList = ({ brains }: BrainsListProps): JSX.Element => {
   return (
     <div className={styles.brains_wrapper}>
-      <div className={styles.columns}>
-        <span className={styles.name}>Name</span>
-        <span className={styles.description}>Description</span>
-      </div>
       {brains.map((brain, index) => (
         <div key={brain.id}>
           <BrainItem brain={brain} even={!(index % 2)} />
diff --git a/frontend/lib/components/ui/OptionsModal/OptionsModal.module.scss b/frontend/lib/components/ui/OptionsModal/OptionsModal.module.scss
index c8c6f58b7108..25e2e1ac5a7f 100644
--- a/frontend/lib/components/ui/OptionsModal/OptionsModal.module.scss
+++ b/frontend/lib/components/ui/OptionsModal/OptionsModal.module.scss
@@ -1,6 +1,7 @@
 @use "styles/BoxShadow.module.scss";
 @use "styles/Radius.module.scss";
 @use "styles/Spacings.module.scss";
+@use "styles/Typography.module.scss";
 @use "styles/ZIndexes.module.scss";
 
 .options_modal_wrapper {
@@ -11,7 +12,7 @@
   width: fit-content;
 
   .option {
-    padding: Spacings.$spacing03;
+    padding: Spacings.$spacing02;
     padding-inline: Spacings.$spacing05;
     display: flex;
     gap: Spacings.$spacing05;
@@ -19,13 +20,13 @@
     cursor: pointer;
     justify-content: space-between;
     overflow: hidden;
-
-    &:not(:first-child) {
-      border-top: 1px solid var(--border-2);
-    }
+    font-size: Typography.$small;
+    border: 1px solid transparent;
+    border-radius: Radius.$normal;
 
     &:hover {
-      background-color: var(--background-special-0);
+      border-color: var(--primary-0);
+      color: var(--primary-0);
     }
 
     &.disabled {
@@ -34,4 +35,4 @@
       opacity: 0.5;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/lib/components/ui/OptionsModal/OptionsModal.tsx b/frontend/lib/components/ui/OptionsModal/OptionsModal.tsx
index df21ce2b33b9..bf6614fd044e 100644
--- a/frontend/lib/components/ui/OptionsModal/OptionsModal.tsx
+++ b/frontend/lib/components/ui/OptionsModal/OptionsModal.tsx
@@ -41,7 +41,10 @@ export const OptionsModal = ({ options }: OptionsModalProps): JSX.Element => {
             option.disabled ? styles.disabled : ""
           }`}
           key={index}
-          onClick={option.onClick}
+          onClick={(event) => {
+            event.preventDefault();
+            option.onClick();
+          }}
           onMouseEnter={() => handleMouseEnter(index)}
           onMouseLeave={() => handleMouseLeave(index)}
         >
diff --git a/frontend/lib/components/ui/Toast/components/Toast.tsx b/frontend/lib/components/ui/Toast/components/Toast.tsx
index e8e8cf53057f..ea06d12bb1d0 100644
--- a/frontend/lib/components/ui/Toast/components/Toast.tsx
+++ b/frontend/lib/components/ui/Toast/components/Toast.tsx
@@ -3,7 +3,6 @@
 import * as ToastPrimitive from "@radix-ui/react-toast";
 import { AnimatePresence, motion } from "framer-motion";
 import { ReactNode } from "react";
-import { useTranslation } from "react-i18next";
 
 import { cn } from "@/lib/utils";
 
@@ -19,7 +18,6 @@ export const Toast = ({
   children?: ReactNode;
 } & ToastPrimitive.ToastProviderProps): JSX.Element => {
   const { publish, toasts, toggleToast } = useToastBuilder();
-  const { t } = useTranslation();
 
   return (
     <ToastPrimitive.Provider {...toastProviderProps}>
@@ -54,7 +52,7 @@ export const Toast = ({
                   </ToastPrimitive.Description>
                   <ToastPrimitive.Close asChild>
                     <Button variant={"tertiary"} className="text-white">
-                      {t("toastDismiss")}
+                      dismiss
                     </Button>
                   </ToastPrimitive.Close>
                 </motion.div>