> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-react-v7-feature-guides.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">
  | Field          | Value                                                                                                            |
  | -------------- | ---------------------------------------------------------------------------------------------------------------- |
  | Component      | `CometChatTextBubble`                                                                                            |
  | Package        | `@cometchat/chat-uikit-react`                                                                                    |
  | Import         | `import { CometChatTextBubble } from "@cometchat/chat-uikit-react";`                                             |
  | CSS root class | `.cometchat-text-bubble`                                                                                         |
  | Primary output | None — renders from the SDK message                                                                              |
  | Prerequisites  | App wrapped in [`CometChatProvider`](/ui-kit/react/cometchat-provider) with valid credentials + a logged-in user |
  | Stitching      | None — self-extracting from the SDK message                                                                      |
  | Full props     | See [Props](#props)                                                                                              |
</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>