Chat Interface

The chat interface occupies the center panel of the Agent Desktop whenever you have a conversation selected. It is a vertically stacked set of components that provide full context and controls for the active interaction, regardless of channel (web chat, voice, SMS, WhatsApp, or email).

Component Stack

When a conversation is selected, the center panel renders the following components in order from top to bottom:

Component	Purpose
ChatHeader	Channel identity, session status, risk indicators, and action buttons
ChatMetaBar	Metadata row showing queue, priority, interaction time, escalation origin, and sentiment
RescueTacticsBanner	AI coaching suggestions when the conversation is at risk
VoiceControlBar	Voice call controls (shown only for voice channel conversations)
MessageList	Scrollable message history with timestamp dividers and typing indicator
QuickReplyBar	Quick reply shortcuts, attach file, notes, and email actions
ChatInput	Text input field with send button
ChatToolbar	Bottom navigation bar with settings and channel shortcuts

If no conversation is selected, the center panel shows an empty state with the message "Select a conversation to begin."

imageComplete chat interface showing ChatHeader with channel icon and session badge, ChatMetaBar with queue and priority, message list with timestamp dividers and typing indicator, quick reply bar, chat input field with send button, and bottom toolbar

Full chat interface layout

ChatHeader

The header bar sits at the top of the conversation and provides identity, status, and action controls.

Left Section

• Back button -- Displayed when navigating from the Inbox view. Click to deselect the conversation and return to the mailbox list.
• Channel icon -- Color-coded icon representing the channel (chat, voice, WhatsApp, SMS, email).
• Title -- Reads as "[Channel] with [Contact Name]", for example "Chat with John Doe". If the customer name is not available, it displays "Unknown Visitor".
• Session badge -- A pill that indicates the current session state with a colored status dot.
• Risk badge -- Displays the conversation risk level and score when not LOW.
• Sentiment indicator -- A small dot with an optional trend arrow showing sentiment trajectory.

Session Badge States

The session badge changes depending on the conversation channel:

Channel	Badge Label	Badge Style
Web / Chat	Connected	Green dot, green background
Voice	On Call	Green dot, green background
Email	Thread Open	Blue dot, blue background
SMS	Open	Blue dot, blue background
WhatsApp (active)	Session Active	Green dot, green background
WhatsApp (< 2h remaining)	Session Active	Amber pulsing dot, amber background
WhatsApp (expired)	Session Expired	Red dot, red background

Risk Badge

The risk badge appears when the conversation risk level is MEDIUM, HIGH, or CRITICAL. It shows the level text with a color-coded icon:

Level	Color	Icon
LOW	Green	check_circle (hidden by default)
MEDIUM	Amber	info
HIGH	Orange	warning
CRITICAL	Red	error

Hovering over the badge shows a tooltip with the format "Risk: LEVEL (SCORE/100)".

Sentiment Indicator

The sentiment dot uses a trajectory array of recent scores to determine the trend:

• Improving (green dot, trending_up arrow) -- Recent scores are rising by more than 0.15
• Stable (gray dot, no arrow) -- Scores are within 0.15 of each other
• Declining (red pulsing dot, trending_down arrow) -- Recent scores are falling by more than 0.15

WhatsApp 24-Hour Timer

For WhatsApp conversations, a countdown timer appears in the right section showing the remaining time in the 24-hour messaging window. The timer updates every minute.

• When more than 2 hours remain, the timer displays in gray (e.g., "18h 42m")
• When less than 2 hours remain, the timer turns amber and the text becomes more prominent
• When the window expires, the timer reads "Expired" and the session badge changes to "Session Expired"

Right Section Buttons

Button	Icon	Description
Start Video	videocam	Initiates a video call for the current conversation. Only shown for chat channels when no video session is active.
Simulate Escalation	auto_awesome	Opens the escalation simulator modal. Only shown when the conversation is HIGH or CRITICAL risk.
Quality Score	grade	Opens the quality score modal for evaluating the interaction.
Schedule Callback	phone_callback	Opens the callback scheduling modal with the customer's phone number pre-filled.
End	call_end	Ends the interaction. If a video call is active for this conversation, it is also terminated. Triggers the disposition workflow.

