diff --git a/frontend/app/chat/[chatId]/components/DataPanel/components/RelatedBrains/RelatedBrains.module.scss b/frontend/app/chat/[chatId]/components/DataPanel/components/RelatedBrains/RelatedBrains.module.scss index e1f86a8eb563..8b137891791f 100644 --- a/frontend/app/chat/[chatId]/components/DataPanel/components/RelatedBrains/RelatedBrains.module.scss +++ b/frontend/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 index 54dc8af166c3..27d0faac9436 100644 --- 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 (
- {closeBrains.map((brain, index) => ( -
-

Brain: {brain.name}

-

Similarity: {brain.similarity}

-
- ))} + + {closeBrains.map((brain, index) => ( +
+

Brain: {brain.name}

+

Similarity: {brain.similarity}

+
+ ))} +
); }; diff --git a/frontend/app/chat/[chatId]/page.module.scss b/frontend/app/chat/[chatId]/page.module.scss index 16ecadd14db4..f4a9f05acfdd 100644 --- a/frontend/app/chat/[chatId]/page.module.scss +++ b/frontend/app/chat/[chatId]/page.module.scss @@ -7,7 +7,7 @@ background-color: Colors.$ivory; padding: Spacings.$spacing06; display: flex; - gap: Spacings.$spacing05; + gap: Spacings.$spacing09; &.feeding { background-color: Colors.$chat-bg-gray; @@ -15,6 +15,6 @@ .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 index 14a996d673ae..c63793f21df8 100644 --- 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 ( - -
- -
- -
-
- - - - -
-
-
- - -
-
- + return ( + +
+ +
+ +
+
+ + + + +
-
- +
+ +
- - ); +
+ +
+
+ +
+ + ); }; diff --git a/frontend/lib/components/ui/FoldableSection/FoldableSection.module.scss b/frontend/lib/components/ui/FoldableSection/FoldableSection.module.scss new file mode 100644 index 000000000000..72f77af31e93 --- /dev/null +++ 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 new file mode 100644 index 000000000000..d8e327be6684 --- /dev/null +++ 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(false); + + return ( +
+
setFolded(!folded)}> +
+ + {props.label} +
+ +
+ {!folded &&
{props.children}
} +
+ ); +}; diff --git a/frontend/lib/helpers/iconList.ts b/frontend/lib/helpers/iconList.ts index 666288fad6df..2680741c88ac 100644 --- 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 index ed0e524d7b6f..b583bfc30adb 100644 --- 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;