@chat21/chat21-ionic 3.0.79-rc.1 → 3.0.79-rc.3

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # chat21-ionic ver 3.0
 
+### 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

package/README.md

@@ -101,6 +101,7 @@ 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"
         "wsUrl": 'ws://' + window.location.hostname + '/ws/',
     }
   };

package/env.sample

@@ -1,5 +1,6 @@
 API_BASEIMAGE_URL=CHANGEIT
 DASHBOARD_URL=https://YOUR_DASHBOARD_URL
+WIDGET_TEST_LOCATION=https://YOUR_WIDGET_URL/index.html
 WS_URL=wss://YOUR_TILEDESK_SERVER_URL?token=
 WS_URL_RELATIVE=********
 SERVER_BASE_URL=http://localhost:3000/

package/package.json

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

package/src/app/app.component.html

@@ -5,6 +5,12 @@
 
     <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>
@@ -13,7 +19,7 @@
       <app-sidebar-user-details> </app-sidebar-user-details>
     </div>
  
-    <ion-split-pane when="md" contentId="main">
+    <ion-split-pane when="md" contentId="main" [ngClass]="{'mobile': IS_ON_MOBILE_DEVICE}">
       <!-- '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,10 +1,21 @@
 .split-pane-md.split-pane-visible > .split-pane-side {
     min-width: 360px; //312px;
     display: block; // Safari bug fix
-    margin-left: 60px;
+    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;
+}
+
 .sidebar-visible {
     margin-left: 60px;
 }
@@ -21,6 +32,10 @@
     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,8 +1,9 @@
-import { tranlatedLanguage, URL_SOUND_LIST_CONVERSATION } from './../chat21-core/utils/constants';
+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 { ArchivedConversationsHandlerService } from 'src/chat21-core/providers/abstract/archivedconversations-handler.service';
 import { AppStorageService } from 'src/chat21-core/providers/abstract/app-storage.service';
 
-import { Component, ViewChild, NgZone, OnInit, HostListener, ElementRef, Renderer2, AfterViewInit, } from '@angular/core';
+import { Component, ViewChild, NgZone, OnInit, HostListener, ElementRef, Renderer2, AfterViewInit, isDevMode} from '@angular/core';
 import { Config, Platform, IonRouterOutlet, IonSplitPane, NavController, MenuController, AlertController, IonNav, ToastController } from '@ionic/angular';
 import { ActivatedRoute, NavigationStart, Router } from '@angular/router';
 import { Subscription, VirtualTimeScheduler } from 'rxjs';
@@ -86,11 +87,13 @@ 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;
-  private isSoundEnabled: boolean;
+  public isSoundEnabled: boolean;
   private hasPlayed: boolean;
+  private hasPlayedConversation: boolean;
   private tabTitle: string;
   private setTimeoutConversationsEvent: any;
   private logger: LoggerService = LoggerInstance.getInstance();