TIP

The End button also completes the associated work item, which triggers the disposition modal. Always select an appropriate disposition code before the conversation is fully closed.

ChatMetaBar

The metadata bar sits directly below the header and displays a horizontal row of conversation metadata:

• Queue -- The queue this conversation was routed from (if applicable)
• Priority -- The priority level with color coding (Critical = red, High = orange, Medium = amber, Normal = default, Low = gray)
• Interaction Time -- A running timer that starts from when the agent accepted the work item
• Escalated -- An indigo "Escalated" badge with a call_split icon, shown only when the conversation source is bot_escalation
• Sentiment -- If the customer sentiment is "frustrated", a red dissatisfied face icon is displayed on the right side
• Bookmark -- A bookmark icon for flagging the conversation

RescueTacticsBanner

When the AI intelligence system detects that a conversation is at risk, the Rescue Tactics Banner appears as an amber notification bar below the metadata. It displays up to three AI-generated tactical suggestions for recovering the conversation.

• The banner has a lightbulb icon, a "Rescue Tactics" title, and a bulleted list of suggestions
• Each suggestion is pulled from the intelligence system's real-time analysis
• Click the close button to dismiss the banner
• The banner automatically reappears when new tactics are generated

INFO

Rescue tactics are generated by the OmniCortex intelligence engine based on real-time conversation analysis. They update dynamically as the conversation progresses.

VoiceControlBar

For voice channel conversations, a blue gradient control bar appears below the rescue tactics banner. It provides inline voice controls:

Control	Icon	Description
Speaker	speaker_phone	Toggle speaker mode on/off (highlights when active)
Hold	pause	Place the call on hold or resume (highlights when active)
Mute	mic_off	Mute or unmute your microphone (highlights when active)
Keypad	dialpad	Open the DTMF keypad for tone input
Transfer	call_split	Open the transfer modal to transfer the call

The bar also includes a visual waveform indicator and a call duration timer.

MessageList

The message list is the scrollable conversation history area. It auto-scrolls to the bottom when new messages arrive.

Timestamp Dividers

Timestamp dividers appear at the beginning of the conversation to show the time context.

Message Types

Messages are rendered as bubbles with different styles based on the sender role. See Messages & Attachments for full details.

Typing Indicator

When the bot or remote participant is typing, a typing indicator animation appears at the bottom of the message list.

QuickReplyBar

The quick reply bar provides fast-action shortcuts for agents:

• Quick Reply button -- Toggles a dropdown with pre-configured reply templates
• Attach button -- Opens the file attachment dialog
• Notes button -- Sticky note icon for adding internal notes
• Mail button -- Email icon for sending an email follow-up
• More -- Additional options menu

When the Quick Reply dropdown is open, it displays clickable pills with common responses:

• "I'm checking on that now."
• "Let me review your account."
• "I'll escalate this for you."
• "Can you provide more details?"
• "Your refund has been processed."
• "Is there anything else I can help with?"

Clicking a pill immediately sends that text as a message and closes the dropdown.

ChatInput

The input area at the bottom contains a text field and a send button.

• Text input -- A single-line input with the placeholder "Type a message..."
• Ctrl+K hint -- A small keyboard shortcut badge appears inside the input field
• Send button -- Blue button with a send icon. Disabled when the input is empty.

Keyboard Shortcuts

Shortcut	Action
Enter	Send the message
Ctrl+K	Focus the input / open command palette

TIP

The ChatInput also accepts draft text injected by the AI Assist panel's "Use This" button on script suggestions. When a script suggestion is used, the text automatically populates the input field.

ChatToolbar

The bottom toolbar provides secondary navigation within the chat view:

• Setting button on the left with a back chevron
• Person icon for contact details
• Chat and Mail icons on the right for switching communication modes