@chat21/chat21-ionic 3.0.59-rc1 → 3.0.59-rc10

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

@@ -0,0 +1,316 @@
+import { Component, EventEmitter, HostListener, OnInit, Output } from '@angular/core';
+import { WebsocketService } from 'src/app/services/websocket/websocket.service';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { AppStorageService } from 'src/chat21-core/providers/abstract/app-storage.service';
+import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
+import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
+import { CustomTranslateService } from 'src/chat21-core/providers/custom-translate.service';
+import { TiledeskAuthService } from 'src/chat21-core/providers/tiledesk/tiledesk-auth.service';
+import { TiledeskService } from 'src/app/services/tiledesk/tiledesk.service';
+
+@Component({
+  selector: 'app-project-item',
+  templateUrl: './project-item.component.html',
+  styleUrls: ['./project-item.component.scss'],
+})
+export class ProjectItemComponent implements OnInit {
+  @Output() projectIdEvent = new EventEmitter<string>()
+
+  private unsubscribe$: Subject<any> = new Subject<any>();
+  project: any;
+  tiledeskToken: string;
+
+  unservedRequestCount: number = 0;
+  currentUserRequestCount: number;
+  ROLE_IS_AGENT: boolean;
+  currentUserId: string;
+  public translationMap: Map<string, string>;
+  private logger: LoggerService = LoggerInstance.getInstance();
+  window_width_is_60: boolean;
+  newInnerWidth: any;
+
+  constructor(
+    public wsService: WebsocketService,
+    public appStorageService: AppStorageService,
+    private translateService: CustomTranslateService,
+    public tiledeskAuthService: TiledeskAuthService,
+    public tiledeskService: TiledeskService
+  ) { }
+
+  ngOnInit() {
+    this.getLastProjectStoredAndSubscToWSAvailabilityAndConversations();
+    this.getStoredToken();
+    this.getStoredCurrenUser();
+    this.translations();
+    this.listenToPostMsgs();
+    this.onInitWindowWidth();
+  }
+
+  listenToPostMsgs() {
+    window.addEventListener("message", (event) => {
+      // console.log("[PROJECT-ITEM] post message event ", event);
+
+      if (event && event.data && event.data) {
+        // console.log("[APP-COMP] message event data  ", event.data);
+        if (event.data === 'hasChangedProject') {
+          this.getLastProjectStoredAndSubscToWSAvailabilityAndConversations();
+        }
+      }
+    })
+  }
+
+  public translations() {
+    const keys = [
+      'Available',
+      'Unavailable',
+      'Busy'
+    ];
+    this.translationMap = this.translateService.translateLanguage(keys);
+  }
+
+  @HostListener('window:resize', ['$event'])
+  onResize(event: any) {
+    this.newInnerWidth = event.target.innerWidth;
+    this.logger.log('[PROJECTS-X-PANEL] - INNER WIDTH ', this.newInnerWidth)
+
+    if (this.newInnerWidth <= 150) {
+      this.window_width_is_60 = true;
+    } else {
+      this.window_width_is_60 = false;
+    }
+  }
+
+  onInitWindowWidth(): any {
+    const actualWidth = window.innerWidth;
+    this.logger.log('[PROJECTS-X-PANEL] - ACTUAL Width ', actualWidth);
+
+
+    // if (actualWidth <= 60) {
+    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() {
+    const storedCurrentUser = this.appStorageService.getItem('currentUser');
+    this.logger.log('[PROJECT-ITEM] - STORED CURRENT USER ', storedCurrentUser)
+    if (storedCurrentUser) {
+      const currentUser = JSON.parse(storedCurrentUser)
+      this.logger.log('[PROJECT-ITEM] - STORED CURRENT USER OBJCT', currentUser);
+      this.currentUserId = currentUser.uid
+      this.logger.log('[PROJECT-ITEM] - CURRENT USER ID', this.currentUserId);
+    }
+  }
+
+  getLastProjectStoredAndSubscToWSAvailabilityAndConversations() {
+    let stored_project = ''
+    try {
+      stored_project = localStorage.getItem('last_project')
+    } catch (err) {
+      console.log('Get loacal storage item LAST PROJECT ', err)
+    }
+
+
+    if (!stored_project) {
+      console.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.tiledeskService.getProjects(tiledeskToken).subscribe(projects => {
+        this.logger.log('[INFO-CONTENT-COMP] - GET PROJECTS - RES', projects);
+        this.project = projects[0];
+        this.logger.log('[INFO-CONTENT-COMP] - GET PROJECTS - RES this.project', this.project);
+
+        localStorage.setItem('last_project', JSON.stringify(projects[0]))
+        this.doProjectSubscriptions(this.project)
+
+      }, (error) => {
+        this.logger.error('[INFO-CONTENT-COMP] - GET PROJECTS - ERROR  ', error);
+
+      }, () => {
+        this.logger.log('[INFO-CONTENT-COMP] - GET PROJECTS * COMPLETE *');
+
+      });
+    }
+
+
+    if (stored_project) {
+      this.logger.log('PROJECT-ITEM - THERE IS STORED LAST PROJECT ', stored_project)
+      this.project = JSON.parse(stored_project)
+      this.doProjectSubscriptions(this.project)
+      this.logger.log('[PROJECT-ITEM] - LAST PROJECT PARSED ', this.project)
+    }
+
+
+  }
+
+  doProjectSubscriptions(project) {
+    if (project) {
+      const user_role = this.project.role
+      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;
+
+      } else {
+        this.ROLE_IS_AGENT = false;
+      }
+
+
+      this.logger.log('[PROJECT-ITEM] - LAST PROJECT PARSED > user_role ', user_role)
+      this.wsService.subscriptionToWsCurrentProjectUserAvailability(project.id_project._id, this.project._id);
+      this.listenTocurrentProjectUserUserAvailability$(project)
+
+      this.wsService.subscriptionToWsConversations(project.id_project._id)
+      // this.updateCurrentUserRequestCount();
+      this.updateUnservedRequestCount();
+
+    }
+  }
+
+  listenTocurrentProjectUserUserAvailability$(project) {
+    this.wsService.currentProjectUserAvailability$
+      .pipe(
+        takeUntil(this.unsubscribe$)
+      )
+      .subscribe((projectUser) => {
+        this.logger.log('[PROJECT-ITEM] - $UBSC TO WS USER AVAILABILITY & BUSY STATUS RES ', projectUser);
+
+        if (project.id_project._id === projectUser['id_project']) {
+          project['ws_projct_user_available'] = projectUser['user_available'];
+          project['ws_projct_user_isBusy'] = projectUser['isBusy']
+        }
+
+      }, (error) => {
+        this.logger.error('[PROJECT-ITEM] - $UBSC TO WS USER AVAILABILITY & BUSY STATUS error ', error);
+      }, () => {
+        this.logger.log('[PROJECT-ITEM] - $UBSC TO WS USER AVAILABILITY & BUSY STATUS * COMPLETE *');
+      })
+  }
+
+  changeAvailabilityState(projectid, available) {
+    this.logger.log('[PROJECT-ITEM] - changeAvailabilityState projectid', projectid, ' available: ', available);
+
+    available = !available
+    this.logger.log('[PROJECT-ITEM] - changeAvailabilityState projectid', projectid, ' available: ', available);
+
+    this.wsService.updateCurrentUserAvailability(this.tiledeskToken, projectid, available)
+      .subscribe((projectUser: any) => {
+
+        this.logger.log('[PROJECT-ITEM] - PROJECT-USER UPDATED ', projectUser)
+
+        // NOTIFY TO THE USER SERVICE WHEN THE AVAILABLE / UNAVAILABLE BUTTON IS CLICKED
+        // this.usersService.availability_btn_clicked(true)
+
+        if (this.project['id_project']._id === projectUser.id_project) {
+          this.project['ws_projct_user_available'] = projectUser.user_available;
+          // this.project['ws_projct_user_isBusy'] = projectUser['isBusy']
+        }
+
+      }, (error) => {
+        this.logger.error('[PROJECT-ITEM] - PROJECT-USER UPDATED - ERROR  ', error);
+
+      }, () => {
+        this.logger.log('[PROJECT-ITEM] - PROJECT-USER UPDATED  * COMPLETE *');
+
+      });
+  }
+
+  updateUnservedRequestCount() {
+    // this.requestsService.requestsList_bs.subscribe((requests) => {
+    this.wsService.wsRequestsList$
+      .pipe(
+        takeUntil(this.unsubscribe$)
+      )
+      .subscribe((requests) => {
+
+        if (requests) {
+          let count = 0;
+          requests.forEach(r => {
+            // 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
+            if (r['status'] === 100 && this.ROLE_IS_AGENT === true) {
+              if (this.hasmeInAgents(r['agents']) === true) {
+                count = count + 1;
+              }
+            }
+            if (r['status'] === 100 && this.ROLE_IS_AGENT === false) {
+              count = count + 1;
+            }
+          });
+          this.unservedRequestCount = count;
+          this.logger.log('[PROJECT-ITEM] UNSERVED REQUEST COUNT - RES ', this.unservedRequestCount)
+        }
+      }, error => {
+        this.logger.error('[PROJECT-ITEM] UNSERVED REQUEST COUNT * error * ', error)
+      }, () => {
+        this.logger.log('[PROJECT-ITEM] UNSERVED REQUEST COUNT */* COMPLETE */*')
+      })
+  }
+
+  hasmeInAgents(agents) {
+    if (agents) {
+      for (let j = 0; j < agents.length; j++) {
+        this.logger.log('[PROJECT-ITEM] hasmeInAgents currentUserId  ', this.currentUserId)
+        this.logger.log('[PROJECT-ITEM] hasmeInAgents agent  ', agents[j].id_user)
+        if (this.currentUserId === agents[j].id_user) {
+          this.logger.log('[PROJECT-ITEM] hasmeInAgents ')
+          return true
+        }
+      }
+    } else {
+      this.logger.log('[PROJECT-ITEM] hasmeInAgents OOPS!!! AGENTS THERE ARE NOT ')
+    }
+  }
+
+  updateCurrentUserRequestCount() {
+    // this.requestsService.requestsList_bs.subscribe((requests) => {
+    this.wsService.wsRequestsList$
+      .pipe(
+        takeUntil(this.unsubscribe$)
+      )
+      .subscribe((requests) => {
+        if (requests) {
+          let count = 0;
+          requests.forEach(r => {
+
+            // const membersArray = Object.keys(r.members);
+            const participantsArray = r['participants'] // new used with ws 
+            // this.logger.log('[NAVBAR] »» WIDGET updateCurrentUserRequestCount REQUEST currentUserRequestCount membersArray ', membersArray);
+
+            // const currentUserIsInParticipants = membersArray.includes(this.user._id);
+            const currentUserIsInParticipants = participantsArray.includes(this.currentUserId); // new used with ws 
+
+            // this.logger.log('[NAVBAR] »» WIDGET updateCurrentUserRequestCount REQUEST currentUserRequestCount currentUserIsInParticipants ', currentUserIsInParticipants);
+            if (currentUserIsInParticipants === true) {
+              count = count + 1;
+            }
+          });
+          this.currentUserRequestCount = count;
+          this.logger.log('[PROJECT-ITEM] CURRENT USER REQUEST COUNT - RES', this.currentUserRequestCount);
+        }
+      }, error => {
+        this.logger.error('[PROJECT-ITEM] CURRENT USER REQUEST COUNT * error * ', error)
+      }, () => {
+        this.logger.log('[PROJECT-ITEM] CURRENT USER REQUEST COUNT */* COMPLETE */*')
+      })
+
+  }
+
+
+
+}
+
+

