Actions

The copy, feedback and retry row under a message.

import { ClaudeActions } from "../components/claude-actions";

export default function ClaudeActionsExample() {
  return (
    <div className="bg-claude-bg flex flex-col gap-6 p-6">
      <ClaudeActions text="European markets open higher." />
      <ClaudeActions
        className="self-end"
        from="user"
        text="what's in the news today"
        timestamp="now"
      />
    </div>
  );
}

$ bunx --bun shadcn@latest add @notra/claude-actions

Each action is a ghost shadcn Button with a shadcn Tooltip. Assistant messages get Copy, Read aloud, Good response, Bad response and Retry. User messages get Retry, Edit and Copy. Copy writes text to the clipboard and shows a check for a moment.

Prop	Default	Description
`text`		The text Copy puts on the clipboard.
`from`	`assistant`	Picks the action set and alignment.
`timestamp`		Shown after the assistant actions or before the user actions.
`onRetry`, `onEdit`, `onReadAloud`, `onGoodResponse`, `onBadResponse`		Click handlers for each action.

ClaudeActionButton is exported too, for adding your own actions to the row.

Used in

Claude

A full recreation of the claude.ai chat with web search, serif replies, message actions and the model picker.