feat: change history by supplementary node information (#25294)

Co-authored-by: alleschen <alleschen@tencent.com>
Co-authored-by: crazywoola <100913391+crazywoola@users.noreply.github.com>

web/app/components/workflow/candidate-node.tsx

       })
       setNodes(newNodes)
       if (candidateNode.type === CUSTOM_NOTE_NODE)
-        saveStateToHistory(WorkflowHistoryEvent.NoteAdd)
+        saveStateToHistory(WorkflowHistoryEvent.NoteAdd, { nodeId: candidateNode.id })
       else
-        saveStateToHistory(WorkflowHistoryEvent.NodeAdd)
+        saveStateToHistory(WorkflowHistoryEvent.NodeAdd, { nodeId: candidateNode.id })
 
       workflowStore.setState({ candidateNode: undefined })
 

web/app/components/workflow/header/view-workflow-history.tsx

 
   const calculateChangeList: ChangeHistoryList = useMemo(() => {
     const filterList = (list: any, startIndex = 0, reverse = false) => list.map((state: Partial<WorkflowHistoryState>, index: number) => {
+      const nodes = (state.nodes || store.getState().nodes) || []
+      const nodeId = state?.workflowHistoryEventMeta?.nodeId
+      const targetTitle = nodes.find(n => n.id === nodeId)?.data?.title ?? ''
       return {
         label: state.workflowHistoryEvent && getHistoryLabel(state.workflowHistoryEvent),
         index: reverse ? list.length - 1 - index - startIndex : index - startIndex,
-        state,
+        state: {
+          ...state,
+          workflowHistoryEventMeta: state.workflowHistoryEventMeta ? {
+            ...state.workflowHistoryEventMeta,
+            nodeTitle: state.workflowHistoryEventMeta.nodeTitle || targetTitle,
+          } : undefined,
+        },
       }
     }).filter(Boolean)
 
     }
   }, [futureStates, getHistoryLabel, pastStates, store])
 
+  const composeHistoryItemLabel = useCallback((nodeTitle: string | undefined, baseLabel: string) => {
+    if (!nodeTitle)
+      return baseLabel
+    return `${nodeTitle} ${baseLabel}`
+  }, [])
+
   return (
     (
       <PortalToFollowElem
                                 'flex items-center text-[13px] font-medium leading-[18px] text-text-secondary',
                               )}
                             >
-                              {item?.label || t('workflow.changeHistory.sessionStart')} ({calculateStepLabel(item?.index)}{item?.index === currentHistoryStateIndex && t('workflow.changeHistory.currentState')})
+                              {composeHistoryItemLabel(
+                                item?.state?.workflowHistoryEventMeta?.nodeTitle,
+                                item?.label || t('workflow.changeHistory.sessionStart'),
+                              )} ({calculateStepLabel(item?.index)}{item?.index === currentHistoryStateIndex && t('workflow.changeHistory.currentState')})
                             </div>
                           </div>
                         </div>
                                 'flex items-center text-[13px] font-medium leading-[18px] text-text-secondary',
                               )}
                             >
-                              {item?.label || t('workflow.changeHistory.sessionStart')} ({calculateStepLabel(item?.index)})
+                              {composeHistoryItemLabel(
+                                item?.state?.workflowHistoryEventMeta?.nodeTitle,
+                                item?.label || t('workflow.changeHistory.sessionStart'),
+                              )} ({calculateStepLabel(item?.index)})
                             </div>
                           </div>
                         </div>

web/app/components/workflow/hooks/use-nodes-interactions.ts

 
       if (x !== 0 && y !== 0) {
         // selecting a note will trigger a drag stop event with x and y as 0
-        saveStateToHistory(WorkflowHistoryEvent.NodeDragStop)
+        saveStateToHistory(WorkflowHistoryEvent.NodeDragStop, { nodeId: node.id })
       }
     }
   }, [workflowStore, getNodesReadOnly, saveStateToHistory, handleSyncWorkflowDraft])
       setEdges(newEdges)
 
       handleSyncWorkflowDraft()
