feat: remove save changes button

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

@@ -1,6 +1,7 @@
 /* eslint-disable max-lines */
 
 import { UUID } from "crypto";
+import { FaSpinner } from "react-icons/fa";
 
 import Button from "@/lib/components/ui/Button";
 import { Divider } from "@/lib/components/ui/Divider";
@@ -19,7 +20,6 @@ export const SettingsTab = ({ brainId }: SettingsTabProps): JSX.Element => {
   const {
     handleSubmit,
     register,
-    hasChanges,
     openAiKey,
     temperature,
     maxTokens,
@@ -28,12 +28,17 @@ export const SettingsTab = ({ brainId }: SettingsTabProps): JSX.Element => {
     isSettingAsDefault,
     isUpdating,
     isDefaultBrain,
+    formRef,
   } = useSettingsTab({ brainId });
 
   return (
     <form
-      onSubmit={(e) => void handleSubmit(e)}
+      onSubmit={(e) => {
+        e.preventDefault();
+        void handleSubmit();
+      }}
       className="my-10 mb-0 flex flex-col items-center gap-2"
+      ref={formRef}
     >
       <div className="flex flex-row flex-1 justify-between w-full">
         <div>
@@ -121,9 +126,10 @@ export const SettingsTab = ({ brainId }: SettingsTabProps): JSX.Element => {
         />
       </fieldset>
       <div className="flex flex-row justify-end flex-1 w-full mt-8">
-        <Button isLoading={isUpdating} disabled={!hasChanges}>
-          Save changes
-        </Button>
+        {isUpdating && <FaSpinner className="animate-spin" />}
+        {isUpdating && (
+          <span className="ml-2 text-sm">Updating brain settings...</span>
+        )}
       </div>
     </form>
   );

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

@@ -2,7 +2,7 @@
 /* eslint-disable max-lines */
 import axios from "axios";
 import { UUID } from "crypto";
-import { FormEvent, useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useForm } from "react-hook-form";
 
 import { useBrainApi } from "@/lib/api/brain/useBrainApi";
@@ -20,7 +20,7 @@ export const useSettingsTab = ({ brainId }: UseSettingsTabProps) => {
   const [isUpdating, setIsUpdating] = useState(false);
   const [isSettingAsDefault, setIsSettingHasDefault] = useState(false);
   const { publish } = useToast();
-
+  const formRef = useRef<HTMLFormElement>(null);
   const { setAsDefaultBrain, getBrain, updateBrain } = useBrainApi();
   const { config } = useBrainConfig();
 
@@ -93,8 +93,12 @@ export const useSettingsTab = ({ brainId }: UseSettingsTabProps) => {
     }
   };
 
-  const handleSubmit = async (e: FormEvent) => {
-    e.preventDefault();
+  const handleSubmit = async () => {
+    const hasChanges = Object.keys(dirtyFields).length > 0;
+
+    if (!hasChanges) {
+      return;
+    }
     const { name: isNameDirty } = dirtyFields;
     const { name } = getValues();
     if (isNameDirty !== undefined && isNameDirty && name.trim() === "") {
@@ -140,6 +144,21 @@ export const useSettingsTab = ({ brainId }: UseSettingsTabProps) => {
   const { defaultBrainId } = useBrainProvider();
   const isDefaultBrain = defaultBrainId === brainId;
 
+  useEffect(() => {
+    const handleKeyPress = (event: KeyboardEvent) => {
+      if (event.key === "Enter") {
+        event.preventDefault();
+        void handleSubmit();
+      }
+    };
+
+    formRef.current?.addEventListener("keydown", handleKeyPress);
+
+    return () => {
+      formRef.current?.removeEventListener("keydown", handleKeyPress);
+    };
+  }, [formRef.current]);
+
   return {
     handleSubmit,
     register,
@@ -148,9 +167,10 @@ export const useSettingsTab = ({ brainId }: UseSettingsTabProps) => {
     temperature,
     maxTokens,
     isUpdating,
-    hasChanges: Object.keys(dirtyFields).length > 0,
+
     setAsDefaultBrainHandler,
     isSettingAsDefault,
     isDefaultBrain,
+    formRef,
   };
 };