@chat21/chat21-ionic 3.0.60-rc6 → 3.0.61-rc2

package/README.md

@@ -61,6 +61,8 @@ In progress git
         fileUploadAccept:"*/*",
         logLevel":"<YOUR-PREFERRED-LOG-LEVEL>",
         supportMode: false,
+        teammatesButton: false,
+        archivedButton: false,
         firebaseConfig: {
             tenant:"tilechat",
             apiKey: '123ABC..',

package/angular.json

@@ -41,6 +41,8 @@
               "src/chat-config-dev.json"
             ],
             "styles": [
+              "node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
+              "node_modules/roboto-fontface/css/roboto/roboto-fontface.css",
               {
                 "input": "src/theme/variables.scss"
               },

package/env.sample

@@ -3,7 +3,7 @@ DASHBOARD_URL=https://YOUR_DASHBOARD_URL
 WS_URL=wss://YOUR_TILEDESK_SERVER_URL?token=
 WS_URL_RELATIVE=********
 SERVER_BASE_URL=http://localhost:3000/
-
+FEATURES_TOKEN=CAR:F-PAY:F-ANA:F-ACT:F-APP:F
 CHAT21_ENGINE=mqtt
 UPLOAD_ENGINE=native
 PUSH_ENGINE=none
@@ -11,6 +11,8 @@ FILE_UPLOAD_ACCEPT=*/*
 TENANT=tilechat
 LOG_LEVEL=INFO
 SUPPORT_MODE=false
+TEAMMATES_BUTTON=false,
+ARCHIVED_BUTTON=false,
 
 # For MQTT Chat Engine
 MQTT_APPID=tilechat

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chat21/chat21-ionic",
-    "version": "3.0.60-rc6",
+    "version": "3.0.61-rc2",
     "author": "Tiledesk SRL",
     "homepage": "https://ionicframework.com/",
     "scripts": {
@@ -13,10 +13,13 @@
     },
     "private": false,
     "dependencies": {
+        "@angular/animations": "^8.2.14",
+        "@angular/cdk": "^8.2.3",
         "@angular/common": "~8.2.14",
         "@angular/core": "~8.2.14",
         "@angular/forms": "~8.2.14",
         "@angular/http": "^7.2.16",
+        "@angular/material": "^8.2.3",
         "@angular/platform-browser": "~8.2.14",
         "@angular/platform-browser-dynamic": "~8.2.14",
         "@angular/router": "~8.2.14",
@@ -59,6 +62,7 @@
         "ngx-logger": "^4.2.1",
         "ngx-perfect-scrollbar": "^9.0.0",
         "perfect-scrollbar": "^1.5.0",
+        "roboto-fontface": "^0.10.0",
         "rxjs": "~6.5.1",
         "tslib": "^1.9.0",
         "zone.js": "~0.9.1"

package/src/app/app.component.html

@@ -1,10 +1,19 @@
 <ion-app>
   <div>
-    <!-- (click)="hideAlert()" -->
+
     <app-image-viewer></app-image-viewer>
+
+    <div class="sidebar" [ngClass]="{'hide-sidebar': IS_ONLINE === false || IS_ON_MOBILE_DEVICE === true || SUPPORT_MODE === false}">
+      <app-sidebar></app-sidebar>
+    </div>
+    
+    <div class="user-details-sidebar" [ngClass]="{'hide-sidebar': IS_ONLINE === false || IS_ON_MOBILE_DEVICE === true || SUPPORT_MODE === false}">
+      <app-sidebar-user-details> </app-sidebar-user-details>
+    </div>
+ 
     <ion-split-pane when="md" contentId="main">
 
-      <ion-nav #sidebarNav [root]="sidebarPage"></ion-nav>
+      <ion-nav #sidebarNav [root]="sidebarPage" [ngClass]="{'sidebar-visible': IS_ONLINE === true && SUPPORT_MODE === true,  'sidebar-hidden': IS_ON_MOBILE_DEVICE === true || SUPPORT_MODE === false}"></ion-nav>
       <!--  our side menu  -->
       <!-- <ion-router-outlet id="sidebar" name='sidebar' animated="false" #masterNav> -->
       <!-- <app-conversations-list></app-conversations-list> -->

package/src/app/app.component.scss

@@ -1,8 +1,20 @@
-.split-pane-md.split-pane-visible > .split-pane-side { 
+.split-pane-md.split-pane-visible > .split-pane-side {
     min-width: 312px;
     display: block; // Safari bug fix
 }
 
+.sidebar-visible {
+    margin-left: 60px;
+}
+
+.sidebar-hidden {
+    margin-left: 0px;
+}
+
+.hide-sidebar {
+    display: none;
+}
+
 // @media (min-width: 768px) {
 //     .split-pane-md.split-pane-visible > .split-pane-side {
 //         min-width: 312px;

package/src/app/app.component.ts

@@ -58,6 +58,7 @@ import * as PACKAGE from 'package.json';
 import { filter } from 'rxjs/operators'
 import { WebSocketJs } from './services/websocket/websocket-js';
 import { Location } from '@angular/common'
+
 // import { filter } from 'rxjs/operators';
 
 @Component({
@@ -98,7 +99,9 @@ export class AppComponent implements OnInit {
   public missingConnectionToast: any
   public executedInitializeAppByWatchConnection: boolean = false;
   private version: string;
- 
+  IS_ONLINE: boolean;
+  IS_ON_MOBILE_DEVICE: boolean;
+  SUPPORT_MODE: boolean;
   // private isOnline: boolean = false;
 
   wsService: WebSocketJs;
@@ -145,11 +148,20 @@ export class AppComponent implements OnInit {
 
     this.saveInStorageNumberOfOpenedChatTab();
     this.listenChatAlreadyOpenWithoutParamsInMobileMode()
-
+    this.isOnMobileDevice()
     // this.listenToUrlChanges();
     // this.getPageState();
   }
 
+  isOnMobileDevice() {
+    this.IS_ON_MOBILE_DEVICE = false;
+    if (/Android|iPhone/i.test(window.navigator.userAgent)) {
+      this.IS_ON_MOBILE_DEVICE = true;
+    }
+    console.log('[APP-COMP] IS_ON_MOBILE_DEVICE', this.IS_ON_MOBILE_DEVICE)
+    return this.IS_ON_MOBILE_DEVICE;
+  }
+
 
 
   listenChatAlreadyOpenWithoutParamsInMobileMode() {
@@ -286,6 +298,13 @@ export class AppComponent implements OnInit {
    */
   ngOnInit() {
     const appconfig = this.appConfigProvider.getConfig();
+    console.log('[APP-COMP] appconfig', appconfig)
+    if (appconfig && appconfig.supportMode) {
+      this.SUPPORT_MODE = appconfig.supportMode
+      console.log('[APP-COMP] appconfig > SUPPORT_MODE', this.SUPPORT_MODE)
+    } else {
+      this.SUPPORT_MODE = false;
+    }
     this.persistence = appconfig.authPersistence;
     this.appStorageService.initialize(environment.storage_prefix, this.persistence, '')
     // this.logger.log('[APP-COMP] HELLO ngOnInit !!!!!!!')
@@ -416,9 +435,9 @@ export class AppComponent implements OnInit {
     // this.logger.log('[APP-COMP] - X - initializeApp !!! CALLED-BY: ', calledby);
     // console.log('[APP-COMP] appconfig platform is cordova: ', this.platform.is('cordova'))
 
-    // if (!this.platform.is('cordova')) {
-    this.splashScreen.show();
-    // }
+    if (!this.platform.is('cordova')) {
+      this.splashScreen.show();
+    }
     this.tabTitle = document.title;
 
     this.getRouteParamsAndSetLoggerConfig();
@@ -443,11 +462,11 @@ export class AppComponent implements OnInit {
       // console.log("Check platform");
       this.getPlatformName();
 
-      this.setLanguage();
+      // this.setLanguage();
 
-      // if (this.splashScreen) {
-      this.splashScreen.hide();
-      // }
+      if (this.splashScreen) {
+        this.splashScreen.hide();
+      }
       this.statusBar.styleDefault();
       this.navService.init(this.sidebarNav, this.detailNav);
       // this.persistence = appconfig.authPersistence;
@@ -521,19 +540,42 @@ export class AppComponent implements OnInit {
   }
 
   /** */
-  setLanguage() {
+  setLanguage(currentUser) {
+    // const currentUser = JSON.parse(this.appStorageService.getItem('currentUser'));
+    this.logger.log('[APP-COMP] - setLanguage current_user uid: ', currentUser);
+
+    let currentUserId = ''
+    if (currentUser) {
+      currentUserId = currentUser.uid;
+      this.logger.log('[APP-COMP] - setLanguage current_user uid: ', currentUserId);
+    }
     this.translate.setDefaultLang('en');
     this.translate.use('en');
-    this.logger.debug('[APP-COMP] navigator.language: ', navigator.language);
-    let language;
-    if (navigator.language.indexOf('-') !== -1) {
-      language = navigator.language.substring(0, navigator.language.indexOf('-'));
-    } else if (navigator.language.indexOf('_') !== -1) {
-      language = navigator.language.substring(0, navigator.language.indexOf('_'));
-    } else {
-      language = navigator.language;
+
+    const browserLang = this.translate.getBrowserLang();
+    this.logger.log('[APP-COMP] browserLang: ', browserLang);
+    const stored_preferred_lang = localStorage.getItem(currentUserId + '_lang');
+    this.logger.log('[APP-COMP] stored_preferred_lang: ', stored_preferred_lang);
+
+    let chat_lang = ''
+    if (browserLang && !stored_preferred_lang) {
+      chat_lang = browserLang
+    } else if (browserLang && stored_preferred_lang) {
+      chat_lang = stored_preferred_lang
     }
-    this.translate.use(language);
+
+    this.translate.use(chat_lang);
+
+    // this.logger.debug('[APP-COMP] navigator.language: ', navigator.language);
+    // let language;
+    // if (navigator.language.indexOf('-') !== -1) {
+    //   language = navigator.language.substring(0, navigator.language.indexOf('-'));
+    // } else if (navigator.language.indexOf('_') !== -1) {
+    //   language = navigator.language.substring(0, navigator.language.indexOf('_'));
+    // } else {
+    //   language = navigator.language;
+    // }
+    // this.translate.use(language);
   }
 
 
@@ -624,7 +666,7 @@ export class AppComponent implements OnInit {
       })
     } else {
       this.logger.warn('[APP-COMP] >>> I AM NOT LOGGED IN <<<')
-
+      this.IS_ONLINE = false;
       // clearTimeout(this.timeModalLogin);
       // this.timeModalLogin = setTimeout(() => {
       if (!this.hadBeenCalledOpenModal) {
@@ -802,15 +844,19 @@ export class AppComponent implements OnInit {
       .pipe(filter((state) => state !== null))
       .subscribe((state: any) => {
         this.logger.log('initialize FROM [APP-COMP] - [APP-COMP] ***** BSAuthStateChanged  state', state);
-     
+
         if (state && state === AUTH_STATE_ONLINE) {
           // const user = this.tiledeskAuthService.getCurrentUser();
           // if (this.isOnline === false) {
           // if (AUTH_STATE_ONLINE) {
+          this.IS_ONLINE = true;
+          console.log('[APP-COMP] IS_ONLINE', this.IS_ONLINE)
           this.goOnLine();
           // }
         } else if (state === AUTH_STATE_OFFLINE) {
           // this.checkTokenAndGoOffline() //se c'è un tiledeskToken salvato, allora aspetta, altrimenti vai offline
+          this.IS_ONLINE = false;
+          console.log('[APP-COMP] IS_ONLINE', this.IS_ONLINE)
           this.goOffLine()
         }
       }, error => {
@@ -868,6 +914,7 @@ export class AppComponent implements OnInit {
     // }
     this.events.publish('go:online', true);
     const currentUser = this.tiledeskAuthService.getCurrentUser();
+    this.setLanguage(currentUser);
     // this.logger.printDebug('APP-COMP - goOnLine****', currentUser);
     this.logger.log('[APP-COMP] - GO-ONLINE - currentUser ', currentUser);
     this.chatManager.setTiledeskToken(tiledeskToken);
@@ -907,7 +954,7 @@ export class AppComponent implements OnInit {
     const supportmode = this.appConfigProvider.getConfig().supportMode;
     this.logger.log('[APP-COMP] - GO-OFFINE - supportmode ', supportmode);
     if (supportmode === true) {
-        this.webSocketClose()
+      this.webSocketClose()
     }
     // this.isOnline = false;
     // this.conversationsHandlerService.conversations = [];
@@ -1088,7 +1135,7 @@ export class AppComponent implements OnInit {
   }
 
   private initConversationsHandler(userId: string) {
-    const keys = ['YOU'];
+    const keys = ['YOU', 'INFO_A_NEW_SUPPORT_REQUEST_HAS_BEEN_ASSIGNED_TO_YOU'];
     const translationMap = this.translateService.translateLanguage(keys);
 
     this.logger.log('[APP-COMP] initConversationsHandler ------------->', userId, this.tenant);

package/src/app/app.module.ts

@@ -90,13 +90,13 @@ import { ConversationInfoModule } from 'src/app/components/conversation-info/con
 
 
 // Directives
-import { TooltipModule } from 'ng2-tooltip-directive';
+
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 import { Network } from '@ionic-native/network/ngx';
 import { ConnectionService } from 'ng-connection-service';
 import { WebSocketJs } from './services/websocket/websocket-js';
 import { UnassignedConversationsPageModule } from './pages/unassigned-conversations/unassigned-conversations.module';
-
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 // FACTORIES
 export function createTranslateLoader(http: HttpClient) {
   return new TranslateHttpLoader(http, './assets/i18n/', '.json');
@@ -251,6 +251,7 @@ const appInitializerFn = (appConfig: AppConfigProvider, logger: NGXLogger) => {
   ],
   imports: [
     BrowserModule,
+    BrowserAnimationsModule,
     FormsModule,
     ReactiveFormsModule,
     IonicModule.forRoot(),

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

@@ -6,6 +6,7 @@ import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service
 import { isFile, isFrame, isImage } from 'src/chat21-core/utils/utils-message';
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 import { TranslateService } from '@ngx-translate/core';
+import { TiledeskAuthService } from 'src/chat21-core/providers/tiledesk/tiledesk-auth.service';
 import * as moment from 'moment';
 @Component({
   selector: 'chat-bubble-message',
@@ -36,53 +37,78 @@ export class BubbleMessageComponent implements OnInit, OnChanges {
   };
 
   private logger: LoggerService = LoggerInstance.getInstance()
+ 
   constructor(
     public sanitizer: DomSanitizer,
-    private translate: TranslateService) {
+    private translate: TranslateService,
+    public tiledeskAuthService: TiledeskAuthService
+    
+    ) {
     // console.log('BUBBLE-MSG Hello !!!!')
   }
 
   ngOnInit() {
+
+    this.setMomentLocale()
+    // this.browserLang = this.translate.getBrowserLang();
+  
+    // if (this.browserLang) {
+    //   if (this.browserLang === 'it') {
+
+
+    //     moment.locale('it', {
+    //       calendar: {
+    //         lastDay: '[Ieri alle] LT',
+    //         sameDay: '[Oggi alle] LT',
+    //         nextDay: '[Domani alle] LT',
+    //         lastWeek: '[Ultimo] dddd [alle] LT',
+    //         nextWeek: 'dddd [alle] LT',
+    //         sameElse: 'lll'
+    //       }
+    //     });
+
+    //   } else {
+    //     moment.locale('en', {
+    //       calendar: {
+    //         lastDay: '[Yesterday at] LT',
+    //         sameDay: '[Today at] LT',
+    //         nextDay: '[Tomorrow at] LT',
+    //         lastWeek: '[last] dddd [at] LT',
+    //         nextWeek: 'dddd [at] LT',
+    //         sameElse: 'lll'
+    //       }
+    //     });
+    //   }
+    // }
+
+  }
+
+
+  setMomentLocale() {
     this.browserLang = this.translate.getBrowserLang();
-    // console.log('BUBBLE-MSG ngOnInit browserLang ', this.browserLang)
-    if (this.browserLang) {
-      if (this.browserLang === 'it') {
-        // console.log('BUBBLE-MSG browserLang ', this.browserLang)
-        // moment.locale('it')
-
-        moment.locale('it', {
-          calendar: {
-            lastDay: '[Ieri alle] LT',
-            sameDay: '[Oggi alle] LT',
-            nextDay: '[Domani alle] LT',
-            lastWeek: '[Ultimo] dddd [alle] LT',
-            nextWeek: 'dddd [alle] LT',
-            sameElse: 'lll'
-          }
-        });
-
-      } else {
-        // console.log('BUBBLE-MSG browserLang ', this.browserLang)
-        // moment.locale('en')
-
-        moment.locale('en', {
-          calendar: {
-            lastDay: '[Yesterday at] LT',
-            sameDay: '[Today at] LT',
-            nextDay: '[Tomorrow at] LT',
-            lastWeek: '[last] dddd [at] LT',
-            nextWeek: 'dddd [at] LT',
-            sameElse: 'lll'
-          }
-        });
-      }
+    const currentUser = this.tiledeskAuthService.getCurrentUser();
+    this.logger.log('[BUBBLE-MESSAGE] - ngOnInit - currentUser ', currentUser)
+    let currentUserId = ''
+    if (currentUser) {
+      currentUserId = currentUser.uid
+      this.logger.log('[BUBBLE-MESSAGE] - ngOnInit - currentUserId ', currentUserId)
     }
 
+    const stored_preferred_lang = localStorage.getItem(currentUserId + '_lang');
+    this.logger.log('[BUBBLE-MESSAGE] stored_preferred_lang: ', stored_preferred_lang);
 
 
-    // const yesterday = moment().subtract(1, 'day')
-    // console.log('BUBBLE-MSG yesterday ', yesterday)
-
+    let chat_lang = ''
+    if (this.browserLang && !stored_preferred_lang) {
+      chat_lang = this.browserLang
+    } else if (this.browserLang && stored_preferred_lang) {
+      chat_lang = stored_preferred_lang
+    }
+    moment.locale(chat_lang , {
+      calendar: {
+        sameElse: 'LLLL'
+      }
+    });
   }
 
   ngOnChanges() {

package/src/app/chatlib/list-conversations-component/ion-list-conversations/ion-list-conversations.component.html

@@ -118,7 +118,7 @@
   <ion-note *ngIf="!conversation.archived" class="conversation_time">{{conversation.timestamp | amTimeAgo}}</ion-note>
 
   <ion-buttons slot="end">
-    <ion-button *ngIf="!conversation.archived"
+    <ion-button *ngIf="!conversation.archived"  tooltip="{{ archive_btn_tooltip }}" [options]="tooltipOptions" placement="bottom"
       [ngClass]="{'hide': !isApp, 'button-on-desktop': !isApp, 'button-on-mobile': isApp  }"
       id="{{ 'close_conversation_button' + conversation.uid }}" class="close-conversation-button" ion-button clear
       item-end (click)="closeConversation(conversation);$event.stopPropagation();" padding>
@@ -142,7 +142,7 @@
       {{browserLang === 'en' ? (conversation.timestamp | amDateFormat:'MMM DD YYYY') : (conversation.timestamp| amDateFormat:'DD MMM YYYY') }}
       <!-- {{conversation.timestamp | amDateFormat:'DD MMM YYYY'}} -->
     </span>
-    <i class="material-icons" item-end style="font-size: 15px;font-weight: 400;color: #666666;"> history </i>
+    <!-- <i class="material-icons" item-end style="font-size: 15px;font-weight: 400;color: #666666;"> history </i> -->
   </div>
 
   <!-- && !conversation?.archived -->

package/src/app/chatlib/list-conversations-component/ion-list-conversations/ion-list-conversations.component.ts

@@ -14,6 +14,7 @@ import * as moment from 'moment';
 import { NetworkService } from '../../../services/network-service/network.service';
 import { AppConfigProvider } from 'src/app/services/app-config';
 import { DomSanitizer } from '@angular/platform-browser'
+import { TiledeskAuthService } from 'src/chat21-core/providers/tiledesk/tiledesk-auth.service';
 // import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
 // import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 
@@ -32,9 +33,19 @@ export class IonListConversationsComponent extends ListConversationsComponent im
   public logger: LoggerService = LoggerInstance.getInstance();
   public currentYear: any;
   public browserLang: string;
- 
-  public PROJECT_FOR_PANEL: any;
 
+  public PROJECT_FOR_PANEL: any;
+  public archive_btn_tooltip: string;
+
+  tooltipOptions = {
+    'show-delay': 1500,
+    'tooltip-class': 'chat-tooltip',
+    'theme': 'light',
+    'shadow': false,
+    'hide-delay-mobile': 0,
+    'hideDelayAfterClick': 3000,
+    'hide-delay': 200
+  };
   /**
    * 
    * @param iterableDiffers 
@@ -51,21 +62,24 @@ export class IonListConversationsComponent extends ListConversationsComponent im
     private networkService: NetworkService,
     private appConfigProvider: AppConfigProvider,
     private sanitizer: DomSanitizer,
+    public tiledeskAuthService: TiledeskAuthService
   ) {
     super(iterableDiffers, kvDiffers)
-    this.browserLang = this.translate.getBrowserLang();
-    if (this.browserLang) {
+    this.setMomentLocale();
 
-      moment.locale(this.browserLang)
-      // if (this.browserLang === 'it') {
-      //   // this.translate.use('it');
-      //   moment.locale('it')
 
-      // } else {
-      //   // this.translate.use('en');
-      //   moment.locale('en')
-      // }
-    }
+    // if (this.browserLang) {
+
+    //   moment.locale(this.browserLang)
+    //   // if (this.browserLang === 'it') {
+    //   //   // this.translate.use('it');
+    //   //   moment.locale('it')
+
+    //   // } else {
+    //   //   // this.translate.use('en');
+    //   //   moment.locale('en')
+    //   // }
+    // }
 
     this.currentYear = moment().format('YYYY');
     this.logger.log('[ION-LIST-CONVS-COMP] - currentYear ', this.currentYear)
@@ -74,6 +88,42 @@ export class IonListConversationsComponent extends ListConversationsComponent im
 
     // console.log('[ION-LIST-CONVS-COMP] - DASHBOARD_BASE_URL ', DASHBOARD_BASE_URL)
     this.PROJECT_FOR_PANEL = this.sanitizer.bypassSecurityTrustResourceUrl(DASHBOARD_BASE_URL + '#/project-for-panel');
+    this.translateLbl();
+  }
+
+  translateLbl() {
+    this.translate.get('Resolve')
+      .subscribe((text: string) => {
+        // this.deleteContact_msg = text;
+        
+
+        this.archive_btn_tooltip = text;
+       console.log('[ION-LIST-CONVS-COMP] getTranslations Resolve : ', text)
+       
+      });
+  }
+
+  setMomentLocale() {
+    this.browserLang = this.translate.getBrowserLang();
+    const currentUser = this.tiledeskAuthService.getCurrentUser();
+    this.logger.log('[ION-LIST-CONVS-COMP] - ngOnInit - currentUser ', currentUser)
+    let currentUserId = ''
+    if (currentUser) {
+      currentUserId = currentUser.uid
+      this.logger.log('[ION-LIST-CONVS-COMP] - ngOnInit - currentUserId ', currentUserId)
+    }
+
+    const stored_preferred_lang = localStorage.getItem(currentUserId + '_lang');
+    this.logger.log('[ION-LIST-CONVS-COMP] stored_preferred_lang: ', stored_preferred_lang);
+
+
+    let chat_lang = ''
+    if (this.browserLang && !stored_preferred_lang) {
+      chat_lang = this.browserLang
+    } else if (this.browserLang && stored_preferred_lang) {
+      chat_lang = stored_preferred_lang
+    }
+    moment.locale(chat_lang)
   }
 
   ngOnInit() {
@@ -82,7 +132,7 @@ export class IonListConversationsComponent extends ListConversationsComponent im
     this.logger.log('[ION-LIST-CONVS-COMP] - ngOnInit - Platform', this.platform.platforms());
   }
 
- 
+
 
 
 

package/src/app/components/conversation-detail/header-conversation-detail/header-conversation-detail.component.html

@@ -1,8 +1,7 @@
 
 <ion-header no-border class="ion-no-border">
-  <ion-toolbar>
-    
-    <ion-buttons slot="start">
+  <ion-toolbar style="height:60px">
+    <ion-buttons slot="start" style="height:60px">
       <!-- (click)="pushPage('conversations-list')" defaultHref="/conversations-list" -->
       <ion-back-button style="display: block;" text="" *ngIf="isMobile" (click)="goBackToConversationList()">
       </ion-back-button> 

package/src/app/components/conversation-detail/message-text-area/message-text-area.component.html

@@ -39,7 +39,8 @@
     <ion-col col-auto>
 
       <div class="start-buttons" style="position: absolute;display: flex;"> 
-       
+      
+        <ng-container *ngIf="areVisibleCAR">
         <div class="canned-responses-btn-wpr" style="margin-left: -5px;" tooltip="{{translationMap?.get('CANNED_RESPONSES')}}" [options]="tooltipOptions"   placement="top">
           <ion-button ion-button fill="clear" class="canned-responses-btn" (click)="openCannedResponses()" [disabled]="!IS_SUPPORT_GROUP_CONVERSATION">
             <ion-icon slot="icon-only" lazy="true" name="flash-outline" style="font-size: 24px;"></ion-icon>
@@ -51,6 +52,8 @@
         <div *ngIf="IS_SUPPORT_GROUP_CONVERSATION  && tagsCannedCount > 0" tooltip="{{translationMap?.get('YES_CANNED_RESPONSES')}}" [options]="tooltipOptions"   placement="top" class="canned-responses-btn-badge">
           <ion-icon name="information-sharp" style="vertical-align: middle;"></ion-icon>
         </div>
+      </ng-container>
+
  
         <div class="upload-image-btn-wpr" tooltip="{{translationMap?.get('UPLOAD')}}" [options]="tooltipOptions"  placement="top">
           <ion-button ion-button fill="clear" class="upload-image-btn">
@@ -64,7 +67,7 @@
         </div>
       </div>
 
-      <div class="text-message">
+      <div class="text-message" [ngClass]="{'text-message-no-cr': areVisibleCAR === false}">
         <ion-textarea id="ion-textarea" #messageTextArea #message_text_area #textArea rows="1"
           [placeholder]="TEXAREA_PLACEHOLDER" autosize="false" auto-grow="true" autofocus="true" [value]=""
           [(ngModel)]="messageString" (ionChange)="ionChange($event);"

package/src/app/components/conversation-detail/message-text-area/message-text-area.component.scss

@@ -67,6 +67,10 @@
             font-size: 15px;
         }
     }
+    .text-message-no-cr {
+         margin: 0 35px !important;
+        width: calc(100% - 70px) !important;
+    }
 }
 
 #fileInput {

package/src/app/components/conversation-detail/message-text-area/message-text-area.component.ts

@@ -44,7 +44,7 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
   @Input() conversationWith: string;
   @Input() tagsCannedFilter: any = [];
   @Input() tagsCannedCount: number;
-
+  @Input() areVisibleCAR: boolean;
   @Input() events: Observable<void>;
   @Input() fileUploadAccept: string
   @Input() isOpenInfoConversation: boolean;
@@ -133,7 +133,7 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
 
     this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] ngOnChanges DROP EVENT ", this.dropEvent);
     this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] ngOnChanges tagsCannedFilter ", this.tagsCannedFilter);
-    // console.log("[CONVS-DETAIL][MSG-TEXT-AREA] ngOnChanges  tagsCannedCount ", this.tagsCannedCount);
+    this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] ngOnChanges areVisibleCAR; ", this.areVisibleCAR);
     
 
     this.logger.log('[CONVS-DETAIL] - returnChangeTextArea ngOnChanges in [MSG-TEXT-AREA]  this.tagsCannedFilter.length ', this.tagsCannedFilter.length)