Refactor: Replace ThunkAction with CompositeAction and Enhance State Management in GraphProvider

app/(playground)/p/[agentId]/beta-proto/flow/composite-actions.ts

@@ -1,13 +1,13 @@
 import type { GiselleNode } from "../giselle-node/types";
-import type { ThunkAction } from "../graph/context";
+import type { CompositeAction } from "../graph/context";
 import { playgroundModes } from "../graph/types";
 import { updateMode } from "../graph/v2/mode";
 import { setFlow } from "./action";
 import { runAction } from "./server-action";
 import { flowStatuses } from "./types";
 import { createFlowActionId, createFlowId, resolveActionLayers } from "./utils";
 
-export function runFlow(finalNode: GiselleNode): ThunkAction {
+export function runFlow(finalNode: GiselleNode): CompositeAction {
 	return async (dispatch, getState) => {
 		const state = getState();
 		dispatch(

app/(playground)/p/[agentId]/beta-proto/giselle-node/components/panel/prompt.tsx

@@ -23,7 +23,7 @@ import {
 	updateNodeProperty,
 	updateNodesUI,
 } from "../../../graph/actions";
-import { type ThunkAction, useGraph } from "../../../graph/context";
+import { type CompositeAction, useGraph } from "../../../graph/context";
 import type {
 	TextContent,
 	TextContentReference,
@@ -44,7 +44,7 @@ import { Block } from "./block";
 function setTextToPropertyAndOutput(
 	nodeId: GiselleNodeId,
 	text: string,
-): ThunkAction {
+): CompositeAction {
 	return (dispatch) => {
 		dispatch(
 			updateNodeProperty({

app/(playground)/p/[agentId]/beta-proto/graph/actions.ts

@@ -51,7 +51,7 @@ import {
 	webSearchItemStatus,
 	webSearchStatus,
 } from "../web-search/types";
-import type { ThunkAction } from "./context";
+import type { CompositeAction } from "./context";
 import {
 	generateArtifactStream,
 	parseFile,
@@ -171,7 +171,7 @@ type AddNodesAndConnectArgs = {
 };
 export const addNodesAndConnect = (
 	args: AddNodesAndConnectArgs,
-): ThunkAction => {
+): CompositeAction => {
 	return (dispatch, getState) => {
 		const state = getState();
 		const hasFinalNode = state.graph.nodes.some((node) => node.isFinal);
@@ -268,7 +268,7 @@ export const selectNodeAndSetPanelTab = (args: {
 		id: GiselleNodeId;
 		panelTab: PanelTab;
 	};
-}): ThunkAction => {
+}): CompositeAction => {
 	return (dispatch) => {
 		dispatch(
 			selectNode({
@@ -469,7 +469,7 @@ export const removeArtifact = (
 };
 
 export const generateText =
-	(args: GenerateTextArgs): ThunkAction =>
+	(args: GenerateTextArgs): CompositeAction =>
 	async (dispatch, getState) => {
 		dispatch(
 			setNodeOutput({
@@ -815,7 +815,7 @@ type AddSourceToPromptNodeArgs = {
 };
 export function addSourceToPromptNode(
 	args: AddSourceToPromptNodeArgs,
-): ThunkAction {
+): CompositeAction {
 	return async (dispatch, getState) => {
 		const state = getState();
 		const targetPromptNode = state.graph.nodes.find(
@@ -1053,7 +1053,7 @@ type RemoveSourceFromPromptNodeArgs = {
 };
 export function removeSourceFromPromptNode(
 	args: RemoveSourceFromPromptNodeArgs,
-): ThunkAction {
+): CompositeAction {
 	return (dispatch, getState) => {
 		const state = getState();
 		const targetNode = state.graph.nodes.find(
@@ -1233,7 +1233,7 @@ export function removeNode(args: RemoveNodeArgs): RemoveNodeAction {
 	};
 }
 
-export function removeSelectedNodesOrFeedback(): ThunkAction {
+export function removeSelectedNodesOrFeedback(): CompositeAction {
 	return (dispatch, getState) => {
 		const state = getState();
 		const selectedNodes = state.graph.nodes.filter((node) => node.ui.selected);

app/(playground)/p/[agentId]/beta-proto/graph/context.ts

@@ -2,11 +2,11 @@ import { createContext, useContext } from "react";
 import type { GraphAction } from "./actions";
 import type { GraphState } from "./types";
 
-export type ThunkAction = (
+export type CompositeAction = (
 	dispatch: EnhancedDispatch,
 	getState: () => GraphState,
 ) => void | Promise<void>;
-export type EnhancedDispatch = (action: GraphAction | ThunkAction) => void;
+export type EnhancedDispatch = (action: GraphAction | CompositeAction) => void;
 export type GraphContext = {
 	state: GraphState;
 	dispatch: EnhancedDispatch;

app/(playground)/p/[agentId]/beta-proto/graph/provider.tsx

@@ -31,33 +31,37 @@ export const GraphProvider: FC<PropsWithChildren<GraphProviderProps>> = ({
 	agentId,
 	defaultGraph,
 }) => {
-	const [state, originalDispatch] = useReducer(graphReducer, {
+	const [originalState, originalDispatch] = useReducer(graphReducer, {
 		graph: defaultGraph,
 	});
 	const isInitialMount = useRef(true);
+	const stateRef = useRef(originalState);
+
+	useEffect(() => {
+		stateRef.current = originalState;
+	}, [originalState]);
 
 	const deboucedSetGraphToDb = useDebounce(async (graph: Graph) => {
 		setGraphToDb(agentId, graph);
 	}, 500);
-	const enhancedDispatch: EnhancedDispatch = useCallback(
-		async (action) => {
-			if (typeof action === "function") {
-				await action(enhancedDispatch, () => state);
-			} else {
-				originalDispatch(action);
-			}
-		},
-		[state],
-	);
+	const enhancedDispatch: EnhancedDispatch = useCallback(async (action) => {
+		if (typeof action === "function") {
+			await action(enhancedDispatch, () => stateRef.current);
+		} else {
+			originalDispatch(action);
+		}
+	}, []);
 	useEffect(() => {
 		if (isInitialMount.current) {
 			isInitialMount.current = false;
 		} else {
-			deboucedSetGraphToDb(state.graph);
+			deboucedSetGraphToDb(originalState.graph);
 		}
-	}, [state, deboucedSetGraphToDb]);
+	}, [originalState, deboucedSetGraphToDb]);
 	return (
-		<GraphContext.Provider value={{ state, dispatch: enhancedDispatch }}>
+		<GraphContext.Provider
+			value={{ state: originalState, dispatch: enhancedDispatch }}
+		>
 			{children}
 		</GraphContext.Provider>
 	);