Implementation:Infiniflow Ragflow Agent Hooks

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

Overview

React hooks for agent canvas including graph state management, cycle detection algorithm, and node/edge manipulation.

Description

This module provides a collection of React hooks that serve as the primary interface between the agent canvas UI components and the underlying Zustand graph store. Key hooks include `useSelectCanvasData` for selecting reactive graph state (nodes, edges, change handlers), `useHandleDrag` for operator palette drag-and-drop, `useValidateConnection` which implements a cycle detection algorithm using depth-first search via `getOutgoers` to prevent circular graph connections, `useHandleFormValuesChange` for syncing operator form state with the graph store, `useReplaceIdWithName` for resolving node IDs to display names, `useDuplicateNode` for cloning nodes, and `useCopyPaste` for clipboard-based node duplication.

Usage

Used by agent canvas page components and operator form components to interact with the graph state. The `useSelectCanvasData` hook is consumed by the main canvas component, `useValidateConnection` is passed to ReactFlow's connection validation, and `useHandleFormValuesChange` is used in every operator configuration form.

Code Reference

Source Location

• Repository: Infiniflow_Ragflow
• File: web/src/pages/agent/hooks.tsx
• Lines: 1-274

Signature

export const useSelectCanvasData: () => {
  nodes: Node[];
  edges: Edge[];
  onNodesChange: Function;
  onEdgesChange: Function;
  onConnect: Function;
  setNodes: Function;
  onSelectionChange: Function;
  onEdgeMouseEnter: Function;
  onEdgeMouseLeave: Function;
};
export const useHandleDrag: () => {
  handleDragStart: (operatorId: string) => (ev: React.DragEvent<HTMLDivElement>) => void;
};
export const useGetNodeName: () => (type: string) => string;
export const useHandleFormValuesChange: (
  operatorName: Operator,
  id?: string,
  form?: UseFormReturn
) => { handleValuesChange: (changedValues: any, values: any) => void };
export const useValidateConnection: () => (connection: Connection | Edge) => boolean;
export const useReplaceIdWithName: () => (id?: string) => string | undefined;
export const useReplaceIdWithText: (output: unknown) => {
  replacedOutput: unknown;
  getNameById: (id?: string) => string | undefined;
};
export const useDuplicateNode: () => (id: string, label: string) => void;
export const useCopyPaste: () => void;

Import

import {
  useSelectCanvasData,
  useHandleDrag,
  useValidateConnection,
  useHandleFormValuesChange,
  useCopyPaste,
} from '@/pages/agent/hooks';

I/O Contract

Inputs

Name	Type	Required	Description
operatorName	Operator	Yes (useHandleFormValuesChange)	The operator type enum value for form value change handling.
id	string	No	The node ID to bind form changes to in the graph store.
form	UseFormReturn	No	React Hook Form instance to watch for value changes.
output	unknown	Yes (useReplaceIdWithText)	Raw output data containing node IDs to be replaced with display names.

Outputs

Name	Type	Description
useSelectCanvasData return	Object	Reactive graph state object with nodes, edges, and all change handlers.
useValidateConnection return	Function	Connection validator function that checks self-connection, restricted upstream rules, parent scope, and cycle detection.
useHandleFormValuesChange return	Object	Contains handleValuesChange callback that syncs form state to the graph store.
useDuplicateNode return	Function	Callback to duplicate a node by ID with a translated label.

Usage Examples

import { useSelectCanvasData, useValidateConnection } from '@/pages/agent/hooks';

function AgentCanvas() {
  const { nodes, edges, onNodesChange, onEdgesChange, onConnect } = useSelectCanvasData();
  const isValidConnection = useValidateConnection();

  return (
    <ReactFlow
      nodes={nodes}
      edges={edges}
      onNodesChange={onNodesChange}
      onEdgesChange={onEdgesChange}
      onConnect={onConnect}
      isValidConnection={isValidConnection}
    />
  );
}

Related Pages

• Environment:Infiniflow_Ragflow_Frontend_Node_Environment