@chat21/chat21-ionic 3.0.81-rc.2 → 3.0.81

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

@@ -1,5 +1,5 @@
 import { TYPE_DIRECT } from 'src/chat21-core/utils/constants';
-import { URL_SOUND_LIST_CONVERSATION } from './../../../chat21-core/utils/constants'
+import { TYPE_SUPPORT_GROUP, URL_SOUND_LIST_CONVERSATION } from './../../../chat21-core/utils/constants'
 import {
   Component,
   OnInit,
@@ -115,14 +115,16 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
   public lastConnectionDate: string
   public showMessageWelcome: boolean
   public openInfoConversation = false
+  public openInfoMessage: boolean // check is open info message
   public isMobile = false
   public isLessThan991px = false // nk added
+  public isTyping = false
+  public nameUserTypingNow: string
 
   public heightMessageTextArea = ''
-  public translationsMap: Map<string, string> = new Map()
-  public translationsHeaderMap: Map<string, string> = new Map() 
-  public translationsContentMap: Map<string, string> = new Map()
+  public translationMap: Map<string, string>
   public conversationAvatar: any
+  public membersConversation: any
   public member: UserModel
   public urlConversationSupportGroup: any
   public isFileSelected: boolean
@@ -148,6 +150,7 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
   //SOUND
   setTimeoutSound: any;
   audio: any;
+  isOpenInfoConversation: boolean;
   USER_HAS_OPENED_CLOSE_INFO_CONV: boolean = false;
   isHovering: boolean = false;
   conversation_count: number;
@@ -169,15 +172,6 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
   public disableTextarea: boolean;
   appsidebarIsWide: boolean;
 
-  // ========== begin:: typying =======
-  public isTypings = false;
-  public isDirect = false;
-  public idUserTypingNow: string;
-  public nameUserTypingNow: string;
-  private setTimeoutWritingMessages;
-  membersConversation = ['SYSTEM'];
-  // ========== end:: typying =======
-
   /**
    * Constructor
    * @param route
@@ -246,7 +240,21 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
   // -----------------------------------------------------------
   ngOnInit() {
     this.logger.log('[CONVS-DETAIL] > ngOnInit - window.location: ', window.location);
-
+    // this.logger.log('[CONVS-DETAIL] > ngOnInit - fileUploadAccept: ', this.appConfigProvider.getConfig().fileUploadAccept);
+    // const accept_files = this.appConfigProvider.getConfig().fileUploadAccept;
+    // this.logger.log('[CONVS-DETAIL] > ngOnInit - fileUploadAccept typeof accept_files ', typeof accept_files);
+    // const accept_files_array = accept_files.split(',')
+    // this.logger.log('[CONVS-DETAIL] > ngOnInit - fileUploadAccept accept_files_array ', accept_files_array);
+    // this.logger.log('[CONVS-DETAIL] > ngOnInit - fileUploadAccept accept_files_array typeof: ', typeof accept_files_array);
+
+    // accept_files_array.forEach(accept_file => {
+    //   this.logger.log('[CONVS-DETAIL] > ngOnInit - fileUploadAccept accept_file ', accept_file);
+    //   const accept_file_segment = accept_file.split('/')
+    //   this.logger.log('[CONVS-DETAIL] > ngOnInit - fileUploadAccept accept_file_segment ', accept_file_segment);
+    //   if (accept_file_segment[1] === '*') {
+
+    //   }
+    // });
     this.getConversations();
     this.watchToConnectionStatus();
     this.getOSCODE();
@@ -267,21 +275,21 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
       // 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] openAppsSidebarWideMode EVENT-> open' )
+        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] openAppsSidebarWideMode EVENT-> close')
+        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] closeAppsSidebarWideMode EVENT-> close')
+        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");
@@ -331,12 +339,7 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
         //   this.updateConversationBadge()
         // }
         if(conv.uid && conv.uid === this.conversationWith){
-          this.conversationAvatar = setConversationAvatar(
-            conv.conversation_with,
-            conv.conversation_with_fullname,
-            conv.channel_type,
-            conv.attributes['projectId'],
-            conv.attributes['project_name'])
+          this.conversationAvatar = setConversationAvatar(conv.conversation_with,conv.conversation_with_fullname,conv.channel_type)
         }
 
       }
@@ -474,7 +477,6 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     this.loggedUser = this.tiledeskAuthService.getCurrentUser()
     this.logger.log('[CONVS-DETAIL] - initialize -> loggedUser: ', this.loggedUser)
     this.translations()
-    this.setStyleMap()
     // this.conversationSelected = localStorage.getItem('conversationSelected');
     this.showButtonToBottom = false
     this.showMessageWelcome = false
@@ -489,6 +491,7 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
 
     this.messages = [] // list messages of conversation
     this.isFileSelected = false // indicates if a file has been selected (image to upload)
+    this.openInfoMessage = false // indicates whether the info message panel is open
 
     if (checkPlatformIsMobile()) {
       this.isMobile = true
@@ -504,11 +507,13 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
       if (checkWindowWidthIsLessThan991px()) {
         this.logger.log('[CONVS-DETAIL] - initialize -> checkWindowWidthIsLessThan991px ', checkWindowWidthIsLessThan991px())
         this.openInfoConversation = false // indica se è aperto il box info conversazione
-        this.logger.log('[CONVS-DETAIL] - initialize -> openInfoConversation ', this.openInfoConversation)
+        this.isOpenInfoConversation = false
+        this.logger.log('[CONVS-DETAIL] - initialize -> openInfoConversation ', this.openInfoConversation, ' -> isOpenInfoConversation ', this.isOpenInfoConversation)
       } else {
         this.logger.log('[CONVS-DETAIL] - initialize -> checkWindowWidthIsLessThan991px ', checkWindowWidthIsLessThan991px())
         this.openInfoConversation = true
-        this.logger.log('[CONVS-DETAIL] - initialize -> openInfoConversation ', this.openInfoConversation)
+        this.isOpenInfoConversation = true
+        this.logger.log('[CONVS-DETAIL] - initialize -> openInfoConversation ', this.openInfoConversation, ' -> isOpenInfoConversation ', this.isOpenInfoConversation)
       }
     }
 
@@ -527,8 +532,6 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     this.addEventsKeyboard()
     this.startConversation()
     this.updateConversationBadge() // AGGIORNO STATO DELLA CONVERSAZIONE A 'LETTA' (is_new = false)
-  
-    this.initializeTyping();
   }
 
   _getProjectIdByConversationWith(conversationWith: string) {
@@ -563,12 +566,22 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     })
   }
 
+  returnOpenCloseInfoConversation(openInfoConversation: boolean) {
+    this.logger.log('[CONVS-DETAIL] returnOpenCloseInfoConversation - openInfoConversation ', openInfoConversation)
+    this.resizeTextArea()
+    this.openInfoMessage = false
+    this.openInfoConversation = openInfoConversation
+    this.isOpenInfoConversation = openInfoConversation
+    this.USER_HAS_OPENED_CLOSE_INFO_CONV = true
+  }
+
   @HostListener('window:resize', ['$event'])
   onResize(event: any) {
     const newInnerWidth = event.target.innerWidth
     if (newInnerWidth < 991) {
       if (this.USER_HAS_OPENED_CLOSE_INFO_CONV === false) {
         this.openInfoConversation = false
+        this.isOpenInfoConversation = false
       }
     }
   }
@@ -587,7 +600,7 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
       'LABEL_TO',
       'LABEL_LAST_ACCESS',
       'ARRAY_DAYS',
-      
+      'LABEL_IS_WRITING',
       'LABEL_INFO_ADVANCED',
       'ID_CONVERSATION',
       'UPLOAD_FILE_ERROR',
@@ -606,35 +619,11 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
       'THERE_ARE_NO_CANNED_RESPONSES_AVAILABLE',
       'TO_CREATE_THEM_GO_TO_THE_PROJECT',
       "AddNewCannedResponse",
-      "LABEL_LOADING",
-      "DIRECT_CHAT",
-      "GROUP_CHAT",
-    ]
-
-    const keysHeader = [
-      'DIRECT_CHAT',
-      'GROUP_CHAT',
-      'LABEL_IS_WRITING',
-      'LABEL_ONLINE',
-      'LABEL_OFFLINE',
-      'LABEL_TODAY',
-      'LABEL_TOMORROW',
-      'LABEL_TO',
-      'LABEL_LAST_ACCESS',
-      'ARRAY_DAYS',
-      'Resolve',
-    ]
-
-    const keysContentDetail = [
-      'LABEL_OPEN_INFO_CONVERSATION',
-      'LABEL_CLOSE_GROUP',
-      'LABEL_IS_WRITING',
+      "LABEL_LOADING"
     ]
 
-    this.translationsMap = this.customTranslateService.translateLanguage(keys)
-    this.translationsHeaderMap = this.customTranslateService.translateLanguage(keysHeader)
-    this.translationsContentMap = this.customTranslateService.translateLanguage(keysContentDetail)
-    this.logger.log('[CONVS-DETAIL] x this.translationMap ',this.translationsMap)
+    this.translationMap = this.customTranslateService.translateLanguage(keys)
+    this.logger.log('[CONVS-DETAIL] x this.translationMap ',this.translationMap)
   }
 
   // --------------------------------------------------------
@@ -661,19 +650,6 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     return this.customTranslateService.translateLanguage(keys)
   }
 
-  private setStyleMap(){
-      this.styleMap.set('themeColor', 'var(--basic-blue)')
-                    .set('bubbleReceivedBackground','var(--bck-msg-received)')
-                    .set('bubbleReceivedTextColor', 'var(--col-msg-received)')
-                    .set('bubbleSentBackground', 'var(--bck-msg-sent)')
-                    .set('bubbleSentTextColor', 'var(--col-msg-sent)')
-                    .set('buttonFontSize','var(--button-in-msg-font-size)')
-                    .set('buttonBackgroundColor', 'var(--buttonBackgroundColor)')
-                    .set('buttonTextColor', 'var(--buttonTextColor)')
-                    .set('buttonHoverBackgroundColor', 'var(--buttonHoverBackgroundColor)')
-                    .set('buttonHoverTextColor', 'var(--buttonHoverTextColor)')
-  
-  }
   // -------------------------------------------------------------------------------------
   // * retrieving the handler from chatManager
   // * if it DOESN'T EXIST I create a handler and connect and store it in the chatmanager
@@ -759,18 +735,6 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     }
   }
 
-  onConversationLoaded(conversation): ConversationModel{
-    if(conversation.attributes && conversation.attributes['projectId']){
-      let project = localStorage.getItem(conversation.attributes['projectId'])
-      if(project){
-        project = JSON.parse(project)
-        conversation.attributes.project_name = project['name']
-      }
-
-    }
-    return conversation
-  }
-
   setHeaderContent() {
     //   this.logger.log('[CONVS-DETAIL] - setHeaderContent conversationWith', this.conversationWith)
     //   this.logger.log('[CONVS-DETAIL] - setHeaderContent conversationsHandlerService', this.conversationsHandlerService)
@@ -785,8 +749,6 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
             conv.conversation_with,
             conv.conversation_with_fullname,
             conv.channel_type,
-            conv.attributes['projectId'],
-            conv.attributes['project_name']
           )
         }
         if(!conv){
@@ -800,8 +762,6 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
                 conv.conversation_with,
                 conv.conversation_with_fullname,
                 conv.channel_type,
-                conv.attributes['projectId'],
-                conv.attributes['project_name']
               )
               let duration = getDateDifference(conv.timestamp, Date.now())
               duration.days > 10? this.disableTextarea = true: this.disableTextarea = false
@@ -820,8 +780,6 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
             conv.conversation_with,
             conv.conversation_with_fullname,
             conv.channel_type,
-            conv.attributes['projectId'],
-            conv.attributes['project_name']
           )
           let duration = getDateDifference(conv.timestamp, Date.now())
           duration.days > 10? this.disableTextarea = true: this.disableTextarea = false
@@ -834,8 +792,6 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
                 conv.conversation_with,
                 conv.conversation_with_fullname,
                 conv.channel_type,
-                conv.attributes['projectId'],
-                conv.attributes['project_name']
               )
             }
             this.logger.log('[CONVS-DETAIL] - setHeaderContent > conversationAvatar: ', this.conversationAvatar)
@@ -945,6 +901,37 @@ 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()
+    //       }
+    //       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)
     if (!subscription) {
@@ -994,22 +981,6 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
       this.subscriptions.push(subscribe)
     }
 
-    subscriptionKey = 'conversationTyping';
-    subscription = this.subscriptions.find(item => item.key === subscriptionKey);
-    if (!subscription) {
-      subscription =  this.typingService.BSIsTyping.pipe(takeUntil(this.unsubscribe$)).subscribe((data: any) => {
-        this.logger.debug('[CONVS-DETAIL] ***** BSIsTyping *****', data);
-        if (data) {
-          const isTypingUid = data.uid; //support-group-...
-          if (this.conversationWith === isTypingUid) {
-            that.subscribeTypings(data);
-          }
-        }
-      });
-      const subscribe = {key: subscriptionKey, value: subscription };
-      this.subscriptions.push(subscribe);
-    }
-
     // subscriptionKey = 'onGroupChange';
     // subscription = this.subscriptions.find(item => item.key === subscriptionKey);
     // if (!subscription) {
@@ -1030,6 +1001,18 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     // }
   }
 
+  onConversationLoaded(conversation): ConversationModel{
+    if(conversation.attributes && conversation.attributes['projectId']){
+      let project = localStorage.getItem(conversation.attributes['projectId'])
+      if(project){
+        project = JSON.parse(project)
+        conversation.attributes.project_name = project['name']
+      }
+    }
+    return conversation
+  }
+
+
   // -------------------------------------------------
   // addEventsKeyboard
   // -------------------------------------------------
@@ -1057,9 +1040,7 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
       this.conversationAvatar = setConversationAvatar(
         this.conversationWith,
         this.conversationWithFullname,
-        this.channelType,
-        this.conversation.attributes['projectId'],
-        this.conversation.attributes['project_name']
+        this.channelType
       )
       
     }
@@ -1236,6 +1217,7 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
                   this.logger.log('[CONVS-DETAIL] - returnChangeTextArea  --> beforeSlash', beforeSlash)
                   this.logger.log('[CONVS-DETAIL] - returnChangeTextArea  --> afterSlash', afterSlash)
 
+
                   if(beforeSlash[beforeSlash.length-1].indexOf(' ') >= 0 && afterSlash === ''){
                     this.HIDE_CANNED_RESPONSES = false
                   } else if(beforeSlash[beforeSlash.length-1].indexOf(' ') < 0 && afterSlash === '' ){
@@ -1283,7 +1265,7 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
 
   replaceTagInMessage(canned, event?) {
     const elTextArea = this.rowTextArea['el']
-    const textArea = elTextArea.getElementsByTagName('ion-textarea')[0] as HTMLInputElement;
+    const textArea = elTextArea.getElementsByTagName('ion-textarea')[0]
     // console.log('[CONVS-DETAIL] replaceTagInMessage  textArea ', textArea)
     // console.log('[CONVS-DETAIL] replaceTagInMessage  textArea value', textArea.value,)
 
@@ -1298,17 +1280,20 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     // replace text
     var strTEMP = textArea.value.replace(/\/.*/ig, canned.text)
     strTEMP = this.replacePlaceholderInCanned(strTEMP)
