mirror of https://github.com/kortix-ai/suna.git
78 lines
1.9 KiB
TypeScript
78 lines
1.9 KiB
TypeScript
'use client';
|
|
|
|
import React, { useEffect } from 'react';
|
|
import { Loader2 } from 'lucide-react';
|
|
|
|
import {
|
|
AlertDialog,
|
|
AlertDialogAction,
|
|
AlertDialogCancel,
|
|
AlertDialogContent,
|
|
AlertDialogDescription,
|
|
AlertDialogFooter,
|
|
AlertDialogHeader,
|
|
AlertDialogTitle,
|
|
} from '@/components/ui/alert-dialog';
|
|
|
|
interface DeleteConfirmationDialogProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
onConfirm: () => void;
|
|
threadName: string;
|
|
isDeleting: boolean;
|
|
}
|
|
|
|
/**
|
|
* Confirmation dialog for deleting a conversation
|
|
*/
|
|
export function DeleteConfirmationDialog({
|
|
isOpen,
|
|
onClose,
|
|
onConfirm,
|
|
threadName,
|
|
isDeleting,
|
|
}: DeleteConfirmationDialogProps) {
|
|
// Reset pointer events when dialog opens
|
|
useEffect(() => {
|
|
if (isOpen) {
|
|
document.body.style.pointerEvents = 'auto';
|
|
}
|
|
}, [isOpen]);
|
|
|
|
return (
|
|
<AlertDialog open={isOpen} onOpenChange={onClose}>
|
|
<AlertDialogContent>
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle>Delete conversation</AlertDialogTitle>
|
|
<AlertDialogDescription>
|
|
Are you sure you want to delete the conversation{' '}
|
|
<span className="font-semibold">"{threadName}"</span>?
|
|
<br />
|
|
This action cannot be undone.
|
|
</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
<AlertDialogFooter>
|
|
<AlertDialogCancel disabled={isDeleting}>Cancel</AlertDialogCancel>
|
|
<AlertDialogAction
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
onConfirm();
|
|
}}
|
|
disabled={isDeleting}
|
|
className="bg-destructive text-white hover:bg-destructive/90"
|
|
>
|
|
{isDeleting ? (
|
|
<>
|
|
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
|
Deleting...
|
|
</>
|
|
) : (
|
|
'Delete'
|
|
)}
|
|
</AlertDialogAction>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
);
|
|
}
|