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

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

@@ -22,6 +22,7 @@ import {
   IonContent,
   IonTextarea,
   IonButton,
+  IonInput,
 } from '@ionic/angular'
 
 // models
@@ -44,7 +45,7 @@ import { ArchivedConversationsHandlerService } from 'src/chat21-core/providers/a
 import { ConversationHandlerService } from 'src/chat21-core/providers/abstract/conversation-handler.service'
 import { ContactsService } from 'src/app/services/contacts/contacts.service'
 import { CannedResponsesService } from '../../services/canned-responses/canned-responses.service'
-import { compareValues, htmlEntities } from '../../../chat21-core/utils/utils'
+import { compareValues, getDateDifference, htmlEntities } from '../../../chat21-core/utils/utils'
 import { ImageRepoService } from 'src/chat21-core/providers/abstract/image-repo.service'
 import { PresenceService } from 'src/chat21-core/providers/abstract/presence.service'
 import { CreateCannedResponsePage } from 'src/app/pages/create-canned-response/create-canned-response.page'
@@ -100,7 +101,7 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
 
   private unsubscribe$: Subject<any> = new Subject<any>()
   private subscriptions: Array<any>
-  public tenant: string
+  public tenant: string;
   public loggedUser: UserModel
   public conversationWith: string
   public conversationWithFullname: string
@@ -128,10 +129,9 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
   public showIonContent = false
   public conv_type: string
 
-  public tagsCanned: any = []
-  public tagsCannedCount: number
-  public tagsCannedFilter: any = []
-  public HIDE_CANNED_RESPONSES: boolean = false
+  public messageStr: string;
+  public tagsCannedFilter: Array<any>= [];
+  public HIDE_CANNED_RESPONSES: boolean = true
 
   public window: any = window
   public styleMap: Map<string, string> = new Map()
@@ -140,7 +140,7 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
   MESSAGE_TYPE_MINE = MESSAGE_TYPE_MINE
   MESSAGE_TYPE_OTHERS = MESSAGE_TYPE_OTHERS
 
-  arrowkeyLocation = -1
+
   public_Key: any;
   areVisibleCAR: boolean;
   supportMode: boolean;
@@ -227,6 +227,8 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
 
       this.events.publish('supportconvid:haschanged', this.conversationWith)
     })
+
+
   }
 
   // -----------------------------------------------------------
@@ -481,7 +483,6 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     this.logger.log('[CONVS-DETAIL] - initialize -> conversationWith: ', this.conversationWith, ' -> conversationWithFullname: ', this.conversationWithFullname)
     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)
@@ -634,6 +635,8 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
       'INFO_SUPPORT_CHAT_REOPENED',
       'INFO_SUPPORT_CHAT_CLOSED',
       'INFO_A_NEW_SUPPORT_REQUEST_HAS_BEEN_ASSIGNED_TO_YOU',
+      'INFO_SUPPORT_LEAD_UPDATED',
+      'INFO_SUPPORT_MEMBER_LEFT_GROUP',
       'LABEL_TODAY',
       'LABEL_TOMORROW',
       'LABEL_LAST_ACCESS',
@@ -758,6 +761,8 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
                 conv.conversation_with_fullname,
                 conv.channel_type,
               )
+              let duration = getDateDifference(conv.timestamp, Date.now())
+              duration.days > 10? this.disableTextarea = true: this.disableTextarea = false
             }
           })
         }
