MessageList
A component representing the list of messages.
Can be themed with Theme.Chat.MessageList in Theme.
Component children#
| Key | Component | Condition | Align | Description |
|---|---|---|---|---|
| typing-indicator | React component | Visible when one or more participants are typing and the showTypingIndicator prop is set to true | Typing indicator component. Displays TypingIndicator template when one participant is typing and TypingIndicatorMultiple template when multiple participants are typing | |
| Twilio-WelcomeMessage | React component | Welcome message component. Displays an icon ( MessageBold) and a welcome message text | ||
| predefinedMessage | MessageListItem | Visible if predefinedMessage prop is provided | Initial message in the ChatWidget | |
| message-loading | React component | Visible if provided conversation.isLoadingMessages property is true and there are messages to be loaded | Loading spinner component displayed when loading messages | |
| message-scroll-button | React component | Visible if provided conversation.showScrollDownBtn property is true and conversation.unreadMessages array is a non-empty | Button component for scrolling to the last unread message | |
| new-message-separator | React component | Visible if there are unread messages displayed | New message separator component. Displays a line wrapping some text above the latest unread message | |
| date-separator | React component | Visible if messages are received on different dates | Date separator component. Displays a line wrapping a date string above the first message that is received on a new date |
Static Properties#
| Name | Type | Description |
|---|---|---|
| Content | DynamicContentStore<MessageList.MessageListChildrenProps> | Dynamic content store |
| Item | MessageListItem | Shortcut for MessageListItem component |
| WelcomeMessage | WelcomeMessage | Shortcut for WelcomeMessage component |
| defaultProps | MessageList.MessageListChildrenProps | Default properties |
Component Properties#
| Name | Type | Description | Optional | Default |
|---|---|---|---|---|
| conversationSid | string | Sid of the conversation. | No | |
| memberDisplayOptions | MemberDisplayOptions | Chat member display configuration. | No | |
| messageStyle | MessageStyle | Represents the style of a message. | No | |
| showTypingIndicator | boolean | It sets whether to display the TypingIndicator component or not. | No | |
| showReadStatus | boolean | It sets whether to display the MessageReadContainer component or not. | No | |
| showWelcomeMessage | boolean | It sets whether to inject a WelcomeMessage in the message list or not. | No | |
| predefinedMessage | PredefinedMessage | It sets whether to inject a predefined message in the message list or not. | Yes | |
| listContainerAriaProps | AriaProps | ListContainer aria props. | Yes | |
| notVisible | boolean | Determines visibility. | Yes | |
| conversationType | string | Conversation Type. | Yes |
Component Children Properties#
| Name | Type | Description | Optional | Default |
|---|---|---|---|---|
| conversationSid | string | Sid of the conversation | No | |
| conversation | ConversationState.ConversationState | ConversationState object | No | |
| isAppActive | boolean | It sets whether the chat is active or not | Yes | |
| memberDisplayOptions | MemberDisplayOptions | Chat member display configuration | No | |
| messageStyle | MessageStyle | Represents the style of a message. | No | |
| showTypingIndicator | boolean | It sets whether to display TypingIndicator component or not | No | |
| showReadStatus | boolean | It sets whether to display the MessageReadContainer component or not | No | |
| showWelcomeMessage | boolean | It sets whether to inject a WelcomeMessage in the message list or not | No | |
| predefinedMessage | PredefinedMessage | It sets whether to inject a predefined message in the message list or not | Yes | |
| listContainerAriaProps | AriaProps | ListContainer aria props | Yes |