Skip to content

Message Actions

An assistant answer with Copy, Retry and feedback actions, and three versions to step through. The response is rendered markdown styled with Prose.

Sourcecomponents/message.tsx
How do I make a pricing table accessible?

Use a <caption> to name the table, and scope on each header cell.

  • Keep one header row.
  • Don’t merge cells.

Last action: None yet

Usage

Message Actions usage
import { Copy, RefreshCcw } from "lucide-react";import { Message, MessageAction, MessageActions, MessageBranch, MessageBranchContent, MessageBranchNext, MessageBranchPage, MessageBranchPrevious, MessageBranchSelector, MessageContent, MessageResponse, MessageToolbar } from "@/components/message";
export function MessageExtrasUsage({ versions, onRetry }: { versions: { id: string; html: string; text: string }[]; onRetry: () => void }) {  return (    <Message>      <MessageContent>        <MessageBranch>          <MessageBranchContent>            {versions.map((version) => (              // `html` is your markdown renderer's output; Guibrief doesn't parse markdown.              <MessageResponse key={version.id} dangerouslySetInnerHTML={{ __html: version.html }} />            ))}          </MessageBranchContent>          <MessageToolbar>            <MessageBranchSelector>              <MessageBranchPrevious />              <MessageBranchPage />              <MessageBranchNext />            </MessageBranchSelector>            <MessageActions>              <MessageAction label="Copy" tooltip="Copy" onClick={() => navigator.clipboard.writeText(versions.at(-1)?.text ?? "")}>                <Copy />              </MessageAction>              <MessageAction label="Retry" tooltip="Retry" onClick={onRetry}>                <RefreshCcw />              </MessageAction>            </MessageActions>          </MessageToolbar>        </MessageBranch>      </MessageContent>    </Message>  );}

When to use

Use when

An assistant's answer: MessageResponse for the HTML your markdown renderer produced (Prose styles; Guibrief doesn't parse markdown), MessageAction icon buttons with a required label (Copy, Retry, feedback), and MessageBranch to step through regenerated versions ("2 of 3")

Don’t use when

Actions that belong to the whole conversation (put those in the header); a user's own message (no actions or versions)