@chat21/chat21-ionic 3.0.55-RC6 → 3.0.57

package/src/app/app.module.ts

@@ -117,7 +117,7 @@ export function authenticationFactory(http: HttpClient, appConfig: AppConfigProv
   } else {
 
     FirebaseInitService.initFirebase(config.firebaseConfig)
-    console.log('[APP-MOD] FirebaseInitService config ', config)
+    // console.log('[APP-MOD] FirebaseInitService config ', config)
     const auth = new FirebaseAuthService(http, network, connectionService);
     auth.setBaseUrl(config.apiUrl)
   

package/src/app/chatlib/conversation-detail/conversation-content/conversation-content.component.ts

@@ -117,7 +117,8 @@ export class ConversationContentComponent implements OnInit {
   listenToUploadFileProgress() {
     this.uploadService.BSStateUpload.subscribe((data: any) => {
       this.logger.log('[CONV-CONTENT-W] BSStateUpload', data);
-      if (data && data.type.startsWith("application")) {
+      // && data.type.startsWith("application")
+      if (data ) {
         data.upload === 100 || isNaN(data.upload) ? this.showUploadProgress = false : this.showUploadProgress = true
         this.uploadProgress = data.upload
         this.fileType = 'file'

package/src/app/chatlib/conversation-detail/ion-conversation-detail/ion-conversation-detail.component.html

@@ -2,27 +2,27 @@
   <div *ngFor="let message of messages; let i = index">
  
     <ion-item class="align-center" class="ion-text-center" *ngIf="messageType(MESSAGE_TYPE_INFO, message)" class="msg_info_container">
-      <tiledeskwidget-info-message class="messages"
+      <chat-info-message class="messages"
           [message]="message">
-      </tiledeskwidget-info-message>
+      </chat-info-message>
     </ion-item>
 
     <!- - message SENDER:: - ->
     <ion-item role="messaggio" *ngIf="messageType(MESSAGE_TYPE_MINE, message)" class="msg_container base_sent">
                           
       <!- -backgroundColor non viene ancora usato - ->
-      <tiledeskwidget-bubble-message class="messages msg_sent slide-in-right"
+      <chat-bubble-message class="messages msg_sent slide-in-right"
           [ngClass]="{'button-in-msg' : message.metadata && message.metadata.button}"
           [message]="message"
           [textColor]="'col-msg-sent'"
           (onBeforeMessageRender)="returnOnBeforeMessageRender($event)"
           (onAfterMessageRender)="returnOnAfterMessageRender($event)">
-      </tiledeskwidget-bubble-message>
+      </chat-bubble-message>
 
         <!- - icon status message - ->
-      <tiledeskwidget-return-receipt class="slide-in-right"
+      <chat-return-receipt class="slide-in-right"
           [status]="message.status">
-      </tiledeskwidget-return-receipt>
+      </chat-return-receipt>
 
     </ion-item>
 
@@ -30,19 +30,19 @@
     <div role="messaggio" *ngIf="messageType(MESSAGE_TYPE_OTHERS, message) && isChannelTypeGroup(channelType)" class="message_sender_fullname slide-in-left">{{message.sender_fullname}}</div>
     <div role="messaggio" *ngIf="messageType(MESSAGE_TYPE_OTHERS, message)" class="msg_container base_receive">
                           
-      <!- - <tiledeskwidget-avatar-image class="slide-in-left"  
+      <!- - <chat-avatar-image class="slide-in-left"  
           [senderID]="message.sender"
           [senderFullname]="message.sender_fullname"
           [baseLocation]="baseLocation">
-      </tiledeskwidget-avatar-image> - ->
+      </chat-avatar-image> - ->
 
       <!- -backgroundColor non viene ancora usato - ->
-      <tiledeskwidget-bubble-message class="messages msg_receive slide-in-left"
+      <chat-bubble-message class="messages msg_receive slide-in-left"
           [message]="message"
           [textColor]="'black'"
           (onBeforeMessageRender)="returnOnBeforeMessageRender($event)"
           (onAfterMessageRender)="returnOnAfterMessageRender($event)">
-      </tiledeskwidget-bubble-message>
+      </chat-bubble-message>
 
     </div>
 
@@ -58,23 +58,27 @@
 
     <div class="align-center" class="ion-text-center" *ngIf="messageType(MESSAGE_TYPE_INFO, message)"
       class="msg_info_container">
-      <tiledeskwidget-info-message class="messages" [message]="message">
-      </tiledeskwidget-info-message>
+      <chat-info-message class="messages" 
+        [message]="message">
+      </chat-info-message>
     </div>
 
     <!-- message SENDER:: -->
     <div role="messaggio" *ngIf="messageType(MESSAGE_TYPE_MINE, message)" class="msg_container base_sent">
 
       <!--backgroundColor non viene ancora usato -->
-      <tiledeskwidget-bubble-message class="messages msg_sent" id="{{'message'+'_'+ i}}"
+      <chat-bubble-message 
+      class="messages msg_sent" id="{{'message'+'_'+ i}}"
         [ngClass]="{'button-in-msg' : message.metadata && message.metadata.button}" [message]="message"
-        [textColor]="'col-msg-sent'" (onBeforeMessageRender)="returnOnBeforeMessageRender($event)"
-        (onAfterMessageRender)="returnOnAfterMessageRender($event)" (onImageRendered)="onImageRenderedFN($event)">
-      </tiledeskwidget-bubble-message>
+        [textColor]="'col-msg-sent'" 
+        (onBeforeMessageRender)="returnOnBeforeMessageRender($event)"
+        (onAfterMessageRender)="returnOnAfterMessageRender($event)" 
+        (onImageRendered)="onImageRenderedFN($event)">
+      </chat-bubble-message>
 
       <!-- icon status message -->
-      <tiledeskwidget-return-receipt [status]="message.status" [message]="message" [senderId]="senderId">
-      </tiledeskwidget-return-receipt>
+      <chat-return-receipt [status]="message.status" [message]="message" [senderId]="senderId">
+      </chat-return-receipt>
 
     </div>
 
@@ -87,22 +91,38 @@
 
     <div role="messaggio" *ngIf="messageType(MESSAGE_TYPE_OTHERS, message)" class="msg_container base_receive">
 
-      <!-- <tiledeskwidget-avatar-image class="slide-in-left"  
+      <!-- <chat-avatar-image class="slide-in-left"  
           [senderID]="message.sender"
           [senderFullname]="message.sender_fullname"
           [baseLocation]="baseLocation">
-      </tiledeskwidget-avatar-image> -->
+      </chat-avatar-image> -->
 
       <!--backgroundColor non viene ancora usato -->
 
-      <tiledeskwidget-bubble-message class="messages msg_receive" [message]="message" [textColor]="'black'"
+      <chat-bubble-message class="messages msg_receive" 
+        [message]="message" 
+        [textColor]="'black'"
         (onBeforeMessageRender)="returnOnBeforeMessageRender($event)"
-        (onAfterMessageRender)="returnOnAfterMessageRender($event)" (onImageRendered)="onImageRenderedFN($event)">
-      </tiledeskwidget-bubble-message>
+        (onAfterMessageRender)="returnOnAfterMessageRender($event)" 
+        (onImageRendered)="onImageRenderedFN($event)">
+      </chat-bubble-message>
+    </div>
+
+    <!-- message type:: button &&  -->
+    <div *ngIf="message?.attributes && message?.attributes?.attachment " class="slide-in-left" > 
+      <chat-message-attachment 
+          style="height: 100%; display: block;"
+          [message]="message"
+          [isLastMessage] = "isLastMessage(message?.uid)"
+          [stylesMap]="stylesMap"
+          (onAttachmentButtonClicked)="returnOnAttachmentButtonClicked($event)">
+      </chat-message-attachment>
     </div>
   </div>
+  <!-- (fileType === 'file' && uploadProgress !== 100)  -->
 
-  <div *ngIf="(fileType === 'file' && uploadProgress !== 100)" class="msg_container base_sent"
+  <!-- uploadProgress -> {{ uploadProgress }} -->
+  <div *ngIf="uploadProgress !== 100" class="msg_container base_sent"
     style="margin-right: 20px;">
     <div class="messages msg_sent">
       <div class="spinner">

package/src/app/chatlib/conversation-detail/ion-conversation-detail/ion-conversation-detail.component.scss

@@ -1,16 +1,15 @@
-:host .base_sent .msg_sent ::ng-deep div > div > div > tiledeskwidget-text > p > p > a {
+:host .base_sent .msg_sent ::ng-deep div > div > div > chat-text > p > p > a {
     color: lightblue;
- 
 }
 
-:host .base_sent .msg_sent ::ng-deep div > div > div > tiledeskwidget-text > p > p  {
+:host .base_sent .msg_sent ::ng-deep div > div > div > chat-text > p > p  {
     margin-top:12px !important;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    // white-space: nowrap;
+    // overflow: hidden;
+    // text-overflow: ellipsis;
 }
 
-:host .base_sent .msg_sent ::ng-deep > div > div > tiledeskwidget-image > div  {
+:host .base_sent .msg_sent ::ng-deep > div > div > chat-image > div  {
     // display: none !important;
     // border-radius: unset !important;
     img, .loader { 
@@ -22,7 +21,7 @@
     
 }
 
-:host .base_receive .msg_receive ::ng-deep > div > div > tiledeskwidget-image > div > img {
+:host .base_receive .msg_receive ::ng-deep > div > div > chat-image > div > img {
     // display: none !important;
     // border-radius: unset !important;
     img, .loader { 

package/src/app/chatlib/conversation-detail/ion-conversation-detail/ion-conversation-detail.component.ts

@@ -22,7 +22,7 @@ export class IonConversationDetailComponent extends ConversationContentComponent
   @Output() onAddUploadingBubble = new EventEmitter<boolean>();
  
 
-  public uploadProgress: number
+  public uploadProgress: number = 100
   public fileType: any
 
   isMine = isMine;
@@ -45,10 +45,12 @@ export class IonConversationDetailComponent extends ConversationContentComponent
     public uploadService: UploadService
   ) {
     super(cdref, uploadService)
-    this.listenToUploadFileProgress()
+   
   }
 
-  ngOnInit() { }
+  ngOnInit() { 
+  this.listenToUploadFileProgress()
+  }
 
   listenToUploadFileProgress() {
     this.logger.log('[CONVS-DETAIL][ION-CONVS-DETAIL] FIREBASE-UPLOAD - calling BSStateUpload ');
@@ -65,14 +67,14 @@ export class IonConversationDetailComponent extends ConversationContentComponent
           this.uploadProgress = 100
         }
         // if (data.type.startsWith("application")) {
-        if (!data.type.startsWith("image")) {
+        // if (!data.type.startsWith("image")) {
          
-          this.fileType = 'file'
+          // this.fileType = 'file'
 
           this.addUploadingBubblePlaceholder(true)
 
-          this.logger.log('[CONVS-DETAIL][ION-CONVS-DETAIL] FIREBASE-UPLOAD - BSStateUpload this.fileType', this.fileType);
-        }
+          // this.logger.log('[CONVS-DETAIL][ION-CONVS-DETAIL] FIREBASE-UPLOAD - BSStateUpload this.fileType', this.fileType);
+        // }
       }
     });
   }

package/src/app/chatlib/conversation-detail/message/avatar/avatar.component.ts

@@ -1,7 +1,7 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { ImageRepoService } from 'src/chat21-core/providers/abstract/image-repo.service';
 @Component({
-  selector: 'tiledeskwidget-avatar-image',
+  selector: 'chat-avatar-image',
   templateUrl: './avatar.component.html',
   styleUrls: ['./avatar.component.scss']
 })

package/src/app/chatlib/conversation-detail/message/bubble-message/bubble-message.component.html

@@ -1,5 +1,8 @@
 <!-- [ngClass]="{'button-in-msg' : message.metadata && message.metadata.button}" -->
-<div [ngStyle]="{'padding': (isImage(message) || isFrame(message))?'0px':'0 8px'}" class="messages primary-color"
+<!-- [ngStyle]="{'padding': (isImage(message) || isFrame(message))?'0px':'0 8px'}" -->
+<!-- isImage >{{isImage(message) }}    message.metadata.width {{message?.metadata?.width }}  -->
+<div  [ngStyle]="{'padding': (isImage(message) || isFrame(message))?'0px':'0 8px', 'width': (isImage(message) || isFrame(message))? message?.metadata?.width + 'px' : null }"
+   class="messages primary-color"
   [class.emoticon]="message?.emoticon">
 
 
@@ -13,24 +16,29 @@
     [src]="message.metadata.src" [width]="getSizeImg(message).width"
     [height]="getSizeImg(message).height" /> -->
 
-    <tiledeskwidget-image *ngIf="isImage(message)" 
+    <!-- [width]="getMetadataSize(message.metadata).width" 
+    [height]="getMetadataSize(message.metadata).height" -->
+    <chat-image *ngIf="isImage(message)" 
       [metadata]="message.metadata"
-      [width]="getMetadataSize(message.metadata).width" 
-      [height]="getMetadataSize(message.metadata).height"
+     
+      [width]="message.metadata.width" 
+      [height]="message.metadata.height"
       (onImageRendered)="onImageRenderedFN($event)">
-    </tiledeskwidget-image>
+    </chat-image>
 
-    <tiledeskwidget-frame *ngIf="isFrame(message)" 
+    <!-- [width]="getMetadataSize(message.metadata).width"  -->
+    <!-- [height]="getMetadataSize(message.metadata).height"> -->
+    <chat-frame *ngIf="isFrame(message)" 
       [metadata]="message.metadata"
-      [width]="getMetadataSize(message.metadata).width" 
-      [height]="getMetadataSize(message.metadata).height">
-    </tiledeskwidget-frame>
+      [width]="message.metadata.width" 
+      [height]="message.metadata.height">
+    </chat-frame>
 
-    <!-- <tiledeskwidget-frame *ngIf="message.metadata && message.metadata.type && message.metadata.type.includes('video')"
+    <!-- <chat-frame *ngIf="message.metadata && message.metadata.type && message.metadata.type.includes('video')"
       [metadata]="message.metadata"
       [width]="message.metadata.width"
       [height]="message.metadata.height">
-    </tiledeskwidget-frame> -->
+    </chat-frame> -->
 
     <!-- message type:: text -->
     <!-- <div *ngIf="message.type == 'text'">  -->
@@ -40,13 +48,13 @@
         <span>{{message.timestamp | amTimeAgo}}</span>
       </ng-template>
 
-      <tiledeskwidget-text 
+      <chat-text 
         [text]="message?.text" 
         [color]="textColor" 
-       [message]="message"
+        [message]="message"
         (onBeforeMessageRender)="returnOnBeforeMessageRender($event)"
         (onAfterMessageRender)="returnOnAfterMessageRender($event)">
-      </tiledeskwidget-text>
+      </chat-text>
       <!-- <p #messageEl class="message_innerhtml marked" [innerHTML]="printMessage(message, messageEl, this) | marked"></p> -->
       <!-- <div *ngIf="isPopupUrl(message.text); then contentPopup else contentNewTab">here
             is ignored</div>

package/src/app/chatlib/conversation-detail/message/bubble-message/bubble-message.component.ts

@@ -1,16 +1,16 @@
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { MessageModel } from 'src/chat21-core/models/message';
-import { MAX_WIDTH_IMAGES} from 'src/chat21-core/utils/constants';
+import { MAX_WIDTH_IMAGES } from 'src/chat21-core/utils/constants';
 import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
 import { isFile, isFrame, isImage } from 'src/chat21-core/utils/utils-message';
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 @Component({
-  selector: 'tiledeskwidget-bubble-message',
+  selector: 'chat-bubble-message',
   templateUrl: './bubble-message.component.html',
   styleUrls: ['./bubble-message.component.scss']
 })
-export class BubbleMessageComponent implements OnInit {
+export class BubbleMessageComponent implements OnInit, OnChanges {
 
   @Input() message: MessageModel;
   @Input() textColor: string;
@@ -20,7 +20,7 @@ export class BubbleMessageComponent implements OnInit {
   isImage = isImage;
   isFile = isFile;
   isFrame = isFrame;
-  
+
   tooltipOptions = {
     'show-delay': 500,
     'tooltip-class': 'chat-tooltip',
@@ -32,61 +32,101 @@ export class BubbleMessageComponent implements OnInit {
   };
 
   private logger: LoggerService = LoggerInstance.getInstance()
-  constructor(public sanitizer: DomSanitizer) { }
+  constructor(public sanitizer: DomSanitizer) {
+    console.log('BUBBLE-MSG Hello !!!!')
+  }
 
   ngOnInit() {
+
+  }
+
+  ngOnChanges() {
+    // console.log('BUBBLE-MSG Hello !!!! this.message ',  this.message)
+    if (this.message && this.message.metadata) {
+      this.getMetadataSize(this.message.metadata)
+      // console.log('BUBBLE-MSG ngOnChanges message > metadata', this.message.metadata)
+    }
+
   }
 
+
   /**
    *
    * @param message
    */
+  // getMetadataSize(metadata): any {
+  //   if(metadata.width === undefined){
+  //     metadata.width= MAX_WIDTH_IMAGES
+  //   }
+  //   if(metadata.height === undefined){
+  //     metadata.height = MAX_WIDTH_IMAGES
+  //   }
+  //   // const MAX_WIDTH_IMAGES = 300;
+  //   const sizeImage = {
+  //       width: metadata.width,
+  //       height: metadata.height
+  //   };
+  //   //   that.g.wdLog(['message::: ', metadata);
+  //   if (metadata.width && metadata.width > MAX_WIDTH_IMAGES) {
+  //       const rapporto = (metadata['width'] / metadata['height']);
+  //       sizeImage.width = MAX_WIDTH_IMAGES;
+  //       sizeImage.height = MAX_WIDTH_IMAGES / rapporto;
+  //   }
+  //   return sizeImage; // h.toString();
+  // }
+
   getMetadataSize(metadata): any {
-    if(metadata.width === undefined){
-      metadata.width= MAX_WIDTH_IMAGES
+    if (metadata.width === undefined) {
+      metadata.width = MAX_WIDTH_IMAGES
     }
-    if(metadata.height === undefined){
+    if (metadata.height === undefined) {
       metadata.height = MAX_WIDTH_IMAGES
     }
-    // const MAX_WIDTH_IMAGES = 300;
-    const sizeImage = {
-        width: metadata.width,
-        height: metadata.height
-    };
-    //   that.g.wdLog(['message::: ', metadata);
-    if (metadata.width && metadata.width > MAX_WIDTH_IMAGES) {
-        const rapporto = (metadata['width'] / metadata['height']);
-        sizeImage.width = MAX_WIDTH_IMAGES;
-        sizeImage.height = MAX_WIDTH_IMAGES / rapporto;
+
+    if (metadata.width && metadata.width < MAX_WIDTH_IMAGES) {
+      if (metadata.width <= 55) {
+        const ratio = (metadata['width'] / metadata['height']);
+        metadata.width = 200;
+        metadata.height = 200 / ratio;
+      } else if (metadata.width > 55) {
+        metadata.width = this.message.metadata.width;
+        metadata.height = this.message.metadata.height;
+      }
+    } else if (metadata.width && metadata.width > MAX_WIDTH_IMAGES) {
+      const ratio = (metadata['width'] / metadata['height']);
+      metadata.width = MAX_WIDTH_IMAGES;
+      metadata.height = MAX_WIDTH_IMAGES / ratio;
     }
-    return sizeImage; // h.toString();
   }
 
+
+
+
   /**
   * function customize tooltip
   */
- handleTooltipEvents(event) {
-  const that = this;
-  const showDelay = this.tooltipOptions['show-delay'];
-  setTimeout(function () {
-    try {
-      const domRepresentation = document.getElementsByClassName('chat-tooltip');
-      if (domRepresentation) {
-        const item = domRepresentation[0] as HTMLInputElement;
-        if (!item.classList.contains('tooltip-show')) {
-          item.classList.add('tooltip-show');
-        }
-        setTimeout(function () {
-          if (item.classList.contains('tooltip-show')) {
-            item.classList.remove('tooltip-show');
+  handleTooltipEvents(event) {
+    const that = this;
+    const showDelay = this.tooltipOptions['show-delay'];
+    setTimeout(function () {
+      try {
+        const domRepresentation = document.getElementsByClassName('chat-tooltip');
+        if (domRepresentation) {
+          const item = domRepresentation[0] as HTMLInputElement;
+          if (!item.classList.contains('tooltip-show')) {
+            item.classList.add('tooltip-show');
           }
-        }, that.tooltipOptions['hideDelayAfterClick']);
+          setTimeout(function () {
+            if (item.classList.contains('tooltip-show')) {
+              item.classList.remove('tooltip-show');
+            }
+          }, that.tooltipOptions['hideDelayAfterClick']);
+        }
+      } catch (err) {
+        that.logger.error('[BUBBLE-MESSAGE] handleTooltipEvents >>>> Error :' + err);
       }
-    } catch (err) {
-      that.logger.error('[BUBBLE-MESSAGE] handleTooltipEvents >>>> Error :' + err);
-    }
-  }, showDelay);
-}
+    }, showDelay);
+  }
 
   // ========= begin:: event emitter function ============//
 
@@ -99,17 +139,17 @@ export class BubbleMessageComponent implements OnInit {
   //   this.onClickAttachmentButton.emit(event)
   // }
 
-  returnOnBeforeMessageRender(event){
-    const messageOBJ = { message: this.message, sanitizer: this.sanitizer, messageEl: event.messageEl, component: event.component}
+  returnOnBeforeMessageRender(event) {
+    const messageOBJ = { message: this.message, sanitizer: this.sanitizer, messageEl: event.messageEl, component: event.component }
     this.onBeforeMessageRender.emit(messageOBJ)
   }
 
-  returnOnAfterMessageRender(event){
-    const messageOBJ = { message: this.message, sanitizer: this.sanitizer, messageEl: event.messageEl, component: event.component}
+  returnOnAfterMessageRender(event) {
+    const messageOBJ = { message: this.message, sanitizer: this.sanitizer, messageEl: event.messageEl, component: event.component }
     this.onAfterMessageRender.emit(messageOBJ)
   }
 
-  onImageRenderedFN(event){
+  onImageRenderedFN(event) {
     this.onImageRendered.emit(event)
   }
 

package/src/app/chatlib/conversation-detail/message/buttons/action-button/action-button.component.scss

@@ -1,6 +1,6 @@
 // @import '../../../../../sass/variables';
 
-:root {
+div {
     --bck-msg-sent: #62a8ea;
     --col-msg-sent:#ffffff;
     --light-white: #f7f7f7;

package/src/app/chatlib/conversation-detail/message/buttons/action-button/action-button.component.ts

@@ -1,7 +1,7 @@
 import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
 
 @Component({
-  selector: 'tiledeskwidget-action-button-attachment',
+  selector: 'chat-action-button-attachment',
   templateUrl: './action-button.component.html',
   styleUrls: ['./action-button.component.scss']
 })

package/src/app/chatlib/conversation-detail/message/buttons/link-button/link-button.component.scss

@@ -1,6 +1,6 @@
 // @import '../../../../../sass/variables';
 
-:root {
+div {
     --bck-msg-sent: #62a8ea;
     --col-msg-sent:#ffffff;
     --light-white: #f7f7f7;
@@ -35,15 +35,15 @@
     transition: background-color .6s ease;
     .icon-button-action {
         position: absolute;
-        top: -1;
-        right: 1;
+        top: -1px;
+        right: 1px;
         svg {
             fill: var(--blue);
         }
     }
     .icon-button-action-self{
         position: absolute;
-        right: 1;
+        right: 1px;
         svg {
             fill: var(--blue);
         }

package/src/app/chatlib/conversation-detail/message/buttons/link-button/link-button.component.ts

@@ -1,7 +1,7 @@
 import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
 
 @Component({
-  selector: 'tiledeskwidget-link-button-attachment',
+  selector: 'chat-link-button-attachment',
   templateUrl: './link-button.component.html',
   styleUrls: ['./link-button.component.scss']
 })

package/src/app/chatlib/conversation-detail/message/buttons/text-button/text-button.component.scss

@@ -1,5 +1,5 @@
 // @import '../../../../../sass/variables';
-:root {
+div {
     --bck-msg-sent: #62a8ea;
     --col-msg-sent:#ffffff;
     --light-white: #f7f7f7;

package/src/app/chatlib/conversation-detail/message/buttons/text-button/text-button.component.ts

@@ -2,7 +2,7 @@ import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@ang
 
 
 @Component({
-  selector: 'tiledeskwidget-text-button-attachment',
+  selector: 'chat-text-button-attachment',
   templateUrl: './text-button.component.html',
   styleUrls: ['./text-button.component.scss']
 })

package/src/app/chatlib/conversation-detail/message/frame/frame.component.ts

@@ -2,7 +2,7 @@ import { DomSanitizer } from '@angular/platform-browser';
 import { Component, Input, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'tiledeskwidget-frame',
+  selector: 'chat-frame',
   templateUrl: './frame.component.html',
   styleUrls: ['./frame.component.scss']
 })
@@ -16,12 +16,14 @@ export class FrameComponent implements OnInit {
   constructor(private sanitizer: DomSanitizer) { }
 
   ngOnInit() {
-    if(this.metadata && this.metadata.url){
+    if(this.metadata && this.metadata.src){
       this.url = this.sanitizer.bypassSecurityTrustResourceUrl(this.metadata.src);
     }
     // this.width = this.getSizeImg(this.metadata).width;
     // this.height = this.getSizeImg(this.metadata).height;
   }
+  
+
 
   ngOnDestroy(){
     this.url = null;

package/src/app/chatlib/conversation-detail/message/image/image.component.html

@@ -1,8 +1,9 @@
-<div [ngStyle] = "{ 'max-width': width +'px', 'max-height': height +'px' }" style="position: relative;">
-  <div *ngIf="loading" class="loader" [ngStyle] = "{ 'width': width +'px', 'height': height +'px' }"></div>
-  <img 
-    class="message-contentX message-content-imageX" 
-    [ngClass]="{'isLoadingImage': loading}"
-    [src]="metadata.src"  
-    (load)="onLoaded($event)"/>
-</div>
+<div [ngStyle]="{ 'max-width': width +'px', 'max-height': height +'px' }" style="position: relative; ">
+  <div *ngIf="loading" class="loader" [ngStyle]="{ 'width': width +'px', 'height': height +'px' }"></div>
+  <img [ngStyle]="{ 'width': width +'px', 'height': height +'px' }" style="cursor:pointer" [tooltip]="timeTooltipRight" [options]="tooltipOptions" placement="bottom"
+    content-type="template" class="message-contentX message-content-imageX" [ngClass]="{'isLoadingImage': loading}"
+    [src]="metadata.src" (load)="onLoaded($event)" (click)="downloadImage(metadata.src, metadata.name)" />
+  <ng-template #timeTooltipRight>
+    <span>{{ tooltipMessage }}</span>
+  </ng-template>
+</div>

package/src/app/chatlib/conversation-detail/message/image/image.component.scss

@@ -9,8 +9,9 @@ img {
 }
 
 .isLoadingImage {
-    position: relative;
-    top: 6px;
+    // position: relative;
+    // top: 6px;
+    display:none
 }
 
 .loader {