CopilotChatAssistantMessage

Overview

CopilotChatAssistantMessage displays assistant messages with Markdown support, tool call rendering, and an action toolbar. The Markdown renderer uses remark-gfm, remark-math, syntax highlighting via rehype-pretty-code, and KaTeX support for mathematical expressions. The toolbar provides copy, rating (thumbs up/down), read aloud, and regenerate buttons with localized tooltips sourced from CopilotChatConfigurationProvider.

Import

import { CopilotChatAssistantMessage } from "@copilotkit/react-core/v2";
import "@copilotkit/react-core/v2/styles.css";

Props

Slots

All slot props follow the CopilotKit slot system: each accepts a replacement React component, a className string that is merged into the default component's classes, or a partial props object that extends the default component.

CopilotChatToolCallsView

A companion component that renders the tool calls contained in an assistant message. Each call is drawn by the closest registered tool renderer (registered via useFrontendTool, useHumanInTheLoop, useRenderTool or renderToolCalls on the provider).

Calls the agent makes in a row are collapsed into one group, drawn by the group slot, when their renderer opts into grouping. The built-in card from useDefaultRenderTool() does; a custom renderer opts in with group: true. Any other call always shows on its own. Inside a CopilotChatMessageView, groups span messages and follow the view's toolCallDisplay; used on its own, this component groups the calls of message.

Import

import { CopilotChatToolCallsView } from "@copilotkit/react-core/v2";

Props

Slots

Usage

Basic Assistant Message

function AssistantBubble({ message }) {
  return (
    <CopilotChatAssistantMessage
      message={message}
      onThumbsUp={(msg) => console.log("Thumbs up:", msg.id)}
      onThumbsDown={(msg) => console.log("Thumbs down:", msg.id)}
    />
  );
}

Customizing the Toolbar

function CustomToolbarMessage({ message }) {
  return (
    <CopilotChatAssistantMessage
      message={message}
      onRegenerate={(msg) => handleRegenerate(msg)}
      onReadAloud={(msg) => speak(msg.content)}
      additionalToolbarItems={
        <button onClick={() => shareMessage(message)}>Share</button>
      }
      toolbar="border-t border-gray-200 pt-2"
    />
  );
}

Hiding the Toolbar

function MinimalMessage({ message }) {
  return (
    <CopilotChatAssistantMessage message={message} toolbarVisible={false} />
  );
}

Custom Markdown Renderer

function CustomRendererMessage({ message }) {
  return (
    <CopilotChatAssistantMessage
      message={message}
      markdownRenderer={({ content }) => (
        <ReactMarkdown>{content}</ReactMarkdown>
      )}
    />
  );
}

Standalone Tool Calls View

function ToolCallsList({ message, allMessages }) {
  return (
    <div className="tool-calls">
      <CopilotChatToolCallsView message={message} messages={allMessages} />
    </div>
  );
}

Behavior

• Markdown Support: The default Markdown renderer supports GitHub Flavored Markdown (tables, strikethrough, task lists), math expressions rendered with KaTeX, and syntax-highlighted code blocks via rehype-pretty-code.
• Toolbar Visibility: The toolbar appears on hover or focus by default, except on the latest message while isRunning is true. Individual buttons are only rendered when their corresponding callback prop (onThumbsUp, onThumbsDown, onReadAloud, onRegenerate) is provided. The thumbs also render when their slot is set or, inside CopilotChatMessageView under a CopilotChatConfigurationProvider, once Automatic Learning capture has started. The copy button is always visible when the toolbar is shown.
• Localized Labels: All toolbar button tooltips are sourced from the nearest CopilotChatConfigurationProvider. See useCopilotChatConfiguration for the full list of label keys.
• Tool Call Rendering: Tool calls embedded in the assistant message are rendered by the toolCallsView slot. Each tool call is resolved using the useRenderToolCall hook, which looks up registered renderers by tool name.
• Slot System: Each slot prop accepts three forms -- a replacement component, a className string merged into the default, or a partial props object that extends the default component's props.

Reply ratings

When this component renders inside CopilotChatMessageView under a CopilotChatConfigurationProvider and Automatic Learning capture has started, the thumbs record ratings, also while capture reconnects or is stopped:

• A click rates the reply and opens a field for an optional comment next to the thumb.
• Pointing at or keyboard-focusing the chosen thumb opens its comment again. On a touch screen, tapping the chosen thumb removes the rating instead.
• Clicking the chosen thumb again removes the rating.
• The rating shows while the page is open and is sent to the active Trajectory as a message.feedback event. Like any Trajectory event, a rating given while no Trajectory captures is not sent.

onThumbsUp and onThumbsDown run when a rating is given, not when it is removed. The comment field is the feedbackComment slot, CopilotChatAssistantMessage.FeedbackComment by default; its placeholder and send button use the assistantMessageFeedbackCommentPlaceholder and assistantMessageFeedbackCommentSubmitLabel labels. See Collect reply ratings for the event and how ratings reach Intelligence.

Related

• CopilotChatMessageView -- Parent component that uses this as the default assistant message slot
• CopilotChatUserMessage -- Companion component for user messages
• useRenderToolCall -- Hook used internally for resolving tool call renderers
• useCopilotChatConfiguration -- Provider for localized toolbar labels