97 lines
3.9 KiB
TypeScript
97 lines
3.9 KiB
TypeScript
import {
|
|
AlertDialog,
|
|
AlertDialogAction,
|
|
AlertDialogCancel,
|
|
AlertDialogContent,
|
|
AlertDialogDescription,
|
|
AlertDialogFooter,
|
|
AlertDialogHeader,
|
|
AlertDialogTitle,
|
|
} from "@/components/ui/alert-dialog";
|
|
import { Trash2 } from "lucide-react";
|
|
import { useTranslation } from "react-i18next";
|
|
import type { SessionAutomationJob } from "@/lib/types";
|
|
|
|
interface DeleteConfirmProps {
|
|
open: boolean;
|
|
title: string;
|
|
automations?: SessionAutomationJob[];
|
|
onCancel: () => void;
|
|
onConfirm: () => void;
|
|
}
|
|
|
|
export function DeleteConfirm({
|
|
open,
|
|
title,
|
|
automations = [],
|
|
onCancel,
|
|
onConfirm,
|
|
}: DeleteConfirmProps) {
|
|
const { t } = useTranslation();
|
|
const hasAutomations = automations.length > 0;
|
|
const visibleAutomations = automations.slice(0, 4);
|
|
const hiddenCount = Math.max(0, automations.length - visibleAutomations.length);
|
|
return (
|
|
<AlertDialog open={open} onOpenChange={(o) => (!o ? onCancel() : undefined)}>
|
|
<AlertDialogContent
|
|
className="w-[min(calc(100vw-2rem),24rem)] gap-0 rounded-[28px] border border-white/70 bg-card/95 p-5 text-center shadow-[0_24px_80px_rgba(15,23,42,0.20)] backdrop-blur-xl data-[state=open]:zoom-in-95 sm:rounded-[28px]"
|
|
>
|
|
<AlertDialogHeader className="items-center space-y-0 text-center">
|
|
<div className="mb-5 grid h-16 w-16 place-items-center rounded-full bg-destructive/10 text-destructive">
|
|
<div className="grid h-9 w-9 place-items-center rounded-full border border-destructive/20 bg-destructive/5">
|
|
<Trash2 className="h-5 w-5" strokeWidth={2.4} aria-hidden />
|
|
</div>
|
|
</div>
|
|
<AlertDialogTitle className="text-center text-[20px] font-semibold leading-tight tracking-[-0.02em] text-foreground">
|
|
{t("deleteConfirm.title", { title })}
|
|
</AlertDialogTitle>
|
|
<AlertDialogDescription className="mt-3 max-w-[17rem] text-center text-[14px] leading-6 text-muted-foreground">
|
|
{hasAutomations
|
|
? t("deleteConfirm.automationsDescription", {
|
|
count: automations.length,
|
|
defaultValue:
|
|
"This chat has scheduled automations. Deleting it will also delete them.",
|
|
})
|
|
: t("deleteConfirm.description")}
|
|
</AlertDialogDescription>
|
|
{hasAutomations ? (
|
|
<div className="mt-4 max-h-32 w-full overflow-y-auto rounded-2xl bg-muted/55 px-3 py-2 text-left">
|
|
{visibleAutomations.map((job) => (
|
|
<div key={job.id} className="truncate text-[13px] leading-6 text-foreground">
|
|
{job.name || job.id}
|
|
</div>
|
|
))}
|
|
{hiddenCount > 0 ? (
|
|
<div className="text-[13px] leading-6 text-muted-foreground">
|
|
{t("deleteConfirm.moreAutomations", {
|
|
count: hiddenCount,
|
|
defaultValue: "+ {{count}} more",
|
|
})}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
) : null}
|
|
</AlertDialogHeader>
|
|
<AlertDialogFooter className="mt-7 grid grid-cols-2 gap-3 space-x-0">
|
|
<AlertDialogCancel
|
|
onClick={onCancel}
|
|
className="mt-0 h-11 rounded-full border-0 bg-muted/70 px-5 text-[15px] font-semibold text-foreground shadow-none hover:bg-muted"
|
|
>
|
|
{t("deleteConfirm.cancel")}
|
|
</AlertDialogCancel>
|
|
<AlertDialogAction
|
|
onClick={onConfirm}
|
|
className="h-11 rounded-full bg-destructive px-5 text-[15px] font-semibold text-destructive-foreground shadow-[0_10px_25px_rgba(239,68,68,0.28)] hover:bg-destructive/90"
|
|
>
|
|
{hasAutomations
|
|
? t("deleteConfirm.confirmWithAutomations", {
|
|
defaultValue: "Delete all",
|
|
})
|
|
: t("deleteConfirm.confirm")}
|
|
</AlertDialogAction>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
);
|
|
}
|