Text Bubble

A self-extracting bubble that renders text messages with markdown, mentions, clickable URLs, link previews, and read-more truncation.

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