Description of icon
Flex UI
API Reference

MessageBubble

This component renders a single bubble in a list of messages.


Component children#

KeyComponentConditionAlignDescription
headerstyled(div)Wrapper for message bubble header. It displays the user name and the time
bodystyled(div)Wrapper for the message body. Parses to markdown if markdown support is enabled
media-bodyReact componentVisible only when message source type is media and when file attachment is enabledWrapper for media message
media-errorstyled(div)Visible only when a media message needs to be displayed by it is not supportedWrapper that displays a text notifying the agent media messages are not supported

Static Properties#

NameDescriptionType
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

Need some help?