package/src/app/components/utils/avatar-profile/avatar-profile.component.html

@@ -1,6 +1,12 @@
-<div *ngIf="itemAvatar" class="avatar-circle" [style.width]="itemAvatar.width" [style.height]="itemAvatar.height">
-  <!-- [style.background-color]="itemAvatar.color" -->
+<!-- <div *ngIf="itemAvatar" class="avatar-circle" [style.width]="itemAvatar.width" [style.height]="itemAvatar.height">
+
   <div class="avatar avatar-placeholder" [ngStyle]="{'background':  'linear-gradient(rgb(255,255,255) -125%,' + color + ')'}" [innerHTML]="avatar" ></div>
-  <!-- <div class="avatar avatar-image" [style.background-image]="'url(' + itemAvatar.imageurl + ')'" ></div>  -->
+ 
   <div *ngIf="avatarUrl" class="avatar avatar-image" [style.background-image]="'url(' + avatarUrl + ')'" ></div>    
+</div> -->
+
+<div *ngIf="itemAvatar" class="avatar-circle" [style.width]="itemAvatar.width" [style.height]="itemAvatar.height">
+  <!-- [style.background-color]="itemAvatar.color" -->
+  <div class="avatar avatar-placeholder" [ngStyle]="{'background':  'linear-gradient(rgb(255,255,255) -125%,' + itemAvatar.color + ')'}" [innerHTML]="itemAvatar.avatar" ></div>
+  <div class="avatar avatar-image" [style.background-image]="'url(' + itemAvatar.imageurl + ')'" ></div>    
 </div>

