Skip to content

CopilotModal.mdx

Latest commit

 

History

History
135 lines (102 loc) · 4.74 KB

CopilotModal.mdx

File metadata and controls

135 lines (102 loc) · 4.74 KB
Raw
title CopilotModal
description Headless modal wrapper around CopilotChat, plus a prebuilt bottom-sheet chat from the /components subpath.

Overview

Like CopilotChat, CopilotModal ships in two versions, chosen by import path:

  • Headless (@copilotkit/react-native) is a thin wrapper around CopilotChat that mirrors the web SDK's CopilotModal API. It provides agent wiring only; you handle modal presentation with React Native's Modal (or any overlay) and build the chat UI from useCopilotChatContext.
  • Prebuilt UI (@copilotkit/react-native/components) is a ready-made chat in a @gorhom/bottom-sheet with snap points and swipe-to-dismiss. See Prebuilt UI.

Headless CopilotModal

import { CopilotModal } from "@copilotkit/react-native";

Accepts all headless CopilotChat props (agentId, agentName, threadId, onError, throttleMs, attachments), plus:

Your chat UI, rendered inside the chat context. Consume [`useCopilotChatContext`](/reference/react-native/components/CopilotChat#usecopilotchatcontext) to read messages and submit input.

Usage

import { CopilotModal } from "@copilotkit/react-native";
import { Modal } from "react-native";

function App({ isOpen }: { isOpen: boolean }) {
  return (
    <Modal visible={isOpen} animationType="slide">
      <CopilotModal agentId="default">
        <MyChatUI />
      </CopilotModal>
    </Modal>
  );
}

Prebuilt UI

Import CopilotModal from the /components subpath for a bottom-sheet chat. Control it imperatively through a CopilotModalRef, or declaratively with the visible prop. Requires the @gorhom/bottom-sheet, react-native-gesture-handler, and react-native-reanimated peer dependencies.

import { CopilotModal, type CopilotModalRef } from "@copilotkit/react-native/components";

Props

Like the prebuilt `CopilotChat`, this component selects its agent with `agentName` (the prop the prebuilt UI currently exposes), not the headless `agentId`. Controlled visibility: `true` opens the sheet, `false` closes it. Called when the sheet is dismissed (backdrop tap, swipe-down, or `close()`). Bottom-sheet snap points, passed through to `@gorhom/bottom-sheet`. Which snap-point index to open at. Whether closing the sheet fires `onDismiss`. Backdrop opacity when the sheet is open. Which agent to connect to. Passed through to the inner `CopilotChat`. Input placeholder text. Suggestion pills shown in the empty state. Title shown in the chat header area.

Ref handle

Imperative handle exposed via `ref` for opening and closing the sheet programmatically.

Usage

import { CopilotModal, type CopilotModalRef } from "@copilotkit/react-native/components";
import { useRef } from "react";
import { Button, View } from "react-native";

export function ChatScreen() {
  const modalRef = useRef<CopilotModalRef>(null);

  return (
    <View style={{ flex: 1 }}>
      <Button title="Open chat" onPress={() => modalRef.current?.open()} />
      <CopilotModal
        ref={modalRef}
        agentName="default"
        headerTitle="Assistant"
        snapPoints={["50%", "90%"]}
      />
    </View>
  );
}

Related