@chat21/chat21-ionic 3.0.62-rc2 → 3.0.64-rc1

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

@@ -143,7 +143,7 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
   arrowkeyLocation = -1
   public_Key: any;
   areVisibleCAR: boolean;
-  support_mode: boolean;
+  supportMode: boolean;
   //SOUND
   setTimeoutSound: any;
   audio: any;
@@ -166,6 +166,7 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
   public checkInternet: boolean;
   public msgCount: number;
   public disableTextarea: boolean;
+  appsidebarIsWide: boolean;
 
   /**
    * Constructor
@@ -252,8 +253,44 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     this.watchToConnectionStatus();
     this.getOSCODE();
     this.getStoredProjectAndUserRole();
+    this.listenToDsbrdPostMsgs();
   }
 
+  listenToDsbrdPostMsgs() {
+
+    window.addEventListener("message", (event) => {
+      this.logger.log("[CONVS-DETAIL] message event ", event);
+
+      // const chat21InfoConversationEle = <HTMLElement>document.querySelector('#chat21-info-conversation');
+      // console.log('[CONVS-DETAIL] HAS CLICKED ENLARGE SIDEBAR WIDE chat21InfoConversationEle ', chat21InfoConversationEle)
+
+      // const chatAreaEle = <HTMLElement>document.querySelector('#chatArea');
+      // console.log('[CONVS-DETAIL] HAS CLICKED ENLARGE SIDEBAR WIDE chatAreaEle ', chatAreaEle)
+
+      if (event && event.data && event.data.action && event.data.action === 'openAppsSidebarWideMode' && event.data.parameter === true) {
+        this.logger.log('[CONVS-DETAIL] HERE YES 1')
+        this.appsidebarIsWide = true
+        // chat21InfoConversationEle.classList.add("info-convs-apps-sidebar-wide");
+        // chatAreaEle.classList.add("chat-area-apps-sidebar-wide");
+      }
+
+      if (event && event.data && event.data.action && event.data.action === 'openAppsSidebarWideMode' && event.data.parameter === false) {
+        this.logger.log('[CONVS-DETAIL] HERE YES 2')
+        this.appsidebarIsWide = false
+        // chat21InfoConversationEle.classList.remove("info-convs-apps-sidebar-wide");
+        // chatAreaEle.classList.remove("chat-area-apps-sidebar-wide");
+      }
+
+      if (event && event.data && event.data.action && event.data.action === 'closeAppsSidebarWideMode' && event.data.parameter === true) {
+        this.logger.log('[CONVS-DETAIL] HERE YES 3')
+        this.appsidebarIsWide = false
+        // chat21InfoConversationEle.classList.remove("info-convs-apps-sidebar-wide");
+        // chatAreaEle.classList.remove("chat-area-apps-sidebar-wide");
+      }
+    })
+  }
+
+
   getStoredProjectAndUserRole() {
     const stored_project = localStorage.getItem('last_project')
     // console.log('[SIDEBAR] stored_project ', stored_project)
@@ -276,7 +313,6 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
       const conversations = this.conversationsHandlerService.conversations
       // console.log('[CONVS-DETAIL] conversations', conversations);
       this.conversation_count = conversations.length
-      this.logger.log('[CONVS-DETAIL] conversation_count', this.conversation_count)
     })
 
     this.conversationsHandlerService.conversationChanged.subscribe((conv) => {
@@ -284,10 +320,22 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
       const conversations = this.conversationsHandlerService.conversations
       // console.log('[CONVS-DETAIL] conversations', conversations);
       this.conversation_count = conversations.length
-      this.logger.log(
-        '[CONVS-DETAIL] conversation_count',
-        this.conversation_count,
-      )
+      if (conv && conv.sender !== this.loggedUser.uid) {
+        this.logger.log('[CONVS-DETAIL] subscribe to BSConversationsChange data sender ', conv.sender)
+        this.logger.log('[CONVS-DETAIL] subscribe to BSConversationsChange this.loggedUser.uid ', this.loggedUser.uid)
+        this.logger.log('[CONVS-DETAIL] subscribe to BSConversationsChange is_new ', conv.is_new)
+        this.logger.log('[CONVS-DETAIL] subscribe to  BSConversationsChange showButtonToBottom ', this.showButtonToBottom)
+        // UPDATE THE CONVERSATION TO 'READ' IF IT IS ME WHO WRITES THE LAST MESSAGE OF THE CONVERSATION
+        // AND IF THE POSITION OF THE SCROLL IS AT THE END
+        if (!this.showButtonToBottom && conv.is_new) {
+          // ARE AT THE END
+          this.updateConversationBadge()
+        }
+        if(conv.uid && conv.uid === this.conversationWith){
+          this.conversationAvatar = setConversationAvatar(conv.conversation_with,conv.conversation_with_fullname,conv.channel_type)
+        }
+
+      }
     })
 
     this.conversationsHandlerService.conversationRemoved.subscribe((conv) => {
@@ -295,10 +343,7 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
       const conversations = this.conversationsHandlerService.conversations
       // console.log('[CONVS-DETAIL] conversations', conversations);
       this.conversation_count = conversations.length
-      this.logger.log(
-        '[CONVS-DETAIL] conversation_count',
-        this.conversation_count,
-      )
+      this.logger.log('[CONVS-DETAIL] conversation_count', this.conversation_count)
     })
 
     setTimeout(() => {
@@ -307,15 +352,15 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
   }
 
   getOSCODE() {
-    this.support_mode = null
-    if( this.appConfigProvider.getConfig().supportMode === true ||  this.appConfigProvider.getConfig().supportMode === 'true') {
-      this.support_mode = true
-    } else if ( this.appConfigProvider.getConfig().supportMode === false  ||  this.appConfigProvider.getConfig().supportMode === 'false') {
-      this.support_mode = false
-    } else if ( !this.appConfigProvider.getConfig().supportMode ) {
-      this.support_mode = false
+    this.supportMode = null
+    if (this.appConfigProvider.getConfig().supportMode === true || this.appConfigProvider.getConfig().supportMode === 'true') {
+      this.supportMode = true
+    } else if (this.appConfigProvider.getConfig().supportMode === false || this.appConfigProvider.getConfig().supportMode === 'false') {
+      this.supportMode = false
+    } else if (!this.appConfigProvider.getConfig().supportMode) {
+      this.supportMode = false
     }
-    this.logger.log('[CONVS-DETAIL] AppConfigService getAppConfig support_mode', this.support_mode)
+    this.logger.log('[CONVS-DETAIL] AppConfigService getAppConfig supportMode', this.supportMode)
     this.public_Key = this.appConfigProvider.getConfig().t2y12PruGU9wUtEGzBJfolMIgK
     this.logger.log('[CONVS-DETAIL] AppConfigService getAppConfig public_Key', this.public_Key)
 
@@ -328,26 +373,17 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
           let car = key.split(':')
           if (car[1] === 'F') {
             this.areVisibleCAR = false
-            this.logger.log(
-              '[CONVS-DETAIL] PUBLIC-KEY - areVisibleCAR',
-              this.areVisibleCAR,
-            )
+            this.logger.log('[CONVS-DETAIL] PUBLIC-KEY - areVisibleCAR',this.areVisibleCAR)
           } else {
             this.areVisibleCAR = true
-            this.logger.log(
-              '[CONVS-DETAIL] PUBLIC-KEY - areVisibleCAR',
-              this.areVisibleCAR,
-            )
+            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,
-        )
+        this.logger.log('[CONVS-DETAIL] PUBLIC-KEY - areVisibleCAR',this.areVisibleCAR)
       }
     } else {
       this.areVisibleCAR = false
@@ -430,21 +466,6 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
   //  @ Inizialize
   // --------------------------------------------------
   initialize() {
-    // this.logger.log('[CONVS-DETAIL] x conversationWith getConversationDetail', this.conversationWith)
-    // this.logger.log('[CONVS-DETAIL] x conversationsHandlerService getConversationDetail', this.conversationsHandlerService)
-    // this.logger.log('[CONVS-DETAIL] x this.conv_type getConversationDetail', this.conv_type)
-
-    // if (this.conversationWith && this.conversationsHandlerService && this.conv_type === 'active') {
-    //   this.conversationsHandlerService.getConversationDetail(this.conversationWith, (conv) => {
-    //     this.logger.log('[CONVS-DETAIL] x conversationsHandlerService getConversationDetail', this.conversationWith, conv)
-    //   })
-    // }
-    // else { //get conversation from 'conversations' firebase node
-    //   this.archivedConversationsHandlerService.getConversationDetail(this.conversationWith, (conv) => {
-    //     this.logger.log('[CONVS-DETAIL] x archivedConversationsHandlerService getConversationDetail', this.conversationWith, conv)
-
-    //   })
-    // }
 
     this.loggedUser = this.tiledeskAuthService.getCurrentUser()
     this.logger.log('[CONVS-DETAIL] - initialize -> loggedUser: ', this.loggedUser)
@@ -454,7 +475,6 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     this.showMessageWelcome = false
 
     const appconfig = this.appConfigProvider.getConfig()
-    // this.tenant = appconfig.tenant;
     this.tenant = appconfig.firebaseConfig.tenant
     this.logger.log('[CONVS-DETAIL] - initialize -> firebaseConfig tenant ', this.tenant)
 
@@ -473,40 +493,21 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
       this.logger.log('[CONVS-DETAIL] - initialize -> checkPlatformIsMobile isMobile? ', this.isMobile)
     } else {
       this.isMobile = false
-      this.logger.log(
-        '[CONVS-DETAIL] - initialize -> checkPlatformIsMobile isMobile? ',
-        this.isMobile,
-      )
+      this.logger.log('[CONVS-DETAIL] - initialize -> checkPlatformIsMobile isMobile? ', this.isMobile)
       // this.openInfoConversation = true;
     }
 
     if (this.isMobile === false) {
       if (checkWindowWidthIsLessThan991px()) {
-        this.logger.log(
-          '[CONVS-DETAIL] - initialize -> checkWindowWidthIsLessThan991px ',
-          checkWindowWidthIsLessThan991px(),
-        )
+        this.logger.log('[CONVS-DETAIL] - initialize -> checkWindowWidthIsLessThan991px ', checkWindowWidthIsLessThan991px())
         this.openInfoConversation = false // indica se è aperto il box info conversazione
         this.isOpenInfoConversation = false
-        this.logger.log(
-          '[CONVS-DETAIL] - initialize -> openInfoConversation ',
-          this.openInfoConversation,
-          ' -> isOpenInfoConversation ',
-          this.isOpenInfoConversation,
-        )
+        this.logger.log('[CONVS-DETAIL] - initialize -> openInfoConversation ', this.openInfoConversation, ' -> isOpenInfoConversation ', this.isOpenInfoConversation)
       } else {
-        this.logger.log(
-          '[CONVS-DETAIL] - initialize -> checkWindowWidthIsLessThan991px ',
-          checkWindowWidthIsLessThan991px(),
-        )
+        this.logger.log('[CONVS-DETAIL] - initialize -> checkWindowWidthIsLessThan991px ', checkWindowWidthIsLessThan991px())
         this.openInfoConversation = true
         this.isOpenInfoConversation = true
-        this.logger.log(
-          '[CONVS-DETAIL] - initialize -> openInfoConversation ',
-          this.openInfoConversation,
-          ' -> isOpenInfoConversation ',
-          this.isOpenInfoConversation,
-        )
+        this.logger.log('[CONVS-DETAIL] - initialize -> openInfoConversation ', this.openInfoConversation, ' -> isOpenInfoConversation ', this.isOpenInfoConversation)
       }
     }
 
@@ -582,10 +583,7 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
   }
 
   returnOpenCloseInfoConversation(openInfoConversation: boolean) {
-    this.logger.log(
-      '[CONVS-DETAIL] returnOpenCloseInfoConversation - openInfoConversation ',
-      openInfoConversation,
-    )
+    this.logger.log('[CONVS-DETAIL] returnOpenCloseInfoConversation - openInfoConversation ', openInfoConversation)
     this.resizeTextArea()
     this.openInfoMessage = false
     this.openInfoConversation = openInfoConversation
@@ -677,15 +675,8 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
   initConversationHandler() {
     const translationMap = this.setTranslationMapForConversationHandler()
     this.showMessageWelcome = false
-    const handler: ConversationHandlerService = this.chatManager.getConversationHandlerByConversationId(
-      this.conversationWith,
-    )
-    this.logger.log(
-      '[CONVS-DETAIL] - initConversationHandler - handler ',
-      handler,
-      ' conversationWith ',
-      this.conversationWith,
-    )
+    const handler: ConversationHandlerService = this.chatManager.getConversationHandlerByConversationId(this.conversationWith)
+    this.logger.log('[CONVS-DETAIL] - initConversationHandler - handler ', handler, ' conversationWith ', this.conversationWith)
     if (!handler) {
       this.conversationHandlerService = this.conversationHandlerBuilderService.build()
       this.conversationHandlerService.initialize(
@@ -696,15 +687,9 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
         translationMap,
       )
       this.conversationHandlerService.connect()
-      this.logger.log(
-        '[CONVS-DETAIL] - initConversationHandler - NEW handler - conversationHandlerService',
-        this.conversationHandlerService,
-      )
+      this.logger.log('[CONVS-DETAIL] - initConversationHandler - NEW handler - conversationHandlerService', this.conversationHandlerService)
       this.messages = this.conversationHandlerService.messages
-      this.logger.log(
-        '[CONVS-DETAIL] - initConversationHandler - messages: ',
-        this.messages,
-      )
+      this.logger.log('[CONVS-DETAIL] - initConversationHandler - messages: ', this.messages)
       this.chatManager.addConversationHandler(this.conversationHandlerService)
 
       // // wait 8 second and then display the message if there are no messages
@@ -773,15 +758,10 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     //   this.logger.log('[CONVS-DETAIL] - setHeaderContent conversationWith', this.conversationWith)
     //   this.logger.log('[CONVS-DETAIL] - setHeaderContent conversationsHandlerService', this.conversationsHandlerService)
     //   this.logger.log('[CONVS-DETAIL] - setHeaderContent conv_type', this.conv_type)
-    if (
-      this.conversationWith &&
-      this.conversationsHandlerService &&
-      this.conv_type === 'active'
-    ) {
+    if (this.conversationWith && this.conversationsHandlerService && this.conv_type === 'active') {
       this.logger.log('[CONVS-DETAIL] - setHeaderContent getConversationDetail CALLING')
       this.conversationsHandlerService.getConversationDetail(this.conversationWith, (conv) => {
         if (conv) {
-          // console.log( '[CONVS-DETAIL] - setHeaderContent getConversationDetail (active)', this.conversationWith, conv )
           this.conversationAvatar = setConversationAvatar(
             conv.conversation_with,
             conv.conversation_with_fullname,
@@ -789,23 +769,19 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
           )
         }
         this.logger.log('[CONVS-DETAIL] - setHeaderContent > conversationAvatar: ', this.conversationAvatar)
-      },
-      )
+      })
     } else {
       //get conversation from 'conversations' firebase node
-      this.archivedConversationsHandlerService.getConversationDetail(
-        this.conversationWith,
-        (conv) => {
-          if (conv) {
-            // console.log('[CONVS-DETAIL] - setHeaderContent getConversationDetail (archived)', this.conversationWith, 'CONVS', conv)
-            this.conversationAvatar = setConversationAvatar(
-              conv.conversation_with,
-              conv.conversation_with_fullname,
-              conv.channel_type,
-            )
-          }
-        },
-      )
+      this.archivedConversationsHandlerService.getConversationDetail(this.conversationWith, (conv) => {
+        if (conv) {
+          // console.log('[CONVS-DETAIL] - setHeaderContent getConversationDetail (archived)', this.conversationWith, 'CONVS', conv)
+          this.conversationAvatar = setConversationAvatar(
+            conv.conversation_with,
+            conv.conversation_with_fullname,
+            conv.channel_type,
+          )
+        }
+      })
     }
 
     // this.conversationAvatar = setConversationAvatar(
@@ -924,81 +900,71 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     let subscription: any
     let subscriptionKey: string
 
-    subscriptionKey = 'BSConversationsChanged'
-    subscription = this.subscriptions.find(
-      (item) => item.key === subscriptionKey,
-    )
-    if (!subscription) {
-      subscription = this.conversationsHandlerService.conversationChanged.subscribe(
-        (data: ConversationModel) => {
-          this.logger.log('[CONVS-DETAIL] subscribe BSConversationsChanged data ', data, ' this.loggedUser.uid:', this.loggedUser.uid)
-
-          if (data && data.sender !== this.loggedUser.uid) {
-            this.logger.log('[CONVS-DETAIL] subscribe to BSConversationsChange data sender ', data.sender)
-            this.logger.log('[CONVS-DETAIL] subscribe to BSConversationsChange this.loggedUser.uid ', this.loggedUser.uid)
-            this.logger.log('[CONVS-DETAIL] subscribe to BSConversationsChange is_new ', data.is_new)
-            this.logger.log('[CONVS-DETAIL] subscribe to  BSConversationsChange showButtonToBottom ', this.showButtonToBottom)
-            // UPDATE THE CONVERSATION TO 'READ' IF IT IS ME WHO WRITES THE LAST MESSAGE OF THE CONVERSATION
-            // AND IF THE POSITION OF THE SCROLL IS AT THE END
-            if (!this.showButtonToBottom && data.is_new) {
-              // ARE AT THE END
-              this.updateConversationBadge()
-            }
-          }
-        },
-      )
-      const subscribe = { key: subscriptionKey, value: subscription }
-      this.subscriptions.push(subscribe)
-    }
+    // subscriptionKey = 'BSConversationsChanged'
+    // subscription = this.subscriptions.find((item) => item.key === subscriptionKey)
+    // if (!subscription) {
+    //   subscription = this.conversationsHandlerService.conversationChanged.subscribe((data: ConversationModel) => {
+    //     this.logger.log('[CONVS-DETAIL] subscribe BSConversationsChanged data ', data, ' this.loggedUser.uid:', this.loggedUser.uid)
+
+    //     if (data && data.sender !== this.loggedUser.uid) {
+    //       this.logger.log('[CONVS-DETAIL] subscribe to BSConversationsChange data sender ', data.sender)
+    //       this.logger.log('[CONVS-DETAIL] subscribe to BSConversationsChange this.loggedUser.uid ', this.loggedUser.uid)
+    //       this.logger.log('[CONVS-DETAIL] subscribe to BSConversationsChange is_new ', data.is_new)
+    //       this.logger.log('[CONVS-DETAIL] subscribe to  BSConversationsChange showButtonToBottom ', this.showButtonToBottom)
+    //       // UPDATE THE CONVERSATION TO 'READ' IF IT IS ME WHO WRITES THE LAST MESSAGE OF THE CONVERSATION
+    //       // AND IF THE POSITION OF THE SCROLL IS AT THE END
+    //       if (!this.showButtonToBottom && data.is_new) {
+    //         // ARE AT THE END
+    //         this.updateConversationBadge()
+    //       }
+    //       if(data.uid === this.conversationWith){
+    //         this.conversationAvatar = setConversationAvatar(
+    //           data.conversation_with,
+    //           data.conversation_with_fullname,
+    //           data.channel_type,
+    //         )
+    //       }
+
+    //     }
+    //   })
+    //   const subscribe = { key: subscriptionKey, value: subscription }
+    //   this.subscriptions.push(subscribe)
+    // }
 
     subscriptionKey = 'messageAdded'
-    subscription = this.subscriptions.find(
-      (item) => item.key === subscriptionKey,
-    )
+    subscription = this.subscriptions.find((item) => item.key === subscriptionKey)
     if (!subscription) {
       this.logger.log('[CONVS-DETAIL] subscribe to messageAdded - conversationHandlerService', this.conversationHandlerService)
-      subscription = this.conversationHandlerService.messageAdded.subscribe(
-        (msg: any) => {
-          this.logger.log('[CONVS-DETAIL] subscribe to messageAdded - msg ', msg)
-          if (msg) {
-            that.newMessageAdded(msg)
-          }
-        },
-      )
+      subscription = this.conversationHandlerService.messageAdded.subscribe((msg: any) => {
+        this.logger.log('[CONVS-DETAIL] subscribe to messageAdded - msg ', msg)
+        if (msg) {
+          that.newMessageAdded(msg)
+          // this.setHeaderContent()
+        }
+      })
       const subscribe = { key: subscriptionKey, value: subscription }
       this.subscriptions.push(subscribe)
     }
 
     // IS USED ?
     subscriptionKey = 'messageChanged'
-    subscription = this.subscriptions.find(
-      (item) => item.key === subscriptionKey,
-    )
+    subscription = this.subscriptions.find((item) => item.key === subscriptionKey)
     if (!subscription) {
       this.logger.log('[CONVS-DETAIL] subscribe to messageChanged')
-      subscription = this.conversationHandlerService.messageChanged.subscribe(
-        (msg: any) => {
-          this.logger.log(
-            '[CONVS-DETAIL] subscribe to messageChanged - msg ',
-            msg,
-          )
-        },
-      )
+      subscription = this.conversationHandlerService.messageChanged.subscribe((msg: any) => {
+        this.logger.log('[CONVS-DETAIL] subscribe to messageChanged - msg ', msg)
+      })
       const subscribe = { key: subscriptionKey, value: subscription }
       this.subscriptions.push(subscribe)
     }
 
     subscriptionKey = 'messageRemoved'
-    subscription = this.subscriptions.find(
-      (item) => item.key === subscriptionKey,
-    )
+    subscription = this.subscriptions.find((item) => item.key === subscriptionKey)
     if (!subscription) {
       this.logger.log('[CONVS-DETAIL] subscribe to messageRemoved')
-      subscription = this.conversationHandlerService.messageRemoved.subscribe(
-        (messageId: any) => {
-          this.logger.log('[CONVS-DETAIL] subscribe to messageRemoved - messageId ', messageId)
-        },
-      )
+      subscription = this.conversationHandlerService.messageRemoved.subscribe((messageId: any) => {
+        this.logger.log('[CONVS-DETAIL] subscribe to messageRemoved - messageId ', messageId)
+      })
       const subscribe = { key: subscriptionKey, value: subscription }
       this.subscriptions.push(subscribe)
     }
@@ -1008,22 +974,15 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     // if (!subscription) {
     // subscription =
     if (this.conversationWith.startsWith('group-')) {
-      this.groupService
-        .onGroupChange(this.conversationWith)
-        .pipe(takeUntil(this.unsubscribe$))
-        .subscribe(
-          (groupDetail: any) => {
-            this.groupDetail = groupDetail
-            this.logger.log('[CONVS-DETAIL] subscribe to onGroupChange - groupDetail ', this.groupDetail)
-          },
-          (error) => {
-            this.logger.error('[CONVS-DETAIL] subscribe to onGroupChange  - ERROR  ', error)
-          },
-          () => {
-            this.logger.log('[CONVS-DETAIL] subscribe to onGroupChange  /* COMPLETE */')
-            this.groupDetail = null
-          },
-        )
+      this.groupService.onGroupChange(this.conversationWith).pipe(takeUntil(this.unsubscribe$)).subscribe((groupDetail: any) => {
+        this.groupDetail = groupDetail
+        this.logger.log('[CONVS-DETAIL] subscribe to onGroupChange - groupDetail ', this.groupDetail)
+      }, (error) => {
+        this.logger.error('[CONVS-DETAIL] subscribe to onGroupChange  - ERROR  ', error)
+      }, () => {
+        this.logger.log('[CONVS-DETAIL] subscribe to onGroupChange  /* COMPLETE */')
+        this.groupDetail = null
+      })
     }
     // const subscribe = { key: subscriptionKey, value: subscription };
     // this.subscriptions.push(subscribe);
