MessageActions
message-actionsGroups copy, retry, rate, and related controls for a chat message.
Usage
Full set of operations
Provides content + each callback, rendering copy/regenerate/like/dislike four keys.
<MessageActions
content="Hulian supports light and dark dual themes with 0 flicker."
onRegenerate={() => regenerate()}
onLike={() => rate("up")}
onDislike={() => rate("down")}
/>Copy only
When only transmitting content, the copy button is displayed separately. After clicking, Check returns 1.5s.
<MessageActions content="Read-only fragment, for copying only." />Add custom keys
children Append any operation (such as collection, sharing) at the end.
<MessageActions content={text} onRegenerate={regen}>
<button
type="button"
className="inline-flex h-7 items-center rounded-[var(--radius)] px-2 text-xs text-muted hover:bg-surface-hover hover:text-foreground"
>
Favorite
</button>
</MessageActions>hangs under ChatMessage
The actions slot as ChatMessage, with the following bubble displayed below the message.
<ChatMessage
role="assistant"
name="Hulian AI"
actions={<MessageActions content={text} onRegenerate={regen} onLike={up} onDislike={down} />}
>
Yes. Light and dark themes render without a flash because SSR injects variables before first paint.
</ChatMessage>When to Use
Place it beneath a generated assistant message to provide copy, regenerate, like, and dislike controls—typically through the actions slot of ChatMessage. Unlike PromptSuggestions, which guides the next question, MessageActions handles feedback and reuse for the current message. Each button appears only when its content or callback is provided.
Import
import { MessageActions } from "@hulianui/ui"Props
Inherits HTMLAttributes<HTMLDivElement>, additionally:
| Name | Type | Default | Description |
|---|---|---|---|
| content | string | — | Text copied by the built-in clipboard action; providing it displays the copy button and 1.5-second success feedback |
Events
| Event | Type | Description |
|---|---|---|
| onCopy | () => void | Called after the built-in clipboard action; providing it also displays the copy button |
| onRegenerate | () => void | Called when regenerate is selected; providing it displays the button |
| onLike | () => void | Called when like is selected; providing it displays the button |
| onDislike | () => void | Called when dislike is selected; providing it displays the button |
Slots
| Slot | Type | Description |
|---|---|---|
| children | ReactNode | Additional custom action controls |
Usage Guidelines
- Buttons render on demand: the copy button appears when
contentoronCopyis present; the remaining buttons appear when their corresponding callbacks are provided. - Copying uses the Clipboard API and shows a checkmark for 1.5 seconds.
onCopyruns in parallel for analytics or toast handling, so callers do not need to invokenavigator.clipboardagain. - Built-in accessible labels are Chinese:
\u5df2\u590d\u5236("Copied"),\u590d\u5236("Copy"),\u91cd\u65b0\u751f\u6210("Regenerate"),\u8d5e("Like"), and\u8e29("Dislike").
Related
StreamingText · PromptSuggestions · Citation · Conversation · ChatMessage · PromptInput