Text Bubble - CometChat Docs

AI Integration Quick Reference

{
  "component": "CometChatTextBubble",
  "package": "@cometchat/chat-uikit-react",
  "import": "import { CometChatTextBubble } from \"@cometchat/chat-uikit-react\";",
  "description": "Self-extracting text bubble. Renders message text through the formatter pipeline (markdown, mentions, URLs), with optional read-more truncation.",
  "cssRootClass": ".cometchat-text-bubble",
  "selfExtracting": true,
  "props": {
    "data": {
      "message": { "type": "CometChat.BaseMessage", "note": "When set (and text omitted), the bubble extracts content via message.getText() and configures mention formatting." },
      "text": { "type": "string", "note": "Explicit text override (used for media captions). At least one of text / message should be set." },
      "isSentByMe": { "type": "boolean", "default": true },
      "textFormatters": { "type": "CometChatTextFormatter[]" },
      "disableTruncation": { "type": "boolean", "default": false },
      "className": { "type": "string" }
    }
  }
}

Overview

CometChatTextBubble renders a text message. It is self-extracting: pass the SDK message and the bubble reads the text via message.getText() and configures mention formatting from the message itself, so it works standalone. It also accepts an explicit text override, which is how media bubbles render their captions through it. Text is run through the formatter pipeline — markdown (**bold**, _italic_, ~~strike~~, `code`, lists, blockquotes), <@uid:xxx> mentions resolved to styled chips, and bare URLs converted to clickable links. Long messages are truncated with a “Read more” toggle unless disableTruncation is set.

Live Preview — interact with the text bubble.Open in Storybook ↗

Usage

import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatTextBubble } from "@cometchat/chat-uikit-react";

function TextMessage({ message }: { message: CometChat.BaseMessage }) {
  return <CometChatTextBubble message={message} />;
}

Render explicit text (e.g. a caption) instead of extracting from a message:

<CometChatTextBubble text="Photo caption" isSentByMe />

Props

message

The message to render. When text is omitted, the bubble extracts the content and mention formatting from it.


Type	`CometChat.BaseMessage`
Default	`undefined`

text

Explicit text to display. Overrides message.getText() when provided.


Type	`string`
Default	`undefined`

isSentByMe

Whether the message was sent by the logged-in user (affects styling).


Type	`boolean`
Default	`true`

textFormatters

Text formatters to apply (mentions, URLs, custom syntax).


Type	`CometChatTextFormatter[]`
Default	`undefined`

disableTruncation

Disable the read-more / show-less truncation.


Type	`boolean`
Default	`false`

className

Additional CSS class applied to the root element.


Type	`string`
Default	`undefined`

CSS Selectors

Target	Selector
Root	`.cometchat-text-bubble`
Incoming / outgoing	`.cometchat-text-bubble--incoming` / `.cometchat-text-bubble--outgoing`
Single emoji	`.cometchat-text-bubble--single-emoji`
Text content	`.cometchat-text-bubble__text`
Mention chip	`.cometchat-text-bubble__mention`
Link	`.cometchat-link`
Read-more button	`.cometchat-text-bubble__read-more-button`
Link preview	`.cometchat-text-bubble__link-preview`

Next Steps

Text Plugin

Plugin behavior, context menu, and conversation preview

Text Formatters

Build custom mention / URL / markdown formatters

Message Bubble

The wrapper that hosts bubble content

Theming

Customize colors, fonts, and spacing

​Overview

​Usage

​Props

​message

​text

​isSentByMe

​textFormatters

​disableTruncation

​className

​CSS Selectors

​Next Steps

Text Plugin

Text Formatters

Message Bubble

Theming

Overview

Usage

Props

message

text

isSentByMe

textFormatters

disableTruncation

className

CSS Selectors

Next Steps