Feature: Autosave and Undo/Redo

packages/ui/package.json

@@ -50,8 +50,9 @@
         "react-router": "~6.3.0",
         "react-router-dom": "~6.3.0",
         "react-syntax-highlighter": "^15.5.0",
-        "reactflow": "^11.5.6",
+        "reactflow": "^11.11.4",
         "redux": "^4.0.5",
+        "redux-undo": "^1.1.0",
         "rehype-mathjax": "^4.0.2",
         "rehype-raw": "^7.0.0",
         "remark-gfm": "^3.0.1",

packages/ui/src/hooks/useAutoSave.jsx

@@ -0,0 +1,98 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { useSelector } from 'react-redux'
+import { isEqual } from 'lodash'
+
+const useAutoSave = ({ onAutoSave, interval = 60000, debounce = 1000 }) => {
+    const canvas = useSelector((state) => state.canvas.present)
+    const [isSaving, setIsSaving] = useState(false)
+    const timeoutRef = useRef(null)
+    const previousSaveRef = useRef(null)
+    const onAutoSaveRef = useRef(onAutoSave)
+    const initialLoadRef = useRef(true)
+
+    useEffect(() => {
+        onAutoSaveRef.current = onAutoSave
+    }, [onAutoSave])
+
+    // debounced save function
+    const debouncedSave = useCallback(() => {
+        if (initialLoadRef.current) {
+            initialLoadRef.current = false
+            return
+        }
+
+        setIsSaving(true)
+
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current)
+        }
+
+        timeoutRef.current = setTimeout(() => {
+            if (canvas.chatflow && canvas.chatflow.flowData) {
+                const currentData = {
+                    chatflowId: canvas.chatflow.id,
+                    chatflowName: canvas.chatflow.name,
+                    flowData: canvas.chatflow.flowData
+                }
+
+                const hasChanged = !previousSaveRef.current || !isEqual(currentData, previousSaveRef.current)
+
+                if (hasChanged) {
+                    onAutoSaveRef.current(currentData)
+                    previousSaveRef.current = currentData
+                }
+            }
+            setIsSaving(false)
+        }, debounce)
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [debounce, canvas.chatflow?.id, canvas.chatflow?.name, canvas.chatflow?.flowData])
+
+    // watch for changes to trigger debounced save
+    useEffect(() => {
+        if (canvas.chatflow?.flowData || canvas.chatflow?.name) {
+            debouncedSave()
+        }
+    }, [canvas.chatflow?.flowData, canvas.chatflow?.name, debouncedSave])
+
+    // periodic saves
+    useEffect(() => {
+        const intervalId = setInterval(() => {
+            if (canvas.chatflow && !isEqual(canvas.chatflow, previousSaveRef.current)) {
+                onAutoSaveRef.current({
+                    chatflowId: canvas.chatflow.id,
+                    chatflowName: canvas.chatflow.name,
+                    flowData: canvas.chatflow.flowData
+                })
+                previousSaveRef.current = canvas.chatflow
+            }
+        }, interval)
+
+        return () => {
+            clearInterval(intervalId)
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current)
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [interval])
+
+    // force an immediate save
+    const forceSave = useCallback(() => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current)
+        }
+
+        if (canvas.chatflow && !isEqual(canvas.chatflow, previousSaveRef.current)) {
+            onAutoSaveRef.current({
+                chatflowId: canvas.chatflow.id,
+                chatflowName: canvas.chatflow.name,
+                flowData: canvas.chatflow.flowData
+            })
+            previousSaveRef.current = canvas.chatflow
+        }
+    }, [canvas.chatflow])
+
+    return [canvas.chatflow, isSaving, forceSave]
+}
+
+export default useAutoSave

packages/ui/src/store/actions.js

@@ -15,6 +15,7 @@ export const SHOW_CANVAS_DIALOG = '@canvas/SHOW_CANVAS_DIALOG'
 export const HIDE_CANVAS_DIALOG = '@canvas/HIDE_CANVAS_DIALOG'
 export const SET_COMPONENT_NODES = '@canvas/SET_COMPONENT_NODES'
 export const SET_COMPONENT_CREDENTIALS = '@canvas/SET_COMPONENT_CREDENTIALS'
