Live chat / 14 primitives + composition

Live chat operator console

Operator-side primitives for the Mufflermen storefront — synchronous web chat surfaces that sit between the inbox primitives (peer-to-peer messaging) and the support primitives (asynchronous tickets). Realistic scenarios: Mick Davis asking about Hilux fitment, Leah following up on a Commodore quote, an anonymous visitor lodging a Manta DPF warranty rattle, Tom checking on Falcon BA mid-pipe stock. Visual reference only — no real backend wired.

Production answer

Live chat operator console is a reusable Oak Flats Muffler Men UI primitive with documented states, accessibility expectations, theme behavior, and implementation evidence.

Primary CTAReview Live chat operator console states
Generative search brief

Live chat operator console: Operator-side primitives for the Mufflermen storefront — synchronous web chat surfaces that sit between the inbox primitives (peer-to-peer messaging) and the support primitives (asynchronous tickets). Realistic scenarios: Mick Davis asking about Hilux fitment, Leah following up on a Commodore quote, an anonymous visitor lodging a Manta DPF warranty rattle, Tom checking on Falcon BA mid-pipe stock. Visual reference only — no real backend wired.

Visual reference only — no real backend wired
Primitive 01

Chat queue inbox

Operator's pending chats — Mine / Unassigned / At-risk filter chips, SLA risk colour-coding and per-row wait timer.

Stateful · filterOpen
Primitive 02

Active chat window

Centre pane — header + bubble thread (compose MessageBubble) + ReplyComposer with mention picker.

Stateful · composeOpen
Primitive 03

Operator status pill

Available / Away / In wrap / Busy availability pill — status-dot pulse + auto-set on inactivity.

StatelessOpen
Primitive 04

Quick replies + macro panel

Macro library docked beside composer — pinned shortcut chips above MacroPicker for one-tap inserts.

Stateful · filterOpen
Primitive 05

Customer context card

Right-rail visitor profile — avatar, persona chip, page-viewing block, cart contents, past chats + open ticket counts.

StatelessOpen
Primitive 06

Co-browsing screen viewer

Mock browser frame showing what the visitor sees + animated pointer indicator + Request control CTA.

StatelessOpen
Primitive 07

Sentiment indicator

Frustrated → Neutral → Delighted real-time meter (compose RadialMeter + Chip) with recent-shift indicator.

StatelessOpen
Primitive 08

Transfer chat modal

Choose operator or team + transfer-with-context toggle + hand-off note (compose BasicDialog).

Stateful · dialogOpen
Primitive 09

Wrap-up form

Post-chat outcome chips + tags + notes + send-transcript toggle, all wrapped in a modal.

Stateful · dialogOpen
Primitive 10

Chat volume gauge

Live team chat-load radial meter + queue length chip + projected ETA chip — role=status, aria-live.

StatelessOpen
Primitive 11

Chat SLA timer chip

Per-chat first / next / resolve timer with tone-shifting (composes support/SlaTimerChip).

StatelessOpen
Primitive 12

Multi-chat tabs

Tab strip across active chats — avatar + name + unread badge + close affordance + role=tab.

Stateful · tabsOpen
Primitive 13

Operator team presence

Avatars with status dots + role caption + current chat load chip — Slack-like presence panel.

StatelessOpen
Primitive 14

KB snippet suggester

Context-aware article list with match-score chip, preview + Insert-in-reply CTA + open in side pane.

StatelessOpen
Composition

Full operator console

Composed console — Queue left + MultiChatTabs top + ActiveChatWindow + CustomerContextCard right + macros + sentiment + KB + WrapUpForm + TransferChatModal triggers.

CompositionOpen