feat: undo/redo for workflow editor (langgenius#3927)

Co-authored-by: StyleZhang <[email protected]>

Author: perzeuss

ArrowUturnLeft.svg

@@ -3,8 +3,6 @@ export { default as ArrowUpRight } from './ArrowUpRight'
 export { default as ChevronDownDouble } from './ChevronDownDouble'
 export { default as ChevronRight } from './ChevronRight'
 export { default as ChevronSelectorVertical } from './ChevronSelectorVertical'
-export { default as FlipBackward } from './FlipBackward'
-export { default as FlipForward } from './FlipForward'
 export { default as RefreshCcw01 } from './RefreshCcw01'
 export { default as RefreshCw05 } from './RefreshCw05'
 export { default as ReverseLeft } from './ReverseLeft'

web/app/components/base/icons/assets/vender/line/arrows/flip-backward.svg

@@ -12,7 +12,7 @@ import {
   useStore,
   useWorkflowStore,
 } from './store'
-import { useNodesInteractions } from './hooks'
+import { WorkflowHistoryEvent, useNodesInteractions, useWorkflowHistory } from './hooks'
 import { CUSTOM_NODE } from './constants'
 import CustomNode from './nodes'
 import CustomNoteNode from './note-node'
@@ -26,6 +26,7 @@ const CandidateNode = () => {
   const mousePosition = useStore(s => s.mousePosition)
   const { zoom } = useViewport()
   const { handleNodeSelect } = useNodesInteractions()
+  const { saveStateToHistory } = useWorkflowHistory()
 
   useEventListener('click', (e) => {
     const { candidateNode, mousePosition } = workflowStore.getState()
@@ -53,6 +54,11 @@ const CandidateNode = () => {
         })
       })
       setNodes(newNodes)
+      if (candidateNode.type === CUSTOM_NOTE_NODE)
+        saveStateToHistory(WorkflowHistoryEvent.NoteAdd)
+      else
+        saveStateToHistory(WorkflowHistoryEvent.NodeAdd)
+
       workflowStore.setState({ candidateNode: undefined })
 
       if (candidateNode.type === CUSTOM_NOTE_NODE)

web/app/components/base/icons/assets/vender/line/arrows/flip-forward.svg

@@ -0,0 +1,65 @@
+import type { FC } from 'react'
+import { memo, useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  RiArrowGoBackLine,
+  RiArrowGoForwardFill,
+} from '@remixicon/react'
+import TipPopup from '../operator/tip-popup'
+import { useWorkflowHistoryStore } from '../workflow-history-store'
+import { useNodesReadOnly } from '@/app/components/workflow/hooks'
+import ViewWorkflowHistory from '@/app/components/workflow/header/view-workflow-history'
+
+export type UndoRedoProps = { handleUndo: () => void; handleRedo: () => void }
+const UndoRedo: FC<UndoRedoProps> = ({ handleUndo, handleRedo }) => {
+  const { t } = useTranslation()
+  const { store } = useWorkflowHistoryStore()
+  const [buttonsDisabled, setButtonsDisabled] = useState({ undo: true, redo: true })
+
+  useEffect(() => {
+    const unsubscribe = store.temporal.subscribe((state) => {
+      setButtonsDisabled({
+        undo: state.pastStates.length === 0,
+        redo: state.futureStates.length === 0,
+      })
+    })
+    return () => unsubscribe()
+  }, [store])
+
+  const { nodesReadOnly } = useNodesReadOnly()
+
+  return (
+    <div className='flex items-center p-0.5 rounded-lg border-[0.5px] border-gray-100 bg-white shadow-lg text-gray-500'>
+      <TipPopup title={t('workflow.common.undo')!} >
+        <div
+          data-tooltip-id='workflow.undo'
+          className={`
+        flex items-center px-1.5 w-8 h-8 rounded-md text-[13px] font-medium 
+        hover:bg-black/5 hover:text-gray-700 cursor-pointer select-none
+        ${(nodesReadOnly || buttonsDisabled.undo) && 'hover:bg-transparent opacity-50 !cursor-not-allowed'}
+      `}
+          onClick={() => !nodesReadOnly && !buttonsDisabled.undo && handleUndo()}
+        >
+          <RiArrowGoBackLine className='h-4 w-4' />
+        </div>
+      </TipPopup>
+      <TipPopup title={t('workflow.common.redo')!} >
+        <div
+          data-tooltip-id='workflow.redo'
+          className={`
+        flex items-center px-1.5 w-8 h-8 rounded-md text-[13px] font-medium 
+        hover:bg-black/5 hover:text-gray-700 cursor-pointer select-none
+        ${(nodesReadOnly || buttonsDisabled.redo) && 'hover:bg-transparent opacity-50 !cursor-not-allowed'}
+      `}
+          onClick={() => !nodesReadOnly && !buttonsDisabled.redo && handleRedo()}
+        >
+          <RiArrowGoForwardFill className='h-4 w-4' />
+        </div>
+      </TipPopup>
+      <div className="mx-[3px] w-[1px] h-3.5 bg-gray-200"></div>
+      <ViewWorkflowHistory />
+    </div>
+  )
+}
+
+export default memo(UndoRedo)