CopilotChatScrollView

CopilotChatScrollView is the default scroll container used by CopilotChat. It handles auto-scrolling during message streaming, provides a scroll-to-bottom button, and displays a gradient fade (feather) overlay.

What is CopilotChatScrollView?

The CopilotChatScrollView component:

Provides a scrollable container for the message list
Auto-scrolls to bottom during AI response streaming
Shows a scroll-to-bottom button when scrolled up
Includes a gradient "feather" overlay for visual polish
Built on the slot system for deep customization

Component Architecture

CopilotChatScrollView provides slots for customizing its visual elements:

mermaid

graph LR
    SV[CopilotChatScrollView] --> scrollToBottomButton
    SV --> feather

Slot Descriptions

Slot	Description
`scrollToBottomButton`	Button that appears when scrolled up from bottom
`feather`	Gradient fade overlay at the bottom of the scroll area

Basic Usage

Customize the scroll view through the scrollView prop on CopilotChat:

tsx

<CopilotChat
  scrollView={{
    scrollToBottomButton: "bg-blue-500 hover:bg-blue-600",
  }}
/>

Auto-Scroll Behavior

By default, CopilotChatScrollView automatically scrolls to the bottom when:

New messages are added to the conversation
The AI is streaming a response
The user is already near the bottom of the scroll area

To disable auto-scroll:

tsx

<CopilotChat autoScroll={false} />

When auto-scroll is disabled, users must manually scroll to see new messages. The scroll-to-bottom button will appear when new content is available below the viewport.

Slot Customization

CopilotChatScrollView uses the slot system. Each slot accepts four types of values:

Tailwind class string - Add or override CSS classes
Props object - Pass additional props to the default component
Custom component - Replace the component entirely
Nested sub-slots - Drill down to customize child components

Scroll-to-Bottom Button Customization

Style the scroll-to-bottom button:

tsx

<CopilotChat
  scrollView={{
    scrollToBottomButton: "bg-blue-500 shadow-xl rounded-full",
  }}
/>

Or with a custom component:

tsx

function CustomScrollButton({ onClick }) {
  return (
    <button
      onClick={onClick}
      className="px-4 py-2 bg-gradient-to-r from-blue-500 to-purple-500 text-white rounded-lg shadow-lg"
    >
      Jump to latest
    </button>
  );
}

<CopilotChat
  scrollView={{
    scrollToBottomButton: CustomScrollButton,
  }}
/>;

Feather (Gradient Overlay) Customization

The feather provides a gradient fade at the bottom of the scroll area:

tsx

<CopilotChat
  scrollView={{
    feather: "from-blue-50 via-blue-50 to-transparent",
  }}
/>

To remove the feather entirely:

tsx

<CopilotChat
  scrollView={{
    feather: () => null,
  }}
/>

Replacing the Scroll View

To completely replace the scroll view with your own component:

tsx

import { CopilotChatView } from "@copilotkit/react-core";

function CustomScrollView({ children, autoScroll, ...props }) {
  return (
    <CopilotChatView.ScrollView
      autoScroll={autoScroll}
      scrollToBottomButton="bg-indigo-600"
      feather="from-gray-50 via-gray-50 to-transparent"
      {...props}
    >
      {children}
    </CopilotChatView.ScrollView>
  );
}

<CopilotChat scrollView={CustomScrollView} />;

Examples

Custom Scroll Button

tsx

<CopilotChat
  scrollView={{
    scrollToBottomButton: {
      className:
        "bg-gradient-to-r from-pink-500 to-orange-500 text-white shadow-xl",
    },
  }}
/>

Dark Mode Feather

tsx

<CopilotChat
  scrollView={{
    feather: "from-gray-900 via-gray-900 to-transparent",
  }}
/>

Removing Visual Elements

Remove both the scroll button and feather for a minimal look:

tsx

<CopilotChat
  scrollView={{
    scrollToBottomButton: () => null,
    feather: () => null,
  }}
/>

Custom Themed Scroll View

tsx

<CopilotChat
  className="bg-slate-50"
  scrollView={{
    className: "bg-slate-50",
    scrollToBottomButton: "bg-slate-700 hover:bg-slate-800 text-white",
    feather: "from-slate-50 via-slate-50 to-transparent",
  }}
/>

CopilotChat - Parent component that uses CopilotChatScrollView
CopilotChatMessageView - Message list rendered inside the scroll view
Slot System - Deep dive into slot customization