Text Bubble

A text message bubble component with formatting support for mentions, URLs, link previews, translations, emoji detection, and content truncation.

AI Integration Quick Reference

{
  "component": "CometChatTextBubble",
  "package": "@cometchat/chat-uikit-react",
  "import": "import { CometChatTextBubble } from '@cometchat/chat-uikit-react/plugins/core/text';",
  "description": "Renders text messages with formatting, link previews, translations, emoji detection, and truncation.",
  "cssRootClass": ".cometchat-text-bubble",
  "props": {
    "data": {
      "text": { "type": "string", "default": "required" },
      "message": { "type": "CometChat.TextMessage", "default": "undefined" }
    },
    "behavior": {
      "isSentByMe": { "type": "boolean", "default": "true" },
      "textFormatters": { "type": "CometChatTextFormatter[]", "default": "[]" }
    }
  }
}

Where It Fits

CometChatTextBubble is the bubble content component for text messages. It’s rendered by CometChatTextPlugin inside the message list. The plugin handles formatter configuration and message context — the bubble handles rendering.

import { CometChatTextBubble } from '@cometchat/chat-uikit-react/plugins/core/text';
import { CometChatMentionsFormatter, CometChatUrlFormatter } from '@cometchat/chat-uikit-react/formatters';

function TextMessage({ text, isSentByMe }) {
  const formatters = [new CometChatMentionsFormatter(), new CometChatUrlFormatter()];
  return <CometChatTextBubble text={text} isSentByMe={isSentByMe} textFormatters={formatters} />;
}

Minimal Render

import { CometChatTextBubble } from '@cometchat/chat-uikit-react/plugins/core/text';

function Demo() {
  return <CometChatTextBubble text="Hello world" />;
}

Root CSS class: .cometchat-text-bubble

Features

Formatter Pipeline

Text formatters are applied in priority order (lower = first). The default pipeline includes:

1. CometChatMentionsFormatter (priority 20) — converts <@uid:xxx> patterns to styled mention spans
2. CometChatUrlFormatter (priority 100) — detects URLs and wraps them in clickable links

Markdown formatting will be added in a future release.

Single Emoji Detection

When the entire message is a single emoji (no other text), the bubble renders it at a larger font size. Detection uses Intl.Segmenter for accurate handling of complex emoji sequences (ZWJ, skin tones, flags).

Content Truncation

Messages exceeding ~4 lines (80px) are truncated with a “Read more” button. The button is accessible with aria-label and aria-expanded attributes.

Link Previews

When the message metadata contains link preview data (at metadata["@injected"]["extensions"]["link-preview"]["links"]), the bubble renders preview cards with image, title, description, and domain.

Translation

When the message metadata contains a translated_message field, the bubble shows the original text, a separator, and the translated text below.

Props

text

The text content to display. Required.

Type	string

---

isSentByMe

Whether the message was sent by the logged-in user. Controls outgoing/incoming styling.

Type	boolean
Default	true

---

textFormatters

Array of text formatters to apply. Each formatter transforms the text in sequence.

Type	CometChatTextFormatter[]
Default	[]

---

message

The full SDK message object for metadata extraction (link previews, translations).

Type	CometChat.TextMessage
Default	undefined

---

className

Optional custom CSS class name.

Type	string
Default	undefined

CSS Selectors

Target	Selector
Root	.cometchat-text-bubble
Incoming variant	.cometchat-text-bubble--incoming
Outgoing variant	.cometchat-text-bubble--outgoing
Single emoji	.cometchat-text-bubble--single-emoji
Truncated	.cometchat-text-bubble--truncated
Text content	.cometchat-text-bubble__text
Read more button	.cometchat-text-bubble__read-more-button
Link preview card	.cometchat-text-bubble__link-preview
Link preview image	.cometchat-text-bubble__link-preview-image
Link preview title	.cometchat-text-bubble__link-preview-title
Translation container	.cometchat-text-bubble__translation-container
Translation label	.cometchat-text-bubble__translation-label
Mention span	.cometchat-mentions
Self mention	.cometchat-mentions-you
Other mention	.cometchat-mentions-other
URL link	.cometchat-link