> ## Documentation Index
> Fetch the complete documentation index at: https://api.fanvue.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# ChatMessage
> A single chat message rendered as a bubble.
```tsx theme={null}
import { ChatMessage } from "@fanvue/ui";
import type {
ChatMessageProps,
ChatMessageStatus,
ChatMessageUser,
ChatMessageVariant,
} from "@fanvue/ui";
```
## Examples
## All Variants
```tsx theme={null}
import { ChatMessage } from "@fanvue/ui";
const AVATAR = "https://i.pravatar.cc/80?img=47";
```
## Read Receipt
```tsx theme={null}
import { ChatMessage } from "@fanvue/ui";
```
## Conversation
```tsx theme={null}
import { ChatMessage } from "@fanvue/ui";
const AVATAR = "https://i.pravatar.cc/80?img=47";
```
## Props
## ChatMessage
A single chat message rendered as a bubble. Sender messages sit on the right with a green bubble and a delivery tick; receiver messages sit on the left with a grey bubble and an avatar. Supports plain text, a typing indicator, a voice message with waveform, and a deleted-message placeholder.
Text bubbles place the timestamp inline after short messages and drop it to the bottom-right corner once the text wraps, so no variant switch is needed for short versus long content.
Duration label for the `"audio"` variant, e.g. `"0:05"`.
Avatar alt text.
Avatar fallback (initials or icon) shown before the image loads.
Avatar image URL for receiver messages.
Initial playing state when uncontrolled.
Text shown for the `"deleted"` variant.
Message body for the `"text"` variant. Keep it to inline content.
Show the online indicator on the receiver avatar.
Fired when the audio play/pause button is pressed, with the next playing state.
Accessible label for the audio pause button.
Whether the audio is playing (controlled). Pairs with `onPlayingChange`.
Accessible label for the audio play button.
Render the receiver avatar. Reserves the avatar space when `false` so grouped bubbles stay aligned.
Delivery status shown on sender messages (a double tick). Ignored for receiver messages. `"read"` renders the tick in the read colour.
Timestamp shown with the message, e.g. `"16:00"`.
Accessible label for the typing indicator.
Who sent the message. `"sender"` is the current user (right-aligned, green bubble, delivery tick). `"receiver"` is the other party (left-aligned, grey bubble, with avatar).
The kind of content the message carries.
Relative bar heights (values `0`–`1`) for the `"audio"` waveform. Defaults to a flat row of dots matching the unplayed design state.
## Exported types
Also exported from `@fanvue/ui`: `ChatMessageProps`, `ChatMessageStatus`, `ChatMessageUser`, `ChatMessageVariant`.
***
**Setup:** [Installation](/docs/ui/installation) · [Theming](/docs/ui/theming)