+export const RESET_CANVAS = '@canvas/RESET_CANVAS'
 
 // action - notifier reducer
 export const ENQUEUE_SNACKBAR = 'ENQUEUE_SNACKBAR'

packages/ui/src/store/context/ReactFlowContext.jsx

@@ -1,11 +1,13 @@
 import { createContext, useState } from 'react'
-import { useDispatch } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 import PropTypes from 'prop-types'
 import { getUniqueNodeId } from '@/utils/genericHelper'
 import { cloneDeep } from 'lodash'
-import { SET_DIRTY } from '@/store/actions'
+import { SET_CHATFLOW, SET_DIRTY } from '@/store/actions'
 
 const initialValue = {
+    highlightedNodeId: '',
+    setHighlightedNodeId: () => {},
     reactFlowInstance: null,
     setReactFlowInstance: () => {},
     duplicateNode: () => {},
@@ -16,20 +18,49 @@ const initialValue = {
 export const flowContext = createContext(initialValue)
 
 export const ReactFlowContext = ({ children }) => {
+    const canvas = useSelector((state) => state.canvas.present)
     const dispatch = useDispatch()
+    const [highlightedNodeId, setHighlightedNodeId] = useState('')
     const [reactFlowInstance, setReactFlowInstance] = useState(null)
 
     const deleteNode = (nodeid) => {
         deleteConnectedInput(nodeid, 'node')
-        reactFlowInstance.setNodes(reactFlowInstance.getNodes().filter((n) => n.id !== nodeid))
-        reactFlowInstance.setEdges(reactFlowInstance.getEdges().filter((ns) => ns.source !== nodeid && ns.target !== nodeid))
+        const updatedNodes = reactFlowInstance.getNodes().filter((n) => n.id !== nodeid)
+        const updatedEdges = reactFlowInstance.getEdges().filter((ns) => ns.source !== nodeid && ns.target !== nodeid)
+        reactFlowInstance.setNodes(updatedNodes)
+        reactFlowInstance.setEdges(updatedEdges)
         dispatch({ type: SET_DIRTY })
+        const flowData = {
+            nodes: updatedNodes,
+            edges: updatedEdges,
+            viewport: reactFlowInstance?.getViewport()
+        }
+        dispatch({
+            type: SET_CHATFLOW,
+            chatflow: {
+                ...canvas.chatflow,
+                flowData: JSON.stringify(flowData)
+            }
+        })
     }
 
     const deleteEdge = (edgeid) => {
         deleteConnectedInput(edgeid, 'edge')
-        reactFlowInstance.setEdges(reactFlowInstance.getEdges().filter((edge) => edge.id !== edgeid))
+        const updatedEdges = reactFlowInstance.getEdges().filter((edge) => edge.id !== edgeid)
+        reactFlowInstance.setEdges(updatedEdges)
         dispatch({ type: SET_DIRTY })
+        const flowData = {
+            nodes: reactFlowInstance.getNodes(),
+            edges: updatedEdges,
+            viewport: reactFlowInstance?.getViewport()
+        }
+        dispatch({
+            type: SET_CHATFLOW,
+            chatflow: {
+                ...canvas.chatflow,
+                flowData: JSON.stringify(flowData)
+            }
+        })
     }
 
     const deleteConnectedInput = (id, type) => {
@@ -135,14 +166,29 @@ export const ReactFlowContext = ({ children }) => {
                 }
             }
 
-            reactFlowInstance.setNodes([...nodes, duplicatedNode])
+            const updatedNodes = [...nodes, duplicatedNode]
+            reactFlowInstance.setNodes(updatedNodes)
             dispatch({ type: SET_DIRTY })
+            const flowData = {
+                nodes: updatedNodes,
+                edges: reactFlowInstance.getEdges(),
+                viewport: reactFlowInstance?.getViewport()
+            }
+            dispatch({
+                type: SET_CHATFLOW,
+                chatflow: {
+                    ...canvas.chatflow,
+                    flowData: JSON.stringify(flowData)
+                }
+            })
         }
     }
 
     return (
         <flowContext.Provider
             value={{
+                highlightedNodeId,
+                setHighlightedNodeId,
                 reactFlowInstance,
                 setReactFlowInstance,
                 deleteNode,

packages/ui/src/store/index.jsx

@@ -3,7 +3,7 @@ import reducer from './reducer'
 
 // ==============================|| REDUX - MAIN STORE ||============================== //
 
-const store = createStore(reducer)
+const store = createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__({ trace: true }))
 const persister = 'Free'
 
 export { store, persister }

packages/ui/src/store/reducers/canvasReducer.js

@@ -1,4 +1,5 @@
 // action - state management
+import undoable from 'redux-undo'
 import * as actionTypes from '../actions'
 
 export const initialState = {
@@ -48,9 +49,29 @@ const canvasReducer = (state = initialState, action) => {
                 ...state,
                 componentCredentials: action.componentCredentials
             }
+        case actionTypes.RESET_CANVAS:
+            return initialState
         default:
             return state
     }
 }
 
-export default canvasReducer
+const undoableCanvas = undoable(canvasReducer, {
+    debug: false, // set to true when debugging
+    filter: (action, currentState, previousHistory) => {
+        if (action.type !== actionTypes.SET_CHATFLOW) return false
+
+        const currentFlowData = currentState.chatflow?.flowData
+        const previousFlowData = previousHistory.present.chatflow?.flowData
+
+        const currentName = currentState.chatflow?.name
+        const previousName = previousHistory.present.chatflow?.name
+
+        return currentFlowData !== previousFlowData || currentName !== previousName
+    },
+    groupBy: (action) => (action.type === actionTypes.SET_CHATFLOW ? Math.floor(Date.now() / 2000) : null),
+    ignoreInitialState: true,
+    limit: 50
+})
+
+export default undoableCanvas

packages/ui/src/ui-component/cards/NodeCardWrapper.js

@@ -1,3 +1,4 @@
+import { memo } from 'react'
 // material-ui
 import { styled } from '@mui/material/styles'
 
@@ -18,4 +19,4 @@ const NodeCardWrapper = styled(MainCard)(({ theme }) => ({
     }
 }))
 
-export default NodeCardWrapper
+export default memo(NodeCardWrapper)

packages/ui/src/ui-component/dialog/AdditionalParamsDialog.jsx

@@ -7,7 +7,7 @@ import PerfectScrollbar from 'react-perfect-scrollbar'
 import NodeInputHandler from '@/views/canvas/NodeInputHandler'
 import { HIDE_CANVAS_DIALOG, SHOW_CANVAS_DIALOG } from '@/store/actions'
 
-const AdditionalParamsDialog = ({ show, dialogProps, onCancel }) => {
+const AdditionalParamsDialog = ({ show, dialogProps, onCancel, onNodeDataChange }) => {
     const portalElement = document.getElementById('portal')
     const dispatch = useDispatch()
 
@@ -54,6 +54,7 @@ const AdditionalParamsDialog = ({ show, dialogProps, onCancel }) => {
                             inputParam={inputParam}
                             data={data}
                             isAdditionalParams={true}
+                            onNodeDataChange={onNodeDataChange}
                         />
                     ))}
                 </PerfectScrollbar>
@@ -67,7 +68,8 @@ const AdditionalParamsDialog = ({ show, dialogProps, onCancel }) => {
 AdditionalParamsDialog.propTypes = {
     show: PropTypes.bool,
     dialogProps: PropTypes.object,
-    onCancel: PropTypes.func
+    onCancel: PropTypes.func,
+    onNodeDataChange: PropTypes.func
 }
 
 export default AdditionalParamsDialog

packages/ui/src/ui-component/dialog/ConditionDialog.jsx

@@ -17,7 +17,7 @@ import NodeInputHandler from '@/views/canvas/NodeInputHandler'
 // Store
 import { HIDE_CANVAS_DIALOG, SHOW_CANVAS_DIALOG } from '@/store/actions'
 
-const ConditionDialog = ({ show, dialogProps, onCancel, onConfirm }) => {
+const ConditionDialog = ({ show, dialogProps, onCancel, onConfirm, onNodeDataChange }) => {
     const portalElement = document.getElementById('portal')
 
     const dispatch = useDispatch()
@@ -66,6 +66,7 @@ const ConditionDialog = ({ show, dialogProps, onCancel, onConfirm }) => {
                                         data={data}
                                         isAdditionalParams={true}
                                         disablePadding={true}
+                                        onNodeDataChange={onNodeDataChange}
                                     />
                                 </TabPanel>
                             ))}
@@ -89,7 +90,8 @@ ConditionDialog.propTypes = {
     show: PropTypes.bool,
     dialogProps: PropTypes.object,
     onCancel: PropTypes.func,
-    onConfirm: PropTypes.func
+    onConfirm: PropTypes.func,
+    onNodeDataChange: PropTypes.func
 }
 
 export default ConditionDialog

packages/ui/src/ui-component/dropdown/AsyncDropdown.jsx

@@ -152,6 +152,7 @@ export const AsyncDropdown = ({
                             )
                         }}
                         sx={{ height: '100%', '& .MuiInputBase-root': { height: '100%' } }}
+                        key={`${nodeData.id}-${name}-${nodeData.inputs[internalValue]}`}
                     />
                 )}
                 renderOption={(props, option) => (

packages/ui/src/ui-component/editor/CodeEditor.jsx

@@ -1,4 +1,5 @@
 import PropTypes from 'prop-types'
+import { useState } from 'react'
 import CodeMirror from '@uiw/react-codemirror'
 import { javascript } from '@codemirror/lang-javascript'
 import { json } from '@codemirror/lang-json'
@@ -16,8 +17,10 @@ export const CodeEditor = ({
     disabled = false,
     autoFocus = false,
     basicSetup = {},
+    onBlur,
     onValueChange
 }) => {
+    const [code, setCode] = useState(value)
     const colorTheme = useTheme()
 
     const customStyle = EditorView.baseTheme({
@@ -52,7 +55,11 @@ export const CodeEditor = ({
                     ? [javascript({ jsx: true }), EditorView.lineWrapping, customStyle]
                     : [json(), EditorView.lineWrapping, customStyle]
             }
-            onChange={onValueChange}
+            onBlur={() => onBlur?.(code)}
+            onChange={(val) => {
+                setCode(val)
+                onValueChange?.(val)
+            }}
             readOnly={disabled}
             editable={!disabled}
             // eslint-disable-next-line
@@ -71,5 +78,6 @@ CodeEditor.propTypes = {
     disabled: PropTypes.bool,
     autoFocus: PropTypes.bool,
     basicSetup: PropTypes.object,
+    onBlur: PropTypes.func,
     onValueChange: PropTypes.func
 }

packages/ui/src/ui-component/extended/OverrideConfig.jsx

@@ -86,7 +86,7 @@ OverrideConfigTable.propTypes = {
 
 const OverrideConfig = ({ dialogProps }) => {
     const dispatch = useDispatch()
-    const chatflow = useSelector((state) => state.canvas.chatflow)
+    const chatflow = useSelector((state) => state.canvas.present.chatflow)
     const chatflowid = chatflow.id
     const apiConfig = chatflow.apiConfig ? JSON.parse(chatflow.apiConfig) : {}
 

packages/ui/src/ui-component/extended/RateLimit.jsx

@@ -21,7 +21,7 @@ import useNotifier from '@/utils/useNotifier'
 
 const RateLimit = () => {
     const dispatch = useDispatch()
-    const chatflow = useSelector((state) => state.canvas.chatflow)
+    const chatflow = useSelector((state) => state.canvas.present.chatflow)
     const chatflowid = chatflow.id
     const apiConfig = chatflow.apiConfig ? JSON.parse(chatflow.apiConfig) : {}