import { Head, router, useForm } from '@inertiajs/react'; import { ArrowDown, ArrowUp, Plus, Sparkles, Trash2, X } from 'lucide-react'; import { useState } from 'react'; import { toast } from 'sonner'; import { useConfirm } from '@/components/confirm-dialog-provider'; import { Button } from '@/components/ui/button'; import { Card } from '@/components/ui/card'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Textarea } from '@/components/ui/textarea'; import AppLayout from '@/layouts/app-layout'; import { useT } from '@/lib/i18n'; import type { BreadcrumbItem } from '@/types'; type Reply = { id: string; label: string; content: string; position: number; created_at: string | null; }; type Props = { replies: Reply[]; }; export default function CannedRepliesSettings({ replies }: Props) { const { t } = useT(); const confirm = useConfirm(); const [editingId, setEditingId] = useState(null); const [showCreate, setShowCreate] = useState(false); const breadcrumbs: BreadcrumbItem[] = [ { title: t('Canned replies'), href: '/app/settings/canned-replies' }, ]; const move = (id: string, direction: 'up' | 'down') => { const idx = replies.findIndex((r) => r.id === id); if (idx === -1) { return; } const swap = direction === 'up' ? idx - 1 : idx + 1; if (swap < 0 || swap >= replies.length) { return; } const next = [...replies]; [next[idx], next[swap]] = [next[swap], next[idx]]; router.patch( '/app/settings/canned-replies/reorder', { ordered_ids: next.map((r) => r.id) }, { preserveScroll: true }, ); }; const remove = async (id: string) => { const ok = await confirm({ title: t('Delete canned reply?'), message: t('Delete this canned reply? This cannot be undone.'), confirmLabel: t('Delete'), danger: true, }); if (!ok) { return; } router.delete(`/app/settings/canned-replies/${id}`, { preserveScroll: true, onSuccess: () => toast.success(t('Removed.')), }); }; return (

{t('Canned replies')}

{t( 'Save the replies you find yourself typing over and over. Operators can drop them into a live conversation in two clicks.', )}

{showCreate && ( setShowCreate(false)} /> )} {replies.length === 0 && !showCreate ? (

{t('No canned replies yet.')}

{t( 'Add one to make your operators 10× faster on common questions.', )}

) : (
{replies.map((r, i) => editingId === r.id ? ( setEditingId(null)} /> ) : (

{r.label}

{r.content}

), )}
)}
); } function CreateForm({ onDone }: { onDone: () => void }) { const { t } = useT(); const form = useForm({ label: '', content: '' }); const submit = (e: React.FormEvent) => { e.preventDefault(); form.post('/app/settings/canned-replies', { preserveScroll: true, onSuccess: () => { form.reset(); onDone(); }, }); }; return (

{t('New canned reply')}

form.setData('label', e.target.value)} placeholder={t('Reset password')} maxLength={80} required /> {form.errors.label && (

{form.errors.label}

)}