-      saveStateToHistory(WorkflowHistoryEvent.NodeConnect)
+      saveStateToHistory(WorkflowHistoryEvent.NodeConnect, { nodeId: targetNode?.id })
     }
     else {
       const {
     handleSyncWorkflowDraft()
 
     if (currentNode.type === CUSTOM_NOTE_NODE)
-      saveStateToHistory(WorkflowHistoryEvent.NoteDelete)
+      saveStateToHistory(WorkflowHistoryEvent.NoteDelete, { nodeId: currentNode.id })
 
     else
-      saveStateToHistory(WorkflowHistoryEvent.NodeDelete)
+      saveStateToHistory(WorkflowHistoryEvent.NodeDelete, { nodeId: currentNode.id })
   }, [getNodesReadOnly, store, deleteNodeInspectorVars, handleSyncWorkflowDraft, saveStateToHistory, workflowStore, t])
 
   const handleNodeAdd = useCallback<OnNodeAdd>((
       setEdges(newEdges)
     }
     handleSyncWorkflowDraft()
-    saveStateToHistory(WorkflowHistoryEvent.NodeAdd)
+    saveStateToHistory(WorkflowHistoryEvent.NodeAdd, { nodeId: newNode.id })
   }, [getNodesReadOnly, store, t, handleSyncWorkflowDraft, saveStateToHistory, workflowStore, getAfterNodesInSameBranch, checkNestedParallelLimit])
 
   const handleNodeChange = useCallback((
     setEdges(newEdges)
     handleSyncWorkflowDraft()
 
-    saveStateToHistory(WorkflowHistoryEvent.NodeChange)
+    saveStateToHistory(WorkflowHistoryEvent.NodeChange, { nodeId: currentNodeId })
   }, [getNodesReadOnly, store, t, handleSyncWorkflowDraft, saveStateToHistory])
 
   const handleNodesCancelSelected = useCallback(() => {
 
       setNodes([...nodes, ...nodesToPaste])
       setEdges([...edges, ...edgesToPaste])
-      saveStateToHistory(WorkflowHistoryEvent.NodePaste)
+      saveStateToHistory(WorkflowHistoryEvent.NodePaste, { nodeId: nodesToPaste?.[0]?.id })
       handleSyncWorkflowDraft()
     }
   }, [getNodesReadOnly, workflowStore, store, reactflow, saveStateToHistory, handleSyncWorkflowDraft, handleNodeIterationChildrenCopy, handleNodeLoopChildrenCopy])
     })
     setNodes(newNodes)
     handleSyncWorkflowDraft()
