<BeforeMessages>

View as Markdown

The <BeforeMessages> component is rendered inside the message list container, before the first message. It scrolls with the message list, and is only shown when all messages have been loaded.

interface BeforeMessagesProps

Properties

common
: CommonChatboxProps

A collection of objects which are passed to all Chatbox theme components.

Welcome messages

In the default theme, this component renders each entry in conversation.welcomeMessages as a virtual system message. You can override this by passing a custom BeforeMessages to the theme prop. See the Welcome messages guide for examples.

Child order

The message list uses flex-direction: column-reverse, and <BeforeMessages> renders as a child of that container. This means that if you render multiple children, they appear in reverse DOM order. To display multiple children in the expected top-to-bottom order, either reverse them, or wrap them in a <div>.

If you're using BeforeMessages to render virtual messages from the same sender, reverse them and wrap them in a <div> with class t-message-group. This way, the default CSS for grouping behavior (eg spacing, avatar visibility, etc.) applies correctly. See the Welcome messages guide for an example.

Example

In the default theme, the <BeforeMessages> component is implemented as follows:

BeforeMessages.js
view on GitHub
1// loading...