feat: message-list item attachments

Author: tomivirkki

packages/message-list/src/vaadin-message-list-mixin.js

@@ -27,9 +27,18 @@ export const MessageListMixin = (superClass) =>
          *   userImg: string,
          *   userColorIndex: number,
          *   className: string,
-         *   theme: string
+         *   theme: string,
+         *   attachments: Array<{
+         *     name: string,
+         *     url: string,
+         *     type: string
+         *   }>
          * }>
          * ```
+         *
+         * When a message has attachments, they are rendered in the attachments slot.
+         * Image attachments (type starting with "image/") show a thumbnail preview,
+         * while other attachments show a document icon with the file name.
          */
         items: {
           type: Array,
@@ -141,7 +150,7 @@ export const MessageListMixin = (superClass) =>
                 class="${ifDefined(item.className)}"
                 @focusin="${this._onMessageFocusIn}"
                 style="${ifDefined(loadingMarkdown ? 'visibility: hidden' : undefined)}"
-                >${this.markdown
+                >${this.__renderAttachments(item)}${this.markdown
                   ? html`<vaadin-markdown .content=${item.text}></vaadin-markdown>`
                   : item.text}<vaadin-avatar slot="avatar"></vaadin-avatar
               ></vaadin-message>
@@ -153,6 +162,60 @@ export const MessageListMixin = (superClass) =>
       );
     }
 
+    /**
+     * Renders attachments for a message item.
+     * @param {Object} item - The message item
+     * @return {import('lit').TemplateResult | string}
+     * @private
+     */
+    __renderAttachments(item) {
+      const attachments = item.attachments;
+      if (!attachments || attachments.length === 0) {
+        return '';
+      }
+
+      return html`
+        <div slot="attachments" class="vaadin-message-attachments">
+          ${attachments.map((attachment) => this.__renderAttachment(attachment))}
+        </div>
+      `;
+    }
+
+    /**
+     * Renders a single attachment.
+     * @param {Object} attachment - The attachment object with name, url, and type properties
+     * @return {import('lit').TemplateResult}
+     * @private
+     */
+    __renderAttachment(attachment) {
+      const isImage = attachment.type && attachment.type.startsWith('image/');
+
+      if (isImage) {
+        return html`
+          <a
+            class="vaadin-message-attachment vaadin-message-attachment-image"
+            href="${attachment.url}"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <img src="${attachment.url}" alt="${attachment.name || ''}" />
+          </a>
+        `;
+      }
+
+      return html`
+        <a
+          class="vaadin-message-attachment vaadin-message-attachment-file"
+          href="${attachment.url}"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <span class="vaadin-message-attachment-icon"></span>
+          <span class="vaadin-message-attachment-name">${attachment.name || attachment.url}</span>
+        </a>
+      `;
+    }
+
     /** @private */
     _scrollToLastMessage() {
       if (this.items.length > 0) {

packages/message-list/src/vaadin-message-list.js

@@ -92,6 +92,45 @@ class MessageList extends SlotStylesMixin(MessageListMixin(ElementMixin(Themable
       ${tag} :where(vaadin-markdown > :is(h1, h2, h3, h4, h5, h6, p, ul, ol):last-child) {
         margin-bottom: 0;
       }
+
+      ${tag} .vaadin-message-attachments {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 6px;
+      }
+
+      ${tag} .vaadin-message-attachment {
+        display: inline-flex;
+        align-items: center;
+        color: inherit;
+      }
+
+      ${tag} .vaadin-message-attachment-image img {
+        display: block;
+        max-width: 200px;
+        max-height: 150px;
+      }
+
+      ${tag} .vaadin-message-attachment-file {
+        gap: 6px;
+      }
+
+      ${tag} .vaadin-message-attachment-icon {
+        display: inline-block;
+        width: 1em;
+        height: 1em;
+        background: currentColor;
+        mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/></svg>');
+        mask-size: contain;
+        mask-repeat: no-repeat;
+        flex-shrink: 0;
+      }
+
+      ${tag} .vaadin-message-attachment-name {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
       `,
     ];
   }

packages/message-list/src/vaadin-message.js

@@ -23,6 +23,12 @@ import { MessageMixin } from './vaadin-message-mixin.js';
  *     user-img = "/static/img/avatar.jpg">There is no real ending. It's just the place where you stop the story.</vaadin-message>
  * ```
  *
+ * ### Slots
+ *
+ * Slot name     | Description
+ * --------------|----------------
+ * `attachments` | Content to be displayed above the message text. Used for file and image attachments.
+ *
  * ### Styling
  *
  * The following shadow DOM parts are available for styling:
@@ -70,6 +76,7 @@ class Message extends MessageMixin(ElementMixin(ThemableMixin(PolylitMixin(LumoI
           <span part="name">${this.userName}</span>
           <span part="time">${this.time}</span>
         </div>
+        <slot name="attachments"></slot>
         <div part="message"><slot></slot></div>
       </div>
     `;

packages/message-list/test/dom/__snapshots__/message.test.snap.js

@@ -11,6 +11,8 @@ snapshots["vaadin-message default"] =
     <span part="time">
     </span>
   </div>
+  <slot name="attachments">
+  </slot>
   <div part="message">
     <slot>
     </slot>
@@ -30,6 +32,8 @@ snapshots["vaadin-message userName"] =
     <span part="time">
     </span>
   </div>
+  <slot name="attachments">
+  </slot>
   <div part="message">
     <slot>
     </slot>
@@ -49,6 +53,8 @@ snapshots["vaadin-message time"] =
       long ago
     </span>
   </div>
+  <slot name="attachments">
+  </slot>
   <div part="message">
     <slot>
     </slot>