Chat Message Actions

Usage

Assistant responses can expose quick actions beneath the message body.

"use client";

import { ChatMessage, ChatMessageActions } from "@thenamespace/uikit";

const Assistant = ({ children }: { children: React.ReactNode }) => (

Use ChatMessageActions for copy, retry, rating, share, or custom message actions.

Minimal

Minimal action set for compact layouts.

"use client";

import { ChatMessage, ChatMessageActions } from "@thenamespace/uikit";

const Assistant = ({ children }: { children: React.ReactNode }) => (

Use a smaller action set when only one or two actions are needed.

Custom Icons

Swap preset icons via the Icon subcomponents.

"use client";

import { ChatMessage, ChatMessageActions } from "@thenamespace/uikit";
import { Copy01Icon, HugeiconsIcon, ThumbsUpIcon } from "@thenamespace/uikit/icons";

Actions are composable, so you can bring your own icon set.

Anatomy

import { ChatMessageActions } from "@thenamespace/uikit";

<ChatMessageActions>
  <ChatMessageActions.Action aria-label="Copy">...</ChatMessageActions.Action>
  <ChatMessageActions.Action aria-label="Like">...</ChatMessageActions.Action>
</ChatMessageActions>;

CSS Classes

.chat-message-actions - Root action row
.chat-message-actions__action - Individual icon button

API Reference

ChatMessageActions

Root action group. Supports native div props.

ChatMessageActions.Action

Individual action button. Extends Namespace UIKit Button props.