@chat21/chat21-ionic 3.0.59 → 3.0.60-rc8

package/src/app/components/project-item/project-item.component.ts

@@ -9,6 +9,7 @@ import { CustomTranslateService } from 'src/chat21-core/providers/custom-transla
 import { TiledeskAuthService } from 'src/chat21-core/providers/tiledesk/tiledesk-auth.service';
 import { TiledeskService } from 'src/app/services/tiledesk/tiledesk.service';
 import { WebSocketJs } from 'src/app/services/websocket/websocket-js';
+import { AppConfigProvider } from 'src/app/services/app-config';
 
 @Component({
   selector: 'app-project-item',
@@ -17,6 +18,7 @@ import { WebSocketJs } from 'src/app/services/websocket/websocket-js';
 })
 export class ProjectItemComponent implements OnInit {
   @Output() projectIdEvent = new EventEmitter<string>()
+  @Output() openUnsevedConvsEvent = new EventEmitter<any>()
 
   private unsubscribe$: Subject<any> = new Subject<any>();
   project: any;
@@ -30,6 +32,16 @@ export class ProjectItemComponent implements OnInit {
   private logger: LoggerService = LoggerInstance.getInstance();
   window_width_is_60: boolean;
   newInnerWidth: any;
+  avaialble_status_for_tooltip: string;
+  tooltipOptions = {
+    'show-delay': 500,
+    'tooltip-class': 'chat-tooltip',
+    'theme': 'light',
+    'shadow': false,
+    'hide-delay-mobile': 0,
+    'hideDelayAfterClick': 3000,
+    'hide-delay': 200
+  };
 
   constructor(
     public wsService: WebsocketService,
@@ -38,41 +50,79 @@ export class ProjectItemComponent implements OnInit {
     public tiledeskAuthService: TiledeskAuthService,
     public tiledeskService: TiledeskService,
     public webSocketJs: WebSocketJs,
+    private appConfigProvider: AppConfigProvider,
   ) { }
 
   ngOnInit() {
-    this.getLastProjectStoredAndSubscToWSAvailabilityAndConversations();
-    this.getStoredToken();
+    this.getStoredTokenAndConnectWS();
     this.getStoredCurrenUser();
     this.translations();
     this.listenToPostMsgs();
     this.onInitWindowWidth();
+    // console.log('[PROJECT-ITEM] - on INIT')
+  }
+
+  openUnservedConvs() {
+    this.openUnsevedConvsEvent.emit('notificationsorprjctbtn')
+  }
+  openUnservedConvsAndGoToProjectList() {
+    this.openUnsevedConvsEvent.emit('pinbtn')
+  }
+
+  getStoredTokenAndConnectWS() {
+    this.tiledeskToken = this.appStorageService.getItem('tiledeskToken');
+    this.logger.log('[PROJECT-ITEM] - STORED TILEDEK TOKEN ', this.tiledeskToken)
+    this.connetWebsocket(this.tiledeskToken)
+  }
+
+  connetWebsocket(tiledeskToken) {
+
+    this.logger.log('[WEBSOCKET-JS] connetWebsocket called in [PROJECT-ITEM] tiledeskToken ', tiledeskToken)
+    const appconfig = this.appConfigProvider.getConfig();
+    this.logger.log('[WEBSOCKET-JS] connetWebsocket called in [PROJECT-ITEM] wsUrl ', appconfig.wsUrl)
+    const WS_URL = appconfig.wsUrl + '?token=' + tiledeskToken
+    this.logger.log('[WEBSOCKET-JS] connetWebsocket called in [PROJECT-ITEM] wsUrl ', WS_URL)
+    this.webSocketJs.init(
+      WS_URL,
+      undefined,
+      undefined,
+      undefined
+    );
 
+    this.getLastProjectStoredAndSubscToWSAvailabilityAndConversations();
   }
 
   listenToPostMsgs() {
     window.addEventListener("message", (event) => {
       // console.log("[PROJECT-ITEM] post message event ", event);
 
-      if (event && event.data && event.data) {
+      if (event && event.data) {
         // console.log("[PROJECT-ITEM] message event data  ", event.data);
         if (event.data === 'hasChangedProject') {
           this.unservedRequestCount = 0;
           if (this.project) {
-            this.webSocketJs.unsubscribe('/' + this.project.id_project._id + '/requests');  
+            this.webSocketJs.unsubscribe('/' + this.project.id_project._id + '/requests');
           }
           this.getLastProjectStoredAndSubscToWSAvailabilityAndConversations();
-          
         }
       }
     })
   }
 
+
   public translations() {
     const keys = [
       'Available',
       'Unavailable',
-      'Busy'
+      'Busy',
+      'VIEW_ALL_CONVERSATIONS',
+      'CONVERSATIONS_IN_QUEUE',
+      'CONVERSATION_IN_QUEUE',
+      'NO_CONVERSATION_IN_QUEUE',
+      'PINNED_PROJECT',
+      'CHANGE_PINNED_PROJECT',
+      "CHANGE_TO_YOUR_STATUS_TO_AVAILABLE",
+      "CHANGE_TO_YOUR_STATUS_TO_UNAVAILABLE"
     ];
     this.translationMap = this.translateService.translateLanguage(keys);
   }
@@ -93,21 +143,6 @@ export class ProjectItemComponent implements OnInit {
     const actualWidth = window.innerWidth;
     this.logger.log('[PROJECT-ITEM] - ACTUAL Width ', actualWidth);
 
-
-   
-    // if (actualWidth <= 150) {
-    //   this.window_width_is_60 = true;
-    // } else {
-    //   this.window_width_is_60 = false;
-    // }
-  }
-
-
-
-  getStoredToken() {
-    this.tiledeskToken = this.appStorageService.getItem('tiledeskToken');
-    this.logger.log('[PROJECT-ITEM] - STORED TILEDEK TOKEN ', this.tiledeskToken)
-
   }
 
   getStoredCurrenUser() {
@@ -134,9 +169,9 @@ export class ProjectItemComponent implements OnInit {
     if (!stored_project) {
       this.logger.log('PROJECT-ITEM - THERE IS NOT STORED LAST PROJECT ', stored_project)
       const tiledeskToken = this.appStorageService.getItem('tiledeskToken');
-      this.logger.log('[INFO-CONTENT-COMP] - GET PROJECTS - tiledeskToken', tiledeskToken);
+      this.logger.log('[PROJECT-ITEM] - GET PROJECTS - tiledeskToken', tiledeskToken);
       this.tiledeskService.getProjects(tiledeskToken).subscribe(projects => {
-        this.logger.log('[INFO-CONTENT-COMP] - GET PROJECTS - RES', projects);
+        this.logger.log('[PROJECT-ITEM - GET PROJECTS - RES', projects);
 
         this.logger.log('[INFO-CONTENT-COMP] - GET PROJECTS - RES this.project', this.project);
 
@@ -147,7 +182,7 @@ export class ProjectItemComponent implements OnInit {
         }
 
       }, (error) => {
-        this.logger.error('[INFO-CONTENT-COMP] - GET PROJECTS - ERROR  ', error);
+        this.logger.error('[PROJECT-ITEM] - GET PROJECTS - ERROR  ', error);
 
       }, () => {
         this.logger.log('[INFO-CONTENT-COMP] - GET PROJECTS * COMPLETE *');
@@ -175,7 +210,6 @@ export class ProjectItemComponent implements OnInit {
       this.logger.log('[PROJECT-ITEM] - user_role ', user_role)
       this.projectIdEvent.emit(project.id_project._id)
 
-
       if (user_role === 'agent') {
         this.ROLE_IS_AGENT = true;
 
@@ -206,6 +240,13 @@ export class ProjectItemComponent implements OnInit {
         if (project.id_project._id === projectUser['id_project']) {
           project['ws_projct_user_available'] = projectUser['user_available'];
           project['ws_projct_user_isBusy'] = projectUser['isBusy']
+          if (this.translationMap) {
+            if (projectUser['user_available'] === true) {
+              this.avaialble_status_for_tooltip = this.translationMap.get('CHANGE_TO_YOUR_STATUS_TO_UNAVAILABLE')
+            } else {
+              this.avaialble_status_for_tooltip = this.translationMap.get('CHANGE_TO_YOUR_STATUS_TO_AVAILABLE')
+            }
+          }
         }
 
       }, (error) => {
@@ -255,7 +296,7 @@ export class ProjectItemComponent implements OnInit {
             // this.logger.log('NAVBAR - UPDATE-UNSERVED-REQUEST-COUNT request agents', r.agents)
             // *bug fix: when the user is an agent also for the unserved we have to consider if he is present in agents
             // && this.ROLE_IS_AGENT === true
-            if (r['status'] === 100 ) {
+            if (r['status'] === 100) {
               if (this.hasmeInAgents(r['agents']) === true) {
                 count = count + 1;
               }

package/src/app/pages/conversation-detail/conversation-detail.module.ts

@@ -40,6 +40,7 @@ import { NgxLinkifyjsModule } from 'ngx-linkifyjs';
     CommonModule,
     FormsModule,
     IonicModule,
+    TooltipModule,
     ConversationDetailPageRoutingModule,
     TranslateModule.forChild({
       loader: {
@@ -51,7 +52,8 @@ import { NgxLinkifyjsModule } from 'ngx-linkifyjs';
     SharedModule,
     NgxLinkifyjsModule,
   ],
-  entryComponents: [MessageTextAreaComponent],
+  // entryComponents: [MessageTextAreaComponent],
+  entryComponents: [],
   declarations: [
     ConversationDetailPage,
     HeaderConversationDetailComponent,

package/src/app/pages/conversation-detail/conversation-detail.page.html

@@ -10,8 +10,8 @@
     <ion-grid style="height: 100%;">
       <ion-row class="ion-justify-content-center ion-align-items-center" style="height: 100%; flex-direction: column">
         <span *ngIf="isOnline === true"
-          style="color: #92949c; font-size: 16px;line-height: 18px;margin-top: -160px;">{{'PleaseSelectChatToStartMessaging'
-          | translate }}</span>
+          style="color: #92949c; font-size: 16px;line-height: 18px;margin-top: -160px;">
+          {{'PleaseSelectChatToStartMessaging' | translate }}</span>
 
           <span *ngIf="isOnline === false"
           style="color: #92949c; font-size: 16px;line-height: 18px;margin-top: -160px;">Internet is slow or not working</span>
@@ -149,16 +149,22 @@
                 </ion-item>
               </ion-list>
             </div>
+
+          
+
+          
             <!-- (eventReplaceMessageWithCanned)="replaceTagInMessage($event)" -->
             <!-- [tagsCannedFilter]="tagsCannedFilter" -->
             <!-- openInfoConversation   {{openInfoConversation}} - isMobile {{isMobile}} -->
             <app-message-text-area
               *ngIf="(openInfoConversation === false && isMobile === true) || (openInfoConversation === true && isMobile === false) || (openInfoConversation === false && isMobile === false)"
-             
+              [tagsCannedCount]="tagsCannedCount"
+              [areVisibleCAR]="areVisibleCAR"
               [loggedUser]="loggedUser" 
               [conversationWith]="conversationWith" 
               [tagsCannedFilter]="tagsCannedFilter"
               (eventChangeTextArea)="returnChangeTextArea($event)" 
+              (hasClickedOpenCannedResponses)="hasClickedOpenCannedResponses($event)"
               (eventSendMessage)="returnSendMessage($event)"
               [translationMap]="translationMap" 
               [fileUploadAccept]="appConfigProvider.getConfig().fileUploadAccept"

package/src/app/pages/conversation-detail/conversation-detail.page.ts

@@ -92,6 +92,7 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
   public conv_type: string;
 
   public tagsCanned: any = [];
+  public tagsCannedCount: number
   public tagsCannedFilter: any = [];
   public HIDE_CANNED_RESPONSES: boolean = false;
 
@@ -104,7 +105,8 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
   MESSAGE_TYPE_OTHERS = MESSAGE_TYPE_OTHERS;
 
   arrowkeyLocation = -1;
-
+  public_Key: any;
+  areVisibleCAR: boolean
   //SOUND
   setTimeoutSound: any;
   audio: any
@@ -180,7 +182,7 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
       this.conversationWithFullname = params.get('FullNameConv');
       this.conv_type = params.get('Convtype');
 
-      this.events.publish('supportconvid:haschanged', this.conversationWith);  
+      this.events.publish('supportconvid:haschanged', this.conversationWith);
     });
 
   }
@@ -206,6 +208,37 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     //   }
     // });
     this.watchToConnectionStatus();
+    this.getOSCODE()
+  }
+
+
+  getOSCODE() {
+    this.public_Key = this.appConfigProvider.getConfig().t2y12PruGU9wUtEGzBJfolMIgK;
+    this.logger.log('[CONVS-DETAIL] AppConfigService getAppConfig public_Key', this.public_Key);
+
+    let keys = this.public_Key.split("-");
+    this.logger.log('[CONVS-DETAIL] PUBLIC-KEY - public_Key keys', keys)
+
+    keys.forEach(key => {
+
+
+      if (key.includes("CAR")) {
+        let car = key.split(":");
+        if (car[1] === "F") {
+          this.areVisibleCAR = false;
+          this.logger.log('[CONVS-DETAIL] PUBLIC-KEY - areVisibleCAR', this.areVisibleCAR)
+        } else {
+          this.areVisibleCAR = true;
+          this.logger.log('[CONVS-DETAIL] PUBLIC-KEY - areVisibleCAR', this.areVisibleCAR)
+        }
+      }
+
+    });
+
+    if (!this.public_Key.includes("CAR")) {
+      this.areVisibleCAR = false;
+      this.logger.log('[CONVS-DETAIL] PUBLIC-KEY - areVisibleCAR', this.areVisibleCAR)
+    }
   }
 
   watchToConnectionStatus() {
@@ -327,6 +360,7 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     this.subscriptions = [];
     this.setHeightTextArea();
     this.tagsCanned = []; // list of canned
+
     this.messages = []; // list messages of conversation
     this.isFileSelected = false; // indicates if a file has been selected (image to upload)
     this.openInfoMessage = false; // indicates whether the info message panel is open
@@ -415,7 +449,13 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
       'FAILED_TO_UPLOAD_THE_FORMAT_IS NOT_SUPPORTED',
       'NO_INFORMATION_AVAILABLE',
       'CONTACT_ID',
-      'USER_ID'
+      'USER_ID',
+      "UPLOAD",
+      "CANNED_RESPONSES",
+      "NO_CANNED_RESPONSES",
+      "YES_CANNED_RESPONSES",
+      "THERE_ARE_NO_CANNED_RESPONSES_AVAILABLE",
+      "TO_CREATE_THEM_GO_TO_THE_PROJECT"
     ];
 
     this.translationMap = this.customTranslateService.translateLanguage(keys);
@@ -433,6 +473,7 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
       'INFO_SUPPORT_USER_ADDED_VERB',
       'INFO_SUPPORT_CHAT_REOPENED',
       'INFO_SUPPORT_CHAT_CLOSED',
+      'INFO_A_NEW_SUPPORT_REQUEST_HAS_BEEN_ASSIGNED_TO_YOU',
       'LABEL_TODAY',
       'LABEL_TOMORROW',
       'LABEL_LAST_ACCESS',
@@ -892,90 +933,93 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
       // ----------------------------------------------------------
       // DISPLAY CANNED RESPONSES if message.lastIndexOf("/")
       // ----------------------------------------------------------
-      setTimeout(() => {
-        if (this.conversationWith.startsWith("support-group")) {
-
-          const pos = message.lastIndexOf("/");
-          // console.log("[CONVS-DETAIL] - returnChangeTextArea - canned responses pos of / (using lastIndexOf) ", pos);
-
-          // test
-          // var rest = message.substring(0, message.lastIndexOf("/") + 1);
-          // var last = message.substring(message.lastIndexOf("/") + 1, message.length);
-          // console.log('[CONVS-DETAIL] - returnChangeTextArea rest', rest);
-          // console.log('[CONVS-DETAIL] - returnChangeTextArea last', last);
-          // console.log('[CONVS-DETAIL] - returnChangeTextArea last', last.length);
-          // if (last.length === 1 && last.trim() === '') {
-          //   console.log('[CONVS-DETAIL] - returnChangeTextArea last is a white space ');
-          // } else if (last.length === 1 && last.trim() !== '') {
-          //   console.log('[CONVS-DETAIL] - returnChangeTextArea last is NOT space ');
-          // }
-
-
-          if (pos >= 0) {
-            var strSearch = message.substr(pos + 1);
-            this.logger.log("[CONVS-DETAIL] - returnChangeTextArea - canned responses strSearch ", strSearch);
-
-            // --------------------------------------------
-            // Load canned responses
-            // --------------------------------------------
-            this.loadTagsCanned(strSearch, this.conversationWith);
-
-            // ------------------------------------------------------------------------------------------------------------------------------------------
-            // Hide / display Canned when the SLASH has POSITION POS 0 and checking if there is a space after the SLASH (in this case it will be hidden)
-            // ------------------------------------------------------------------------------------------------------------------------------------------
-
-            var after_slash = message.substring(message.lastIndexOf("/") + 1, message.length);
-            if (pos === 0 && after_slash.length === 1 && after_slash.trim() === '') {
-              this.logger.log('[CONVS-DETAIL] - returnChangeTextArea after_slash --> there is a white space after ');
-              this.HIDE_CANNED_RESPONSES = true
-              this.tagsCannedFilter = []
-            } else if (pos === 0 && after_slash.length === 0) {
-              this.logger.log('[CONVS-DETAIL] - returnChangeTextArea after_slash --> there is NOT a white space after');
-              this.HIDE_CANNED_RESPONSES = false
-            }
-
-
-            if (pos > 0) {
+      if (this.areVisibleCAR) {
+        setTimeout(() => {
+          if (this.conversationWith.startsWith("support-group")) {
+
+            const pos = message.lastIndexOf("/");
+            // console.log("[CONVS-DETAIL] - returnChangeTextArea - canned responses pos of / (using lastIndexOf) ", pos);
+
+            // test
+            // var rest = message.substring(0, message.lastIndexOf("/") + 1);
+            // var last = message.substring(message.lastIndexOf("/") + 1, message.length);
+            // console.log('[CONVS-DETAIL] - returnChangeTextArea rest', rest);
+            // console.log('[CONVS-DETAIL] - returnChangeTextArea last', last);
+            // console.log('[CONVS-DETAIL] - returnChangeTextArea last', last.length);
+            // if (last.length === 1 && last.trim() === '') {
+            //   console.log('[CONVS-DETAIL] - returnChangeTextArea last is a white space ');
+            // } else if (last.length === 1 && last.trim() !== '') {
+            //   console.log('[CONVS-DETAIL] - returnChangeTextArea last is NOT space ');
+            // }
+
+
+            if (pos >= 0) {
+              var strSearch = message.substr(pos + 1);
+              this.logger.log("[CONVS-DETAIL] - returnChangeTextArea - canned responses strSearch ", strSearch);
+
+              // --------------------------------------------
+              // Load canned responses
+              // --------------------------------------------
+              this.loadTagsCanned(strSearch, this.conversationWith);
 
               // ------------------------------------------------------------------------------------------------------------------------------------------
-              // Hide / display Canned when the SLASH has POSITION POS > and checking if there is a space after the SLASH (in this case they it be hidden)
-              // and if there is not a space before the SLASH (in this it will be hidden)
+              // Hide / display Canned when the SLASH has POSITION POS 0 and checking if there is a space after the SLASH (in this case it will be hidden)
               // ------------------------------------------------------------------------------------------------------------------------------------------
 
-              let beforeSlash = message.substr(pos - 1)
-              let afterSlash = message.substr(pos + 1)
-              this.logger.log('[CONVS-DETAIL] - returnChangeTextArea * POS ', pos);
-
-              this.logger.log('[CONVS-DETAIL] - returnChangeTextArea  --> beforeSlash', beforeSlash);
-              this.logger.log('[CONVS-DETAIL] - returnChangeTextArea  --> afterSlash', afterSlash);
-              var afterSlashParts = afterSlash.split("/")
-              var beforeSlashParts = beforeSlash.split("/")
-              this.logger.log('[CONVS-DETAIL] - returnChangeTextArea  --> afterSlash parts', afterSlashParts);
-              this.logger.log('[CONVS-DETAIL] - returnChangeTextArea  --> beforeSlash parts', beforeSlashParts);
-
-              if (beforeSlashParts.length === 2) {
-                if (beforeSlashParts[0].indexOf(' ') >= 0 && afterSlashParts[0] === '') {
-                  this.HIDE_CANNED_RESPONSES = false
-                  this.logger.log('[CONVS-DETAIL] - returnChangeTextArea  --> beforeSlash there is a white space After Not');
-                  // if (beforeSlashParts[0].indexOf(' ') >= 0 && afterSlashParts[0].indexOf(' ') >= 0)
-                } else if (beforeSlashParts[0].indexOf(' ') < 0 && afterSlashParts[0] === '') {
-                  this.HIDE_CANNED_RESPONSES = true;
-                  this.tagsCannedFilter = []
-                  this.logger.log('[CONVS-DETAIL] - returnChangeTextArea  --> beforeSlash not thete is a white space After Not');
-                } else if (beforeSlashParts[0].indexOf(' ') >= 0 && afterSlashParts[0] === ' ') {
-                  this.logger.log('[CONVS-DETAIL] - returnChangeTextArea  --> beforeSlash not thete is a white space After YES');
-                  this.HIDE_CANNED_RESPONSES = true;
-                  this.tagsCannedFilter = []
+              var after_slash = message.substring(message.lastIndexOf("/") + 1, message.length);
+              if (pos === 0 && after_slash.length === 1 && after_slash.trim() === '') {
+                this.logger.log('[CONVS-DETAIL] - returnChangeTextArea after_slash --> there is a white space after ');
+                this.HIDE_CANNED_RESPONSES = true
+                this.tagsCannedFilter = []
+              } else if (pos === 0 && after_slash.length === 0) {
+                this.logger.log('[CONVS-DETAIL] - returnChangeTextArea after_slash --> there is NOT a white space after');
+                this.HIDE_CANNED_RESPONSES = false
+              }
+
+
+              if (pos > 0) {
+
+                // ------------------------------------------------------------------------------------------------------------------------------------------
+                // Hide / display Canned when the SLASH has POSITION POS > and checking if there is a space after the SLASH (in this case they it be hidden)
+                // and if there is not a space before the SLASH (in this it will be hidden)
+                // ------------------------------------------------------------------------------------------------------------------------------------------
+
+                let beforeSlash = message.substr(pos - 1)
+                let afterSlash = message.substr(pos + 1)
+                this.logger.log('[CONVS-DETAIL] - returnChangeTextArea * POS ', pos);
+
+                this.logger.log('[CONVS-DETAIL] - returnChangeTextArea  --> beforeSlash', beforeSlash);
+                this.logger.log('[CONVS-DETAIL] - returnChangeTextArea  --> afterSlash', afterSlash);
+                var afterSlashParts = afterSlash.split("/")
+                var beforeSlashParts = beforeSlash.split("/")
+                this.logger.log('[CONVS-DETAIL] - returnChangeTextArea  --> afterSlash parts', afterSlashParts);
+                this.logger.log('[CONVS-DETAIL] - returnChangeTextArea  --> beforeSlash parts', beforeSlashParts);
+
+                if (beforeSlashParts.length === 2) {
+                  if (beforeSlashParts[0].indexOf(' ') >= 0 && afterSlashParts[0] === '') {
+                    this.HIDE_CANNED_RESPONSES = false
+                    this.logger.log('[CONVS-DETAIL] - returnChangeTextArea  --> beforeSlash there is a white space After Not');
+                    // if (beforeSlashParts[0].indexOf(' ') >= 0 && afterSlashParts[0].indexOf(' ') >= 0)
+                  } else if (beforeSlashParts[0].indexOf(' ') < 0 && afterSlashParts[0] === '') {
+                    this.HIDE_CANNED_RESPONSES = true;
+                    this.tagsCannedFilter = []
+                    this.logger.log('[CONVS-DETAIL] - returnChangeTextArea  --> beforeSlash not thete is a white space After Not');
+                  } else if (beforeSlashParts[0].indexOf(' ') >= 0 && afterSlashParts[0] === ' ') {
+                    this.logger.log('[CONVS-DETAIL] - returnChangeTextArea  --> beforeSlash not thete is a white space After YES');
+                    this.HIDE_CANNED_RESPONSES = true;
+                    this.tagsCannedFilter = []
+                  }
                 }
               }
-            }
 
 
-          } else {
-            this.tagsCannedFilter = [];
+            } else {
+              this.tagsCannedFilter = [];
+            }
           }
-        }
-      }, 300);
+        }, 300);
+
+      }
       // ./ CANNED RESPONSES //
 
     } catch (err) {
@@ -983,6 +1027,8 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     }
   }
 
+
+
   // ----------------------------------------------------------
   // @ CANNED RESPONSES methods
   // ----------------------------------------------------------
@@ -1052,7 +1098,8 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
       this.logger.log('[CONVS-DETAIL] - loadTagsCanned  getCannedResponses RES', res);
 
       this.tagsCanned = res
-
+      this.tagsCannedCount = res.length
+      this.logger.log('[CONVS-DETAIL] - loadTagsCanned  getCannedResponses tagsCannedCount', this.tagsCannedCount);
       if (this.HIDE_CANNED_RESPONSES === false) {
         this.showTagsCanned(strSearch);
       }
@@ -1082,10 +1129,12 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
       strReplace = "<b class='highlight-search-string'>" + strSearch + "</b>";
     }
     for (var i = 0; i < this.tagsCannedFilter.length; i++) {
-
       const textCanned = "<div class='cannedText'>" + this.replacePlaceholderInCanned(this.tagsCannedFilter[i].text) + "</div>";
       this.tagsCannedFilter[i].title = "<div class='cannedContent'><div class='cannedTitle'>" + this.tagsCannedFilter[i].title.toString().replace(strSearch, strReplace.trim()) + "</div>" + textCanned + '</div>';
-
+    }
+    if (this.tagsCannedCount === 0) {
+      const nocanned = { 'title': "<div class='cannedContent'><div class='cannedTitle nocannedTitle'>" + this.translationMap.get('THERE_ARE_NO_CANNED_RESPONSES_AVAILABLE') + ".</div><div class='cannedText'>" + this.translationMap.get('TO_CREATE_THEM_GO_TO_THE_PROJECT') + "</div></div>", "text": "There are no canned responses available" }
+      this.tagsCannedFilter.push(nocanned)
     }
   }
 
@@ -1101,10 +1150,7 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
 
   replacePlaceholderInCanned(str) {
     this.logger.log('[CONVS-DETAIL] - replacePlaceholderInCanned str ', str);
-
-
     str = str.replace('$recipient_name', this.conversationWithFullname);
-
     if (this.loggedUser && this.loggedUser.fullname) {
       str = str.replace('$agent_name', this.loggedUser.fullname);
     }
@@ -1129,8 +1175,6 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     this.arrowkeyLocation = -1
     this.tagsCannedFilter = [];
     this.logger.log("[CONVS-DETAIL] replaceTagInMessage  canned text ", canned.text);
-    // // prendo val input
-
 
 
     // replace text
@@ -1153,6 +1197,77 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
   }
 
 
+  hasClickedOpenCannedResponses($event) {
+    this.logger.log('[CONVS-DETAIL] - hasClickedOpenCannedResponses ', $event)
+    const elTextArea = this.rowTextArea['el'];
+    const textArea = elTextArea.getElementsByTagName('ion-textarea')[0];
+
+    this.logger.log("[CONVS-DETAIL] hasClickedOpenCannedResponses  textArea ", textArea);
+    this.logger.log("[CONVS-DETAIL] hasClickedOpenCannedResponses  textArea value", textArea.value)
+    this.insertAtCursor(textArea, '/');
+    // console.log('[CONVS-DETAIL] hasClickedOpenCannedResponses textArea.value', textArea.value)
+    // setTimeout(() => {
+    //   // if (textArea.value === '/') {
+    //     // textArea.focus();
+    //     textArea.setFocus();
+    //   // }
+    // }, 1500);
+
+    this.setCaretPosition(textArea)
+  }
+
+  setCaretPosition(ctrl) {
+    ctrl.value.trim()
+    ctrl.setFocus();
+  }
+
+  insertAtCursor(myField, myValue) {
+    this.logger.log('[CONVS-DETAIL] - insertAtCursor - myValue ', myValue);
+    this.logger.log('[CONVS-DETAIL] - insertAtCursor - myField ', myField);
+
+
+    // myValue = ' ' + myValue;
+
+    // console.log('[CONVS-DETAIL] - GET TEXT AREA - Here yes myValue ', myValue);
+    // console.log('[CONVS-DETAIL] - GET TEXT AREA - Here yes textArea value length', myField.value.length);
+
+    if (myField.value.length > 0) {
+      myValue = ' ' + myValue;
+    }
+
+    //IE support
+    if (myField.selection) {
+      myField.focus();
+      let sel = myField.selection.createRange();
+      sel.text = myValue;
+      // this.cannedResponseMessage = sel.text;
+    }
+    //MOZILLA and others
+    else if (myField.selectionStart || myField.selectionStart == '0') {
+      var startPos = myField.selectionStart;
+      this.logger.log('[CONVS-DETAIL] - insertAtCursor - startPos ', startPos);
+
+      var endPos = myField.selectionEnd;
+      this.logger.log('[CONVS-DETAIL] - insertAtCursor - endPos ', endPos);
+
+      myField.value = myField.value.substring(0, startPos) + myValue + myField.value.substring(endPos, myField.value.length);
+
+      // place cursor at end of text in text input element
+      myField.focus();
+      var val = myField.value; //store the value of the element
+      myField.value = ''; //clear the value of the element
+      myField.value = val + ' '; //set that value back. 
+
+      // this.cannedResponseMessage = myField.value;
+
+      // this.texareaIsEmpty = false;
+      // myField.select();
+    } else {
+      myField.value += myValue;
+      // this.cannedResponseMessage = myField.value;
+    }
+  }
+
   @HostListener('document:keydown', ['$event'])
   handleKeyboardEvent(event: KeyboardEvent) {
     // this.logger.log("CONVERSATION-DETAIL handleKeyboardEvent  event.key ", event.key);