Skip to content

CopilotSidebar.mdx

Latest commit

 

History

History
130 lines (97 loc) · 4.9 KB

CopilotSidebar.mdx

File metadata and controls

130 lines (97 loc) · 4.9 KB
Raw
title CopilotSidebar
description Sidebar variant of CopilotChat that renders in a fixed side panel

Overview

CopilotSidebar renders a fixed sidebar panel for chat interaction. It wraps CopilotChat and provides sidebar-specific layout and open/close behavior. The sidebar includes a header with a title and close button, and can be toggled via a floating button.

See CopilotPopup for a popup variant of this component.

Import

import { CopilotSidebar } from "@copilotkit/react-core/v2";
import "@copilotkit/react-core/v2/styles.css";

Props

Own Props

Slot override for the sidebar header. Accepts a replacement component, a `className` string merged into the default, or a partial props object. The default header displays a title and a close button. Whether the sidebar should be open when the component first mounts. Width of the sidebar panel. Accepts a number (pixels) or a CSS string (e.g. `"400px"`, `"30vw"`).

Inherited CopilotChat Props

CopilotSidebar accepts all props from CopilotChatProps except chatView, which is set internally to CopilotSidebarView. This includes:

ID of the agent to use. Must match an agent configured in `CopilotKit`. ID of the conversation thread. Partial label overrides for all text strings rendered inside the chat. Whether the chat scrolls to the bottom automatically when new messages arrive.

<PropertyReference name="inputProps" type="Partial<Omit<CopilotChatInputProps, 'children'>>"

Additional props forwarded to the inner CopilotChatInput component.

<PropertyReference name="welcomeScreen" type="SlotValue<React.FC> | boolean"

Controls the welcome screen shown when no messages exist.

All CopilotChatView slot props (messageView, input, scrollView, inputContainer, feather, disclaimer, suggestionView) are also accepted and forwarded through.

Slot System

All slot props follow the same override pattern used across CopilotKit v2 components. Each slot 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.

Usage

Basic Usage

function App() {
  return (
    <CopilotSidebar
      agentId="my-agent"
      labels={{ modalHeaderTitle: "Assistant" }}
    />
  );
}

Default Open with Custom Width

function App() {
  return <CopilotSidebar agentId="my-agent" defaultOpen={true} width={500} />;
}

Custom Header

function App() {
  return (
    <CopilotSidebar agentId="my-agent" header="bg-indigo-700 text-white" />
  );
}

Behavior

  • Toggle button: Renders a floating toggle button that opens and closes the sidebar. The button uses CopilotChatToggleButton internally.
  • Modal state: Open/close state is managed via the chat configuration context. The defaultOpen prop sets the initial state; after that, state changes come from user interaction (toggle button, close button in the header).
  • Layout: The sidebar uses CopilotSidebarView internally, which provides a sidebar-specific welcome screen layout with suggestions at the top, the welcome message in the middle, and the input fixed at the bottom.
  • Fixed positioning: The sidebar renders as a fixed panel on one side of the viewport, pushing or overlaying content depending on CSS.
  • Agent connection: All agent wiring (messages, running state, suggestions) is handled by the parent CopilotChat logic.

Related