---
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`](/reference/v2/components/CopilotChat), [`CopilotPopup`](/reference/v2/components/CopilotPopup), and [`CopilotSidebar`](/reference/v2/components/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

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

<Callout type="info">
  `CopilotChatView` is a named export: `import { CopilotChatView } from "@copilotkit/react-core/v2"` also works via the re-export from `CopilotChat.View`.
</Callout>

## 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<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="input" type="SlotValue<typeof CopilotChatInput>">
  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>

<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="messages" type="Message[]">
  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.
</PropertyReference>

<PropertyReference name="autoScroll" type="boolean" default="true">
  Whether the view should automatically scroll to the bottom when new messages arrive. Set to `false` if you want manual scroll control.
</PropertyReference>

<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="isRunning" type="boolean">
  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.
</PropertyReference>

<PropertyReference name="suggestions" type="Suggestion[]">
  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.
</PropertyReference>

<PropertyReference name="suggestionLoadingIndexes" type="ReadonlyArray<number>">
  Indexes of suggestions that are currently in a loading state (e.g. the user just clicked them and the agent is processing).
</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>

<PropertyReference name="welcomeScreen" type='SlotValue<React.FC<WelcomeScreenProps>> | boolean'>
  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.
</PropertyReference>

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

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

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

### Replacing a Slot with a Custom Component

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

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

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

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

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

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`](/reference/v2/components/CopilotChat) -- high-level component that wires an agent into `CopilotChatView`
- [`CopilotPopup`](/reference/v2/components/CopilotPopup) -- popup variant that uses `CopilotPopupView` (extends `CopilotChatView`)
- [`CopilotSidebar`](/reference/v2/components/CopilotSidebar) -- sidebar variant that uses `CopilotSidebarView` (extends `CopilotChatView`)
