import { Head, router, useForm } from '@inertiajs/react'; import { Beaker, Trash2 } from 'lucide-react'; import { 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 agentExperimentsIndex } from '@/routes/agents/experiments'; import type { BreadcrumbItem } from '@/types'; type Variant = { id: string; name: string; weight: number }; type Experiment = { id: string; name: string; kind: 'persona' | 'cta' | 'trigger'; status: 'draft' | 'running' | 'stopped'; started_at: string | null; stopped_at: string | null; variants: Variant[]; }; type Props = { agent: { id: string; name: string }; experiments: Experiment[]; }; const STATUS_COLOR: Record = { draft: 'bg-amber-500/15 text-amber-700 dark:text-amber-400', running: 'bg-emerald-500/15 text-emerald-700 dark:text-emerald-400', stopped: 'bg-zinc-500/15 text-zinc-700 dark:text-zinc-400', }; export default function Experiments({ agent, experiments }: Props) { const { t, tChoice } = useT(); const confirm = useConfirm(); const breadcrumbs: BreadcrumbItem[] = [ { title: t('Agents'), href: agentsIndex.url() }, { title: agent.name, href: showAgent({ agent: agent.id }).url }, { title: t('Experiments'), href: agentExperimentsIndex({ agent: agent.id }).url, }, ]; type VariantConfig = { persona?: { name?: string; tone?: string }; }; type VariantForm = { name: string; weight: number; config?: VariantConfig; }; const form = useForm<{ name: string; kind: 'persona' | 'cta' | 'trigger'; variants: VariantForm[]; }>({ name: '', kind: 'cta', variants: [ { name: 'control', weight: 50, config: {} }, { name: 'treatment', weight: 50, config: {} }, ], }); const submit = (e: React.FormEvent) => { e.preventDefault(); form.post(`/app/agents/${agent.id}/experiments`, { onSuccess: () => form.reset(), }); }; return (

{t('A/B testing')}

{t( 'Test persona, CTA, or trigger variations on a percentage of visitors. Sticky assignment per visitor.', )}

{t('Create experiment')} {t( 'Test different personas, CTAs, or triggers on a portion of your traffic with sticky visitor assignment.', )}
form.setData('name', e.target.value) } />

{t( 'Weights are relative traffic shares. Keep the total roughly balanced so comparisons stay readable.', )}

{form.data.variants.map( (variant, index) => (
{ const next = [ ...form.data .variants, ]; next[index] = { ...next[index], name: e.target .value, }; form.setData( 'variants', next, ); }} /> { const next = [ ...form.data .variants, ]; next[index] = { ...next[index], weight: parseInt( e.target.value, 10, ), }; form.setData( 'variants', next, ); }} /> {form.data.kind === 'persona' && (
{ const next = [ ...form.data .variants, ]; next[index] = { ...next[ index ], config: { ...next[ index ] .config, persona: { ...next[ index ] .config ?.persona, name: e .target .value, }, }, }; form.setData( 'variants', next, ); }} /> { const next = [ ...form.data .variants, ]; next[index] = { ...next[ index ], config: { ...next[ index ] .config, persona: { ...next[ index ] .config ?.persona, tone: e .target .value, }, }, }; form.setData( 'variants', next, ); }} />
)}
), )}

{t('Existing experiments')}

{experiments.length === 0 ? ( ) : (
{experiments.map((exp) => (

{exp.name}

{t(exp.status)}

{exp.kind} ·{' '} {tChoice( ':count variant|:count variants', exp.variants.length, { count: exp.variants.length }, )} :{' '} {exp.variants .map( (v) => `${v.name} (${v.weight})`, ) .join(', ')}

{exp.status !== 'running' && ( )} {exp.status === 'running' && ( )}
))}
)}
); }