feat(user-message): support grouped multi-attachment messages - #6512
feat(user-message): support grouped multi-attachment messages#6512TarunAdobe wants to merge 4 commits into
Conversation
|
📚 Branch Preview Links🔍 Gen1 Visual Regression Test ResultsWhen 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: If the changes are expected, update the |
9e6227e to
a79a5cf
Compare
c5663de to
be10a31
Compare
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>
be10a31 to
d26381a
Compare
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)
Screenshots (if appropriate)
Author's checklist
Reviewer's checklist
patch,minor, ormajorfeaturesManual review test cases
Descriptive Test Statement
Descriptive Test Statement
Device review
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.
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.