feat(chat): add attachments templates

Author: teodosiah

src/components/chat/chat-message-list.ts

@@ -4,7 +4,7 @@ import { repeat } from 'lit/directives/repeat.js';
 import { registerComponent } from '../common/definitions/register.js';
 import IgcChatMessageComponent from './chat-message.js';
 import { styles } from './themes/message-list.base.css.js';
-import type { IgcMessage } from './types.js';
+import type { AttachmentTemplate, IgcMessage } from './types.js';
 
 /**
  *
@@ -31,6 +31,18 @@ export default class IgcChatMessageListComponent extends LitElement {
   @property({ type: Boolean, attribute: 'disable-auto-scroll' })
   public disableAutoScroll = false;
 
+  @property({ type: Function })
+  public attachmentTemplate?: AttachmentTemplate;
+
+  @property({ type: Function })
+  public attachmentHeaderTemplate?: AttachmentTemplate;
+
+  @property({ type: Function })
+  public attachmentActionsTemplate?: AttachmentTemplate;
+
+  @property({ type: Function })
+  public attachmentContentTemplate?: AttachmentTemplate;
+
   private formatDate(date: Date): string {
     const today = new Date();
     const yesterday = new Date(today);
@@ -109,6 +121,10 @@ export default class IgcChatMessageListComponent extends LitElement {
                   <igc-chat-message
                     .message=${message}
                     .isResponse=${message.isResponse}
+                    .attachmentTemplate=${this.attachmentTemplate}
+                    .attachmentHeaderTemplate=${this.attachmentHeaderTemplate}
+                    .attachmentActionsTemplate=${this.attachmentActionsTemplate}
+                    .attachmentContentTemplate=${this.attachmentContentTemplate}
                   ></igc-chat-message>
                 `
               )}

src/components/chat/chat-message.ts

@@ -5,7 +5,7 @@ import { registerComponent } from '../common/definitions/register.js';
 import { renderMarkdown } from './markdown-util.js';
 import { IgcMessageAttachmentsComponent } from './message-attachments.js';
 import { styles } from './themes/message.base.css.js';
-import type { IgcMessage } from './types.js';
+import type { AttachmentTemplate, IgcMessage } from './types.js';
 
 /**
  *
@@ -33,9 +33,17 @@ export default class IgcChatMessageComponent extends LitElement {
   @property({ reflect: true, attribute: false })
   public isResponse = false;
 
-  private formatTime(date: Date | undefined): string | undefined {
-    return date?.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
-  }
+  @property({ type: Function })
+  public attachmentTemplate?: AttachmentTemplate;
+
+  @property({ type: Function })
+  public attachmentHeaderTemplate?: AttachmentTemplate;
+
+  @property({ type: Function })
+  public attachmentActionsTemplate?: AttachmentTemplate;
+
+  @property({ type: Function })
+  public attachmentContentTemplate?: AttachmentTemplate;
 
   protected override render() {
     const containerClass = `message-container ${!this.isResponse ? 'sent' : ''}`;
@@ -50,6 +58,10 @@ export default class IgcChatMessageComponent extends LitElement {
         ${this.message?.attachments && this.message?.attachments.length > 0
           ? html`<igc-message-attachments
               .attachments=${this.message?.attachments}
+              .attachmentTemplate=${this.attachmentTemplate}
+              .attachmentHeaderTemplate=${this.attachmentHeaderTemplate}
+              .attachmentActionsTemplate=${this.attachmentActionsTemplate}
+              .attachmentContentTemplate=${this.attachmentContentTemplate}
             >
             </igc-message-attachments>`
           : ''}

src/components/chat/chat.ts

@@ -7,7 +7,11 @@ import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
 import IgcChatInputComponent from './chat-input.js';
 import IgcChatMessageListComponent from './chat-message-list.js';
 import { styles } from './themes/chat.base.css.js';
-import type { IgcMessage, IgcMessageAttachment } from './types.js';
+import type {
+  AttachmentTemplate,
+  IgcMessage,
+  IgcMessageAttachment,
+} from './types.js';
 
 export interface IgcChatComponentEventMap {
   igcMessageSend: CustomEvent<IgcMessage>;
@@ -59,6 +63,18 @@ export default class IgcChatComponent extends EventEmitterMixin<
   @property({ type: String, attribute: 'header-text', reflect: true })
   public headerText = '';
 
+  @property({ type: Function })
+  public attachmentTemplate?: AttachmentTemplate;
+
+  @property({ type: Function })
+  public attachmentHeaderTemplate?: AttachmentTemplate;
+
+  @property({ type: Function })
+  public attachmentActionsTemplate?: AttachmentTemplate;
+
+  @property({ type: Function })
+  public attachmentContentTemplate?: AttachmentTemplate;
+
   public override connectedCallback() {
     super.connectedCallback();
     this.addEventListener(
@@ -122,6 +138,10 @@ export default class IgcChatComponent extends EventEmitterMixin<
           .messages=${this.messages}
           .disableAutoScroll=${this.disableAutoScroll}
           .isAiResponding=${this.isAiResponding}
+          .attachmentTemplate=${this.attachmentTemplate}
+          .attachmentHeaderTemplate=${this.attachmentHeaderTemplate}
+          .attachmentActionsTemplate=${this.attachmentActionsTemplate}
+          .attachmentContentTemplate=${this.attachmentContentTemplate}
         >
         </igc-chat-message-list>
         <igc-chat-input

src/components/chat/message-attachments.ts

@@ -7,6 +7,7 @@ import IgcIconComponent from '../icon/icon.js';
 import { registerIconFromText } from '../icon/icon.registry.js';
 import { styles } from './themes/message-attachments.base.css';
 import {
+  type AttachmentTemplate,
   type IgcMessageAttachment,
   closeIcon,
   fileIcon,
@@ -41,6 +42,18 @@ export class IgcMessageAttachmentsComponent extends LitElement {
   @property({ type: String })
   previewImage = '';
 
+  @property({ type: Function })
+  attachmentTemplate: AttachmentTemplate | undefined;
+
+  @property({ type: Function })
+  attachmentHeaderTemplate: AttachmentTemplate | undefined;
+
+  @property({ type: Function })
+  attachmentActionsTemplate: AttachmentTemplate | undefined;
+
+  @property({ type: Function })
+  attachmentContentTemplate: AttachmentTemplate | undefined;
+
   constructor() {
     super();
     registerIconFromText('close', closeIcon, 'material');
@@ -50,12 +63,6 @@ export class IgcMessageAttachmentsComponent extends LitElement {
     registerIconFromText('more', moreIcon, 'material');
   }
 
-  private formatFileSize(bytes = 0): string {
-    if (bytes < 1024) return `${bytes} B`;
-    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
-    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
-  }
-
   private openImagePreview(url: string) {
     this.previewImage = url;
   }
@@ -82,60 +89,82 @@ export class IgcMessageAttachmentsComponent extends LitElement {
   protected override render() {
     return html`
       <div class="attachments-container">
-        ${this.attachments.map(
-          (attachment) => html`
-            <igc-expansion-panel
-              indicator-position="none"
-              .open=${attachment.type === 'image'}
-              @igcClosing=${(ev: CustomEvent) =>
-                this.handleToggle(ev, attachment)}
-              @igcOpening=${(ev: CustomEvent) =>
-                this.handleToggle(ev, attachment)}
-            >
-              <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}
-                  />`
-                : ''}
-            </igc-expansion-panel>
-          `
-        )}
+        ${this.attachmentTemplate
+          ? this.attachmentTemplate(this.attachments)
+          : html` ${this.attachments.map(
+              (attachment) =>
+                html` <igc-expansion-panel
+                  indicator-position="none"
+                  .open=${attachment.type === 'image'}
+                  @igcClosing=${(ev: CustomEvent) =>
+                    this.handleToggle(ev, attachment)}
+                  @igcOpening=${(ev: CustomEvent) =>
+                    this.handleToggle(ev, attachment)}
+                >
+                  <div slot="title" class="attachment">
+                    <div class="details">
+                      ${this.attachmentHeaderTemplate
+                        ? this.attachmentHeaderTemplate(this.attachments)
+                        : html`
+                            <slot name="attachment-icon">
+                              ${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>`}
+                            </slot>
+                            <slot name="attachment-name">
+                              <span class="file-name">${attachment.name}</span>
+                            </slot>
+                          `}
+                    </div>
+                    <div class="actions">
+                      ${this.attachmentActionsTemplate
+                        ? this.attachmentActionsTemplate(this.attachments)
+                        : html`
+                            <slot name="attachment-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>
+                            </slot>
+                          `}
+                    </div>
+                  </div>
+
+                  ${this.attachmentContentTemplate
+                    ? this.attachmentContentTemplate(this.attachments)
+                    : html`
+                        <slot name="attachment-content">
+                          ${attachment.type === 'image'
+                            ? html` <img
+                                class="image-attachment"
+                                src=${attachment.url}
+                                alt=${attachment.name}
+                              />`
+                            : ''}
+                        </slot>
+                      `}
+                </igc-expansion-panel>`
+            )}`}
       </div>
 
       ${this.previewImage

src/components/chat/types.ts

@@ -1,3 +1,5 @@
+import type { TemplateResult } from 'lit';
+
 export type IgcMessageAttachmentType = 'image' | 'file';
 
 export interface IgcMessage {
@@ -16,7 +18,9 @@ export interface IgcMessageAttachment {
   size?: number;
   thumbnail?: string;
 }
-
+export type AttachmentTemplate = (
+  attachments: IgcMessageAttachment[]
+) => TemplateResult;
 export const attachmentIcon =
   '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M720-330q0 104-73 177T470-80q-104 0-177-73t-73-177v-370q0-75 52.5-127.5T400-880q75 0 127.5 52.5T580-700v350q0 46-32 78t-78 32q-46 0-78-32t-32-78v-370h80v370q0 13 8.5 21.5T470-320q13 0 21.5-8.5T500-350v-350q-1-42-29.5-71T400-800q-42 0-71 29t-29 71v370q-1 71 49 120.5T470-160q70 0 119-49.5T640-330v-390h80v390Z"/></svg>';
 export const sendButtonIcon =