@@ -768,11 +773,14 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
       this.logger.debug('[CONV-COMP] setHeaderContent getConversationDetail: archivedConversationsHandlerService', this.conversationWith, this.conv_type)
       this.archivedConversationsHandlerService.getConversationDetail(this.conversationWith, (conv) => {
         if (conv) {
+
           this.conversationAvatar = setConversationAvatar(
             conv.conversation_with,
             conv.conversation_with_fullname,
             conv.channel_type,
           )
+          let duration = getDateDifference(conv.timestamp, Date.now())
+          duration.days > 10? this.disableTextarea = true: this.disableTextarea = false
         }
         if(!conv){
           this.conversationsHandlerService.getConversationDetail(this.conversationWith, (conv) => {
@@ -797,10 +805,10 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     // this.logger.log('[CONVS-DETAIL] - setHeaderContent > conversationAvatar: ', this.conversationAvatar);
   }
 
+
+
   returnSendMessage(e: any) {
     this.logger.log('[CONVS-DETAIL] - returnSendMessage event', e, ' - conversationWith', this.conversationWith)
-
-    this.logger.log('[CONVS-DETAIL] - returnSendMessage event message', e.message)
     try {
       let message = ''
       if (e.message) {
@@ -822,12 +830,7 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
    * @param metadata
    * @param additional_attributes
    */
-  sendMessage(
-    msg: string,
-    type: string,
-    metadata?: any,
-    additional_attributes?: any,
-  ) {
+  sendMessage(msg: string, type: string, metadata?: any, additional_attributes?: any) {
     this.logger.log('[CONVS-DETAIL] - SEND MESSAGE - MSG: ', msg)
     this.logger.log('[CONVS-DETAIL] - SEND MESSAGE - type: ', type)
     this.logger.log('[CONVS-DETAIL] - SEND MESSAGE - metadata: ', metadata)
@@ -866,18 +869,6 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
       }
     }
 
-    // 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)
 
@@ -1032,7 +1023,7 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
       this.conversationAvatar = setConversationAvatar(
         this.conversationWith,
         this.conversationWithFullname,
-        this.conversationAvatar.channel_type
+        this.channelType
       )
       
     }
@@ -1158,7 +1149,7 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
             this.logger.log('[CONVS-DETAIL] - returnChangeTextArea - canned responses pos of / (using lastIndexOf) ', pos)
 
             if (pos === -1) {
-              this.tagsCannedFilter = []
+              // this.tagsCannedFilter = []
               this.HIDE_CANNED_RESPONSES = true
             }
             // test
@@ -1180,64 +1171,47 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
               // --------------------------------------------
               // Load canned responses
               // --------------------------------------------
-              this.loadTagsCanned(strSearch, this.conversationWith)
-
+              this.HIDE_CANNED_RESPONSES = false
+              this.messageStr = strSearch
               // ------------------------------------------------------------------------------------------------------------------------------------------
               // 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() === ''
-              ) {
+              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 = []
+                // 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] === '') {
+              //   // ------------------------------------------------------------------------------------------------------------------------------------------
+              //   // 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(0, pos)
+                  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)
+
+
+                  if(beforeSlash[beforeSlash.length-1].indexOf(' ') >= 0 && afterSlash[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] === '') {
+                  } else if(beforeSlash[beforeSlash.length-1].indexOf(' ') < 0 && afterSlash[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')
+                  } else if(beforeSlash[beforeSlash.length-1].indexOf(' ') >= 0 && afterSlash[0] === ' '){
                     this.HIDE_CANNED_RESPONSES = true
-                    this.tagsCannedFilter = []
+                    // this.tagsCannedFilter = []
                   }
                 }
-              }
             } else {
-              this.tagsCannedFilter = []
+              // this.tagsCannedFilter = []
             }
           }
         }, 300)
@@ -1248,140 +1222,12 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     }
   }
 
