ChatDropZone

Wrap the whole chat so files dropped anywhere on it are taken, not only on the composer. While files are dragged over it, an overlay says labels.drop (and labels.hint when set) and screen readers hear it once. Moving between child elements does not flicker the overlay, and dragging text or links is ignored. Pass onFiles, usually onDrop of useFileIntake, so the same accept, maxFiles and maxFileSize apply to picked, pasted and dropped files; or give the zone its own policy and onReject. The overlay already marks the drop, so do not also pass attachments.isDragOver to the composer inside it; the function form of children gets isDragOver for layouts that draw their own highlight instead of the overlay. Dropping is never the only way in: keep the attach button. The kit does not upload; that stays with the host.

Getting Started
$pnpm add @sinups/ai-kit @mantine/core @mantine/hooks @tabler/icons-react
Examples
Drop, pick or paste through one policy
API reference
Prop
Type
Required
onFiles
(files: File[]) => void
Yes
Called with the dropped files the policy accepts, for example `onDrop` of `useFileIntake`
policy
FileIntakePolicy
No
Which files to take; every file passes when omitted
onReject
(rejections: FileRejection[]) => void
No
Called with the dropped files the policy rejects
disabled
boolean
No
Ignores drags, for example while the chat cannot take files
children
React.ReactNode | ((state: { isDragOver: boolean }) => React.ReactNode)
Yes
The chat, or a function that gets `isDragOver` for a layout that draws its own highlight instead of the overlay
labels
Partial<ChatDropZoneLabels>
No
Overrides of the default English labels
className
string
No
Class name added to the root element
style
React.CSSProperties
No
Inline styles added to the root element