Implementation:Infiniflow Ragflow AddedSourceCard Component

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

Overview

Data source card component that displays a filterable, selectable list of data source items grouped by source type.

Description

AddedSourceCard renders a card for a single data source category (e.g., Google Drive, S3). It receives the full item list, a filterString for text-based filtering, and a selectedList with setSelectedList for toggle selection. Each item shows a check mark when selected. The component uses useMemo to compute checked state by matching IDs and to filter items by name substring. The card is hidden entirely when no items match the filter.

Usage

Used inside LinkDataSourceModal to present categorized data source items that the user can select or deselect for linking to a knowledge base.

Code Reference

Source Location

• Repository: Infiniflow_Ragflow
• File: web/src/pages/dataset/dataset-setting/components/added-source-card.tsx
• Lines: 1-97

Signature

export type IAddedSourceCardProps = IDataSorceInfo & {
  filterString: string;
  list: IDataSourceBase[];
  selectedList: IDataSourceBase[];
  setSelectedList: (list: IDataSourceBase[]) => void;
};

export const AddedSourceCard = (props: IAddedSourceCardProps) => JSX.Element;

Import

import { AddedSourceCard } from './added-source-card';

I/O Contract

Inputs

Name	Type	Required	Description
list	IDataSourceBase[]	Yes	All items in this source category
filterString	string	Yes	Text filter for item names
selectedList	IDataSourceBase[]	Yes	Currently selected items
setSelectedList	function	Yes	Callback to update selection
name	string	Yes	Category display name
icon	ReactNode	Yes	Category icon

Outputs

Name	Type	Description
JSX.Element	React element	Filterable card with selectable items, or empty fragment

Usage Examples

<AddedSourceCard
  list={sourceItems}
  filterString={searchText}
  selectedList={selected}
  setSelectedList={setSelected}
  name="Google Drive"
  icon={<DriveIcon />}
/>

Related Pages

• Environment:Infiniflow_Ragflow_Frontend_Node_Environment