MessageActions Component

The MessageActions component provides interactive buttons for message operations such as copy, retry, edit, and delete.

Import

import { MessageActions } from 'aichatkit'

Usage

Basic Example

basic-message-actions.tsx

import { MessageActions } from 'aichatkit'
 
function BasicMessageActions() {
  const handleCopy = () => console.log('Copy message')
  const handleRetry = () => console.log('Retry message')
  const handleEdit = () => console.log('Edit message')
 
  return (
    <MessageActions 
      onCopy={handleCopy}
      onRetry={handleRetry}
      onEdit={handleEdit}
      showCopy={true}
      showRetry={true}
      showEdit={true}
    />
  )
}

Conditional Actions

conditional-message-actions.tsx

<MessageActions 
  onCopy={handleCopy}
  onRetry={message.role === 'assistant' ? handleRetry : undefined}
  onEdit={message.role === 'user' ? handleEdit : undefined}
  onDelete={handleDelete}
  showCopy={true}
  showRetry={message.status === 'error'}
  showEdit={message.role === 'user'}
  showDelete={canDelete}
/>

API Reference

Props

Prop	Type	Default	Description
`onCopy`	`() => void`	-	Copy action callback
`onRetry`	`() => void`	-	Retry action callback
`onEdit`	`() => void`	-	Edit action callback
`onDelete`	`() => void`	-	Delete action callback
`showCopy`	`boolean`	`true`	Show copy button
`showRetry`	`boolean`	`false`	Show retry button
`showEdit`	`boolean`	`false`	Show edit button
`showDelete`	`boolean`	`false`	Show delete button
`size`	`'small' \| 'medium' \| 'large'`	`'medium'`	Button size
`variant`	`'default' \| 'minimal'`	`'default'`	Button style variant
`className`	`string`	-	Additional CSS classes

Action Types

Copy Action

Copies message content to clipboard

onCopy={() => navigator.clipboard.writeText(message.content)}

Retry Action

Retries failed or incomplete messages

onRetry={() => retryMessage(message.id)}

Edit Action

Allows editing of user messages

onEdit={() => setEditingMessage(message.id)}

Delete Action

Removes message from conversation

onDelete={() => deleteMessage(message.id)}

Customization

Custom Icons

<MessageActions 
  icons={{
    copy: <CustomCopyIcon />,
    retry: <CustomRetryIcon />,
    edit: <CustomEditIcon />,
    delete: <CustomDeleteIcon />
  }}
/>

MessageActions automatically handle loading states and provide appropriate feedback for each action.

CodeBlock Theming