feat: undo/redo for workflow editor

[perzeuss]

Description

This resolves #3911 by introducing zundo to create a zustand store for creating a history over changs in the workflow editor. The workflow store as well as the reactflow store remain untouched.

UI Elements

Buttons are added to the UI for both Workflow and Chatflow Editor:

Change History

I also added a way to see all changes and navigate through the history.

Translations

I provided translations for all currently supported languages. However, apart from EN and DE, I had all translations generated by AI.

Keyboard Shortcuts

Common keyboard shortcuts are also supported.

• Undo

  • Windows/Linux: Ctrl + Z
  • macOS: Cmd + Z

• Redo

  • Windows/Linux: Ctrl + Y or Ctrl + Shift + Z
  • macOS: Cmd + Shift + Z or Cmd + Y

Current Limitations

• InputChange events in Node Panels do not trigger state changes.
• This is an issue we need to adress since it also affects the sync workflow darft feature
• Resizing UI elements does not trigger state changes.
• But I think we can ignore them anyway

Type of Change

• [x] New feature (non-breaking change which adds functionality)
• [x] This change requires a documentation update, included: Dify Document
• We might want to add documentation about the limitations
• We might want to document this feature incl. keyboard shortcuts

How Has This Been Tested?

I recorded a video of manual testing. https://github.com/langgenius/dify/assets/11357019/4045181b-3b49-4a10-a15e-5e5c3ca518f3

Suggested Checklist:

• [x] I have performed a self-review of my own code
• [x] I have commented my code, particularly in hard-to-understand areas
• [x] My changes generate no new warnings
• [x] I ran dev/reformat(backend) and cd web && npx lint-staged(frontend) to appease the lint gods
• [ ] optional I have made corresponding changes to the documentation

[perzeuss]

We could update the screenshots to keep the docs updated, but I don't have access to the workflows used to make them: https://docs.dify.ai/features/workflow?

[perzeuss]

@zxhlyh @crazywoola ready for review

[zxhlyh]

Adding first block in an iteration will not be recorded in the history.

[perzeuss]

Adding first block in an iteration will not be recorded in the history.

fixed

[zxhlyh]

Can we add some disabled style when history state is empty?

[perzeuss]

Can we add some disabled style when history state is empty?

Yes, I will do it later today.

[zxhlyh]

The last change. Our product manager said to try to include the action of organizing nodes in the undo and redo functionality as well.

[perzeuss]

The last change. Our product manager said to try to include the action of organizing nodes in the undo and redo functionality as well.

I added it, but to keep it simple I reused "Block moved" instead of introducing "Bocks organized".