Feature: Autosave and Undo/Redo #3687

0xi4o · 2024-12-12T02:40:05Z

Implements autosave in chatflow and agentflow canvas
Implements undo/redo functionality in chatflow and agentflow canvas

… first load, autosave clears redo, and sync node triggers autosave

… saving

…e errors in onEdgesChange

…and make undo/redo work

…hanges during undo/redo

HenryHengZJ · 2024-12-21T01:31:27Z

spotted 2 issues:

strange black bar at top when refresh
when open a new flow, it always autosaved first:

autosave.mp4

HenryHengZJ · 2024-12-21T01:33:40Z

Also something we discussed, nodes feel pretty laggy when there are quite a lot

memoization of the nodes and inputs

HenryHengZJ · 2024-12-23T15:40:24Z

2 more bugs:

as i type something and stop for seconds, it goes into autosave right, and it then unfocus the field, so I have to click the field again to make it focus, then i can start typing

autosavebug1.mp4

open a canvas, modify some input field, wait for autosave to happens. now try pressing Ctrl + Z, it doesnt undo. However, it works when I click the Undo button

autosavebug2.mp4

HenryHengZJ · 2024-12-23T15:45:15Z

can play around with the background color of the toolbox in dark mode to see if white or some other dark colors suit better:

0xi4o · 2024-12-23T18:31:30Z

open a canvas, modify some input field, wait for autosave to happens. now try pressing Ctrl + Z, it doesnt undo. However, it works when I click the Undo button
canvas controls styling in dark mode
as i type something and stop for seconds, it goes into autosave right, and it then unfocus the field, so I have to click the field again to make it focus, then i can start typing

…mbers, and code

HenryHengZJ · 2025-01-09T18:40:17Z

1.) Delete node -> wait for autosave -> refresh page. Node still there:

deletenodes.mp4

2.) When click Save on expanded dialog, it doesnt get autosaved:

prompts.mp4

Same when you load prompt from langchain hub:

HenryHengZJ · 2025-01-10T00:27:27Z

packages/ui/src/views/canvas/CredentialInputHandler.jsx

@@ -100,6 +104,7 @@ const CredentialInputHandler = ({ inputParam, data, onSelect, disabled = false }
                        <div key={reloadTimestamp} style={{ display: 'flex', flexDirection: 'row' }}>
                            <AsyncDropdown
                                disabled={disabled}
+                                key={`${data.id}-${inputParam.name}-${data.inputs[credentialId]}`}


why do we need this?

I got error when trying to create a custom assistant:

HenryHengZJ · 2025-01-10T00:30:07Z

packages/ui/src/ui-component/dropdown/AsyncDropdown.jsx

@@ -152,6 +152,7 @@ export const AsyncDropdown = ({
                            )
                        }}
                        sx={{ height: '100%', '& .MuiInputBase-root': { height: '100%' } }}
+                        key={`${nodeData.id}-${name}-${nodeData.inputs[internalValue]}`}


there are other places that uses AsyncDropdown, for example when creating custom assistant. In those cases, there will be no nodeData, then it will throw error:

mahmoudsorf · 2025-01-28T17:48:13Z

This is extremely helpful!

saatchi-david · 2025-01-29T05:28:00Z

A suggestion: it might be helpful to have a toggle to enable/disable autosave.

There are times when I make several changes and later realize I want to revert back to the previously saved version (will usually just refresh). Also times when I might demonstrate a change but not actually want it saved.

Having the ability to turn autosave off in advance would be useful in those kinds of situations.

Office's interface comes to mind:

Implement autosave and undo/redo for chatflow and agentflow

a6d9062

0xi4o marked this pull request as draft December 12, 2024 02:40

0xi4o changed the title ~~Feature: Autosave and Undo/Redo~~ [WIP] Feature: Autosave and Undo/Redo Dec 12, 2024

0xi4o added 21 commits December 12, 2024 14:11

Update saving indicator and show last saved timestamp

718349d

Fix console error on first load

1079c4e

Fix issues in undo/redo - intermediate steps, pre-existing history on…

