AI Contact Routing

import { useState } from 'react'

interface SDK {
  host: string
  token?: string
  _csrfToken?: string
}

interface AppProps {
  sdk: SDK
  user: unknown
  workspace: { id: string; slug: string; name: string }
  backends?: Record<string, { slug: string }>
}

type Status =
  | { kind: 'idle' }
  | { kind: 'sending' }
  | { kind: 'success'; routedTo: string; category: string }
  | { kind: 'error'; message: string }

function readFileAsDataUrl(file: File): Promise<string> {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.onload = () => resolve(String(reader.result))
    reader.onerror = () => reject(reader.error)
    reader.readAsDataURL(file)
  })
}

export default function App({ sdk, workspace }: AppProps) {
  const [name, setName] = useState('')
  const [email, setEmail] = useState('')
  const [message, setMessage] = useState('')
  const [file, setFile] = useState<File | null>(null)
  const [status, setStatus] = useState<Status>({ kind: 'idle' })

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    setStatus({ kind: 'sending' })

    try {
      let attachment: { name: string; type: string; dataUrl: string } | null = null
      if (file) {
        const dataUrl = await readFileAsDataUrl(file)
        attachment = { name: file.name, type: file.type, dataUrl }
      }

      const response = await fetch(
        `${sdk.host}/workspaces/slug:${workspace.slug}/webhooks/submit-contact`,
        {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            ...(sdk.token ? { Authorization: `Bearer ${sdk.token}` } : {}),
            ...(sdk._csrfToken
              ? { 'x-prismeai-csrf-token': sdk._csrfToken }
              : {}),
          },
          body: JSON.stringify({ name, email, message, attachment }),
        },
      )

      if (!response.ok) {
        throw new Error(`Request failed with status ${response.status}`)
      }

      const data = (await response.json()) as {
        routed_to?: string
        category?: string
      }

      setStatus({
        kind: 'success',
        routedTo: data.routed_to ?? 'unknown',
        category: data.category ?? 'unknown',
      })
      setName('')
      setEmail('')
      setMessage('')
      setFile(null)
    } catch (err) {
      setStatus({
        kind: 'error',
        message: err instanceof Error ? err.message : 'Unknown error',
      })
    }
  }

  const isSubmitting = status.kind === 'sending'

  return (
    <main className="min-h-screen bg-slate-50 px-4 py-12">
      <div className="mx-auto max-w-xl rounded-2xl bg-white p-8 shadow-sm ring-1 ring-slate-200">
        <h1 className="text-2xl font-semibold text-slate-900">Contact us</h1>
        <p className="mt-1 text-sm text-slate-600">
          Tell us how we can help. Your message will be routed to the right team.
        </p>

        <form onSubmit={handleSubmit} className="mt-6 space-y-4">
          <div>
            <label className="block text-sm font-medium text-slate-700">Name</label>
            <input
              type="text"
              required
              value={name}
              onChange={(e) => setName(e.target.value)}
              className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm shadow-sm focus:border-slate-500 focus:outline-none"
              placeholder="Jane Doe"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-slate-700">Email</label>
            <input
              type="email"
              required
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm shadow-sm focus:border-slate-500 focus:outline-none"
              placeholder="jane.doe@example.com"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-slate-700">Message</label>
            <textarea
              required
              value={message}
              onChange={(e) => setMessage(e.target.value)}
              rows={5}
              className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm shadow-sm focus:border-slate-500 focus:outline-none"
              placeholder="How can we help?"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-slate-700">
              Attachment (optional)
            </label>
            <input
              type="file"
              onChange={(e) => setFile(e.target.files?.[0] ?? null)}
              className="mt-1 block w-full text-sm text-slate-700 file:mr-3 file:rounded-md file:border-0 file:bg-slate-900 file:px-3 file:py-2 file:text-sm file:text-white hover:file:bg-slate-800"
            />
          </div>

          <button
            type="submit"
            disabled={isSubmitting}
            className="w-full rounded-md bg-slate-900 px-4 py-2 text-sm font-medium text-white shadow-sm transition hover:bg-slate-800 disabled:cursor-not-allowed disabled:opacity-60"
          >
            {isSubmitting ? 'Sending…' : 'Send message'}
          </button>

          {status.kind === 'success' && (
            <p className="rounded-md bg-emerald-50 px-3 py-2 text-sm text-emerald-800 ring-1 ring-emerald-200">
              Thanks — your message was routed to <strong>{status.routedTo}</strong>{' '}
              (category: {status.category}).
            </p>
          )}

          {status.kind === 'error' && (
            <p className="rounded-md bg-red-50 px-3 py-2 text-sm text-red-800 ring-1 ring-red-200">
              Something went wrong: {status.message}
            </p>
          )}
        </form>
      </div>
    </main>
  )
}

output:
  routed_to: '{{recipient}}'
  category: '{{routingDecision}}'