# Support Inbox
Source: https://ui.spencerwueste.com/docs/blocks/support-inbox/
Markdown: https://ui.spencerwueste.com/llm/blocks/support-inbox.md

> Ticket list with an AI-drafted reply you can retone, edit, and send.

> Live preview: https://ui.spencerwueste.com/preview/support-inbox

## What's inside

- **Ticket list** with priority, status filters, and previews.
- **Message** renders the customer thread.
- **AI draft** streams a reply, switches tone on demand, and becomes editable when done.
- **Suggestions** list one-click actions such as refunds or escalation.

## Installation

```bash
npx shadcn@latest add https://ui.spencerwueste.com/r/support-inbox.json
```

Manual install dependencies: `@heroicons-animated/react motion`

Registry JSON: https://ui.spencerwueste.com/r/support-inbox.json

The registry item pulls in every component it depends on.

## Usage

```tsx
import SupportInbox from "@/components/blocks/support-inbox/support-inbox";

export default function Page() {
  return (
    <div className="h-dvh p-4">
      <SupportInbox />
    </div>
  );
}
```

Give the parent a bounded height. The block fills it and scrolls internally.

## Going live

Replace the per-ticket `drafts` with a model call that takes the thread and the selected tone. Sending should post the reply to your helpdesk and mark the ticket resolved.