feat: add Menu bar

frontend/app/App.tsx

@@ -3,11 +3,15 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { PropsWithChildren, useEffect } from "react";
 
+import { Menu } from "@/lib/components/Menu/Menu";
+import { NotificationBanner } from "@/lib/components/NotificationBanner";
 import { BrainProvider } from "@/lib/context";
 import { useBrainContext } from "@/lib/context/BrainProvider/hooks/useBrainContext";
+import { SideBarProvider } from "@/lib/context/SidebarProvider/sidebar-provider";
 import { useSupabase } from "@/lib/context/SupabaseProvider";
 import { UpdateMetadata } from "@/lib/helpers/updateMetadata";
 import { usePageTracking } from "@/services/analytics/june/usePageTracking";
+
 import "../lib/config/LocaleConfig/i18n";
 
 // This wrapper is used to make effect calls at a high level in app rendering.
@@ -27,10 +31,14 @@ const App = ({ children }: PropsWithChildren): JSX.Element => {
   }, [session]);
 
   return (
-    <>
-      {children}
-      <UpdateMetadata />
-    </>
+    <div className="flex flex-1 flex-col overflow-auto">
+      <NotificationBanner />
+      <div className="relative h-full w-full flex justify-stretch items-stretch overflow-auto">
+        <Menu />
+        <div className="flex-1">{children}</div>
+        <UpdateMetadata />
+      </div>
+    </div>
   );
 };
 
