Chat Message List States

🚧

Web SDK version 1.6.3 required

Empty and Loading States

Developers can provide their own templates to <livelike-chat> elements that will be used when those chats are loading or when they are empty.

The <livelike-chat> element has a couple of slots that can be used to customize the look and feel of the message list depending on the state of the chat.

• The loading state, using the message-list-loading slot
• The empty state, using the message-list-empty slot

Only one of the slots will be showing at any time. When the messages are being loaded, the message-list-loading slot will be shown. After the messages have finished loading but there are no messages to display, the message-list-empty slot will be shown. Otherwise, when the messages have both loaded and is there are more than zero, the list of messages will be shown.

📘

Slots are part of the Web Components spec

If you aren't familiar with how slots work, read more about them at HTML <slot> element on MDN.

Here are some things to keep in mind when customizing the chat element with slots:

1. Any element can be used as a slot
2. The elements being used as slots must be direct children of the <livelike-chat> element
3. Elements being used as slots can have any number of children
4. Each slot name may only be used once