@@ -316,7 +319,6 @@ export class AppComponent implements OnInit {
     // this.initializeApp('oninit');
     const token = getParameterByName('jwt')
     // this.logger.log('[APP-COMP] ngOnInit AUTOLOGIN token get with getParameterByName -->', token);
-
     if (token) {
       // this.isOnline = false;
       // this.logger.log('[APP-COMP] ngOnInit AUTOLOGIN token get with this.isOnline  ', this.isOnline)
@@ -831,6 +833,10 @@ 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
@@ -840,7 +846,14 @@ export class AppComponent implements OnInit {
 
   }
 
-  private manageTabNotification(badgeNotificationCount?: number) {
+  onSoundChange(event){
+    if(event && event !== undefined){
+      localStorage.setItem('dshbrd----sound', event)
+      this.isSoundEnabled = event === 'enabled'? true: false
+    }
+  }
+
+  private manageTabNotification(sound_type: string, badgeNotificationCount?: number) {
     if (!this.isTabVisible) {
       // TAB IS HIDDEN --> manage title and SOUND
       let badgeNewConverstionNumber = badgeNotificationCount? badgeNotificationCount : this.conversationsHandlerService.countIsNew()
@@ -864,7 +877,9 @@ 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) this.soundMessage()
+    if(this.isInitialized && this.isSoundEnabled) {
+      sound_type === 'conv_added'? this.soundConversationAdded(): this.soundMessage();
+    }
   }
 
   soundMessage() {
@@ -880,7 +895,7 @@ export class AppComponent implements OnInit {
     // }, 4000);
 
     //play sound every 4s from the fist time you receive a conversation added/changed
-    if(!this.hasPlayed){
+    if(!this.hasPlayed && !this.hasPlayedConversation){
       that.audio.play().then(() => {
         that.hasPlayed = true
         that.logger.debug('[APP-COMP] ****** soundMessage played *****');
@@ -892,6 +907,22 @@ 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 <--- +*/
   /***************************************************+*/
 
@@ -943,7 +974,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()
+        this.manageTabNotification('conv_added')
       }
       if(conversation) this.updateConversationsOnStorage()
     });
@@ -961,7 +992,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();
+            this.manageTabNotification('new_message');
           }
         }
       }
@@ -969,7 +1000,10 @@ export class AppComponent implements OnInit {
 
     this.conversationsHandlerService.conversationRemoved.subscribe((conversation: ConversationModel) => {
       this.logger.log('[APP-COMP] ***** conversationRemoved *****', conversation);
-      if(conversation)  this.updateConversationsOnStorage();
+      if(conversation) { 
+        this.updateConversationsOnStorage();
+        isDevMode()? null: this.segmentResolved(conversation)
+      }
     });
   }
 
@@ -1014,6 +1048,7 @@ export class AppComponent implements OnInit {
 
       this.initConversationsHandler(currentUser.uid);
       this.initArchivedConversationsHandler(currentUser.uid);
+      isDevMode()? null: this.segmentSignIn(currentUser)
     }
     this.checkPlatform();
     try {
@@ -1035,6 +1070,8 @@ 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);
@@ -1054,7 +1091,7 @@ export class AppComponent implements OnInit {
 
     // this.unsubscribe$.next();
     // this.unsubscribe$.complete();
-
+    
   }
 
   goToDashboardLogin(){
@@ -1261,6 +1298,119 @@ export class AppComponent implements OnInit {
     }
   }
 
+  segmentSignIn(user: UserModel){
+    try {
+      window['analytics'].page("Chat Auth Page, Signin", {});
+    } catch (err) {
+      this.logger.error('Event:Signed In [page] error', err);
+    }
+
+    try {
+      window['analytics'].identify(user.uid, {
+        name: user.firstname + ' ' + user.lastname,
+        email: user.email,
+        logins: 5,
+
+      });
+    } catch (err) {
+      this.logger.error('Event:Signed In [identify] error', err);
+    }
+    // Segments
+    try {
+      window['analytics'].track('Signed In', {
+        "username": user.firstname + ' ' + user.lastname,
+        "userId": user.uid
+      });
+    } catch (err) {
+      this.logger.error('Event:Signed In [track] error', err);
+    }
+  }
+
+
+  segmentSignedOut(user: UserModel){
+    try {
+      window['analytics'].page("Chat Auth Page, Signed Out", {});
+    } catch (err) {
+      this.logger.error('Event:Signed Out [page] error', err);
+    }
+
+    try {
+      window['analytics'].identify(user.uid, {
+        name: user.firstname + ' ' + user.lastname,
+        email: user.email,
+        logins: 5,
+
+      });
+    } catch (err) {
+      this.logger.error('Event:Signed Out [identify] error', err);
+    }
+
+    try {
+      window['analytics'].track('Signed Out', {
+        "username": user.firstname + ' ' + user.lastname,
+        "userId": user.uid
+      });
+    } catch (err) {
+      this.logger.error('Event:Signed Out [track] error', err);
+    }
+
+    try {
+      // setTimeout(() => {
+      window['analytics'].reset()
+      // }, 0);
+    } catch (err) {
+      this.logger.error('Event:reset error', err);
+    }
+  }
+
+  segmentResolved(conversation: ConversationModel){
+    let user = this.tiledeskAuthService.getCurrentUser();
+    try {
+      window['analytics'].page("Chat List Conversations Page, Chat Resolved", {});
+    } catch (err) {
+      this.logger.error('Event:Chat Resolved [page] error', err);
+    }
+
+    try {
+      window['analytics'].identify(user.uid, {
+        name: user.firstname + ' ' + user.lastname,
+        email: user.email,
+        logins: 5,
+
+      });
+    } catch (err) {
+      this.logger.error('Event:Chat Resolved [identify] error', err);
+    }
+
+    try {
+      window['analytics'].track('Chat Resolved', {
+        "username": user.firstname + ' ' + user.lastname,
+        "userId": user.uid,
+        "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,
+      },
+      { "context": {
+          "groupId": (conversation.channel_type !== TYPE_DIRECT)? conversation.attributes.projectId: null
+        }
+      });
+    } catch (err) {
+      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);
+    }
+  }
+
 
   @HostListener('document:visibilitychange', [])
   visibilitychange() {
@@ -1325,5 +1475,26 @@ 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,3 +1,4 @@
+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';
@@ -369,7 +370,8 @@ const appInitializerFn = (appConfig: AppConfigProvider, logger: NGXLogger) => {
     EventsService,
     Chooser,
     Chat21Service,
-    WebSocketJs
+    WebSocketJs,
+    ConvertRequestToConversation
   ]
 })
 export class AppModule { }

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

@@ -88,6 +88,17 @@
     <!-- 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')}" 
@@ -98,9 +109,6 @@
         [fontColor]="stylesMap.get('bubbleSentTextColor')"
         [fontSize]="stylesMap.get('fontSize')"
         [fontFamily]="stylesMap.get('fontFamily')"
-        [addAsCannedResponseTooltipText]="addAsCannedResponseTooltipText" 
-        [areVisibleCAR]="areVisibleCAR"
-        [supportMode]="supportMode"
         (onBeforeMessageRender)="onBeforeMessageRenderFN($event)"
         (onAfterMessageRender)="onAfterMessageRenderFN($event)" 
         (onElementRendered)="onElementRenderedFN($event)">
@@ -115,11 +123,14 @@
 
     </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}}
