Implementation:Infiniflow Ragflow Collapse Component

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

Overview

Concrete collapsible container components with expand/collapse state management and optional right content slot provided by the RAGFlow frontend.

Description

Exports two components: Collapse for simple collapsible panels with title and right content, and NodeCollapsible for collapsible item arrays with generic type support and count indicators.

Usage

Import Collapse for settings panels or form sections that can be toggled. Import NodeCollapsible for lists of items (e.g., agent nodes) that can be collapsed.

Code Reference

Source Location

• Repository: Infiniflow_Ragflow
• File: web/src/components/collapse.tsx
• Lines: 1-131

Signature

export function Collapse(props: {
  title: string;
  rightContent?: ReactNode;
  open?: boolean;
  children: ReactNode;
}): JSX.Element;

export function NodeCollapsible<T extends any[]>(props: {
  title: string;
  items: T;
  children: (items: T) => ReactNode;
  open?: boolean;
}): JSX.Element;

Import

import { Collapse, NodeCollapsible } from '@/components/collapse';

I/O Contract

Inputs

Name	Type	Required	Description
title	string	Yes	Header text for the collapsible section
open	boolean	No	Initial open state
children	ReactNode	Yes	Content to collapse/expand

Outputs

Name	Type	Description
Rendered JSX	JSX.Element	Collapsible panel with toggle

Usage Examples

import { Collapse, NodeCollapsible } from '@/components/collapse';

<Collapse title="Advanced Settings">
  <SettingsForm />
</Collapse>

<NodeCollapsible title="Operators" items={operators}>
  {(items) => items.map(op => <OperatorCard key={op.id} {...op} />)}
</NodeCollapsible>

Related Pages

• Environment:Infiniflow_Ragflow_Frontend_Node_Environment