diff --git a/frontend/app/knowledge/page.tsx b/frontend/app/knowledge/page.tsx index d9ebf1d6..1b9e6f85 100644 --- a/frontend/app/knowledge/page.tsx +++ b/frontend/app/knowledge/page.tsx @@ -31,7 +31,10 @@ import { DialogTrigger, } from "@/components/ui/dialog"; import { StatusBadge } from "@/components/ui/status-badge"; -import { DeleteConfirmationDialog } from "../../components/delete-confirmation-dialog"; +import { + DeleteConfirmationDialog, + formatFilesToDelete, +} from "../../components/delete-confirmation-dialog"; import GoogleDriveIcon from "../../components/icons/google-drive-logo"; import OneDriveIcon from "../../components/icons/one-drive-logo"; import SharePointIcon from "../../components/icons/share-point-logo"; @@ -399,7 +402,7 @@ function SearchPage() { }? This will remove all chunks and data associated with these documents. This action cannot be undone. Documents to be deleted: -${selectedRows.map((row) => `• ${row.filename}`).join("\n")}`} +${formatFilesToDelete(selectedRows)}`} confirmText={selectedRows.length > 1 ? "Delete All" : "Delete"} onConfirm={handleBulkDelete} isLoading={deleteDocumentMutation.isPending} diff --git a/frontend/components/delete-confirmation-dialog.tsx b/frontend/components/delete-confirmation-dialog.tsx index c561c97d..7971933d 100644 --- a/frontend/components/delete-confirmation-dialog.tsx +++ b/frontend/components/delete-confirmation-dialog.tsx @@ -12,6 +12,26 @@ import { import { Button } from "./ui/button"; import { AlertTriangle } from "lucide-react"; +/** + * Formats a list of files to be deleted, truncating if necessary. + * @param files - Array of files with a `filename` property + * @param maxVisible - Maximum number of items to show before truncating (default: 5) + * @returns Formatted string with bullet points, truncated if needed + */ +export function formatFilesToDelete( + files: Array<{ filename: string }>, + maxVisible = 5, +): string { + const visibleFiles = files.slice(0, maxVisible); + const remainingCount = files.length - maxVisible; + const fileList = visibleFiles.map((file) => `• ${file.filename}`).join("\n"); + return remainingCount > 0 + ? `${fileList}\n• ... and ${remainingCount} more document${ + remainingCount > 1 ? "s" : "" + }` + : fileList; +} + interface DeleteConfirmationDialogProps { open: boolean; onOpenChange: (open: boolean) => void;