-    this.logger.log('[CONVS-DETAIL] replaceTagInMessage strSearch ', strTEMP)
+    this.logger.log('[CONVS-DETAIL] replaceTagInMessage strSearch before', strTEMP, textArea)
     // strTEMP = this.replacePlaceholderInCanned(strTEMP);
     // textArea.value = '';
     // that.messageString = strTEMP;
     textArea.value = strTEMP
+    this.logger.log('[CONVS-DETAIL] replaceTagInMessage strSearch after', strTEMP, textArea)
     this.insertAtCursor(textArea, '')
     this.setCaretPosition(textArea)
     // setTimeout(() => {
     //   // textArea.focus();
+    //   textArea.selectionEnd = textArea.value.length;
     //   textArea.setFocus()
     //   // this.resizeTextArea()
+    //   // this.setCaretPosition(textArea)
     // }, 200)
     
   }
@@ -1352,7 +1337,7 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
       if(elTextArea){
         // console.log("[CONVS-DETAIL] onClickOpenCannedResponses  textArea value", textArea.value)
         var lastChar = textArea.value[textArea.value.length - 1]
-        this.logger.log('[CONVS-DETAIL] onClickOpenCannedResponses  lastChar  --- textArea ', lastChar, textArea)
+        this.logger.log('[CONVS-DETAIL] onClickOpenCannedResponses  lastChar --- textArea ', lastChar, textArea)
         if (lastChar !== '/') {
           this.insertAtCursor(textArea, '/')
         }
@@ -1532,13 +1517,6 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     }
   }
 
