Skip to main content
CometChatMessageBubble is the reusable components which forms different types of message bubbles accordingly. There are different section available in message bubble which can be altered by passing CometChatMessageTemplate in CometChatMessages

​
Sections

Following are the sections in message bubble
  1. Header View
  2. Leading View
  3. Content View
  4. Bottom View
  5. Thread View
  6. footer view

​
Properties

PropertiesTypeDescription
LeadingView() => JSX.Elementused to set view in leading View section
headerView() => JSX.Elementused to set view in header view section
replyView() => JSX.Elementused to set view in reply view section
contentView() => JSX.Elementused to set content view , by default all different type of bubble are shown here
threadView() => JSX.Elementused to set view in thread view section , by default threaded section is shown
footerView() => JSX.Elementused to set footer view for message bubble , by default message receipt is shown
alignment’left’ | ‘right’ | ‘center’used to set bubble alignment , can be left, right and centar
styleMessageBubbleStyleused to set styling properties foe message bubble
bottomView() => JSX.Elementused to set bottom view for message bubble , by default reactions are shown here

​
style

PropertiesTypeDescription
heightstring | numberused to set height
widthstring | numberused to set width
backgroundColorstringused to set the background colour
borderBorderStyleused to set border
borderRadiusnumberused to set border radius