CopilotChatUserMessage

Overview

CopilotChatUserMessage shows user-authored messages aligned to the right with optional branch navigation. The default message renderer formats content with white-space: pre-wrap to preserve line breaks. Branch navigation controls only render when numberOfBranches is greater than 1 and an onSwitchToBranch handler is provided, enabling users to navigate between alternative conversation branches.

Import

import { CopilotChatUserMessage } 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 User Message

function UserBubble({ message }) {
  return <CopilotChatUserMessage message={message} />;
}

With Edit Support

function EditableUserMessage({ message, onEdit }) {
  return (
    <CopilotChatUserMessage
      message={message}
      onEditMessage={({ message }) => onEdit(message)}
    />
  );
}

With Branch Navigation

function BranchedUserMessage({
  message,
  branchIndex,
  totalBranches,
  onSwitch,
}) {
  return (
    <CopilotChatUserMessage
      message={message}
      branchIndex={branchIndex}
      numberOfBranches={totalBranches}
      onSwitchToBranch={({ branchIndex }) => onSwitch(branchIndex)}
    />
  );
}

Customizing Appearance with Slots

function StyledUserMessage({ message }) {
  return (
    <CopilotChatUserMessage
      message={message}
      messageRenderer="bg-blue-600 text-white rounded-2xl px-4 py-2"
      toolbar="mt-1"
      onEditMessage={({ message }) => console.log("Edit:", message.id)}
      additionalToolbarItems={
        <button onClick={() => console.log("Pin:", message.id)}>Pin</button>
      }
    />
  );
}

Full Edit and Branch Workflow

function FullFeaturedUserMessage({ message, branches }) {
  const [currentBranch, setCurrentBranch] = useState(0);

  return (
    <CopilotChatUserMessage
      message={message}
      branchIndex={currentBranch}
      numberOfBranches={branches.length}
      onSwitchToBranch={({ branchIndex }) => setCurrentBranch(branchIndex)}
      onEditMessage={({ message }) => {
        // Open edit modal
        openEditModal(message);
      }}
    />
  );
}

Behavior

• Right-Aligned Layout: User messages are rendered with right-aligned positioning to visually distinguish them from assistant messages.
• Whitespace Preservation: The default message renderer uses white-space: pre-wrap, so line breaks and spacing in the original message are preserved.
• Conditional Branch Navigation: The branch navigation controls are only rendered when both conditions are met: numberOfBranches > 1 and onSwitchToBranch is provided. This prevents showing navigation for single-branch conversations.
• Conditional Edit Button: The edit button only appears in the toolbar when onEditMessage is provided.
• Localized Labels: Toolbar button tooltips are sourced from the nearest CopilotChatConfigurationProvider. See useCopilotChatConfiguration for available label keys.
• 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

• CopilotChatMessageView -- Parent component that uses this as the default user message slot
• CopilotChatAssistantMessage -- Companion component for assistant messages
• useCopilotChatConfiguration -- Provider for localized toolbar labels