+    <!-- 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 :: -->
     <div role="messaggio" *ngIf="messageType(MESSAGE_TYPE_OTHERS, message)" class="msg_container base_receive">
 
       <!-- <chat-avatar-image class="slide-in-left"  
@@ -129,8 +140,7 @@
       </chat-avatar-image> -->
 
       <!--backgroundColor non viene ancora usato -->
-
-      <chat-bubble-message class="messages msg_receive" id="message_msg_receive" style="position: relative;"
+      <chat-bubble-message class="messages msg_receive" id="message_msg_receive"
         [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')}"
@@ -138,13 +148,28 @@
         [fontColor]="stylesMap?.get('bubbleReceivedTextColor')"
         [fontSize]="stylesMap?.get('fontSize')"
         [fontFamily]="stylesMap?.get('fontFamily')"
-        [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 &&  -->

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

@@ -48,12 +48,15 @@
     
     &.close{
         right: 0px;
+        &:not(.mobile){
+            top: calc(60px + var(--padding-conversation-detail));
+        }
     }
 
     &.mobile{
         right: 0px;
     }
-    &:not(.mobile){
+    &:not(.mobile):not(.close){
         right: calc(300px + var(--padding-conversation-detail));
         top: calc(60px + var(--padding-conversation-detail));
     }
@@ -110,7 +113,7 @@ ion-item {
 
 .message_sender_fullname {
     font-size: 0.9em;
-    margin: 0 0 1px 20px;
+    margin: 0px 10px 0px 10px;
     // color: var(--gray);
     font-weight: 500;
     color: #080f1a;
@@ -153,12 +156,16 @@ ion-item {
     align-items: flex-end;
     justify-content: flex-end;
     // padding: 2px 0px 4px 40px;
-    padding: 2px 0px 14px 40px; // edited to display the date at the bottom of the "message bubble"
+    padding: 0px 0px 6px 40px;
+
+    &:hover .message-date-hover, &:hover .btn-add-msg{
+        display: block;
+    }
+
     .msg_sent {
         background-color: var(--bubble-blue);
         color: var(--col-msg-sent);
-        margin-right: 4px;
-        margin-left: 4px;
+        margin: 0px 0px 0px 0px;
         max-width: calc(100% - 70px);
         min-width: 14px;
         border-top-right-radius: 8px;
@@ -183,8 +190,17 @@ ion-item {
 
 /** recive message **/
 .base_receive {
-    // padding: 0px 0px 6px 0px;
-    padding: 0px 0px 15px 10px; // edited to display the date at the bottom of the "message bubble"
+    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;
+    }
     /* avatar */
     .content-avatar {
         position: relative;
@@ -218,7 +234,7 @@ ion-item {
         // max-width: 260px;
         max-width: calc(100% - 70px);
         min-width: 14px;
-        margin: 0 20px 4px 10px;
+        margin: 0 0px 0px 10px;
         height: fit-content;
         width: auto;
         border-top-left-radius: 8px;
@@ -241,8 +257,37 @@ ion-item {
 
 }
 
-.time {
-    margin-bottom: 20px;
+.message-date-hover{
+    color: #647491;
+    font-size: 12px;
+    align-self: center;
+
+    display: none;
+    
+}
+
+.btn-add-msg {
+    border-radius: 50%;
+    --padding-end: 7px;
+    --padding-start: 7px;
+    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 */
@@ -317,28 +362,6 @@ 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
 // ---------------------------------------------------------
@@ -367,24 +390,6 @@ 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
 // ---------------------------------------------------------