AI support console

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

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 with the assistant's turns marked, a suggested reply that streams in with its sources and goes into the composer in one press, the customer's context and case summary, and the day's resolution rate, CSAT and first response.

Use it for

The agent view behind an AI support assistant: take over escalations, answer with AI help, resolve.
Any shared inbox where conversations have owners, due times and a customer behind them.

Not for

The customer's side of the chat (support-chat).
Talking with colleagues (team-chat).
A CRM pipeline of deals (crm).

Anatomy

header: the day's figures (open, waiting for a person, AI resolution rate, CSAT, median first response)
queue: a view switch (needs a person, mine, AI handling, all) with counts; each conversation with the customer, channel, the last line, its state in a word, and the time left before its reply is due (late in red, with the word Late)
conversation: the customer and their account; turns from the customer, the assistant (marked AI, with its sources) and people; handoff and resolution as markers
suggested reply: written by the AI from the conversation and the help centre, streaming, with its sources and how sure it is; Use puts it in the composer, Write again asks for another
composer and the one primary action, Send; Resolve and assignment in the header's menu
customer: plan, value, since when, the AI's summary of the case, tags and past ratings

Variants

0: room: queue and conversation from 48rem; the customer column from 80rem, in a sheet below; on a phone the queue and the conversation are one view at a time

States

loading the queue / a conversation
empty queue for the view (all caught up)
suggestion writing / ready / failed (Retry) / not asked yet
conversation the AI is still handling (take over), escalated, waiting on the customer, resolved
reply due soon / late
unknown value or rating (—)
Sending a reply preserves any next draft typed while the previous send is pending.

Keyboard

Queue: a list of buttons; Enter opens a conversation
Use suggestion: puts the text in the composer and moves focus there
Composer: ⌘/Ctrl+Enter sends
Customer sheet (narrow rooms): Esc closes

Motion

The open conversation's plate travels in the queue; the suggestion flows in at reading pace and lands in the composer with one soft sweep; due times count down once a minute; a resolved conversation leaves its view as its counts roll. Idle: nothing runs but a minute clock.

Props

Prop	Type	Default	Description
`conversations` (required)	`ConsoleConversation[]`	—	{ id, customer, channel, status: ai \| escalated \| waiting \| resolved, assignee?, messages, updatedAt, dueAt?, unread?, summary?, tags?, ratings? }
`selected / defaultSelected / onSelectedChange`	`string`	—
`view / defaultView / onViewChange`	`"escalated" \| "mine" \| "ai" \| "all"`	—
`suggestion`	`ConsoleSuggestion \| null`	—	{ conversationId, status: writing \| ready \| error, text, sources?, confidence? } for the open conversation.
`stats`	`{ open, escalated, aiResolution, csat, firstResponse }`	—	The day's figures; any can be null.
`me` (required)	`{ id: string; name: string }`	—
`onSuggest`	`(conversationId: string) => void`	—
`onSend`	`(conversationId: string, text: string) => void \| Promise<unknown>`	—
`onResolve / onTakeOver / onAssign`	`(conversationId: string, ...) => void`	—
`loading`	`boolean`	—
`className / classNames / style / ref`	`string / SupportConsoleClassNames / CSSProperties / Ref<HTMLDivElement>`	—

Built from

segmented-control
item
avatar
badge
message
citations
marker
textarea
button
dropdown-menu
text-shimmer
slot-text
sheet
empty-state
skeleton
bar-list

Dependencies

lucide-react, use-stick-to-bottom

Import

import { SupportConsole } from "@/blocks/support-console/support-console";

Get it

AI support console 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