@chat21/chat21-ionic 3.0.79-rc.4 → 3.0.79

package/CHANGELOG.md

@@ -1,63 +1,12 @@
 # chat21-ionic ver 3.0
 
-### 3.0.79-rc.4
-- bug-fixed: testsiteBaseUrl wrong value env property
-
-### 3.0.79-rc.3
-- added: segment analytics for SignIn-SignOut-Resolved-MsgAdded-ConvAdded
-- added: navbar component if not mobile
-- added: NAVBAR translations
-- changed: minor improvements on UI
-- changed: ion-split-pane UI if mobile
-- changed: moved hover 'add canned' button from bubble-message to ion-conversation-detail component
-- changed: moved addNewCanned to tiledesk service to canned-responses service
-- bug-fixed: open/close detail icon not aligned correctly on click 'close'
-
-### 3.0.79-rc.2
-- added: new sound if new conversation is triggered in agent's chat
-- changed: header UI of header-conversation-detail and unassigned-conversations components
-
-### 3.0.79-rc.1
-- added: LABEL_ONLINE, LABEL_OFFLINE translations
-- changed: renamed ddp-header with conversations-list-header
-- changed: unified control to mobile/desktop app
-- changed: LABEL_AVAILABLE/NOT_AVAILABLE with LABEL_ONLINE/OFFLINE in user-presence component	
-- changed: icon to user-presence
-- changed: UI for conversation-list, conversation-detail and info-group for desktop and mobile
-- changed: renamed option-header component with header-conversations-list-archived
-- changed: contacts-directory UI
-- bug-fixed: if app is opened and user press width expand, move correctly the right position
-
-## 3.0.78 in PROD 
-- bug-fixed: unassigned request not sound the if is the first at all
-- bug-fixed: canned responses opens in incorrect mode
+## 3.0.79 in PROD
+- added: segment analytics events
 
-### 3.0.78-rc.4
+## 3.0.78 in PROD
 - bug-fixed: unassigned request not sound the if is the first at all
-- bug-fixed: translations missed
-- bug-fixed: direct info not showed in conversation-header component
-- removed: conversation-footer border top
-- changed: colors to message-text-area icons and message-attachment components
-
-### 3.0.78-rc.3
-- changed: user-typing location moved from conversation-header to conversation-detail component
-- changed: replace includes with startsWith for check what type of conversation is in project info conversation-list component
-- added: styleMap integrations to some elements	
-- bug-fixed: no tooltip showed if no unserved request are present
-
-### 3.0.78-rc.2
-- changed: project item UI and tooltip msg
-- changed: conversation UI in conversations list component
-- changed: conversation detail header component
-- added: open/close info-conversation moved from conversation-header to conversation detail component
 - bug-fixed: canned responses opens in incorrect mode
 
-### 3.0.78-rc.1
-- changed: conversation-list page width increased
-- changed: background changed in info-message component
-- changed: project-item UI
-- changed: conversation-list page UI
-
 ## 3.0.77 in PROD
 
 ### 3.0.77-rc.3

package/README.md

@@ -100,8 +100,8 @@ Use [Docker Compose Tiledesk installation guide](https://github.com/Tiledesk/til
         },
         "apiUrl": "https://<YOUR-TILEDESK-API-URL>",
         "baseImageUrl": "https://<YOUR-BASE-IMAGE-URL>",
-        "dashboardUrl": "https://<YOUR-DASHBOARD-URL>"
-        "testsiteBaseUrl": "https:<YOUR-WIDGET-URL>/test_widget_page/index.html"
+        "dashboardUrl": "https://<YOUR-DASHBOARD-URL>",
+        "testsiteBaseUrl": "https:<YOUR-WIDGET-URL>/test_widget_page/index.html",
         "wsUrl": 'ws://' + window.location.hostname + '/ws/',
     }
   };

package/deploy_amazon_prod.sh

@@ -18,7 +18,7 @@ cp -p src/manifest.json platforms/browser/www/
 cp -p src/chat-config.json platforms/browser/www/
 
 cd platforms/browser/www
-# aws s3 sync . s3://tiledesk-console/v2/chat/ --cache-control max-age=172800
+aws s3 sync . s3://tiledesk-console/v2/chat/ --cache-control max-age=172800
 aws s3 sync . s3://tiledesk-console/v2/chat/$version/ --cache-control max-age=172800
 # aws s3 sync . s3://tiledesk-console/v2/chat/latest/ --cache-control max-age=172800
 cd ../../../

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@chat21/chat21-ionic",
     "author": "Tiledesk SRL",
