docs/content/docs/reference/v2/components/CopilotChatView.mdx
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 CopilotChatView from "@copilotkit/react-core/v2";
import "@copilotkit/react-core/v2/styles.css";
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.
true -- show the default welcome screenfalse -- disable the welcome screenclassName string -- style the default welcome screenThe welcome screen component receives input and suggestionView as React elements, plus a welcomeMessage slot, so you can compose them in any layout.
</PropertyReference>
CopilotChatView exposes its default slot implementations as static properties for use in custom compositions:
CopilotChatView.ScrollView -- default scroll container with auto-scroll supportCopilotChatView.ScrollToBottomButton -- default scroll-to-bottom buttonCopilotChatView.Feather -- default gradient overlayCopilotChatView.InputContainer -- default input containerCopilotChatView.Disclaimer -- default disclaimer textCopilotChatView.WelcomeMessage -- default welcome messageCopilotChatView.WelcomeScreen -- default welcome screen layoutimport 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}
/>
);
}
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}
/>
);
}
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"
/>
);
}
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>
);
}
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.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.CopilotChat -- high-level component that wires an agent into CopilotChatViewCopilotPopup -- popup variant that uses CopilotPopupView (extends CopilotChatView)CopilotSidebar -- sidebar variant that uses CopilotSidebarView (extends CopilotChatView)