---
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/components/CopilotChat), [`CopilotPopup`](/reference/components/CopilotPopup), and [`CopilotSidebar`](/reference/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"` 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
function CustomChat({ messages, isRunning }) {
  return (
    <CopilotChatView
      messages={messages}
      isRunning={isRunning}
      autoScroll={true}
    />
  );
}
```

### Replacing a Slot with a Custom Component

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