feat: improve ux

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

@@ -9,7 +9,6 @@ import { TextArea } from "@/lib/components/ui/TextField";
 import { models, paidModels } from "@/lib/context/BrainConfigProvider/types";
 import { defineMaxTokens } from "@/lib/helpers/defineMexTokens";
 
-import { ApiKeyConfig } from "./components";
 import { useSettingsTab } from "./hooks/useSettingsTab";
 
 type SettingsTabProps = {
@@ -28,6 +27,7 @@ export const SettingsTab = ({ brainId }: SettingsTabProps): JSX.Element => {
     setAsDefaultBrainHandler,
     isSettingAsDefault,
     isUpdating,
+    isDefaultBrain,
   } = useSettingsTab({ brainId });
 
   return (
@@ -35,13 +35,32 @@ export const SettingsTab = ({ brainId }: SettingsTabProps): JSX.Element => {
       onSubmit={(e) => void handleSubmit(e)}
       className="my-10 mb-0 flex flex-col items-center gap-2"
     >
-      <Field
-        label="Name"
-        placeholder="E.g. History notes"
-        autoComplete="off"
-        className="flex-1"
-        {...register("name")}
-      />
+      <div className="flex flex-row flex-1 justify-between w-full">
+        <div>
+          <Field
+            label="Name"
+            placeholder="E.g. History notes"
+            autoComplete="off"
+            className="flex-1"
+            {...register("name")}
+          />
+        </div>
+        <div className="mt-4">
+          {isDefaultBrain ? (
+            <div className="border rounded-lg border-dashed border-black dark:border-white bg-white dark:bg-black text-black dark:text-white focus:bg-black dark:focus:bg-white dark dark focus:text-white dark:focus:text-black transition-colors py-2 px-4 shadow-none">
+              Default brain
+            </div>
+          ) : (
+            <Button
+              variant={"secondary"}
+              isLoading={isSettingAsDefault}
+              onClick={() => void setAsDefaultBrainHandler()}
+            >
+              Set as default brain
+            </Button>
+          )}
+        </div>
+      </div>
       <TextArea
         label="Description"
         placeholder="My new brain is about..."
@@ -106,16 +125,6 @@ export const SettingsTab = ({ brainId }: SettingsTabProps): JSX.Element => {
           Save changes
         </Button>
       </div>
-      <Divider text="Default brain" className="mt-4" />
-      <Button
-        variant={"secondary"}
-        isLoading={isSettingAsDefault}
-        onClick={() => void setAsDefaultBrainHandler()}
-      >
-        Set as default brain
-      </Button>
-
-      <ApiKeyConfig />
     </form>
   );
 };

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

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

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

@@ -7,6 +7,7 @@ import { useForm } from "react-hook-form";
 
 import { useBrainApi } from "@/lib/api/brain/useBrainApi";
 import { useBrainConfig } from "@/lib/context/BrainConfigProvider";
+import { useBrainProvider } from "@/lib/context/BrainProvider/hooks/useBrainProvider";
 import { defineMaxTokens } from "@/lib/helpers/defineMexTokens";
 import { useToast } from "@/lib/hooks";
 
@@ -36,7 +37,6 @@ export const useSettingsTab = ({ brainId }: UseSettingsTabProps) => {
     reset,
     watch,
     setValue,
-
     formState: { dirtyFields },
   } = useForm({
     defaultValues,
@@ -111,7 +111,6 @@ export const useSettingsTab = ({ brainId }: UseSettingsTabProps) => {
 
       await updateBrain(brainId, getValues());
 
-      reset(defaultValues);
       publish({
         variant: "success",
         text: "Brain created successfully",
@@ -138,6 +137,8 @@ export const useSettingsTab = ({ brainId }: UseSettingsTabProps) => {
       setIsUpdating(false);
     }
   };
+  const { defaultBrainId } = useBrainProvider();
+  const isDefaultBrain = defaultBrainId === brainId;
 
   return {
     handleSubmit,
@@ -150,5 +151,6 @@ export const useSettingsTab = ({ brainId }: UseSettingsTabProps) => {
     hasChanges: Object.keys(dirtyFields).length > 0,
     setAsDefaultBrainHandler,
     isSettingAsDefault,
+    isDefaultBrain,
   };
 };

frontend/app/user/components/ApiKeyConfig/ApiKeyConfig.tsx

@@ -11,7 +11,7 @@ export const ApiKeyConfig = (): JSX.Element => {
   return (
     <>
       <Divider text="API Key Config" className="mt-4" />
-      <div className="flex justify-between items-center mt-4">
+      <div className="flex justify-center items-center mt-4">
         <div className="flex items-center space-x-4">
           {apiKey === "" && (
             <Button

frontend/app/user/components/UserStatistics.tsx

@@ -8,6 +8,7 @@ import Button from "@/lib/components/ui/Button";
 import { UserStats } from "@/lib/types/User";
 import { cn } from "@/lib/utils";
 
+import { ApiKeyConfig } from "./ApiKeyConfig";
 import { BrainConsumption } from "./BrainConsumption";
 import { DateComponent } from "./Date";
 import BrainSpaceChart from "./Graphs/BrainSpaceChart";
@@ -67,6 +68,7 @@ export const UserStatistics = (userStats: UserStats): JSX.Element => {
           </div>
         </UserStatisticsCard>
       </div>
+      <ApiKeyConfig />
     </>
   );
 };

frontend/lib/context/BrainProvider/hooks/useBrainProvider.ts

@@ -1,6 +1,6 @@
 /* eslint-disable max-lines */
 import { UUID } from "crypto";
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 
 import { CreateBrainInput } from "@/lib/api/brain/types";
 import { useBrainApi } from "@/lib/api/brain/useBrainApi";
@@ -24,10 +24,10 @@ export const useBrainProvider = () => {
 
   const [allBrains, setAllBrains] = useState<MinimalBrainForUser[]>([]);
   const [currentBrainId, setCurrentBrainId] = useState<null | UUID>(null);
+  const [defaultBrainId, setDefaultBrainId] = useState<UUID>();
   const [isFetchingBrains, setIsFetchingBrains] = useState(false);
 
   const currentBrain = allBrains.find((brain) => brain.id === currentBrainId);
-
   const createBrainHandler = async (
     brain: CreateBrainInput
   ): Promise<UUID | undefined> => {
@@ -79,10 +79,10 @@ export const useBrainProvider = () => {
   );
 
   const setDefaultBrain = useCallback(async () => {
-    const defaultBrain = await getDefaultBrain();
-    if (defaultBrain !== undefined) {
-      saveBrainInLocalStorage(defaultBrain);
-      setActiveBrain({ ...defaultBrain });
+    const userDefaultBrain = await getDefaultBrain();
+    if (userDefaultBrain !== undefined) {
+      saveBrainInLocalStorage(userDefaultBrain);
+      setActiveBrain(userDefaultBrain);
     } else {
       console.warn("No brains found");
     }
@@ -97,6 +97,13 @@ export const useBrainProvider = () => {
     }
   }, [setDefaultBrain, setActiveBrain]);
 
+  useEffect(() => {
+    const fetchDefaultBrain = async () => {
+      setDefaultBrainId((await getDefaultBrain())?.id);
+    };
+    void fetchDefaultBrain();
+  }, []);
+
   return {
     currentBrain,
     currentBrainId,
@@ -108,5 +115,6 @@ export const useBrainProvider = () => {
     setDefaultBrain,
     fetchAndSetActiveBrain,
     isFetchingBrains,
+    defaultBrainId,
   };
 };