feat(conversational-ai): improve artifact previews and scrolling

[TarunAdobe]

Description

This PR improves upload artifacts and their integration with Prompt Field:

• Aligns card and media artifact layouts with the approved Figma designs.
• Adds an optional badge slot for media previews such as document-type labels.
• Improves media preview sizing, cropping, and Storybook thumbnails.
• Adds a horizontal multi-artifact carousel to Prompt Field.
• Adds overflow chevrons, edge fades, set-based paging, and final-set alignment.
• Supports trackpad, wheel, touch, and draggable overlay-scrollbar interaction.
• Reserves the scrollbar lane to prevent the composer height from shifting.
• Warns developers when card and media layouts are mixed in one artifact strip.
• Warns when required Legal-approved disclaimer content is missing.
• Updates Storybook examples to use the design-approved AI disclaimer and official [AI User Guidelines (https://www.adobe.com/legal/licenses-terms/adobe-gen-ai-user-guidelines.html).
• Expands tests and documentation for artifact layouts, scrolling, badges, events, and warnings.

Motivation and context

Prompt Field previously had limited support for multiple attachments, while Upload Artifact did not fully match the approved card and media treatments. This made larger upload sets difficult to navigate and encouraged mixed card/media layouts that did not produce a consistent attachment strip. Media artifacts also needed a way to display document-type context without using the metadata-first card layout. The updated implementation provides a consistent carousel for multiple artifacts, supports media badges, and documents how applications should normalize mixed file types into one visual layout.

Acceptance criteria

• Given multiple artifacts exceed the Prompt Field width, when the artifact strip renders, then navigation
  controls and edge fades indicate available overflow.
• Given a user activates a carousel chevron, when the strip advances, then it moves by one visible set while preserving continuity with the previous set.
• Given the final artifact set is reached, when it renders, then the set aligns to the right and keeps the strip visually full.
• Given a user scrolls with a trackpad, wheel, touch gesture, or scrollbar thumb, when interaction begins, then the overlay scrollbar appears without changing composer height.
• Given carousel chevrons initiate scrolling, when paging completes, then the overlay scrollbar remains hidden.
• Given media artifacts require file-type context, when content is provided to the badge slot, then the badge appears over the media preview.
• Given card and media artifacts are placed in the same Prompt Field strip, when the slot updates, then a development warning explains the supported single-layout requirement.
• Given the legal slot is empty, when Prompt Field renders in development, then a warning requests Legal-approved disclaimer content.

Related issue(s)

No linked issue or Jira ticket.

Verification

• Automated tests cover:
  • Prompt Field input, submission, upload, and stop behavior
  • Missing legal-content warnings
  • Mixed artifact-layout warnings
  • Carousel paging, edge fades, and scrollbar visibility
  • Upload Artifact dismissal
  • Media preview and badge rendering
• Latest affected test run: 4 files and 18 tests passed.
• yarn lint:docs-pages passed.
• Targeted ESLint and Prettier checks passed.

Screenshots (if appropriate)

---

Author's checklist

• I have read the CONTRIBUTING and
  PULL_REQUESTS documents.
• I have reviewed the Accessibility Practices for this feature: ARIA Authoring Practices
  Guide.
• 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

• Verify Upload Artifact layouts
  1. Open the Upload Artifact Storybook page.
  2. Review the card, media, media-with-badge, multi-card, and multi-media stories.
  3. Confirm previews fill their expected regions, card text truncates correctly, and badges appear only when supplied.
• Verify multi-artifact carousel paging
  1. Open the Prompt Field multi-artifact scroll story.
  2. Activate the next and previous chevrons several times.
  3. Confirm each action advances by one visible set, preserves one continuity tile, and correctly disables or hides
     navigation at each edge.
• Verify physical scrolling
  1. Scroll the artifact strip using a trackpad, mouse wheel, touch gesture, and scrollbar thumb.
  2. Drag the scrollbar lane and thumb across the available range.
  3. Confirm scrolling remains synchronized, the thumb appears only during physical interaction, and composer height remains stable.
• Verify artifact-layout warnings
  1. Slot both card and media artifacts into one Prompt Field.
  2. Inspect the browser console.
  3. Confirm a single development warning explains that one layout type must be used per strip.
• Verify the legal disclaimer
  1. Open Prompt Field and full conversational pattern stories.
  2. Confirm the approved disclaimer reads: “Responses are generated using AI, and may be inaccurate. Check before using.”
  3. Confirm “AI User Guidelines” links to the official Adobe guidelines page.

Device review

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

Accessibility testing checklist

• Keyboard
  1. Open the Prompt Field multi-artifact scroll story.
  2. Use Tab and Shift+Tab to navigate the upload button, carousel controls, textarea, and
     send or stop action.
  3. Activate carousel controls with Enter and Space.
  4. Confirm focus order is logical, focus indicators remain visible, scrolling does not move focus unexpectedly, and no focus trap occurs.
• Screen reader
  1. Open the Prompt Field multi-artifact scroll story with a screen reader enabled.
  2. Navigate through the artifacts and carousel controls.
  3. Confirm the controls are announced as “Show previous attachments” and “Show more attachments.”
  4. Confirm artifact titles, subtitles, dismiss actions, media badge content, and the AI User Guidelines link have
     understandable names.
  5. Confirm disabled or unavailable carousel directions are not presented as actionable controls.

[changeset-bot]

⚠️ No Changeset found

Latest commit: db7bdd3

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-6452

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.