Support / 14 primitives + composition

Customer support + helpdesk primitives

Helpdesk surfaces for the Mufflermen workshop crew — ticket queues, conversation threads, internal notes, macros, SLAs, CSAT, NPS, knowledge-base suggestions, customer profile, unified multi-channel inbox, triage automation and AI suggested replies. Realistic Mufflermen scenarios — Hilux fitment queries, Manta warranty claims, Bay 2 reschedules. Visual reference only — no real backend wired.

Production answer

Customer support + helpdesk primitives is a reusable Oak Flats Muffler Men UI primitive with documented states, accessibility expectations, theme behavior, and implementation evidence.

Primary CTAReview Customer support + helpdesk primitives states
Generative search brief

Customer support + helpdesk primitives: Helpdesk surfaces for the Mufflermen workshop crew — ticket queues, conversation threads, internal notes, macros, SLAs, CSAT, NPS, knowledge-base suggestions, customer profile, unified multi-channel inbox, triage automation and AI suggested replies. Realistic Mufflermen scenarios — Hilux fitment queries, Manta warranty claims, Bay 2 reschedules. Visual reference only — no real backend wired.

Visual reference only — no real backend wired
Primitive 01

Ticket row

Id, subject, customer avatar, status chip, priority chip, assignee, last update and live SLA chip — the workhorse helpdesk list row.

StatelessOpen
Primitive 02

Priority chip

P0 critical, P1 high, P2 normal, P3 low. P0 pulses to draw the eye. Short or long label variants.

StatelessOpen
Primitive 03

Support conversation thread

Public replies interleaved with internal notes — channel indicator (email / chat / SMS / phone) per entry plus author, timestamp and visibility chip.

StatelessOpen
Primitive 04

Internal note composer

Yellow-tinted composer with a Not-visible-to-customer badge, @-mention picker, and ⌘+↵ submit.

Stateful · formOpen
Primitive 05

Macro picker

Searchable macro list, live preview pane, variable placeholder chips, Insert button (aria-pressed).

Stateful · filterOpen
Primitive 06

SLA timer chip

Live SLA timer — green > 4h, amber 1-4h, red < 1h, critical-red when breached. role=status + aria-live.

StatelessOpen
Primitive 07

Ticket status workflow

New → Open → Pending → On hold → Resolved → Closed; current state highlighted; allowed-transition chips below.

StatelessOpen
Primitive 08

CSAT score card

Average score, smiley + star scale, response count, rating histogram and customer comment excerpt.

StatelessOpen
Primitive 09

NPS survey card

0-10 picker with promoter / passive / detractor colour-coding, follow-up textarea and previous-response trend chip.

Stateful · formOpen
Primitive 10

Linked articles suggester

Side panel — KB titles, category caption, match-score chip per article, open-in-side-pane CTA.

StatelessOpen
Primitive 11

Customer profile sidebar

Avatar, name, contact, lifetime value, vehicles list, prior tickets and pinned internal notes.

StatelessOpen
Primitive 12

Multi-channel inbox

Tab strip across Email / Chat / SMS / Phone / X / Facebook with per-channel count + filter chips. role=tablist.

Stateful · tabsOpen
Primitive 13

Triage rules card

If [condition], then [route to team] + [set priority] + [tag with]. Uses the existing form pattern.

StatelessOpen
Primitive 14

AI suggested reply card

Confidence chip, suggested text preview, optional rationale, Use / Refine / Reject actions.

Stateful · choiceOpen
Composition

Full helpdesk

Composed helpdesk — MultiChannelInbox + TicketRow list + SupportConversationThread + CustomerProfileSidebar right + LinkedArticlesSuggester + InternalNoteComposer + MacroPicker open.

CompositionOpen