Skip to content
AI & AgentsPro

Chat Message

A single message bubble on the indigo tint, aligned right for the user and left for the assistant.

Usage

AV
Summarize the Q3 report.
Revenue grew 12% quarter over quarter.

Installation

bash
npm install @wunderui/react

Then import what you need:

tsx
import { ChatMessage, ChatMessageActions } from "@wunderui/react"

Examples

User

The user's message in an indigo bubble.

Can you summarize the Q3 report?

Assistant

The assistant's answer as plain text.

Revenue grew 12% quarter over quarter.

In context

How the component is used inside real screens — the same compositions as the Usage section of the Figma page.

Assistant conversation

One conversation with both roles, a tool call, sources and actions.

AV
What changed in Q3?
q3-report.pdf2.4 MB

Revenue grew 12% quarter over quarter, driven by 1,204 new customers.