Agent console

The agent console is a three-pane layout: the conversation list on the left, the message thread in the middle, and the contact panel on the right. All three panes are independently resizable — drag the divider between any two.

Take a tour

The first time you open the inbox, a short guided walkthrough runs automatically. It dims the screen, spotlights one part of the console at a time, and shows a popover with a title, a description, a step counter, progress dots, and Back / Next / Skip buttons. The inbox tour has six steps: the conversation list, the Queue, the conversation thread, the reply composer, the Transfer & Close actions, and the contact panel. Press Esc or click Skip to leave at any point.

The tour auto-runs only once per browser. To replay it later, click the Take a tour button in the top app-bar, or the help (question-mark) icon in the conversation-list header. The tour is in English only.

Left pane — conversation list

• View tabs — Agent / Bot. The Bot tab is only visible to supervisors, admins, and super-admins.
• Sub-tabs (Agent view) — All / Mine / Queue / Resolved, with live counts next to each. The Queue count is highlighted in red when there are chats waiting to be picked up.
• Search — filters by contact name, phone, email, assigned-agent name, or department.
• Filter button — opens a panel for channel, tag, and date-range filters. The button shows a small azure dot when any filter is active.

A conversation card shows the contact’s initials, name, last-message preview, time since the last message, up to two tags (department + queue/resolved state), and one of three action affordances on the bottom row:

• Pick Room chip — appears on unassigned queue conversations. One click self-assigns the chat to you and opens it.
• Recipe: … chip — shown when a bot is currently handling the conversation.
• Assigned-agent badge — small avatar + name when another agent owns the chat.

Conversations with a breached SLA float to the top of the list with a red left border and an Overdue tag.

Middle pane — message thread

The header strip across the top shows, from left to right: a status pill (Active conversation / Bot handling / In queue / Pending / Closed), the assigned-agent chip, a Transfer button, the current sub-state chip (Waiting on me / Waiting on user), and a red split-button Close Chat with a dropdown for “Set waiting on user” and “Set waiting on me”.

When a supervisor, admin, or super-admin opens a conversation assigned to another agent, a supervisor action panel appears above the composer with a Whisper button for coaching the agent privately. See Whispers & internal notes.

The thread itself shows inbound messages on the left, outbound on the right. System events (transfers, status changes) appear as centered horizontal lines with a label. Whisper bubbles from supervisors render with a violet accent — see Whispers & internal notes.

The composer at the bottom carries two mode toggles:

• Message — the default. Sends a customer-facing reply via the channel.
• Add Note — flips the composer to amber. Notes are visible to other agents and supervisors but never sent to the customer.

The composer surfaces rich-text controls (bold, italic, strikethrough), an attach-media button, an emoji picker, a /canned slash menu for canned responses, a {{ }} variable picker, the channel name + character counter, and a Send button. Ctrl+Enter sends.

Sending an attachment

1. In the composer toolbar, click the paperclip (attach-media) button.
2. Pick a file. Images, PDF, and DOC/DOCX files are supported, up to 25 MB per file.
3. The file uploads automatically — no separate send step. While the upload is in progress the paperclip button is dimmed and disabled, and a ”📎 Uploading attachment…” status line appears below the toolbar.
4. If the upload fails — for example the file is over 25 MB, the type is not supported, or the network drops — an inline red error line appears below the toolbar. Click the ”×” on that line to dismiss it, then try again.

Every attachment is virus-scanned before it can be opened, so a delivered attachment moves through these states in the thread:

• 📎 Attachment — scanning for viruses… — the scan is still running; the file is not yet openable.
• 📎 Attachment blocked — failed security scan — the scan found a problem and the file is blocked. Ask the contact to resend it.
• Passed the scan — the message bubble shows a rich preview of the file instead of a plain link:
  • Images render as an inline thumbnail (a cropped preview). Click it to open the file in the in-app attachment viewer.
  • Audio files render as an inline audio player you can play directly in the thread.
  • Video files render as an inline video player you can play directly in the thread.
  • PDFs render as a compact file card showing the file type and size. Click the card to open the file in the in-app attachment viewer.
  • Other documents (Word, Excel) render as a compact file card showing the file type and size. Click the card to download the file.

Clicking an image thumbnail or a PDF file card opens the attachment viewer — a full-screen dark overlay above the inbox. Attachments no longer open in a separate browser tab. Inside the viewer:

