Added "Saved" tooltip at header

src/frontend/src/components/headerComponent/components/menuBar/index.tsx

@@ -13,6 +13,8 @@ import FlowSettingsModal from "../../../../modals/flowSettingsModal";
 import useAlertStore from "../../../../stores/alertStore";
 import useFlowStore from "../../../../stores/flowStore";
 import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
+import { cn } from "../../../../utils/utils";
+import Tooltip from "../../../TooltipComponent";
 import IconComponent from "../../../genericIconComponent";
 import { Button } from "../../../ui/button";
 
@@ -26,6 +28,7 @@ export const MenuBar = ({
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const undo = useFlowsManagerStore((state) => state.undo);
   const redo = useFlowsManagerStore((state) => state.redo);
+  const saveLoading = useFlowsManagerStore((state) => state.saveLoading);
   const [openSettings, setOpenSettings] = useState(false);
   const n = useFlowStore((state) => state.nodes);
 
@@ -112,6 +115,27 @@ export const MenuBar = ({
           setOpen={setOpenSettings}
         ></FlowSettingsModal>
       </div>
+      <Tooltip
+        title={
+          "Last saved at " +
+          new Date(currentFlow.updated_at ?? "").toLocaleString("en-US", {
+            hour: "numeric",
+            minute: "numeric",
+            second: "numeric",
+          })
+        }
+      >
+        <div className="flex items-center gap-1.5 text-sm text-muted-foreground">
+          <IconComponent
+            name={saveLoading ? "Loader2" : "CheckCircle2"}
+            className={cn(
+              "h-4 w-4",
+              saveLoading ? "animate-spin" : "animate-wiggle"
+            )}
+          />
+          {saveLoading ? "Saving..." : "Saved"}
+        </div>
+      </Tooltip>
     </div>
   ) : (
     <></>

src/frontend/src/constants/constants.ts

@@ -681,4 +681,4 @@ export const LANGFLOW_SUPPORTED_TYPES = new Set([
 export const priorityFields = new Set(["code", "template"]);
 
 export const INPUT_TYPES = new Set(["ChatInput", "TextInput"]);
-export const OUTPUT_TYPES = new Set(["ChatOutput"]);
+export const OUTPUT_TYPES = new Set(["ChatOutput",]);

src/frontend/src/stores/flowsManagerStore.ts

@@ -52,6 +52,7 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
     });
   },
   currentFlow: undefined,
+  saveLoading: false,
   isLoading: true,
   setIsLoading: (isLoading: boolean) => set({ isLoading }),
   refreshFlows: () => {
@@ -82,7 +83,7 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
     if (saveTimeoutId) {
       clearTimeout(saveTimeoutId);
     }
-
+    set({ saveLoading: true });
     // Set up a new timeout.
     saveTimeoutId = setTimeout(() => {
       if (get().currentFlow) {
@@ -94,6 +95,7 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
     }, 300); // Delay of 300ms.
   },
   saveFlow: (flow: FlowType, silent?: boolean) => {
+    set({ saveLoading: true })
     return new Promise<void>((resolve, reject) => {
       updateFlowInDatabase(flow)
         .then((updatedFlow) => {
@@ -115,6 +117,7 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
             //update tabs state
 
             resolve();
+            set({ saveLoading: false })
           }
         })
         .catch((err) => {

src/frontend/src/stores/storeStore.tsx

@@ -17,21 +17,3 @@ export const useStoreStore = create<StoreStoreType>((set) => ({
 checkHasStore().then((res) => {
   useStoreStore.setState({ hasStore: res?.enabled ?? false });
 });
-
-const fetchApiData = async () => {
-  useStoreStore.setState({ loadingApiKey: true });
-  try {
-    const res = await checkHasApiKey();
-
-    useStoreStore.setState({
-      loadingApiKey: false,
-      validApiKey: res?.is_valid ?? false,
-      hasApiKey: res?.has_api_key ?? false,
-    });
-  } catch (e) {
-    useStoreStore.setState({ loadingApiKey: false });
-    console.log(e);
-  }
-};
-
-fetchApiData();

src/frontend/src/types/flow/index.ts

@@ -10,6 +10,8 @@ export type FlowType = {
   style?: FlowStyleType;
   is_component?: boolean;
   last_tested_version?: string;
+  updated_at?: string;
+  date_created?: string;
   parent?: string;
 };
 

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

@@ -7,6 +7,7 @@ export type FlowsManagerStoreType = {
   currentFlow: FlowType | undefined;
   currentFlowId: string;
   setCurrentFlowId: (currentFlowId: string) => void;
+  saveLoading: boolean;
   isLoading: boolean;
   setIsLoading: (isLoading: boolean) => void;
   refreshFlows: () => Promise<void>;