Messages & Attachments

The message list in the chat interface displays all messages exchanged during a conversation. Messages are visually differentiated by sender role, and certain roles support rich markdown formatting.

Message Types by Role

Each message is rendered as a bubble with styling that identifies the sender at a glance.

Role	Alignment	Background	Avatar	Markdown	Description
System	Centered	Light gray pill	None (info icon)	No	Status updates, routing events, timestamps
Customer	Left	Light blue	Customer initials (blue)	No	Messages from the end user
Bot	Right	Light purple	"AI" (purple)	Yes	Automated bot responses
Agent	Right	Light indigo	"AG" (indigo)	Yes	Messages sent by the agent

System Messages

System messages are centered in the conversation and appear as small gray pills with an info icon. They communicate status changes and events rather than conversational content. Examples include:

• "Conversation started"
• "Agent joined the conversation"
• "Customer disconnected"
• "Transfer completed"

System messages do not have avatars or sender names.

imageMessage bubble styles showing four types: centered gray system message pill, left-aligned blue customer message with initials avatar, right-aligned purple bot message with AI sparkle icon, and right-aligned indigo agent message

Message bubble styles by role

Customer Messages

Customer messages appear on the left side of the conversation with a blue-toned avatar showing the customer's initials (derived from their name, up to two characters). The bubble has a light background with a subtle border and uses a rounded shape with the top-left corner squared.

Customer messages are rendered as plain text only. Markdown syntax in customer messages is displayed literally and is not parsed. This prevents formatting abuse and ensures messages are displayed exactly as typed.

Bot Messages

Bot messages appear on the right side with a purple-gradient avatar displaying "AI". The bubble has a light purple background with a purple border. An AI sparkle icon (auto_awesome) appears in the top corner of the bubble to clearly indicate the message is AI-generated.

Bot messages support full markdown rendering, allowing the bot to send formatted responses with structured content.

Agent Messages

Agent messages appear on the right side with an indigo-gradient avatar displaying "AG". The bubble has a light indigo background with an indigo border and uses a rounded shape with the top-right corner squared.

Agent messages support full markdown rendering, so agents can use formatting when composing messages.

Markdown Support

Bot and agent messages are parsed through a markdown renderer (markdown-it) that supports the following formatting:

Supported Syntax

Syntax	Rendered As
**bold**	Bold text
*italic*	Italic text
__underline__	Bold text (same as **)
`inline code`	Inline code with gray background
```code block```	Multi-line code block with monospace font
[text](url)	Clickable link (opens in new tab)
# Heading	Header (H1 through H6 supported)
- item or * item	Unordered list
1. item	Ordered list
> quote	Blockquote with left border
~~text~~	Strikethrough text
---	Horizontal rule

Markdown Detection

The system checks whether a message contains markdown syntax before rendering. If no markdown patterns are found, the message is displayed as plain text for better performance. The following patterns trigger markdown parsing:

• Bold/italic markers (**, *, __)
• Code markers (backticks)
• Link syntax ([text](url))
• Headers (# at line start)
• List markers (-, *, or digits followed by . at line start)
• Blockquote markers (> at line start)
• Strikethrough markers (~~)

Link Handling

All links in markdown messages are rendered with the following security attributes:

• target="_blank" -- Opens in a new browser tab
• rel="noopener noreferrer" -- Prevents the opened page from accessing the parent window

HTML Sanitization

For security, the markdown renderer sanitizes all HTML content before rendering:

• Dangerous tags are stripped: script, iframe, object, embed, form, input, style, link, meta, and others
• Event handler attributes (e.g., onclick, onerror) are removed
• javascript: and data: URLs are neutralized

WARNING

While markdown is supported for bot and agent messages, any HTML embedded in messages is sanitized to prevent cross-site scripting (XSS) attacks. Agents should use markdown syntax rather than raw HTML.

imageFile attachment rendering in chat showing an image thumbnail preview, a PDF document card with filename and download icon, and a generic file attachment with size indicator

File attachments in chat

Quick Reply Buttons

When a bot sends a message that includes quick reply options, clickable pill buttons appear below the message list in the QuickReplyBar. Agents can also use these quick replies to send common responses rapidly.

Available quick replies include:

• "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 quick reply pill sends the text immediately as an agent message.

Sending Messages

Composing a Message

1. Click into the text input field at the bottom of the chat (placeholder: "Type a message...")
2. Type your message text
3. Press Enter or click the Send button to send

The Send button is disabled when the input field is empty.

Keyboard Shortcuts

Shortcut	Action
Enter	Send the message
Ctrl+K	Focus the input field

Draft Injection

The AI Assist panel can inject suggested text into the input field. When you click "Use This" on a script suggestion in the AI Assist tab, the suggested text is populated into the ChatInput. You can review and edit the text before sending.

INFO

Drafts are tracked per conversation. If you switch between conversations, the draft for each conversation is preserved independently.

Typing Indicator

When the remote participant (customer or bot) is actively typing, an animated typing indicator appears at the bottom of the message list, below the most recent message. The indicator disappears when the participant stops typing or sends their message.

Timestamp Dividers

Timestamp dividers appear in the message list to provide time context. They display the time in 24-hour format (e.g., "14:32") and are shown at the start of the conversation.