Implementation:Infiniflow Ragflow SetMetaDialog Component

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

Overview

Dialog with Monaco editor for viewing and editing document metadata as JSON with Zod validation.

Description

SetMetaDialog renders a modal with a Monaco code editor (@monaco-editor/react) configured for JSON with dark theme. The form uses react-hook-form with a Zod schema that validates the meta field is a non-empty, valid JSON string via a custom refine that wraps JSON.parse in a try-catch. The initial value is set from initialMetaData via JSON.stringify with 4-space indentation. The tooltip for the form label is sanitized with DOMPurify. On submit, the raw JSON string is passed to onOk, and the modal closes on success.

Usage

Opened from the dataset document table to allow users to manually edit the JSON metadata fields of a specific document.

Code Reference

Source Location

• Repository: Infiniflow_Ragflow
• File: web/src/pages/dataset/dataset/set-meta-dialog.tsx
• Lines: 1-128

Signature

export function SetMetaDialog({
  hideModal, onOk, loading, initialMetaData,
}: IModalProps<any> & { initialMetaData?: IDocumentInfo['meta_fields'] }): JSX.Element;

Import

import { SetMetaDialog } from './set-meta-dialog';

I/O Contract

Inputs

Name	Type	Required	Description
hideModal	function	No	Close dialog callback
onOk	function	No	Submit callback receiving JSON string
loading	boolean	No	Loading state for submit button
initialMetaData	object	No	Initial metadata object to populate editor

Outputs

Name	Type	Description
JSX.Element	React element	Dialog with Monaco JSON editor and save button

Usage Examples

<SetMetaDialog
  hideModal={closeDialog}
  onOk={saveMeta}
  loading={saving}
  initialMetaData={document.meta_fields}
/>

Related Pages

• Environment:Infiniflow_Ragflow_Frontend_Node_Environment