-  onOpenCloseInfoConversation(event){
-    this.logger.log('[CONVS-DETAIL] onOpenCloseInfoConversation - openInfoConversation ', event)
-    this.resizeTextArea()
-    this.openInfoConversation = event
-    this.USER_HAS_OPENED_CLOSE_INFO_CONV = true
-  }
-
   // -------------- START SCROLL/RESIZE  -------------- //
   /** */
   resizeTextArea() {
@@ -1640,7 +1618,6 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
       this.heightMessageTextArea = '57' // NK edited
     }
   }
-
   checkAcceptedFile(draggedFileMimeType) {
     let isAcceptFile = false
     this.logger.log('[CONVS-DETAIL] > checkAcceptedFile - fileUploadAccept: ',this.appConfigProvider.getConfig().fileUploadAccept)
@@ -1662,17 +1639,26 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
         if (accept_file_segment[1] === '*') {
           if (draggedFileMimeType.startsWith(accept_file_segment[0])) {
             isAcceptFile = true
-            this.logger.log('[CONVS-DETAIL] > checkAcceptedFile - fileUploadAccept isAcceptFile',isAcceptFile)
+            this.logger.log(
+              '[CONVS-DETAIL] > checkAcceptedFile - fileUploadAccept isAcceptFile',
+              isAcceptFile,
+            )
             return isAcceptFile
           } else {
             isAcceptFile = false
-            this.logger.log('[CONVS-DETAIL] > checkAcceptedFile - fileUploadAccept isAcceptFile',isAcceptFile)
+            this.logger.log(
+              '[CONVS-DETAIL] > checkAcceptedFile - fileUploadAccept isAcceptFile',
+              isAcceptFile,
+            )
             return isAcceptFile
           }
         } else if (accept_file_segment[1] !== '*') {
           if (draggedFileMimeType === accept_file) {
             isAcceptFile = true
-            this.logger.log('[CONVS-DETAIL] > checkAcceptedFile - fileUploadAccept isAcceptFile',isAcceptFile)
+            this.logger.log(
+              '[CONVS-DETAIL] > checkAcceptedFile - fileUploadAccept isAcceptFile',
+              isAcceptFile,
+            )
             return isAcceptFile
           }
         }
@@ -1682,64 +1668,6 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     }
   }
 
