Skip to content

CopilotSidebar.mdx

Latest commit

 

History

History
91 lines (66 loc) · 3.51 KB

CopilotSidebar.mdx

File metadata and controls

91 lines (66 loc) · 3.51 KB
Raw
title CopilotSidebar
description A prebuilt slide-in drawer from the right edge of the screen that wraps a CopilotChat session.

Overview

CopilotSidebar renders a slide-in drawer from the right edge of the screen, with a header bar, a backdrop, and an optional floating action button (FAB) to toggle it. The drawer's chat area wraps a headless CopilotChat. Render your chat UI as children (consuming useCopilotChatContext) or drop in the prebuilt UI CopilotChat from @copilotkit/react-native/components.

Control it imperatively through a CopilotSidebarHandle ref.

Import

import { CopilotSidebar, type CopilotSidebarHandle } from "@copilotkit/react-native";

Props

Accepts the headless CopilotChat props (agentId, agentName, threadId, onError, throttleMs, attachments) except children is repurposed for the drawer body, plus:

Start the drawer in the open position. Width of the drawer panel. Accepts points (a number) or a percentage string resolved against the screen width. Title displayed in the drawer header bar. Show a floating action button to toggle the drawer. Hidden while the drawer is open. Called after the drawer finishes opening. Called after the drawer finishes closing. Custom style applied to the drawer container. Content rendered inside the drawer below the header. Build your chat UI here from [`useCopilotChatContext`](/reference/react-native/components/CopilotChat#usecopilotchatcontext).

Ref handle

Imperative handle exposed via `ref` for opening, closing, and toggling the drawer programmatically.

Usage

import { CopilotSidebar, type CopilotSidebarHandle } from "@copilotkit/react-native";
import { CopilotChat } from "@copilotkit/react-native/components";
import { useRef } from "react";

export function ChatScreen() {
  const sidebarRef = useRef<CopilotSidebarHandle>(null);

  return (
    <CopilotSidebar ref={sidebarRef} agentId="default" headerTitle="Assistant">
      <CopilotChat agentName="default" showHeader={false} />
    </CopilotSidebar>
  );
}

Behavior

  • Animation: slides in/out over 300ms using the React Native Animated API.
  • Backdrop: a semi-transparent, pressable backdrop dismisses the drawer.
  • FAB: when showToggleButton is true, a floating button opens the drawer and hides while it is open.

Related

  • CopilotPopup: floating action button plus centered overlay
  • CopilotChat: the chat primitive wrapped inside the drawer