@chat21/chat21-ionic 3.0.82-rc.7 → 3.0.83

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

@@ -52,19 +52,8 @@
 <!-- ----------------------------------------------------------- -->
 <!--  nk - no tag ionic -->
 <!-- ----------------------------------------------------------- -->
-<div class="manage_conversation_info_container" [ngClass]="{'close': !openInfoConversation, 'mobile': isMobile}">
-  <ion-button fill="clear" *ngIf="openInfoConversation" (click)="onOpenCloseInfoConversationFN()">
-    <ion-icon name="arrow-forward-outline"></ion-icon>
-    {{translationMap.get('LABEL_CLOSE_GROUP')}}
-  </ion-button>
-  <ion-button fill="clear" *ngIf="!openInfoConversation" (click)="onOpenCloseInfoConversationFN()">
-    <ion-icon name="arrow-back-outline"></ion-icon>
-    {{translationMap.get('LABEL_OPEN_INFO_CONVERSATION')}}
-  </ion-button>
-</div>
 
 <div class="conversation-wpr" style="height: 100%;">
-  
   <div *ngFor="let message of messages; let i = index; let first = first; trackBy: trackByFn">
 
     <ng-container *ngIf="first || (messages[i - 1].timestamp | date:'d') !== (message.timestamp | date:'d')">
@@ -88,28 +77,16 @@
     <!-- message SENDER:: -->
     <div role="messaggio" *ngIf="messageType(MESSAGE_TYPE_MINE, message)" class="msg_container base_sent">
 
-      <div class="message-date-hover"> {{message.timestamp | date:'HH:mm' }} </div>
-
-      <ng-container *ngIf="areVisibleCAR && supportMode">
-        <ion-button shape="round" size="small" class="btn-add-msg canned" ion-button fill="clear"
-          (click)="presentCreateCannedResponseModal(message)" [tooltip]="addAsCannedResponseTooltipText"
-          [options]="tooltipOptions" placement="bottom">
-          <ion-icon slot="icon-only" name="flash-outline" style="font-size: 1em;"> </ion-icon>
-          <span class="add-canned-response-add-icon">+</span>
-        </ion-button>
-      </ng-container>
-
       <!--backgroundColor non viene ancora usato -->
       <chat-bubble-message class="messages msg_sent" id="message_msg_sent" style="position: relative;" 
         [ngClass]="{'has-metadata': (isImage(message) || isFrame(message)), 'privateMsg': (message?.attributes && message?.attributes?.subtype === 'private')}" 
-        [class.no-background]="(isImage(message) || isFrame(message)) && message?.text.trim() === '' "  
         [class.emoticon]="isEmojii(message?.text)"
-        [ngStyle]="{'background': stylesMap.get('bubbleSentBackground'), 'color': stylesMap.get('bubbleSentTextColor')}"
         [ngClass]="{'button-in-msg' : message.metadata && message.metadata.button}"
         [message]="message" 
-        [fontColor]="stylesMap.get('bubbleSentTextColor')"
-        [fontSize]="stylesMap.get('fontSize')"
-        [fontFamily]="stylesMap.get('fontFamily')"
+        [textColor]="'col-msg-sent'"
+        [addAsCannedResponseTooltipText]="addAsCannedResponseTooltipText" 
+        [areVisibleCAR]="areVisibleCAR"
+        [supportMode]="supportMode"
         (onBeforeMessageRender)="onBeforeMessageRenderFN($event)"
         (onAfterMessageRender)="onAfterMessageRenderFN($event)" 
         (onElementRendered)="onElementRenderedFN($event)">
@@ -124,14 +101,13 @@
 
     </div>
 
