Helpdesk inbox

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

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 conversation, reply composer, status, priority, assignee and the requester's details with internal notes.

Use it for

Customer support work: triage a queue by urgency and SLA, answer a ticket, hand it to a teammate, mark it pending or solved.

Not for

Chat between teammates (chat-thread).
Notifications about other work (notification-center).
A sales pipeline (crm).

Anatomy

app shell: the inbox views (Yours, Unassigned, All open, Breaching soon, Solved) as navigation with counts
queue: search, priority chips with counts, then one row per ticket (requester, subject, preview, priority, SLA clock, assignee, unread mark), virtualised
ticket: subject and requester, status (Open · Pending · Solved), priority, assignee menu, the conversation and the reply composer (the primary action)
details: requester, company and plan, channel, opened and due times, tags, internal notes; a sheet behind Details when the room is narrower

States

loading (the queue holds its rows' shape)
failed to load (the error with Try again in the queue's place)
a view with no tickets (says what lands there)
no ticket matches the search or filters (Clear filters)
SLA: time left, due soon (under an hour), breached — each a glyph and words, never colour alone
a change saving and refused (status, priority, assignee go back; the reason sits under the ticket header with Try again)
saving locks only that ticket's edit controls; refusal restores only its changed fields and preserves other tickets' edits
a reply sending, sent, failed with Retry (the thread's own states)
narrow room: the queue or the ticket, with Back

Keyboard

↑/↓ in the queue move to the previous or next ticket and open it; Home/End to the ends (one row is in the tab order)
the status is a radio group (arrows); Assign is a menu
Esc in a narrow room goes back from the ticket to the queue
⌘Enter sends the reply (the composer's own)

Motion

The chosen row lights at once and keeps keyboard focus as the arrows move it (the list scrolls it into view); a status or priority change eases the badge colours in place; a reply grows into the thread and shows sending → sent (the thread's own); the Details sheet slides in on --motion-in. The SLA clock steps once a minute and never animates. Reduced motion: changes are immediate.

Props

Prop	Type	Default	Description
`tickets / defaultTickets / onTicketsChange`	`Ticket[]`	—	The queue, controlled or not; every change arrives as the whole new list.
`onTicketChange`	`(id: string, patch: TicketPatch) => Promise<void> \| void`	—	Saves a status, priority or assignee change; a rejection puts it back and shows why.
`conversations / defaultConversations / onConversationsChange`	`Record<string, ChatMessage[]>`	—
`onReply`	`(ticketId: string, draft: ChatDraft) => Promise<void> \| void`	—	Sends the reply; the thread shows sending, sent or failed with Retry.
`notes / defaultNotes / onNotesChange`	`Record<string, ThreadComment[]>`	—	Internal notes per ticket.
`agents` (required)	`{ id: string; name: string; photo?: string }[]`	—
`me` (required)	`string`	—	The signed-in agent's id.
`view / defaultView / onViewChange`	`HelpdeskView`	—
`openTicket / defaultOpenTicket / onOpenTicketChange`	`string \| null`	—
`loading / error / onRetry`	`boolean / Error \| null / () => void`	—
`product`	`string`	`"Support"`
`className / style / ref`	`string / CSSProperties / Ref<HTMLDivElement>`	—

Built from

Dependencies

@tanstack/react-virtual, lucide-react

Import

import { HelpdeskInbox } from "@/blocks/helpdesk-inbox/helpdesk-inbox";

Get it

Helpdesk inbox 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