MessageActions

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

SourcePackage @kerf-js/veneer

Preview

tsx

import { state } from '@kerf-js/core'import {  MessageActions,  Prose,  Stack,  Text} from '@kerf-js/veneer'import { copyConfirm } from '@kerf-js/veneer-core'export function Feedback() {  const said = state('Nothing yet')  const copy = (el: HTMLElement) => {    void copyConfirm(el, 'Rollback finished.')    said.value = 'Copied'  }  return (    <Stack gap="related">      <Prose        text={          'Rollback finished. `mobile-bff` is' +          ' back on `d-4801`.'        }      />      <MessageActions        onCopy={copy}        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 @kerf-js/veneer

Usage

tsx

import { MessageActions } from '@kerf-js/veneer'

After a stop

stopped says what happened to the answer.

tsx

import { MessageActions } from '@kerf-js/veneer'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 veneer'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="message-actions"] [data-part="actions"]

actions

RelatedBranch switcher Assistant