AI Message Actions
Explicit copy actions with pending, success and recoverable error feedback.
Give copy actions honest feedbackLink to section
AIMessageActions invokes your onCopy callback with a snapshot of value.
It reports success only when the callback resolves. Rejection or a synchronous
error displays recovery text and enables another attempt. The component never
accesses the clipboard by itself.
Package availability
This API is introduced by the conversation primitives minor Changeset. Use the repository workspace until publication; UI 1.6.1 and earlier do not export it.
PreviewLink to section
Start with one useful flow, including recovery from errors.
Copy writes this sample text to your clipboard. Enable the failure toggle to try recovery; disable it to retry.
The example runs here in the documentation. The Explorer link appears when this story is available in the published catalog; otherwise use this inline preview.
"use client";
import { AIMessageActions } from "@pycolors/ui";
export function CopyResponse({ text }: { text: string }) {
return (
<AIMessageActions
value={text}
copyAriaLabel="Copy assistant response"
onCopy={(snapshot) => navigator.clipboard.writeText(snapshot)}
/>
);
}Clipboard access may require a secure context and user permission. Keep the
original message selectable when copying fails. Return or await the actual promise
from onCopy; a fire-and-forget callback cannot report failure accurately.
APILink to section
| Prop | Default | Purpose |
|---|---|---|
value: string | Required | Text snapshot supplied to the copy callback |
onCopy(value): void | Promise<void> | Required | Application action, overrides the native div copy handler |
disabled | false | Disable the action during application-controlled states |
copyLabel | Copy | Visible button label |
copyAriaLabel | Copy message | Accessible action name |
pendingLabel | Copying… | Pending status text |
successLabel | Copied. | Resolved status text |
errorLabel | Manual-copy recovery text | Rejected status text |
children | — | Additional application actions in the row |
Native div props, className, ref | — | Outer HTMLDivElement attributes, styles and ref |
The slot is ai-message-actions. The native button supports keyboard activation
and is disabled when empty, disabled by the consumer or pending. Repeated clicks
cannot launch duplicate pending copies. A role="status" region announces concise
feedback. Labels can be localized independently.
Changing value clears feedback and invalidates stale settlements. Unmounting also
invalidates pending feedback; neither operation cancels your clipboard promise.
Use stable message keys, and disable copying during streaming if your product
should export only complete messages.