Implementation:Infiniflow Ragflow DatasetCommonItem Component

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

Overview

Concrete common configuration form item components shared across parser types provided by the RAGFlow frontend.

Description

The common-item module exports a collection of reusable form field components for dataset configuration: `ChunkMethodItem` (parser selector), `EmbeddingModelItem` / `EmbeddingSelect` (embedding model picker with live change handling), `ParseTypeItem` (built-in vs manual radio), `EnableAutoGenerateItem` (auto-generate toggle), `EnableTocToggle`, `ImageContextWindow` (slider), `OverlappedPercent`, `AutoMetadata` (metadata settings with modal), `LLMModelItem` / `LLMSelect` (LLM model picker). Each integrates with `react-hook-form` via `useFormContext`.

Usage

Import individual named exports and embed them within a `react-hook-form` `FormProvider` context on dataset setting pages. The `isEdit` and `line` props control layout and behavior variations.

Code Reference

Source Location

• Repository: Infiniflow_Ragflow
• File: web/src/pages/dataset/dataset-setting/configuration/common-item.tsx
• Lines: 1-583

Signature

export function ChunkMethodItem(props: { line?: 1 | 2; isEdit?: boolean; label?: string; name?: string }): JSX.Element;
export const EmbeddingSelect: FC<{ isEdit: boolean; field: FieldValues; name?: string; disabled?: boolean }>;
export function EmbeddingModelItem({ line, isEdit }: IProps): JSX.Element;
export function ParseTypeItem({ line }: { line?: number }): JSX.Element;
export function EnableAutoGenerateItem(): JSX.Element;
export function EnableTocToggle(): JSX.Element;
export function ImageContextWindow(): JSX.Element;
export function OverlappedPercent(): JSX.Element;
export function AutoMetadata({ type, otherData }: { type?: MetadataType; otherData?: Record<string, any> }): JSX.Element;
export const LLMSelect: FC<{ isEdit: boolean; field: FieldValues; name?: string; disabled?: boolean }>;
export function LLMModelItem({ line, isEdit, label, name }: IProps): JSX.Element;

Import

import {
  ChunkMethodItem,
  EmbeddingModelItem,
  AutoMetadata,
  LLMModelItem,
} from '@/pages/dataset/dataset-setting/configuration/common-item';

I/O Contract

Inputs

Name	Type	Required	Description
line	1 or 2	No	Layout mode: 1 = horizontal (label + input inline), 2 = vertical (stacked)
isEdit	boolean	No	Whether the form is in edit mode (enables live-save behavior for embedding changes)
label	string	No	Custom label override for form fields
name	string	No	Custom form field name override

Outputs

Name	Type	Description
JSX.Element	React.ReactElement	Renders a FormField item that reads/writes values through react-hook-form context

Usage Examples

import { ChunkMethodItem, EmbeddingModelItem, AutoMetadata } from '@/pages/dataset/dataset-setting/configuration/common-item';

<FormProvider {...form}>
  <ChunkMethodItem line={1} />
  <EmbeddingModelItem line={1} isEdit={true} />
  <AutoMetadata type={MetadataType.Setting} />
</FormProvider>

Related Pages

• Environment:Infiniflow_Ragflow_Frontend_Node_Environment