@chat21/chat21-ionic 3.0.85 → 3.0.86-rc.2

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

@@ -1,12 +1,17 @@
 <!-- [ngClass]="{'button-in-msg' : message.metadata && message.metadata.button}" -->
 <!-- [ngStyle]="{'padding': (isImage(message) || isFrame(message))?'0px':'0 8px'}" -->
 <!-- isImage >{{isImage(message) }}    message.metadata.width {{message?.metadata?.width }}  -->
-<div id="bubble-message"
-  [ngStyle]="{'padding': (isImage(message) || isFrame(message))?'0px':'0 8px', 'width': (isImage(message) || isFrame(message))? sizeImage?.width + 'px' : null }"
-  class="messages primary-color">
+<!-- 'width': (isImage(message) || isFrame(message))? sizeImage?.width : null -->
+<div id="bubble-message" [ngStyle]="{'padding': (isImage(message) || isFrame(message))?'0px':'0 8px' }"  class="messages primary-color">
 
 
   <div>
+
+    <div *ngIf="messageType(MESSAGE_TYPE_OTHERS, message) && !isSameSender" 
+      [style.color]="convertColorToRGBA(fontColor, 65)"
+      [ngStyle]="{'margin': (isImage(message) || isFrame(message))? '10px 16px 8px 16px': '10px 8px 0px 8px'}" class="message_sender_fullname">
+      {{message?.sender_fullname}}
+    </div>
     <!-- message type:: image -->
     <!-- <div *ngIf="message.type == 'image' && message.metadata"  [ngStyle] = "{ 'max-width': getSizeImg(message).width, 'max-height': getSizeImg(message).height }">
         <img class="message-contentX message-content-imageX" [src]="message.metadata.src" />
@@ -29,8 +34,8 @@
     <!-- [height]="getMetadataSize(message.metadata).height"> -->
     <chat-frame *ngIf="isFrame(message)" 
       [metadata]="message.metadata" 
-      [width]="message.metadata.width"
-      [height]="message.metadata.height"
+      [width]="sizeImage?.width"
+      [height]="sizeImage?.width"
       (onElementRendered)="onElementRenderedFN($event)">
     </chat-frame>
 
@@ -43,14 +48,10 @@
 
     <!-- [tooltip]="timeTooltipLeft" [options]="tooltipOptions" placement="left" content-type="template" (click)="handleTooltipEvents($event)" -->
     <div *ngIf="message?.text">
-      <span class="message-date"> {{message.timestamp | date:'HH:mm' }} </span>
-      <!-- <ng-template #timeTooltipLeft>
-        <span> {{message.timestamp | amCalendar }} </span>
-      </ng-template> -->
 
       <chat-text *ngIf="message?.type !=='html'"
         [text]="message?.text" 
-        [color]="textColor" 
+        [color]="fontColor" 
         [message]="message"
         (onBeforeMessageRender)="returnOnBeforeMessageRender($event)"
         (onAfterMessageRender)="returnOnAfterMessageRender($event)">
@@ -60,20 +61,6 @@
         [htmlText]="message?.text">
       </chat-html>
 
-      <ng-container *ngIf="areVisibleCAR && supportMode">
-        <ion-button shape="round" size="small" class="btn-add-msg canned" ion-button fill="clear"
-          (click)="presentCreateCannedResponseModal()" tooltip="{{addAsCannedResponseTooltipText}}"
-          [options]="tooltipOptions" placement="bottom">
-          <ion-icon slot="icon-only" name="flash-outline" style="font-size: 1em;"> </ion-icon>
-        </ion-button>
-      </ng-container>
-      <!-- <ng-container *ngIf="supportMode">
-        <ion-button shape="round" size="small" class="btn-add-msg emoji" ion-button fill="clear"
-          (click)="presentEmojiiModal()" tooltip="{{addAsCannedResponseTooltipText}}"
-          [options]="tooltipOptions" placement="bottom">
-          <ion-icon slot="icon-only" name="happy-outline" style="font-size: 1em;"> </ion-icon>
-        </ion-button>
-      </ng-container> -->
     </div>
   </div>
 

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

@@ -11,6 +11,11 @@
     // -webkit-animation: heartbeat 1.5s ease-in-out both;
     // animation: heartbeat 1.5s ease-in-out both;
 
