@chat21/chat21-ionic 3.0.60-rc2 → 3.0.60

package/deploy_pre.sh

@@ -24,21 +24,60 @@ sed -i -e "s/$URL_VER/g" src/utils/constants.ts
 
 # ng build --prod --base-href /$NEW_BUILD/
 #ionic cordova build browser --prod
-
-ionic cordova platform add browser --save
 #ionic cordova build browser --prod --release
-ionic cordova build --env=pre browser #--prod  --verbose
+# ionic cordova build --env=pre browser --prod  #--verbose
 
+ionic cordova platform add browser --save
+ionic cordova build -c=pre  browser --prod
 cp -p src/firebase-messaging-sw.js platforms/browser/www/
 cp -p src/manifest.json platforms/browser/www/
 cp -p src/chat-config.json platforms/browser/www/
-
+cp config.xml platforms/browser/www/
+ 
+######### chat-ionic5 - the good one - publish in pre
 cd platforms/browser/www
 aws s3 sync . s3://tiledesk-dashboard-pre/chat-ionic5/$version/
 aws s3 sync . s3://tiledesk-dashboard-pre/chat-ionic5/
 cd ../../../
 
-#aws cloudfront create-invalidation --distribution-id E2DTAKWHWQ7C3J --paths "/*"
+aws cloudfront create-invalidation --distribution-id E2DTAKWHWQ7C3J --paths "/*"
 
 echo new version deployed on s3://tiledesk-dashboard-pre/chat-ionic5/$version/
-echo available on https://s3.eu-west-1.amazonaws.com/tiledesk-dashboard-pre/chat-ionic5/$version/index.html
+echo available on https://s3.eu-west-1.amazonaws.com/tiledesk-dashboard-pre/chat-ionic5/$version/index.html
+echo available on https://support-pre.tiledesk.com/chat-ionic5/$version/index.html
+echo available on https://support-pre.tiledesk.com/chat-ionic5/index.html
+
+######### chat-ionic5-test - publish in pre with the projects right panel 
+# cd platforms/browser/www
+# aws s3 sync . s3://tiledesk-dashboard-pre/chat-ionic5-test/$version/
+# aws s3 sync . s3://tiledesk-dashboard-pre/chat-ionic5-test/
+# cd ../../../
+
+# aws cloudfront create-invalidation --distribution-id E2DTAKWHWQ7C3J --paths "/*"
+
+# echo new version deployed on s3://tiledesk-dashboard-pre/chat-ionic5-test/$version/
+# echo available on https://s3.eu-west-1.amazonaws.com/tiledesk-dashboard-pre/chat-ionic5-test/$version/index.html
+# echo available on https://support-pre.tiledesk.com/chat-ionic5-test/$version/index.html
+# echo available on https://support-pre.tiledesk.com/chat-ionic5-test/index.html
+
+
+####### chat ionic MQTT in pre da aggiungere in deploy_pre.sh
+# cd platforms/browser/www
+# aws s3 sync . s3://tiledesk-dashboard-pre/native-mqtt/chat-ionic5/
+# aws s3 sync . s3://tiledesk-dashboard-pre/native-mqtt/chat-ionic5/$version
+# cd ../../../
+# echo new version deployed on s3://tiledesk-dashboard-pre/native-mqtt/chat-ionic5/
+# echo new version deployed on s3://tiledesk-dashboard-pre/native-mqtt/chat-ionic5/$version
+# echo http://tiledesk-dashboard-pre.s3-eu-west-1.amazonaws.com/native-mqtt/chat-ionic5/index.html
+# echo http://tiledesk-dashboard-pre.s3-eu-west-1.amazonaws.com/native-mqtt/chat-ionic5/$version/index.html
+
+
+####### chat ionic FIREBASE in pre da aggiungere in deploy_pre.sh
+# cd platforms/browser/www
+# aws s3 sync . s3://tiledesk-dashboard-pre/chat5/
+# aws s3 sync . s3://tiledesk-dashboard-pre/chat5/$version
+# cd ../../../
+# echo new version deployed on s3://tiledesk-dashboard-pre/chat5/$version
+# echo new version deployed on s3://tiledesk-dashboard-pre/chat5/
+# echo available on http://support-pre.tiledesk.com/chat5/index.html
+# echo available on http://support-pre.tiledesk.com/chat5/$version/index.html

package/deploy_prod.sh

@@ -1,4 +1,4 @@
-npm version patch
+# npm version patch
 version=`node -e 'console.log(require("./package.json").version)'`
 echo "version $version"
 
@@ -12,22 +12,47 @@ echo 'URL_VER: ---->'$URL_VER
 #     npm publish
 # fi
 
-# sed -i -e "s/$start$ver.$build/$start$NEW_VER.$NEW_BUILD/g" src/utils/constants.ts
 sed -i -e "s/$URL_VER/g" src/utils/constants.ts
