feat: update settings tab add api brain definition

backend/models/brain_entity.py

@@ -5,6 +5,8 @@
 from pydantic import BaseModel
 from routes.authorizations.types import RoleEnum
 
+from models.ApiBrainDefinition import ApiBrainDefinition
+
 
 class BrainType(str, Enum):
     DOC = "doc"
@@ -23,6 +25,7 @@ class BrainEntity(BaseModel):
     prompt_id: Optional[UUID]
     last_update: str
     brain_type: BrainType
+    brain_definition: Optional[ApiBrainDefinition]
 
     @property
     def id(self) -> UUID:

backend/repository/brain/get_brain_details.py

@@ -1,6 +1,11 @@
 from uuid import UUID
 
 from models import BrainEntity, get_supabase_client
+from models.brain_entity import BrainType
+
+from repository.api_brain_definition.get_api_brain_definition import (
+    get_api_brain_definition,
+)
 
 
 def get_brain_details(brain_id: UUID) -> BrainEntity | None:
@@ -13,4 +18,10 @@ def get_brain_details(brain_id: UUID) -> BrainEntity | None:
     )
     if response.data == []:
         return None
-    return BrainEntity(**response.data[0])
+    brain = BrainEntity(**response.data[0])
+
+    if brain.brain_type == BrainType.API:
+        brain_definition = get_api_brain_definition(brain_id)
+        brain.brain_definition = brain_definition
+
+    return brain

frontend/app/brains-management/[brainId]/components/BrainManagementTabs/components/SettingsTab/SettingsTab.test.tsx

