The MessageList component renders the list of messages in the current Webchat conversation.

​
Props

Although all of the MessageList component’s props are optional, you need to send the messages prop to display messages.
​
botAvatar
string
The bot’s avatar image URL, used when rendering bot messages or typing indicators.
​
botName
string
The display name of the bot. Also shown in the marquee and typing indicator when no custom sender name is set.
​
botDescription
string
The bot’s short description, used in the marquee area above the message list if enabled.
​
isTyping
boolean
Whether the bot is currently “typing.” When true, a typing indicator bubble is displayed at the end of the message list.
​
headerMessage
string
A message shown at the top of the chat window before any user or bot messages. Useful for welcome or onboarding text.
​
messages
RichMessageObject[]
An array of message objects to render in the chat. Can include standard user ('outgoing') and bot ('incoming') messages, as well as system ('system') messages.
When using the MessageList component, you need to handle the creation of this array yourself. Copy the code example on this page for a working implementation.
​
renderers
Partial<Renderers>
A mapping of custom message renderers used to override how specific block types are displayed.
​
sendMessage
(payload: IntegrationMessage) => void
A callback function used to send a new message from the message list as a reply. This is used by input messages (e.g. Button, Dropdown) where the user’s input is sent directly from the message list in a message object. This means that sendMessage is required if your want to use the Button, Dropdown or any input message types.
​
showMarquee
boolean
Whether to show the bot marquee (bot name, avatar, and description) at the top of the message list. Defaults to true.