This component is used to visually represent individual messages and display them in a conversation-like format. Here are key characteristics of the message bubble:
  1. Shape and Style: It is designed to visually encapsulate the content of a message.
  2. Message Content: The message bubble contains the text or multimedia content of the message, such as plain text, images, emojis, or other media. It displays the actual content of the message sent by the sender.
  3. Sender Information: Message bubbles includes additional information about the sender of the message, such as their name, profile picture, or timestamp. This information helps to identify who sent the message and when it was sent.
  4. Layout and Placement: Message bubbles are typically arranged in a chronological order, displaying the messages in the order they were sent beginning from latest to earliest.
  5. Visual Indicators: Message bubbles also includes visual indicators to convey additional information or status of the message i.e. delivered or read status indicator.

​
Properties

NameTypeDescription
idstringUnique identifier of each message bubble
leadingViewObject as PropType<ViewType>User-defined component to customise the avatar of the message sender.
headerViewObject as PropType<ViewType>User-defined component to customise the header section of the message bubble.
replyViewObject as PropType<ViewType>User-defined component to customise the header section of the message bubble.
BottomViewObject as PropType<ViewType>User-defined component to customise the quote or reference to the original message view
contentViewObject as PropType<ViewType>User-defined component to customise the actual content of the message bubble
threadViewObject as PropType<ViewType>User-defined component to customise the thread view that displays the no. of replies or responses
footerViewObject as PropType<ViewType>User-defined component to display the footer view that display the timestamp and read-receipt of the message
optionsArray CometChatActionsIcon | CometChatActionsViewUser-defined actions which appears for each message bubble on mouseover.
alignmentMessageBubbleAlignmentGroup of constants representing the alignment of message bubble
moreIconURLstringAsset URL for the more icon that appears in the context menu
topMenuSizenumberList of menu button that appears by default in the context menu
messageBubbleStyleMessageBubbleStyleStyling properties and values of the component

​
Usage


import '@cometchat/uikit-elements';//import the web component package.

//use the element
<CometChatMessageBubble
leadingView={leadingView}
footerView={footerView}
headerView={headerView}
bottomView={bottomView}
contentView={contentView}
></CometChatMessageBubble>