# AI support chat

A React block (a whole screen) in [Beamline](https://beamline.io/)'s [Blocks](https://beamline.io/components/blocks) category. Live demo: https://beamline.io/components/support-chat

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](https://beamline.io/components/support-console)).
- An agent that plans and changes things in a workspace ([agent-workspace](https://beamline.io/components/agent-workspace)).
- Talking by voice ([voice-agent](https://beamline.io/components/voice-agent)).
- People talking to people only, without an assistant ([chat-thread](https://beamline.io/components/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](https://beamline.io/components/text-morph)
- [text-shimmer](https://beamline.io/components/text-shimmer)
- [slot-text](https://beamline.io/components/slot-text)
- [segmented-control](https://beamline.io/components/segmented-control)
- [chip-group](https://beamline.io/components/chip-group)
- textarea
- button
- [dropdown-menu](https://beamline.io/components/dropdown-menu)
- spinner
- skeleton

## Dependencies

`lucide-react`, `use-stick-to-bottom`

## Import

```tsx
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](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect)

## More in Blocks

- [Trading terminal](https://beamline.io/components/trading-terminal): A perpetuals terminal on your feed and your account: ticker tape, market header with funding, candles, book / trades / depth, order ticket, account…
- [Market screener](https://beamline.io/components/market-screener): The whole market at a glance and a way to narrow it down: a sector heatmap, today's top movers with the market's breadth, ready-made screens (gainers…
- [AI agent workspace](https://beamline.io/components/agent-workspace): Threads, a conversation with streamed reasoning, cited answers and a plan that waits for approval then runs step by step, and an artifacts panel with…
- [Portfolio overview](https://beamline.io/components/portfolio): What an account holds and how it is doing: the total that rolls as prices tick with today's change, value over time against a benchmark, allocation by…
- [AI image studio](https://beamline.io/components/image-studio): Write a prompt, pick a shape, a style and how many, and watch the variations generate side by side; each one opens full screen and can be upscaled or…
- [Model playground](https://beamline.io/components/model-playground): Try one prompt on up to three models side by side: pick each model with its price and speed in view, set the system prompt, temperature and length once…
- [Artifact workbench](https://beamline.io/components/artifact-workbench): Where the things an assistant makes are checked before they leave: every document, piece of code, small app and data result from a conversation, each…
- [Analytics dashboard](https://beamline.io/components/analytics-dashboard): A SaaS overview in the app shell, fed by your metrics hook: range and segment filters drive KPIs, new and expansion revenue, channels, plan mix, uptime…
- [Sales dashboard](https://beamline.io/components/sales-dashboard): A sales leader's week in one screen: closed won against quota and pace, pipeline coverage and win rate, the quarter's run toward target with the forecast…
- [Product analytics](https://beamline.io/components/product-analytics): How people use the product: a funnel whose steps are the selector, where the people lost at a step went (saved as a cohort in one action), retention by…
- [Status dashboard](https://beamline.io/components/status-dashboard): An operations view of service health: the overall state in one line, every service with its status, uptime, latency now and 90 days of history, latency…
- [CRM pipeline](https://beamline.io/components/crm): A pipeline screen: KPIs and stage mix derived from a virtualised deals grid with inline edit, bulk moves and delete with undo; a row opens the deal in a…
- [Helpdesk inbox](https://beamline.io/components/helpdesk-inbox): A support team's inbox: views with counts, a virtualised ticket queue with search, priority filters and live SLA clocks, and the open ticket with its…
- [Project board](https://beamline.io/components/project-board): A team's sprint as a board: the sprint's goal, points done and days left, filters by person and label, the work as cards in columns with work-in-progress…
- [Team calendar](https://beamline.io/components/team-calendar): A team's schedule: the people and shared calendars to show (each its colour), a month to jump by, who is out this week, and the week, day or month of…
- [Invoices](https://beamline.io/components/invoices): Accounts receivable in one screen: what is outstanding, overdue and paid, the invoices by status in a virtualised grid with bulk reminders, and each…
- [Orders admin](https://beamline.io/components/orders-admin): A shop's order desk: today's orders and revenue, quick filters for what needs doing (to fulfil, unpaid, returns), a virtualised orders grid, and the…
- [Contact profile](https://beamline.io/components/contact-profile): One customer on one page: who they are and how to reach them (fields edit in place), their lifecycle stage and owner, the deals they are in with what is…
- [File manager](https://beamline.io/components/file-manager): Files and folders in one screen: the views (My files, Shared, Recent, Starred, Trash) with storage at the foot, a folder tree beside the files…
- [Projects](https://beamline.io/components/projects): A team's projects: the portfolio by health (on track, at risk, off track) with progress, lead, team and due date, filtered and searched; a project opens…
- [Report builder](https://beamline.io/components/report-builder): Build a chart from your metrics without code: choose metrics, how to group them over time, an optional breakdown, filters, the range and the chart, see…
- [Voice agent](https://beamline.io/components/voice-agent): A voice agent in three layouts on one session: a support panel that mixes typing and talking, a call screen with the agent's orb and one call button, and…
- [Admin users](https://beamline.io/components/admin-users): Your staff's view of every account: headline counts that follow the filters, a virtualised users table with search, status and plan filters and sorting…
- [Billing & invoices](https://beamline.io/components/billing): The billing page of a subscription: the plan with its seats and renewal, cancel and resume in place, the card on file with a checked update form, metered…
- [Onboarding checklist](https://beamline.io/components/onboarding-checklist): The first screen after sign-up: a welcome with how far set-up has come, a checklist of the few steps that make the product useful (each with why, how…
- [Roles & permissions](https://beamline.io/components/roles-permissions): What each role may do, as one matrix: permissions grouped by area down the side, roles across the top with their head counts, a check per cell; a group's…
- [Security](https://beamline.io/components/account-security): A person's account security on one page: how protected they are at a glance with the next step to take, password change with strength and rules, two-step…
- [AI support console](https://beamline.io/components/support-console): The support team's side of AI support: a queue sorted by what is due first (who the assistant is still handling, who asked for a person, who waits), the…
- [Conversation history](https://beamline.io/components/conversation-history): Past conversations with an assistant, ready to pick up again: the list by day with bookmarks and unsent drafts, a search through every message that…
- [Agent runs monitor](https://beamline.io/components/agent-runs): Every run of your agents in one place: success rate, run time, tokens and spend; the last runs as a strip of status blocks; a live table where running…
- [Social media scheduler](https://beamline.io/components/social-scheduler): Plan posts across your social accounts: a week calendar where every post sits at its time in its account's colour and moves by drag, a queue of what goes…
- [Team chat](https://beamline.io/components/team-chat): A team's messages in one screen: channels and direct messages with unread counts and mentions, who is online, the conversation with reactions, receipts…
- [Knowledge base manager](https://beamline.io/components/knowledge-base): What your assistant knows and whether it is fresh: sources with live sync status (syncing with progress, out of date, failed with the reason and Retry)…
- [Meeting and call review](https://beamline.io/components/meeting-review): Everything a recorded call left behind on one screen: the recording with its transcript by speaker, an AI summary that streams in, action items with…
- [Order history and fills](https://beamline.io/components/order-history): Every order the account placed and every fill it got, for a period: totals for volume, fees, fill rate and maker share; orders with their status and how…
- [Integrations](https://beamline.io/components/integrations): A directory of the apps a product connects to: search and categories with counts, connected apps first with their state (Connected, Needs attention), a…
- [Plan comparison](https://beamline.io/components/plan-comparison): Plans side by side against every feature: prices that roll between monthly and yearly, the current and recommended plan marked, a header that stays in…
- [System pages](https://beamline.io/components/system-page): The four pages a product shows when the normal one cannot: page not found (search and the likely places), something broke (try again, an error id to…
- [API keys & webhooks](https://beamline.io/components/api-keys): The developer page of a SaaS: API keys with environment, scopes, last use and expiry, created through a form whose secret is shown once (copy it before…
- [Audit log](https://beamline.io/components/audit-log): Who did what, to what, when and from where, for a whole workspace: newest first and grouped by day, people with avatars and keys or systems with toned…
- [Team & members](https://beamline.io/components/team-members): The people page of a workspace: seats used against the plan, members and pending invitations in one list with search and a role filter, role changes that…
- [Notification preferences](https://beamline.io/components/notification-preferences): What reaches a person and where: events grouped by area down the side, channels (email, push, Slack, in-app) across the top, a switch per pair that saves…
- [Workspace switcher](https://beamline.io/components/workspace-switcher): Moving between workspaces and making a new one: a switcher for the top of your sidebar (the current workspace's mark, name and plan; a searchable list…
- [Step form](https://beamline.io/components/step-form): The finished frame for any multi-step form you compose — onboarding, intake brief, questionnaire, booking, application: a wide card with progress, the…
- [Changelog feed](https://beamline.io/components/changelog-feed): An in-app What's new page: release notes grouped by month with tags, versions, pictures and details, a tag filter with counts, entries since your last…
- [Page header](https://beamline.io/components/page-header): The top of a record or project page: breadcrumb, title with status, description and meta, a primary action with secondary actions that fold into a More…
- [Empty states](https://beamline.io/components/empty-states): The five empty moments every product has, written and wired: first use with a first step, no results with the filters to clear, an error with retry and a…
- [Settings](https://beamline.io/components/settings): Profile and workspace settings with one draft and real save handler. Personal mode omits workspace data; optional profile fields share validation…
- [Auth page](https://beamline.io/components/auth): The whole sign-in / sign-up route: product mark, a quiet dotted field with a light that follows the mouse, an optional notice, the SignIn and SignupForm…
- [Sign in](https://beamline.io/components/sign-in): The sign-in card: email and password, a one-time code or a magic link, passkeys and single sign-on, with validation, progress, errors and a signed-in…
- [Sign up form](https://beamline.io/components/signup-form): The account creation card: single sign-on, name, work email and a password with strength and Caps Lock hints, terms consent, inline validation, your…