-
-  initializeTyping() {
-    this.logger.debug('[CONVS-DETAIL] membersconversation', this.membersConversation)
-    if(this.loggedUser){
-      this.membersConversation.push(this.loggedUser.uid)
-      //this.setSubscriptions();
-      this.typingService.isTyping(this.conversationWith, this.loggedUser.uid, this.isDirect);
-    }
-  }
-
-  /** */
-  subscribeTypings(data: any) {
-    const that = this;
-    try {
-      const key = data.uidUserTypingNow;
-      const waitTime = data.waitTime
-      this.nameUserTypingNow = null;
-      this.idUserTypingNow = null;
-
-      if (data.nameUserTypingNow) {
-        this.nameUserTypingNow = data.nameUserTypingNow;
-      }
-      if (data.uidUserTypingNow){
-        this.idUserTypingNow = data.uidUserTypingNow
-      }
-      this.logger.debug('[CONV-COMP] subscribeTypings data:', data);
-      const userTyping = this.membersConversation.includes(key);
-      if ( !userTyping && key) {
-        this.isTypings = true;
-        setTimeout(function () {
-          that.scrollBottom(0)
-        }, 0);
-        // clearTimeout(this.setTimeoutWritingMessages);
-        this.setTimeoutWritingMessages = setTimeout(() => {
-            that.isTypings = false;
-        }, waitTime);
-        // this.initiTimeout(waitTime)
-      }
-    } catch (error) {
-      this.logger.error('[CONV-COMP] error: ', error);
-    }
-
-  }
-
-  initiTimeout(waitTime){
-    const that = this;
-    this.setTimeoutWritingMessages = setTimeout(() => {
-      that.isTypings = false;
-    }, waitTime);
-  }
-
-  resetTimeout(){
-    this.isTypings = false
-    this.setTimeoutWritingMessages = null;
-    clearTimeout(this.setTimeoutWritingMessages)
-  }
-
-
   segmentNewAgentMessage(conversation: ConversationModel){
     let user = this.loggedUser
     try {
@@ -1786,7 +1714,7 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
       this.logger.error('Event:Message Sent [group] error', err);
     }
   }
