Message Actions

Attach only the actions and source list that the message can support.

Preview

Move the rollout to Friday. Staging passed the retry check, and Priya owns the final coverage review.

10:42 AM

Design guidance

Render an action only when its callback exists. Copy is available for every message and reports clipboard success or failure. Keep sources in the caller-owned CitationList and pass that list to the footer.

Installation

Install

npx shadcn@latest add https://ghost-ui.com/r/message-actions.json

Basic usage

123import { MessageActions } from "@/components/ui/message-actions";

<MessageActions text={messageText} onRetry={retry} />

Structures

MessageActions composes IconButton, ButtonGroup, and ButtonGroupSeparator. MessageActionMenu wraps the caller's message content in canonical ContextMenu behavior. MessageEdit owns only a local draft. MessageDelivery displays only supplied runtime receipts.

Examples

Own user message

Hover, focus, or tap a non-interactive message to reveal its actions and timestamp.

Friday works. I’ll confirm with support.

10:44 AM

Right-click or use the platform context-menu gesture on the message. The menu includes only supplied callbacks.

Move the rollout to Friday.

Edit and resubmit

Cancel restores caller-owned message state. A rejected submit keeps the draft available for correction.

Read receipt

Supply recipient timestamps from the runtime. A recipient without readAt is reported as not read.

Friday works for the rollout.

API reference

MessageActions

MessageActions properties
Prop	Type	Default	Description
`text`required	`string`		Message text copied to the browser clipboard.
`onEdit / onRetry / onShare / onDownload`	`() => void`		Adds the matching action only when its callback is supplied.
`onVote`	`(vote: 'up' \| 'down') => void`		Adds helpful and not-helpful actions.
`vote`	`up \| down \| null`		Caller-owned pressed state for feedback controls.
`timestamp`	`Date \| string \| ReactNode`		Caller-owned timestamp; hidden until message interaction.
`sources`	`ReactNode`		Caller-owned source list, commonly CitationList.
`busy`	`boolean`	`false`	Disables destructive and callback actions while work is active.

MessageEdit and MessageDelivery

MessageEdit and MessageDelivery properties
Prop	Type	Description
`MessageEdit.defaultValue`	`string`	Initial local draft.
`MessageEdit.onSubmit`	`(text: string) => void \| Promise<void>`	Submits through the caller's runtime; rejection keeps the draft.
`MessageEdit.onCancel`	`() => void`	Returns control to caller-owned original message state.
`MessageDelivery.delivery`	`ChatDelivery`	Explicit delivered/read status and recipient timestamps; never inferred by this component.

Accessibility

Icon controls have action-specific labels. Copy feedback is announced. Context actions use the canonical ContextMenu keyboard and pointer behavior. Receipt details open in a Popover with an arrow and name recipients whose readAt is missing as not read.