@@ -1095,22 +1054,10 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
   }
 
   updateConversationBadge() {
-    if (
-      this.conversationWith &&
-      this.conversationsHandlerService &&
-      this.conv_type === 'active'
-    ) {
-      this.conversationsHandlerService.setConversationRead(
-        this.conversationWith,
-      )
-    } else if (
-      this.conversationWith &&
-      this.archivedConversationsHandlerService &&
-      this.conv_type === 'archived'
-    ) {
-      this.archivedConversationsHandlerService.setConversationRead(
-        this.conversationWith,
-      )
+    if (this.conversationWith && this.conversationsHandlerService && this.conv_type === 'active') {
+      this.conversationsHandlerService.setConversationRead(this.conversationWith)
+    } else if (this.conversationWith && this.archivedConversationsHandlerService && this.conv_type === 'archived') {
+      this.archivedConversationsHandlerService.setConversationRead(this.conversationWith)
     }
   }
 
@@ -1157,23 +1104,19 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
       // }
       idCurrentUser = this.loggedUser.uid
 
-      if (
-        this.loggedUser.firstname &&
-        this.loggedUser.firstname !== undefined
-      ) {
+      if (this.loggedUser.firstname && this.loggedUser.firstname !== undefined) {
         userFullname = this.loggedUser.firstname
       }
-      this.typingService.setTyping(
-        this.conversationWith,
-        message,
-        idCurrentUser,
-        userFullname,
-      )
+
+      /** DO NOT SET TYPING if message is empty */
+      if (message !== '') {
+        this.typingService.setTyping(this.conversationWith, message, idCurrentUser, userFullname)
+      }
 
       // ----------------------------------------------------------
       // DISPLAY CANNED RESPONSES if message.lastIndexOf("/")
       // ----------------------------------------------------------
-      if (this.areVisibleCAR && this.support_mode === true) {
+      if (this.areVisibleCAR && this.supportMode === true) {
         setTimeout(() => {
           if (this.conversationWith.startsWith('support-group')) {
             const pos = message.lastIndexOf('/')
@@ -1291,15 +1234,12 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
 
     const conversationWith_segments = conversationWith.split('-')
     // Removes the last element of the array if is = to the separator
-    if (
-      conversationWith_segments[conversationWith_segments.length - 1] === ''
-    ) {
+    if (conversationWith_segments[conversationWith_segments.length - 1] === '') {
       conversationWith_segments.pop()
     }
 
     if (conversationWith_segments.length === 4) {
-      const lastArrayElement =
-        conversationWith_segments[conversationWith_segments.length - 1]
+      const lastArrayElement = conversationWith_segments[conversationWith_segments.length - 1]
       this.logger.log('[CONVS-DETAIL] - lastArrayElement ', lastArrayElement)
       this.logger.log('[CONVS-DETAIL] - lastArrayElement length', lastArrayElement.length)
       if (lastArrayElement.length !== 32) {
@@ -1313,7 +1253,6 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     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)
@@ -1323,56 +1262,41 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
   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 *')
-        },
-      )
+    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,
-    )
+    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 *')
-        },
-      )
+    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) {
@@ -1396,7 +1320,7 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
       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');
@@ -1406,7 +1330,7 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
       // this.renderer.listen(button, 'click', () => { alert('hi'); });
       // let nocanned = {}
       // if (this.USER_ROLE !== 'agent') {
-     const nocanned = {
+      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:
@@ -1459,7 +1383,7 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
       // 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'))
- 
+
       const elTextArea = this.rowTextArea['el']
       const textArea = elTextArea.getElementsByTagName('ion-textarea')[0]