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

<PropertyReference name="messageView" type="SlotValue<typeof CopilotChatMessageView>"

The message list component that renders the conversation transcript. The default displays assistant messages, user messages, and a typing cursor. Replace it to add custom message types or modify the message layout. </PropertyReference>

<PropertyReference name="scrollView" type="SlotValue<React.FC<React.HTMLAttributes<HTMLDivElement>>>"

The scrollable container wrapping the message list. The default handles auto-scroll behavior and scroll position tracking. Replace it to implement custom scroll mechanics. </PropertyReference>

<PropertyReference name="scrollToBottomButton" type="SlotValue<React.FC<React.ButtonHTMLAttributes<HTMLButtonElement>>>"

A button that appears when the user has scrolled up from the bottom of the transcript. Clicking it scrolls the view back to the latest message. </PropertyReference>

<PropertyReference name="inputContainer" type="SlotValue<React.FC<React.HTMLAttributes<HTMLDivElement> & { children: React.ReactNode }>>"

The container that wraps the input and disclaimer at the bottom of the chat. Positioned absolutely to remain fixed at the bottom as content scrolls. </PropertyReference>

<PropertyReference name="feather" type="SlotValue<React.FC<React.HTMLAttributes<HTMLDivElement>>>"

A decorative gradient overlay that appears above the input container, creating a smooth visual transition between the message area and the input. </PropertyReference>

<PropertyReference name="disclaimer" type="SlotValue<React.FC<React.HTMLAttributes<HTMLDivElement>>>"

A disclaimer text line displayed below the input (e.g. "AI can make mistakes. Please verify important information."). Override or hide it with a replacement component. </PropertyReference>

<PropertyReference name="suggestionView" type="SlotValue<typeof CopilotChatSuggestionView>"

The component that renders suggestion pills. Replace it to change how suggestions are displayed or animated. </PropertyReference>

Data Props

<PropertyReference name="inputProps" type="Partial<Omit<CopilotChatInputProps, 'children'>>"

Additional props forwarded to the inner CopilotChatInput component. Use this to configure auto-focus, custom submission handlers, transcription callbacks, or tools menus without replacing the input slot entirely. </PropertyReference>

<PropertyReference name="onSelectSuggestion" type="(suggestion: Suggestion, index: number) => void"

Callback invoked when the user clicks a suggestion pill. Receives the selected suggestion object and its index. </PropertyReference>

• true -- show the default welcome screen
• false -- disable the welcome screen
• className string -- style the default welcome screen
• Component -- replace the welcome screen entirely

The welcome screen component receives input and suggestionView as React elements, plus a welcomeMessage slot, so you can compose them in any layout.

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)