Chat Message | Versa UI

Complete messaging component system for building modern chat interfaces. Supports multiple message types (text, icon, image, file), sender-based layouts, inline reply previews, emoji reactions, and hover-activated reaction triggers.

Chat Message Playground

Preview

Code

Adam Smith

Can you provide me with more details on the project?

06:04 AM

Controls

Sender:

Other

User

Type:

Text

Icon

Image

File

Avatar:

Name:

Reply:

Reaction:

Installation

You can add the chat message component to your project manually:

Install the following dependencies:

npm

pnpm

yarn

bun

npm install class-variance-authority clsx tailwind-merge @phosphor-icons/react @react-aria/interactions

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Update the import aliases (e.g. @/components, @/utils) in the copied files to match your project's path configuration.

Basic Usage

import { ChatMessage } from '@versaui/ui/components/ChatMessage';

// Basic text message from another user
<ChatMessage
    sender="other"
    senderName="Alice"
    message="Hey, how's the project going?"
    timestamp="10:30 AM"
/>

// User's own message
<ChatMessage
    sender="user"
    message="It's going great, thanks!"
    timestamp="10:31 AM"
/>

Variants

Sender

Messages align and style differently based on sender:

// Other user — left aligned, secondary color, with avatar
<ChatMessage sender="other" senderName="Bob" />

// Current user — right aligned, neutral color, no avatar
<ChatMessage sender="user" />

Message Types

Four content types are supported:

// Text only
<ChatMessage messageType="text" message="Hello!" />

// Icon message (e.g. missed call)
<ChatMessage messageType="icon" iconLabel="Missed call" />

// Image message
<ChatMessage messageType="image" imageUrl="/photo.jpg" message="Check this out" />

// File attachment
<ChatMessage messageType="file" fileName="report.pdf" fileSize="412 KB" />

State

Hover state adds elevation shadow and reveals the react button:

<ChatMessage state="default" />
<ChatMessage state="hovered" />

With Reply

Show an inline reply preview inside the bubble:

<ChatMessage
    reply
    replyProps={{ type: 'text', senderName: 'Alice', content: 'Original message' }}
    message="Yes, I agree!"
/>

With Reactions

Show emoji reaction pills below the bubble:

<ChatMessage
    reaction
    reactionProps={{ variant: '2+' }}
    message="Great idea!"
/>

Sub-Components

ChatReply

Inline reply preview shown inside the chat bubble:

import { ChatReply } from '@versaui/ui/components/ChatMessage';

<ChatReply type="text" senderName="Alice" content="Original message" />
<ChatReply type="icon" content="Missed call" />
<ChatReply type="image" imageUrl="/photo.jpg" />
<ChatReply type="file" fileName="report.pdf" fileSize="412 KB" />

Reactions

Emoji reaction cluster pill beneath a message:

import { Reactions } from '@versaui/ui/components/ChatMessage';

<Reactions variant="1" />
<Reactions variant="2" />
<Reactions variant="2+" />

ReactButton

Smiley icon trigger that opens the quick-pick emoji reaction popover:

import { ReactButton } from '@versaui/ui/components/ChatMessage';

<ReactButton state="default" />
<ReactButton state="hovered" />
<ReactButton state="selected" />

Accessibility

Messages use semantic HTML with appropriate ARIA labels
Reactions use aria-label describing the emoji content
React button uses aria-expanded to indicate popover state
More options button has descriptive aria-label
Reply preview uses role="blockquote" with attribution

Chat Message Props

Prop	Type	Default	Description
`sender`	`'user' \| 'other'`	`'other'`	Message sender determining alignment and colors.
`messageType`	`'text' \| 'icon' \| 'image' \| 'file'`	`'text'`	Content type of the message.
`state`	`'default' \| 'hovered'`	`'default'`	Controlled visual state. Auto-detected via hover when unset.
`avatar`	`boolean`	`true`	Show avatar (other sender only).
`name`	`boolean`	`true`	Show sender name (other sender only).
`senderName`	`string`	`'Adam Smith'`	Display name of the sender.
`message`	`string`	`'Can you provide me with more details on the project?'`	Message text content.
`timestamp`	`string`	`'06:04 AM'`	Timestamp string displayed beside the message.
`reply`	`boolean`	`false`	Show inline reply preview.
`replyProps`	`ChatReplyProps`	`—`	Props passed to the ChatReply sub-component.
`reaction`	`boolean`	`false`	Show reaction pills below the bubble.
`reactionProps`	`ReactionsProps`	`—`	Props passed to the Reactions sub-component.
`imageUrl`	`string`	`—`	Image URL for image-type messages.
`changeIcon`	`ReactNode`	`—`	Custom icon for icon-type messages.
`iconLabel`	`string`	`'Missed call'`	Label text for icon-type messages.
`fileName`	`string`	`'Sample file.pdf'`	File name for file-type messages.
`fileSize`	`string`	`'412 KB'`	File size for file-type messages.
`avatarPerson`	`AvatarPerson`	`'adam-smith'`	Predefined avatar person key from the design system.
`onMoreClick`	`() => void`	`—`	More options button click handler.
`onReact`	`(emoji: string) => void`	`—`	Emoji reaction selection handler.
`className`	`string`	`''`	Additional CSS classes.

Chat MessagePro

Install the following dependencies:

Copy and paste the following code into your project.

Update the import paths to match your project setup.

On this page

Chat Message
Pro