9110187

… first load, autosave clears redo, and sync node triggers autosave

Fix console errors in configuration and api code dialogs

0188e14

Trigger autosave when deleting nodes/edges and when duplicating nodes

0bbe431

Track chatflow/agentflow name change in undo/redo history

370a6fe

Update autosave indicator text

d0a9890

Handle keyboard shortcuts for undo and redo

63d67ea

Update node actions - remove tooltip and use css to hide/show

e37ae82

Prevent save indicator and autosaved showing for new chatflows before…

9c75040

… saving

Fix onDragNodeStop triggering on clicking inside nodes and fix consol…

4b3d50b

…e errors in onEdgesChange

Trigger SET_DIRTY and SET_CHATFLOW when node inputs data changes

43bb823

Fix issue where exiting canvas doesn't clear canvas data and history

e63f625

Fix issue with undo/redo keybindings not working

baaf56b

Fix undo/redo not updating input fields in nodes

4623387

Detect changes in additional params and format prompt values dialogs …

6aa1ce0

…and make undo/redo work

Fix autosave on dropping nodes into the canvas

7a0f3f4

Highlight condition dialog button if inputs inside condition dialog c…

0825738

…hanges during undo/redo

Enable redux devtools extension with tracing

9c0a6e4

Update reactflow controls styles in marketplace canvas

73c211a

Fix conflicts

8478285

0xi4o marked this pull request as ready for review December 20, 2024 10:53

0xi4o changed the title ~~[WIP] Feature: Autosave and Undo/Redo~~ Feature: Autosave and Undo/Redo Dec 20, 2024

0xi4o added 2 commits December 23, 2024 12:20

Update add nodes and sync versions buttons

d1afba7

Optimize add nodes component

4368ca0

0xi4o added 4 commits December 23, 2024 19:41

Avoid autosave on initial load

f20d136

Go to agentflows page when pressing back in agent canvas

6d06392

Memoize canvas node and sticky note components

1b43638

Fix conflicts

1ac0b0b

Update styles for controls in flow and marketplace canvas

8350552

Trigger autosave only on blur for input fields - string, password, nu…

edff7a8

…mbers, and code

HenryHengZJ reviewed Jan 10, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feature: Autosave and Undo/Redo #3687

Feature: Autosave and Undo/Redo #3687

0xi4o commented Dec 12, 2024

HenryHengZJ commented Dec 21, 2024 •

edited

Loading

HenryHengZJ commented Dec 21, 2024 •

edited

Loading

HenryHengZJ commented Dec 23, 2024

HenryHengZJ commented Dec 23, 2024

0xi4o commented Dec 23, 2024 •

edited

Loading

HenryHengZJ commented Jan 9, 2025 •

edited

Loading

HenryHengZJ Jan 10, 2025

HenryHengZJ Jan 10, 2025

mahmoudsorf commented Jan 28, 2025

saatchi-david commented Jan 29, 2025

Feature: Autosave and Undo/Redo #3687

Are you sure you want to change the base?

Feature: Autosave and Undo/Redo #3687

Conversation

0xi4o commented Dec 12, 2024

HenryHengZJ commented Dec 21, 2024 • edited Loading

HenryHengZJ commented Dec 21, 2024 • edited Loading

HenryHengZJ commented Dec 23, 2024

HenryHengZJ commented Dec 23, 2024

0xi4o commented Dec 23, 2024 • edited Loading

HenryHengZJ commented Jan 9, 2025 • edited Loading

HenryHengZJ Jan 10, 2025

Choose a reason for hiding this comment

HenryHengZJ Jan 10, 2025

Choose a reason for hiding this comment

mahmoudsorf commented Jan 28, 2025

saatchi-david commented Jan 29, 2025

HenryHengZJ commented Dec 21, 2024 •

edited

Loading

HenryHengZJ commented Dec 21, 2024 •

edited

Loading

0xi4o commented Dec 23, 2024 •

edited

Loading

HenryHengZJ commented Jan 9, 2025 •

edited

Loading