@chat21/chat21-ionic 3.0.75 → 3.0.76-rc.2

package/src/app/components/canned-response/canned-response.component.ts

@@ -0,0 +1,281 @@
+import { Component, Input, OnInit, SimpleChange, ElementRef, Output, EventEmitter, HostListener } from '@angular/core';
+import { CreateCannedResponsePage } from 'src/app/pages/create-canned-response/create-canned-response.page';
+import { CannedResponsesService } from 'src/app/services/canned-responses/canned-responses.service';
+import { TiledeskService } from 'src/app/services/tiledesk/tiledesk.service';
+import { UserModel } from 'src/chat21-core/models/user';
+import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
+import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
+import { TiledeskAuthService } from 'src/chat21-core/providers/tiledesk/tiledesk-auth.service';
+import { compareValues, htmlEntities } from 'src/chat21-core/utils/utils';
+
+@Component({
+  selector: 'app-canned-response',
+  templateUrl: './canned-response.component.html',
+  styleUrls: ['./canned-response.component.scss'],
+})
+export class CannedResponseComponent implements OnInit {
+
+  // @Input() tagsCannedFilter: any = []
+  @Input() conversationWith: string;
+  @Input() conversationWithFullname: string;
+  @Input() currentString: string;
+  @Input() translationMap: Map<string, string>;
+  @Output() onLoadedCannedResponses = new EventEmitter<[any]>();
+  @Output() onClickCanned = new EventEmitter<any>();
+  @Output() onClickAddCannedResponse = new EventEmitter();
+  public loggedUser: UserModel
+  
+  public tagsCanned: any = []
+  public tagsCannedCount: number
+  public tagsCannedFilter: any = []
+
+  public arrowkeyLocation = -1
+  
+  private logger: LoggerService = LoggerInstance.getInstance();
+  constructor(
+    public tiledeskAuthService: TiledeskAuthService,
+    public tiledeskService: TiledeskService,
+    public cannedResponsesService: CannedResponsesService,
+    public el: ElementRef
+  ) { }
+
+  ngOnInit() {
+    this.loggedUser = this.tiledeskAuthService.getCurrentUser()
+  }
+
+  ngOnChanges(changes: SimpleChange){
+    this.logger.debug('[CANNED] - loadTagsCanned strSearch ', this.currentString)
+    if(this.currentString !== undefined){
+      this.loadTagsCanned(this.currentString, this.conversationWith)
+    }
+  }
+
+  // ----------------------------------------------------------
+  // @ CANNED RESPONSES methods
+  // ----------------------------------------------------------
+  loadTagsCanned(strSearch, conversationWith) {
+    this.logger.log('[CANNED] - loadTagsCanned strSearch ', strSearch)
+    this.logger.log('[CANNED] - loadTagsCanned conversationWith ', conversationWith)
+
+    const conversationWith_segments = conversationWith.split('-')
+    // Removes the last element of the array if is = to the separator
+    if (conversationWith_segments[conversationWith_segments.length - 1] === '') {
+      conversationWith_segments.pop()
+    }
+
+    this.logger.log('[CANNED] - loadTagsCanned conversationWith_segments ', conversationWith_segments)
+    let projectId = ''
+
+    if (conversationWith_segments.length === 4) {
+      projectId = conversationWith_segments[2]
+      this.logger.log('[CANNED] - loadTagsCanned projectId ', projectId)
+      this.getAndShowCannedResponses(strSearch, projectId)
+    } else {
+      this.getProjectIdByConversationWith(strSearch, this.conversationWith)
+    }
+  }
+
+  getProjectIdByConversationWith(strSearch, conversationWith: string) {
+    const tiledeskToken = this.tiledeskAuthService.getTiledeskToken()
+
+    this.tiledeskService.getProjectIdByConvRecipient(tiledeskToken, conversationWith).subscribe((res) => {
+      this.logger.log('[CANNED] - loadTagsCanned - GET PROJECTID BY CONV RECIPIENT RES', res)
+      if (res) {
+        const projectId = res.id_project
+        this.logger.log('[CANNED] - loadTagsCanned - GET PROJECTID BY CONV RECIPIENT projectId ', projectId)
+        if (projectId) {
+          this.getAndShowCannedResponses(strSearch, projectId)
+        }
+      }
+    }, (error) => {
+      this.logger.error('[CANNED] - loadTagsCanned - GET PROJECTID BY CONV RECIPIENT - ERROR  ', error)
+    }, () => {
+      this.logger.log('[CANNED] - loadTagsCanned - GET PROJECTID BY CONV RECIPIENT * COMPLETE *')
+    })
+  }
+
+  getAndShowCannedResponses(strSearch, projectId) {
+    const tiledeskToken = this.tiledeskAuthService.getTiledeskToken()
+    this.logger.log('[CANNED] - loadTagsCanned tagsCanned.length', this.tagsCanned.length)
+    //if(this.tagsCanned.length <= 0 ){
+    this.tagsCanned = []
+    this.cannedResponsesService.getAll(tiledeskToken, projectId).subscribe((res) => {
+      this.logger.log('[CANNED] - loadTagsCanned  getCannedResponses RES', res)
+
+      this.tagsCanned = res
+      this.tagsCannedCount = res.length
+      this.logger.log('[CANNED] - loadTagsCanned  getCannedResponses tagsCannedCount', this.tagsCannedCount)
+      // if (this.HIDE_CANNED_RESPONSES === false) {
+        this.showTagsCanned(strSearch)
+      // }
+    }, (error) => {
+      this.logger.error('[CANNED] - loadTagsCanned  getCannedResponses - ERROR  ', error)
+    }, () => {
+      this.logger.log('[CANNED] - loadTagsCanned  getCannedResponses * COMPLETE *')
+    })
+  }
+
+  showTagsCanned(strSearch) {
+    this.logger.log('[CANNED] - showTagsCanned strSearch ', strSearch)
+    this.tagsCannedFilter = []
+    var tagsCannedClone = JSON.parse(JSON.stringify(this.tagsCanned))
+    this.logger.log('[CANNED] - showTagsCanned tagsCannedClone ', tagsCannedClone)
+    //this.logger.log("that.contacts lenght:: ", strSearch);
+    this.tagsCannedFilter = this.filterItems(tagsCannedClone, strSearch)
+    this.logger.log('[CANNED] - showTagsCanned tagsCannedFilter ', this.tagsCannedFilter)
+
+    this.tagsCannedFilter.sort(compareValues('title', 'asc'))
+    var strReplace = strSearch
+    if (strSearch.length > 0) {
+      strReplace = "<b class='highlight-search-string'>" + strSearch + '</b>'
+    }
+    // for (var i = 0; i < this.tagsCannedFilter.length; i++) {
+    //   let text = htmlEntities(this.tagsCannedFilter[i].text);
+    //   // const textCanned = "<div class='cannedText'>" + this.replacePlaceholderInCanned(this.tagsCannedFilter[i].text) + '</div>'
+    //   const textCanned = "<div class='cannedText'>" + this.replacePlaceholderInCanned(text) + '</div>'
+    //   let title = htmlEntities(this.tagsCannedFilter[i].title)
+    //   // this.tagsCannedFilter[i].title = "<div class='cannedContent'><div class='cannedTitle'>" + this.tagsCannedFilter[i].title.toString().replace(strSearch, strReplace.trim()) + '</div>' + textCanned + '</div>'
+    //   this.tagsCannedFilter[i].title = "<div class='cannedContent'><div class='cannedTitle'>" + title.toString().replace(strSearch, strReplace.trim()) + '</div>' + textCanned + '</div>'
+    // }
+    this.tagsCannedFilter.forEach(canned => {
+      canned.text = this.replacePlaceholderInCanned(canned.text);
+      canned.disabled = true
+    });
+    if (this.tagsCannedCount === 0) {
+      // const button = this.renderer.createElement('button');
+      // const buttonText = this.renderer.createText('Click me');
+      // this.renderer.appendChild(button, buttonText);
+      // console.log('[CANNED] - this.el.nativeElement ', this.el.nativeElement)
+      // this.renderer.listen(button, 'click', () => { alert('hi'); });
+      // let nocanned = {}
+      // if (this.USER_ROLE !== 'agent') {
+      const nocanned = {
+        // "<div class='cannedContent'><div class='cannedTitle nocannedTitle #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>'
+        // <div class='cannedText no-canned-available-text'>" + this.translationMap.get('AddNewCannedResponse') + '</div>
+        title: this.translationMap.get('THERE_ARE_NO_CANNED_RESPONSES_AVAILABLE') ,
+        text: '',
+      }
+      // } else if (this.USER_ROLE === 'agent') {
+      //   nocanned = {
+      //     // "<div class='cannedContent'><div class='cannedTitle nocannedTitle #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>'
+      //     title:
+      //       "<div class='cannedContent'><div class='cannedTitle nocannedTitle #noCannedTitle'>" + this.translationMap.get('THERE_ARE_NO_CANNED_RESPONSES_AVAILABLE') + ".</div></div>",
+      //     text: 'There are no canned responses available',
+      //   }
+      // }
+      this.tagsCannedFilter.push(nocanned)
+    }
+    this.onLoadedCannedResponses.emit(this.tagsCannedFilter)
+  }
+
+  filterItems(items, searchTerm) {
+    this.logger.log('[CANNED] filterItems tagsCannedClone ', items, ' searchTerm: ', searchTerm)
+    //this.logger.log("filterItems::: ",searchTerm);
+    return items.filter((item) => {
+      //this.logger.log("filterItems::: ", item.title.toString().toLowerCase());
+      this.logger.log('[CANNED] filtered tagsCannedClone item ', item)
+      return item.title.toString().toLowerCase().indexOf(searchTerm.toString().toLowerCase()) > -1
+    })
+  }
+
+  replacePlaceholderInCanned(str) {
+    this.logger.log('[CANNED] - replacePlaceholderInCanned str ', str)
+    str = str.replace('$recipient_name', this.conversationWithFullname)
+    if (this.loggedUser && this.loggedUser.fullname) {
+      str = str.replace('$agent_name', this.loggedUser.fullname)
+    }
+    return str
+  }
+
+
+  onEditCanned(canned, ev){
+    ev.preventDefault()
+    ev.stopPropagation()
+    canned.disabled = false
+    this.logger.log('[CANNED] onEditCanned ', canned)
+    setTimeout(() => {
+      this.el.nativeElement.querySelector('#titleCanned_'+canned._id).setFocus()
+    }, 500);
+  }
+
+  onConfirmEditCanned(canned, ev){
+    ev.preventDefault()
+    ev.stopPropagation()
+    const tiledeskToken = this.tiledeskAuthService.getTiledeskToken()
+    this.logger.log('[CANNED] onConfirmEditCanned ', canned, ev)
+    this.cannedResponsesService.edit(tiledeskToken, canned.id_project, canned).subscribe(cannedRes=> {
+      canned.disabled = true
+    }, (error) => {
+      this.logger.error('[CANNED] - onConfirmEditCanned - ERROR  ', error)
+    }, () => {
+      this.logger.log('[CANNED] - onConfirmEditCanned * COMPLETE *')
+    })
+  }
+  
+  onDeleteCanned(canned, ev){
+    ev.preventDefault()
+    ev.stopPropagation()
+    const tiledeskToken = this.tiledeskAuthService.getTiledeskToken()
+    this.logger.log('[CANNED] onDeleteCanned ', canned)
+    this.cannedResponsesService.delete(tiledeskToken, canned.id_project, canned._id).subscribe(cannedRes=> {
+      if(cannedRes.status === 1000){
+        this.tagsCannedFilter.splice(this.tagsCannedFilter.findIndex(el => el._id === canned._id), 1)
+      }
+    }, (error) => {
+      this.logger.error('[CANNED] - onConfirmEditCanned - ERROR  ', error)
+    }, () => {
+      this.logger.log('[CANNED] - onConfirmEditCanned * COMPLETE *')
+    })
+  }
+
+  onClickCannedFN(canned, event){
+    if(!canned.disabled){
+      event.preventDefault();
+      event.stopPropagation();
+    } else if(this.tagsCannedCount > 0){
+      this.onClickCanned.emit(canned)
+    } else {
+      this.logger.log('[CANNED] THERE IS NOT CANNED ', canned.text)
+    }
+  }
+
+  onClickAddCannedResponseFN(){
+    this.onClickAddCannedResponse.emit()
+  }
+
+
+  @HostListener('document:keydown', ['$event'])
+  handleKeyboardEvent(event: KeyboardEvent) {
+    this.logger.log("CONVERSATION-DETAIL handleKeyboardEvent  event.key ", event);
+
+    if (this.tagsCannedFilter.length > 0) {
+      if (event.key === 'ArrowDown') {
+        this.arrowkeyLocation++
+        if (this.arrowkeyLocation === this.tagsCannedFilter.length) {
+          this.arrowkeyLocation--
+        }
+        // this.replaceTagInMessage(this.tagsCannedFilter[this.arrowkeyLocation])
+      } else if (event.key === 'ArrowUp') {
+        if (this.arrowkeyLocation > 0) {
+          this.arrowkeyLocation--
+        } else if (this.arrowkeyLocation < 0) {
+          this.arrowkeyLocation++
+        }
+        // this.replaceTagInMessage(this.tagsCannedFilter[this.arrowkeyLocation])
+      }
+
+      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.arrowkeyLocation = -1
+          this.tagsCannedFilter = []
+          this.onClickCanned.emit(canned_selected)
+          // event.preventDefault();
+          // return false;
+        }
+      }
+    }
+  }
+
+}

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

