ChatMessage
chat-messageDisplays one chat turn with role, content, status, and supporting actions.
Usage
Users and Assistants
role determines the alignment and bubble background color: user right-aligned primary bottom / assistant left-aligned surface bottom. name appears above the text.
<>
<ChatMessage role="user" name="Me">Help me rewrite the homepage to 100% dogfood</ChatMessage>
<ChatMessage role="assistant" name="Hulian AI">Okay, let me take a look at the existing structure before starting.</ChatMessage>
</>Loading state
While the agent is responding, loading renders TypingDots in the message body and ignores placeholder children.
<ChatMessage role="assistant" name="Hulian AI" loading>Placeholder</ChatMessage>Read receipt
status Only in role=user (right bubble) Rendering: sending circle / sent single hook / read double blue hook.
<>
<ChatMessage role="user" name="Agent·Xiao Lian" timestamp="Just now" status="sent">A work order has been submitted for you. </ChatMessage>
<ChatMessage role="user" name="Agent·Xiao Lian" timestamp="Just now" status="read">Refunds are expected to arrive in 1-3 working days.</ChatMessage>
</>Avatar and operation area
avatar slot customization <Avatar/>, actions slot <MessageActions/> (copy/like/dislike, etc., press callback and content to show or hide).
<ChatMessage
role="assistant"
name="Hulian AI"
avatar={<Avatar fallback="Lian" />}
actions={
<MessageActions
content="Home page rewriting completed"
onLike={() => {}}
onDislike={() => {}}
/>
}
>
Completed home page rewrite, 100% dogfood @hulianui/ui.
</ChatMessage>System Announcement
role=system is centered and weakened, does not enter the bubble/avatar system, and is used for switching prompts, etc.
<ChatMessage role="system">Switched to Opus 4.8</ChatMessage>When to Use
Render one user or assistant message, or a centered system notice. Use Conversation for a scrolling message history and place MessageActions in the actions slot for controls below the bubble.
Avatar fallback copy and receipt accessibility labels follow the nearest ConfigProvider locale (zhCN by default, or enUS).
Import
import { ChatMessage } from "@hulianui/ui"Props
Inherited from Omit<HTMLAttributes<HTMLDivElement>, "title">.
| Name | Type | Default | Description |
|---|---|---|---|
| role * | "user" | "assistant" | "system" | "assistant" (showcase) | User messages are right-aligned on a primary background, assistant messages are left-aligned on a surface background, and system notices are centered and muted |
| loading | boolean | false | Replaces the message body with TypingDots while the assistant response is being generated |
| status | "sending" | "sent" | "read" | — | User-only receipt: spinner with "\u53d1\u9001\u4e2d" (Sending), one check with "\u5df2\u9001\u8fbe" (Delivered), or two blue checks with "\u5df2\u8bfb" (Read) as the built-in aria-label |
Slots
| Slot | Type | Description |
|---|---|---|
| children | ReactNode | Message body; pass plain text directly or wrap rendered Markdown in <Prose /> |
| avatar | ReactNode | Avatar slot, typically a Hulian <Avatar/>; omitted avatars use "\u6211" (Me) for user or "AI" for assistant, while system messages render no avatar |
| name | ReactNode | Sender’s name (above the text) |
| timestamp | ReactNode | Timestamp (right side of name, weakened color) |
| actions | ReactNode | Action area below the bubble, typically <MessageActions/> |
Usage Guidelines
statusreceipts render only forrole="user"; assistant and system messages ignore them.- When
loadingis true, the text is replaced by TypingDots.childrenis only a placeholder and not displayed.
Related
Conversation · PromptInput · TypingDots · ThinkingBlock · ToolCall · AgentPlan
Playground
<ChatMessage role="assistant">Hello, how can I help you?</ChatMessage>