The MessageList component renders the list of messages in the Webchat, including:

  • System messages
  • Bot messages
  • User responses

It has custom message renderers for each type of message (e.g. video, image, audio, text and multipart messages).

It displays a typing indicator while waiting for the bot to answer.

​
Usage

Although you can use the MessageList as a standalone component, we recommend using it within the Container component and alonside the Composer andHeader components.

App.tsx
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}
      headerMessage="Chat History"
      showMarquee={true}
      messages={enrichedMessages}
      sendMessage={client?.sendMessage}
    />
  )
}

​
Props

​
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. You must handle the construction of the RichMessageObject type.

​
renderers
Partial<Renderers>

A mapping of custom message renderers used to override how specific block types are displayed.

​
sendMessage
(payload: WebchatMessage) => 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.

​
...props
ComponentProps<'ul'>

Standard <ul> element props. Useful for applying custom class names or event handlers to the outer container.