Fanvue API Documentation

import { ChatMessage } from "@fanvue/ui";
import type {
  ChatMessageProps,
  ChatMessageStatus,
  ChatMessageUser,
  ChatMessageVariant,
} from "@fanvue/ui";

Examples

All Variants

import { ChatMessage } from "@fanvue/ui";

const AVATAR = "https://i.pravatar.cc/80?img=47";

<div className="flex flex-col gap-3">
  <ChatMessage user="sender" variant="typing" />
  <ChatMessage user="receiver" variant="typing" avatarSrc={AVATAR} online />
  <ChatMessage
    user="receiver"
    message="Placeholder message."
    time="16:00"
    avatarSrc={AVATAR}
    online
  />
  <ChatMessage user="sender" message="Placeholder message." time="16:00" />
  <ChatMessage
    user="receiver"
    message="Placeholder message sits here, please change me."
    time="16:00"
    avatarSrc={AVATAR}
    online
  />
  <ChatMessage
    user="sender"
    message="Placeholder message sits here, please change me."
    time="16:00"
  />
  <ChatMessage
    user="receiver"
    variant="audio"
    audioDuration="0:05"
    time="16:00"
    avatarSrc={AVATAR}
    online
  />
  <ChatMessage user="sender" variant="audio" audioDuration="0:05" time="16:00" />
  <ChatMessage user="receiver" variant="deleted" time="16:00" avatarSrc={AVATAR} online />
  <ChatMessage user="sender" variant="deleted" time="16:00" />
</div>

Read Receipt

import { ChatMessage } from "@fanvue/ui";

<ChatMessage
  user="sender"
  message="Placeholder message."
  time="16:00"
  status="read"
/>

Conversation

import { ChatMessage } from "@fanvue/ui";

const AVATAR = "https://i.pravatar.cc/80?img=47";

<div className="flex flex-col gap-2">
  <ChatMessage
    user="receiver"
    message="Hey! Are you free later?"
    time="15:58"
    avatarSrc={AVATAR}
    online
  />
  <ChatMessage user="sender" message="Yeah, after 5." time="15:59" status="read" />
  <ChatMessage
    user="sender"
    message="Want to grab something to eat around the corner?"
    time="15:59"
    status="read"
  />
  <ChatMessage user="receiver" variant="typing" avatarSrc={AVATAR} online />
  <ChatMessage
    user="receiver"
    variant="audio"
    audioDuration="0:12"
    time="16:01"
    avatarSrc={AVATAR}
    online
  />
  <ChatMessage user="receiver" variant="deleted" time="16:02" showAvatar={false} />
  <ChatMessage
    user="sender"
    message="Perfect, see you there!"
    time="16:03"
    status="delivered"
  />
</div>

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.

string

default:"0:00"

Duration label for the "audio" variant, e.g. "0:05".

string

default:"Avatar"

Avatar alt text.

ReactNode

Avatar fallback (initials or icon) shown before the image loads.

string

Avatar image URL for receiver messages.

boolean

default:"false"

Initial playing state when uncontrolled.

string

default:"Message deleted"

Text shown for the "deleted" variant.

ReactNode

Message body for the "text" variant. Keep it to inline content.

boolean

default:"false"

Show the online indicator on the receiver avatar.

((playing: boolean) => void)

Fired when the audio play/pause button is pressed, with the next playing state.

string

default:"Pause"

Accessible label for the audio pause button.

boolean

Whether the audio is playing (controlled). Pairs with onPlayingChange.

string

default:"Play"

Accessible label for the audio play button.

boolean

default:"true"

Render the receiver avatar. Reserves the avatar space when false so grouped bubbles stay aligned.

"delivered" | "read"

default:"delivered"

Delivery status shown on sender messages (a double tick). Ignored for receiver messages. "read" renders the tick in the read colour.

string

Timestamp shown with the message, e.g. "16:00".

string

default:"Typing"

Accessible label for the typing indicator.

"sender" | "receiver"

default:"receiver"

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

"audio" | "text" | "typing" | "deleted"

default:"text"

The kind of content the message carries.

number[]

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 · Theming

Getting Started

Actions

Forms & Inputs

Overlays & Dialogs

Navigation

Data Display

Feedback & Status

Layout

Media & Audio

Creator & Social

Charts

Icons & Flags

Utility

ChatMessage

Examples

All Variants

Read Receipt

Conversation

Props

ChatMessage

Exported types

​Examples

​All Variants

​Read Receipt

​Conversation

​Props

​ChatMessage

​Exported types

Examples

All Variants

Read Receipt

Conversation

Props

ChatMessage

Exported types