feat: hide over tab when brain access is public

QuivrHQ · Sep 20, 2023 · f4a02a8 · f4a02a8
1 parent 9555922
commit f4a02a8
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 19 deletions.
diff --git a/...nd/app/brains-management/[brainId]/components/BrainManagementTabs/BrainManagementTabs.tsx b/...nd/app/brains-management/[brainId]/components/BrainManagementTabs/BrainManagementTabs.tsx
@@ -17,8 +17,11 @@ export const BrainManagementTabs = (): JSX.Element => {
     handleDeleteBrain,
     isDeleteModalOpen,
     setIsDeleteModalOpen,
+    brain,
   } = useBrainManagementTabs();
 
+  const isPubliclyAccessible = brain?.status === "public";
+
   if (brainId === undefined) {
     return <div />;
   }
@@ -38,18 +41,22 @@ export const BrainManagementTabs = (): JSX.Element => {
           value="settings"
           onChange={setSelectedTab}
         />
-        <BrainTabTrigger
-          selected={selectedTab === "people"}
-          label={t("people", { ns: "config" })}
-          value="people"
-          onChange={setSelectedTab}
-        />
-        <BrainTabTrigger
-          selected={selectedTab === "knowledge"}
-          label={t("knowledge", { ns: "config" })}
-          value="knowledge"
-          onChange={setSelectedTab}
-        />
+        {!isPubliclyAccessible && (
+          <>
+            <BrainTabTrigger
+              selected={selectedTab === "people"}
+              label={t("people", { ns: "config" })}
+              value="people"
+              onChange={setSelectedTab}
+            />
+            <BrainTabTrigger
+              selected={selectedTab === "knowledge"}
+              label={t("knowledge", { ns: "config" })}
+              value="knowledge"
+              onChange={setSelectedTab}
+            />
+          </>
+        )}
       </List>
 
       <div className="flex-1 p-4 md:p-20 md:pt-0">
@@ -66,6 +73,7 @@ export const BrainManagementTabs = (): JSX.Element => {
 
       <div className="flex justify-center mt-4">
         <Button
+          disabled={isPubliclyAccessible}
           className="px-8 md:px-20 py-2 bg-red-500 text-white rounded-md"
           onClick={() => setIsDeleteModalOpen(true)}
         >

diff --git a/...anagement/[brainId]/components/BrainManagementTabs/components/SettingsTab/SettingsTab.tsx b/...anagement/[brainId]/components/BrainManagementTabs/components/SettingsTab/SettingsTab.tsx
@@ -39,6 +39,8 @@ export const SettingsTab = ({ brainId }: SettingsTabProps): JSX.Element => {
     brain,
   } = useSettingsTab({ brainId });
 
+  const isPubliclyAccessible = brain?.status === "public";
+
   return (
     <form
       onSubmit={(e) => {
@@ -56,13 +58,14 @@ export const SettingsTab = ({ brainId }: SettingsTabProps): JSX.Element => {
             autoComplete="off"
             className="flex-1"
             required
+            disabled={isPubliclyAccessible}
             {...register("name")}
           />
         </div>
 
         <div className="mt-4">
           <div className="flex flex-1 items-center flex-col">
-            {brain?.status === "public" && (
+            {isPubliclyAccessible && (
               <Chip className="mb-3 bg-purple-600 text-white w-full">
                 {t("brain:public_brain_label")}
               </Chip>
@@ -77,6 +80,7 @@ export const SettingsTab = ({ brainId }: SettingsTabProps): JSX.Element => {
                 isLoading={isSettingAsDefault}
                 onClick={() => void setAsDefaultBrainHandler()}
                 type="button"
+                disabled={isPubliclyAccessible}
               >
                 {t("setDefaultBrain", { ns: "brain" })}
               </Button>
@@ -89,6 +93,7 @@ export const SettingsTab = ({ brainId }: SettingsTabProps): JSX.Element => {
         placeholder={t("brainDescriptionPlaceholder", { ns: "brain" })}
         autoComplete="off"
         className="flex-1 m-3"
+        disabled={isPubliclyAccessible}
         {...register("description")}
       />
       <Divider text={t("modelSection", { ns: "config" })} />
@@ -97,6 +102,7 @@ export const SettingsTab = ({ brainId }: SettingsTabProps): JSX.Element => {
         placeholder={t("openAiKeyPlaceholder", { ns: "config" })}
         autoComplete="off"
         className="flex-1"
+        disabled={isPubliclyAccessible}
         {...register("openAiKey")}
       />
       <fieldset className="w-full flex flex-col mt-2">
@@ -105,6 +111,7 @@ export const SettingsTab = ({ brainId }: SettingsTabProps): JSX.Element => {
         </label>
         <select
           id="model"
+          disabled={isPubliclyAccessible}
           {...register("model")}
           className="px-5 py-2 dark:bg-gray-700 bg-gray-200 rounded-md"
           onChange={() => {
@@ -129,6 +136,7 @@ export const SettingsTab = ({ brainId }: SettingsTabProps): JSX.Element => {
           max="1"
           step="0.01"
           value={temperature}
+          disabled={isPubliclyAccessible}
           {...register("temperature")}
         />
       </fieldset>
@@ -141,33 +149,45 @@ export const SettingsTab = ({ brainId }: SettingsTabProps): JSX.Element => {
           min="10"
           max={defineMaxTokens(model)}
           value={maxTokens}
+          disabled={isPubliclyAccessible}
           {...register("maxTokens")}
         />
       </fieldset>
       <div className="flex w-full justify-end py-4">
-        <SaveButton handleSubmit={handleSubmit} />
+        <SaveButton
+          disabled={isPubliclyAccessible}
+          handleSubmit={handleSubmit}
+        />
       </div>
       <Divider text={t("customPromptSection", { ns: "config" })} />
-      <PublicPrompts onSelect={pickPublicPrompt} />
+      {!isPubliclyAccessible && <PublicPrompts onSelect={pickPublicPrompt} />}
       <Field
         label={t("promptName", { ns: "config" })}
         placeholder={t("promptNamePlaceholder", { ns: "config" })}
         autoComplete="off"
         className="flex-1"
+        disabled={isPubliclyAccessible}
         {...register("prompt.title")}
       />
       <TextArea
         label={t("promptContent", { ns: "config" })}
         placeholder={t("promptContentPlaceholder", { ns: "config" })}
         autoComplete="off"
         className="flex-1"
+        disabled={isPubliclyAccessible}
         {...register("prompt.content")}
       />
       <div className="flex w-full justify-end py-4">
-        <SaveButton handleSubmit={handleSubmit} />
+        <SaveButton
+          disabled={isPubliclyAccessible}
+          handleSubmit={handleSubmit}
+        />
       </div>
       {promptId !== "" && (
-        <Button disabled={isUpdating} onClick={() => void removeBrainPrompt()}>
+        <Button
+          disabled={isUpdating || isPubliclyAccessible}
+          onClick={() => void removeBrainPrompt()}
+        >
           {t("removePrompt", { ns: "config" })}
         </Button>
       )}

diff --git a/...rains-management/[brainId]/components/BrainManagementTabs/hooks/useBrainManagementTabs.ts b/...rains-management/[brainId]/components/BrainManagementTabs/hooks/useBrainManagementTabs.ts
@@ -1,7 +1,10 @@
+import { useQuery } from "@tanstack/react-query";
 import { UUID } from "crypto";
 import { useParams, useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 
+import { getBrainDataKey } from "@/lib/api/brain/config";
+import { useBrainApi } from "@/lib/api/brain/useBrainApi";
 import { useBrainContext } from "@/lib/context/BrainProvider/hooks/useBrainContext";
 
 import { BrainManagementTab } from "../types";
@@ -18,6 +21,7 @@ export const useBrainManagementTabs = () => {
       setSelectedTab(targetedTab);
     }
   }, []);
+  const { getBrain } = useBrainApi();
 
   const { deleteBrain, setCurrentBrainId } = useBrainContext();
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
@@ -27,6 +31,12 @@ export const useBrainManagementTabs = () => {
 
   const brainId = params?.brainId as UUID | undefined;
 
+  const { data: brain } = useQuery({
+    queryKey: [getBrainDataKey(brainId!)],
+    queryFn: () => getBrain(brainId!),
+    enabled: brainId !== undefined,
+  });
+
   const handleDeleteBrain = () => {
     if (brainId === undefined) {
       return;
@@ -44,5 +54,6 @@ export const useBrainManagementTabs = () => {
     handleDeleteBrain,
     isDeleteModalOpen,
     setIsDeleteModalOpen,
+    brain,
   };
 };
diff --git a/frontend/shared/SaveButton.tsx b/frontend/shared/SaveButton.tsx
@@ -3,17 +3,18 @@ import { useTranslation } from "react-i18next";
 
 import Button from "@/lib/components/ui/Button";
 
-interface Props {
+interface Props extends React.ComponentProps<typeof Button> {
   handleSubmit: (checkDirty: boolean) => Promise<void>;
 }
-export const SaveButton = ({ handleSubmit }: Props): ReactElement => {
+export const SaveButton = ({ handleSubmit, ...props }: Props): ReactElement => {
   const { t } = useTranslation(["translation"]);
 
   return (
     <Button
       variant={"primary"}
       onClick={() => void handleSubmit(true)}
       type="button"
+      {...props}
     >
       {t("saveButton")}
     </Button>