MessageListItem
Represents a single message in a message list.
Can be themed with Theme.Chat.MessageListItem in Theme.
Component children#
| Key | Component | Condition | Align | Description |
|---|---|---|---|---|
| content | div | Wrapper for message content. Displays the avatar of the author and the message in a MessageBubble component | ||
| media-transfer-error | styled(div) | Visible if message.error prop is true | Wrapper for message shown when message failed to be sent. Displays a AlertSmall icon and MediaMessageTransferFailed template | |
| read-status | styled(div) | Wrapper for read status. Displays Read template and Read icon |
Static Properties#
| Name | Type | Description |
|---|---|---|
| Content | DynamicContentStore<MessageListItem.MessageListItemProps, MessageListItemChildrenKeys> | Dynamic content store |
| Bubble | MessageBubble | Shortcut for MessageBubble component |
Component Properties#
| Name | Type | Description | Optional | Default |
|---|---|---|---|---|
| conversationSid | string | Sid of the conversation. | No | |
| message | MessageState | An object which represents a single message. | No | |
| showReadStatus | boolean | Should show read status. | Yes | |
| messageStyle | MessageStyle | Identifies how the message should be displayed. | Yes | |
| useFriendlyName | boolean | An override to use the friendly name passed in member. | Yes | true |
| authorName | string | A custom author name to be used. | Yes | |
| avatarUrl | string | Url to the avatar of the author. | Yes | |
| hasMarkdownSupport | boolean | Whether Markdown feature is enabled or not | Yes | |
| participant | object | Object containing a pre-defined participant name. | Yes | |
| participant.friendlyName | string | Predefined participant name. | No | |
| member | object | Object containing a pre-defined author name. | Yes | |
| member.friendlyName | string | Predefined author name. | No | |
| timestampFormatter | function | A custom formatter for the message timestamp. Takes a Date argument and returns string. | No | |
| focusable | boolean | Whether the the MessageListItem can be focused | No | |
| updateFocus | function | A helper function to inform parent components of currently focused item | No |