Implementation:Infiniflow Ragflow LinkToDatasetDialog Component
| Knowledge Sources | |
|---|---|
| Domains | Frontend, File_Management |
| Last Updated | 2026-02-12 06:00 GMT |
Overview
Concrete React dialog component providing a multi-select knowledge base picker for linking files to datasets.
Description
The LinkToDatasetDialog component renders a dialog for associating a file with one or more knowledge bases. It contains a LinkToDatasetForm sub-component that uses react-hook-form with a Zod schema validating an array of knowledge base IDs. The form populates a MultiSelect dropdown with options from useSelectKnowledgeOptions and initializes with the file's currently connected knowledge base IDs. The dialog has a save button with Link2 icon that submits the form by targeting the form's ID (FormId). On submission, it calls onConnectToKnowledgeOk with the selected knowledge base ID array.
Usage
Opened from the file manager's ActionCell when the user clicks the link-to-KB button on a file row.
Code Reference
Source Location
- Repository: Infiniflow_Ragflow
- File: web/src/pages/files/link-to-dataset-dialog.tsx
- Lines: 1-125
Signature
export function LinkToDatasetDialog({
hideModal,
initialConnectedIds,
onConnectToKnowledgeOk,
loading,
}: IModalProps<any> & Pick<
UseHandleConnectToKnowledgeReturnType,
'initialConnectedIds' | 'onConnectToKnowledgeOk'
>): JSX.Element;
Import
import { LinkToDatasetDialog } from '@/pages/files/link-to-dataset-dialog';
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| hideModal | function | Yes | Callback to close the dialog |
| initialConnectedIds | string[] | Yes | Pre-selected knowledge base IDs from the file's existing connections |
| onConnectToKnowledgeOk | function | Yes | Callback receiving the array of selected knowledge base IDs |
| loading | boolean | No | Loading state for the submit button |
Outputs
| Name | Type | Description |
|---|---|---|
| Dialog JSX | ReactNode | Dialog with multi-select knowledge base picker and save button |
Usage Examples
import { LinkToDatasetDialog } from './link-to-dataset-dialog';
{connectToKnowledgeVisible && (
<LinkToDatasetDialog
hideModal={hideConnectToKnowledgeModal}
initialConnectedIds={initialConnectedIds}
onConnectToKnowledgeOk={onConnectToKnowledgeOk}
loading={connectToKnowledgeLoading}
/>
)}