Support conversation
ProA 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.
- A support chat or ticket thread with quick replies and attachments.
- Help flows that should show a typing indicator and a resolve toggle.
- 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
Pro source and install commands unlock with a Pro plan.
Usage
Use this as a conversation shell. Replace the deterministic demo replies with messages from your own support service.
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> );}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.
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).defaultConversationsSupportConversationRecord[]–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.customersSupportCustomer[]–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.agentsSupportAgent[]–Teammates in the assign menu and note authors. The first one is you unless currentAgent is set.currentAgentstring–Agent id of the person using the screen, for Your inbox, assignment and replies.defaultConversationIdstring–The conversation open on first render. Defaults to the first one.workspacestring"Kitewing"Workspace name in the sidebar switcher and the account label.classNamestring–Class on the root, which fills its parent's height.- JorK
- Next or previous conversation in the current view.
- RorN
- 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.
- SorA
- Opens the snooze or assign menu.
- ?
- Opens the keyboard shortcuts dialog.
- Escape
- Closes the open menu, dialog or preview.
- 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.
- 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.
- 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.
- 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
Give your coding assistant the Markdown reference instead of screenshots.
- 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.
The full library index for assistants is at /llms.txt.