package/src/app/components/utils/avatar-profile/avatar-profile.component.ts

@@ -16,14 +16,16 @@ export class AvatarProfileComponent implements OnInit, OnChanges {
   private logger: LoggerService = LoggerInstance.getInstance();
   constructor() {
     this.logger.log('AvatarProfileComponent:::: constructor');
-   }
+  }
 
   ngOnInit() {
     this.logger.log('AvatarProfileComponent:::: ngOnInit');
     // console.log('AvatarProfileComponent itemAvatar ',this.itemAvatar);
-    this.avatarUrl = this.itemAvatar.imageurl
-    this.avatar = this.itemAvatar.avatar
-    this.color = this.itemAvatar.color
+    if (this.itemAvatar) {
+      this.avatarUrl = this.itemAvatar.imageurl
+      this.avatar = this.itemAvatar.avatar
+      this.color = this.itemAvatar.color
+    }
     // console.log('AvatarProfileComponent avatarUrl ',this.avatarUrl);
     // console.log('AvatarProfileComponent avatar ',this.avatar);
     // console.log('AvatarProfileComponent color ',this.color);

package/src/app/pages/authentication/login/login.page.ts

@@ -144,7 +144,7 @@ export class LoginPage implements OnInit {
         this.presentToast(error_msg)
       })
       .finally(() => {
-        this.showSpinnerInLoginBtn = false;
+        // this.showSpinnerInLoginBtn = false;
         this.logger.log('[LOGIN PAGE] signInWithEmailAndPassword ');
       });
 

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

