big wip

QuivrHQ · Jan 24, 2024 · a2e6176 · a2e6176
1 parent 79bec42
commit a2e6176
Show file tree

Hide file tree

Showing 8 changed files with 128 additions and 53 deletions.
diff --git a/...app/chat/[chatId]/components/DataPanel/components/RelatedBrains/RelatedBrains.module.scss b/...app/chat/[chatId]/components/DataPanel/components/RelatedBrains/RelatedBrains.module.scss
@@ -1,4 +1 @@
-.related_brains_wrapper {
-  border-radius: 3px;
-  border: 1px solid black;
-}
+
diff --git a/frontend/app/chat/[chatId]/components/DataPanel/components/RelatedBrains/RelatedBrains.tsx b/frontend/app/chat/[chatId]/components/DataPanel/components/RelatedBrains/RelatedBrains.tsx
@@ -1,3 +1,4 @@
+import { FoldableSection } from "@/lib/components/ui/FoldableSection/FoldableSection";
 import { CloseBrain } from "@/lib/types/MessageMetadata";
 
 import styles from "./RelatedBrains.module.scss";
@@ -9,12 +10,14 @@ interface RelatedBrainsProps {
 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>
-      ))}
+      <FoldableSection label="Related Brains" icon="brain">
+        {closeBrains.map((brain, index) => (
+          <div key={index}>
+            <p>Brain: {brain.name}</p>
+            <p>Similarity: {brain.similarity}</p>
+          </div>
+        ))}
+      </FoldableSection>
     </div>
   );
 };

diff --git a/frontend/app/chat/[chatId]/page.module.scss b/frontend/app/chat/[chatId]/page.module.scss
@@ -7,14 +7,14 @@
   background-color: Colors.$ivory;
   padding: Spacings.$spacing06;
   display: flex;
-  gap: Spacings.$spacing05;
+  gap: Spacings.$spacing09;
 
   &.feeding {
     background-color: Colors.$chat-bg-gray;
   }
 
   .data_panel_wrapper {
     height: 100%;
-    width: 25%;
+    width: 30%;
   }
 }
diff --git a/frontend/lib/components/Menu/Menu.tsx b/frontend/lib/components/Menu/Menu.tsx
@@ -5,7 +5,7 @@ import { MenuControlButton } from "@/app/chat/[chatId]/components/ActionsBar/com
 import { nonProtectedPaths } from "@/lib/config/routesConfig";
 import { useMenuContext } from "@/lib/context/MenuProvider/hooks/useMenuContext";
 
-import styles from './Menu.module.scss'
+import styles from "./Menu.module.scss";
 import { AnimatedDiv } from "./components/AnimationDiv";
 import { BrainsManagementButton } from "./components/BrainsManagementButton";
 import { DiscussionButton } from "./components/DiscussionButton";
@@ -16,51 +16,58 @@ import { ProfileButton } from "./components/ProfileButton";
 import { UpgradeToPlus } from "./components/UpgradeToPlus";
 
 export const Menu = (): JSX.Element => {
-    const { isOpened } = useMenuContext();
-    const pathname = usePathname() ?? "";
+  const { isOpened } = useMenuContext();
+  const pathname = usePathname() ?? "";
 
-    if (nonProtectedPaths.includes(pathname)) {
-        return <></>;
-    }
+  if (nonProtectedPaths.includes(pathname)) {
+    return <></>;
+  }
 
-    const displayedOnPages = ["/chat", "/library", "/brains-management", "/search"];
+  const displayedOnPages = [
+    "/chat",
+    "/library",
+    "/brains-management",
+    "/search",
+  ];
 
-    const isMenuDisplayed = displayedOnPages.some((page) =>
-        pathname.includes(page)
-    );
+  const isMenuDisplayed = displayedOnPages.some((page) =>
+    pathname.includes(page)
+  );
 
-    if (!isMenuDisplayed) {
-        return <></>;
-    }
+  if (!isMenuDisplayed) {
+    return <></>;
+  }
 
-    /* eslint-disable @typescript-eslint/restrict-template-expressions */
+  /* eslint-disable @typescript-eslint/restrict-template-expressions */
 
-    return (
-        <MotionConfig transition={{ mass: 1, damping: 10, duration: 0.2 }}>
-            <div
-                className="flex flex-col fixed sm:sticky top-0 left-0 h-full overflow-visible z-[1000] border-r border-black/10 dark:border-white/25 bg-highlight"
-            >
-                <AnimatedDiv>
-                    <div className="flex flex-col flex-1 p-4 gap-4 h-full">
-                        <MenuHeader />
-                        <div className="flex flex-1 w-full">
-                            <div className="w-full gap-2 flex flex-col">
-                                <DiscussionButton />
-                                <ExplorerButton />
-                                <BrainsManagementButton />
-                                <ParametersButton />
-                            </div>
-                        </div>
-                        <div>
-                            <UpgradeToPlus />
-                            <ProfileButton />
-                        </div>
-                    </div>
-                </AnimatedDiv>
+  return (
+    <MotionConfig transition={{ mass: 1, damping: 10, duration: 0.2 }}>
+      <div className="flex flex-col fixed sm:sticky top-0 left-0 h-full overflow-visible z-[1000] border-r border-black/10 dark:border-white/25 bg-highlight">
+        <AnimatedDiv>
+          <div className="flex flex-col flex-1 p-4 gap-4 h-full">
+            <MenuHeader />
+            <div className="flex flex-1 w-full">
+              <div className="w-full gap-2 flex flex-col">
+                <DiscussionButton />
+                <ExplorerButton />
+                <BrainsManagementButton />
+                <ParametersButton />
+              </div>
             </div>
-            <div className={`${styles.menu_control_button_wrapper} ${isOpened ? styles.shifted : ''}`}>
-                <MenuControlButton />
+            <div>
+              <UpgradeToPlus />
+              <ProfileButton />
             </div>
-        </MotionConfig>
-    );
+          </div>
+        </AnimatedDiv>
+      </div>
+      <div
+        className={`${styles.menu_control_button_wrapper} ${
+          isOpened ? styles.shifted : ""
+        }`}
+      >
+        <MenuControlButton />
+      </div>
+    </MotionConfig>
+  );
 };