+
 ionic cordova platform add browser --save
 #ionic cordova build --env=prod browser  -- --base-href /www/ --prod
 ionic cordova build --env=prod browser --prod 
 cp -p src/firebase-messaging-sw.js platforms/browser/www/
 cp -p src/manifest.json platforms/browser/www/
 cp -p src/chat-config.json platforms/browser/www/
+cp -p config.xml platforms/browser/www/
+
 
+###### CHAT in prod
 cd platforms/browser/www
-#aws s3 sync . s3://tiledesk-dashboard/chat/
-aws s3 sync . s3://tiledesk-console/v2/chat-ionic5/
-aws s3 sync . s3://tiledesk-console/v2/chat-ionic5/$version/
+aws s3 sync . s3://tiledesk-console/v2/chat/
+aws s3 sync . s3://tiledesk-console/v2/chat/$version/
 cd ../../../
-# aws cloudfront create-invalidation --distribution-id E2DTAKWHWQ7C3J --paths "/*"
+echo new version deployed on s3://tiledesk-console/v2/chat/
+echo available on https://console.tiledesk.com/v2/chat/$version/index.html
+echo available on https://console.tiledesk.com/v2/chat/index.html
+
+
+###### CHAT-IONIC5
+# cd platforms/browser/www
+# #aws s3 sync . s3://tiledesk-dashboard/chat/
+# aws s3 sync . s3://tiledesk-console/v2/chat-ionic5/
+# aws s3 sync . s3://tiledesk-console/v2/chat-ionic5/$version/
+# cd ../../../
+# # aws cloudfront create-invalidation --distribution-id E2DTAKWHWQ7C3J --paths "/*"
+
+# # echo new version deployed on s3://tiledesk-dashboard/chat/$NEW_BUILD/
+# echo new version deployed on s3://tiledesk-console/v2/chat-ionic5/$version/
+# echo available on https://console.tiledesk.com/v2/chat-ionic5/$version/index.html
+
+
 
-# echo new version deployed on s3://tiledesk-dashboard/chat/$NEW_BUILD/
-echo new version deployed on s3://tiledesk-console/v2/chat-ionic5/$version/
-echo available on https://console.tiledesk.com/v2/chat-ionic5/$version/index.html
+####### chat ionic FIREBASE in PROD IN SUBFOLDER 
+# cd platforms/browser/www
+# aws s3 sync . s3://tiledesk-console/v2/chat5-dev/
+# aws s3 sync . s3://tiledesk-console/v2/chat5-dev/$version
+# cd ../../../
+# echo new version deployed on s3://console.tiledesk.com/v2/chat5-dev/$version
+# echo new version deployed on s3://console.tiledesk.com/v2/chat5-dev/
+# echo available on http://console.tiledesk.com/v2/chat5-dev/index.html
+# echo available on http://console.tiledesk.com/v2/chat5-dev/$version/index.html

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
 CHAT21_ENGINE=mqtt
 UPLOAD_ENGINE=native
 PUSH_ENGINE=none

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chat21/chat21-ionic",
-    "version": "3.0.60-rc2",
+    "version": "3.0.60",
     "author": "Tiledesk SRL",
     "homepage": "https://ionicframework.com/",
     "scripts": {

package/src/app/app.component.ts

@@ -98,7 +98,7 @@ export class AppComponent implements OnInit {
   public missingConnectionToast: any
   public executedInitializeAppByWatchConnection: boolean = false;
   private version: string;
- 
+
   // private isOnline: boolean = false;
 
   wsService: WebSocketJs;
@@ -416,9 +416,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 +443,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 +521,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);
   }
 
 
