feat: add LANGFLOW_AUTO_SAVING_INTERVAL .env variable for flow auto-saving debounce (#3478)

* 📝 (langflow): Add support for configuring auto saving interval for Langflow
📝 (langflow): Update ConfigResponse and Settings to include auto_saving_interval
📝 (frontend): Update useGetConfigQuery and useSaveConfig to handle auto_saving_interval
📝 (frontend): Update useAutoSaveFlow and flowsManagerStore to handle auto saving interval

* 📝 (util.py): add support for setting auto_saving_interval in update_settings function to allow customization of auto-saving interval

src/frontend/src/controllers/API/queries/config/use-get-config.ts

@@ -6,6 +6,7 @@ import { UseRequestProcessor } from "../../services/request-processor";
 export interface ConfigResponse {
   frontend_timeout: number;
   auto_saving: boolean;
+  auto_saving_interval: number;
 }
 
 export const useGetConfigQuery: useQueryFunctionType<

src/frontend/src/hooks/flows/use-autosave-flow.ts

@@ -1,4 +1,3 @@
-import { SAVE_DEBOUNCE_TIME } from "@/constants/constants";
 import useFlowsManagerStore from "@/stores/flowsManagerStore";
 import { FlowType } from "@/types/flow";
 import { useDebounce } from "../use-debounce";
@@ -7,12 +6,15 @@ import useSaveFlow from "./use-save-flow";
 const useAutoSaveFlow = () => {
   const saveFlow = useSaveFlow();
   const autoSaving = useFlowsManagerStore((state) => state.autoSaving);
+  const autoSavingInterval = useFlowsManagerStore(
+    (state) => state.autoSavingInterval,
+  );
 
   const autoSaveFlow = useDebounce((flow?: FlowType) => {
     if (autoSaving) {
       saveFlow(flow);
     }
-  }, SAVE_DEBOUNCE_TIME);
+  }, autoSavingInterval);
 
   return autoSaveFlow;
 };

src/frontend/src/hooks/use-save-config.ts

@@ -6,6 +6,9 @@ import { useGetConfigQuery } from "../controllers/API/queries/config/use-get-con
 function useSaveConfig() {
   const { data } = useGetConfigQuery();
   const setAutoSaving = useFlowsManagerStore((state) => state.setAutoSaving);
+  const setAutoSavingInterval = useFlowsManagerStore(
+    (state) => state.setAutoSavingInterval,
+  );
 
   useEffect(() => {
     if (data) {
@@ -15,6 +18,7 @@ function useSaveConfig() {
       axios.defaults.baseURL = "";
       axios.defaults.timeout = timeoutInMilliseconds;
       setAutoSaving(data.auto_saving);
+      setAutoSavingInterval(data.auto_saving_interval);
     }
   }, [data]);
 }

src/frontend/src/stores/flowsManagerStore.ts

@@ -1,3 +1,4 @@
+import { SAVE_DEBOUNCE_TIME } from "@/constants/constants";
 import { cloneDeep } from "lodash";
 import { create } from "zustand";
 import { FlowType } from "../types/flow";
@@ -18,6 +19,9 @@ const future = {};
 const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
   autoSaving: true,
   setAutoSaving: (autoSaving: boolean) => set({ autoSaving }),
+  autoSavingInterval: SAVE_DEBOUNCE_TIME,
+  setAutoSavingInterval: (autoSavingInterval: number) =>
+    set({ autoSavingInterval }),
   examples: [],
   setExamples: (examples: FlowType[]) => {
     set({ examples });

src/frontend/src/types/zustand/flowsManager/index.ts

@@ -22,6 +22,8 @@ export type FlowsManagerStoreType = {
   searchFlowsComponents: string;
   selectedFlowsComponentsCards: string[];
   setSelectedFlowsComponentsCards: (selected: string[]) => void;
+  autoSavingInterval: number;
+  setAutoSavingInterval: (autoSavingInterval: number) => void;
 };
 
 export type UseUndoRedoOptions = {