react-ai-chat-actions

Action bar for AI chat messages. Like, dislike, copy, regenerate, speak, pin — with themes, tooltips, loading states, and liquid glass effect out of the box.

Live demo →

Install

npm install react-ai-chat-actions

Usage

import { ActionBar } from "react-ai-chat-actions";
import "react-ai-chat-actions/dist/style.css";

<ActionBar
  messageId="msg-1"
  actions={["like", "dislike", "divider", "copy", "regenerate"]}
  onAction={(type, messageId) => console.log(type, messageId)}
/>;

Props

| Prop | Type | Default | Description | | ------------- | --------------------------- | ------------ | ----------------------------------------- | | messageId | string | — | Required. Passed back in onAction | | theme | ThemeName | light-pill | Theme preset, check type ThemeName | | visible | boolean | true | Show or hide the bar | | transparent | boolean | false | Transparent background of bar | | actions | ActionType[] | — | Which buttons to render and in what order | | onAction | (type, messageId) => void | — | Callback on any button click | | loading | ActionType[] | [] | Buttons in loading state | | disabled | ActionType[] | [] | Buttons in disabled state | | tooltip | boolean | true | Show tooltips on hover | | liquidGlass | boolean | false | Enable liquid glass hover effect |

ActionType

type ActionType =
  | "like"
  | "dislike"
  | "heart"
  | "copy"
  | "regenerate"
  | "retry"
  | "speak"
  | "pin"
  | "bookmark"
  | "share"
  | "edit"
  | "translate"
  | "options"
  | "divider";

Themes

Nine built-in themes across three families — pill, soft, and sharp.

| Theme | Shape | | ------------- | --------------------------- | | light-pill | Light, fully rounded | | light-soft | Light, slightly rounded | | light-sharp | Light, square corners | | dark-pill | Dark, fully rounded | | dark-soft | Dark, slightly rounded | | dark-sharp | Dark, square corners | | neon-pill | Neon glow, fully rounded | | neon-soft | Neon glow, slightly rounded | | neon-sharp | Neon glow, square corners | | olive-pill | Olive, fully rounded | | olive-soft | Olive, slightly rounded | | olive-sharp | Olive, square corners |

  <ActionBar theme="dark-sharp" ... />

Liquid glass

Enable a glass-morphism sliding indicator that follows the cursor across buttons:

<ActionBar
  liquidGlass={true}
  ...
/>

Works best on dark and neon themes.

Roadmap

• [ ] ChatMessageWrapper — wrapper mode with built-in hover visibility
• [ ] Custom actions support
• [ ] Animations

License

MIT