@@ -42,6 +42,7 @@ vi.mock("@tanstack/react-query", async () => {
 
   vi.mock("next/navigation", () => ({
     useRouter: () => ({ replace: vi.fn() }),
+    useParams: () => ({}),
   }));
 
   return {

frontend/app/brains-management/[brainId]/components/BrainManagementTabs/components/SettingsTab/SettingsTab.tsx

@@ -13,7 +13,6 @@ import { useAccessConfirmationModal } from "./components/PrivateAccessConfirmati
 import { useSettingsTab } from "./hooks/useSettingsTab";
 import { getBrainPermissions } from "../../utils/getBrainPermissions";
 
-
 type SettingsTabProps = {
   brainId: UUID;
 };
@@ -33,7 +32,6 @@ export const SettingsTab = ({ brainId }: SettingsTabProps): JSX.Element => {
     isDefaultBrain,
     formRef,
     accessibleModels,
-    brainStatusOptions,
     status,
     setValue,
     dirtyFields,
@@ -85,7 +83,6 @@ export const SettingsTab = ({ brainId }: SettingsTabProps): JSX.Element => {
         ref={formRef}
       >
         <GeneralInformation
-          brainStatusOptions={brainStatusOptions}
           hasEditRights={hasEditRights}
           isDefaultBrain={isDefaultBrain}
           isOwnedByCurrentUser={isOwnedByCurrentUser}

frontend/app/brains-management/[brainId]/components/BrainManagementTabs/components/SettingsTab/components/GeneralInformation/GeneralInformation.tsx

@@ -1,4 +1,6 @@
-/* eslint max-lines:["error", 110] */
+/* eslint max-lines:["error", 150] */
+// TODO: useFormContext to avoid passing too many props
+
 import { UseFormRegister } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 
@@ -9,6 +11,9 @@ import { Radio } from "@/lib/components/ui/Radio";
 import { TextArea } from "@/lib/components/ui/TextArea";
 import { BrainConfig } from "@/lib/types/brainConfig";
 
+import { ApiBrainDefinition } from "./components/ApiBrainDefinition";
+import { useGeneralInformation } from "./hooks/useGeneralInformation";
+
 type GeneralInformationProps = {
   register: UseFormRegister<BrainConfig>;
   hasEditRights: boolean;
@@ -17,10 +22,6 @@ type GeneralInformationProps = {
   isDefaultBrain: boolean;
   isSettingAsDefault: boolean;
   setAsDefaultBrainHandler: () => Promise<void>;
-  brainStatusOptions: {
-    label: string;
-    value: "private" | "public";
-  }[];
 };
 
 export const GeneralInformation = (
@@ -35,8 +36,8 @@ export const GeneralInformation = (
     isDefaultBrain,
     isSettingAsDefault,
     setAsDefaultBrainHandler,
-    brainStatusOptions,
   } = props;
+  const { brainStatusOptions, brainTypeOptions } = useGeneralInformation();
 
   return (
     <>
@@ -91,6 +92,16 @@ export const GeneralInformation = (
           />
         </div>
       )}
+
+      <div className="w-full mt-4">
+        <Radio
+          items={brainTypeOptions}
+          label={t("knowledge_source_label", { ns: "brain" })}
+          className="flex-1 justify-between w-[50%]"
+          {...register("brain_type", { disabled: true })}
+        />
+      </div>
+      <ApiBrainDefinition />
       <TextArea
         label={t("brainDescription", { ns: "brain" })}
         placeholder={t("brainDescriptionPlaceholder", { ns: "brain" })}

frontend/app/brains-management/[brainId]/components/BrainManagementTabs/components/SettingsTab/components/GeneralInformation/components/ApiBrainDefinition.tsx

@@ -0,0 +1,95 @@
+import { Fragment } from "react";
+import { useTranslation } from "react-i18next";
+
+import { useUrlBrain } from "@/lib/hooks/useBrainIdFromUrl";
+
+export const ApiBrainDefinition = (): JSX.Element => {
+  const { brainDetails } = useUrlBrain();
+  const { t } = useTranslation(["external_api_definition"]);
+
+  if (brainDetails?.brain_type !== "api") {
+    return <Fragment />;
+  }
+
+  return (
+    <div className="w-full">
+      <hr className="border-t border-gray-300 w-full mb-3" />
+      <div className="mb-2">
+        <p>
+          <span className="font-semibold">{t("url_placeholder")}</span>
+          <span className="ml-2">{brainDetails.brain_definition?.url}</span>
+        </p>
+      </div>
+      <div className="mb-2">
+        <p>
+          <span className="font-semibold">{t("method_label")}</span>
+          <span className="ml-2">{brainDetails.brain_definition?.method}</span>
+        </p>
+      </div>
+      {(brainDetails.brain_definition?.params.properties.length ?? 0) > 0 && (
+        <div className="mb-3">
+          <p>
+            <span className="font-bold mr-1">{t("params")}:</span>
+            <span>{t("paramsTabDescription")}</span>
+          </p>
+          {brainDetails.brain_definition?.params.properties.map((param) => (
+            <div key={param.name}>
+              <span className="mr-1">-</span>
+              <span className="font-semibold">{param.name}:</span>
+              <span className="ml-2">{param.type}</span>
+              <span className="ml-2">
+                {brainDetails.brain_definition?.params.required.includes(
+                  param.name
+                ) ?? false
+                  ? "- Required"
+                  : " - Optional"}
+              </span>
+            </div>
+          ))}
+        </div>
+      )}
+      {(brainDetails.brain_definition?.search_params.properties.length ?? 0) >
+        0 && (
+        <div className="mb-3">
+          <p>
+            <span className="font-bold mr-1">{t("searchParams")}:</span>
+            <span>{t("searchParamsTabDescription")}</span>
+          </p>
+
+          {brainDetails.brain_definition?.search_params.properties.map(
+            (param) => (
+              <div key={param.name}>
+                <span className="mr-1">-</span>
+                <span className="font-semibold">{param.name}:</span>
+                <span className="ml-2">{param.type}</span>
+                <span className="ml-2">
+                  {brainDetails.brain_definition?.search_params.required.includes(
+                    param.name
+                  ) ?? false
+                    ? "- Required"
+                    : " - Optional"}
+                </span>
+              </div>
+            )
+          )}
+        </div>
+      )}
+      {(brainDetails.brain_definition?.secrets?.length ?? 0) > 0 && (
+        <div className="mb-3">
+          <p>
+            <span className="font-bold mr-1">{t("secrets")}:</span>
+            <span>{t("secretsTabDescription")}</span>
+          </p>
+          {brainDetails.brain_definition?.secrets?.map((param) => (
+            <div key={param.name}>
+              <span className="mr-1">-</span>
+              <span className="font-bold">{param.name}:</span>
+              <span className="ml-2">{param.type}</span>
+            </div>
+          ))}
+        </div>
+      )}
+      <hr className="border-t border-gray-300 w-full mt-5" />
+    </div>
+  );
+};

frontend/app/brains-management/[brainId]/components/BrainManagementTabs/components/SettingsTab/components/GeneralInformation/hooks/useGeneralInformation.ts

@@ -0,0 +1,41 @@
+import { useTranslation } from "react-i18next";
+
+import { BrainStatus, BrainType } from "@/lib/types/brainConfig";
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export const useGeneralInformation = () => {
+  const { t } = useTranslation(["translation", "brain", "config"]);
+
+  const brainStatusOptions: {
+    label: string;
+    value: BrainStatus;
+  }[] = [
+    {
+      label: t("private_brain_label", { ns: "brain" }),
+      value: "private",
+    },
+    {
+      label: t("public_brain_label", { ns: "brain" }),
+      value: "public",
+    },
+  ];
+
+  const brainTypeOptions: {
+    label: string;
+    value: BrainType;
+  }[] = [
+    {
+      value: "doc",
+      label: t("knowledge_source_doc", { ns: "brain" }),
+    },
+    {
+      label: t("knowledge_source_api", { ns: "brain" }),
+      value: "api",
+    },
+  ];
+
+  return {
+    brainStatusOptions,
+    brainTypeOptions,
+  };
+};

frontend/app/brains-management/[brainId]/components/BrainManagementTabs/components/SettingsTab/hooks/useSettingsTab.ts

@@ -12,7 +12,6 @@ import { defineMaxTokens } from "@/lib/helpers/defineMaxTokens";
 import { getAccessibleModels } from "@/lib/helpers/getAccessibleModels";
 import { useToast } from "@/lib/hooks";
 import { useUserData } from "@/lib/hooks/useUserData";
-import { BrainStatus } from "@/lib/types/brainConfig";
 
 import { useBrainFormState } from "./useBrainFormState";
 import { checkBrainName } from "../utils/checkBrainName";
@@ -52,20 +51,6 @@ export const useSettingsTab = ({ brainId }: UseSettingsTabProps) => {
     brainId,
   });
 
-  const brainStatusOptions: {
-    label: string;
-    value: BrainStatus;
-  }[] = [
-    {
-      label: t("private_brain_label", { ns: "brain" }),
-      value: "private",
-    },
-    {
-      label: t("public_brain_label", { ns: "brain" }),
-      value: "public",
-    },
-  ];
-
   const accessibleModels = getAccessibleModels({
     openAiKey,
     userData,
@@ -224,7 +209,6 @@ export const useSettingsTab = ({ brainId }: UseSettingsTabProps) => {
     formRef,
     promptId,
     accessibleModels,
-    brainStatusOptions,
     status,
     dirtyFields,
     resetField,

frontend/lib/config/defaultBrainConfig.ts

@@ -32,5 +32,5 @@ export const defaultBrainConfig: BrainConfig = {
   name: "",
   description: "",
   setDefault: false,
-  brainType: "doc",
+  brain_type: "doc",
 };

frontend/lib/context/BrainProvider/types.ts

@@ -1,10 +1,11 @@
 import { UUID } from "crypto";
 
+import { ApiBrainDefinition } from "@/lib/api/brain/types";
 import { BrainRoleType } from "@/lib/components/BrainUsers/types";
 import { Document } from "@/lib/types/Document";
 
 import { useBrainProvider } from "./hooks/useBrainProvider";
-import { Model } from "../../types/brainConfig";
+import { BrainType, Model } from "../../types/brainConfig";
 
 export type BrainAccessStatus = "private" | "public";
 
@@ -19,6 +20,8 @@ export type Brain = {
   openai_api_key?: string | null;
   description?: string;
   prompt_id?: string | null;
+  brain_type?: BrainType;
+  brain_definition?: ApiBrainDefinition;
 };
 
 export type MinimalBrainForUser = {

frontend/lib/hooks/useBrainIdFromUrl.ts

@@ -1,6 +1,8 @@
 import { UUID } from "crypto";
 import { useParams } from "next/navigation";
 
+import { useBrainFetcher } from "@/app/brains-management/[brainId]/components/BrainManagementTabs/hooks/useBrainFetcher";
+
 import { useBrainContext } from "../context/BrainProvider/hooks/useBrainContext";
 
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
@@ -11,9 +13,13 @@ export const useUrlBrain = () => {
 
   const brainId = params?.brainId as UUID | undefined;
   const correspondingBrain = allBrains.find((brain) => brain.id === brainId);
+  const { brain: brainDetails } = useBrainFetcher({
+    brainId: brainId,
+  });
 
   return {
     brain: correspondingBrain,
     brainId,
+    brainDetails,
   };
 };

frontend/lib/types/brainConfig.ts

@@ -20,7 +20,7 @@ export type BrainConfig = {
   supabaseKey?: string;
   prompt_id?: string;
   status: BrainStatus;
-  brainType: BrainType;
+  brain_type: BrainType;
   prompt: {
     title: string;
     content: string;