diff --git a/frontend/lib/components/ui/FoldableSection/FoldableSection.module.scss b/frontend/lib/components/ui/FoldableSection/FoldableSection.module.scss
@@ -0,0 +1,24 @@
+@use "@/styles/Colors.module.scss";
+@use "@/styles/Spacings.module.scss";
+
+.foldable_section_wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: Spacings.$spacing04;
+  border-radius: 5px;
+  border: 1px solid Colors.$grey;
+  padding: Spacings.$spacing03;
+
+  .header_wrapper {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+
+    .header_left {
+      display: flex;
+      align-items: center;
+      gap: Spacings.$spacing03;
+    }
+  }
+}
diff --git a/frontend/lib/components/ui/FoldableSection/FoldableSection.tsx b/frontend/lib/components/ui/FoldableSection/FoldableSection.tsx
@@ -0,0 +1,34 @@
+import { useState } from "react";
+
+import { iconList } from "@/lib/helpers/iconList";
+
+import styles from "./FoldableSection.module.scss";
+
+import { Icon } from "../Icon/Icon";
+
+interface FoldableSectionProps {
+  label: string;
+  icon: keyof typeof iconList;
+  children: React.ReactNode;
+}
+
+export const FoldableSection = (props: FoldableSectionProps): JSX.Element => {
+  const [folded, setFolded] = useState<boolean>(false);
+
+  return (
+    <div className={styles.foldable_section_wrapper}>
+      <div className={styles.header_wrapper} onClick={() => setFolded(!folded)}>
+        <div className={styles.header_left}>
+          <Icon name={props.icon} size="normal" color="primary" />
+          <span>{props.label}</span>
+        </div>
+        <Icon
+          name={folded ? "chevronDown" : "chevronRight"}
+          size="large"
+          color="black"
+        />
+      </div>
+      {!folded && <div>{props.children}</div>}
+    </div>
+  );
+};
diff --git a/frontend/lib/helpers/iconList.ts b/frontend/lib/helpers/iconList.ts
@@ -1,9 +1,18 @@
 import { AiOutlineLoading3Quarters } from "react-icons/ai";
 import { IconType } from "react-icons/lib";
-import { LuPlusCircle, LuSearch } from "react-icons/lu";
+import {
+  LuBrain,
+  LuChevronDown,
+  LuChevronRight,
+  LuPlusCircle,
+  LuSearch,
+} from "react-icons/lu";
 
 export const iconList: { [name: string]: IconType } = {
   add: LuPlusCircle,
+  brain: LuBrain,
+  chevronDown: LuChevronDown,
+  chevronRight: LuChevronRight,
   loader: AiOutlineLoading3Quarters,
   search: LuSearch,
 };
diff --git a/frontend/styles/_Colors.module.scss b/frontend/styles/_Colors.module.scss
@@ -1,4 +1,5 @@
 $white: #ffffff;
+$grey: #d3d3d3;
 $black: #11243e;
 $primary: #6142d4;
 $secondary: #f3ecff;