@@ -68,9 +68,7 @@
               style="font-size: 30px;transform: rotate(42deg);"></ion-icon>
             <input #fileInput type="file" (change)="onFileSelected($event)" capture="camera" id="file-input"
               [accept]="fileUploadAccept">
-
           </ion-button>
-
         </div>
 
         <!-- <ion-icon (click)="showEmojiPicker = !showEmojiPicker" color="secondary" name="happy" style="zoom:2;"></ion-icon> -->

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

@@ -1,5 +1,5 @@
 import { UserModel } from 'src/chat21-core/models/user';
-import { Component, OnInit, Output, EventEmitter, Input, AfterViewInit, ViewChild, ElementRef, OnChanges, HostListener, Renderer2 } from '@angular/core';
+import { Component, OnInit, Output, EventEmitter, Input, AfterViewInit, ViewChild, ElementRef, OnChanges, HostListener, Renderer2, SimpleChange, SimpleChanges } from '@angular/core';
 
 import { Chooser } from '@ionic-native/chooser/ngx';
 import { IonTextarea, ModalController, ToastController } from '@ionic/angular';
@@ -43,7 +43,7 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
 
   @Input() loggedUser: UserModel;
   @Input() conversationWith: string;
-  @Input() tagsCannedFilter: any = [];
+  @Input() tagsCannedFilter: any;
   @Input() tagsCannedCount: number;
   @Input() areVisibleCAR: boolean;
   @Input() supportMode: boolean;