@@ -42,7 +42,7 @@
               here is ignored
             </span>
 
-            <div class="overlay" *ngIf="tagsCannedFilter.length > 0;"></div>
+            <div class="overlay" *ngIf="tagsCannedFilter.length > 0 && HIDE_CANNED_RESPONSES === false"></div>
 
             <ng-template #content_welcome>
               <!-- <div class="messageFirst">
@@ -139,12 +139,13 @@
             <!-- ----------------------------------------------------------- -->
             <!-- Canned responses -->
             <!-- ----------------------------------------------------------- -->
-            <div id="canned" *ngIf="tagsCannedFilter.length > 0;">
+         
+            <div id="canned" *ngIf="tagsCannedFilter.length > 0 && HIDE_CANNED_RESPONSES === false">
               <ion-list class="canned-list">
                 <ion-item button="true" [ngClass]="{'is_active_item': i == arrowkeyLocation}" lines="none"
                   class="canned-item" id="{{'canned-item_'+ i }}"
                   *ngFor="let canned of tagsCannedFilter; let i = index;" [innerHtml]="canned.title"
-                  (click)="replaceTagInMessage(canned)">
+                  (click)="replaceTagInMessage(canned, $event)">
                 </ion-item>
               </ion-list>
             </div>
@@ -153,6 +154,7 @@
             <!-- openInfoConversation   {{openInfoConversation}} - isMobile {{isMobile}} -->
             <app-message-text-area
               *ngIf="(openInfoConversation === false && isMobile === true) || (openInfoConversation === true && isMobile === false) || (openInfoConversation === false && isMobile === false)"
