feat(frontend): new brain creation modal

frontend/app/App.tsx

@@ -5,7 +5,7 @@ import { posthog } from "posthog-js";
 import { PostHogProvider } from "posthog-js/react";
 import { PropsWithChildren, useEffect } from "react";
 
-import { BrainCreationProvider } from "@/lib/components/AddBrainModal/components/AddBrainSteps/brainCreation-provider";
+import { BrainCreationProvider } from "@/lib/components/AddBrainModal/brainCreation-provider";
 import { Menu } from "@/lib/components/Menu/Menu";
 import { useOutsideClickListener } from "@/lib/components/Menu/hooks/useOutsideClickListener";
 import SearchModal from "@/lib/components/SearchModal/SearchModal";

frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatEditor/components/Editor/components/MentionsList/MentionsList.tsx

@@ -2,7 +2,7 @@ import { SuggestionKeyDownProps } from "@tiptap/suggestion";
 import { forwardRef } from "react";
 import { FaAngleDoubleDown } from "react-icons/fa";
 
-import { useBrainCreationContext } from "@/lib/components/AddBrainModal/components/AddBrainSteps/brainCreation-provider";
+import { useBrainCreationContext } from "@/lib/components/AddBrainModal/brainCreation-provider";
 import TextButton from "@/lib/components/ui/TextButton/TextButton";
 
 import { AddNewPromptButton } from "./components/AddNewPromptButton";

frontend/app/chat/[chatId]/components/ActionsBar/components/KnowledgeToFeed/KnowledgeToFeed.module.scss

@@ -9,6 +9,7 @@
   padding-block: Spacings.$spacing05;
   width: 100%;
   gap: Spacings.$spacing05;
