ChatMessage

ChatMessage

<ChatList>
  <ChatMessage role="assistant" avatar={<Avatar fallback="HX" />} name="helixui" time="now">
    Hello — how can I help today?
  </ChatMessage>
  <ChatMessage role="user" avatar={<Avatar fallback="ST" />} time="just now">
    Show me a streaming reply.
  </ChatMessage>
</ChatList>

Variants

{/* bubble (default): user right, assistant left, system centered */}
<ChatMessage role="user">…</ChatMessage>

{/* inline: avatar + name + content (Slack-style) */}
<ChatMessage variant="inline" avatar={<Avatar fallback="AL" />} name="Alice" time="9:42 AM">
  Just deployed the new version.
</ChatMessage>

Install: @helixui/core

import { ChatMessage } from '@helixui/core'

status: stable · since: 0.3.0

Tags: bubble, message, role, user, assistant

Anatomy

[avatar]  Name · time
          ┌──────────────────────┐
          │  message body…       │
          └──────────────────────┘
          [optional footer]

Layout

• display — block
• width — fill
• height — content
• intrinsicSize — left or right aligned by role, max ~720px wide
• stackable — true
• fullBleed — false

Visual

A row containing an avatar, a name + timestamp meta line, and a content bubble. User messages typically right-align with brand-tinted bubble; assistant left-aligns with neutral surface. The inline variant strips the bubble for Slack-style flat feeds.

Props

Name	Type	Default	Description
role	'user' | 'assistant' | 'system'	assistant	Speaker. user aligns right (in bubble variant); system centers and dims.
variant	'bubble' | 'inline'	bubble	bubble for messenger UIs; inline for thread-style chat.
avatar	ReactNode	—	Avatar element rendered to the left (or right, for user).
name	ReactNode	—	Display name. Position depends on variant.
time	ReactNode	—	Timestamp or relative time (‘2m ago’).
pending	boolean	false	Mute the bubble while a message is being sent or streamed.
footer	ReactNode	—	Slot below the bubble — reactions, ToolCall, CitationList.

Slots

• children — message content (text, MarkdownMessage, CodeBlock, etc.)

Tokens used

color.bg.action.brand.default, color.bg.action.neutral.default, color.text.primary, color.text.muted, color.text.on.brand, radius.lg, radius.sm, space.1, space.2, space.3, space.4, font.family.sans, font.size.xs, font.size.sm, font.weight.semibold

Accessibility

Notes

• The bubble itself is a styled <div>. Provide a sensible reading order; screen readers announce children + meta.
• For lists of messages, wrap in <ChatList> which is a role="log" container.

Composes with

Component	Relation	Note
ChatList	parent	Always inside a ChatList.
Avatar	child	Leading avatar.
ToolCall	child	Tool calls render inside an assistant message.
ThinkingBlock	child	Reasoning summary inside an assistant message.
ChatComposer	sibling
TypingIndicator	sibling
ChatHeader	sibling

Prompt examples

These are the AI prompt → JSX mappings used by the helixui prompt DSL and integrations like Cursor / Claude Code.

user prompt

“a user message saying hello”

<ChatMessage role="user">Hello!</ChatMessage>

streaming assistant reply

“show an assistant reply with a streaming caret”

<ChatMessage role="assistant">
  {streamedText}<StreamingIndicator />
</ChatMessage>

Related

• ChatList
• ChatComposer
• TypingIndicator
• ChatHeader