# Support conversation

> A helpdesk conversation screen with inbox views, a live chat thread with notes and shared screenshots, and a composer for replies, notes, saved replies, articles and dropped files. The customer panel shows their profile, connected apps, linked issue, past conversations and an activity timeline.

- Type: Screen (a complete app view, installed as a block)
- Page: https://uiarc.dev/components/screens/support-conversation
- Markdown: https://uiarc.dev/components/screens/support-conversation/markdown

- Access: Arc Pro
- Registry id: `support-conversation`
- Source file: `registry/blocks/support-conversation/support-conversation.tsx`
- Built from: Input, Button, Avatar, Motion
- Keywords: react support chat, chat thread ui, customer support conversation, help desk chat, chat with typing indicator, ticket conversation

Use this as a conversation shell. Replace the deterministic demo replies with messages from your own support service.

## When to use

- A support chat or ticket thread with quick replies and attachments.
- Help flows that should show a typing indicator and a resolve toggle.

## When not to use

- Use support-widget for a floating help launcher.
- Use ai-composer for a prompt input without a thread.
- Use inbox-triage to handle many conversations at once.

## Installation

Support conversation is part of Arc Pro. The live preview is public; the source and install command need Pro.

### CLI with a Pro token

1. Create a token in your account and set it in the environment (or `.env.local`). Never commit it.

```bash
export ARC_PRO_TOKEN=arc_pro_...
```

2. Add the Pro registry to `components.json`:

```json
{
  "registries": {
    "@uiarc": "https://uiarc.dev/r/{name}.json",
    "@uiarc-pro": {
      "url": "https://uiarc.dev/r/pro/{name}.json",
      "headers": {
        "Authorization": "Bearer ${ARC_PRO_TOKEN}"
      }
    }
  }
}
```

3. Install:

```bash
npx shadcn@latest add @uiarc-pro/support-conversation
```

### Manual

Signed-in Pro members can copy the source from the Manual tab on the docs page.

- Plans: https://uiarc.dev/pricing
- Create a Pro token: https://uiarc.dev/account#pro-access
- Setup guide: https://uiarc.dev/docs/ai#pro-access

## Usage

```tsx
import { SupportConversation } from "@/components/arc/blocks/support-conversation/support-conversation";

export function Conversation({ ticketId }: { ticketId: string }) {
  return (
    <div style={{ height: "100dvh" }}>
      <SupportConversation
        workspace="Acme"
        onSend={(message) => postMessage(ticketId, message)}
        onResolve={(resolved) => setTicketResolved(ticketId, resolved)}
      />
    </div>
  );
}
```

## API reference

### SupportConversation

A full helpdesk conversation screen inside the Arc screen shell. The sidebar holds the inbox views (Your inbox, Mentions, Unassigned, All open, Snoozed, Closed), a Waiting on you queue of the customers waiting for a reply with the time left against the channel's reply target (15 minutes on chat, 4 hours on email, late ones in red), and teams with their own icons; the page is one live conversation with a reply and internal note composer, and the shell's right panel holds the customer: contact details, plan, Google Calendar and Stripe, a linked issue, previous conversations, a note, and an activity timeline. Live chat replies are seen and answered by the sample customer. Every prop is optional; without props it runs on Kitewing support sample data.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `onSend` | `(message: string) => void` | – | Called with the text of each reply you send (not notes). |
| `onResolve` | `(resolved: boolean) => void` | – | Called when the open conversation is closed (true) or reopened (false). |
| `defaultConversations` | `SupportConversationRecord[]` | – | Starting conversations: customer id, subject, channel (chat or email), team, status (open, snoozed, closed), assignee, priority, unread, mention, waiting time, thread items (messages with screenshots, articles and files, internal notes, events, day dividers) and optional scripted customer replies. |
| `customers` | `SupportCustomer[]` | – | Customers referenced by conversations: contact details, company, plan, seats, browser, presence, local time, note, optional Google Calendar and Stripe details, linked issue, previous conversations and activity. |
| `agents` | `SupportAgent[]` | – | Teammates in the assign menu and note authors. The first one is you unless currentAgent is set. |
| `currentAgent` | `string` | – | Agent id of the person using the screen, for Your inbox, assignment and replies. |
| `defaultConversationId` | `string` | – | The conversation open on first render. Defaults to the first one. |
| `workspace` | `string` | `"Kitewing"` | Workspace name in the sidebar switcher and the account label. |
| `className` | `string` | – | Class on the root, which fills its parent's height. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| J / K | Next or previous conversation in the current view. |
| R / N | Focuses the composer in reply or internal note mode. |
| / | In an empty reply or after a space, opens saved replies filtered by what you type; Enter inserts the first. |
| Cmd/Ctrl + Enter | Sends the reply or adds the note. Add Shift to send and close. |
| E | Closes the conversation, or reopens it. |
| S / A | Opens the snooze or assign menu. |
| ? | Opens the keyboard shortcuts dialog. |
| Escape | Closes the open menu, dialog or preview. |