-
+  
   // -------------------------------------------------------------
   // DRAG FILE
   // -------------------------------------------------------------
@@ -1846,7 +1774,7 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
 
   async presentToastOnlyImageFilesAreAllowedToDrag() {
     const toast = await this.toastController.create({
-      message: this.translationsMap.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',

package/src/app/pages/conversations-list/conversations-list.page.html

@@ -1,38 +1,35 @@
-<ion-header no-border class="ion-no-border" [class.mobile]="isMobile">
-  <header-conversations-list *ngIf="conversationType ==='active'" 
+<ion-header no-border class="ion-no-border">
+  <app-ddp-header *ngIf="conversationType ==='active'" 
     [numberOpenConv]="numberOpenConv" 
     [supportMode]="supportMode"
     [archived_btn]="archived_btn"
     [writeto_btn]="writeto_btn"
     [sound_btn]="sound_btn"
-    [isMobile]="isMobile"
     (onSoundChange)="onSoundChange($event)"
     (openContactsDirectory)=openContactsDirectory($event) 
     (openProfileInfo)=openProfileInfo($event)>
-  </header-conversations-list>
+  </app-ddp-header>
 
-  <header-conversations-list-archived *ngIf="conversationType !=='active'" 
+  <app-option-header *ngIf="conversationType !=='active'" 
     [headerTitle]=headerTitle
-    [isMobile]="isMobile"
     (onBackButton)=onBackButtonFN($event)>
-  </header-conversations-list-archived>
+  </app-option-header>
 </ion-header>
-
 <!-- appScrollbarTheme -->
-<ion-content id="convs-list" #ioncontentconvlist class="list-avatar-page" [class.mobile]="isMobile">
+<ion-content id="convs-list" #ioncontentconvlist class="list-avatar-page" >
   <!-- class="ps" style="position: relative; max-width: 600px; max-height: 100%;" [perfectScrollbar]="config" -->
   <div id="scrollbar2">
     <ion-list>
 
         <!-- supportMode && -->
-        <ion-item  *ngIf="displayNewConvsItem && conversationType !=='archived' && supportMode" class="ion-no-padding open-iframe-item" lines="none">
+        <ion-item  *ngIf="displayNewConvsItem && conversationType !=='archived' && supportMode" class="ion-no-padding open-iframe-item">
           <div tabindex="0"></div>
           <!-- <ion-note class="pinned-project">
             {{ 'PINNED_PROJECT' | translate }}
           </ion-note> -->
      
           <app-project-item
-            style="width: 100%; margin: 0px 8px; border-bottom: 1px dashed #d3dbe5;" 
+            style="width: 100%;" 
             (openUnsevedConvsEvent)="openUnsevedConversationIframe($event)"
             (projectIdEvent)="getLastProjectId($event)">
           </app-project-item>

package/src/app/pages/conversations-list/conversations-list.page.scss

@@ -4,10 +4,6 @@ ion-header {
   border-bottom-style: solid;
   border-color: var(--light-gray);
   border-bottom-width: thin;
-  &:not(.mobile){
-    border: none;
-    background: var(--list-bkg-color);
-  }
 }
 
 ion-content {
@@ -15,9 +11,6 @@ ion-content {
   --offset-bottom: auto!important;
   --overflow: hidden;
   overflow: scroll;
-  &:not(.mobile){
-    background: var(--list-bkg-color);
-  }
 
   &::-webkit-scrollbar {
     width: 6px;
@@ -47,11 +40,10 @@ ion-list {
   list-style-type: none;
   margin: 0;
   padding: 0;
-  background: transparent;
 
   ion-item {
     cursor: pointer;
-    // height: 64px;
+    height: 64px;
     position: relative;
     display: flex;
     text-decoration: none;
@@ -59,7 +51,6 @@ ion-list {
     padding-right: 8px;
     --padding-start: 0;
     --inner-padding-end: 0;
-    --background: transparent;
     .selected {
       border-radius: 10px;
       padding-left: 8px;
@@ -333,7 +324,7 @@ ion-list {
   padding-left: 0px !important ;
   padding-right: 0px !important;
   // height: 55px !important;
-  // border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
   --background-hover: #ffffff;
   cursor:default !important;
 }