Chat
Access: All roles.
URL: /staff/chat
Chat is the primary interface for managing customer conversations. The layout is a two-panel split: sessions on the left, messages on the right. Updates arrive in real time — no page refresh needed.
Page layout
Section titled “Page layout”Left panel — Session list
Section titled “Left panel — Session list”The session list shows all conversations in the workspace, sorted by most recent activity. Each session row shows:
- Contact name (or “Anonymous” for unidentified visitors)
- Last message preview — truncated to one line
- Timestamp — relative time (e.g., “2m ago”, “1h ago”, “3d ago”)
- Status badge — colored pill (active, escalated, closed, archived)
- Unread count — badge number when there are new user messages
Clicking a session row selects it and loads the full message thread in the right panel.
Filter pills
Section titled “Filter pills”Above the session list, a row of filter pills narrows the visible sessions:
| Filter | Options |
|---|---|
| Status | Active, Escalated, Closed, Archived |
| Tag | Product Inquiry, Project Guidance, Pricing Quote, Technical Support, Order Status, Complaint, General |
| Channel | Per-channel filter (e.g., “Website Chat”, “Facebook”) |
| Contact | By contact name |
Filters combine (AND logic). Each pill shows a count in parentheses — the number of sessions matching that filter criterion. Clicking a pill toggles it. Selecting multiple pills within the same category narrows further; selecting across categories intersects the results.
The active filter set is reflected in the session list immediately — no page reload.
Right panel — Message thread
Section titled “Right panel — Message thread”When a session is selected, the right panel shows:
- Session header — contact name, channel icon, and inline status/tag dropdowns
- Message timeline — scrollable conversation history
- Composer — text input at the bottom for replying
Message bubble styling
Section titled “Message bubble styling”| Role | Position | Color | Shape |
|---|---|---|---|
| User (customer) | Left | Yellow | Rounded |
| Agent (Stenbee AI) | Left | Dark gray | Rounded |
| Staff (you) | Right | Blue | Rounded |
Each bubble shows the sender name (or role) above the message and a timestamp. Attachments (images, files) render inline within the bubble.
Attachments
Section titled “Attachments”Messages with attachments display the file directly in the bubble:
- Images: Rendered inline as a thumbnail
- Files: Shown as a download link with filename
Core interactions
Section titled “Core interactions”Replying to a conversation
Section titled “Replying to a conversation”- Select a session from the left panel
- Type your message in the composer at the bottom of the right panel
- Press Enter or click the Send button to submit
The message appears immediately in the timeline. The agent (Stenbee) may respond automatically based on the system prompt and knowledge base.
Editing session status
Section titled “Editing session status”Click the status badge in the session header (or directly on a session row) to open a dropdown. Select a new status:
| Status | Meaning |
|---|---|
| Active | Conversation is ongoing |
| Escalated | Needs human attention flagged |
| Closed | Conversation resolved |
| Archived | Removed from active view but retained |
The change is saved immediately and reflected in the session list.
Editing session tags
Section titled “Editing session tags”Click the tag badge in the session header to open a dropdown. Select a new tag (Product Inquiry, Project Guidance, Pricing Quote, Technical Support, Order Status, Complaint, or General). The change is saved immediately.
Tags help with filtering and reporting. Standardize tag usage across your team for consistent categorization.
Archiving a session
Section titled “Archiving a session”Click the Archive button in the session actions. The session moves from active to closed and later to archived. Archived sessions remain in the database but are hidden from the default view (switch to the “Archived” status filter to see them).
Deleting a session
Section titled “Deleting a session”Click the Delete button. A confirmation dialog appears (“Are you sure you want to delete this session?”). Confirm to permanently delete the session and all its messages. This action is irreversible.
Bookmarking conversations
Section titled “Bookmarking conversations”You can bookmark specific sessions or filter by contact directly from the Contacts page. This is useful for quickly returning to important conversations.
Real-time updates
Section titled “Real-time updates”The chat panel stays in sync automatically:
| Event | What happens |
|---|---|
| New message from customer | Session appears in the list; unread count updates; a short notification sound plays |
| New message in current session | The message appears in the thread immediately |
| Status or tag change by another staff | The session list updates to reflect the change |
| Someone is typing | A typing indicator appears in the thread header |
Notification sound
Section titled “Notification sound”When a new message arrives from a customer and the session is not currently selected, a short beep plays.
Connection recovery
Section titled “Connection recovery”If the live connection drops momentarily, the panel automatically switches to periodic updates until the connection is restored. You won’t miss messages.
Mobile layout
Section titled “Mobile layout”On narrow screens, the two-panel layout collapses:
- The session list fills the screen
- Selecting a session pushes to a full-screen message view
- A back button returns to the session list
States
Section titled “States”| State | What you see |
|---|---|
| Loading | Left panel shows placeholder rows; right panel shows skeleton |
| No sessions | ”No conversations yet” message in the session list |
| No session selected | Right panel shows a prompt to select a conversation |
| No filter matches | ”No sessions match your filters” message |
| Session deleted | The selected session disappears; right panel resets |
- Bookmark frequently monitored conversations for quick access
- Filter combinations are powerful — try “Active + Product Inquiry” to focus on live sales conversations
- Batch-archive old sessions periodically to keep the active list manageable