+             
               [loggedUser]="loggedUser" 
               [conversationWith]="conversationWith" 
               [tagsCannedFilter]="tagsCannedFilter"

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

@@ -40,6 +40,7 @@ import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { TiledeskService } from '../../services/tiledesk/tiledesk.service';
 import { NetworkService } from '../../services/network-service/network.service';
+import { EventsService } from '../../services/events-service';
 
 @Component({
   selector: 'app-conversation-detail',
@@ -51,6 +52,8 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
   @ViewChild('ionContentChatArea', { static: false }) ionContentChatArea: IonContent;
   @ViewChild('rowMessageTextArea', { static: false }) rowTextArea: ElementRef;
 
+
+
   // @ViewChild('info_content', { static: false }) info_content_child : InfoContentComponent;
 
   showButtonToBottom = false; // indica lo stato del pulsante per scrollare la chat (showed/hidden)
@@ -90,6 +93,8 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
 
   public tagsCanned: any = [];
   public tagsCannedFilter: any = [];
+  public HIDE_CANNED_RESPONSES: boolean = false;
+
 
   public window: any = window;
   public styleMap: Map<string, string> = new Map();
@@ -164,7 +169,8 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     public presenceService: PresenceService,
     public toastController: ToastController,
     public tiledeskService: TiledeskService,
-    private networkService: NetworkService
+    private networkService: NetworkService,
+    private events: EventsService
   ) {
 
     // Change list on date change
@@ -533,23 +539,27 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     if (this.conversationWith && this.conversationsHandlerService && this.conv_type === 'active') {
       this.logger.log('[CONVS-DETAIL] - setHeaderContent getConversationDetail CALLING')
       this.conversationsHandlerService.getConversationDetail(this.conversationWith, (conv) => {
-        this.logger.log('[CONVS-DETAIL] - setHeaderContent getConversationDetail (active)', this.conversationWith, conv)
-        this.conversationAvatar = setConversationAvatar(
-          conv.conversation_with,
-          conv.conversation_with_fullname,
-          conv.channel_type
-        );
+        if (conv) {
+          this.logger.log('[CONVS-DETAIL] - setHeaderContent getConversationDetail (active)', this.conversationWith, conv)
+          this.conversationAvatar = setConversationAvatar(
+            conv.conversation_with,
+            conv.conversation_with_fullname,
+            conv.channel_type
+          );
+        }
         this.logger.log('[CONVS-DETAIL] - setHeaderContent > conversationAvatar: ', this.conversationAvatar);
       })
     }
     else { //get conversation from 'conversations' firebase node
       this.archivedConversationsHandlerService.getConversationDetail(this.conversationWith, (conv) => {
-        this.logger.log('[CONVS-DETAIL] - setHeaderContent getConversationDetail (archived)', this.conversationWith, conv)
-        this.conversationAvatar = setConversationAvatar(
-          conv.conversation_with,
-          conv.conversation_with_fullname,
-          conv.channel_type
-        );
+        if (conv) {
+          this.logger.log('[CONVS-DETAIL] - setHeaderContent getConversationDetail (archived)', this.conversationWith, conv)
+          this.conversationAvatar = setConversationAvatar(
+            conv.conversation_with,
+            conv.conversation_with_fullname,
+            conv.channel_type
+          );
+        }
       })
     }
 
@@ -628,23 +638,23 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
         msg = `[${metadata.name}](${metadata.src})`
       }
     }
-    
+
     // else if (type === 'image') {
     //   if (msg) {
     //     // msg = msg + '<br>' + 'File: ' + metadata.src;
     //     msg = metadata.name + '\n' + msg
 
     //   } else {
-  
+
     //     msg = metadata.name
     //   }
- 
+
     // }
- 
+
 
     (metadata) ? metadata = metadata : metadata = '';
     this.logger.log('[CONVS-DETAIL] - SEND MESSAGE msg: ', msg, ' - messages: ', this.messages, ' - loggedUser: ', this.loggedUser);