@@ -802,7 +825,7 @@ 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) {
@@ -868,6 +891,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 +931,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 +1112,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,7 +90,7 @@ 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';
@@ -114,7 +114,7 @@ export function authenticationFactory(http: HttpClient, appConfig: AppConfigProv
 
     auth.setBaseUrl(appConfig.getConfig().apiUrl);
 
-    if (config.pushEngine = PUSH_ENGINE_MQTT) {
+    if (config.pushEngine === PUSH_ENGINE_MQTT) {
       // FOR PUSH NOTIFICATIONS INIT FIREBASE APP
       FirebaseInitService.initFirebase(config.firebaseConfig);
     }

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.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,7 +33,7 @@ export class IonListConversationsComponent extends ListConversationsComponent im
   public logger: LoggerService = LoggerInstance.getInstance();
   public currentYear: any;
   public browserLang: string;
- 
+
   public PROJECT_FOR_PANEL: any;
 
   /**
@@ -51,19 +52,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) {
-      if (this.browserLang === 'it') {
-        // this.translate.use('it');
-        moment.locale('it')
-
-      } else {
-        // this.translate.use('en');
-        moment.locale('en')
-      }
-    }
+    this.setMomentLocale();
+
+
+    // 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,13 +80,36 @@ export class IonListConversationsComponent extends ListConversationsComponent im
     this.PROJECT_FOR_PANEL = this.sanitizer.bypassSecurityTrustResourceUrl(DASHBOARD_BASE_URL + '#/project-for-panel');
   }
 
+  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() {
     this.isApp = this.platform.is('ios') || this.platform.is('android')
     this.logger.log('[ION-LIST-CONVS-COMP] - ngOnInit - IS-APP ', this.isApp)
     this.logger.log('[ION-LIST-CONVS-COMP] - ngOnInit - Platform', this.platform.platforms());
   }
 
- 
+
 
 
 

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

@@ -39,16 +39,23 @@
     <ion-col col-auto>
 
       <div class="start-buttons" style="position: absolute;display: flex;"> 
-
-        <div class="canned-responses-btn-wpr" style="margin-left: -5px;" tooltip="{{translationMap?.get('CANNED_RESPONSES')}}" [options]="tooltipOptions" placement="top">
-          
+      
+        <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>
           </ion-button>
-       
         </div>
+        <div *ngIf="IS_SUPPORT_GROUP_CONVERSATION  && tagsCannedCount === 0" tooltip="{{translationMap?.get('NO_CANNED_RESPONSES')}}" [options]="tooltipOptions"   placement="top" class="no-canned-responses-btn-badge">
+          <ion-icon name="alert-sharp" style="vertical-align: middle;"></ion-icon>
+        </div>
+        <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">
+ 
+        <div class="upload-image-btn-wpr" tooltip="{{translationMap?.get('UPLOAD')}}" [options]="tooltipOptions"  placement="top">
           <ion-button ion-button fill="clear" class="upload-image-btn">
             <ion-icon slot="icon-only" lazy="true" name="attach-outline"
               style="font-size: 30px;transform: rotate(42deg);"></ion-icon>
@@ -60,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 {
@@ -107,12 +111,43 @@
     --padding-bottom: 0px;
     --padding-top: 0px;
     --border-radius: 50%;
-    --padding-end: 1px;
-    --padding-start: 1px;
+    --padding-end: 2px;
+    --padding-start: 2px;
     height: 33px !important;
-    width: 30px;
+    width: 33px;
 } 
 
+.no-canned-responses-btn-badge {
+    position: absolute;
+    font-size: 12px;
+    background-color: transparent;
+    border-radius: 50%;
+    padding: 1px 2px;
+    top: 4px;
+    color: red;
+    left: -3px;
+    cursor: pointer;
+}
+.no-canned-responses-btn-badge:hover {
+    background-color: rgba(0, 0, 0, 0.05);;
+}
+
+.canned-responses-btn-badge {
+    position: absolute;
+    font-size: 12px;
+    background-color: transparent;
+    border-radius: 50%;
+    padding: 1px 2px;
+    top: 4px;
+    color: #92949c;
+    left: -3px;
+    cursor: pointer;
+}
+
+.canned-responses-btn-badge:hover {
+    background-color: rgba(0, 0, 0, 0.05);;
+}
+
 
 .upload-image-btn .button-native {
     border-radius: 50%;

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

@@ -43,7 +43,8 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
   @Input() loggedUser: UserModel;
   @Input() conversationWith: string;
   @Input() tagsCannedFilter: any = [];
-
+  @Input() tagsCannedCount: number;
+  @Input() areVisibleCAR: boolean;
   @Input() events: Observable<void>;
   @Input() fileUploadAccept: string
   @Input() isOpenInfoConversation: boolean;
@@ -132,6 +133,9 @@ 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);
+    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)
 
     // use case drop
@@ -202,9 +206,7 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
       } else if (this.currentWindowWidth <= 273) {
         this.TEXAREA_PLACEHOLDER = this.SHORTER_TEXAREA_PLACEHOLDER;
       }
-
     }
-
   }
 
   // -------------------------------------------------------------------------------------------
@@ -429,7 +431,7 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
     // this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] ionChange detail.value ", e.detail.value);
 
     const message = e.detail.value
-    // this.logger.log("[CONVS-DETAIL] [MSG-TEXT-AREA] ionChange message ", message);
+    this.logger.log("[CONVS-DETAIL] [MSG-TEXT-AREA] ionChange message ", message);
     // this.logger.log("[CONVS-DETAIL] [MSG-TEXT-AREA] ionChange  this.messageString ", this.messageString);
     const height = e.target.offsetHeight + 20; // nk added +20
     // this.logger.log("[CONVS-DETAIL] [MSG-TEXT-AREA] ionChange text-area height ", height);
@@ -556,12 +558,12 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
 
 
   sendMessage(text: string) {
-    this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] sendMessage', text);
+    this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] sendMessage text', text);
     this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] sendMessage conve width', this.conversationWith);
     // text.replace(/\s/g, "")
     this.messageString = '';
     // text = text.replace(/(\r\n|\n|\r)/gm, '');
-    if (text.trim() !== '') {
+    if (text && text.trim() !== '') {
       this.eventSendMessage.emit({ message: text, type: TYPE_MSG_TEXT });
     }
   }