MessageActions

The row of small actions under an answer: copy, rate, regenerate, branch.

SourcePackage @weft-js/warp

Preview

tsx

import { state } from '@weft-js/core'import { MessageActions, Prose, Stack, Text } from '@weft-js/warp'import { copyConfirm } from '@weft-js/warp-core'export function Feedback() {  const said = state('Nothing yet')  return (    <Stack gap="related">      <Prose text="Rollback finished. `mobile-bff` is back on `d-4801`." />      <MessageActions        onCopy={el => { void copyConfirm(el, 'Rollback finished.'); said.value = 'Copied' }}        onFeedback={(value, reason) => (said.value = reason ?? (value ? `Rated ${value}` : 'Rating cleared'))}        onRegenerate={() => (said.value = 'Regenerating')}        onBranch={() => (said.value = 'New branch')}      />      <Text role="caption" subtle>Last action: {said.value}</Text>    </Stack>  )}

Installation

npm install @weft-js/warp

Usage

tsx

import { MessageActions } from '@weft-js/warp'

After a stop

stopped says what happened to the answer.

tsx

import { MessageActions } from '@weft-js/warp'export function Stopped() {  return (    <MessageActions stopped onCopy={() => {}} />  )}

Accessibility

This has no shortcuts of its own: controls inside it use Tab, Enter and Space as usual, and warp's parts keep their roles and labels.

API Reference

Prop	Type	Default	Description
`reasons`	`string[]`	`['Wrong', 'Too long', 'Missed the point']`	What a thumbs down offers.
`stopped`	`boolean`	`false`	Shows that the answer was cut short.
`branch`	`{ index: number; count: number; onChange: (index: number) => void; }`	—	Adds the BranchSwitcher.

Event	Type	Default	Description
`onCopy`	`((el: HTMLElement) => void)`	—	Adds Copy, and is called with the pressed button. Copy the message text here.
`onFeedback`	`((value: Feedback, reason?: string \| undefined) => void)`	—	Called with `up`, `down` or null when thumbs change, and the reason picked for a thumbs down.
`onRegenerate`	`(() => void)`	—	Adds Regenerate: ask for a new answer.
`onBranch`	`(() => void)`	—	Adds Branch: start a new conversation from this message.

Parts

Every element carries a stable name, so you can style it from your own CSS: [data-scope="popover"] [data-part="actions"]

actionscontenttitle

RelatedBranch switcher Assistant