Skip to content

Message Actions

Copy, retry, edit and rating for one message.

Brew assistant

Rest the Guji for two more days. Beans roasted this light keep releasing gas for about ten days, and brewing early tastes sharp.

'use client';

import { useState } from 'react';
import { ChatMessage, MessageActions, StreamingText } from '@brand-studio/ui';

const answer = 'Rest the Guji for two more days. Beans roasted this light keep releasing gas for about ten days, and brewing early tastes sharp.';

export default function MessageActionsDemo() {
  const [run, setRun] = useState(0);
  return (
    <div style={{ width: '100%', maxWidth: 520 }}>
      <ChatMessage name="Brew assistant" avatar="B" actions={<MessageActions copyText={answer} onRetry={() => setRun(value => value + 1)} />}>
        <StreamingText key={run} text={answer} />
      </ChatMessage>
    </div>
  );
}

Installation

pnpm add @brand-studio/ui

npm install @brand-studio/ui

yarn add @brand-studio/ui

bun add @brand-studio/ui

Install the peer dependencies
```
npm install react react-dom
```
Import the stylesheet once
```
import '@brand-studio/ui/styles.css';
```

Wrap your app in a brand theme

import { BrandTheme, MessageActions } from '@brand-studio/ui';
import brand from './brand.json';

<BrandTheme palette={brand.tokens} mode="system">
  {/* your app */}
</BrandTheme>

Usage

import { MessageActions } from '@brand-studio/ui';

<ChatMessage name="Brew assistant" actions={<MessageActions copyText={answer} onRetry={regenerate} onFeedback={rate} />}>
  {answer}
</ChatMessage>

Copy, retry and edit show only when you pass copyText, onRetry or onEdit. Rating is always there: pressing the same thumb again clears it. Inside a ChatMessage the bar shows on hover or focus, and stays visible on touch screens and once rated.

Accessibility

Each button has a label, and the thumbs report whether they are pressed.
"Copied", or "Copy failed", is announced after copying.

API Reference

Prop	Type	Default
`copyText?`	`string`	–
`onRetry?`	`(() => void)`	–
`onEdit?`	`(() => void)`	–
`feedback?`	`Feedback`	–
`onFeedback?`	`((value: Feedback) => void)`	–
`label?`	`string`	`'Message actions'`
`className?`	`string`	`''`