Chatting

This page covers the day-to-day chat experience inside the OmniBots widget, including the input area, file attachments, emoji picker, voice input, popup menu, message display, quick replies, and message feedback.

Input Area

The input area is a card-style container at the bottom of the chat window. It contains a text area at the top and a row of action icons below it.

Text Input

The text area is a <textarea> element that auto-grows as the user types, up to a maximum of 5 lines (120px). It resets to a single line when a message is sent.

Action	Behavior
Enter	Sends the message
Shift + Enter	Inserts a newline
Empty input	Send button is disabled

The textarea has a visible <label> element (screen-reader only) and a placeholder text that defaults to "Type a message..." in English.

Send Button

The send button is a circular button on the right side of the input row. It uses the theme's primary_color for its background. The button is disabled when the input is empty or a file upload is in progress. An upward arrow icon indicates the send action.

TTS Stop Button

When text-to-speech audio is playing, the send button is replaced by a pulsing audio wave button. Clicking it stops TTS playback. The button pulses with animated rings using the theme's primary color.

imageAnnotated input area anatomy showing the textarea at top, and bottom row with paperclip (attach), smiley face (emoji), microphone (voice), and circular send button

Chat input area anatomy

File Attachments

When file attachments are enabled (enable_attachments: true), a paperclip icon appears in the input area. Users can attach files in two ways:

1. Click the paperclip -- opens a file picker dialog
2. Drag and drop -- drop files onto the chat window

File Preview

Attached files appear in a horizontal scrollable preview strip above the input card:

• Image files -- displayed as thumbnails (40x40px)
• Non-image files -- displayed with a document icon
• Each file shows its name and size (or upload percentage during upload)
• A remove button (X) appears on hover (always visible on mobile)

Upload Progress

During upload, a progress bar appears at the bottom of each file preview. The percentage is shown as text and the progress bar fills using the theme's primary color. The file is uploaded to GCS via a presigned URL.

Allowed File Types

Category	Extensions	Max Size
Images	png, jpg, jpeg, gif, webp	10 MB
Documents	pdf, docx, txt	10 MB
Audio	mp3, wav	10 MB
Video	mp4, webm	50 MB

File Size Limit

Files exceeding the size limit are rejected with an error message before upload begins. The error message is displayed below the file preview and is announced to screen readers.

Emoji Picker

When enabled (enable_emoji: true), a smiley face icon appears in the input area. Clicking it opens a dropdown emoji picker where users can browse categories and select emojis to insert into the message.

The picker closes automatically when the user clicks outside of it or selects an emoji. After selecting an emoji, focus returns to the text input.

Voice Input

When voice input is enabled by the bot's audio configuration, a microphone icon appears in the input area. The voice input flow works as follows:

1. Click the mic button to start recording
   • If TTS audio is currently playing, it is stopped first (barge-in)
   • The browser requests microphone permission if not already granted
2. Recording indicator replaces the textarea
   • An animated waveform visualization shows audio levels in real time
   • A duration counter displays the elapsed time in M:SS format
   • A cancel button (X) allows discarding the recording
3. Click the mic button again (or the stop icon) to finish recording
   • The audio data is sent to the backend for transcription
   • A placeholder "Voice message" bubble appears immediately
   • The placeholder updates with the transcribed text once the backend responds

Browser Support

Voice input requires browser support for the MediaRecorder API. The mic button is hidden on browsers that do not support it. The audioSupported flag is checked at runtime.

Popup Menu

When enabled (enable_popup_menu: true) and menu_items are configured, a hamburger icon appears in the input area. Clicking it opens a popup menu with custom actions.

Each menu item has a label, optional icon, and an action:

Action Type	Description
url	Opens a URL (in a new tab or same window)
end_session	Ends the current chat session
download_transcript	Downloads the conversation as a text file
custom_event	Emits a custom event via the JavaScript API

The popup menu is positioned above the input area and closes when the user clicks outside of it or selects an action. It includes proper aria-haspopup="menu" and aria-expanded attributes for screen reader support.

Message Display

Messages appear in a scrollable list above the input area. Each message type has a distinct visual style.

Message Bubbles

