import { Head, router, useForm } from '@inertiajs/react'; import { BarChart3, Trash2 } from 'lucide-react'; import { useAlert, useConfirm } from '@/components/confirm-dialog-provider'; import { EmptyState } from '@/components/empty-state'; import InputError from '@/components/input-error'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from '@/components/ui/card'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@/components/ui/select'; import AppLayout from '@/layouts/app-layout'; import { useT } from '@/lib/i18n'; import { index as agentsIndex, show as showAgent } from '@/routes/agents'; import { index as agentCtasIndex } from '@/routes/agents/ctas'; import { destroy as ctaDestroy } from '@/routes/cta'; import type { BreadcrumbItem } from '@/types'; type Cta = { id: string; name: string; label: string; kind: string; enabled: boolean; target: { url?: string } | null; }; type Props = { agent: { id: string; name: string }; rules: Cta[]; }; const KINDS = ['buy', 'demo', 'signup', 'book', 'link'] as const; export default function Ctas({ agent, rules }: Props) { const { t } = useT(); const confirm = useConfirm(); const alert = useAlert(); const form = useForm<{ name: string; label: string; kind: string; url: string; forward_context: boolean; context_fields: string[]; }>({ name: '', label: '', kind: 'demo', url: '', forward_context: false, context_fields: [], }); const breadcrumbs: BreadcrumbItem[] = [ { title: t('Agents'), href: agentsIndex.url() }, { title: agent.name, href: showAgent({ agent: agent.id }).url }, { title: t('CTAs'), href: agentCtasIndex({ agent: agent.id }).url }, ]; const submit = (e: React.FormEvent) => { e.preventDefault(); form.transform((data) => ({ name: data.name, label: data.label, kind: data.kind, target: { url: data.url, // D2: when forward_context is on, the server appends a // signed payload to the outbound URL on every click. ...(data.forward_context && data.context_fields.length > 0 ? { forward_context: true, context_fields: data.context_fields, } : {}), }, conditions: {}, })); form.post(`/app/agents/${agent.id}/ctas`, { onSuccess: () => form.reset(), }); }; const toggleField = (field: string) => { const next = form.data.context_fields.includes(field) ? form.data.context_fields.filter((f) => f !== field) : [...form.data.context_fields, field]; form.setData('context_fields', next); }; const FORWARDABLE_FIELDS = [ 'conversation_id', 'visitor_email', 'visitor_name', 'captured_fields', 'page_url', 'agent_id', ]; return (

{t('Calls to action')}

{t( 'Buttons that surface in conversations to drive demos, sign-ups, or purchases.', )}

{t('Add a CTA')} {t( 'Create a button the assistant can surface during a conversation when a visitor is ready to act.', )}
form.setData('name', e.target.value) } />
form.setData('label', e.target.value) } />
form.setData('url', e.target.value) } />
{/* D2: signed conversation context. When enabled, every click on this CTA opens the URL with a base64-encoded JSON payload + HMAC signature. The receiving site verifies via the workspace's cta_context_secret. See /documentation/ cta-context for HMAC verify samples. */}
{form.data.forward_context && (
{FORWARDABLE_FIELDS.map((f) => ( ))}
)}

{t('Existing')}

{rules.length === 0 ? ( ) : (
{rules.map((r) => (

{r.label}

{r.kind} →{' '} {r.target?.url ?? t('(no target)')}

))}
)}
); }