Clipboard
Introduction
Section titled “Introduction”The copy buttons in the chat, such as copying a message or a code block, write through a clipboard port. Both UI kits take it through a ClipboardProvider. On the web there is nothing to do. React Native has no built-in clipboard, so the host supplies one.
Providing the clipboard
Section titled “Providing the clipboard”Nothing to do. The default writes through navigator.clipboard, and through a selected textarea and document.execCommand('copy') where that API is missing (a plain-http origin). It rejects when neither wrote.
A DOM host with its own clipboard can still supply one with the same provider.
The mobile demo app wraps its tree with expo-clipboard:
import { ClipboardProvider } from '@pilotoo/chat-ui';import * as Clipboard from 'expo-clipboard';
<ClipboardProvider setString={Clipboard.setStringAsync}>{app}</ClipboardProvider>;@pilotoo/ui/chat exports its own ClipboardProvider with the same shape, plus useSetClipboardString and writeClipboardText.
The port
Section titled “The port”The port is one function, SetClipboardString = (text: string) => Promise<void>. Resolve only if the write was taken: “Copied” shows only after the write resolved.
@pilotoo/chat-ui has no clipboard dependency of its own. The reason is on packages/chat-ui/src/ports/clipboard.ts.
Next steps
Section titled “Next steps”- Attachments for the other native port the mobile app supplies.
- Chat UI for the components that use the clipboard.