feat(prompt-field): add drag-and-drop file upload

[TarunAdobe]

Description

Prompt field can now accept a dragged file anywhere over the composer, not just through the + button's picker flow. Dragging over the field reuses the textarea's own focus-ring look rather than introducing a separate drop-target treatment, and dropping fires swc-prompt-field-drop with the raw files so consumesize/filled/dropEffect API. DropzoneBase now delegates to it internally; its public behavior is unchanged.

Wired the new event into the pattern's full end-to-end example too.

Motivation and context

The + button's external picker flow was the only way to attach a file to swc-prompt-field, which is a heavier interaction than the drag-and-drop most conversational AI composers support today. This adds that path without duplicating the drag timing logic Dropzone already had battle-tested, by extracting it into a shared controller.

Related issue(s)

• fixes [Issue Number]

Screenshots (if appropriate)

---

Author's checklist

• I have read the CONTRIBUTING and PULL_REQUESTS documents.
• I have reviewed at the Accessibility Practices for this feature, see: Aria Practices
• I have added automated tests to cover my changes.
• I have included a well-written changeset if my change needs to be published.
• I have included updated documentation if my change required it.

---

Reviewer's checklist

• Includes a Github Issue with appropriate flag or Jira ticket number without a link
• Includes thoughtfully written changeset if changes suggested include patch, minor, or major features
• Automated tests cover all use cases and follow best practices for writing
• Validated on all supported browsers
• All VRTs are approved before the author can update Golden Hash

Manual review test cases

• Drag a file over the prompt field shows the focus-ring drop affordance

  1. Go to Storybook → Conversational AI → Prompt field → Drag and drop
  2. Drag a file from your desktop over the field without dropping it
  3. Expect the field's border to switch to the same focus-indicator color the textarea shows on :focus-visible, with no separate drop-target styling

• Dropping a file fires swc-prompt-field-drop and slots an artifact

  1. Go to Storybook → Conversational AI → Prompt field → Drag and drop
  2. Drop a file onto the field
  3. Expect the field to log swc-prompt-field-drop delivered 1 file... and slot a media upload artifact, the same as using the + button's external picker

• Disabled field rejects the drag

  1. Go to Storybook → Conversational AI → Prompt field → Playground, set mode="disabled"
  2. Drag a file over the field
  3. Expect the OS cursor to show "not allowed" and no focus-ring affordance to appear

• Dropzone's own behavior is unchanged after the controller extraction

  1. Go to Storybook → Dropzone
  2. Drag a file over the zone, drag it out, and drop it
  3. Expect swc-dropzone-should-accept, swc-dropzone-dragover, swc-dropzone-dragleave, and swc-dropzone-drop to fire exactly as before, with the same 100ms dragleave debounce

• Full pattern example wires the new event

  1. Go to Storybook → Conversational AI → Pattern overview → Full example
  2. Drop a file directly onto the composer instead of using the + button
  3. Expect the file to appear as an attached artifact in the conversation, identically to the upload-button path

Device review

• Did it pass in Desktop?
• Did it pass in (emulated) Mobile?
• Did it pass in (emulated) iPad?

Accessibility testing checklist

• Keyboard (required — document steps below)

  1. Go to Storybook → Conversational AI → Prompt field → Accessibility
  2. Tab through the field with no drag in progress
  3. Expect focus order and the + button's operability to be unaffected; drag-and-drop is a progressive enhancement only, the + button remains the fully keyboard-operable path for attaching files since native HTML drag-and-drop has no keyboard equivalent

• Screen reader (required — document steps below)

  1. Go to Storybook → Conversational AI → Prompt field → Drag and drop
  2. With a screen reader running, drop a file onto the field
  3. Expect no unexpected or duplicate announcements from the drag affordance itself; the resulting artifact should announce the same way it does when added via the + button's picker flow

[changeset-bot]

⚠️ No Changeset found

Latest commit: cfc1731

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[github-actions]

📚 Branch Preview Links

• Storybook (Gen2, dev mode)
• Storybook (Gen2, prod mode)
• Documentation Site (Gen1)
• Storybook (Gen1)

🔍 Gen1 Visual Regression Test Results

When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:

• Spectrum | Light | Medium | LTR
• Spectrum | Dark | Large | RTL
• Express | Light | Medium | LTR
• Express | Dark | Large | RTL
• Spectrum-two | Light | Medium | LTR
• Spectrum-two | Dark | Large | RTL
• High Contrast Mode | Medium | LTR

Deployed to Azure Blob Storage: pr-6614

If the changes are expected, update the current_golden_images_cache hash in the circleci config to accept the new images. Instructions are included in that file.
If the changes are unexpected, you can investigate the cause of the differences and update the code accordingly.