From ac2aa967c4a748598375cefeb376427b98addec4 Mon Sep 17 00:00:00 2001 From: XiamuSanhua <91169172+AllesOderNicht@users.noreply.github.com> Date: Tue, 9 Sep 2025 15:18:42 +0800 Subject: [PATCH] feat: change history by supplementary node information (#25294) Co-authored-by: alleschen Co-authored-by: crazywoola <100913391+crazywoola@users.noreply.github.com> --- .../components/workflow/candidate-node.tsx | 4 +-- .../workflow/header/view-workflow-history.tsx | 27 ++++++++++++++++--- .../workflow/hooks/use-nodes-interactions.ts | 16 +++++------ .../workflow/hooks/use-workflow-history.ts | 10 ++++--- .../_base/components/workflow-panel/index.tsx | 4 +-- .../components/workflow/note-node/hooks.ts | 4 +-- .../workflow/workflow-history-store.tsx | 8 ++++++ 7 files changed, 52 insertions(+), 21 deletions(-) diff --git a/web/app/components/workflow/candidate-node.tsx b/web/app/components/workflow/candidate-node.tsx index eb59a4618c..35bcd5c201 100644 --- a/web/app/components/workflow/candidate-node.tsx +++ b/web/app/components/workflow/candidate-node.tsx @@ -62,9 +62,9 @@ const CandidateNode = () => { }) 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 }) diff --git a/web/app/components/workflow/header/view-workflow-history.tsx b/web/app/components/workflow/header/view-workflow-history.tsx index 5c31677f5e..42afd18d25 100644 --- a/web/app/components/workflow/header/view-workflow-history.tsx +++ b/web/app/components/workflow/header/view-workflow-history.tsx @@ -89,10 +89,19 @@ const ViewWorkflowHistory = () => { const calculateChangeList: ChangeHistoryList = useMemo(() => { const filterList = (list: any, startIndex = 0, reverse = false) => list.map((state: Partial, 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) @@ -110,6 +119,12 @@ const ViewWorkflowHistory = () => { } }, [futureStates, getHistoryLabel, pastStates, store]) + const composeHistoryItemLabel = useCallback((nodeTitle: string | undefined, baseLabel: string) => { + if (!nodeTitle) + return baseLabel + return `${nodeTitle} ${baseLabel}` + }, []) + return ( ( { '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')}) @@ -222,7 +240,10 @@ const ViewWorkflowHistory = () => { '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)}) diff --git a/web/app/components/workflow/hooks/use-nodes-interactions.ts b/web/app/components/workflow/hooks/use-nodes-interactions.ts index 7046d1a93a..60549c870e 100644 --- a/web/app/components/workflow/hooks/use-nodes-interactions.ts +++ b/web/app/components/workflow/hooks/use-nodes-interactions.ts @@ -174,7 +174,7 @@ export const useNodesInteractions = () => { 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]) @@ -423,7 +423,7 @@ export const useNodesInteractions = () => { setEdges(newEdges) handleSyncWorkflowDraft() - saveStateToHistory(WorkflowHistoryEvent.NodeConnect) + saveStateToHistory(WorkflowHistoryEvent.NodeConnect, { nodeId: targetNode?.id }) } else { const { @@ -659,10 +659,10 @@ export const useNodesInteractions = () => { 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(( @@ -1100,7 +1100,7 @@ export const useNodesInteractions = () => { setEdges(newEdges) } handleSyncWorkflowDraft() - saveStateToHistory(WorkflowHistoryEvent.NodeAdd) + saveStateToHistory(WorkflowHistoryEvent.NodeAdd, { nodeId: newNode.id }) }, [getNodesReadOnly, store, t, handleSyncWorkflowDraft, saveStateToHistory, workflowStore, getAfterNodesInSameBranch, checkNestedParallelLimit]) const handleNodeChange = useCallback(( @@ -1182,7 +1182,7 @@ export const useNodesInteractions = () => { setEdges(newEdges) handleSyncWorkflowDraft() - saveStateToHistory(WorkflowHistoryEvent.NodeChange) + saveStateToHistory(WorkflowHistoryEvent.NodeChange, { nodeId: currentNodeId }) }, [getNodesReadOnly, store, t, handleSyncWorkflowDraft, saveStateToHistory]) const handleNodesCancelSelected = useCallback(() => { @@ -1404,7 +1404,7 @@ export const useNodesInteractions = () => { 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]) @@ -1501,7 +1501,7 @@ export const useNodesInteractions = () => { }) setNodes(newNodes) handleSyncWorkflowDraft() - saveStateToHistory(WorkflowHistoryEvent.NodeResize) + saveStateToHistory(WorkflowHistoryEvent.NodeResize, { nodeId }) }, [getNodesReadOnly, store, handleSyncWorkflowDraft, saveStateToHistory]) const handleNodeDisconnect = useCallback((nodeId: string) => { diff --git a/web/app/components/workflow/hooks/use-workflow-history.ts b/web/app/components/workflow/hooks/use-workflow-history.ts index 592c0b01cd..b7338dc4f8 100644 --- a/web/app/components/workflow/hooks/use-workflow-history.ts +++ b/web/app/components/workflow/hooks/use-workflow-history.ts @@ -8,6 +8,7 @@ import { } 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. @@ -64,20 +65,21 @@ export const useWorkflowHistory = () => { // 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: @@ -93,7 +95,7 @@ export const useWorkflowHistory = () => { 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. diff --git a/web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx b/web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx index 3594b8fdbc..a5bf1befbd 100644 --- a/web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx +++ b/web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx @@ -154,11 +154,11 @@ const BasePanel: FC = ({ 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) diff --git a/web/app/components/workflow/note-node/hooks.ts b/web/app/components/workflow/note-node/hooks.ts index 04e8081692..29642f90df 100644 --- a/web/app/components/workflow/note-node/hooks.ts +++ b/web/app/components/workflow/note-node/hooks.ts @@ -9,7 +9,7 @@ export const useNote = (id: string) => { 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) => { @@ -21,7 +21,7 @@ export const useNote = (id: string) => { const handleShowAuthorChange = useCallback((showAuthor: boolean) => { handleNodeDataUpdateWithSyncDraft({ id, data: { showAuthor } }) - saveStateToHistory(WorkflowHistoryEvent.NoteChange) + saveStateToHistory(WorkflowHistoryEvent.NoteChange, { nodeId: id }) }, [handleNodeDataUpdateWithSyncDraft, id, saveStateToHistory]) return { diff --git a/web/app/components/workflow/workflow-history-store.tsx b/web/app/components/workflow/workflow-history-store.tsx index 52132f3657..c250708177 100644 --- a/web/app/components/workflow/workflow-history-store.tsx +++ b/web/app/components/workflow/workflow-history-store.tsx @@ -51,6 +51,7 @@ export function useWorkflowHistoryStore() { 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), }) @@ -76,6 +77,7 @@ function createStore({ (set, get) => { return { workflowHistoryEvent: undefined, + workflowHistoryEventMeta: undefined, nodes: storeNodes, edges: storeEdges, getNodes: () => get().nodes, @@ -97,6 +99,7 @@ export type WorkflowHistoryStore = { nodes: Node[] edges: Edge[] workflowHistoryEvent: WorkflowHistoryEvent | undefined + workflowHistoryEventMeta?: WorkflowHistoryEventMeta } export type WorkflowHistoryActions = { @@ -119,3 +122,8 @@ export type WorkflowWithHistoryProviderProps = { edges: Edge[] children: ReactNode } + +export type WorkflowHistoryEventMeta = { + nodeId?: string + nodeTitle?: string +}