feat(chat): display attachments in expansion panel

Author: teodosiah

src/components/chat/message-attachments.ts

@@ -2,10 +2,18 @@ import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import IgcIconButtonComponent from '../button/icon-button.js';
 import { registerComponent } from '../common/definitions/register.js';
+import IgcExpansionPanelComponent from '../expansion-panel/expansion-panel.js';
 import IgcIconComponent from '../icon/icon.js';
 import { registerIconFromText } from '../icon/icon.registry.js';
 import { styles } from './themes/message-attachments.base.css';
-import { type IgcMessageAttachment, closeIcon, fileIcon } from './types.js';
+import {
+  type IgcMessageAttachment,
+  closeIcon,
+  fileIcon,
+  imageIcon,
+  moreIcon,
+  previewIcon,
+} from './types.js';
 
 /**
  *
@@ -23,7 +31,8 @@ export class IgcMessageAttachmentsComponent extends LitElement {
     registerComponent(
       IgcMessageAttachmentsComponent,
       IgcIconComponent,
-      IgcIconButtonComponent
+      IgcIconButtonComponent,
+      IgcExpansionPanelComponent
     );
   }
   @property({ type: Array })
@@ -36,6 +45,9 @@ export class IgcMessageAttachmentsComponent extends LitElement {
     super();
     registerIconFromText('close', closeIcon, 'material');
     registerIconFromText('file', fileIcon, 'material');
+    registerIconFromText('image', imageIcon, 'material');
+    registerIconFromText('preview', previewIcon, 'material');
+    registerIconFromText('more', moreIcon, 'material');
   }
 
   private formatFileSize(bytes = 0): string {
@@ -52,41 +64,64 @@ export class IgcMessageAttachmentsComponent extends LitElement {
     this.previewImage = '';
   }
 
+  private preventToggle(e: CustomEvent) {
+    e.preventDefault();
+  }
+
   protected override render() {
     return html`
       <div class="attachments-container">
-        ${this.attachments.map((attachment) =>
-          attachment.type === 'image'
-            ? html`
-                <div class="attachment-preview">
-                  <img
+        ${this.attachments.map(
+          (attachment) => html`
+            <igc-expansion-panel
+              indicator-position="none"
+              .open=${attachment.type === 'image'}
+              @igcClosing=${this.preventToggle}
+              @igcOpening=${this.preventToggle}
+            >
+              <div slot="title" class="attachment">
+                <div class="details">
+                  ${attachment.type === 'image'
+                    ? html`<igc-icon
+                        name="image"
+                        collection="material"
+                        class="medium"
+                      ></igc-icon>`
+                    : html`<igc-icon
+                        name="file"
+                        collection="material"
+                        class="medium"
+                      ></igc-icon>`}
+                  <span class="file-name">${attachment.name}</span>
+                </div>
+                <div class="actions">
+                  ${attachment.type === 'image'
+                    ? html` <igc-icon-button
+                        name="preview"
+                        collection="material"
+                        variant="flat"
+                        class="small"
+                        @click=${() => this.openImagePreview(attachment.url)}
+                      ></igc-icon-button>`
+                    : ''}
+                  <igc-icon-button
+                    name="more"
+                    collection="material"
+                    variant="flat"
+                    class="small"
+                  ></igc-icon-button>
+                </div>
+              </div>
+
+              ${attachment.type === 'image'
+                ? html` <img
                     class="image-attachment"
                     src=${attachment.url}
                     alt=${attachment.name}
-                    @click=${() => this.openImagePreview(attachment.url)}
-                  />
-                </div>
-              `
-            : html`
-                <a
-                  class="file-attachment"
-                  href=${attachment.url}
-                  target="_blank"
-                  download=${attachment.name}
-                >
-                  <igc-icon
-                    name="file"
-                    collection="material"
-                    class="large"
-                  ></igc-icon>
-                  <div class="file-info">
-                    <div class="file-name">${attachment.name}</div>
-                    <div class="file-size">
-                      ${this.formatFileSize(attachment.size)}
-                    </div>
-                  </div>
-                </a>
-              `
+                  />`
+                : ''}
+            </igc-expansion-panel>
+          `
         )}
       </div>
 

src/components/chat/themes/message-attachments.base.scss

@@ -96,4 +96,14 @@
 
 .large {
     --ig-size: var(--ig-size-large);
+}
+
+.actions {
+    display: flex;
+}
+
+.attachment {
+    display: flex;
+    justify-content: space-between;    
+    gap: 2rem;
 }

src/components/chat/types.ts

@@ -44,3 +44,9 @@ export const closeIcon =
   '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg>';
 export const fileIcon =
   '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h320l240 240v480q0 33-23.5 56.5T720-80H240Zm280-520v-200H240v640h480v-440H520ZM240-800v200-200 640-640Z"/></svg>';
+export const imageIcon =
+  '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm40-80h480L570-480 450-320l-90-120-120 160Zm-40 80v-560 560Z"/></svg>';
+export const moreIcon =
+  '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M240-400q-33 0-56.5-23.5T160-480q0-33 23.5-56.5T240-560q33 0 56.5 23.5T320-480q0 33-23.5 56.5T240-400Zm240 0q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 33-23.5 56.5T480-400Zm240 0q-33 0-56.5-23.5T640-480q0-33 23.5-56.5T720-560q33 0 56.5 23.5T800-480q0 33-23.5 56.5T720-400Z"/></svg>';
+export const previewIcon =
+  '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z"/></svg>';