Role	Alignment	Style
User	Right-aligned	Colored background (uses user_bubble_color or primary_color), white text
Bot	Left-aligned, with avatar	White background (or bot_bubble_color), dark text
Agent	Left-aligned, with avatar	Same as bot style, avatar shows agent initial or image
System	Centered	Gray pill-shaped badge, smaller text

Bot and agent messages display an avatar to the left of the bubble. The avatar can be a custom image URL (configured per-bot or per-agent) or a default icon/letter fallback. Above the bubble, a sender name and relative timestamp (e.g., "Bot - 2m ago") are shown. User messages show an absolute timestamp (HH:MM format) above the bubble.

imageThree message bubble styles: right-aligned colored user bubble, left-aligned white bot bubble with avatar and name, and left-aligned agent bubble with agent photo and name

Message bubble styles: user, bot, and agent

Markdown Rendering

Bot and agent messages support Markdown formatting, including:

• Bold, italic, and strikethrough text
• Inline code and fenced code blocks
• Ordered and unordered lists
• Headings (H3 and below)
• Blockquotes
• Links (open in new tab)
• Horizontal rules

Long Message Truncation

Bot and agent messages longer than 12 lines are truncated with a gradient fade overlay. A "Show more" button appears below the truncated content. Clicking it expands the message to its full height. A "Show less" button then allows collapsing it again. The fade gradient matches the actual bubble background color for a seamless visual effect.

File Attachments in Messages

Files attached to messages are displayed within the bubble:

• Images render inline with click-to-download
• Non-image files render as a card showing the file icon, name, size, and a download button
• File icons are color-coded by type: PDF (red), Word (blue), audio (purple), video (orange)

Quick Replies

Quick reply buttons appear below bot messages when the message includes a quickReplies array. They provide predefined response options.

interface QuickReply {
  title: string;
  payload: string;
  action?: 'reply' | 'url' | 'postback';
  url?: string;
  urlTarget?: '_blank' | '_self';
  style?: QuickReplyStyle;
}

Actions

Action	Behavior
reply (default)	Sends the payload as a user message; the title appears in the chat
url	Opens the specified URL in a new tab (or same window based on urlTarget)
postback	Sends the payload to the bot silently; the title appears in the chat

Styling

Each quick reply can be individually styled:

Property	Values	Description
variant	'outline', 'filled', 'text'	Visual style of the button
color	CSS color string	Custom color for the button
icon	Material icon name	Icon displayed next to the text
iconPosition	'left', 'right'	Position of the icon relative to the label
borderRadius	CSS string	Custom border radius

Quick reply buttons wrap to multiple lines if they exceed the available width. They use the theme's button_* properties for default styling.

Message Feedback

When feedback is enabled in the bot configuration, thumbs up and thumbs down buttons appear below bot and agent messages. This feature allows visitors to rate the quality of individual responses.

Feedback Flow

1. Thumbs up -- Submits positive feedback immediately. The buttons are replaced with a "Thanks for your feedback!" confirmation
2. Thumbs down -- If thumbs_only is false, a feedback form opens:
   • Reason chips -- Predefined reasons displayed as selectable pills (multi-select)
   • Comment field -- Optional free-text input (shown when allow_comments is true)
   • Submit and Close buttons
   • A privacy disclaimer ("Please do not provide any personal or sensitive data") is shown above the buttons

Default Negative Reasons

When no custom reasons are configured, the following defaults are used:

• Incorrect information
• Not relevant to my question
• Didn't understand my question
• Too long or confusing
• Too short or incomplete
• Other

Feedback Configuration

interface FeedbackConfig {
  enabled: boolean;
  show_on: 'all' | 'ai_responses' | 'none';
  thumbs_only?: boolean;
  negative_reasons: string[];
  allow_comments: boolean;
}

imageMessage feedback form expanded below a bot message, showing thumbs down selected, selectable reason chips (Incorrect information, Not relevant, Too long), optional comment textarea, and Submit button

Message feedback form with reason chips

Feedback Data

Feedback is sent to the backend via WebSocket and stored for analytics. It includes the message ID, rating (positive/negative), selected reasons, and optional comment text.