+    .message_sender_fullname{
+        font-size: 12px;
+        font-weight: 600;
+    }
+
     p {
         font-size: 1.4em;
         margin: 0;
@@ -48,16 +53,7 @@
 
 }
 // > .button-native
-.btn-add-msg {
-    border-radius: 50%;
-    --padding-end: 7px;
-    --padding-start: 7px;
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.6);
-
-    ion-icon{
-        font-size: 1.2em;
-    }
-}
+
 
 
 

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

@@ -50,7 +50,7 @@ describe('BubbleMessageComponent', () => {
           isSender: false
     }
     component.message = messages
-    component.textColor = 'black'
+    component.fontColor = 'black'
     fixture.detectChanges()
     const textChild = fixture.debugElement.query(By.css('chat-text'))
     textChild.properties.text
@@ -76,7 +76,7 @@ describe('BubbleMessageComponent', () => {
           isSender: false
     }
     component.message = messages
-    component.textColor = 'black'
+    component.fontColor = 'black'
     fixture.detectChanges()
     const textChild = fixture.debugElement.query(By.css('chat-text'))
     expect(textChild.properties.text).toEqual(messages.text)

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

@@ -1,15 +1,15 @@
 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, MIN_WIDTH_IMAGES } from 'src/chat21-core/utils/constants';
+import { MAX_WIDTH_IMAGES, MESSAGE_TYPE_MINE, MESSAGE_TYPE_OTHERS, MIN_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 { isFile, isFrame, isImage, messageType } from 'src/chat21-core/utils/utils-message';
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 import { TranslateService } from '@ngx-translate/core';
 import { TiledeskAuthService } from 'src/chat21-core/providers/tiledesk/tiledesk-auth.service';
 import * as moment from 'moment';
-import { CreateCannedResponsePage } from 'src/app/pages/create-canned-response/create-canned-response.page'
 import { ModalController } from '@ionic/angular';
+import { convertColorToRGBA } from 'src/chat21-core/utils/utils';
 @Component({
   selector: 'chat-bubble-message',
   templateUrl: './bubble-message.component.html',
@@ -18,16 +18,25 @@ import { ModalController } from '@ionic/angular';
 export class BubbleMessageComponent implements OnInit, OnChanges {
 
   @Input() message: MessageModel;
-  @Input() textColor: string;
-  @Input() areVisibleCAR: boolean;
-  @Input() supportMode: boolean;
+  @Input() isSameSender: boolean;
+  @Input() fontColor: string;
+  @Input() fontSize: string;
+  @Input() fontFamily: string;
   @Output() onBeforeMessageRender = new EventEmitter();
   @Output() onAfterMessageRender = new EventEmitter();
   @Output() onElementRendered = new EventEmitter<{element: string, status: boolean}>();
   isImage = isImage;
   isFile = isFile;
   isFrame = isFrame;
-  @Input() addAsCannedResponseTooltipText : string;
+  convertColorToRGBA = convertColorToRGBA
+
+  // ========== begin:: check message type functions ======= //
+  messageType = messageType;
+
+  MESSAGE_TYPE_MINE = MESSAGE_TYPE_MINE;
+  MESSAGE_TYPE_OTHERS = MESSAGE_TYPE_OTHERS;
+ // ========== end:: check message type functions ======= //
+ 
   public browserLang: string;
 
   tooltipOptions = {
@@ -194,25 +203,6 @@ export class BubbleMessageComponent implements OnInit, OnChanges {
     this.onElementRendered.emit({element: event.element, status: event.status})
   }
 
-  async presentCreateCannedResponseModal(): Promise<any> {
-    this.logger.log('[BUBBLE-MESSAGE] PRESENT CREATE CANNED RESPONSE MODAL ')
-    const attributes = {
-       message: this.message,
-    }
-    const modal: HTMLIonModalElement = await this.modalController.create({
-      component: CreateCannedResponsePage,
-      componentProps: attributes,
-      swipeToClose: false,
-      backdropDismiss: false,
-    })
-    modal.onDidDismiss().then((dataReturned: any) => {
-      // 
-      this.logger.log('[BUBBLE-MESSAGE] ', dataReturned.data)
-    })
-
-    return await modal.present()
-  }
-
 
   // printMessage(message, messageEl, component) {
   //   const messageOBJ = { message: message, sanitizer: this.sanitizer, messageEl: messageEl, component: component}

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

@@ -1,3 +1,7 @@
-<div #actionButton id="actionButton" class="button-in-msg action" (click)="actionButtonAction()" title="{{button?.value}}">
+<div #actionButton id="actionButton" class="button-in-msg action" 
+title="{{button?.value}}"
+(click)="actionButtonAction()"
+(mouseover)="onMouseOver($event)" 
+(mouseout)="onMouseOut($event)">
   {{button.value}}
 </div>

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

@@ -1,12 +1,11 @@
 // @import '../../../../../sass/variables';
 
 div {
-    --bck-msg-sent: #62a8ea;
-    --col-msg-sent:#ffffff;
-    --light-white: #f7f7f7;
-    --black: #1a1a1a;
-    --gray: #aaaaaa;
-    --blue: rgb(42, 106, 193);
+    --backgroundColor: --basic-blue;
+    --textColor: --bck-msg-sent;
+    --hoverBackgroundColor: --bck-msg-sent;
+    --hoverTextColor: --basic-blue;
+    --buttonFontSize: --button-in-msg-font-size;
 }
 
 .button-in-msg {
@@ -15,32 +14,32 @@ div {
     max-width: 300px;
     min-width: inherit;
     cursor: pointer;
-    border: 1px solid var(--blue);
+    border: 1px solid var(--textColor);
     border-radius: 20px;
     margin: 3px;
-    background: transparent;
+    background: var(--backgroundColor);
     overflow: hidden;
     font-family: 'Muli', sans-serif;
-    font-size: 15px;
+    font-size: var(--buttonFontSize);
     -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
     white-space: nowrap;
     letter-spacing: -0.24px;
     -webkit-font-smoothing: antialiased;
-    color: var(--blue);
+    color: var(--textColor);
     line-height: 16px;
 }
 
 .action {
-    background: white;
+    background: var(--backgroundColor);
     transition: background-color .6s ease;
     &:focus,
     &:hover {
-        color: white;
-        background:  var(--blue);
+        color: var(--hoverTextColor);
+        background:  var(--hoverBackgroundColor);
         .icon-button-action {
             svg {
-                fill: white;
+                fill:  var(--hoverTextColor);
             }
         }
     }
@@ -80,4 +79,12 @@ div {
     //         height: 200px;
     //     }
     // }
-}
+}
+
+
+.disabled {
+    // border: 1px solid #999999;
+    // background-color: #cccccc;
+    // color: #666666;
+    pointer-events: none;
+}

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

@@ -1,4 +1,4 @@
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output, SimpleChanges } from '@angular/core';
 
 @Component({
   selector: 'chat-action-button-attachment',
@@ -8,16 +8,36 @@ import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@ang
 export class ActionButtonComponent implements OnInit {
 
   @Input() button: any;
-  @Input() themeColor: string;
-  @Input() foregroundColor: string;
+  @Input() fontSize: string;
+  @Input() backgroundColor: string;
+  @Input() textColor: string;
+  @Input() hoverBackgroundColor: string;
+  @Input() hoverTextColor: string;
   @Output() onButtonClicked = new EventEmitter();
+
   public type: string = "action"
   constructor(private elementRef: ElementRef) { }
 
   ngOnInit() {
+  }
+
+  ngOnChanges(changes: SimpleChanges){
     //decomment if element should have same color of themeColor and fregroundColor
-    // this.elementRef.nativeElement.style.setProperty('--themeColor', this.themeColor);
-    // this.elementRef.nativeElement.style.setProperty('--foregroundColor', this.foregroundColor);
+    if(this.fontSize) this.elementRef.nativeElement.querySelector('.action').style.setProperty('--buttonFontSize', this.fontSize);
+    if(this.backgroundColor) this.elementRef.nativeElement.querySelector('.action').style.setProperty('--backgroundColor', this.backgroundColor);
+    if(this.textColor) this.elementRef.nativeElement.querySelector('.action').style.setProperty('--textColor', this.textColor);
+    if(this.hoverBackgroundColor) this.elementRef.nativeElement.querySelector('.action').style.setProperty('--hoverBackgroundColor', this.hoverBackgroundColor);
+    if(this.hoverTextColor) this.elementRef.nativeElement.querySelector('.action').style.setProperty('--hoverTextColor', this.hoverTextColor);
+  }
+
+  onMouseOver(event){
+    // if(this.themeColor) this.elementRef.nativeElement.querySelector('.action').style.background = this.themeColor
+    // if(this.foregroundColor) this.elementRef.nativeElement.querySelector('.action').style.color = this.foregroundColor
+  }
+
+  onMouseOut(event){
+    // this.elementRef.nativeElement.querySelector('.action').style.color = '';
+    // this.elementRef.nativeElement.querySelector('.action').style.background = ''
   }
 
   actionButtonAction(){

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

@@ -1,4 +1,5 @@
-<div class="button-in-msg url" (click)="actionButtonUrl()" title="{{button?.value}}"> 
+<div class="button-in-msg url" (click)="actionButtonUrl()" title="{{button?.value}}"
+(mouseover)="onMouseOver($event)" (mouseout)="onMouseOut($event)"> 
   <span *ngIf="button?.target !== 'self'" class="icon-button-action">
     <!-- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="12px" height="12px">
       <path d="M0 0h24v24H0z" fill="none"/>

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

@@ -1,12 +1,11 @@
 // @import '../../../../../sass/variables';
 
 div {
-    --bck-msg-sent: #62a8ea;
-    --col-msg-sent:#ffffff;
-    --light-white: #f7f7f7;
-    --black: #1a1a1a;
-    --gray: #aaaaaa;
-    --blue: rgb(42, 106, 193);
+    --backgroundColor: --basic-blue;
+    --textColor: --bck-msg-sent;
+    --hoverBackgroundColor: --bck-msg-sent;
+    --hoverTextColor: --basic-blue;
+    --buttonFontSize: --button-in-msg-font-size;
 }
 
 .button-in-msg {
@@ -15,19 +14,19 @@ div {
     max-width: 300px;
     min-width: inherit;
     cursor: pointer;
-    border: 1px solid var(--blue);
+    border: 1px solid var(--textColor);
     border-radius: 20px;
     margin: 3px;
-    background: transparent;
+    background: var(--backgroundColor);
     overflow: hidden;
     font-family: 'Muli', sans-serif;
-    font-size: 15px;
+    font-size: var(--buttonFontSize);
     -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
     white-space: nowrap;
     letter-spacing: -0.24px;
     -webkit-font-smoothing: antialiased;
-    color: var(--blue);
+    color: var(--textColor);
     line-height: 16px;
 }
 
@@ -38,23 +37,23 @@ div {
         top: -1px;
         right: 1px;
         svg {
-            fill: var(--blue);
+            fill: var(--textColor);
         }
     }
     .icon-button-action-self{
         position: absolute;
         right: 1px;
         svg {
-            fill: var(--blue);
+            fill: var(--textColor);
         }
     }
     &:focus,
     &:hover {
-        color: white;
-        background:  var(--blue);
+        color: var(--hoverTextColor);
+        background:  var(--hoverBackgroundColor);
         .icon-button-action, .icon-button-action-self {
             svg {
-                fill: white;
+                fill: var(--hoverTextColor);
             }
         }
     }

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

@@ -1,4 +1,4 @@
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output, SimpleChanges } from '@angular/core';
 
 @Component({
   selector: 'chat-link-button-attachment',
@@ -8,16 +8,35 @@ import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@ang
 export class LinkButtonComponent implements OnInit {
 
   @Input() button: any;
-  @Input() themeColor: string;
-  @Input() foregroundColor: string;
+  @Input() fontSize: string;
+  @Input() backgroundColor: string;
+  @Input() textColor: string;
+  @Input() hoverBackgroundColor: string;
+  @Input() hoverTextColor: string;
   @Output() onButtonClicked = new EventEmitter();
   public type: string = "url"
   constructor(private elementRef: ElementRef) { }
 
   ngOnInit() {
+  }
+
+  ngOnChanges(changes: SimpleChanges){
     //decomment if element should have same color of themeColor and fregroundColor
-    // this.elementRef.nativeElement.style.setProperty('--themeColor', this.themeColor);
-    // this.elementRef.nativeElement.style.setProperty('--foregroundColor', this.foregroundColor);
+    if(this.fontSize) this.elementRef.nativeElement.querySelector('.url').style.setProperty('--buttonFontSize', this.fontSize);
+    if(this.backgroundColor) this.elementRef.nativeElement.querySelector('.url').style.setProperty('--backgroundColor', this.backgroundColor);
+    if(this.textColor) this.elementRef.nativeElement.querySelector('.url').style.setProperty('--textColor', this.textColor);
+    if(this.hoverBackgroundColor) this.elementRef.nativeElement.querySelector('.url').style.setProperty('--hoverBackgroundColor', this.hoverBackgroundColor);
+    if(this.hoverTextColor) this.elementRef.nativeElement.querySelector('.url').style.setProperty('--hoverTextColor', this.hoverTextColor);
+  }
+
+  onMouseOver(event){
+    // if(this.themeColor) this.elementRef.nativeElement.querySelector('.url').style.background = this.themeColor
+    // if(this.foregroundColor) this.elementRef.nativeElement.querySelector('.url').style.color = this.foregroundColor
+  }
+
+  onMouseOut(event){
+    // this.elementRef.nativeElement.querySelector('.url').style.color = '';
+    // this.elementRef.nativeElement.querySelector('.url').style.background = ''
   }
 
   actionButtonUrl(){

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

@@ -1,3 +1,8 @@
-<div class="button-in-msg text" (click)="actionButtonText()" title="{{button?.value}}">
+<div class="button-in-msg text" 
+[ngClass]="{'disabled': isConversationArchived}"
+title="{{button?.value}}"
+(click)="actionButtonText()" 
+(mouseover)="onMouseOver($event)" 
+(mouseout)="onMouseOut($event)">
   {{button?.value}}
 </div>

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

@@ -1,11 +1,10 @@
 // @import '../../../../../sass/variables';
 div {
-    --bck-msg-sent: #62a8ea;
-    --col-msg-sent:#ffffff;
-    --light-white: #f7f7f7;
-    --black: #1a1a1a;
-    --gray: #aaaaaa;
-    --blue: rgb(42, 106, 193);
+    --backgroundColor: --basic-blue;
+    --textColor: --bck-msg-sent;
+    --hoverBackgroundColor: --bck-msg-sent;
+    --hoverTextColor: --basic-blue;
+    --buttonFontSize: --button-in-msg-font-size;
 }
 
 
@@ -15,19 +14,19 @@ div {
     max-width: 300px;
     min-width: inherit;
     cursor: pointer;
-    border: 1px solid var(--blue);
+    border: 1px solid var(--textColor); //$blue
     border-radius: 20px;
     margin: 3px;
-    background: transparent;
+    background: var(--backgroundColor);
     overflow: hidden;
     font-family: 'Muli', sans-serif;
-    font-size: 15px;
+    font-size: var(--buttonFontSize);
     -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
     white-space: nowrap;
     letter-spacing: -0.24px;
     -webkit-font-smoothing: antialiased;
-    color: var(--blue);
+    color: var(--textColor); //$blue
     line-height: 16px;
 }
 
@@ -36,11 +35,11 @@ div {
     transition: background-color .6s ease;
     &:focus,
     &:hover {
-        color: white;
-        background: var(--blue);
+        color: var(--hoverTextColor);
+        background: var(--hoverBackgroundColor);
         .icon-button-action {
             svg {
-                fill: var(--black);
+                fill: --black;
             }
         }
     }

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

@@ -1,4 +1,4 @@
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output, SimpleChanges } from '@angular/core';
 
 
 @Component({
@@ -9,16 +9,37 @@ import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@ang
 export class TextButtonComponent implements OnInit {
 
   @Input() button: any;
-  @Input() themeColor: string;
-  @Input() foregroundColor: string;
+  @Input() isConversationArchived: boolean;
+  @Input() fontSize: string;
+  @Input() backgroundColor: string;
+  @Input() textColor: string;
+  @Input() hoverBackgroundColor: string;
+  @Input() hoverTextColor: string;
   @Output() onButtonClicked = new EventEmitter();
+
   public type: string = "text"
   constructor(private elementRef: ElementRef) { }
 
   ngOnInit() {
+  }
+
+  ngOnChanges(changes: SimpleChanges){
     //decomment if element should have same color of themeColor and fregroundColor
-    // this.elementRef.nativeElement.style.setProperty('--themeColor', this.themeColor);
-    // this.elementRef.nativeElement.style.setProperty('--foregroundColor', this.foregroundColor);
+    if(this.fontSize) this.elementRef.nativeElement.querySelector('.text').style.setProperty('--buttonFontSize', this.fontSize);
+    if(this.backgroundColor) this.elementRef.nativeElement.querySelector('.text').style.setProperty('--backgroundColor', this.backgroundColor);
+    if(this.textColor) this.elementRef.nativeElement.querySelector('.text').style.setProperty('--textColor', this.textColor);
+    if(this.hoverBackgroundColor) this.elementRef.nativeElement.querySelector('.text').style.setProperty('--hoverBackgroundColor', this.hoverBackgroundColor);
+    if(this.hoverTextColor) this.elementRef.nativeElement.querySelector('.text').style.setProperty('--hoverTextColor', this.hoverTextColor);
+  }
+
+  onMouseOver(event){
+    // if(this.backgroundColor) this.elementRef.nativeElement.querySelector('.text').style.background = this.textColor
+    // if(this.textColor) this.elementRef.nativeElement.querySelector('.text').style.color = this.backgroundColor
+  }
+
+  onMouseOut(event){
+    // this.elementRef.nativeElement.querySelector('.text').style.color = '';
+    // this.elementRef.nativeElement.querySelector('.text').style.background = ''
   }
 
   actionButtonText(){

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

@@ -1,3 +1,9 @@
-<div  [ngStyle] = "{ 'max-width': '100%', 'width': width, 'height': height + 'px' }">
-  <iframe  allowfullscreen width = "100%" height = "100%" style= "border:none; border-radius: 8px 8px 0 0 " [src]="url" ></iframe>
+<div  [ngStyle] = "{ 'max-width': '100%', 'width': width, 'height': height }">
+  <div *ngIf="loading" class="loader" [ngStyle] = "{ 'width': width , 'height': height  }"></div>
+  <iframe  allowfullscreen 
+    [ngClass]="{'isLoadingImage': loading}"
+    width = "100%" height = "100%" 
+    [src]="url" 
+    (load)="onLoaded($event)">
+  </iframe>
 </div>

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

@@ -0,0 +1,36 @@
+
+:host{
+    // --borderRadius: #{$border-radius-bubble-message};
+    --borderRadius: 8px 8px 0px 0px;
+}
+
+.loader {
+    float: left;
+    // position: absolute;
+    z-index: 1000;
+    // background-color: #ccc;
+    border-radius: var(--borderRadius);
+    background-image: linear-gradient(90deg, transparent 0px, #e8e8e8 40px, transparent 80px);
+    background-size: 600px;
+    animation: shine-loader 1.6s infinite linear;
+}
+
+.isLoadingImage {
+    // position: relative;
+    // top: 6px;
+    display: none;
+}
+
+iframe {
+    border:none; 
+    border-radius: var(--borderRadius)
+}
+
+@keyframes shine-loader {
+    0% {
+        background-position: -32px;
+    }
+    40%, 100% {
+        background-position: 208px;
+    }
+}

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

@@ -9,8 +9,8 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 export class FrameComponent implements OnInit {
 
   @Input() metadata: any;
-  @Input() width: string;
-  @Input() height: string;
+  @Input() width: number;
+  @Input() height: number;
   @Output() onElementRendered = new EventEmitter<{element: string, status: boolean}>();
   
   url: any;

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

@@ -1,4 +1,3 @@
-import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 import { Component, ElementRef, Input, OnInit, SimpleChange, SimpleChanges, ViewChild, ViewEncapsulation } from '@angular/core';
 
 @Component({

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

@@ -1,11 +1,12 @@
 <!-- [ngStyle]="{ 'max-width': width +'px', 'max-height': height +'px' }" style="position: relative; " -->
-<div [ngStyle]="{ 'max-width': width +'px', 'max-height': height +'px' }" class="c21-img-container">
+<div [ngStyle]="{'max-height': height +'px' }" class="c21-img-container">
   <div *ngIf="loading" class="loader" [ngStyle]="{ 'width': width , 'height': height  }"></div>
   <!-- [tooltip]="timeTooltipRight" [options]="tooltipOptions" placement="bottom" content-type="template"  -->
   <img id="myImg" 
     class="message-contentX message-content-imageX" 
     [ngClass]="{'isLoadingImage': loading}"
-    [ngStyle]="{ 'width': width , 'height': height }" 
+    [width]="width"
+    [height]="height"
     [src]="metadata.src" 
     (load)="onLoaded($event)" 
     (click)="openImageViewerModal(metadata.src, metadata.name)" />