Composable user and assistant message layouts for AI chat.
Use ChatMessage to compose assistant and user turns with avatars, bubbles, media, markdown, actions, and attachments.
Render assistant responses with rich markdown content.
Use the loading demo for pending assistant turns.
import {ChatMessage} from "@heroui-pro/react";
import {Markdown} from "@heroui-pro/react/markdown";
<ChatMessage.Assistant>
<ChatMessage.Avatar alt="Assistant" fallback="AI" show />
<ChatMessage.Body>
<ChatMessage.Content>
<Markdown>{response}</Markdown>
</ChatMessage.Content>
</ChatMessage.Body>
</ChatMessage.Assistant>
<ChatMessage.User>
<ChatMessage.Bubble>
<ChatMessage.Content>Hello</ChatMessage.Content>
</ChatMessage.Bubble>
</ChatMessage.User>.chat-message--assistant - Assistant message row.chat-message--user - User message wrapper.chat-message__avatar - Avatar slot.chat-message__body - Assistant body column.chat-message__bubble - User bubble.chat-message__content - Message content.chat-message__actions - Action rowAssistant message root. Supports native div props.
User message root. Supports native div props.
Avatar slot for assistant messages. Extends HeroUI Avatar props.
Assistant content column.
User message bubble.
Message text/content slot.
Container for message actions.