AI support chat

A React block (a whole screen) in Beamline's Blocks category.

The customer's side of AI support: an assistant that answers from your help centre with numbered citations, a thumbs up or down on every answer (a down asks why and offers a person), a handoff that queues, counts down the line and morphs the header into the person who joins, and a rating when the case ends.

Use it for

A help widget or support page where an AI assistant answers first and a person takes over when asked.
Any customer-facing assistant whose answers must show where they came from and collect feedback.

Not for

The support team's own view of many conversations (support-console).
An agent that plans and changes things in a workspace (agent-workspace).
Talking by voice (voice-agent).
People talking to people only, without an assistant (chat-thread).

Anatomy

header: who is answering (the assistant's orb, or the person's avatar with presence once they join, the name morphing between them), a status line, Talk to a person, and a menu (new conversation, transcript)
connection strip under the header while reconnecting or offline (messages wait and go out when the line is back)
conversation: greeting with suggested questions; the customer's messages (sending, failed with Retry); the assistant's answers with numbered citations to help articles and a thumbs up / down; the person's messages with their name; events as markers (handoff asked, joined, resolved)
feedback: a down vote opens reasons as chips and offers a person in the same place
handoff card: place in line rolling down, the expected wait, Cancel; the assistant keeps helping while it waits
rating card when the case is resolved: 1–5, an optional note, then thanks
composer: a field that grows and one send button

Variants

0: room: a 360px widget, a side panel or a whole help page — the root is a container; the column centres at 46rem and the suggestions wrap

States

loading history (skeleton of turns)
new conversation (greeting and suggestions)
assistant thinking (shimmering status) and answering (cited text streams in)
answer rated up / down (with a reason)
answer failed (says why, Retry)
message sending / failed (Retry)
handoff queued (place in line, wait unmeasured shows as —)
person connected (header morphs; their typing shows)
resolved (rating, then thanks)
reconnecting / offline (composer still takes messages; they wait)

Keyboard

Tab order: header actions, conversation, composer
Enter sends, Shift+Enter adds a line
Feedback buttons are toggles (aria-pressed); reason chips are a group of toggles
The rating is a radio group: arrows choose, Tab moves to the note and Send
Escape inside the reasons closes them and returns focus to the down vote

Motion

New turns rise in once; the answer flows in at an even reading pace with each word easing in; the place in line rolls down digit by digit; when a person joins, the orb hands over to their avatar and the name morphs letter by letter. Nothing moves at rest: the orb holds still unless the assistant is working. Reduced motion: text arrives as received, names swap, numbers change in place.

Props

Prop	Type	Default	Description
`assistant` (required)	`{ name: string; greeting?: string; tagline?: string }`	—	The assistant's name and its first line.
`turns` (required)	`SupportTurn[]`	—	The conversation as your backend has it: customer, assistant, agent (a person) and event turns, in order. Update a turn in place while it streams.
`handoff`	`SupportHandoff \| null`	—	Where the handoff to a person stands: queued (position, wait) → connected (agent) → resolved. Leave out while the assistant handles it.
`connection`	`"online" \| "reconnecting" \| "offline"`	`"online"`
`typing`	`boolean`	—	The connected person is typing.
`suggestions`	`string[]`	—	Questions offered under the greeting before the first message.
`loading`	`boolean`	—	History is still loading.
`onSend`	`(text: string) => void`	—	The customer sent a message; add it to turns.
`onRetry`	`(turnId: string) => void`	—	Send a failed message again, or ask for a failed answer again.
`onFeedback`	`(turnId: string, feedback: SupportFeedback \| null) => void`	—	A thumbs up or down on an answer (with a reason once chosen); null takes the vote back.
`onHandoff`	`(reason?: string) => void`	—	The customer asked for a person.
`onCancelHandoff`	`() => void`	—
`onRate`	`(rating: number, note?: string) => void \| Promise<unknown>`	—	The rating at the end, 1–5.
`onNewConversation`	`() => void`	—
`className / classNames / style / ref`	`string / SupportChatClassNames / CSSProperties / Ref<HTMLElement>`	—

Built from

conversation
message
citations
orb
avatar
marker
text-morph
text-shimmer
slot-text
segmented-control
chip-group
textarea
button
dropdown-menu
spinner
skeleton

Dependencies

lucide-react, use-stick-to-bottom

Import

import { SupportChat } from "@/blocks/support-chat/support-chat";

Get it

AI support chat is part of Beamline: 200+ components and 50+ complete screens for React that your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 launch price, one payment, no subscription, lifetime updates, one licence for your whole team. Get Beamline · Connect your agent