@@ -40,7 +48,9 @@ const AppWithQueryClient = ({ children }: PropsWithChildren): JSX.Element => {
   return (
     <QueryClientProvider client={queryClient}>
       <BrainProvider>
-        <App>{children}</App>
+        <SideBarProvider>
+          <App>{children}</App>
+        </SideBarProvider>
       </BrainProvider>
     </QueryClientProvider>
   );

frontend/app/brains-management/layout.tsx

@@ -17,7 +17,7 @@ const Layout = ({ children }: LayoutProps): JSX.Element => {
   }
 
   return (
-    <div className="relative h-full w-full flex justify-stretch items-stretch">
+    <div className="relative h-full w-full flex justify-stretch items-stretch overflow-scroll">
       <BrainsList />
       {children}
     </div>

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

@@ -11,6 +11,7 @@ import {
   ChatProviderMock,
 } from "@/lib/context/ChatProvider/mocks/ChatProviderMock";
 import { KnowledgeToFeedProvider } from "@/lib/context/KnowledgeToFeedProvider";
+import { SideBarProvider } from "@/lib/context/SidebarProvider/sidebar-provider";
 import {
   SupabaseContextMock,
   SupabaseProviderMock,
@@ -87,7 +88,9 @@ describe("Chat page", () => {
           <ChatProviderMock>
             <SupabaseProviderMock>
               <BrainProviderMock>
-                <SelectedChatPage />,
+                <SideBarProvider>
+                  <SelectedChatPage />,
+                </SideBarProvider>
               </BrainProviderMock>
             </SupabaseProviderMock>
           </ChatProviderMock>

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

@@ -2,12 +2,14 @@ import { AnimatePresence, motion } from "framer-motion";
 import { useTranslation } from "react-i18next";
 import { AiOutlineLoading3Quarters } from "react-icons/ai";
 
+import { useKnowledgeToFeedContext } from "@/lib/context/KnowledgeToFeedProvider/hooks/useKnowledgeToFeedContext";
+
 import { ChatInput, KnowledgeToFeed } from "./components";
 import { useActionBar } from "./hooks/useActionBar";
 
 export const ActionsBar = (): JSX.Element => {
-  const { hasPendingRequests, setHasPendingRequests, shouldDisplayFeedCard } =
-    useActionBar();
+  const { hasPendingRequests, setHasPendingRequests } = useActionBar();
+  const { shouldDisplayFeedCard } = useKnowledgeToFeedContext();
 
   const { t } = useTranslation(["chat"]);
 
@@ -39,9 +41,7 @@ export const ActionsBar = (): JSX.Element => {
             </motion.div>
           </AnimatePresence>
         )}
-        {!shouldDisplayFeedCard && (
-          <ChatInput shouldDisplayFeedOrSecretsCard={shouldDisplayFeedCard} />
-        )}
+        {!shouldDisplayFeedCard && <ChatInput />}
       </div>
     </>
   );

frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ActionsModal/ActionsModal.tsx

@@ -12,6 +12,7 @@ import {
 import { ChangeBrainButton } from "./components/ChangeBrainButton";
 import { ChatHistoryButton } from "./components/ChatHistoryButton/ChatHistoryButton";
 import { ConfigModal } from "./components/ConfigModal";
+import { FeedCardTrigger } from "./components/FeedCardTrigger";
 import { NewDiscussionButton } from "./components/NewDiscussionButton";
 import { SelectedBrainTag } from "./components/SelectedBrainTag";
 
@@ -40,6 +41,7 @@ export const ActionsModal = (): JSX.Element => {
         >
           <SelectedBrainTag />
           <NewDiscussionButton />
+          <FeedCardTrigger />
           <ChatHistoryButton />
           <ConfigModal />
           <ChangeBrainButton />

frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ActionsModal/components/FeedCardTrigger/FeedCardTrigger.tsx

@@ -0,0 +1,21 @@
+import { LuChevronRight } from "react-icons/lu";
+
+import { useKnowledgeToFeedContext } from "@/lib/context/KnowledgeToFeedProvider/hooks/useKnowledgeToFeedContext";
+
+import { useFeedCardTrigger } from "./hooks/useFeedCardTrigger";
+import { Button } from "../Button";
+
+export const FeedCardTrigger = (): JSX.Element => {
+  const { setShouldDisplayFeedCard } = useKnowledgeToFeedContext();
+  const { label, Icon } = useFeedCardTrigger();
+
+  return (
+    <Button
+      label={label}
+      startIcon={<Icon size={18} />}
+      endIcon={<LuChevronRight size={18} />}
+      className="w-full"
+      onClick={() => setShouldDisplayFeedCard(true)}
+    />
+  );
+};

frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ActionsModal/components/FeedCardTrigger/hooks/useFeedCardTrigger.ts

@@ -0,0 +1,20 @@
+import { Fragment } from "react";
+
+import { useBrainContext } from "@/lib/context/BrainProvider/hooks/useBrainContext";
+
+import { useFeedCardTriggerUtils } from "./useFeedCardTriggerUtils";
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export const useFeedCardTrigger = () => {
+  const { brainTypeToIcon, brainTypeToLabel } = useFeedCardTriggerUtils();
+  const { currentBrain } = useBrainContext();
+
+  const isBrainTypeDefined = currentBrain?.brain_type !== undefined;
+
+  return {
+    label: isBrainTypeDefined ? brainTypeToLabel[currentBrain.brain_type] : "",
+    Icon: isBrainTypeDefined
+      ? brainTypeToIcon[currentBrain.brain_type]
+      : Fragment,
+  };
+};

frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ActionsModal/components/FeedCardTrigger/hooks/useFeedCardTriggerUtils.ts

@@ -0,0 +1,27 @@
+import { useTranslation } from "react-i18next";
+import { IconType } from "react-icons/lib";
+import { LuBot, LuFilePlus, LuUnlock } from "react-icons/lu";
+
+import { BrainType } from "@/lib/types/brainConfig";
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export const useFeedCardTriggerUtils = () => {
+  const { t } = useTranslation(["chat", "brain"]);
+
+  const brainTypeToLabel: Record<BrainType, string> = {
+    doc: t("chat:add_document"),
+    api: t("brain:update_secrets_button"),
+    composite: t("brain:manage_brain"),
+  };
+
+  const brainTypeToIcon: Record<BrainType, IconType> = {
+    doc: LuFilePlus,
+    api: LuUnlock,
+    composite: LuBot,
+  };
+
+  return {
+    brainTypeToIcon,
+    brainTypeToLabel,
+  };
+};

frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ActionsModal/components/FeedCardTrigger/index.ts

@@ -0,0 +1 @@
+export * from "./FeedCardTrigger";

frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/MenuControlButton.tsx

@@ -0,0 +1,25 @@
+import { useTranslation } from "react-i18next";
+import { LuPanelLeftClose, LuPanelRightClose } from "react-icons/lu";
+
+import Button from "@/lib/components/ui/Button";
+import { useSideBarContext } from "@/lib/context/SidebarProvider/hooks/useSideBarContext";
+
+export const MenuControlButton = (): JSX.Element => {
+  const { isOpened, setIsOpened } = useSideBarContext();
+  const Icon = isOpened ? LuPanelLeftClose : LuPanelRightClose;
+  const { t } = useTranslation("chat");
+
+  return (
+    <Button
+      variant="tertiary"
+      className="px-2 py-0"
+      type="button"
+      onClick={() => setIsOpened(!isOpened)}
+    >
+      <div className="flex flex-col items-center justify-center gap-1">
+        <Icon className="text-2xl md:text-3xl self-center text-accent" />
+        <span className="text-xs">{t("menu")}</span>
+      </div>
+    </Button>
+  );
+};

frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/index.tsx

@@ -2,28 +2,18 @@
 import { useTranslation } from "react-i18next";
 
 import Button from "@/lib/components/ui/Button";
-import { useBrainContext } from "@/lib/context/BrainProvider/hooks/useBrainContext";
-import { useKnowledgeToFeedContext } from "@/lib/context/KnowledgeToFeedProvider/hooks/useKnowledgeToFeedContext";
-import { getBrainIconFromBrainType } from "@/lib/helpers/getBrainIconFromBrainType";
 
 import { OnboardingQuestions } from "./components";
 import { ActionsModal } from "./components/ActionsModal/ActionsModal";
 import { ChatEditor } from "./components/ChatEditor/ChatEditor";
+import { MenuControlButton } from "./components/MenuControlButton";
 import { useChatInput } from "./hooks/useChatInput";
 
-type ChatInputProps = {
-  shouldDisplayFeedOrSecretsCard: boolean;
-};
-
-export const ChatInput = ({
-  shouldDisplayFeedOrSecretsCard,
-}: ChatInputProps): JSX.Element => {
+export const ChatInput = (): JSX.Element => {
   const { setMessage, submitQuestion, generatingAnswer, message } =
     useChatInput();
 
   const { t } = useTranslation(["chat"]);
-  const { currentBrainDetails } = useBrainContext();
-  const { setShouldDisplayFeedCard } = useKnowledgeToFeedContext();
 
   return (
     <>
@@ -37,18 +27,7 @@ export const ChatInput = ({
           }}
           className="sticky bottom-0 bg-white dark:bg-black w-full flex items-center gap-2 z-20 p-2"
         >
-          {!shouldDisplayFeedOrSecretsCard && (
-            <Button
-              className="p-0"
-              variant={"tertiary"}
-              data-testid="feed-button"
-              type="button"
-              onClick={() => setShouldDisplayFeedCard(true)}
-              tooltip={t("add_content_card_button_tooltip")}
-            >
-              {getBrainIconFromBrainType(currentBrainDetails?.brain_type)}
-            </Button>
-          )}
+          <MenuControlButton />
 
           <div className="flex flex-1">
             <ChatEditor

frontend/app/chat/[chatId]/components/ActionsBar/hooks/useActionBar.ts

@@ -1,7 +1,6 @@
 import { useEffect, useState } from "react";
 
 import { useChatContext } from "@/lib/context";
-import { useKnowledgeToFeedContext } from "@/lib/context/KnowledgeToFeedProvider/hooks/useKnowledgeToFeedContext";
 
 import { checkIfHasPendingRequest } from "../utils/checkIfHasPendingRequest";
 
@@ -10,15 +9,12 @@ export const useActionBar = () => {
   const [hasPendingRequests, setHasPendingRequests] = useState(false);
   const { notifications } = useChatContext();
 
-  const { shouldDisplayFeedCard } = useKnowledgeToFeedContext();
-
   useEffect(() => {
     setHasPendingRequests(checkIfHasPendingRequest(notifications));
   }, [notifications]);
 
   return {
     hasPendingRequests,
     setHasPendingRequests,
-    shouldDisplayFeedCard,
   };
 };

frontend/app/chat/components/ChatsList/__tests__/ChatsList.test.tsx

@@ -12,6 +12,7 @@ import {
   ChatProviderMock,
 } from "@/lib/context/ChatProvider/mocks/ChatProviderMock";
 import { KnowledgeToFeedProvider } from "@/lib/context/KnowledgeToFeedProvider";
+import { SideBarProvider } from "@/lib/context/SidebarProvider/sidebar-provider";
 import { SupabaseContextMock } from "@/lib/context/SupabaseProvider/mocks/SupabaseProviderMock";
 
 vi.mock("@/lib/context/SupabaseProvider/supabase-provider", () => ({
@@ -91,7 +92,9 @@ describe("ChatsList", () => {
         <KnowledgeToFeedProvider>
           <ChatProviderMock>
             <BrainProviderMock>
-              <ChatsList />
+              <SideBarProvider>
+                <ChatsList />
+              </SideBarProvider>
             </BrainProviderMock>
           </ChatProviderMock>
         </KnowledgeToFeedProvider>
@@ -110,7 +113,9 @@ describe("ChatsList", () => {
         <KnowledgeToFeedProvider>
           <ChatProviderMock>
             <BrainProviderMock>
-              <ChatsList />
+              <SideBarProvider>
+                <ChatsList />
+              </SideBarProvider>
             </BrainProviderMock>
           </ChatProviderMock>
         </KnowledgeToFeedProvider>
@@ -133,7 +138,9 @@ describe("ChatsList", () => {
           <KnowledgeToFeedProvider>
             <ChatProviderMock>
               <BrainProviderMock>
-                <ChatsList />
+                <SideBarProvider>
+                  <ChatsList />
+                </SideBarProvider>
               </BrainProviderMock>
             </ChatProviderMock>
           </KnowledgeToFeedProvider>

frontend/app/chat/components/index.ts

@@ -1,2 +1 @@
 export * from "./ChatsList";
-export * from "./NotificationBanner";

frontend/app/chat/layout.tsx

@@ -6,8 +6,6 @@ import { ChatsProvider } from "@/lib/context/ChatsProvider/chats-provider";
 import { useSupabase } from "@/lib/context/SupabaseProvider";
 import { redirectToLogin } from "@/lib/router/redirectToLogin";
 
-import { ChatsList, NotificationBanner } from "./components";
-
 interface LayoutProps {
   children?: ReactNode;
 }
@@ -23,9 +21,7 @@ const Layout = ({ children }: LayoutProps): JSX.Element => {
     <KnowledgeToFeedProvider>
       <ChatsProvider>
         <ChatProvider>
-          <NotificationBanner />
           <div className="relative h-full w-full flex justify-stretch items-stretch overflow-auto">
-            <ChatsList />
             {children}
           </div>
         </ChatProvider>