> ## 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.

<Panel>
  <Tabs>
    <Tab title="Example">
      <iframe src="https://botpress.github.io/docs-examples/iframe.html?args=&globals=&id=messagelist--primary" title="MessageList component" className="w-full rounded-xl" height="500px" />
    </Tab>

    <Tab title="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}
          />
        )
      }
      ```
    </Tab>
  </Tabs>
</Panel>

## Props

<Note>
  Although all of the `MessageList` component's props are optional, you need to send the [messages](#messages) prop to display messages.
</Note>

<ResponseField name="botAvatar" type="string">
  The bot’s avatar image URL, used when rendering bot messages or typing indicators.
</ResponseField>

<ResponseField name="botName" type="string">
  The display name of the bot. Also shown in the marquee and typing indicator when no custom sender name is set.
</ResponseField>

<ResponseField name="botDescription" type="string">
  The bot’s short description, used in the marquee area above the message list if enabled.
</ResponseField>

<ResponseField name="isTyping" type="boolean">
  Whether the bot is currently "typing." When `true`, a typing indicator bubble is displayed at the end of
  the message list.
</ResponseField>

<ResponseField name="headerMessage" type="string">
  A message shown at the top of the chat window before any user or bot messages. Useful for welcome or onboarding text.
</ResponseField>

<ResponseField name="messages" type="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.
  </Warning>
</ResponseField>

<ResponseField name="renderers" type="Partial<Renderers>">
  A mapping of custom message renderers used to override how specific block types are displayed.
</ResponseField>

<ResponseField name="sendMessage" type="(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.
</ResponseField>

<ResponseField name="showMarquee" type="boolean">
  Whether to show the bot marquee (bot name, avatar, and description) at the top of the message list. Defaults to
  `true`.
</ResponseField>