Support conversationPro
A responsive message thread with useful quick replies and live feedback.
- 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
Install animui once, then import any component or block from its typed package entry.
React 19 and React DOM 19 are required. The package includes Free and Pro entries, styles and TypeScript declarations.
npm install https://animui.stracture.net/__local/package.tgzLoad the stylesheet once at your app root, then use the typed component import:
import 'animui/styles.css';
import { SupportConversation } from 'animui/support-conversation';Read the Code tab for the implementation files and the API reference below for required props.
Download animui 0.3.0 · Agent guideUsage
Use this as a conversation shell. Replace the deterministic demo replies with messages from your own support service.
import { SupportConversation } from "animui/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.
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.
