> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-rn-guide-message-privately.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Text Bubble

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

<Accordion title="AI Integration Quick Reference">
  ```json theme={null}
  {
    "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" }
      }
    }
  }
  ```
</Accordion>

## 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.

<Info>
  **Live Preview** — interact with the text bubble.

  [Open in Storybook ↗](https://storybook.cometchat.io/react/?path=/story/components-bubbles-message-bubble-text--default)
</Info>

<iframe src="https://storybook.cometchat.io/react/iframe.html?id=components-bubbles-message-bubble-text--default&viewMode=story&shortcuts=false&singleStory=true" className="w-full rounded-xl" loading="lazy" style={{height: "300px", border: "1px solid #e0e0e0"}} title="CometChat Text Bubble — Default" allow="clipboard-write" />

***

## Usage

```tsx theme={null}
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:

```tsx theme={null}
<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

<CardGroup cols={2}>
  <Card title="Text Plugin" icon="font" href="/ui-kit/react/plugins/overview#built-in-plugins">
    Plugin behavior, context menu, and conversation preview
  </Card>

  <Card title="Text Formatters" icon="code" href="/ui-kit/react/plugins/text-formatters">
    Build custom mention / URL / markdown formatters
  </Card>

  <Card title="Message Bubble" icon="comment" href="/ui-kit/react/components/message-bubble">
    The wrapper that hosts bubble content
  </Card>

  <Card title="Theming" icon="paintbrush" href="/ui-kit/react/theming">
    Customize colors, fonts, and spacing
  </Card>
</CardGroup>