Implementation:Infiniflow Ragflow UseImportJson Hook

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

Overview

Hook for importing agent workflows from JSON files with type detection and validation.

Description

This hook provides the complete flow for importing an agent workflow from a JSON file upload. It manages the file upload modal visibility state, validates that the uploaded file has a JSON MIME type, parses the JSON content, and auto-detects whether the imported workflow is an Agent canvas or a Dataflow pipeline by checking for the presence of `Begin` and `Parser` nodes. The hook constructs the appropriate DSL structure (`EmptyDsl` for agents, `DataflowEmptyDsl` for pipelines), preserves optional `globals` and `variables` from the import, and creates the agent via the `useSetAgent` mutation. It supports both the current DSL format (with a `graph` property) and older formats where the graph is the top-level object.

Usage

Used on the agents list page to provide a "Import JSON" action. The hook returns modal state controls and the file upload callback, which are wired to an upload dialog component.

Code Reference

Source Location

• Repository: Infiniflow_Ragflow
• File: web/src/pages/agents/use-import-json.ts
• Lines: 1-95

Signature

export const useHandleImportJsonFile: () => {
  fileUploadVisible: boolean;
  handleImportJson: () => void;
  hideFileUploadModal: () => void;
  onFileUploadOk: (data: { fileList: File[]; name: string }) => Promise<void>;
  loading: boolean;
};

Import

import { useHandleImportJsonFile } from '@/pages/agents/use-import-json';

I/O Contract

Inputs

Name	Type	Required	Description
(none)	N/A	N/A	The hook takes no parameters; it internally uses useSetAgent and useSetModalState.

Outputs

Name	Type	Description
fileUploadVisible	boolean	Whether the file upload modal is currently visible.
handleImportJson	() => void	Callback to show the file upload modal.
hideFileUploadModal	() => void	Callback to hide the file upload modal.
onFileUploadOk	(data: FormSchemaType) => Promise<void>	Async callback for processing the uploaded JSON file: validates type, parses content, detects agent vs pipeline, and creates the agent.
loading	boolean	Whether the agent creation request is in progress.

Usage Examples

import { useHandleImportJsonFile } from '@/pages/agents/use-import-json';

function AgentsListPage() {
  const {
    fileUploadVisible,
    handleImportJson,
    hideFileUploadModal,
    onFileUploadOk,
    loading,
  } = useHandleImportJsonFile();

  return (
    <>
      <Button onClick={handleImportJson}>Import JSON</Button>
      {fileUploadVisible && (
        <UploadAgentDialog
          visible={fileUploadVisible}
          hideModal={hideFileUploadModal}
          onOk={onFileUploadOk}
          loading={loading}
        />
      )}
    </>
  );
}

Related Pages

• Environment:Infiniflow_Ragflow_Frontend_Node_Environment