MessageBubble
This component renders a single bubble in a list of messages.
Component children#
| Key | Component | Condition | Align | Description |
|---|---|---|---|---|
| header | styled(div) | Wrapper for message bubble header. It displays the user name and the time | ||
| body | styled(div) | Wrapper for the message body. Parses to markdown if markdown support is enabled | ||
| media-body | React component | Visible only when message source type is media and when file attachment is enabled | Wrapper for media message | |
| media-error | styled(div) | Visible only when a media message needs to be displayed by it is not supported | Wrapper that displays a text notifying the agent media messages are not supported |
Static Properties#
| Name | Type | Description |
|---|---|---|
| Content | DynamicContentStore<MessageBubble.MessageBubbleProps> | Dynamic content store |
Component Properties#
| Name | Type | Description | Optional | Default |
|---|---|---|---|---|
| conversationSid | string | The conversation sid. | No | |
| message | MessageState | An object which represents a single message. | No | |
| participant | ParticipantState | An object defining the properties of a remote client. | Yes | |
| messageStyle | MessageStyle | Identifies how the message should be displayed. | Yes | |
| useFriendlyName | boolean | An override to use the friendly name passed in participant. | Yes | true |
| authorName | string | A custom author name to be used. | Yes | |
| hasMarkdownSupport | boolean | If set to true, the body will be parsed as markdown. | Yes | |
| timestampFormatter | function | Function that formats timestamp. | Yes | |
| inFocus | boolean | Determines whether a message bubble is in focus. | No |
Component Children Properties#
| Name | Type | Description | Optional | Default |
|---|---|---|---|---|
| isParticipantOfConversation | boolean | Represents if user is a participant of the conversation | Yes |
Rate this page