-    "version": "3.0.79-rc.4",
+    "version": "3.0.79",
     "license": "MIT License",
     "homepage": "https://tiledesk.com/",
     "repository": {

package/src/app/app.component.html

@@ -5,12 +5,6 @@
 
     <app-network-offline></app-network-offline>
 
-
-    <app-navbar *ngIf="!IS_ON_MOBILE_DEVICE"
-      [isSoundEnabled]="isSoundEnabled"
-      (onSoundChange)="onSoundChange($event)">
-    </app-navbar>
-
     <div class="sidebar" [ngClass]="{'hide-sidebar': IS_ONLINE === false || IS_ON_MOBILE_DEVICE === true || SUPPORT_MODE === false}">
       <app-sidebar></app-sidebar>
     </div>
@@ -19,7 +13,7 @@
       <app-sidebar-user-details> </app-sidebar-user-details>
     </div>
  
-    <ion-split-pane when="md" contentId="main" [ngClass]="{'mobile': IS_ON_MOBILE_DEVICE}">
+    <ion-split-pane when="md" contentId="main">
       <!-- 'sidebar-visible': IS_ONLINE === true && SUPPORT_MODE === true, -->
       <ion-nav #sidebarNav [root]="sidebarPage" [ngClass]="{'sidebar-hidden': IS_ON_MOBILE_DEVICE === true || SUPPORT_MODE === false}"></ion-nav>
       <!--  our side menu  -->

package/src/app/app.component.scss

@@ -1,19 +1,7 @@
 .split-pane-md.split-pane-visible > .split-pane-side {
-    min-width: 360px; //312px;
+    min-width: 312px;
     display: block; // Safari bug fix
-    margin-left: var(--sidebar-width);
-    --border: 0px;
-}
-
-.split-pane-md:not(.mobile){
-    height: calc( 100% - var(--nav-bar-heigth));
-    margin-top: var(--nav-bar-heigth);
-}
-
-.navbar{
-    display: flex;
-    position: fixed;
-    top: 0px;
+    margin-left: 60px;
 }
 
 .sidebar-visible {
@@ -32,10 +20,6 @@
     left: 60px
 }
 
-// ion-nav {
-//     background-color: var(--list-bkg-color);
-// }
-
 // @media (min-width: 768px) {
 //     .split-pane-md.split-pane-visible > .split-pane-side {
 //         min-width: 312px;

package/src/app/app.component.ts

@@ -1,5 +1,5 @@
 import { TYPE_DIRECT, TYPE_SUPPORT_GROUP } from 'src/chat21-core/utils/constants';
-import { tranlatedLanguage, URL_SOUND_CONVERSATION_ADDED, URL_SOUND_LIST_CONVERSATION } from './../chat21-core/utils/constants';
+import { tranlatedLanguage, URL_SOUND_LIST_CONVERSATION } from './../chat21-core/utils/constants';
 import { ArchivedConversationsHandlerService } from 'src/chat21-core/providers/abstract/archivedconversations-handler.service';
 import { AppStorageService } from 'src/chat21-core/providers/abstract/app-storage.service';
 
@@ -87,13 +87,11 @@ export class AppComponent implements OnInit {
   public authModal: any;
 
   private audio: any;
-  private audio_NewConv: any;
   private setIntervalTime: any;
   private setTimeoutSound: any;
   private isTabVisible: boolean = true;
-  public isSoundEnabled: boolean;
+  private isSoundEnabled: boolean;
   private hasPlayed: boolean;
-  private hasPlayedConversation: boolean;
   private tabTitle: string;
   private setTimeoutConversationsEvent: any;
   private logger: LoggerService = LoggerInstance.getInstance();
@@ -833,10 +831,6 @@ export class AppComponent implements OnInit {
     this.audio.src = chatBaseUrl + URL_SOUND_LIST_CONVERSATION;
     this.audio.load();
 
-    this.audio_NewConv = new Audio();
-    this.audio_NewConv.src = chatBaseUrl + URL_SOUND_CONVERSATION_ADDED;
-    this.audio_NewConv.load();
-
     const sound_status = localStorage.getItem('dshbrd----sound')
     if(sound_status && sound_status !== 'undefined'){
       this.isSoundEnabled = sound_status === 'enabled'? true: false
@@ -846,14 +840,7 @@ export class AppComponent implements OnInit {
 
   }
 
-  onSoundChange(event){
-    if(event && event !== undefined){
-      localStorage.setItem('dshbrd----sound', event)
-      this.isSoundEnabled = event === 'enabled'? true: false
-    }
-  }
-
-  private manageTabNotification(sound_type: string, badgeNotificationCount?: number) {
+  private manageTabNotification(badgeNotificationCount?: number) {
     if (!this.isTabVisible) {
       // TAB IS HIDDEN --> manage title and SOUND
       let badgeNewConverstionNumber = badgeNotificationCount? badgeNotificationCount : this.conversationsHandlerService.countIsNew()
@@ -877,9 +864,7 @@ export class AppComponent implements OnInit {
       this.isSoundEnabled = sound_status === 'enabled'? true: false
     }
     this.logger.debug('[APP-COMP] manageTabNotification can saund?', this.isInitialized, this.isSoundEnabled)
-    if(this.isInitialized && this.isSoundEnabled) {
-      sound_type === 'conv_added'? this.soundConversationAdded(): this.soundMessage();
-    }
+    if(this.isInitialized && this.isSoundEnabled) this.soundMessage()
   }
 
   soundMessage() {
@@ -895,7 +880,7 @@ export class AppComponent implements OnInit {
     // }, 4000);
 
     //play sound every 4s from the fist time you receive a conversation added/changed
-    if(!this.hasPlayed && !this.hasPlayedConversation){
+    if(!this.hasPlayed){
       that.audio.play().then(() => {
         that.hasPlayed = true
         that.logger.debug('[APP-COMP] ****** soundMessage played *****');
@@ -907,22 +892,6 @@ export class AppComponent implements OnInit {
       });
     }
   }
-
-  soundConversationAdded(){
-    const that = this;
-    console.log('soundConversationAdded ENABLEDDDD-->', this.hasPlayed)
-    if(!this.hasPlayedConversation ){
-      that.audio_NewConv.play().then(() => {
-        that.hasPlayedConversation = true
-        that.logger.debug('[APP-COMP] ****** soundConversationAdded played *****');
-        setTimeout(() => {
-          that.hasPlayedConversation = false
-        }, 4000);
-      }).catch((error: any) => {
-        that.logger.error('[APP-COMP] ***soundConversationAdded error*', error);
-      });
-    }
-  }
   /**---------------- SOUND FUNCTIONS --> END <--- +*/
   /***************************************************+*/
 
@@ -974,7 +943,7 @@ export class AppComponent implements OnInit {
     this.conversationsHandlerService.conversationAdded.subscribe((conversation: ConversationModel) => {
       // this.logger.log('[APP-COMP] ***** subscribeConversationAdded *****', conversation);
       if (conversation && conversation.is_new === true) {
-        this.manageTabNotification('conv_added')
+        this.manageTabNotification()
       }
       if(conversation) this.updateConversationsOnStorage()
     });
@@ -992,7 +961,7 @@ export class AppComponent implements OnInit {
         this.logger.log('[APP-COMP] ***** subscribeConversationChangedDetailed currentUser: ', currentUser);
         if (changes.value && changes.value.sender !== currentUser.uid) {
           if(changes.value.is_new === changes.previousValue.is_new){
-            this.manageTabNotification('new_message');
+            this.manageTabNotification();
           }
         }
       }
@@ -1004,6 +973,7 @@ export class AppComponent implements OnInit {
         this.updateConversationsOnStorage();
         isDevMode()? null: this.segmentResolved(conversation)
       }
+
     });
   }
 
@@ -1048,7 +1018,8 @@ export class AppComponent implements OnInit {
 
       this.initConversationsHandler(currentUser.uid);
       this.initArchivedConversationsHandler(currentUser.uid);
-      isDevMode()? null: this.segmentSignIn(currentUser)
+      isDevMode()? null: this.segmentSignIn()
+
     }
     this.checkPlatform();
     try {
@@ -1070,8 +1041,6 @@ export class AppComponent implements OnInit {
     if (this.SUPPORT_MODE === true) {
       this.webSocketClose()
     }
-    const currentUser = this.tiledeskAuthService.getCurrentUser();
-    isDevMode()? null: this.segmentSignedOut(currentUser)
     // this.isOnline = false;
     // this.conversationsHandlerService.conversations = [];
     this.chatManager.setTiledeskToken(null);
@@ -1091,7 +1060,7 @@ export class AppComponent implements OnInit {
 
     // this.unsubscribe$.next();
     // this.unsubscribe$.complete();
-    
+
   }
 
   goToDashboardLogin(){
@@ -1152,13 +1121,14 @@ export class AppComponent implements OnInit {
   }
 
   subscribeProfileInfoButtonLogOut = (hasClickedLogout) => {
-    this.logger.log('[APP-COMP] FIREBASE-NOTIFICATION >>>>  subscribeProfileInfoButtonLogOut ');
+    this.logger.log('[APP-COMP] FIREBASE-NOTIFICATION >>>>  subscribeProfileInfoButtonLogOut');
     // if (hasClickedLogout === true) {
     //   this.removePresenceAndLogout()
     // }
 
 
     if (hasClickedLogout === true) {
+      isDevMode()? null: this.segmentSignedOut()
       this.appStorageService.removeItem('conversations')
       this.isInitialized = false;
       // ----------------------------------------------
@@ -1185,7 +1155,7 @@ export class AppComponent implements OnInit {
 
   subscribeUnservedRequestCount = (unservedRequestCount) => {
     if(unservedRequestCount && unservedRequestCount > 0){
-      this.logger.debug("appIsInitialized::::",this.isInitialized)
+      this.logger.debug("hasToSoundUnservedRequestCount::::", this.isInitialized)
       if(this.isInitialized){
         this.manageTabNotification(unservedRequestCount) //sound and alternate title
       }
@@ -1274,6 +1244,7 @@ export class AppComponent implements OnInit {
       that.logger.debug('[APP-COMP] updateConversationsOnStorage: reset timer and save conversations -> ', this.conversationsHandlerService.conversations.length)
       that.appStorageService.setItem('conversations', JSON.stringify(that.conversationsHandlerService.conversations))
       that.isInitialized = true;
+      this.events.publish('appComp:appIsInitialized', true)
     }, 10000);
   }
 
@@ -1298,7 +1269,8 @@ export class AppComponent implements OnInit {
     }
   }
 
-  segmentSignIn(user: UserModel){
+  private segmentSignIn(){
+    let user = this.tiledeskAuthService.getCurrentUser();
     try {
       window['analytics'].page("Chat Auth Page, Signin", {});
     } catch (err) {
@@ -1327,7 +1299,8 @@ export class AppComponent implements OnInit {
   }
 
 
-  segmentSignedOut(user: UserModel){
+  private segmentSignedOut(){
+    let user = this.tiledeskAuthService.getCurrentUser();
     try {
       window['analytics'].page("Chat Auth Page, Signed Out", {});
     } catch (err) {
@@ -1363,7 +1336,7 @@ export class AppComponent implements OnInit {
     }
   }
 
-  segmentResolved(conversation: ConversationModel){
+  private segmentResolved(conversation: ConversationModel){
     let user = this.tiledeskAuthService.getCurrentUser();
     try {
       window['analytics'].page("Chat List Conversations Page, Chat Resolved", {});
@@ -1389,9 +1362,8 @@ export class AppComponent implements OnInit {
         "conversation_id": conversation.uid,
         "channel_type": conversation.channel_type,
         "conversation_with":(conversation.channel_type !== TYPE_DIRECT)? null: conversation.conversation_with,
-        "conversation_with_fullname": (conversation.channel_type !== TYPE_DIRECT)? null: conversation.conversation_with_fullname,
         "department_name":(conversation.channel_type !== TYPE_DIRECT)? conversation.attributes.departmentName: null,
-        "department_id":(conversation.channel_type !== TYPE_DIRECT)? conversation.attributes.departmentId: null,
+        "department_id":(conversation.channel_type !== TYPE_DIRECT)? conversation.attributes.departmentId: null
       },
       { "context": {
           "groupId": (conversation.channel_type !== TYPE_DIRECT)? conversation.attributes.projectId: null
@@ -1401,17 +1373,18 @@ export class AppComponent implements OnInit {
       this.logger.error('Event:Chat Resolved [track] error', err);
     }
 
-    try {
-      window['analytics'].group(conversation.attributes.projectId, {
-        name: (conversation.attributes.project_name)? conversation.attributes.project_name : null,
-        // plan: projectProfileName,
-      });
-    } catch (err) {
-      this.logger.error('Event:Chat Resolved [group] error', err);
+    if(conversation.channel_type !== TYPE_DIRECT){
+      try {
+        window['analytics'].group(conversation.attributes.projectId, {
+          name: (conversation.attributes.project_name)? conversation.attributes.project_name : null,
+          // plan: projectProfileName,
+        });
+      } catch (err) {
+        this.logger.error('Event:Chat Resolved [group] error', err);
+      }
     }
   }
 
-
   @HostListener('document:visibilitychange', [])
   visibilitychange() {
     // this.logger.debug("document TITLE", document.hidden, document.title);
@@ -1475,26 +1448,5 @@ export class AppComponent implements OnInit {
       this.isSoundEnabled = event.newValue === 'enabled'? true: false
     }
   }
-
-
-  // @HostListener('mouseenter', ['$event']) 
-  // onMouseEnter(event: any) {
-  //   console.log('HostListener onMouseEnter-->', event)
-  // }
-
-  // @HostListener('mouseleave', ['$event']) 
-  // onMouseLeave(event: any) {
-  //   console.log('HostListener onMouseLeave-->', event)
-  // }
-
-  // @HostListener('focus', ['$event']) 
-  // onFocus(event: any) {
-  //   console.log('HostListener onFocus-->', event)
-  // }
-
-  // @HostListener('blur', ['$event']) 
-  // onBlur(event: any) {
-  //   console.log('HostListener onBlur-->', event)
-  // }
 }
 

package/src/app/app.module.ts

@@ -1,4 +1,3 @@
-import { ConvertRequestToConversation } from './../chat21-core/utils/convertRequestToConversation';
 import { LogLevel, PUSH_ENGINE_FIREBASE, PUSH_ENGINE_MQTT } from './../chat21-core/utils/constants';
 import { CustomLogger } from 'src/chat21-core/providers/logger/customLogger';
 import { NgModule, ErrorHandler, APP_INITIALIZER } from '@angular/core';
@@ -370,8 +369,7 @@ const appInitializerFn = (appConfig: AppConfigProvider, logger: NGXLogger) => {
     EventsService,
     Chooser,
     Chat21Service,
-    WebSocketJs,
-    ConvertRequestToConversation
+    WebSocketJs
   ]
 })
 export class AppModule { }

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

@@ -17,18 +17,11 @@ export class ConversationContentComponent implements OnInit {
   @Input() messages: MessageModel[]
   @Input() senderId: string;
   @Input() baseLocation: string;
-  @Input() isConversationArchived: boolean;
-  @Input() isTypings: boolean;
-  @Input() idUserTypingNow: string;
-  @Input() nameUserTypingNow: string;
-  @Input() typingLocation: string;
-  @Input() fullscreenMode: boolean;
   @Input() translationMap: Map<string, string>;
   @Input() stylesMap: Map<string, string>;
   @Output() onBeforeMessageRender = new EventEmitter();
   @Output() onAfterMessageRender = new EventEmitter();
-  @Output() onMenuOptionShow = new EventEmitter<boolean>();
-  @Output() onEmojiiPickerShow = new EventEmitter<boolean>()
+  @Output() onMenuOptionShow = new EventEmitter();
   @Output() onAttachmentButtonClicked = new EventEmitter();
   @Output() onScrollContent = new EventEmitter();
 

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,27 +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.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)">
@@ -123,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>
+    <!-- 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>
-    <!-- message RECIPIENT :: -->
+
+
     <div role="messaggio" *ngIf="messageType(MESSAGE_TYPE_OTHERS, message)" class="msg_container base_receive">
 
       <!-- <chat-avatar-image class="slide-in-left"  
@@ -140,36 +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.emoticon]="isEmojii(message?.text)"
-        [ngStyle]="{'background': stylesMap?.get('bubbleReceivedBackground'), 'color': stylesMap.get('bubbleReceivedTextColor')}"
         [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) && isSameSender(message?.sender, i)) || !isChannelTypeGroup(channelType)"> {{message.timestamp | date:'HH:mm' }} </div>
     </div>
 
     <!-- message type:: button &&  -->
@@ -187,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}} -->