Support conversation
ProA responsive message thread with useful quick replies and live feedback.
Live block · sample data
- 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.
example.tsx
import { SupportConversation } from "@/components/arc/blocks/support-conversation/support-conversation"; export function Ticket({ ticketId }: { ticketId: string }) { return ( <SupportConversation onSend={(message) => postMessage(ticketId, message)} onResolve={(resolved) => setTicketResolved(ticketId, resolved)} /> );}SupportConversation
A support thread with quick replies, PDF attachment, a typing indicator, and a resolve toggle. Replies are deterministic canned answers.
PropTypeDefaultDescription
onSend(message: string) => void–Called with each message the user sends.onResolve(resolved: boolean) => void–Called when the conversation is marked resolved or reopened.- New messages are announced through a polite live region.
- The send, attach, and typing indicator elements have aria-labels.
- The file input only accepts PDF.
- Messages rise into the thread on a gentle spring and existing messages shift via layout.
- Reduced motion removes the offsets and uses instant transitions.
- 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 chat or ticket thread shell.
- Replace replyFor and scheduleReply with messages from your support backend, and initialMessages with the real history.
- onSend fires before the simulated reply; the component still keeps its own message list.
The full library index for assistants is at /llms.txt.
