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, speakLabel, stopSpeakLabel, 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.
`speakable`	`boolean`	`false`	Shows the read-aloud button; the host owns playback.
`speakState`	`'idle' \| 'loading' \| 'speaking'`	`'idle'`	Playback state set by the host: `loading` shows a spinner, `speaking` a stop icon.
`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.
`speakLabel`	`string`	`'Read aloud'`	Accessible name and hover tooltip of the read-aloud button.
`stopSpeakLabel`	`string`	`'Stop reading'`	Accessible name and hover tooltip of the read-aloud button while `speaking`.

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.
`speak`	—	Fires when the read-aloud button 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 read-aloud button is a toggle: every click emits speak, even while loading, and the host starts or stops playback; aria-pressed is true while speaking.
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.