-    <!-- message RECIPIENT + TIME :: -->
-    <!-- <div class="msg_container base_receive" *ngIf="messageType(MESSAGE_TYPE_OTHERS, message) && isChannelTypeGroup(channelType) && !isSameSender(message?.sender, i)">
-      <div role="messaggio" class="message_sender_fullname">
-        {{message.sender_fullname}}
-      </div>
-      <div class="message-date"> {{message.timestamp | date:'HH:mm' }} </div>
-    </div> -->
-    <!-- message RECIPIENT :: -->
+    <!-- message RECIPIENT:: -->
+    <div role="messaggio" *ngIf="messageType(MESSAGE_TYPE_OTHERS, message) && isChannelTypeGroup(channelType) && !isSameSender(message?.sender, i)"
+      class="message_sender_fullname">
+      {{message.sender_fullname}}
+    </div>
+
+
     <div role="messaggio" *ngIf="messageType(MESSAGE_TYPE_OTHERS, message)" class="msg_container base_receive">
 
       <!-- <chat-avatar-image class="slide-in-left"  
@@ -141,38 +117,19 @@
       </chat-avatar-image> -->
 
       <!--backgroundColor non viene ancora usato -->
-      <chat-bubble-message class="messages msg_receive" id="message_msg_receive"
+
+      <chat-bubble-message class="messages msg_receive" id="message_msg_receive" style="position: relative;"
         [ngClass]="{'has-metadata': (isImage(message) || isFrame(message)), 'privateMsg': (message?.attributes && message?.attributes?.subtype === 'private')}" 
-        [class.no-background]="(isImage(message) || isFrame(message)) && message?.text.trim() === '' "  
         [class.emoticon]="isEmojii(message?.text)"
-        [ngStyle]="{'background': stylesMap?.get('bubbleReceivedBackground'), 'color': stylesMap.get('bubbleReceivedTextColor')}"
-        [isSameSender]="isSameSender(message?.sender, i)"
         [message]="message" 
-        [fontColor]="stylesMap?.get('bubbleReceivedTextColor')"
-        [fontSize]="stylesMap?.get('fontSize')"
-        [fontFamily]="stylesMap?.get('fontFamily')"
+        [textColor]="'black'"
+        [addAsCannedResponseTooltipText]="addAsCannedResponseTooltipText" 
+        [areVisibleCAR]="areVisibleCAR"
+        [supportMode]="supportMode"
         (onBeforeMessageRender)="onBeforeMessageRenderFN($event)"
         (onAfterMessageRender)="onAfterMessageRenderFN($event)" 
         (onElementRendered)="onElementRenderedFN($event)">
       </chat-bubble-message>
-
-      <ng-container *ngIf="areVisibleCAR && supportMode">
-        <ion-button shape="round" size="small" class="btn-add-msg canned" ion-button fill="clear"
-          (click)="presentCreateCannedResponseModal(message)" [tooltip]="addAsCannedResponseTooltipText"
-          [options]="tooltipOptions" placement="bottom">
-          <ion-icon slot="icon-only" name="flash-outline" style="font-size: 1em;"> </ion-icon>
-          <span class="add-canned-response-add-icon">+</span>
-        </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 class="message-date-hover" *ngIf="isChannelTypeGroup(channelType)"> {{message.timestamp | date:'HH:mm' }} </div>
     </div>
 
     <!-- message type:: button &&  -->
@@ -190,26 +147,15 @@
 
   <!-- uploadProgress -> {{ uploadProgress }} -->
   <div *ngIf="uploadProgress !== 100" class="msg_container base_sent" style="margin-right: 20px;">
-    <div class="chat21-spinner active" id="chat21-spinner" style="margin: 0px 6px 0px;">
-      <div class="chat21-bounce1" [ngStyle]="{'background-color': stylesMap.get('themeColor')}"></div>
-      <div class="chat21-bounce2" [ngStyle]="{'background-color': stylesMap.get('themeColor'), 'opacity': 0.4}"></div>
-      <div class="chat21-bounce3" [ngStyle]="{'background-color': stylesMap.get('themeColor'), 'opacity': 0.6}"></div>
-      <!-- <span [ngStyle]="{'color': stylesMap.get('themeColor')}">{{translationMap.get('LABEL_LOADING')}}</span> -->
+    <div class="messages msg_sent">
+      <div class="spinner">
+        <div class="bounce1"></div>
+        <div class="bounce2"></div>
+        <div class="bounce3"></div>
+      </div>
     </div>
   </div>
 