-    saveStateToHistory(WorkflowHistoryEvent.NodeResize)
+    saveStateToHistory(WorkflowHistoryEvent.NodeResize, { nodeId })
   }, [getNodesReadOnly, store, handleSyncWorkflowDraft, saveStateToHistory])
 
   const handleNodeDisconnect = useCallback((nodeId: string) => {

web/app/components/workflow/hooks/use-workflow-history.ts

 } from 'reactflow'
 import { useTranslation } from 'react-i18next'
 import { useWorkflowHistoryStore } from '../workflow-history-store'
+import type { WorkflowHistoryEventMeta } from '../workflow-history-store'
 
 /**
  * All supported Events that create a new history state.
   // Some events may be triggered multiple times in a short period of time.
   // We debounce the history state update to avoid creating multiple history states
   // with minimal changes.
-  const saveStateToHistoryRef = useRef(debounce((event: WorkflowHistoryEvent) => {
+  const saveStateToHistoryRef = useRef(debounce((event: WorkflowHistoryEvent, meta?: WorkflowHistoryEventMeta) => {
     workflowHistoryStore.setState({
       workflowHistoryEvent: event,
+      workflowHistoryEventMeta: meta,
       nodes: store.getState().getNodes(),
       edges: store.getState().edges,
     })
   }, 500))
 
-  const saveStateToHistory = useCallback((event: WorkflowHistoryEvent) => {
+  const saveStateToHistory = useCallback((event: WorkflowHistoryEvent, meta?: WorkflowHistoryEventMeta) => {
     switch (event) {
       case WorkflowHistoryEvent.NoteChange:
         // Hint: Note change does not trigger when note text changes,
         // because the note editors have their own history states.
-        saveStateToHistoryRef.current(event)
+        saveStateToHistoryRef.current(event, meta)
         break
       case WorkflowHistoryEvent.NodeTitleChange:
       case WorkflowHistoryEvent.NodeDescriptionChange:
       case WorkflowHistoryEvent.NoteAdd:
       case WorkflowHistoryEvent.LayoutOrganize:
       case WorkflowHistoryEvent.NoteDelete:
-        saveStateToHistoryRef.current(event)
+        saveStateToHistoryRef.current(event, meta)
         break
       default:
         // We do not create a history state for every event.

web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx

 
   const handleTitleBlur = useCallback((title: string) => {
     handleNodeDataUpdateWithSyncDraft({ id, data: { title } })
-    saveStateToHistory(WorkflowHistoryEvent.NodeTitleChange)
+    saveStateToHistory(WorkflowHistoryEvent.NodeTitleChange, { nodeId: id })
   }, [handleNodeDataUpdateWithSyncDraft, id, saveStateToHistory])
   const handleDescriptionChange = useCallback((desc: string) => {
     handleNodeDataUpdateWithSyncDraft({ id, data: { desc } })
-    saveStateToHistory(WorkflowHistoryEvent.NodeDescriptionChange)
+    saveStateToHistory(WorkflowHistoryEvent.NodeDescriptionChange, { nodeId: id })
   }, [handleNodeDataUpdateWithSyncDraft, id, saveStateToHistory])
 
   const isChildNode = !!(data.isInIteration || data.isInLoop)

web/app/components/workflow/note-node/hooks.ts

 
   const handleThemeChange = useCallback((theme: NoteTheme) => {
     handleNodeDataUpdateWithSyncDraft({ id, data: { theme } })
-    saveStateToHistory(WorkflowHistoryEvent.NoteChange)
+    saveStateToHistory(WorkflowHistoryEvent.NoteChange, { nodeId: id })
   }, [handleNodeDataUpdateWithSyncDraft, id, saveStateToHistory])
 
   const handleEditorChange = useCallback((editorState: EditorState) => {
 
   const handleShowAuthorChange = useCallback((showAuthor: boolean) => {
     handleNodeDataUpdateWithSyncDraft({ id, data: { showAuthor } })
-    saveStateToHistory(WorkflowHistoryEvent.NoteChange)
+    saveStateToHistory(WorkflowHistoryEvent.NoteChange, { nodeId: id })
   }, [handleNodeDataUpdateWithSyncDraft, id, saveStateToHistory])
 
   return {

web/app/components/workflow/workflow-history-store.tsx

         setState: (state: WorkflowHistoryState) => {
           store.setState({
             workflowHistoryEvent: state.workflowHistoryEvent,
+            workflowHistoryEventMeta: state.workflowHistoryEventMeta,
             nodes: state.nodes.map((node: Node) => ({ ...node, data: { ...node.data, selected: false } })),
             edges: state.edges.map((edge: Edge) => ({ ...edge, selected: false }) as Edge),
           })
     (set, get) => {
       return {
         workflowHistoryEvent: undefined,
+        workflowHistoryEventMeta: undefined,
         nodes: storeNodes,
         edges: storeEdges,
         getNodes: () => get().nodes,
   nodes: Node[]
   edges: Edge[]
   workflowHistoryEvent: WorkflowHistoryEvent | undefined
+  workflowHistoryEventMeta?: WorkflowHistoryEventMeta
 }
 
 export type WorkflowHistoryActions = {
   edges: Edge[]
   children: ReactNode
 }
+
+export type WorkflowHistoryEventMeta = {
+  nodeId?: string
+  nodeTitle?: string
+}