chore(chat): remove default attachment action buttons & fix duplicated messages issue

Author: teodosiah

src/components/chat/chat-state.ts

@@ -136,7 +136,9 @@ export class ChatState {
     });
 
     if (allowed) {
-      this.messages = [...this.messages, newMessage];
+      if (!this.messages.some((msg) => msg.id === newMessage.id)) {
+        this.messages = [...this.messages, newMessage];
+      }
       this.inputValue = '';
       this.inputAttachments = [];
     }

src/components/chat/message-attachments.ts

@@ -55,14 +55,6 @@ export default class IgcMessageAttachmentsComponent extends LitElement {
     registerIconFromText('more', moreIcon, 'material');
   }
 
-  private openImagePreview(attachment: IgcMessageAttachment) {
-    this.previewImage = this.getURL(attachment);
-  }
-
-  private closeImagePreview() {
-    this.previewImage = '';
-  }
-
   private handleToggle(e: CustomEvent, attachment: IgcMessageAttachment) {
     this._chatState?.emitEvent('igcAttachmentClick', { detail: attachment });
     e.preventDefault();
@@ -106,34 +98,13 @@ export default class IgcMessageAttachmentsComponent extends LitElement {
     </div>`;
   }
 
-  private renderAttachmentHeaderActions(attachment: IgcMessageAttachment) {
+  private renderAttachmentHeaderActions() {
     return html`<div class="actions">
       ${this._chatState?.options?.templates?.attachmentActionsTemplate
         ? this._chatState.options.templates.attachmentActionsTemplate(
             this.attachments
           )
-        : html`
-            <slot name="attachment-actions">
-              ${attachment.type === 'image' ||
-              attachment.file?.type.startsWith('image/')
-                ? html` <igc-icon-button
-                    name="preview"
-                    collection="material"
-                    variant="flat"
-                    class="small"
-                    tabIndex="-1"
-                    @click=${() => this.openImagePreview(attachment)}
-                  ></igc-icon-button>`
-                : nothing}
-              <igc-icon-button
-                name="more"
-                collection="material"
-                variant="flat"
-                class="small"
-                tabIndex="-1"
-              ></igc-icon-button>
-            </slot>
-          `}
+        : nothing}
     </div>`;
   }
 
@@ -170,32 +141,14 @@ export default class IgcMessageAttachmentsComponent extends LitElement {
         >
           <div slot="title" class="attachment">
             ${this.renderAttachmentHeaderText(attachment)}
-            ${this.renderAttachmentHeaderActions(attachment)}
+            ${this.renderAttachmentHeaderActions()}
           </div>
 
           ${this.renderAttachmentContent(attachment)}
         </igc-expansion-panel>`
     )}`;
   }
 
-  private renderImagePreview() {
-    return html` ${this.previewImage
-      ? html`
-          <div class="image-overlay" @click=${this.closeImagePreview}>
-            <img class="overlay-image" src=${this.previewImage} />
-            <igc-icon-button
-              name="close"
-              collection="material"
-              variant="contained"
-              class="small"
-              tabIndex="-1"
-              @click=${this.closeImagePreview}
-            ></igc-icon-button>
-          </div>
-        `
-      : nothing}`;
-  }
-
   protected override render() {
     return html`
       <div class="attachments-container">
@@ -205,8 +158,6 @@ export default class IgcMessageAttachmentsComponent extends LitElement {
             )
           : this.renderDefaultAttachmentsTemplate()}
       </div>
-
-      ${this.renderImagePreview()}
     `;
   }
 }