@@ -52,11 +52,11 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
   @Input() isOpenInfoConversation: boolean;
   @Input() translationMap: Map<string, string>;
   @Input() dropEvent: any;
+  @Input() disableTextarea: boolean;
   @Output() eventChangeTextArea = new EventEmitter<object>();
-  @Output() hasClickedOpenCannedResponses = new EventEmitter<boolean>();
   @Output() eventSendMessage = new EventEmitter<object>();
+  @Output() onClickOpenCannedResponses = new EventEmitter<boolean>();
   @Output() onPresentModalScrollToBottom = new EventEmitter<boolean>();
-  @Input() disableTextarea: boolean;
 
   public conversationEnabled = false;
   public messageString: string;
@@ -69,6 +69,7 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
   public currentWindowWidth: any;
   private logger: LoggerService = LoggerInstance.getInstance();
   public countClicks: number = 0;
+  public openCanned: boolean = false;
   public IS_SUPPORT_GROUP_CONVERSATION: boolean;
   public IS_ON_MOBILE_DEVICE: boolean;
   TYPE_MSG_TEXT = TYPE_MSG_TEXT;
@@ -140,9 +141,7 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
   }
 
 
-
-
-  ngOnChanges() {
+  ngOnChanges(changes: SimpleChanges) {
     if (this.translationMap) {
       // this.LONG_TEXAREA_PLACEHOLDER = this.translationMap.get('LABEL_ENTER_MSG')
       // this.SHORT_TEXAREA_PLACEHOLDER = this.translationMap.get('LABEL_ENTER_MSG_SHORT')
@@ -580,7 +579,8 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
   }
 
   openCannedResponses() {
-    this.hasClickedOpenCannedResponses.emit(true);
+    this.openCanned = !this.openCanned
+    this.onClickOpenCannedResponses.emit(this.openCanned);
   }
 
 
@@ -698,8 +698,9 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
 
   @HostListener('document:keydown', ['$event'])
   handleKeyboardEvent(event: KeyboardEvent) {
-
+    this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] handleKeyboardEvent  event.key ", event);
     // Note: on mac keyboard "metakey" matches "cmd"
+    
     if (event.key === 'Enter' && event.altKey || event.key === 'Enter' && event.ctrlKey || event.key === 'Enter' && event.metaKey) {
       this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] HAS PRESSED COMBO KEYS this.messageString', this.messageString);
       if (this.messageString !== undefined && this.messageString.trim() !== '') {

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

@@ -1,3 +1,4 @@
+import { CannedResponseComponent } from './../../components/canned-response/canned-response.component';
 import { TruncatePipe } from './../../directives/truncate.pipe';
 import { IonConversationDetailComponent } from '../../chatlib/conversation-detail/ion-conversation-detail/ion-conversation-detail.component';
 import { TooltipModule } from 'ng2-tooltip-directive';
@@ -63,6 +64,7 @@ import { PickerModule } from '@ctrl/ngx-emoji-mart';
     ConversationDetailPage,
     HeaderConversationDetailComponent,
     MessageTextAreaComponent,
+    CannedResponseComponent,
     // BubbleDayMessageComponent,
     // BubbleSystemMessageComponent,
     // BubbleMyMessageComponent,

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

@@ -55,7 +55,7 @@
               here is ignored
             </span>
 
-            <div class="overlay" *ngIf="tagsCannedFilter.length > 0 && HIDE_CANNED_RESPONSES === false"></div>
+            <div class="overlay" *ngIf="!HIDE_CANNED_RESPONSES"></div>
 
             <ng-template #content_welcome>
               <!-- <div class="messageFirst">
@@ -118,6 +118,7 @@
                 </ion-grid>
 
 
+
                 <ion-conversation-detail *ngIf="isHovering === false" #conversationContentDetail
                   [channelType]="channelType" 
                   [messages]="messages" 
@@ -126,12 +127,12 @@
                   [areVisibleCAR]="areVisibleCAR" 
                   [supportMode]= "supportMode" 
                   [stylesMap]="styleMap"
-                  (onBeforeMessageRender)="returnOnBeforeMessageRender($event)"
-                  (onAfterMessageRender)="returnOnAfterMessageRender($event)"
-                  (onAttachmentButtonClicked)="returnOnAttachmentButtonClicked($event)"
+                  (onBeforeMessageRender)="onBeforeMessageRenderFN($event)"
+                  (onAfterMessageRender)="onAfterMessageRenderFN($event)"
+                  (onAttachmentButtonClicked)="onAttachmentButtonClickedFN($event)"
                   (onScrollContent)="returnOnScrollContent($event)" 
                   (onMenuOptionShow)="returnOnMenuOption($event)"
-                  (onImageRendered)="onImageRenderedFN($event)"
+                  (onElementRendered)="onElementRenderedFN($event)"
                   (onAddUploadingBubble)="addUploadingBubbleEvent($event)">
                 </ion-conversation-detail>
 
@@ -149,25 +150,53 @@
             <!-- ----------------------------------------------------------- -->
             <!-- Canned responses -->
             <!-- ----------------------------------------------------------- -->
-            <div id="canned">
-              <ion-list class="canned-list" *ngIf="tagsCannedFilter.length > 0 && HIDE_CANNED_RESPONSES === false">
+            <app-canned-response *ngIf="HIDE_CANNED_RESPONSES === false"
+              id="canned"
+              [conversationWith]="conversationWith"
+              [conversationWithFullname]="conversationWithFullname"
+              [currentString]="messageStr"
+              [translationMap]="translationMap"
+              (onLoadedCannedResponses)="onLoadedCannedResponses($event)"
+              (onClickCanned)="replaceTagInMessage($event)"
+              (onClickAddCannedResponse)="presentCreateCannedResponseModal()">
+            </app-canned-response>
+            
+            
+            <!-- <div id="canned" *ngIf="tagsCannedFilter.length > 0 && HIDE_CANNED_RESPONSES === false">
+              <div class="header">
+                  <ion-item lines="none"> <ion-icon class="canned-response-icon-header"  name="flash-outline"></ion-icon> Canned responses</ion-item>
+                  <ion-item lines="none" (click)="presentCreateCannedResponseModal()">
+                    <ion-icon class="canned-response-icon-header" name="add" slot="start"></ion-icon>
+                     New response
+                  </ion-item>
+                  <ion-item lines="none" (click)="closeListCannedResponse()"> <ion-icon class="canned-response-icon-header" name="close" ></ion-icon></ion-item>
+              </div>
+              <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"
+                  class="canned-item no-ripple border" id="{{'canned-item_'+ i }}"
+                  *ngFor="let canned of tagsCannedFilter; let i = index;"
                   (click)="replaceTagInMessage(canned, $event)">
+                  <div class="cannedContent">
+                    <ion-input [(ngModel)]="canned.title" class="title" id="{{'titleCanned_'+canned._id}}" [disabled]="canned.disabled"></ion-input>
+                    <ion-input [(ngModel)]="canned.text" class="text" [disabled]="canned.disabled"></ion-input>
+                  </div>
+                  <ion-icon class="canned-item-icon"  name="checkmark-sharp" slot=end *ngIf="canned.createdBy === loggedUser.uid && !canned.disabled" (click)="onConfirmEditCanned(canned, $event)"></ion-icon>
+                  <ion-icon class="canned-item-icon"  name="pencil-sharp" slot=end *ngIf="canned.createdBy === loggedUser.uid && canned.disabled" (click)="onEditCanned(canned, $event)"></ion-icon>
+                  <ion-icon class="canned-item-icon"  name="trash-sharp" slot=end *ngIf="canned.createdBy === loggedUser.uid" (click)="onDeleteCanned(canned, $event)"></ion-icon>
                 </ion-item>
+                
                 <ion-item  class="canned-item add-canned-response-wpr" button="true" lines="none" (click)="presentCreateCannedResponseModal()">
                   <ion-icon class="add-canned-response-icon"  name="flash-outline"></ion-icon>
                   <span class="add-canned-response-add-icon">+</span>
                  <label class="add-canned-response-label" >{{translationMap?.get('AddNewCannedResponse')}}</label> 
                 </ion-item>
               </ion-list>
-              <!-- <ion-list class="canned-list" *ngIf="tagsCannedFilter.length === 0 && HIDE_CANNED_RESPONSES === false">
+              <!- - <ion-list class="canned-list" *ngIf="tagsCannedFilter.length === 0 && HIDE_CANNED_RESPONSES === false">
                 <ion-item button="true" >
                   There are no canned responses available
                 </ion-item>
-              </ion-list> -->
-            </div>
+              </ion-list> - ->
+            </div> -->
 
 
 
@@ -188,7 +217,7 @@
               [dropEvent]="dropEvent"
               [disableTextarea]="disableTextarea"
               (eventChangeTextArea)="returnChangeTextArea($event)"
-              (hasClickedOpenCannedResponses)="hasClickedOpenCannedResponses($event)"
+              (onClickOpenCannedResponses)="onClickOpenCannedResponses($event)"
               (eventSendMessage)="returnSendMessage($event)" 
               (onPresentModalScrollToBottom)="onPresentModalScrollToBottom($event)">
             </app-message-text-area>

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

@@ -25,22 +25,7 @@
     font-size: 24px;
 }
 
-.add-canned-response-icon {
-    color: #b3bfd0;
-    cursor: pointer;
-    font-size: 18px;
-}
-.add-canned-response-label {
-    color: #b3bfd0;
-    cursor: pointer;
-}
-.add-canned-response-add-icon {
-    color: #b3bfd0;
-    cursor: pointer;
-    position: relative;
-    top: 4px;
-    left: -6px;
-}
+
 
 #canned > ion-list > ion-item.canned-item.add-canned-response-wpr:hover > span {
     color: #1877f2;
@@ -383,6 +368,20 @@ ion-content {
             }
         }
     }
+
+    #canned {
+        z-index: 99999;
+        width: 100%;
+        // background: rgba(237,240,244,.9);
+        // position: fixed;
+        // top: 0;
+        // bottom: 0;
+        // left: 0;
+        // right: 0;
+        // overflow: hidden;
+    }
+
+    
 }
 
 .chat-area-apps-sidebar-wide {
@@ -488,13 +487,9 @@ ion-content {
     right: 0;
     left: 0;
     bottom: 0;
-    z-index: 99998; // here plz remove this comma
+    // z-index: 99998; // here plz remove this comma
 }
 
-.is_active_item {
-    // background-color: #eaf1fd!important;
-    --background: #eaf1fd !important;
-}
 
 // -------------------------------------------------------------
 // DRAG FILE