> ## Documentation Index
> Fetch the complete documentation index at: https://botpress.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# MessageList

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

> [tab] Example
>
> [MessageList component](https://botpress.github.io/docs-examples/iframe.html?args=\&globals=\&id=messagelist--primary)

> [tab] Code
>
> ```tsx App.tsx theme={"theme":{"light":"light-plus","dark":"dark-plus"}}
> import { MessageList, useWebchat, Configuration } from '@botpress/webchat'
>
> const { client, messages, isTyping, user } = useWebchat({
>   clientId: '$CLIENT_ID$', // Insert your Client ID here
> })
>
> const config: Configuration = {
>   botName: 'SupportBot',
>   botAvatar: 'https://picsum.photos/id/80/400',
>   botDescription: 'Your virtual assistant for all things support.',
> }
>
> const enrichedMessages: RichMessageObject[] = useMemo(
>   () =>
>     messages.map((message) => {
>       const { authorId } = message
>       const direction = authorId === user?.id ? 'outgoing' : 'incoming'
>       return {
>         ...message,
>         direction,
>         sender:
>           direction === 'outgoing'
>             ? { name: user?.name ?? 'You', avatar: user?.pictureUrl }
>             : { name: config.botName ?? 'Bot', avatar: config.botAvatar },
>       }
>     }),
>   [config.botAvatar, config.botName, messages, user?.id, user?.name, user?.pictureUrl]
> )
>
> function App() {
>   return (
>     <MessageList
>       botAvatar={config.botAvatar}
>       botName={config.botName}
>       botDescription={config.botDescription}
>       isTyping={isTyping}
>       showMarquee={true}
>       messages={enrichedMessages}
>       sendMessage={client?.sendMessage}
>     />
>   )
> }
> ```

## Props

> [!NOTE]
>
> Although all of the `MessageList` component's props are optional, you need to send the [messages](#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.

> [!WARNING]
>
> 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 (for example: 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`.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.