-  <div *ngIf="isTypings" class="msg_container base_receive typing_container">
-    <!-- !isSameSender(idUserTypingNow, i) -->
-    <!-- <div *ngIf="nameUserTypingNow">{{nameUserTypingNow}}</div> -->
-    <user-typing
-      [themeColor]="stylesMap?.get('themeColor')"
-      [translationMap]="translationMap"
-      [idUserTypingNow]="idUserTypingNow"
-      [nameUserTypingNow]="nameUserTypingNow">
-    </user-typing>
-    <div class="typing_info" *ngIf="nameUserTypingNow"> {{nameUserTypingNow}} {{translationMap.get('LABEL_IS_WRITING')}}</div>
-  </div>
-
 </div>
 
 <!-- fileType > {{fileType }} uploadProgress {{uploadProgress}} -->

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

@@ -33,60 +33,6 @@
     }
 }
 
-.manage_conversation_info_container{
-    height: 34px;
-    display: flex;
-    -webkit-box-align: center;
-    align-items: center;
-    position: fixed;
-    transition: transform 300ms ease-in-out 0s;
-    transform: translate(0px);
-    right: 300px;
-    top: 60px;
-    z-index:10;
-    background: linear-gradient(to right, rgba(226, 232, 239, 0) 128px, rgb(226, 232, 239) 128px);
-    
-    &.close{
-        right: var(--padding-conversation-detail);
-        border-top-right-radius: var(--border-radius-content);
-        &:not(.mobile){
-            top: calc(60px + var(--padding-conversation-detail));
-        }
-    }
-
-    &.mobile{
-        right: 0px;
-    }
-    &:not(.mobile):not(.close){
-        right: calc(300px + var(--padding-conversation-detail));
-        top: calc(60px + var(--padding-conversation-detail));
-    }
-    &::before{
-        content: "";
-        width: 102px;
-        height: 34px;
-        background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjM0IiB2aWV3Qm94PSIwIDAgMTAyIDM0IiB3aWR0aD0iMTAyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPHBhdGggZD0ibTEwMiAwaC0xMDJsLjA3MTQwOC40MTk3NTNjMTEuMzE5MTkyLS4wMTU1NTggMjIuMjg4MTkyIDMuOTIwMzM3IDMxLjAxMjA5MiAxMS4xMjc2NDdsNy40ODk0IDYuNTAyIDEuNjUwOCAxLjQyMjkgNi42OTU1IDUuNzhjNi41Mzc0IDUuNjQwNSAxNC44ODU3IDguNzQ1MSAyMy41MjI3IDguNzQ3N2gzMS41NTQxeiIKICAgICAgICAgIGZpbGw9IiNlMmU4ZWYiLz4KPC9zdmc+);
-        position: relative;
-        left: 50px;
-        z-index: -1;
-    }
-
-    ion-button {
-        text-transform: unset;
-        color: var(--basic-blue);
-        &:hover {
-            --background-hover: transparent;
-            text-decoration: underline;
-            text-decoration-color: var(--basic-blue);
-        }
-    }
-
-    ion-icon{
-        margin: 5px;
-    }
-}
-
-
 ion-item {
     --padding-end: 0px;
     --inner-padding-end: 0px;
@@ -114,33 +60,12 @@ ion-item {
 
 .message_sender_fullname {
     font-size: 0.9em;
-    margin: 0px 10px 0px 10px;
+    margin: 0 0 1px 10px;
     // color: var(--gray);
     font-weight: 500;
     color: #080f1a;
 }
 
-.typing_container{
-    display:flex;
-    align-items: center;
-
-    user-typing {
-        text-align: right;
-    }
-    .typing_info{  
-        color: var(--basic-gray);
-        margin-left: 10px;
-        font-size: 12px;
-        animation: blinker 1s linear infinite;
-
-        @keyframes blinker {
-            50% {
-              opacity: 0;
-            }
-          }
-    }
-}
-
 .messages {
     border-radius: 18px;
     padding: 0;
@@ -157,17 +82,13 @@ ion-item {
     align-items: flex-end;
     justify-content: flex-end;
     // padding: 2px 0px 4px 40px;
-    padding: 0px 0px 6px 40px;
-
-    &:hover .message-date-hover, &:hover .btn-add-msg{
-        display: block;
-    }
-
+    padding: 2px 0px 14px 40px; // edited to display the date at the bottom of the "message bubble"
     .msg_sent {
         background-color: var(--bubble-blue);
         color: var(--col-msg-sent);
-        margin: 0px 0px 0px 0px;
-        max-width: calc(100% - 85px);
+        margin-right: 4px;
+        margin-left: 4px;
+        max-width: calc(100% - 70px);
         min-width: 14px;
         border-top-right-radius: 8px;
         border-bottom-right-radius: 0px;
@@ -177,9 +98,6 @@ ion-item {
             color: var(--bubble-privateMsgColor)
         }
     }
-    .no-background{
-        background: transparent!important;
-    }
     .emoticon {
         background: unset !important;
         font-size: 4em;
@@ -194,17 +112,8 @@ ion-item {
 
 /** recive message **/
 .base_receive {
-    padding: 0px 20px 6px 0px;
-    .message-date{
-        color: #647491;
-        font-size: 12px;
-        align-self: center;
-    }
-    
-
-    &:hover .message-date-hover, &:hover .btn-add-msg{
-        display: block;
-    }
+    // padding: 0px 0px 6px 0px;
+    padding: 0px 0px 15px 0px; // edited to display the date at the bottom of the "message bubble"
     /* avatar */
     .content-avatar {
         position: relative;
@@ -233,12 +142,12 @@ ion-item {
     }
     /* message */
     .msg_receive {
-        background-color: var(--bck-msg-received);
-        color: var(--col-msg-received);
+        background-color: var(--light-white);
+        color: #1a1a1a;
         // max-width: 260px;
-        max-width: calc(100% - 85px);
+        max-width: calc(100% - 70px);
         min-width: 14px;
-        margin: 0 0px 0px 10px;
+        margin: 0 20px 4px 10px;
         height: fit-content;
         width: auto;
         border-top-left-radius: 8px;
@@ -249,9 +158,7 @@ ion-item {
             color: var(--bubble-privateMsgColor)
         }
     }
-    .no-background{
-        background: transparent!important;
-    }
+
     .emoticon {
         background: unset !important;
         font-size: 4em;
@@ -260,93 +167,63 @@ ion-item {
     .has-metadata {
         max-width: 100% !important;
     }
-
 }
 
-.message-date-hover{
-    color: #647491;
-    font-size: 12px;
-    align-self: center;
-
-    display: none;
-    
+.time {
+    margin-bottom: 20px;
 }
 
-.btn-add-msg {
-    border-radius: 50%;
-    --padding-end: 5px;
-    --padding-start: 5px;
-    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.13);
-    display: none;
-    align-self: center;
-    margin: 0px 5px;
-
-    ion-icon{
-        font-size: 1.2em;
-        color: var(--basic-blue)
-    }
-
-    .add-canned-response-add-icon{
-        color: var(--basic-blue);
-        cursor: pointer;
-        position: relative;
-        top: 6px;
-        left: -6px;
-        font-size: 9px;
-    }
-}
-
- /* LOADING */
-/*http://tobiasahlin.com/spinkit/*/
-#chat21-spinner {
-    display: none;
-    width: 70px;
+// Loading Spinner
+.spinner {
+    // margin: 100px auto 0;
+    width: 90px;
     min-height: 20px;
-    margin: 20px auto 0;
+    padding: 7px;
     text-align: center;
 }
-#chat21-spinner.active {
-    display: block;
-}
-#chat21-spinner > div {
-    width: 12px;
-    height: 12px;
-    background-color: var(--bubble-blue);
+
+.spinner > div {
+    width: 10px;
+    height: 10px;
+    background-color: rgb(255, 255, 255);
+
     border-radius: 100%;
     display: inline-block;
     -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
     animation: sk-bouncedelay 1.4s infinite ease-in-out both;
 }
-#chat21-spinner .chat21-bounce1 {
+
+.spinner .bounce1 {
     -webkit-animation-delay: -0.32s;
     animation-delay: -0.32s;
 }
-#chat21-spinner .chat21-bounce2 {
+
+.spinner .bounce2 {
     -webkit-animation-delay: -0.16s;
     animation-delay: -0.16s;
 }
-#chat21-spinner span {
-    display: block;
-    margin: 0.5em 0 0 0;
-    color: var(--col-msg-sent);
-    /* text-transform: uppercase; */
-    font-family: 'Roboto', sans-serif;
-    -webkit-animation: pulse 2000ms linear infinite;
-    -moz-animation: pulse 2000ms linear infinite;
-    animation: pulse 2000ms linear infinite;
-    text-align: center;
-}
+
 @-webkit-keyframes sk-bouncedelay {
-    0%, 80%, 100% { -webkit-transform: scale(0) }
-    40% { -webkit-transform: scale(1.0) }
+    0%,
+    80%,
+    100% {
+        -webkit-transform: scale(0);
+    }
+    40% {
+        -webkit-transform: scale(1);
+    }
 }
+
 @keyframes sk-bouncedelay {
-    0%, 80%, 100% { 
-    -webkit-transform: scale(0);
-    transform: scale(0);
-    } 40% { 
-    -webkit-transform: scale(1.0);
-    transform: scale(1.0);
+    0%,
+    80%,
+    100% {
+        -webkit-transform: scale(0);
+        transform: scale(0);
+    }
+    40% {
+        -webkit-transform: scale(1);
+        transform: scale(1);
     }
 }
 
@@ -368,6 +245,28 @@ ion-item {
     // left: -26px;
 }
 
+:host .base_receive .msg_receive ::ng-deep div > div > div > ion-button.canned {
+    display: none;
+    position: absolute;
+    top: -3px;
+    right: -31px;
+}
+
+:host .base_receive .msg_receive ::ng-deep div > div > div >ion-button.emoji {
+    display: none;
+    position: absolute;
+    top: -3px;
+    right: -51px;
+}
+
+// :host .base_receive .msg_receive:hover ::ng-deep div > div > ion-button {
+:host .base_receive:hover .msg_receive ::ng-deep div > div > div > ion-button {
+    display: block;
+    // position: absolute;
+    // top: -11px;
+    // left: 91px;
+}
+
 // ---------------------------------------------------------
 // Long date divider
 // ---------------------------------------------------------
@@ -396,6 +295,24 @@ ion-item {
     color: #64748b;
 }
 
+// ---------------------------------------------------------
+// message date
+// ---------------------------------------------------------
+:host .base_sent .msg_sent ::ng-deep div > div > div > .message-date {
+    position: absolute;
+    bottom: -11px;
+    color: #64748b;
+    font-size: 10px;
+    right: 0px;
+}
+
+:host .base_receive .msg_receive ::ng-deep div > div > .message-date {
+    position: absolute;
+    bottom: -11px;
+    color: #64748b;
+    font-size: 10px;
+    left: 0px;
+}
 // ---------------------------------------------------------
 // emoticon
 // ---------------------------------------------------------

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

@@ -1,6 +1,5 @@
-import { MessageModel } from 'src/chat21-core/models/message';
 import { ConversationContentComponent } from '../conversation-content/conversation-content.component';
-import { ChangeDetectorRef, Component, Input, OnInit, Output, EventEmitter, SimpleChange, SimpleChanges } from '@angular/core';
+import { ChangeDetectorRef, Component, Input, OnInit, Output, EventEmitter } from '@angular/core';
 
 
 import { MESSAGE_TYPE_INFO, MESSAGE_TYPE_MINE, MESSAGE_TYPE_OTHERS } from 'src/chat21-core/utils/constants';
@@ -14,8 +13,6 @@ import { TiledeskAuthService } from 'src/chat21-core/providers/tiledesk/tiledesk
 import { TranslateService } from '@ngx-translate/core';
 import * as moment from 'moment';
 import { AppConfigProvider } from 'src/app/services/app-config';
-import { ModalController } from '@ionic/angular';
-import { CreateCannedResponsePage } from 'src/app/pages/create-canned-response/create-canned-response.page';
 @Component({
   selector: 'ion-conversation-detail',
   templateUrl: './ion-conversation-detail.component.html',
@@ -27,18 +24,14 @@ export class IonConversationDetailComponent extends ConversationContentComponent
   @Input() channelType: string;
   @Input() areVisibleCAR: boolean;
   @Input() supportMode: boolean;
-  @Input() isMobile: boolean;
-  @Input() openInfoConversation: boolean;
   @Output() onElementRendered = new EventEmitter<{element: string, status: boolean}>();
   @Output() onAddUploadingBubble = new EventEmitter<boolean>();
-  @Output() onOpenCloseInfoConversation = new EventEmitter<boolean>();
-  
+
   public public_Key: any
   public uploadProgress: number = 100
   public fileType: any
   public browserLang: string;
   public addAsCannedResponseTooltipText: string;
-  // public openInfoConversation: boolean = true;
   isImage = isImage;
   isFile = isFile;
   isFrame = isFrame;
@@ -65,7 +58,6 @@ export class IonConversationDetailComponent extends ConversationContentComponent
     public tiledeskAuthService: TiledeskAuthService,
     private translate: TranslateService,
     public appConfigProvider: AppConfigProvider,
-    public modalController: ModalController,
   ) {
     super(cdref, uploadService)
 
@@ -74,11 +66,6 @@ export class IonConversationDetailComponent extends ConversationContentComponent
   ngOnInit() {
     this.listenToUploadFileProgress();
     this.setMomentLocaleAndGetTranslation();
-    
-  }
-
-  ngOnChanges(changes: SimpleChanges){
-    this.isMobile? this.openInfoConversation = false: null;
   }
 
 
@@ -149,11 +136,6 @@ export class IonConversationDetailComponent extends ConversationContentComponent
     this.onElementRendered.emit(event)
   }
 
-  onOpenCloseInfoConversationFN(){
-    this.openInfoConversation = !this.openInfoConversation
-    this.onOpenCloseInfoConversation.emit(this.openInfoConversation)
-  }
-
   /**
    * Track by function for ngFor loops
    *
@@ -165,24 +147,4 @@ export class IonConversationDetailComponent extends ConversationContentComponent
     // console.log('[CONVS-DETAIL][ION-CONVS-DETAIL] - trackByFn item', item)
     return item.uid || index;
   }
-
-
-  async presentCreateCannedResponseModal(message: MessageModel): Promise<any> {
-    this.logger.log('[BUBBLE-MESSAGE] PRESENT CREATE CANNED RESPONSE MODAL ')
-    const attributes = {
-       message: 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()
-  }
 }

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

@@ -1,17 +1,12 @@
 <!-- [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 }}  -->
-<!-- '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 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">
 
 
   <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" />
@@ -34,8 +29,8 @@
     <!-- [height]="getMetadataSize(message.metadata).height"> -->
     <chat-frame *ngIf="isFrame(message)" 
       [metadata]="message.metadata" 
-      [width]="sizeImage?.width"
-      [height]="sizeImage?.width"
+      [width]="message.metadata.width"
+      [height]="message.metadata.height"
       (onElementRendered)="onElementRenderedFN($event)">
     </chat-frame>
 
@@ -48,10 +43,14 @@
 
     <!-- [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]="fontColor" 
+        [color]="textColor" 
         [message]="message"
         (onBeforeMessageRender)="returnOnBeforeMessageRender($event)"
         (onAfterMessageRender)="returnOnAfterMessageRender($event)">
@@ -61,6 +60,20 @@
         [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>