Implementation:Infiniflow Ragflow ConfirmDeleteDialog Component

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

Overview

Concrete confirmation dialog for destructive delete operations with custom content and avatar support provided by the RAGFlow frontend.

Description

Exports ConfirmDeleteDialog (overlay modal with title, description, and confirm/cancel buttons) and ConfirmDeleteDialogNode (inline variant). Both support avatar display, custom confirmation text, and loading state on the confirm button.

Usage

Import this component wherever destructive delete operations need user confirmation, such as deleting knowledge bases, documents, agents, or files.

Code Reference

Source Location

• Repository: Infiniflow_Ragflow
• File: web/src/components/confirm-delete-dialog.tsx
• Lines: 1-140

Signature

export function ConfirmDeleteDialog(props: {
  title?: string;
  description?: string;
  onConfirm?: () => void;
  onCancel?: () => void;
  loading?: boolean;
  children?: ReactNode;
} & DialogProps): JSX.Element;

export const ConfirmDeleteDialogNode: (props: {
  name: string;
  avatar?: string;
  onConfirm: () => void;
}) => JSX.Element;

Import

import { ConfirmDeleteDialog } from '@/components/confirm-delete-dialog';

I/O Contract

Inputs

Name	Type	Required	Description
title	string	No	Dialog title
onConfirm	function	Yes	Callback when delete confirmed
loading	boolean	No	Show loading spinner on confirm button

Outputs

Name	Type	Description
onConfirm callback	void	Deletion confirmed by user

Usage Examples

import { ConfirmDeleteDialog } from '@/components/confirm-delete-dialog';

<ConfirmDeleteDialog
  title="Delete Knowledge Base"
  description="This action cannot be undone."
  onConfirm={handleDelete}
  loading={isDeleting}
/>

Related Pages

• Environment:Infiniflow_Ragflow_Frontend_Node_Environment