Message Actions | Tuff Docs

Usage

Loading demo...

Use native <button>s, or elements with a tabindex, for custom actions; non-focusable elements stay out of the arrow-key order.
copy fires even when the clipboard write fails; handle any fallback there instead of copying a second time.
When localizing, override copyLabel, copiedLabel, regenerateLabel, and label together.
Mount the toolbar after the message finishes streaming, so nobody copies a half-written answer.

Name	Type	Default	Description
`copyText`	`string`	—	Text the copy button writes; without it, no copy button renders.
`regenerable`	`boolean`	`false`	Shows the regenerate button.
`appear`	`boolean`	`true`	Plays a blur-fade entrance on mount.
`copyLabel`	`string`	`'Copy'`	Accessible name and hover tooltip of the copy button.
`copiedLabel`	`string`	`'Copied'`	Accessible name and hover tooltip in the copied state.
`regenerateLabel`	`string`	`'Regenerate'`	Accessible name and hover tooltip of the regenerate button.
`label`	`string`	`'Message actions'`	Accessible name of the toolbar.

Name	Payload	Description
`copy`	`(text: string)`	Fires after a copy click with `copyText`, even if the clipboard write failed.
`regenerate`	—	Fires when regenerate is clicked.

Name	Description
`default`	Appended after the built-in buttons; focusable elements in it join the arrow-key order.

An empty-string copyText still renders the copy button, but clicking does nothing; omit the prop to hide it.
Copying writes through navigator.clipboard; the button then shows its copied state for 1200ms and ignores repeat clicks.
The bar is a role="toolbar": one Tab stop, arrow keys cycle through the controls, and Home / End jump to the ends.
The arrow-key order is read live from the DOM (button:not([disabled]), [href], any non--1 tabindex), so disabled buttons are excluded.