Implementation:Infiniflow Ragflow TagItem Component

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

Overview

Knowledge base multi-select component with slider configuration for tag-based parser settings.

Description

This module exports three components. TagSetItem renders a MultiSelect form field bound to parser_config.tag_kb_ids, populated with knowledge bases filtered to parser_id tag via useFetchKnowledgeList. Each option displays a RAGFlowAvatar. TopNTagsItem renders a SliderInputFormField bound to parser_config.topn_tags (range 1-10, default 3). TagItems is the parent that conditionally renders TopNTagsItem only when tag KB IDs are selected (watched via useWatch). Tooltips are sanitized with DOMPurify.

Usage

Rendered within the dataset general form and tag parser configuration to let users select tag knowledge bases and configure the top-N tags parameter.

Code Reference

Source Location

• Repository: Infiniflow_Ragflow
• File: web/src/pages/dataset/dataset-setting/components/tag-item.tsx
• Lines: 1-138

Signature

export const TagSetItem = () => JSX.Element;
export const TopNTagsItem = () => JSX.Element;
export function TagItems(): JSX.Element;

Import

import { TagItems } from './components/tag-item';

I/O Contract

Inputs

Name	Type	Required	Description
(FormContext)	react-hook-form context	Yes	Must provide parser_config.tag_kb_ids and parser_config.topn_tags fields

Outputs

Name	Type	Description
JSX.Element	React element	Multi-select for tag KBs and conditional slider for top-N tags

Usage Examples

<FormProvider {...form}>
  <TagItems />
</FormProvider>

Related Pages

• Environment:Infiniflow_Ragflow_Frontend_Node_Environment