+  overflow: hidden;
 
   .single_selector_wrapper {
     width: 30%;
@@ -37,6 +38,7 @@
     overflow: scroll;
     flex-direction: column;
     gap: Spacings.$spacing02;
+    flex-grow: 1;
     overflow: scroll;
 
     .uploaded_knowledge {
@@ -46,6 +48,7 @@
       justify-content: space-between;
       width: 100%;
       overflow: hidden;
+      font-size: Typography.$small;
 
       .left {
         display: flex;

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

@@ -13,7 +13,11 @@ import { FromDocuments } from "./components/FromDocuments/FromDocuments";
 import { FromWebsites } from "./components/FromWebsites/FromWebsites";
 import { formatMinimalBrainsToSelectComponentInput } from "./utils/formatMinimalBrainsToSelectComponentInput";
 
-export const KnowledgeToFeed = (): JSX.Element => {
+export const KnowledgeToFeed = ({
+  hideBrainSelector,
+}: {
+  hideBrainSelector?: boolean;
+}): JSX.Element => {
   const { allBrains, setCurrentBrainId, currentBrain } = useBrainContext();
   const [selectedTab, setSelectedTab] = useState("From documents");
   const { knowledgeToFeed, removeKnowledgeToFeed } =
@@ -46,18 +50,20 @@ export const KnowledgeToFeed = (): JSX.Element => {
 
   return (
     <div className={styles.knowledge_to_feed_wrapper}>
-      <div className={styles.single_selector_wrapper}>
-        <SingleSelector
-          options={brainsWithUploadRights}
-          onChange={setCurrentBrainId}
-          selectedOption={
-            currentBrain
-              ? { label: currentBrain.name, value: currentBrain.id }
-              : undefined
-          }
-          placeholder="Select a brain"
-        />
-      </div>
+      {!hideBrainSelector && (
+        <div className={styles.single_selector_wrapper}>
+          <SingleSelector
+            options={brainsWithUploadRights}
+            onChange={setCurrentBrainId}
+            selectedOption={
+              currentBrain
+                ? { label: currentBrain.name, value: currentBrain.id }
+                : undefined
+            }
+            placeholder="Select a brain"
+          />
+        </div>
+      )}
       <Tabs tabList={knowledgesTabs} />
       <div className={styles.tabs_content_wrapper}>
         {selectedTab === "From documents" && <FromDocuments />}

frontend/app/chat/[chatId]/components/ActionsBar/components/KnowledgeToFeed/components/FromDocuments/FromDocuments.module.scss

@@ -1,5 +1,6 @@
 @use "@/styles/Colors.module.scss";
 @use "@/styles/Radius.module.scss";
+@use "@/styles/ScreenSizes.module.scss";
 @use "@/styles/Spacings.module.scss";
 
 .from_document_wrapper {
@@ -24,6 +25,10 @@
     display: flex;
     gap: Spacings.$spacing02;
 
+    @media (max-width: ScreenSizes.$small) {
+      flex-direction: column;
+    }
+
     .clickable {
       cursor: pointer;
       font-weight: bold;

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

@@ -4,7 +4,7 @@ import { UUID } from "crypto";
 import { useEffect } from "react";
 
 import { AddBrainModal } from "@/lib/components/AddBrainModal";
-import { useBrainCreationContext } from "@/lib/components/AddBrainModal/components/AddBrainSteps/brainCreation-provider";
+import { useBrainCreationContext } from "@/lib/components/AddBrainModal/brainCreation-provider";
 import PageHeader from "@/lib/components/PageHeader/PageHeader";
 import { UploadDocumentModal } from "@/lib/components/UploadDocumentModal/UploadDocumentModal";
 import { useChatContext } from "@/lib/context";

frontend/app/search/page.tsx

@@ -4,7 +4,7 @@ import { useEffect } from "react";
 
 import { QuivrLogo } from "@/lib/assets/QuivrLogo";
 import { AddBrainModal } from "@/lib/components/AddBrainModal";
-import { useBrainCreationContext } from "@/lib/components/AddBrainModal/components/AddBrainSteps/brainCreation-provider";
+import { useBrainCreationContext } from "@/lib/components/AddBrainModal/brainCreation-provider";
 import PageHeader from "@/lib/components/PageHeader/PageHeader";
 import { UploadDocumentModal } from "@/lib/components/UploadDocumentModal/UploadDocumentModal";
 import { SearchBar } from "@/lib/components/ui/SearchBar/SearchBar";

frontend/app/studio/page.tsx

@@ -3,7 +3,7 @@
 import { useState } from "react";
 
 import { AddBrainModal } from "@/lib/components/AddBrainModal";
-import { useBrainCreationContext } from "@/lib/components/AddBrainModal/components/AddBrainSteps/brainCreation-provider";
+import { useBrainCreationContext } from "@/lib/components/AddBrainModal/brainCreation-provider";
 import PageHeader from "@/lib/components/PageHeader/PageHeader";
 import { UploadDocumentModal } from "@/lib/components/UploadDocumentModal/UploadDocumentModal";
 import { Tabs } from "@/lib/components/ui/Tabs/Tabs";

frontend/lib/components/AddBrainModal/AddBrainModal.module.scss

@@ -0,0 +1,21 @@
+@use "@/styles/Spacings.module.scss";
+
+.add_brain_modal_container {
+  display: flex;
+  padding-block: Spacings.$spacing05;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  gap: Spacings.$spacing08;
+
+  .stepper_container {
+    width: 100%;
+    padding-inline: Spacings.$spacing08;
+  }
+
+  .content_wrapper {
+    flex-grow: 1;
+    overflow: scroll;
+  }
+}

frontend/lib/components/AddBrainModal/AddBrainModal.tsx

@@ -1,11 +1,23 @@
 import { FormProvider, useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
 
+import { Modal } from "@/lib/components/ui/Modal/Modal";
 import { addBrainDefaultValues } from "@/lib/config/defaultBrainConfig";
 
-import { AddBrainSteps } from "./components/AddBrainSteps/AddBrainSteps";
-import { CreateBrainProps } from "./types";
+import styles from "./AddBrainModal.module.scss";
+import { useBrainCreationContext } from "./brainCreation-provider";
+import { BrainKnowledgeStep } from "./components/BrainKnowledgeStep/BrainKnowledgeStep";
+import { BrainMainInfosStep } from "./components/BrainMainInfosStep/BrainMainInfosStep";
+import { BrainTypeSelectionStep } from "./components/BrainTypeSelectionStep/BrainTypeSelectionStep";
+import { Stepper } from "./components/Stepper/Stepper";
+import { CreateBrainProps } from "./types/types";
 
 export const AddBrainModal = (): JSX.Element => {
+  const { t } = useTranslation(["translation", "brain", "config"]);
+
+  const { isBrainCreationModalOpened, setIsBrainCreationModalOpened } =
+    useBrainCreationContext();
+
   const defaultValues: CreateBrainProps = {
     ...addBrainDefaultValues,
     setDefault: true,
@@ -18,7 +30,25 @@ export const AddBrainModal = (): JSX.Element => {
 
   return (
     <FormProvider {...methods}>
-      <AddBrainSteps />
+      <Modal
+        title={t("newBrainTitle", { ns: "brain" })}
+        desc={t("newBrainSubtitle", { ns: "brain" })}
+        isOpen={isBrainCreationModalOpened}
+        setOpen={setIsBrainCreationModalOpened}
+        bigModal={true}
+        CloseTrigger={<div />}
+      >
+        <div className={styles.add_brain_modal_container}>
+          <div className={styles.stepper_container}>
+            <Stepper />
+          </div>
+          <div className={styles.content_wrapper}>
+            <BrainTypeSelectionStep />
+            <BrainMainInfosStep />
+            <BrainKnowledgeStep />
+          </div>
+        </div>
+      </Modal>
     </FormProvider>
   );
 };

frontend/lib/components/AddBrainModal/components/AddBrainSteps/brainCreation-provider.tsx → frontend/lib/components/AddBrainModal/brainCreation-provider.tsx

@@ -3,6 +3,8 @@ import { createContext, useContext, useState } from "react";
 interface BrainCreationContextProps {
   isBrainCreationModalOpened: boolean;
   setIsBrainCreationModalOpened: React.Dispatch<React.SetStateAction<boolean>>;
+  creating: boolean;
+  setCreating: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 export const BrainCreationContext = createContext<
@@ -15,11 +17,17 @@ export const BrainCreationProvider = ({
   children: React.ReactNode;
 }): JSX.Element => {
   const [isBrainCreationModalOpened, setIsBrainCreationModalOpened] =
-    useState(false);
+    useState<boolean>(false);
+  const [creating, setCreating] = useState<boolean>(false);
 
   return (
     <BrainCreationContext.Provider
-      value={{ isBrainCreationModalOpened, setIsBrainCreationModalOpened }}
+      value={{
+        isBrainCreationModalOpened,
+        setIsBrainCreationModalOpened,
+        creating,
+        setCreating,
+      }}
     >
       {children}
     </BrainCreationContext.Provider>