feat: Add clipboard paste and drag-and-drop file support to both themes

[OEvgeny]

Fixes #

Changelog Entry

• Added clipboard paste and drag-and-drop file support to both basic and fluent themes, in PR #5829, by @OEvgeny

Description

This PR adds clipboard paste and drag-and-drop file upload support to Web Chat's send box in basic theme. The implementation creates a reusable useFileDropZone hook to share drag-and-drop state management logic between themes ensuring consistent behavior.

Design

The implementation follows a shared-logic pattern with theme-specific UI:

1. Shared State Management: Created useFileDropZone hook in @msinternal/botframework-webchat-react-hooks to manage document-level drag events and drop zone state

   • Tracks entrance counter for nested drag events across DOM boundaries
   • Returns drop zone state (false, 'visible', or 'droppable') based on drag target
   • Provides drag/drop event handlers for the drop zone component

2. CSS Grid Stacking: Basic theme uses CSS grid with named areas to stack the drop zone overlay on top of the send box without position: relative/absolute

   • Avoids creating stacking contexts that interfere with middleware decorations
   • Grid areas: 'suggested-actions' and 'content' (where both __main and __drop-zone are stacked)

3. File Handling: Both onPaste and onDrop handlers use the same handleAddFiles callback

   • Respects disableFileUpload and uiState === 'disabled' flags
   • Generates thumbnails for image files using existing useMakeThumbnail hook
   • Honors sendAttachmentOn option to auto-submit when set to 'attach'

Specific Changes

• New Files:

  • packages/react-hooks/src/useFileDropZone.ts: Shared hook for drag-and-drop state management (132 lines)
  • packages/component/src/SendBox/DropZone.tsx: Basic theme drop zone overlay component (66 lines)
  • __tests__/html2/basic/dragAndDrop.upload.html: E2E test for drag-and-drop functionality
  • __tests__/html2/basic/pasteFile.html: E2E test for clipboard paste functionality

• Modified Files:

  • packages/component/src/SendBox/BasicSendBox.tsx:

    • Added CSS grid layout with named areas for drop zone stacking
    • Implemented handleAddFiles callback for file processing with thumbnail support
    • Added handlePaste clipboard event handler
    • Conditionally renders <DropZone> when file upload is enabled

  • packages/fluent-theme/src/components/dropZone/DropZone.tsx:

    • Factored out drag-and-drop logic into useFileDropZone hook

  • packages/fluent-theme/src/components/sendBox/SendBox.tsx:

    • Added handlePaste clipboard event handler
    • Gated paste functionality on disableFileUpload and uiState

  • packages/react-hooks/src/index.ts: Exported useFileDropZone and DropZoneState type

  • packages/component/src/boot/hook.ts: Re-exported useFileDropZone from react-hooks

  • packages/bundle/src/boot/actual/hook/minimal.ts: Exported useFileDropZone from bundle

  • packages/component/src/testIds.ts: Added sendBoxDropZone test ID

  • packages/component/src/Styles/StyleSet/SendBox.ts: Styles for the new grid layout

• Test Updates: Updated snapshot files to reflect CSS grid layout changes in send box

• I have added tests and executed them locally
• I have updated CHANGELOG.md
• I have updated documentation

Review Checklist

This section is for contributors to review your work.

• Accessibility reviewed (tab order, content readability, alt text, color contrast)
• Browser and platform compatibilities reviewed
• CSS styles reviewed (minimal rules, no z-index)
• Documents reviewed (docs, samples, live demo)
• Internationalization reviewed (strings, unit formatting)
• package.json and package-lock.json reviewed
• Security reviewed (no data URIs, check for nonce leak)
• Tests reviewed (coverage, legitimacy)

[Copilot]

Pull request overview

This PR adds clipboard paste and drag-and-drop file upload support to the basic theme's send box, mirroring the behavior already present in the fluent theme. To avoid duplicating logic, the existing drag-and-drop state-management code is extracted from fluent-theme/.../DropZone.tsx into a shared useFileDropZone hook in the react-hooks package, which both themes now consume. A new basic-theme DropZone overlay component is layered onto BasicSendBox via CSS grid named areas, and handlePaste/handleAddFiles callbacks integrate with useMakeThumbnail, useSendBoxAttachments, useSubmit, and the sendAttachmentOn/disableFileUpload/uiState options.

Changes:

• Extract document-level drag/drop state and handlers into shared useFileDropZone hook and re-export it through component/bundle hook surfaces.
• Add basic-theme DropZone.tsx overlay and wire paste + drop file handling (with thumbnail generation and auto-submit) into BasicSendBox.
• Add fluent-theme onPaste handler and add HTML2 e2e tests covering both paste and drag-and-drop flows.

Reviewed changes

Copilot reviewed 13 out of 28 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
packages/react-hooks/src/useFileDropZone.ts	New shared hook centralizing drag-enter/leave/over/drop document listeners and drop-zone state.
packages/react-hooks/src/index.ts	Exports the new hook and DropZoneState type.
packages/fluent-theme/src/components/dropZone/DropZone.tsx	Removes inlined drag logic and consumes useFileDropZone.
packages/fluent-theme/src/components/sendBox/SendBox.tsx	Adds onPaste handler gated on disableFileUpload/uiState.
packages/component/src/SendBox/DropZone.tsx	New basic-theme drop zone overlay using shared hook and emotion styles.
packages/component/src/SendBox/BasicSendBox.tsx	CSS grid layout, handleAddFiles, handlePaste, and conditional <DropZone> rendering.
packages/component/src/testIds.ts	Adds sendBoxDropZone test ID.
packages/component/src/boot/hook.ts	Re-exports useFileDropZone and DropZoneState.
packages/component/package.json	Adds sed post-processing of DropZoneState in rolled-up .d.ts.
packages/bundle/src/boot/actual/hook/minimal.ts	Re-exports the new hook/type from the bundle.
CHANGELOG.md	Adds changelog entry.
tests/html2/basic/pasteFile.html	New e2e test for clipboard paste.
tests/html2/basic/dragAndDrop.upload.html	New e2e test for drag-and-drop into basic theme.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[OEvgeny]

Given the way e2e tests around the drag-and-drop are written I think, current coverage is already sufficient: no multiple files and no folder will be added for the PR.