Skip to content

feat(user-message): support grouped multi-attachment messages - #6512

Draft
TarunAdobe wants to merge 4 commits into
ttomar/upload-artifactfrom
ttomar/feat-user-message-attachments
Draft

feat(user-message): support grouped multi-attachment messages#6512
TarunAdobe wants to merge 4 commits into
ttomar/upload-artifactfrom
ttomar/feat-user-message-attachments

Conversation

@TarunAdobe

Copy link
Copy Markdown
Contributor

Add swc-user-message-attachment: a minimal, presentation-only tile (media/card, no dismiss, no click behavior) kept as a separate component from swc-upload-artifact so the compose-time and sent-message tiles can diverge independently.

Extend swc-user-message with type="attachments": media attachments lay out in a 4-column grid, card attachments stack full-width beneath it, and overflow beyond 4 media tiles collapses behind a show all/less disclosure (same open/aria-expanded/aria-controls shape as swc-message-sources), firing swc-user-message-toggle. Grouping and slot-routing are driven by a MutationController watching the light DOM, following the same pattern as swc-response-status.

Adds unit tests for grouping/overflow/toggle behavior, an ARIA snapshot test, stories, and docs.

Description

Motivation and context

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

  • Descriptive Test Statement

    1. Go here
    2. Do this action
    3. Expect this result
  • Descriptive Test Statement

    1. Go here
    2. Do this action
    3. Expect this result

Device review

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

Accessibility testing checklist

Required: Complete each applicable item and document your testing steps (replace the placeholders with your component-specific instructions).

  • Keyboard (required — document steps below) — What to test for: Focus order is logical; Tab reaches the component and all interactive descendants; Enter/Space activate where appropriate; arrow keys work for tabs, menus, sliders, etc.; no focus traps; Escape dismisses when applicable; focus indicator is visible.

    1. Go here
    2. Do this action
    3. Expect this result
  • Screen reader (required — document steps below) — What to test for: Role and name are announced correctly; state changes (e.g. expanded, selected) are announced; labels and relationships are clear; no unnecessary or duplicate announcements.

    1. Go here
    2. Do this action
    3. Expect this result

@changeset-bot

changeset-bot Bot commented Jul 15, 2026

Copy link
Copy Markdown

⚠️ No Changeset found

Latest commit: be10a31

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

Copy link
Copy Markdown
Contributor

📚 Branch Preview Links

🔍 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:

Deployed to Azure Blob Storage: pr-6512

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.

@TarunAdobe
TarunAdobe force-pushed the ttomar/feat-user-message-attachments branch from 9e6227e to a79a5cf Compare July 24, 2026 06:51
@TarunAdobe
TarunAdobe force-pushed the ttomar/feat-user-message-attachments branch from c5663de to be10a31 Compare July 24, 2026 07:46
TarunAdobe and others added 4 commits July 31, 2026 13:08
Add swc-user-message-attachment: a minimal, presentation-only tile
(media/card, no dismiss, no click behavior) kept as a separate component
from swc-upload-artifact so the compose-time and sent-message tiles can
diverge independently.

Extend swc-user-message with type="attachments": media attachments lay
out in a 4-column grid, card attachments stack full-width beneath it,
and overflow beyond 4 media tiles collapses behind a show all/less
disclosure (same open/aria-expanded/aria-controls shape as
swc-message-sources), firing swc-user-message-toggle. Grouping and
slot-routing are driven by a MutationController watching the light DOM,
following the same pattern as swc-response-status.

Adds unit tests for grouping/overflow/toggle behavior, an ARIA snapshot
test, stories, and docs.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Collapse `type: 'copy'|'card'|'media'|'attachments'` down to `'copy'|
'attachments'`: a single `<swc-user-message-attachment>` child was already
fully supported by the grouped-attachments code path, so the separate
`type="card"`/`type="media"` single-attachment rendering path was pure
duplication. A lone attachment now automatically gets a larger "hero" tile
(180x180 media, 324px-capped card row) instead of the smaller grouped-grid
size, driven by attachment count rather than a separate prop.

Also fixes three bugs surfaced along the way:
- The conversation-thread "FullPattern" demo still used the removed
  type="media" API directly and rendered one bubble per artifact instead of
  grouping them into a single type="attachments" message.
- A same-specificity CSS cascade tie between `:host([hidden])` and
  `:host([type="media"])` (both declared on the attachment host) let the
  type block's `display: flex` silently re-win and un-hide overflow tiles;
  moved the [hidden] override to the end of the file so it always wins.
- submitPrompt() revoked artifacts' object URLs immediately after copying
  them into the sent message, so uploaded images/videos always failed to
  load once sent. Object URLs are now tracked and revoked on disconnect
  instead. Video attachments also get a real poster-frame thumbnail (a
  muted, unplayed <video>) instead of a blank placeholder.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
@TarunAdobe
TarunAdobe force-pushed the ttomar/feat-user-message-attachments branch from be10a31 to d26381a Compare July 31, 2026 07:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant