Implementation:Infiniflow Ragflow TagFeatureItem Component
| Knowledge Sources | |
|---|---|
| Domains | Frontend, Chunk_Management |
| Last Updated | 2026-02-12 06:00 GMT |
Overview
Concrete React component that provides a dynamic field array for managing tag feature entries with filtered select options and frequency inputs.
Description
The TagFeatureItem component renders a dynamic list of tag-frequency pairs within the chunk creation/editing modal. It uses react-hook-form's useFieldArray to manage add/remove operations on the tag_feas field. Tag options are fetched via useFetchTagListByKnowledgeIds based on configured tag knowledge base IDs. Each row's select dropdown filters out tags already selected in other rows to prevent duplicates. Each entry consists of a searchable select for the tag name and a bounded numeric input (0-10) for frequency.
Usage
Embedded within ChunkCreatingModal when the document parser is not the "tag" parser type. Wrapped in a FormProvider context from react-hook-form.
Code Reference
Source Location
- Repository: Infiniflow_Ragflow
- File: web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/chunk-creating-modal/tag-feature-item.tsx
- Lines: 1-138
Signature
export const TagFeatureItem: React.FC;
// Uses useFormContext() internally - must be wrapped in FormProvider
// Operates on field key 'tag_feas' with shape { tag: string; frequency: number }[]
Import
import { TagFeatureItem } from './tag-feature-item';
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| (FormContext) | useFormContext | Yes | Requires parent FormProvider with 'tag_feas' field array |
Outputs
| Name | Type | Description |
|---|---|---|
| FormField JSX | ReactNode | Dynamic list of tag select + frequency input rows with add/remove controls |
Usage Examples
import { FormProvider, useForm } from 'react-hook-form';
import { TagFeatureItem } from './tag-feature-item';
function ChunkForm() {
const form = useForm({ defaultValues: { tag_feas: [] } });
return (
<FormProvider {...form}>
<TagFeatureItem />
</FormProvider>
);
}