CopilotChatView.mdx

title	CopilotChatView
description	Layout component that combines a scrollable transcript with the input area

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";

`CopilotChatView` is a named export: `import {CopilotChatView} from "@copilotkit/react-core"` also works via the re-export from `CopilotChat.View`.

Slots

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

Value	Behavior
Component	Replaces the default component entirely. Receives the same props the default would.
className string	Merged into the default component's class list via twMerge.
Partial props object	Spread into the default component as additional or overriding props.

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"

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 name="scrollView" type="SlotValue<React.FC<React.HTMLAttributes>>"

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 name="scrollToBottomButton" type="SlotValue<React.FC<React.ButtonHTMLAttributes>>"

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.

The message input component. The default provides a text area with send button, transcription controls, file upload, and a tools menu. Replace it to build a fully custom input experience.

<PropertyReference name="inputContainer" type="SlotValue<React.FC<React.HTMLAttributes & { 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 name="feather" type="SlotValue<React.FC<React.HTMLAttributes>>"

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

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

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 name="suggestionView" type="SlotValue"

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

Data Props

Array of conversation messages to display. When used via `CopilotChat`, this is managed automatically by the agent. When using `CopilotChatView` standalone, you must supply the messages yourself. Whether the view should automatically scroll to the bottom when new messages arrive. Set to `false` if you want manual scroll control.

<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.

Whether the agent is currently processing. When `true`, the input shows a stop button and the message view displays a typing cursor on the latest assistant message. Array of suggestion objects to display as clickable pills below (or above) the input area. Each suggestion has a `title`, `message`, and optional `isLoading` flag. Indexes of suggestions that are currently in a loading state (e.g. the user just clicked them and the agent is processing).

<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.

Controls the welcome screen shown when the `messages` array is empty.

• 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)