• Top bar — shows the attachment’s generated display name above the position counter. The name follows the format <code> · <kind> · #<seq> — for example “4821 · Image · #3”, where <code> is a stable 4-digit code derived from the conversation (the same conversation always produces the same code), <kind> is the file type, and <seq> is the attachment’s 1-based position in the conversation in thread order.
• Gallery navigation — the left and right arrows (or the ← / → keyboard keys) step through every image and PDF in the conversation, and a counter such as “3 of 7” shows your position.
• Images — scroll to zoom, double-click to zoom in or out, and drag to pan once zoomed in. On-screen zoom controls (− / a percentage / + / Reset) sit at the bottom; the + / - / 0 keys also zoom in, zoom out, and reset.
• PDFs — render in an embedded preview frame inside the viewer.
• Download — the Download button in the top bar saves the current file. The file is saved using a filesystem-safe form of the generated name — for example “4821-Image-3.png” — rather than a generic “attachment-…” filename.
• Closing — click the ✕ button, press Esc, or click the dark backdrop.

Right pane — contact panel

A round avatar, contact name (click to edit inline), channel label, and phone number sit at the top. Below the header are two tabs:

• Information — a series of stacked sections: Conversation timing (Open for / Queued), an SLA-breached banner when applicable, Tags (with a + Add chip and a controlled vocabulary autocomplete from Settings → Tags), Recipe Variables (any session variables set by the bot), Bot session details (only on bot-handled conversations), Conversation History (every prior conversation with this contact — click to jump), and Attachments (every media file shared in the current conversation — see below).
• Smart Plugs — every plug visible to your role, plus a Records section listing the contact’s custom entity records grouped by type. See below.

The Smart Plugs tab is where most of the agent’s external-system work happens during a chat:

• Smart Plug cards — each card has a name, optional description, plug-level inputs, and a row of action buttons (e.g. Create Ticket, Resolve, Escalate). Buttons that need extra information open an inline form before firing. Buttons marked as destructive ask for confirmation in a small modal.
• Records sections — one collapsible section per Custom Entity type the admin has marked as panel-visible. Records render either as a table or as a list (admin-configured per entity). Clicking a row opens a drawer with two areas: read-only “Synced from integration” fields (refreshed by Smart Plugs, never editable here) and “Editable fields” for manual data the agent owns. A Refresh button on the section header re-fires the populating plug.

Plugs configured with Auto-fire on open run automatically when the conversation is selected, so eligibility/policy data is already present by the time the agent reads the first message.

Attachments section

The Attachments section sits on the Information tab, directly below Conversation History. It collects every media file shared in the currently-open conversation into one place, so an agent doesn’t have to scroll the thread to find a file the contact sent earlier.

• The section header shows a count — for example “Attachments (3)”. If the conversation has no media, it shows “No attachments”.
• Each row lists one attachment with a file-type icon, a generated display name, and the file size. The name follows the format <code> · <kind> · #<seq> — for example “4821 · Image · #3”, where <code> is a stable 4-digit code derived from the conversation (the same conversation always produces the same code, tying the attachment back to its conversation), <kind> is the file type (Image, PDF document, etc.), and <seq> is the attachment’s 1-based position in the conversation in thread order.
• Clicking a row opens that file in the in-app attachment viewer — the same full-screen overlay used when clicking a thumbnail or file card in the message thread, with the generated name in the top bar, gallery prev/next, zoom, PDF preview, Download, and close via ✕ / Esc / backdrop. Downloads are saved using a filesystem-safe form of the generated name (e.g. “4821-Image-3.png”).
• A file still being virus-scanned shows “Scanning…” and is not yet clickable; it becomes a link once the scan passes.

Common actions

Resizing the panes

Each divider between panes (list ↔ thread, thread ↔ contact panel) is a 6-pixel hit area that lights up azure on hover and during a drag. The list can range from 240 to 560 pixels; the contact panel from 240 to 520 pixels. Sizes persist per browser via localStorage.

Accessibility

• Every interactive element has a visible focus ring.
• Status icons carry text labels.
• Both light and dark themes meet WCAG AA contrast for body text.
• The list resizer is exposed as an ARIA separator with keyboard support (Left/Right arrows; hold Shift for larger steps).