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 | Description | Type | 
|---|---|---|
| Content | Dynamic content store | DynamicContentStore.<MessageBubble.MessageBubbleProps> | 
Component Properties
- conversationSid: string- The conversation sid 
- message: MessageState- An object which represents a single message. 
- participant?: ParticipantState- An object defining the properties of a remote client. 
- messageStyle?: MessageStyle- Identifies how the message should be displayed. 
- useFriendlyName?: boolean- An override to use the friendly name passed in participant. 
- authorName?: string- A custom author name to be used. 
- hasMarkdownSupport?: boolean- If set to true, the body will be parsed as markdown. 
- timestampFormatter?: function- Function that formats timestamp