-  // ----------------------------------------------------------
-  // @ CANNED RESPONSES methods
-  // ----------------------------------------------------------
-  loadTagsCanned(strSearch, conversationWith) {
-    this.logger.log('[CONVS-DETAIL] - loadTagsCanned strSearch ', strSearch)
-    this.logger.log('[CONVS-DETAIL] - loadTagsCanned groupDetail ', this.groupDetail)
-    this.logger.log('[CONVS-DETAIL] - 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('[CONVS-DETAIL] - loadTagsCanned conversationWith_segments ', conversationWith_segments)
-    let projectId = ''
-
-    if (conversationWith_segments.length === 4) {
-      projectId = conversationWith_segments[2]
-      this.logger.log('[CONVS-DETAIL] - 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('[CONVS-DETAIL] - loadTagsCanned - GET PROJECTID BY CONV RECIPIENT RES', res)
-      if (res) {
-        const projectId = res.id_project
-        this.logger.log('[CONVS-DETAIL] - loadTagsCanned - GET PROJECTID BY CONV RECIPIENT projectId ', projectId)
-        if (projectId) {
-          this.getAndShowCannedResponses(strSearch, projectId)
-        }
-      }
-    }, (error) => {
-      this.logger.error('[CONVS-DETAIL] - loadTagsCanned - GET PROJECTID BY CONV RECIPIENT - ERROR  ', error)
-    }, () => {
-      this.logger.log('[CONVS-DETAIL] - loadTagsCanned - GET PROJECTID BY CONV RECIPIENT * COMPLETE *')
-    })
-  }
-
-  getAndShowCannedResponses(strSearch, projectId) {
-    const tiledeskToken = this.tiledeskAuthService.getTiledeskToken()
-    this.logger.log('[CONVS-DETAIL] - loadTagsCanned tagsCanned.length', this.tagsCanned.length)
-    //if(this.tagsCanned.length <= 0 ){
-    this.tagsCanned = []
-    this.cannedResponsesService.getCannedResponses(tiledeskToken, projectId).subscribe((res) => {
-      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)
-      }
-    }, (error) => {
-      this.logger.error('[CONVS-DETAIL] - loadTagsCanned  getCannedResponses - ERROR  ', error)
-    }, () => {
-      this.logger.log('[CONVS-DETAIL] - loadTagsCanned  getCannedResponses * COMPLETE *')
-    })
-  }
-
-  showTagsCanned(strSearch) {
-    this.logger.log('[CONVS-DETAIL] - showTagsCanned strSearch ', strSearch)
-    this.tagsCannedFilter = []
-    var tagsCannedClone = JSON.parse(JSON.stringify(this.tagsCanned))
-    this.logger.log('[CONVS-DETAIL] - showTagsCanned tagsCannedClone ', tagsCannedClone)
-    //this.logger.log("that.contacts lenght:: ", strSearch);
-    this.tagsCannedFilter = this.filterItems(tagsCannedClone, strSearch)
-    this.logger.log('[CONVS-DETAIL] - 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>'
-
-    }
-    if (this.tagsCannedCount === 0) {
-      // const button = this.renderer.createElement('button');
-      // const buttonText = this.renderer.createText('Click me');
-      // this.renderer.appendChild(button, buttonText);
-      // console.log('[CONVS-DETAIL] - 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:
-          "<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',
-      }
-      // } 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)
-    }
-  }
+  
 
   toggleSidebar() {
     // console.log('[CONVS-DETAIL] has clicked test')
   }
 
-  filterItems(items, searchTerm) {
-    this.logger.log('[CONVS-DETAIL] 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('[CONVS-DETAIL] filtered tagsCannedClone item ', item)
-      return (
-        item.title
-          .toString()
-          .toLowerCase()
-          .indexOf(searchTerm.toString().toLowerCase()) > -1
-      )
-    })
-  }
 
   replacePlaceholderInCanned(str) {
     this.logger.log('[CONVS-DETAIL] - replacePlaceholderInCanned str ', str)
@@ -1392,50 +1238,48 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     return str
   }
 
-  replaceTagInMessage(canned, event) {
-    if (this.tagsCannedCount > 0) {
-      // console.log('[CONVS-DETAIL] replaceTagInMessage  event ', event)
-      // console.log('[CONVS-DETAIL] replaceTagInMessage  canned ', canned)
-      // console.log('[CONVS-DETAIL] replaceTagInMessage  canned title', canned.title)
-      // console.log('[CONVS-DETAIL] replaceTagInMessage  canned contains nocannedTitle', canned.title.includes('nocannedTitle'))
+  onLoadedCannedResponses(event){
+    this.logger.log('[CONVS-DETAIL] onLoadedCannedResponses --> ',event)
+    if(event && event.length > 0 ){
+      this.tagsCannedFilter = event
+    } 
+  }
 
-      const elTextArea = this.rowTextArea['el']
-      const textArea = elTextArea.getElementsByTagName('ion-textarea')[0]
+  replaceTagInMessage(canned, event?) {
+    const elTextArea = this.rowTextArea['el']
+    const textArea = elTextArea.getElementsByTagName('ion-textarea')[0]
+    // console.log('[CONVS-DETAIL] replaceTagInMessage  textArea ', textArea)
+    // console.log('[CONVS-DETAIL] replaceTagInMessage  textArea value', textArea.value,)
 
-      // console.log('[CONVS-DETAIL] replaceTagInMessage  textArea ', textArea)
-      // console.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.logger.log('[CONVS-DETAIL] replaceTagInMessage  canned text ', canned.text)
+
+    // replace text
+    var strTEMP = textArea.value.replace(/\/$/ig, 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.setFocus()
+      // this.resizeTextArea()
+    }, 200)
+    
+  }
 
-      // 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 = []
-      this.logger.log('[CONVS-DETAIL] replaceTagInMessage  canned text ', canned.text)
-
-      // replace text
-      var pos = textArea.value.lastIndexOf('/')
-      var strSearch = textArea.value.substr(pos)
-      this.logger.log('[CONVS-DETAIL] replaceTagInMessage strSearch ', strSearch)
-
-      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.setFocus()
-        this.resizeTextArea()
-      }, 200)
-    }
-    else {
-      this.logger.log('[CONVS-DETAIL] THERE IS NOT CANNED ', canned.text)
-    }
+
+  closeListCannedResponse(){
+    this.logger.log('[CONVS-DETAIL] close list canned . . .  ')
+    this.HIDE_CANNED_RESPONSES = true
+    this.tagsCannedFilter = []
   }
 
   async presentCreateCannedResponseModal(): Promise<any> {
@@ -1458,27 +1302,22 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     return await modal.present()
   }
 
