feat: finalise steps based brain creation (#1825)

Issue: https://github.com/users/StanGirard/projects/5/views/2?pane=issue&itemId=46291978 - Finalise steps based brain creation - Remove feature flag - Demo: <img width="1068" alt="Screenshot 2023-12-05 at 18 05 52" src="https://github.com/StanGirard/quivr/assets/63923024/99e38cab-d510-4bb5-8153-b0db406d1650"> https://github.com/StanGirard/quivr/assets/63923024/1850e2bd-5df1-43fe-be9e-261a3b90af2b https://github.com/StanGirard/quivr/assets/63923024/c7335679-b090-40ac-aece-fbaae0303d51
QuivrHQ · Dec 6, 2023 · 51de056 · 51de056
1 parent 5bbc72e
commit 51de056
Show file tree

Hide file tree

Showing 34 changed files with 336 additions and 541 deletions.
diff --git a/...abs/components/KnowledgeOrSecretsTab/components/AddKnowledge/hooks/useFeedBrainHandler.ts b/...abs/components/KnowledgeOrSecretsTab/components/AddKnowledge/hooks/useFeedBrainHandler.ts
@@ -1,17 +1,16 @@
 import { UUID } from "crypto";
 
 import { useKnowledgeToFeedInput } from "@/lib/components/KnowledgeToFeedInput/hooks/useKnowledgeToFeedInput.ts";
+import { useKnowledgeToFeedFilesAndUrls } from "@/lib/hooks/useKnowledgeToFeed";
 import { useOnboarding } from "@/lib/hooks/useOnboarding";
 
-import { useKnowledgeToFeed } from "./useKnowledgeToFeed";
-
 type FeedBrainProps = {
   brainId: UUID;
   chatId: UUID;
 };
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export const useFeedBrainHandler = () => {
-  const { files, urls } = useKnowledgeToFeed();
+  const { files, urls } = useKnowledgeToFeedFilesAndUrls();
   const { crawlWebsiteHandler, uploadFileHandler } = useKnowledgeToFeedInput();
   const { updateOnboarding, onboarding } = useOnboarding();
 

diff --git a/frontend/lib/api/brain/types.ts b/frontend/lib/api/brain/types.ts
@@ -10,7 +10,7 @@ export type ApiBrainDefinitionSchemaProperty = {
   description: string;
   name: string;
 };
-export const allowedRequestMethods = ["GET", "POST", "PUT", "DELETE"];
+export const allowedRequestMethods = ["GET", "POST", "PUT", "DELETE"] as const;
 
 export type AllowedRequestMethod = (typeof allowedRequestMethods)[number];
 

diff --git a/frontend/lib/components/AddBrainModal/AddBrainModal.tsx b/frontend/lib/components/AddBrainModal/AddBrainModal.tsx
@@ -1,6 +1,7 @@
 import { FormProvider, useForm } from "react-hook-form";
 
 import { addBrainDefaultValues } from "@/lib/config/defaultBrainConfig";
+import { KnowledgeToFeedProvider } from "@/lib/context";
 
 import { AddBrainSteps } from "./components/AddBrainSteps/AddBrainSteps";
 import { CreateBrainProps } from "./types";
@@ -24,7 +25,9 @@ export const AddBrainModal = ({
 
   return (
     <FormProvider {...methods}>
-      <AddBrainSteps triggerClassName={triggerClassName} />
+      <KnowledgeToFeedProvider>
+        <AddBrainSteps triggerClassName={triggerClassName} />
+      </KnowledgeToFeedProvider>
     </FormProvider>
   );
 };
diff --git a/frontend/lib/components/AddBrainModal/AddBrainModalSelector.tsx b/frontend/lib/components/AddBrainModal/AddBrainModalSelector.tsx
diff --git a/frontend/lib/components/AddBrainModal/components/AddBrainSteps/AddBrainSteps.tsx b/frontend/lib/components/AddBrainModal/components/AddBrainSteps/AddBrainSteps.tsx
@@ -5,6 +5,7 @@ import Button from "@/lib/components/ui/Button";
 import { Modal } from "@/lib/components/ui/Modal";
 import { cn } from "@/lib/utils";
 
+import { BrainKnowledgeStep } from "./components/BrainKnowledgeStep/BrainKnowledgeStep";
 import { BrainParamsStep } from "./components/BrainParamsStep/BrainParamsStep";
 import { BrainTypeSelectionStep } from "./components/BrainTypeSelectionStep/BrainTypeSelectionStep";
 import { Stepper } from "./components/Stepper/Stepper";
@@ -54,6 +55,9 @@ export const AddBrainSteps = ({
         <BrainParamsStep
           onCancelBrainCreation={() => setIsBrainCreationModalOpened(false)}
         />
+        <BrainKnowledgeStep
+          onCancelBrainCreation={() => setIsBrainCreationModalOpened(false)}
+        />
       </form>
     </Modal>
   );

diff --git a/...dBrainModal/components/AddBrainSteps/components/BrainKnowledgeStep/BrainKnowledgeStep.tsx b/...dBrainModal/components/AddBrainSteps/components/BrainKnowledgeStep/BrainKnowledgeStep.tsx
@@ -0,0 +1,78 @@
+import { Fragment } from "react";
+import { useTranslation } from "react-i18next";
+import { FaArrowLeft } from "react-icons/fa";
+
+import { ApiRequestDefinition } from "@/lib/components/ApiRequestDefinition";
+import Button from "@/lib/components/ui/Button";
+import { BrainType } from "@/lib/types/brainConfig";
+
+import { KnowledgeToFeedInput } from "./components/KnowledgeToFeedInput";
+import { useBrainCreationHandler } from "./hooks/useBrainCreationHandler";
+import { useBrainKnowledgeStep } from "./hooks/useBrainKnowledgeStep";
+import { useBrainCreationSteps } from "../../hooks/useBrainCreationSteps";
+
+type BrainKnowledgeStepProps = {
+  onCancelBrainCreation: () => void;
+};
+
+export const BrainKnowledgeStep = ({
+  onCancelBrainCreation,
+}: BrainKnowledgeStepProps): JSX.Element => {
+  const { brainType, isSubmitButtonDisabled } = useBrainKnowledgeStep();
+  const { t } = useTranslation(["translation"]);
+  const { goToPreviousStep, currentStep } = useBrainCreationSteps();
+  const { handleCreateBrain, isBrainCreationPending } = useBrainCreationHandler(
+    {
+      closeBrainCreationModal: onCancelBrainCreation,
+    }
+  );
+
+  const brainTypeToKnowledgeComponent: Record<BrainType, JSX.Element> = {
+    doc: <KnowledgeToFeedInput />,
+    api: <ApiRequestDefinition />,
+    chatflow: <div>Coming soon</div>,
+  };
+
+  if (currentStep !== "KNOWLEDGE" || brainType === undefined) {
+    return <Fragment />;
+  }
+
+  return (
+    <>
+      {brainTypeToKnowledgeComponent[brainType]}
+      <div className="flex flex-row justify-between items-center flex-1 mt-10 w-full">
+        <Button
+          type="button"
+          variant="tertiary"
+          onClick={onCancelBrainCreation}
+          className="text-primary"
+          disabled={isBrainCreationPending}
+        >
+          {t("cancel", { ns: "translation" })}
+        </Button>
+        <div className="flex gap-4">
+          <Button
+            type="button"
+            variant="secondary"
+            onClick={goToPreviousStep}
+            className="py-2 border-primary text-primary"
+            disabled={isBrainCreationPending}
+          >
+            <FaArrowLeft className="text-xl" size={16} />
+            {t("previous", { ns: "translation" })}
+          </Button>
+
+          <Button
+            className="bg-primary text-white py-2 border-none"
+            type="button"
+            onClick={() => void handleCreateBrain()}
+            disabled={isSubmitButtonDisabled || isBrainCreationPending}
+            isLoading={isBrainCreationPending}
+          >
+            {t("createButton", { ns: "translation" })}
+          </Button>
+        </div>
+      </div>
+    </>
+  );
+};
diff --git a/...omponents/AddBrainSteps/components/BrainKnowledgeStep/components/KnowledgeToFeedInput.tsx b/...omponents/AddBrainSteps/components/BrainKnowledgeStep/components/KnowledgeToFeedInput.tsx
@@ -0,0 +1,26 @@
+import { useTranslation } from "react-i18next";
+
+import {
+  Crawler,
+  FeedItems,
+  FileUploader,
+} from "@/lib/components/KnowledgeToFeedInput/components";
+
+export const KnowledgeToFeedInput = (): JSX.Element => {
+  const { t } = useTranslation(["translation", "upload"]);
+
+  return (
+    <div>
+      <div className="flex flex-row gap-10 justify-between items-center mt-5">
+        <FileUploader />
+        <span className="whitespace-nowrap	">
+          {`${t("and", { ns: "translation" })} / ${t("or", {
+            ns: "translation",
+          })}`}
+        </span>
+        <Crawler />
+      </div>
+      <FeedItems />
+    </div>
+  );
+};
diff --git a/...Modal/components/AddBrainSteps/components/BrainKnowledgeStep/hooks/useBrainCreationApi.ts b/...Modal/components/AddBrainSteps/components/BrainKnowledgeStep/hooks/useBrainCreationApi.ts
@@ -0,0 +1,101 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { UUID } from "crypto";
+import { useFormContext } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+
+import { PUBLIC_BRAINS_KEY } from "@/lib/api/brain/config";
+import { useBrainApi } from "@/lib/api/brain/useBrainApi";
+import { CreateBrainProps } from "@/lib/components/AddBrainModal/types";
+import { useKnowledgeToFeedInput } from "@/lib/components/KnowledgeToFeedInput/hooks/useKnowledgeToFeedInput.ts";
+import { useBrainContext } from "@/lib/context/BrainProvider/hooks/useBrainContext";
+import { useKnowledgeToFeedContext } from "@/lib/context/KnowledgeToFeedProvider/hooks/useKnowledgeToFeedContext";
+import { useToast } from "@/lib/hooks";
+import { useKnowledgeToFeedFilesAndUrls } from "@/lib/hooks/useKnowledgeToFeed";
+
+type UseBrainCreationHandler = {
+  closeBrainCreationModal: () => void;
+};
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export const useBrainCreationApi = ({
+  closeBrainCreationModal,
+}: UseBrainCreationHandler) => {
+  const queryClient = useQueryClient();
+  const { publish } = useToast();
+  const { t } = useTranslation(["brain", "config"]);
+  const { files, urls } = useKnowledgeToFeedFilesAndUrls();
+  const { getValues, reset } = useFormContext<CreateBrainProps>();
+  const { setKnowledgeToFeed } = useKnowledgeToFeedContext();
+  const { createBrain: createBrainApi, setCurrentBrainId } = useBrainContext();
+  const { setAsDefaultBrain } = useBrainApi();
+  const { crawlWebsiteHandler, uploadFileHandler } = useKnowledgeToFeedInput();
+
+  const handleFeedBrain = async (brainId: UUID): Promise<void> => {
+    const uploadPromises = files.map((file) =>
+      uploadFileHandler(file, brainId)
+    );
+    const crawlPromises = urls.map((url) => crawlWebsiteHandler(url, brainId));
+
+    await Promise.all([...uploadPromises, ...crawlPromises]);
+    setKnowledgeToFeed([]);
+  };
+
+  const createBrain = async (): Promise<void> => {
+    const {
+      name,
+      description,
+      setDefault,
+      brain_definition,
+      brain_secrets_values,
+      status,
+      brain_type,
+    } = getValues();
+
+    const createdBrainId = await createBrainApi({
+      name,
+      description,
+      status,
+      brain_type,
+      brain_definition: brain_type === "api" ? brain_definition : undefined,
+      brain_secrets_values:
+        brain_type === "api" ? brain_secrets_values : undefined,
+    });
+
+    if (createdBrainId === undefined) {
+      publish({
+        variant: "danger",
+        text: t("errorCreatingBrain", { ns: "brain" }),
+      });
+
+      return;
+    }
+    if (brain_type === "doc") {
+      void handleFeedBrain(createdBrainId);
+    }
+
+    if (setDefault) {
+      await setAsDefaultBrain(createdBrainId);
+    }
+    setCurrentBrainId(createdBrainId);
+    closeBrainCreationModal();
+    reset();
+    void queryClient.invalidateQueries({
+      queryKey: [PUBLIC_BRAINS_KEY],
+    });
+  };
+
+  const { mutate, isPending: isBrainCreationPending } = useMutation({
+    mutationFn: createBrain,
+    onSuccess: () => {
+      publish({
+        variant: "success",
+        text: t("brainCreated", { ns: "brain" }),
+      });
+    },
+  });
+
+  return {
+    createBrain: mutate,
+    isBrainCreationPending,
+  };
+};
diff --git a/...l/components/AddBrainSteps/components/BrainKnowledgeStep/hooks/useBrainCreationHandler.ts b/...l/components/AddBrainSteps/components/BrainKnowledgeStep/hooks/useBrainCreationHandler.ts
@@ -0,0 +1,52 @@
+import { useFormContext } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+
+import { CreateBrainProps } from "@/lib/components/AddBrainModal/types";
+import { useToast } from "@/lib/hooks";
+
+import { useBrainCreationApi } from "./useBrainCreationApi";
+
+type UseBrainCreationHandler = {
+  closeBrainCreationModal: () => void;
+};
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export const useBrainCreationHandler = ({
+  closeBrainCreationModal,
+}: UseBrainCreationHandler) => {
+  const { getValues } = useFormContext<CreateBrainProps>();
+  const { publish } = useToast();
+  const { t } = useTranslation(["brain", "config"]);
+
+  const { isBrainCreationPending, createBrain } = useBrainCreationApi({
+    closeBrainCreationModal,
+  });
+
+  const handleCreateBrain = () => {
+    const { name, description } = getValues();
+
+    if (name.trim() === "" || isBrainCreationPending) {
+      publish({
+        variant: "danger",
+        text: t("nameRequired", { ns: "config" }),
+      });
+
+      return;
+    }
+
+    if (description.trim() === "") {
+      publish({
+        variant: "danger",
+        text: t("descriptionRequired", { ns: "config" }),
+      });
+
+      return;
+    }
+    createBrain();
+  };
+
+  return {
+    handleCreateBrain,
+    isBrainCreationPending,
+  };
+};
diff --git a/...dal/components/AddBrainSteps/components/BrainKnowledgeStep/hooks/useBrainKnowledgeStep.ts b/...dal/components/AddBrainSteps/components/BrainKnowledgeStep/hooks/useBrainKnowledgeStep.ts
@@ -0,0 +1,22 @@
+import { useFormContext } from "react-hook-form";
+
+import { CreateBrainProps } from "@/lib/components/AddBrainModal/types";
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export const useBrainKnowledgeStep = () => {
+  const { watch } = useFormContext<CreateBrainProps>();
+  const brainType = watch("brain_type");
+  const url = watch("brain_definition.url");
+  const isApiBrain = brainType === "api";
+  const isChatflowBrain = brainType === "chatflow";
+
+  const isApiBrainDefinitionsFilled = url !== "";
+
+  const isSubmitButtonDisabled =
+    isChatflowBrain || (isApiBrain && !isApiBrainDefinitionsFilled);
+
+  return {
+    brainType,
+    isSubmitButtonDisabled,
+  };
+};
diff --git a/...nts/AddBrainModal/components/AddBrainSteps/components/BrainParamsStep/BrainParamsStep.tsx b/...nts/AddBrainModal/components/AddBrainSteps/components/BrainParamsStep/BrainParamsStep.tsx
@@ -2,12 +2,12 @@ import { Fragment } from "react";
 import { useTranslation } from "react-i18next";
 import { FaArrowLeft, FaArrowRight } from "react-icons/fa";
 
-import { PublicAccessConfirmationModal } from "@/lib/components/AddBrainModalOld/components/AddBrainConfig/components/PublicAccessConfirmationModal";
 import Button from "@/lib/components/ui/Button";
 import Field from "@/lib/components/ui/Field";
 import { Radio } from "@/lib/components/ui/Radio";
 import { TextArea } from "@/lib/components/ui/TextArea";
 
+import { PublicAccessConfirmationModal } from "./components/PublicAccessConfirmationModal";
 import { useBrainParamsStep } from "./hooks/useBrainParamsStep";
 import { useBrainStatusOptions } from "./hooks/useBrainStatusOptions";
 import { usePublicAccessConfirmationModal } from "./hooks/usePublicAccessConfirmationModal";
@@ -53,6 +53,7 @@ export const BrainParamsStep = ({
         placeholder={t("brainDescriptionPlaceholder", { ns: "brain" })}
         autoComplete="off"
         className="flex-1 m-3"
+        required
         {...register("description")}
       />
       <fieldset className="w-full flex flex-col">