useAttachments

Overview

useAttachments is the React Native counterpart of the web useAttachments hook. It manages picking, validating, uploading, and consuming file attachments for a chat, using expo-document-picker and expo-file-system in place of the web FileReader / <input type="file"> APIs.

The headless CopilotChat wires this hook up for you when you pass its attachments prop. Call useAttachments directly only when you manage attachments outside of CopilotChat. Requires the expo-document-picker and expo-file-system peer dependencies.

Signature

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

function useAttachments(props: UseNativeAttachmentsProps): UseNativeAttachmentsReturn;

Parameters

Return Value

NativeFileInput

The React Native equivalent of the web File object.

Usage

import { useAttachments } from "@copilotkit/react-native";
import { getSourceUrl } from "@copilotkit/shared";
import { Button, Image, View } from "react-native";

function Composer() {
  const { attachments, openPicker, removeAttachment } = useAttachments({
    config: {
      enabled: true,
      accept: "image/*,application/pdf",
      maxSize: 10 * 1024 * 1024,
    },
  });

  return (
    <View>
      <Button title="Attach file" onPress={openPicker} />
      {attachments.map((a) => (
        <Image
          key={a.id}
          source={{ uri: getSourceUrl(a.source) }}
          style={{ width: 48, height: 48 }}
        />
      ))}
    </View>
  );
}

Each Attachment exposes its content as a source (a base64 data source or a URL source), not a ready-made URL. getSourceUrl from @copilotkit/shared converts either form to a string you can pass to Image.

Most apps enable attachments declaratively through CopilotChat instead:

<CopilotChat agentId="default" attachments={{ enabled: true, accept: "image/*" }}>
  <MyChatUI />
</CopilotChat>

Related

• CopilotChat: wires up attachments via its attachments prop and exposes openPicker / removeAttachment through useCopilotChatContext