Skip to content

copilot-sidebar.mdx

Latest commit

 

History

History
208 lines (156 loc) · 6.01 KB

copilot-sidebar.mdx

File metadata and controls

208 lines (156 loc) · 6.01 KB
Raw
title CopilotSidebar
description Sidebar chat interface with slide-in animation

CopilotSidebar is a React component that provides a slide-in sidebar chat interface. It wraps CopilotChat with additional sidebar-specific behavior including a toggle button, slide-in animation, and automatic body margin adjustment.

What is CopilotSidebar?

The CopilotSidebar component:

  • Provides a fixed right-side panel with smooth slide-in animation
  • Includes a toggle button for open/close
  • Automatically adjusts body margin when open to prevent content overlap
  • Responsive design (full width on mobile, custom width on desktop)
  • Built on CopilotChat - inherits all its features and customization options

Component Architecture

CopilotSidebar extends CopilotChat with additional slots:

graph LR
    CS[CopilotSidebar] --> header
    CS --> toggleButton
Loading

Slot Descriptions

Slot Description
header Header bar with title and close button
toggleButton Floating button to open/close the sidebar

CopilotSidebar also inherits all slots from CopilotChat: messageView, scrollView, input, suggestionView, and welcomeScreen.

See Slot Customization for details on how to customize these slots.

Basic Usage

import { CopilotSidebar, CopilotKitProvider } from "@copilotkit/react-core";

function App() {
  return (
    <CopilotKitProvider runtimeUrl="/api/copilotkit">
      <CopilotSidebar />
    </CopilotKitProvider>
  );
}

Props

Sidebar-Specific Props

These props are unique to CopilotSidebar:

Prop Type Default Description
defaultOpen boolean true Whether the sidebar is open initially
width number | string 480 Sidebar width in pixels or CSS unit
header SlotValue - Custom header component with title and close button
toggleButton SlotValue - Custom toggle button to open/close the sidebar

Shared Props

CopilotSidebar inherits all props from CopilotChat, including:

  • agentId - The agent to connect to
  • threadId - The conversation thread ID
  • labels - Customize text labels
  • autoScroll - Auto-scroll behavior
  • className - CSS class for the root container

See CopilotChat Props for the complete list.

Header Customization

The sidebar includes a header with a title and close button. Customize it through the header prop:

<CopilotSidebar
  header={{
    titleContent: "My Assistant",
    closeButton: "hidden",
  }}
/>

Header Sub-Slots

Sub-Slot Description
titleContent The title text or component
closeButton The close button (can be hidden)

Custom Header Component

Replace the entire header with your own component:

function CustomHeader() {
  return (
    <div className="flex items-center justify-between p-4 border-b">
      <div className="flex items-center gap-2">
        <BotIcon className="w-5 h-5" />
        <span className="font-semibold">My AI Assistant</span>
      </div>
      <button onClick={() => /* close sidebar */}>
        <XIcon className="w-5 h-5" />
      </button>
    </div>
  );
}

<CopilotSidebar header={CustomHeader} />

Toggle Button Customization

The sidebar includes a floating toggle button to open and close it. Customize it through the toggleButton prop:

<CopilotSidebar
  toggleButton={{
    className: "bg-purple-500 hover:bg-purple-600",
    openIcon: "text-white",
    closeIcon: "text-white",
  }}
/>

Toggle Button Sub-Slots

Sub-Slot Description
openIcon Icon shown when sidebar is closed (click to open)
closeIcon Icon shown when sidebar is open (click to close)

Custom Toggle Button Component

Replace the toggle button entirely:

function CustomToggleButton() {
  return (
    <button className="fixed bottom-4 right-4 p-3 bg-blue-500 rounded-full">
      <ChatIcon className="w-6 h-6 text-white" />
    </button>
  );
}

<CopilotSidebar toggleButton={CustomToggleButton} />;

Slot Customization

CopilotSidebar uses the same slot system as CopilotChat. Each slot accepts four types of values:

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

Custom Width

<CopilotSidebar width={600} />

// Or with CSS units
<CopilotSidebar width="50vw" />

Custom Header Styling

<CopilotSidebar
  header={{
    className: "bg-gradient-to-r from-blue-500 to-purple-500 text-white",
    titleContent: "AI Assistant",
  }}
/>

Nested Slot Customization

<CopilotSidebar
  messageView={{
    assistantMessage: {
      onThumbsUp: (msg) => console.log("Liked:", msg.id),
      onThumbsDown: (msg) => console.log("Disliked:", msg.id),
    },
  }}
  input={{
    className: "border-2 border-gray-200",
    sendButton: "bg-blue-500 hover:bg-blue-600",
  }}
/>

Related