Spaces:
Paused
Paused
File size: 2,336 Bytes
0b9dc2e | 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 | import { CheckCircle, CircleAlert, Loader2 } from 'lucide-react';
import { useState, useEffect } from 'react';
import { Button } from '@/components/ui/button';
import {
Dialog,
DialogContent,
DialogFooter,
DialogHeader,
DialogTitle,
DialogDescription,
} from '@/components/ui/dialog';
import { Field, FieldGroup, FieldLabel } from '@/components/ui/field';
import { Input } from '@/components/ui/input';
import { useTranslation } from '@/i18n/useI18n';
interface Props {
open: boolean;
onOpenChange: (open: boolean) => void;
currentName: string;
onConfirm: (name: string) => Promise<void>;
}
export function RenameSessionDialog({ open, onOpenChange, currentName, onConfirm }: Props) {
const { t } = useTranslation();
const [name, setName] = useState(currentName);
const [loading, setLoading] = useState(false);
useEffect(() => {
if (open) setName(currentName);
}, [open, currentName]);
const handleConfirm = async () => {
if (!name.trim()) return;
setLoading(true);
try {
await onConfirm(name.trim());
onOpenChange(false);
} finally {
setLoading(false);
}
};
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent>
<DialogHeader>
<DialogTitle>{t('dialog-session-rename.title')}</DialogTitle>
<DialogDescription>{t('dialog-session-rename.description')}</DialogDescription>
</DialogHeader>
<FieldGroup>
<Field>
<FieldLabel>{t('dialog-session-rename.label')}</FieldLabel>
<Input
value={name}
onChange={(e) => setName(e.target.value)}
placeholder={t('dialog-session-rename.placeholder')}
onKeyDown={(e) => {
if (e.key === 'Enter') handleConfirm();
}}
autoFocus
/>
</Field>
</FieldGroup>
<DialogFooter>
<Button variant="ghost" onClick={() => onOpenChange(false)} disabled={loading}>
<CircleAlert className="size-3.5" />
{t('common.cancel')}
</Button>
<Button onClick={handleConfirm} disabled={loading || !name.trim()}>
{loading ? (
<Loader2 className="size-3.5 animate-spin" />
) : (
<CheckCircle className="size-3.5" />
)}
{t('common.confirm')}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
}
|