fix(user-message): register and classify attachments

Author: TarunAdobe

2nd-gen/packages/swc/patterns/conversational-ai/user-message/UserMessage.ts

@@ -101,6 +101,7 @@ export class UserMessage extends SpectrumElement {
         attributes: true,
         attributeFilter: ['type'],
         childList: true,
+        subtree: true,
       },
       callback: () => {
         this._routeAttachments();
@@ -137,13 +138,19 @@ export class UserMessage extends SpectrumElement {
       (element): element is UserMessageAttachment =>
         this._isAttachmentElement(element)
     );
-    const mediaAttachments = attachments.filter((el) => el.type !== 'card');
-    const cardAttachments = attachments.filter((el) => el.type === 'card');
+    const mediaAttachments = attachments.filter(
+      (el) => el.getAttribute('type') !== 'card'
+    );
+    const cardAttachments = attachments.filter(
+      (el) => el.getAttribute('type') === 'card'
+    );
     const hasOverflow = mediaAttachments.length > VISIBLE_MEDIA_COUNT;
 
     for (const el of attachments) {
       const targetSlot =
-        el.type === 'card' ? 'attachment-card' : 'attachment-media';
+        el.getAttribute('type') === 'card'
+          ? 'attachment-card'
+          : 'attachment-media';
       if (el.getAttribute('slot') !== targetSlot) {
         el.setAttribute('slot', targetSlot);
       }
@@ -179,7 +186,8 @@ export class UserMessage extends SpectrumElement {
     hasOverflow: boolean
   ): void {
     const visible = mediaAttachments.filter(
-      (_el, index) => !(hasOverflow && !this.open && index >= VISIBLE_MEDIA_COUNT)
+      (_el, index) =>
+        !(hasOverflow && !this.open && index >= VISIBLE_MEDIA_COUNT)
     );
     const total = visible.length;
     const columnCount = Math.max(1, Math.min(total, VISIBLE_MEDIA_COUNT));

2nd-gen/packages/swc/patterns/conversational-ai/user-message/swc-user-message.ts

@@ -11,6 +11,8 @@
  */
 import { defineElement } from '@adobe/spectrum-wc-core/element/index.js';
 
+import './user-message-attachment/index.js';
+
 import { UserMessage } from './UserMessage.js';
 
 declare global {

2nd-gen/packages/swc/patterns/conversational-ai/user-message/user-message-attachment/UserMessageAttachment.ts

@@ -162,7 +162,7 @@ export class UserMessageAttachment extends SpectrumElement {
   protected override render(): TemplateResult {
     return html`
       <div class="swc-UserMessageAttachment">
-        ${this.type === 'card'
+        ${this.getAttribute('type') === 'card'
           ? this._renderCardSurface()
           : this._renderMediaSurface()}
       </div>