Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 | 1x 1x 1x 1x 1x 1x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x | 'use client';
import type { AIProviderConfig } from '@shared/types/data/ai-provider';
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
} from '@web/components/ui/alert-dialog';
import { Input } from '@web/components/ui/input';
import { Label } from '@web/components/ui/label';
import { AlertTriangle } from 'lucide-react';
import type { ReactElement } from 'react';
import { useId, useState } from 'react';
interface DeleteAIProviderDialogProps {
provider: AIProviderConfig | null;
open: boolean;
onOpenChange: (open: boolean) => void;
onConfirm: () => Promise<void>;
}
export function DeleteAIProviderDialog({
provider,
open,
onOpenChange,
onConfirm,
}: DeleteAIProviderDialogProps): ReactElement {
const [confirmName, setConfirmName] = useState('');
const [isDeleting, setIsDeleting] = useState(false);
const inputId = useId();
const handleConfirm = async () => {
if (!provider || confirmName !== provider.name) return;
setIsDeleting(true);
try {
await onConfirm();
onOpenChange(false);
setConfirmName('');
} catch (error) {
console.error('Error deleting AI provider:', error);
} finally {
setIsDeleting(false);
}
};
const handleCancel = () => {
setConfirmName('');
onOpenChange(false);
};
const isConfirmDisabled =
!provider || confirmName !== provider.name || isDeleting;
return (
<AlertDialog open={open} onOpenChange={onOpenChange}>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle className="flex items-center gap-2">
<AlertTriangle className="h-5 w-5 text-destructive" />
Delete AI Provider
</AlertDialogTitle>
<AlertDialogDescription className="space-y-4 pt-4">
<p>
This action cannot be undone. This will permanently delete the AI
provider <span className="font-semibold">{provider?.name}</span>{' '}
and all models associated with it.
</p>
<div className="space-y-2">
<Label htmlFor={inputId}>
Type{' '}
<span className="font-mono font-semibold">
{provider?.name}
</span>{' '}
to confirm:
</Label>
<Input
id={inputId}
value={confirmName}
onChange={(e) => setConfirmName(e.target.value)}
placeholder="Enter provider name"
className="font-mono"
disabled={isDeleting}
onKeyDown={(e) => {
if (e.key === 'Enter' && !isConfirmDisabled) {
handleConfirm();
}
}}
/>
</div>
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel onClick={handleCancel} disabled={isDeleting}>
Cancel
</AlertDialogCancel>
<AlertDialogAction
onClick={handleConfirm}
disabled={isConfirmDisabled}
variant={'destructive'}
>
{isDeleting ? 'Deleting...' : 'Delete Provider'}
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
);
}
|