-  hasClickedOpenCannedResponses($event) {
-    this.logger.log('[CONVS-DETAIL] - hasClickedOpenCannedResponses ', $event)
+  onClickOpenCannedResponses($event) {
+    this.logger.log('[CONVS-DETAIL] - onClickOpenCannedResponses ', $event)
     const elTextArea = this.rowTextArea['el']
     const textArea = elTextArea.getElementsByTagName('ion-textarea')[0]
-
-    this.logger.log('[CONVS-DETAIL] hasClickedOpenCannedResponses  textArea ', textArea)
-    // console.log("[CONVS-DETAIL] hasClickedOpenCannedResponses  textArea value", textArea.value)
-    var lastChar = textArea.value[textArea.value.length - 1]
-    // console.log('[CONVS-DETAIL] hasClickedOpenCannedResponses lastChar', lastChar)
-    if (lastChar !== '/') {
-      this.insertAtCursor(textArea, '/')
+    if($event && elTextArea){
+      this.logger.log('[CONVS-DETAIL] onClickOpenCannedResponses  textArea ', textArea)
+      // console.log("[CONVS-DETAIL] onClickOpenCannedResponses  textArea value", textArea.value)
+      var lastChar = textArea.value[textArea.value.length - 1]
+      // console.log('[CONVS-DETAIL] onClickOpenCannedResponses lastChar', lastChar)
+      if (lastChar !== '/') {
+        this.insertAtCursor(textArea, '/')
+      }
+      this.setCaretPosition(textArea)
+    }else{
+      this.HIDE_CANNED_RESPONSES = true
     }
-    // console.log('[CONVS-DETAIL] hasClickedOpenCannedResponses textArea.value', textArea.value)
-    // setTimeout(() => {
-    //   // if (textArea.value === '/') {
-    //     // textArea.focus();
-    //     textArea.setFocus();
-    //   // }
-    // }, 1500);
-
-    this.setCaretPosition(textArea)
   }
 
   setCaretPosition(ctrl) {
@@ -1530,40 +1369,7 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     }
   }
 
-  @HostListener('document:keydown', ['$event'])
-  handleKeyboardEvent(event: KeyboardEvent) {
-    // this.logger.log("CONVERSATION-DETAIL handleKeyboardEvent  event.key ", event.key);
-
-    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.replaceTagInMessage(canned_selected, 'enter')
-          // event.preventDefault();
-          // return false;
-        }
-      }
-    }
-  }
+  
   // ----------------------------------------------------------
   // ./end CANNED RESPONSES methods
   // ----------------------------------------------------------
@@ -1593,11 +1399,11 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     }, 1000)
   }
 
