CopilotChatView

Overview

CopilotChatView is a layout component that combines a scrollable message transcript with the chat input area, suggestion pills, a scroll-to-bottom button, and an optional welcome screen. It is the visual core of the chat interface and is used internally by CopilotChat, CopilotPopup, and CopilotSidebar.

Every visual piece of CopilotChatView is exposed as a slot, so you can replace, style, or extend any part without rewriting the entire layout.

Import

import CopilotChatView from "@copilotkit/react-core/v2";
import "@copilotkit/react-core/v2/styles.css";

Slots

CopilotChatView uses the WithSlots pattern. Each slot prop accepts one of three value types:

Passing a children render-prop gives you access to all composed slot elements plus data props, letting you arrange them in a fully custom layout.

Slot Props

Data Props

Static Sub-Components

CopilotChatView exposes its default slot implementations as static properties for use in custom compositions:

• CopilotChatView.ScrollView -- default scroll container with auto-scroll support
• CopilotChatView.ScrollToBottomButton -- default scroll-to-bottom button
• CopilotChatView.Feather -- default gradient overlay
• CopilotChatView.InputContainer -- default input container
• CopilotChatView.Disclaimer -- default disclaimer text
• CopilotChatView.WelcomeMessage -- default welcome message
• CopilotChatView.WelcomeScreen -- default welcome screen layout

Usage

Standalone Usage

function CustomChat({ messages, isRunning }) {
  return (
    <CopilotChatView
      messages={messages}
      isRunning={isRunning}
      autoScroll={true}
    />
  );
}

Replacing a Slot with a Custom Component

function CustomDisclaimer(props) {
  return (
    <div {...props}>Powered by CopilotKit. Responses may contain errors.</div>
  );
}

function Chat({ messages, isRunning }) {
  return (
    <CopilotChatView
      messages={messages}
      isRunning={isRunning}
      disclaimer={CustomDisclaimer}
    />
  );
}

Styling a Slot with a className

function Chat({ messages, isRunning }) {
  return (
    <CopilotChatView
      messages={messages}
      isRunning={isRunning}
      scrollView="bg-gray-50"
      inputContainer="border-t border-gray-200"
    />
  );
}

Custom Layout with Children Render-Prop

function Chat({ messages, isRunning }) {
  return (
    <CopilotChatView messages={messages} isRunning={isRunning}>
      {({
        scrollView,
        input,
        inputContainer,
        feather,
        disclaimer,
        suggestionView,
      }) => (
        <div className="flex flex-col h-full">
          <div className="flex-1 overflow-hidden">{scrollView}</div>
          {feather}
          {suggestionView}
          {inputContainer}
        </div>
      )}
    </CopilotChatView>
  );
}

Behavior

• Auto-scroll: When autoScroll is true, the view uses a stick-to-bottom strategy that keeps the latest message visible. A scroll-to-bottom button appears when the user scrolls up.
• Welcome screen: When messages is empty and welcomeScreen is not false, a welcome screen is rendered in place of the transcript. The welcome screen receives the input and suggestionView elements so they can be placed within the welcome layout.
• Input container positioning: The input container is absolutely positioned at the bottom of the chat, and the scroll area pads its content to avoid overlap.
• Resize handling: The scroll view monitors input container height changes to keep padding in sync and hides the scroll-to-bottom button during resize transitions.

Related

• CopilotChat -- high-level component that wires an agent into CopilotChatView
• CopilotPopup -- popup variant that uses CopilotPopupView (extends CopilotChatView)
• CopilotSidebar -- sidebar variant that uses CopilotSidebarView (extends CopilotChatView)