Implementation:Infiniflow Ragflow UseAgentHistoryManager

Knowledge Sources	Infiniflow_Ragflow
Domains	Frontend, Agent_System, Undo_Redo
Last Updated	2026-02-12 06:00 GMT

Overview

Undo/redo history manager for the agent canvas tracking graph state snapshots.

Description

This module provides a `HistoryManager` class and a `useAgentHistoryManager` React hook that together implement undo/redo functionality for the agent canvas. The `HistoryManager` class maintains an array of serialized graph state snapshots (nodes and edges), capped at 50 entries. It performs deep equality checks via JSON serialization to avoid storing duplicate states, supports branching history (truncates future states on new push after undo), and provides `undo()`, `redo()`, `canUndo()`, `canRedo()`, and `reset()` methods. The `useAgentHistoryManager` hook wires the manager to the Zustand graph store via `useRef` for instance stability, auto-pushes state on nodes/edges changes via `useEffect`, and registers global keyboard listeners for Ctrl+Z (undo) and Ctrl+Shift+Z (redo) while skipping shortcuts when input elements are focused.

Usage

Invoked once at the agent canvas page level to enable undo/redo for all graph editing operations. The hook automatically tracks all node and edge changes without requiring explicit save calls from other components.

Code Reference

Source Location

• Repository: Infiniflow_Ragflow
• File: web/src/pages/agent/use-agent-history-manager.ts
• Lines: 1-163

Signature

export class HistoryManager {
  constructor(
    setNodes: (nodes: any[]) => void,
    setEdges: (edges: any[]) => void
  );
  push(nodes: any[], edges: any[]): void;
  undo(): boolean;
  redo(): boolean;
  canUndo(): boolean;
  canRedo(): boolean;
  reset(): void;
}

export const useAgentHistoryManager: () => void;

Import

import { useAgentHistoryManager, HistoryManager } from '@/pages/agent/use-agent-history-manager';

I/O Contract

Inputs

Name	Type	Required	Description
setNodes	(nodes: any[]) => void	Yes (HistoryManager constructor)	Callback to update nodes in the graph store when undoing/redoing.
setEdges	(edges: any[]) => void	Yes (HistoryManager constructor)	Callback to update edges in the graph store when undoing/redoing.

Outputs

Name	Type	Description
void	void	The useAgentHistoryManager hook returns nothing; it operates via side effects (keyboard listeners and automatic state tracking).
boolean	boolean	undo() and redo() return true if the operation was performed, false if at history boundary.

Usage Examples

import { useAgentHistoryManager } from '@/pages/agent/use-agent-history-manager';

function AgentCanvasPage() {
  // Enable undo/redo for the entire canvas session
  useAgentHistoryManager();

  return (
    <div>
      {/* Canvas components - Ctrl+Z and Ctrl+Shift+Z are now active */}
    </div>
  );
}

Related Pages

• Environment:Infiniflow_Ragflow_Frontend_Node_Environment