draft updated at

web/app/components/workflow/header/index.tsx

@@ -3,6 +3,7 @@ import {
   memo,
   useCallback,
 } from 'react'
+import dayjs from 'dayjs'
 import { useStore } from '../store'
 import RunAndHistory from './run-and-history'
 import Publish from './publish'
@@ -17,6 +18,7 @@ const Header: FC = () => {
   const setShowFeaturesPanel = useStore(state => state.setShowFeaturesPanel)
   const runStaus = useStore(state => state.runStaus)
   const setRunStaus = useStore(state => state.setRunStaus)
+  const draftUpdatedAt = useStore(state => state.draftUpdatedAt)
 
   const handleShowFeatures = useCallback(() => {
     setShowFeaturesPanel(true)
@@ -35,6 +37,16 @@ const Header: FC = () => {
           <div className='flex items-center text-xs text-gray-500'>
             <Edit03 className='mr-1 w-3 h-3 text-gray-400' />
             Editing
+            {
+              draftUpdatedAt && (
+                <>
+                  <span className='flex items-center mx-1'>·</span>
+                  <span>
+                    Auto-Saved {dayjs(draftUpdatedAt).format('HH:mm:ss')}
+                  </span>
+                </>
+              )
+            }
           </div>
         </div>
       </div>

web/app/components/workflow/index.tsx

@@ -136,6 +136,11 @@ const WorkflowWrap: FC<WorkflowProps> = ({
   const { data, isLoading, error } = useSWR(appDetail?.id ? `/apps/${appDetail.id}/workflows/draft` : null, fetchWorkflowDraft)
   const nodesInitialData = useNodesInitialData()
 
+  useEffect(() => {
+    if (data)
+      useStore.setState({ draftUpdatedAt: data.updated_at })
+  }, [data])
+
   const startNode = {
     id: `${Date.now()}`,
     type: 'custom',

web/app/components/workflow/nodes/if-else/default.ts

@@ -5,11 +5,11 @@ const nodeDefault: NodeDefault<IfElseNodeType> = {
   defaultValue: {
     _targetBranches: [
       {
-        id: 'if-true',
+        id: 'true',
         name: 'IS TRUE',
       },
       {
-        id: 'if-false',
+        id: 'false',
         name: 'IS FALSE',
       },
     ],

web/app/components/workflow/nodes/if-else/node.tsx

@@ -19,7 +19,7 @@ const IfElseNode: FC<NodeProps<IfElseNodeType>> = (props) => {
         <div className='w-full text-right text-gray-700 text-xs font-semibold'>IF</div>
         <NodeSourceHandle
           {...props}
-          handleId='if-true'
+          handleId='true'
           handleClassName='!top-1 !-right-[21px]'
         />
       </div>
@@ -43,7 +43,7 @@ const IfElseNode: FC<NodeProps<IfElseNodeType>> = (props) => {
         <div className='w-full text-right text-gray-700 text-xs font-semibold'>ELSE</div>
         <NodeSourceHandle
           {...props}
-          handleId='if-false'
+          handleId='false'
           handleClassName='!top-1 !-right-[21px]'
         />
       </div>

web/app/components/workflow/store.ts

@@ -15,6 +15,7 @@ type State = {
   helpLine?: HelpLinePosition
   toolsets: CollectionWithExpanded[]
   toolsMap: ToolsMap
+  draftUpdatedAt: number
 }
 
 type Action = {
@@ -25,6 +26,7 @@ type Action = {
   setHelpLine: (helpLine?: HelpLinePosition) => void
   setToolsets: (toolsets: CollectionWithExpanded[]) => void
   setToolsMap: (toolsMap: Record<string, ToolInWorkflow[]>) => void
+  setDraftUpdatedAt: (draftUpdatedAt: number) => void
 }
 
 export const useStore = create<State & Action>(set => ({
@@ -43,4 +45,6 @@ export const useStore = create<State & Action>(set => ({
   setToolsets: toolsets => set(() => ({ toolsets })),
   toolsMap: {},
   setToolsMap: toolsMap => set(() => ({ toolsMap })),
+  draftUpdatedAt: 0,
+  setDraftUpdatedAt: draftUpdatedAt => set(() => ({ draftUpdatedAt })),
 }))