- 
+
     if (msg && msg.trim() !== '' || type !== TYPE_MSG_TEXT) {
       this.conversationHandlerService.sendMessage(
         msg,
@@ -835,12 +845,12 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
 
   logScrolling(event: any) {
     // EVENTO IONIC-NATIVE: SCATTA SEMPRE, QUINDI DECIDO SE MOSTRARE O MENO IL BADGE 
-    this.logger.log('[CONVS-DETAIL] logScrolling: ', event);
+    // this.logger.log('[CONVS-DETAIL] logScrolling: ', event);
     this.detectBottom()
   }
 
   logScrollEnd(event: any) {
-    this.logger.log('[CONVS-DETAIL] logScrollEnd: ', event);
+    // this.logger.log('[CONVS-DETAIL] logScrollEnd: ', event);
   }
 
 
@@ -882,17 +892,83 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
       // ----------------------------------------------------------
       setTimeout(() => {
         if (this.conversationWith.startsWith("support-group")) {
-          var pos = message.lastIndexOf("/");
-          this.logger.log("[CONVS-DETAIL] - returnChangeTextArea - canned responses pos of / ", pos);
-          this.logger.log("[CONVS-DETAIL] - returnChangeTextArea - pos:: ", pos);
+
+          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) {
-            // if (pos === 0) {
-            // && that.tagsCanned.length > 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) {
+
+              // ------------------------------------------------------------------------------------------------------------------------------------------
+              // 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 = [];
           }
@@ -974,7 +1050,10 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
       this.logger.log('[CONVS-DETAIL] - loadTagsCanned  getCannedResponses RES', res);
 
       this.tagsCanned = res
-      this.showTagsCanned(strSearch);
+
+      if (this.HIDE_CANNED_RESPONSES === false) {
+        this.showTagsCanned(strSearch);
+      }
 
     }, (error) => {
       this.logger.error('[CONVS-DETAIL] - loadTagsCanned  getCannedResponses - ERROR  ', error);
@@ -1030,12 +1109,20 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     return str;
   }
 
-  replaceTagInMessage(canned) {
+  replaceTagInMessage(canned, event) {
+    this.logger.log("[CONVS-DETAIL] replaceTagInMessage  event ", event);
     const elTextArea = this.rowTextArea['el'];
     const textArea = elTextArea.getElementsByTagName('ion-textarea')[0];
+
     this.logger.log("[CONVS-DETAIL] replaceTagInMessage  textArea ", textArea);
     this.logger.log("[CONVS-DETAIL] replaceTagInMessage  textArea value", textArea.value)
 
+    // var lastChar =  textArea.value.substr(-1); // Selects the last character
+    // if (lastChar === '/') {         
+    //   textArea.value = textArea.value.substring(0, textArea.value.length() - 1);
+    // }
+    // this.insertAtCursor(this.textArea, textArea.value)
+
 
     this.arrowkeyLocation = -1
     this.tagsCannedFilter = [];
@@ -1051,12 +1138,14 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
 
     var strTEMP = textArea.value.replace(strSearch, canned.text);
     strTEMP = this.replacePlaceholderInCanned(strTEMP);
+    this.logger.log("[CONVS-DETAIL] replaceTagInMessage strSearch ", strTEMP);
     // strTEMP = this.replacePlaceholderInCanned(strTEMP);
     // textArea.value = '';
     // that.messageString = strTEMP;
     textArea.value = strTEMP;
     setTimeout(() => {
-      textArea.focus();
+      // textArea.focus();
+      textArea.setFocus();
       this.resizeTextArea();
     }, 200);
   }
@@ -1088,9 +1177,12 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
 
       if (event.key === 'Enter') {
         const canned_selected = this.tagsCannedFilter[this.arrowkeyLocation]
-
+        this.logger.log('[CONVS-DETAIL] replaceTagInMessage  canned_selected ', canned_selected)
         if (canned_selected) {
-          this.replaceTagInMessage(canned_selected)
+
+          this.replaceTagInMessage(canned_selected, 'enter')
+          // event.preventDefault();
+          // return false;
         }
       }
     }