## Accessibility

- The thread is an ordered list; new replies, notes, assignments and status changes are announced in a polite live region, and the typing indicator is a status with a text name.
- Assign, snooze, saved reply and article menus open in Arc's Popover as role="menu" with arrow keys, Home, End and Escape, and return focus to their trigger; the pickers' search fields move into the list with ArrowDown and pick the first match with Enter.
- Each Waiting on you row names the customer, the subject, the time left and whether it is unread, and marks the open conversation with aria-current.
- Reply and Note are Arc's SegmentedControl with arrow keys; the customer panel uses Arc's Tabs, and copy buttons are Arc's CopyButton, which announces success or failure without changing width.
- The screenshot preview and the shortcuts list are modal dialogs that close on Escape or the scrim and return focus to what opened them.
- Files can be attached from the paperclip button as well as by dropping them on the page.

## Motion

- New messages, notes and events rise 6px on the smooth spring; switching conversations with the pointer crossfades the thread once, and J and K switch instantly.
- Reply and Note, the panel tabs and the activity filter use Arc's SegmentedControl and Tabs motion; the selected Waiting on you row fills in place.
- Menus use Arc's Popover motion, dialogs fade with a 0.97 scale, past conversations open on the smooth spring, and the composer swaps to the closed notice with one fade.
- Buttons press to 0.97, menu triggers answer with colour only, and hover fills are instant. Reduced motion removes travel, crossfades and the typing dots, and keeps every final state.

## Responsive behavior

- The thread scrolls within a 350 to 450px height and centers messages up to 590px wide.
- Below 650px and again below 390px the header and composer padding tighten and the portrait shrinks.

## Performance

- Every message stays mounted and the thread is not virtualized, so load long histories in pages.
- New messages smooth-scroll the thread to the bottom; replies are simulated with timers you should replace.

## Notes for AI

- Use as a full helpdesk conversation screen; it composes ScreenShell, so give the parent a definite height.
- Replace the sample data with your helpdesk records and wire onSend and onResolve to your backend; customer replies, resyncs and snoozes are local simulations.
- Google Calendar and Stripe use Simple Icons marks; swap them for the apps your customers connect. Use inbox-triage when agents work through many conversations from a list.

## Related

- [Inbox triage](https://uiarc.dev/components/screens/inbox-triage/markdown): A support inbox where a team assigns, snoozes, resolves and replies to customer conversations, with views, channels and tags in the sidebar and the customer's billing, tags and linked issue beside the thread. Bulk select rows, triage from the keyboard with J, K, E and H, and undo any move.
- [Support widget](https://uiarc.dev/components/blocks/support-widget/markdown): An in-app help launcher that grows into live article search, reading, and a chat with your team.
- [AI composer](https://uiarc.dev/components/blocks/ai-composer/markdown): The prompt box at the bottom of an AI app: files upload in place, / opens commands, @ inserts mentions, a model and effort menu sits in the toolbar, and the send button turns into a stop control ringed by the reply's progress.

## Guidance for AI tools

Blocks are complete, self-contained screens with sample data. Replace the sample data and connect the callbacks described above. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://uiarc.dev/llms.txt