-  returnOnBeforeMessageRender(event) {
+  onBeforeMessageRenderFN(event) {
     //this.onBeforeMessageRender.emit(event)
   }
 
-  returnOnAfterMessageRender(event) {
+  onAfterMessageRenderFN(event) {
     // this.onAfterMessageRender.emit(event)
   }
 
@@ -1607,7 +1413,7 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
 
   returnOnScrollContent(event: boolean) { }
 
-  returnOnAttachmentButtonClicked(event: any) {
+  onAttachmentButtonClickedFN(event: any) {
     this.logger.debug('[CONV-COMP] eventbutton', event)
     if (!event || !event.target.type) {
       return
@@ -1640,9 +1446,9 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     }
   }
 
-  onImageRenderedFN(event) {
+  onElementRenderedFN(event) {
     const imageRendered = event
-    if (this.showButtonToBottom) {
+    if (event.status && this.ionContentChatArea) {
       this.scrollBottom(0)
     }
   }
@@ -1845,41 +1651,25 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
 
     this.logger.log('[CONVS-DETAIL] ----> FILE - DROP ev ', ev)
     const fileList = ev.dataTransfer.files
-    this.logger.log(
-      '[CONVS-DETAIL] ----> FILE - DROP ev.dataTransfer.files ',
-      fileList,
-    )
+    this.logger.log('[CONVS-DETAIL] ----> FILE - DROP ev.dataTransfer.files ',fileList)
     this.isHovering = false
-    this.logger.log(
-      '[CONVS-DETAIL] ----> FILE - DROP isHovering ',
-      this.isHovering,
-    )
+    this.logger.log('[CONVS-DETAIL] ----> FILE - DROP isHovering ',this.isHovering)
     if (fileList.length > 0) {
       const file: File = fileList[0]
       this.logger.log('[CONVS-DETAIL] ----> FILE - DROP file ', file)
 
       var mimeType = fileList[0].type
-      this.logger.log(
-        '[CONVS-DETAIL] ----> FILE - DROP mimeType files ',
-        mimeType,
-      )
+      this.logger.log('[CONVS-DETAIL] ----> FILE - DROP mimeType files ', mimeType)
 
       // if (mimeType.startsWith("image") || mimeType.startsWith("application")) {
       // this.logger.log('[CONVS-DETAIL] ----> FILE - DROP mimeType files: ', this.appConfigProvider.getConfig().fileUploadAccept);
       // this.checkAcceptedFile(mimeType);
       const isAccepted = this.checkAcceptedFile(mimeType)
-      this.logger.log(
-        '[CONVS-DETAIL] > checkAcceptedFile - fileUploadAccept isAcceptFile FILE - DROP',
-        isAccepted,
-      )
+      this.logger.log('[CONVS-DETAIL] > checkAcceptedFile - fileUploadAccept isAcceptFile FILE - DROP',isAccepted)
       if (isAccepted === true) {
         this.handleDropEvent(ev)
       } else {
-        this.logger.log(
-          '[CONVS-DETAIL] ----> FILE - DROP mimeType files ',
-          mimeType,
-          'NOT SUPPORTED FILE TYPE',
-        )
+        this.logger.log( '[CONVS-DETAIL] ----> FILE - DROP mimeType files ', mimeType,'NOT SUPPORTED FILE TYPE')
         this.presentToastOnlyImageFilesAreAllowedToDrag()
       }
     }
@@ -1896,10 +1686,7 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     ev.stopPropagation()
     this.logger.log('[CONVS-DETAIL] ----> FILE - (dragover) allowDrop ev ', ev)
     this.isHovering = true
-    this.logger.log(
-      '[CONVS-DETAIL] ----> FILE - (dragover) allowDrop isHovering ',
-      this.isHovering,
-    )
+    this.logger.log('[CONVS-DETAIL] ----> FILE - (dragover) allowDrop isHovering ',this.isHovering)
   }
 
   // DRAG LEAVE (WHEN LEAVE FROM THE DROP ZONE)
@@ -1908,17 +1695,12 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     ev.stopPropagation()
     this.logger.log('[CONVS-DETAIL] ----> FILE - (dragleave) drag ev ', ev)
     this.isHovering = false
-    this.logger.log(
-      '[CONVS-DETAIL] ----> FILE - FILE - (dragleave) drag his.isHovering ',
-      this.isHovering,
-    )
+    this.logger.log('[CONVS-DETAIL] ----> FILE - FILE - (dragleave) drag his.isHovering ',this.isHovering)
   }
 
   async presentToastOnlyImageFilesAreAllowedToDrag() {
     const toast = await this.toastController.create({
-      message: this.translationMap.get(
-        'FAILED_TO_UPLOAD_THE_FORMAT_IS_NOT_SUPPORTED',
-      ),
+      message: this.translationMap.get('FAILED_TO_UPLOAD_THE_FORMAT_IS_NOT_SUPPORTED'),
       duration: 5000,
       color: 'danger',
       cssClass: 'toast-custom-class',