CopilotChatMessageView

Overview

CopilotChatMessageView renders a list of chat messages and, optionally, a typing cursor while the agent is running. It delegates rendering of individual messages to slot components (assistantMessage and userMessage) and supports a render-prop children function for full control over layout.

Import

import { CopilotChatMessageView } 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.

Usage

Basic Message List

function MessageList() {
  const { agent } = useAgent();

  return (
    <CopilotChatMessageView
      messages={agent.messages}
      isRunning={agent.isRunning}
    />
  );
}

Customizing Message Slots

function CustomMessages() {
  const { agent } = useAgent();

  return (
    <CopilotChatMessageView
      messages={agent.messages}
      isRunning={agent.isRunning}
      assistantMessage="bg-blue-50 p-4 rounded-xl"
      userMessage="bg-gray-100 p-4 rounded-xl"
      cursor={() => (
        <div className="animate-pulse text-gray-400">Thinking...</div>
      )}
    />
  );
}

Render-Prop Children for Custom Layout

function CustomLayout() {
  const { agent } = useAgent();

  return (
    <CopilotChatMessageView
      messages={agent.messages}
      isRunning={agent.isRunning}
    >
      {({ isRunning, messages, messageElements }) => (
        <div className="flex flex-col gap-4 p-6">
          <div className="text-sm text-gray-500">
            {messages.length} message{messages.length !== 1 ? "s" : ""}
          </div>
          {messageElements}
          {isRunning && (
            <div className="text-sm text-blue-500 animate-pulse">
              Agent is responding...
            </div>
          )}
        </div>
      )}
    </CopilotChatMessageView>
  );
}

Hiding the Toolbar on Assistant Messages

function MinimalChat() {
  const { agent } = useAgent();

  return (
    <CopilotChatMessageView
      messages={agent.messages}
      isRunning={agent.isRunning}
      assistantMessage={{ toolbarVisible: false }}
    />
  );
}

Behavior

• Message Rendering: Each message in the messages array is rendered using the corresponding slot component based on its role. Assistant messages use the assistantMessage slot; user messages use the userMessage slot.
• Cursor Display: The cursor slot is only rendered when isRunning is true. It appears after the last message in the list, and is hidden when the last rendered message is a reasoning message, which shows its own indicator.
• Virtualization: Inside a chat scroll container, once more than 50 messages render, only the rows on screen are mounted. The count is of the messages that render: the ones transformMessages returns or, with groupMessages, the ones in the rows it returns. The window itself moves by rows, and each group is one row. Providing children turns virtualization off; in development the component warns once when that is what keeps a long thread mounted in full.
• Latest Message: The last rendered message is passed to its slot as isLatest. While isRunning is true, the latest assistant message hides its toolbar and a latest reasoning message shows as streaming.
• Render-Prop Override: When children is provided as a function, the component delegates all layout to that function. The messageElements array is pre-built from the slot components, so custom layouts still benefit from slot customization.
• 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.

Related

• CopilotChatAssistantMessage -- Default assistant message slot component
• CopilotChatUserMessage -- Default user message slot component
• CopilotChatView -- Higher-level chat view that composes this component