chore: import upstream snapshot with attribution
This commit is contained in:
wehub-resource-sync
@@ -0,0 +1,208 @@
|
||||
---
|
||||
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](/reference/copilot-chat) 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](/reference/copilot-chat) - inherits all its features and customization options
|
||||
|
||||
## Component Architecture
|
||||
|
||||
CopilotSidebar extends [CopilotChat](/reference/copilot-chat#component-architecture) with additional slots:
|
||||
|
||||
```mermaid
|
||||
graph LR
|
||||
CS[CopilotSidebar] --> header
|
||||
CS --> toggleButton
|
||||
```
|
||||
|
||||
### 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](#slot-customization) for details on how to customize these slots.
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```tsx
|
||||
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](/reference/copilot-chat), 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](/reference/copilot-chat#props) for the complete list.
|
||||
|
||||
## Header Customization
|
||||
|
||||
The sidebar includes a header with a title and close button. Customize it through the `header` prop:
|
||||
|
||||
```tsx
|
||||
<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:
|
||||
|
||||
```tsx
|
||||
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:
|
||||
|
||||
```tsx
|
||||
<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:
|
||||
|
||||
```tsx
|
||||
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](/reference/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
|
||||
|
||||
```tsx
|
||||
<CopilotSidebar width={600} />
|
||||
|
||||
// Or with CSS units
|
||||
<CopilotSidebar width="50vw" />
|
||||
```
|
||||
|
||||
### Custom Header Styling
|
||||
|
||||
```tsx
|
||||
<CopilotSidebar
|
||||
header={{
|
||||
className: "bg-gradient-to-r from-blue-500 to-purple-500 text-white",
|
||||
titleContent: "AI Assistant",
|
||||
}}
|
||||
/>
|
||||
```
|
||||
|
||||
### Nested Slot Customization
|
||||
|
||||
```tsx
|
||||
<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
|
||||
|
||||
- [CopilotChat](/reference/copilot-chat) - Base chat component with full customization options
|
||||
- [CopilotPopup](/reference/copilot-popup) - Floating popup chat dialog
|
||||
- [Slot System](/reference/slot-system) - Deep dive into slot customization
|
||||
- [CopilotKitProvider](/reference/copilotkit-provider) - Provider configuration
|
||||
Reference in New Issue
Block a user