@chat21/chat21-web-widget 5.0.52-rc.4 → 5.0.53-rc.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@chat21/chat21-web-widget",
   "author": "Tiledesk SRL",
-  "version": "5.0.52-rc.4",
+  "version": "5.0.53-rc.1",
   "license": "MIT License",
   "homepage": "https://www.tiledesk.com",
   "repository": {

package/src/app/app.component.ts

@@ -43,6 +43,7 @@ import { supports_html5_storage } from 'src/chat21-core/utils/utils';
 import { AUTH_STATE_OFFLINE, AUTH_STATE_ONLINE, TYPE_MSG_FILE, TYPE_MSG_IMAGE, URL_SOUND_LIST_CONVERSATION } from 'src/chat21-core/utils/constants';
 import { isInfo, isUserBanned } from 'src/chat21-core/utils/utils-message';
 import { MessageModel } from 'src/chat21-core/models/message';
+import { Rules } from './utils/rules';
 
 interface MessageObj {
   tenant?: string;
@@ -107,6 +108,7 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
     private el: ElementRef,
     private ngZone: NgZone,
     public g: Globals,
+    private rules: Rules,
     public triggerHandler: Triggerhandler,
     public globalSettingsService: GlobalSettingsService,
     private settingsSaverService: SettingsSaverService,
@@ -945,23 +947,13 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
             if(error){
                 this.logger.error("[APP-COMP] getConverationRESTApi: ERORR while retriving data", error)
             }
+
             if(conv){
                 //start widget from this conversation
                 const recipientId : string = conv.uid
                 this.g.setParameter('recipientId', recipientId);
                 this.appStorageService.setItem('recipientId', recipientId)
-                // this.startUI();
-                // if (this.g.isOpen === true) {
-                //     console.log('conversation from rest API go to conversationdetail -->', recipientId)
-                //     this.isOpenHome = false;
-                //     this.isOpenConversation = true;
-                //     this.isOpenSelectionDepartment = false;
-                //     this.isConversationArchived = false;
-                //     this.triggerOnOpenEvent();
-                // } else {
-                //     this.triggerOnCloseEvent();
-                // }
-            }else {
+            } else {
                 //start widget with NEW CONVERSATION
                 this.logger.debug("[APP-COMP] getConverationRESTApi: NO active conversations")
                 // this.isOpenHome = false;

package/src/app/app.module.ts

@@ -127,6 +127,7 @@ import { Triggerhandler } from 'src/chat21-core/utils/triggerHandler';
 import { WaitingService } from './providers/waiting.service';
 import { StarRatingWidgetService } from './providers/star-rating-widget.service';
 import { LikeUnlikeComponent } from './component/message/like-unlike/like-unlike.component';
+import { Rules } from './utils/rules';
 
 
 const appInitializerFn = (appConfig: AppConfigService, logger: NGXLogger) => {
@@ -315,6 +316,7 @@ export function uploadFactory(http: HttpClient, appConfig: AppConfigService, app
     AppConfigService,
     Chat21Service,
     Globals,
+    Rules,
     GlobalSettingsService,
     SettingsSaverService,
     StarRatingWidgetService,

package/src/app/component/conversation-detail/conversation/conversation.component.html

@@ -37,6 +37,12 @@
         (onMenuOptionShow)="onMenuOption($event)">
     </chat-conversation-header>
 
+    <div id="dropZone_container" *ngIf="isHovering">
+        <div class="drop">
+            drop zone
+        </div>
+    </div>
+    
     <!-- CONTENT -->
     <chat-conversation-content
         [messages]="messages"
@@ -55,9 +61,14 @@
         (onAttachmentButtonClicked)="onAttachmentButtonClicked($event)"
         (onScrollContent)="onScrollContent($event)"
         (onMenuOptionShow)="onMenuOption($event)"
-        (onEmojiiPickerShow)="onEmojiiPickerShow($event)">
+        (onEmojiiPickerShow)="onEmojiiPickerShow($event)"
+        (drop)="drop($event)"
+        (dragover)="allowDrop($event)" 
+        (dragleave)="drag($event)" >
     </chat-conversation-content>
 
+    
+
     <!-- INTERNAL FRAME FOR SELF ACTION LINK BUTTONS-->
     <chat-internal-frame *ngIf="isButtonUrl"
         [button]="buttonClicked"
@@ -105,6 +116,7 @@
             [isEmojiiPickerShow]="isEmojiiPickerShow"
             [footerMessagePlaceholder]="footerMessagePlaceholder"
             [fileUploadAccept]="appConfigService?.getConfig().fileUploadAccept"
+            [dropEvent]="dropEvent"
             [stylesMap]="stylesMap"
             [translationMap]="translationMapFooter"
             (onEmojiiPickerShow)="onEmojiiPickerShow($event)"

package/src/app/component/conversation-detail/conversation/conversation.component.scss

@@ -468,6 +468,25 @@
 
 }
 
+#dropZone_container{
+    position: absolute;
+    top: 52px;
+    bottom: 56px;
+    left: 0;
+    right: 0;
+    background-color: rgba(240,248,255,0.6);
+    .drop{
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        margin: 5px;
+        border: 2px dashed #a4acb3;
+        border-radius: 16px;
+    }
+}
+
 /* ==================== OPTION MENU CONTAINER ==================== */ 
 #c21-options-menu {
     width: auto;

package/src/app/component/conversation-detail/conversation/conversation.component.ts

@@ -139,6 +139,11 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
   isIE = /msie\s|trident\//i.test(window.navigator.userAgent);
   firstScroll = true;
 
+  // ========== begin:: DRAG & DROP =======  
+  isHovering: boolean = false
+  dropEvent: Event
+  // ========== end:: DRAG & DROP =======
+
   tooltipOptions = {
     'show-delay': 1500,
     'tooltip-class': 'chat-tooltip',
@@ -929,7 +934,6 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
   //  try {
   //   that.isScrolling = true;
   //   const objDiv = document.getElementById(that.idDivScroll) as HTMLElement;
-  //   console.log('divto scrool', objDiv);
   //   // const element = objDiv[0] as HTMLElement;
   //   setTimeout(function () {
 
@@ -1180,34 +1184,6 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
   }
   // ========= end:: DESTROY ALL SUBSCRIPTIONS ============//
 
-
-
-  /**
-   * regola sound message:
-   * se lo invio io -> NO SOUND
-   * se non sono nella conversazione -> SOUND
-   * se sono nella conversazione in fondo alla pagina -> NO SOUND
-   * altrimenti -> SOUND
-   */
-  // soundMessage(timestamp?) {
-  //   if (!isJustRecived(this.g.startedAt.getTime(), timestamp)) {
-  //     return;
-  //   }
-  //   const soundEnabled = this.g.soundEnabled;
-  //   const baseLocation = this.g.baseLocation;
-  //   if ( soundEnabled ) {
-  //     const that = this;
-  //     this.audio = new Audio();
-  //     this.audio.src = baseLocation + '/assets/sounds/justsaying.mp3';
-  //     this.audio.load();
-  //     // console.log('conversation play');
-  //     clearTimeout(this.setTimeoutSound);
-  //     this.setTimeoutSound = setTimeout(function () {
-  //       that.audio.play();
-  //       that.logger.debug('[CONV-COMP] ****** soundMessage 1 *****', that.audio.src);
-  //     }, 1000);
-  //   }
-  // }
   private onIncreaseWith(){
     try{
       const tiledeskDiv = this.g.windowContext.window.document.getElementById('tiledeskdiv') 
@@ -1253,7 +1229,6 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
 
   /** */
   private actionButton(event: any) {
-    // console.log(event);
     const action = event.action ? event.action : '';
     const message = event.value ? event.value : '';
     const subtype = event.show_echo ?  '' : 'info';
@@ -1280,4 +1255,50 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
   }
   // ========= END:: TRIGGER FUNCTIONS ============//
 
+
+  drop(event){
+    event.preventDefault()
+    event.stopPropagation()
+
+    this.logger.log('[CONV-COMP] ----> FILE - DROP ev ', event)
+    const fileList = event.dataTransfer.files
+    this.logger.log('[CONV-COMP] ----> FILE - DROP ev.dataTransfer.files ',fileList)
+    this.isHovering = false
+    if (fileList.length > 0) {
+      const file: File = fileList[0]
+      this.logger.log('[CONV-COMP] ----> FILE - DROP file ', file)
+
+      var mimeType = fileList[0].type
+      this.logger.log('[CONV-COMP] ----> FILE - DROP mimeType files ', mimeType)
+
+      // if (mimeType.startsWith("image") || mimeType.startsWith("application")) {
+      // this.logger.log('[CONV-COMP] ----> FILE - DROP mimeType files: ', this.appConfigProvider.getConfig().fileUploadAccept);
+      // this.checkAcceptedFile(mimeType);
+      // const isAccepted = this.checkAcceptedFile(mimeType)
+      // this.logger.log('[CONV-COMP] > checkAcceptedFile - fileUploadAccept isAcceptFile FILE - DROP',isAccepted)
+      // if (isAccepted === true) {
+      this.dropEvent = event
+      // } else {
+      //   this.logger.log( '[CONV-COMP] ----> FILE - DROP mimeType files ', mimeType,'NOT SUPPORTED FILE TYPE')
+      //   this.presentToast(this.translationsMap.get('FAILED_TO_UPLOAD_THE_FORMAT_IS_NOT_SUPPORTED'), 'danger','toast-custom-class', 5000 )
+      //   // this.presentToastOnlyImageFilesAreAllowedToDrag()
+      // }
+      
+    }
+  }
+
+  allowDrop(event: any) {
+    event.preventDefault()
+    event.stopPropagation()
+    this.logger.log('[CONV-COMP] ----> FILE - (dragover) allowDrop ev ', event)
+    this.isHovering = true
+  }
+
+  drag(event){
+    event.preventDefault()
+    event.stopPropagation()
+    console.log('dragleave-->', event)
+    this.isHovering = false
+  }
+
 }

package/src/app/component/conversation-detail/conversation-content/conversation-content.component.ts

@@ -148,7 +148,6 @@ export class ConversationContentComponent implements OnInit {
  
   // LISTEN TO SCROLL POSITION
   onScroll(event): void {
-    // console.log('************** SCROLLLLLLLLLL *****************');
     this.startScroll = false;
     if (this.scrollMe) {
       const divScrollMe = this.scrollMe.nativeElement;

package/src/app/component/conversation-detail/conversation-footer/conversation-footer.component.ts

@@ -37,6 +37,7 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
   @Input() fileUploadAccept: string;
   @Input() stylesMap: Map<string, string>
   @Input() translationMap: Map< string, string>;
+  @Input() dropEvent: Event;
   @Output() onEmojiiPickerShow = new EventEmitter<boolean>();
   @Output() onBeforeMessageSent = new EventEmitter();
   @Output() onAfterSendMessage = new EventEmitter<MessageModel>();
@@ -86,6 +87,11 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
     if(changes['hideTextReply'] && changes['hideTextReply'].currentValue !== undefined){
       this.restoreTextArea();
     }
+
+    if(changes['dropEvent'] && changes['dropEvent'].currentValue !== undefined){
+      this.onDrop(this.dropEvent)
+    }
+
   }
   
   ngAfterViewInit() {
@@ -355,7 +361,6 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
           const target = document.getElementById('chat21-main-message-context') as HTMLInputElement;
           target.value = '';
           target.style.height = this.HEIGHT_DEFAULT;
-          // console.log('target.style.height: ', target.style.height);
         } catch (e) {
           this.logger.error('[CONV-FOOTER] > Error :' + e);
         }
@@ -511,7 +516,6 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
    */
   onkeypress(event) {
     const keyCode = event.which || event.keyCode;
-    // console.log('keycode', keyCode)
     this.textInputTextArea = ((document.getElementById('chat21-main-message-context') as HTMLInputElement).value);
     if (keyCode === 13) { // ENTER pressed
       if (this.textInputTextArea && this.textInputTextArea.trim() !== '') {
@@ -575,4 +579,20 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
     }
   }
 
+  onDrop(event){
+    const items = event.dataTransfer.files;
+    let file = null;
+    this.logger.debug('[CONV-FOOTER] onDrop items ', items);
+    for (const item of items) {
+      this.logger.debug('[CONV-FOOTER] onDrop item ', item);
+      this.logger.debug('[CONV-FOOTER] onDrop item.type ', item.type);
+
+      const data = {target: {files: new DataTransfer()}}
+      data.target.files = items
+      this.logger.debug('[CONV-FOOTER] onDrop data', data);
+      this.logger.debug('[CONV-FOOTER] onDrop file ', file);
+      this.detectFiles(data)
+    }
+  }
+
 }

package/src/app/component/conversation-detail/conversation-preview/conversation-preview.component.ts

@@ -266,7 +266,6 @@ export class ConversationPreviewComponent implements OnInit {
         this.restoreTextArea();
       }
     } else if (keyCode === 9) {
-      // console.log('TAB pressedddd')
       event.preventDefault();
     }
   }

package/src/app/component/eyeeye-catcher-card/eyeeye-catcher-card.component.ts

@@ -77,7 +77,7 @@ export class EyeeyeCatcherCardComponent implements OnInit {
       this.checkIsEmoji();
       const isOpen = this.g.isOpen;
       this.logger.debug('[EYEEYE-CATCHER-CARD] openEyeCatcher: calloutStaus ---------> ', this.g.calloutStaus);
-      // console.log('this.g.isMobile', this.g.isMobile);
+      
       if (isOpen === false && this.g.calloutStaus) { // && this.g.isMobile === false
           this.onCloseEyeCatcherCard.emit(true);
           // this.g.displayEyeCatcherCard = 'block';
@@ -104,7 +104,6 @@ export class EyeeyeCatcherCardComponent implements OnInit {
     while (match = regex.exec(title)) {
       const emoji = match[0];
       this.logger.debug('[EYEEYE-CATCHER-CARD]--> match', match)
-      // console.log(`Matched sequence ${ emoji } — code points: ${ [...emoji].length }`);
       if (title.indexOf(emoji) === 0) {
         this.title = title.replace(emoji, '');
         this.emoticon = emoji;

package/src/app/component/form/prechat-form/prechat-form.component.ts

@@ -92,10 +92,8 @@ export class PrechatFormComponent implements OnInit, AfterViewInit {
     if (this.g.attributes) {
       const attributes = this.g.attributes;
       if ( this.privacyInputField && this.privacyInputField.nativeElement.checked === false) {
-        // console.log(this.privacyInputField.nativeElement.checked);
         this.g.privacyApproved = false;
         const spanCheck = window.document.getElementById('span-checkmark');
-        // console.log('-----------> ', spanCheck);
         if (spanCheck) {
           spanCheck.classList.add('unchecked');
         }
@@ -118,16 +116,6 @@ export class PrechatFormComponent implements OnInit, AfterViewInit {
     }
   }
 
-
-  /**  */
-  // checkInput() {
-  //   const spanCheck = window.document.getElementById('span-checkmark');
-  //   // console.log('-----------> ', spanCheck);
-  //   if (spanCheck) {
-  //     spanCheck.classList.remove('unchecked');
-  //   }
-  // }
-
   returnClosePage() {
     this.onClosePage.emit();
   }

package/src/app/component/home/home.component.html

@@ -73,9 +73,6 @@
         <div id="c21-whatsapp" *ngIf="g?.whatsappNumber && g?.whatsappNumber.trim() !== ''">
             <button tabindex="1040" aflistconv #aflistconv class="c21-button-primary" (click)="openConversationOnPlatform('whatsapp')">
                 <span class="v-align-center">
-                    <!-- <svg [ngStyle]="{'fill': 'yellow' }" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
-                      <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"  [ngStyle]="{'fill': g.themeForegroundColor}"/>
-                    </svg> -->
                     <svg aria-labelledby="altIconTitle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28" viewBox="0 0 1219.547 1225.016">
                         <path fill="#E0E0E0" d="M1041.858 178.02C927.206 63.289 774.753.07 612.325 0 277.617 0 5.232 272.298 5.098 606.991c-.039 106.986 27.915 211.42 81.048 303.476L0 1225.016l321.898-84.406c88.689 48.368 188.547 73.855 290.166 73.896h.258.003c334.654 0 607.08-272.346 607.222-607.023.056-162.208-63.052-314.724-177.689-429.463zm-429.533 933.963h-.197c-90.578-.048-179.402-24.366-256.878-70.339l-18.438-10.93-191.021 50.083 51-186.176-12.013-19.087c-50.525-80.336-77.198-173.175-77.16-268.504.111-278.186 226.507-504.503 504.898-504.503 134.812.056 261.519 52.604 356.814 147.965 95.289 95.36 147.728 222.128 147.688 356.948-.118 278.195-226.522 504.543-504.693 504.543z"/>
                         <linearGradient id="a" gradientUnits="userSpaceOnUse" x1="609.77" y1="1190.114" x2="609.77" y2="21.084">
@@ -87,6 +84,9 @@
                         <path fill="#FFF" d="M1036.898 176.091C923.562 62.677 772.859.185 612.297.114 281.43.114 12.172 269.286 12.039 600.137 12 705.896 39.633 809.13 92.156 900.13L7 1211.067l318.203-83.438c87.672 47.812 186.383 73.008 286.836 73.047h.255.003c330.812 0 600.109-269.219 600.25-600.055.055-160.343-62.328-311.108-175.649-424.53zm-424.601 923.242h-.195c-89.539-.047-177.344-24.086-253.93-69.531l-18.227-10.805-188.828 49.508 50.414-184.039-11.875-18.867c-49.945-79.414-76.312-171.188-76.273-265.422.109-274.992 223.906-498.711 499.102-498.711 133.266.055 258.516 52 352.719 146.266 94.195 94.266 146.031 219.578 145.992 352.852-.118 274.999-223.923 498.749-498.899 498.749z"/>
                         <title id="altIconTitle">Whatsapp</title>
                     </svg>
+                    <!-- <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28" focusable="false" viewBox="0 0 448 512" xml:space="preserve">
+                        <path stroke="#5f6368" stroke-width="8px" fill="#5f6368" d="M380.9,97.1C339,55.1,283.2,32,223.9,32c-122.4,0-222,99.6-222,222c0,39.1,10.2,77.3,29.6,111L0,480l117.7-30.9  c32.4,17.7,68.9,27,106.1,27h0.1c122.3,0,224.1-99.6,224.1-222C448,194.8,422.8,139.1,380.9,97.1z M223.9,438.7  c-33.2,0-65.7-8.9-94-25.7l-6.7-4l-69.8,18.3L72,359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2c0-101.7,82.8-184.5,184.6-184.5  c49.3,0,95.6,19.2,130.4,54.1s56.2,81.2,56.1,130.5C410.5,355.9,325.6,438.7,223.9,438.7z M325.1,300.5c-5.5-2.8-32.8-16.2-37.9-18  c-5.1-1.9-8.8-2.8-12.5,2.8c-3.7,5.6-14.3,18-17.6,21.8c-3.2,3.7-6.5,4.2-12,1.4c-32.6-16.3-54-29.1-75.5-66  c-5.7-9.8,5.7-9.1,16.3-30.3c1.8-3.7,0.9-6.9-0.5-9.7s-12.5-30.1-17.1-41.2c-4.5-10.8-9.1-9.3-12.5-9.5c-3.2-0.2-6.9-0.2-10.6-0.2  c-3.7,0-9.7,1.4-14.8,6.9c-5.1,5.6-19.4,19-19.4,46.3s19.9,53.7,22.6,57.4c2.8,3.7,39.1,59.7,94.8,83.8c35.2,15.2,49,16.5,66.6,13.9  c10.7-1.6,32.8-13.4,37.4-26.4s4.6-24.1,3.2-26.4C334.3,304.6,330.6,303.2,325.1,300.5z"/>
+                    </svg> -->
                   </span>
                 <div class="clear"></div>
             </button>
@@ -94,9 +94,6 @@
         <div id="c21-telegram" *ngIf="g?.telegramUsername && g?.telegramUsername.trim() !== ''">
             <button tabindex="1040" aflistconv #aflistconv class="c21-button-primary" (click)="openConversationOnPlatform('telegram')">
                 <span class="v-align-center">
-                    <!-- <svg [ngStyle]="{'fill': 'yellow' }" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
-                      <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"  [ngStyle]="{'fill': g.themeForegroundColor}"/>
-                    </svg> -->
                     <svg aria-labelledby="altIconTitle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="26" height="26" viewBox="0 0 368 368" style="enable-background:new 0 0 368 368;" xml:space="preserve">
                         <g id="XMLID_1_">
                             <linearGradient id="XMLID_7_" gradientUnits="userSpaceOnUse" x1="-66.831" y1="-68.1757" x2="-65.3102" y2="-68.1757" gradientTransform="matrix(-60 139.992 -139.992 -60 -13316.416 5324.4634)">
@@ -114,9 +111,8 @@
                         </g>
                         <title id="altIconTitle">Telegram</title>
                     </svg>
-                    <!-- <svg xmlns="http://www.w3.org/2000/svg"  width="20" height="20" viewBox="0 0 24 24">
-                        <path [ngStyle]="{'fill': g.themeForegroundColor}" d="M13.92,11.22s-1.22-.6-1.44-.68a.76.76,0,0,0-.27-.06.46.46,0,0,0-.4.24c-.12.17-.48.59-.59.72l-.05,0-.25-.1A6.22,6.22,0,0,1,8.54,9.26l0,0s.05-.06.07-.09l.2-.23.1-.11a1.36,1.36,0,0,0,.19-.31l0-.05a.54.54,0,0,0,0-.52c0-.06-.53-1.27-.58-1.4-.13-.31-.3-.45-.54-.45H7.88a3,3,0,0,0-1,.26,2.08,2.08,0,0,0-.77,1.76A3.78,3.78,0,0,0,7,10.17a.09.09,0,0,0,0,.05,7.81,7.81,0,0,0,3.33,2.89,5.37,5.37,0,0,0,2,.51h0l.32,0h.06a2.13,2.13,0,0,0,1.48-1,1.7,1.7,0,0,0,.09-1.08A.72.72,0,0,0,13.92,11.22Z" transform="translate(-1.83 -1.83)"/>
-                        <path [ngStyle]="{'fill': g.themeForegroundColor}" d="M10.14,1.83a8,8,0,0,0-8,8,7.86,7.86,0,0,0,1.1,4L1.85,17.89a.19.19,0,0,0,0,.21.21.21,0,0,0,.15.07h.06l4.24-1.35a8,8,0,0,0,11.82-7A8,8,0,0,0,10.14,1.83Zm0,14.27a6.37,6.37,0,0,1-3.49-1,.19.19,0,0,0-.12,0H6.47l-2.12.68.68-2a.22.22,0,0,0,0-.19A6.22,6.22,0,0,1,3.79,9.8a6.36,6.36,0,1,1,6.35,6.3Z" transform="translate(-1.83 -1.83)"/>
+                    <!-- <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="26" height="26" viewBox="0 0 448 512" xml:space="preserve">
+                        <path fill="#5f6368" d="M446.7,98.6l-67.6,318.8c-5.1,22.5-18.4,28.1-37.3,17.5l-103-75.9l-49.7,47.8c-5.5,5.5-10.1,10.1-20.7,10.1  l7.4-104.9l190.9-172.5c8.3-7.4-1.8-11.5-12.9-4.1L117.8,284L16.2,252.2c-22.1-6.9-22.5-22.1,4.6-32.7L418.2,66.4  C436.6,59.5,452.7,70.5,446.7,98.6z"/>
                     </svg> -->
                   </span>
                 <div class="clear"></div>
@@ -125,9 +121,6 @@
         <div id="c21-messanger" *ngIf="g?.messangerPageTitle && g?.messangerPageTitle.trim() !== ''">
             <button tabindex="1040" aflistconv #aflistconv class="c21-button-primary" (click)="openConversationOnPlatform('messanger')">
                 <span class="v-align-center">
-                    <!-- <svg [ngStyle]="{'fill': 'yellow' }" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
-                      <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"  [ngStyle]="{'fill': g.themeForegroundColor}"/>
-                    </svg> -->
                     <svg aria-labelledby="altIconTitle" xmlns="http://www.w3.org/2000/svg" width="26" height="26" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 800 800">
                         <radialGradient id="Gradient" cx="101.925" cy="809.0079" r="1.0896" gradientTransform="matrix(800 0 0 -799.9985 -81386 648000.75)" gradientUnits="userSpaceOnUse">
                          <stop offset="0" style="stop-color:#0099FF"/>
@@ -139,9 +132,8 @@
                         <path fill="#FFFFFF" d="M159.8,501.5l117.5-186.4c18.7-29.7,58.7-37,86.8-16l93.5,70.1c8.6,6.4,20.4,6.4,28.9-0.1    l126.2-95.8c16.8-12.8,38.8,7.4,27.6,25.3L522.7,484.9c-18.7,29.7-58.7,37-86.8,16l-93.5-70.1c-8.6-6.4-20.4-6.4-28.9,0.1    l-126.2,95.8C170.5,539.5,148.5,519.4,159.8,501.5z"/>
                         <title id="altIconTitle">Facebook Messanger</title>
                     </svg>
-                    <!-- <svg xmlns="http://www.w3.org/2000/svg"  width="20" height="20" viewBox="0 0 24 24">
-                        <path [ngStyle]="{'fill': g.themeForegroundColor}" d="M13.92,11.22s-1.22-.6-1.44-.68a.76.76,0,0,0-.27-.06.46.46,0,0,0-.4.24c-.12.17-.48.59-.59.72l-.05,0-.25-.1A6.22,6.22,0,0,1,8.54,9.26l0,0s.05-.06.07-.09l.2-.23.1-.11a1.36,1.36,0,0,0,.19-.31l0-.05a.54.54,0,0,0,0-.52c0-.06-.53-1.27-.58-1.4-.13-.31-.3-.45-.54-.45H7.88a3,3,0,0,0-1,.26,2.08,2.08,0,0,0-.77,1.76A3.78,3.78,0,0,0,7,10.17a.09.09,0,0,0,0,.05,7.81,7.81,0,0,0,3.33,2.89,5.37,5.37,0,0,0,2,.51h0l.32,0h.06a2.13,2.13,0,0,0,1.48-1,1.7,1.7,0,0,0,.09-1.08A.72.72,0,0,0,13.92,11.22Z" transform="translate(-1.83 -1.83)"/>
-                        <path [ngStyle]="{'fill': g.themeForegroundColor}" d="M10.14,1.83a8,8,0,0,0-8,8,7.86,7.86,0,0,0,1.1,4L1.85,17.89a.19.19,0,0,0,0,.21.21.21,0,0,0,.15.07h.06l4.24-1.35a8,8,0,0,0,11.82-7A8,8,0,0,0,10.14,1.83Zm0,14.27a6.37,6.37,0,0,1-3.49-1,.19.19,0,0,0-.12,0H6.47l-2.12.68.68-2a.22.22,0,0,0,0-.19A6.22,6.22,0,0,1,3.79,9.8a6.36,6.36,0,1,1,6.35,6.3Z" transform="translate(-1.83 -1.83)"/>
+                    <!-- <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="26" height="26" focusable="false"  viewBox="0 0 512 512"  xml:space="preserve">
+                        <path fill="#5f6368" d="M256.5,8C116.5,8,8,110.3,8,248.6c0,72.3,29.7,134.8,78.1,177.9c8.3,7.5,6.6,11.9,8.1,58.2  c0.4,11,9.6,19.6,20.6,19.2c2.5-0.1,5-0.6,7.3-1.7c52.9-23.3,53.6-25.1,62.6-22.7c153.3,42.2,319.4-55.9,319.4-231  C504,110.3,396.6,8,256.5,8z M405.8,193.1l-73,115.6c-11.1,17.4-34.1,22.6-51.6,11.5c-0.8-0.5-1.6-1-2.3-1.6l-58.1-43.5  c-5.3-4-12.7-4-18,0l-78.4,59.4c-10.5,7.9-24.2-4.6-17.1-15.7l73-115.6c11-17.4,34.1-22.6,51.6-11.6c0.8,0.5,1.6,1.1,2.4,1.6  l58.1,43.5c5.3,4,12.7,4,18,0l78.4-59.4C399.1,169.5,412.8,182,405.8,193.1L405.8,193.1z"/>
                     </svg> -->
                   </span>
                 <div class="clear"></div>

package/src/app/component/home-conversations/home-conversations.component.ts

@@ -86,7 +86,6 @@ export class HomeConversationsComponent implements OnInit, OnDestroy {
     public translatorService: TranslatorService,
     private customTranslateService: CustomTranslateService,
   ) {
-    // console.log(this.langService);
     // https://www.npmjs.com/package/humanize-duration-ts
     // https://github.com/Nightapes/HumanizeDuration.ts/blob/master/src/humanize-duration.ts
     this.humanizer = new HumanizeDuration(this.langService);
@@ -165,89 +164,30 @@ export class HomeConversationsComponent implements OnInit, OnDestroy {
 
           that.waitingTime = wt;
           that.logger.debug('[HOMECONVERSATIONS] that.waitingTime',  that.waitingTime);
-          // console.log('that.waitingTime', that.waitingTime);
 
           const lang = that.translatorService.getLanguage();
           that.humanWaitingTime = this.humanizer.humanize(wt, {language: lang});
-          // console.log('LIST CONVERSATION humanWaitingTime ', that.humanWaitingTime);
-          // console.log('LIST CONVERSATION g.WAITING_TIME_FOUND ',  this.g.WAITING_TIME_FOUND)
-          // console.log('LIST CONVERSATION g.WAITING_TIME_FOUND contains $reply_time',  this.g.WAITING_TIME_FOUND.includes("$reply_time") )
-        
+
           // REPLACE
           if (this.g.WAITING_TIME_FOUND.includes("$reply_time")) {
             // REPLACE if exist
             this.WAITING_TIME_FOUND_WITH_REPLYTIME_PLACEHOLDER = this.g.WAITING_TIME_FOUND.replace("$reply_time", that.humanWaitingTime);
           }
-          // console.log('LIST CONVERSATION WAITING_TIME_FOUND_WITH_REPLYTIME_PLACEHOLDER',  this.WAITING_TIME_FOUND_WITH_REPLYTIME_PLACEHOLDER)
-          // console.log('LIST CONVERSATION g.dynamicWaitTimeReply ',  this.g.dynamicWaitTimeReply )
-          // console.log('LIST CONVERSATION typeof g.dynamicWaitTimeReply ', typeof this.g.dynamicWaitTimeReply )
-
-          // console.log('xxx', this.humanizer.humanize(wt));
-          // 'The team typically replies in ' + moment.duration(response[0].waiting_time_avg).format();
         }
-        //  else {
-        //   that.waitingTimeMessage = 'waiting_time_not_found';
-        //   // that.waitingTimeMessage = 'Will reply as soon as they can';
-        //  }
+
       });
     }
     
-}
-
-checkShowAllConversation() {
-  if (this.archivedConversations && this.archivedConversations.length > 0) {
-    return true;
-  } else if (this.listConversations && this.listConversations.length > 0) {
-    return true;
   }
-  return false;
-}
-// msToTime(duration) {
-//   let milliseconds = parseInt((duration % 1000) / 100),
-//     seconds = parseInt((duration / 1000) % 60),
-//     minutes = parseInt((duration / (1000 * 60)) % 60),
-//     hours = parseInt((duration / (1000 * 60 * 60)) % 24);
-
-//   hours = (hours < 10) ? "0" + hours : hours;
-//   minutes = (minutes < 10) ? "0" + minutes : minutes;
-//   seconds = (seconds < 10) ? "0" + seconds : seconds;
-
-//   return hours + ":" + minutes + ":" + seconds + "." + milliseconds;
-// }
-
-
-//  dhm(t) {
-//   let cd = 24 * 60 * 60 * 1000,
-//       ch = 60 * 60 * 1000,
-//       d = Math.floor(t / cd),
-//       h = Math.floor( (t - d * cd) / ch),
-//       m = Math.round( (t - d * cd - h * ch) / 60000),
-//       pad = function(n){ return n < 10 ? '0' + n : n; };
-// if ( m === 60 ) {
-//   h++;
-//   m = 0;
-// }
-// if ( h === 24 ) {
-//   d++;
-//   h = 0;
-// }
-// return [d, pad(h), pad(m)].join(':');
-// }
-
-
-  // setImageProfile(agent) {
-  //   //console.log(agent);
-  //   this.contactService.setImageProfile(agent)
-  //   .then(function (snapshot) {
-  //     if (snapshot.val().trim()) {
-  //       agent.image = snapshot.val();
-  //     }
-  //   })
-  //   .catch(function (err) {
-  //       console.log(err);
-  //   });
-  // }
 
+  checkShowAllConversation() {
+    if (this.archivedConversations && this.archivedConversations.length > 0) {
+      return true;
+    } else if (this.listConversations && this.listConversations.length > 0) {
+      return true;
+    }
+    return false;
+  }
 
 
   // ========= begin:: ACTIONS ============//
@@ -284,8 +224,8 @@ checkShowAllConversation() {
     this.unsubscribe();
   }
 
- /** */
- unsubscribe() {
+  /** */
+  unsubscribe() {
     this.subscriptions.forEach(function (subscription) {
         subscription.unsubscribe();
     });

package/src/app/component/list-conversations/list-conversations.component.ts

@@ -45,22 +45,10 @@ export class ListConversationsComponent implements OnInit {
 
   ngOnInit() {
     this.logger.debug('[LISTCONVERSATIONS] ngOnInit', this.listConversations);
-    // console.log('empDifferMap::' + JSON.stringify(this.listConversations))
-    // this.listConversations.forEach(emp => {
-    //   this.empDifferMap[emp.uid] = this.kvDiffers.find(emp).create();
-    //   this.empMap[emp.uid] = emp;
-    //   console.log('empDifferMap::', this.empDifferMap, this.empMap)
-    // })
   }
 
   ngOnChanges(changes: SimpleChanges){
-    // console.log('empDifferMap:: 1111' + JSON.stringify(this.listConversations[1]))
-    // console.log('empDifferMap:: 1111', this.listConversations)
-    // this.listConversations.forEach(emp => {
-    //   this.empDifferMap[emp.uid] = this.kvDiffers.find(emp).create();
-    //   this.empMap[emp.uid] = emp;
-    //   console.log('empDifferMap::', this.empDifferMap, this.empMap)
-    // })
+
   }
 
   public openConversationByID(conversation) {
@@ -79,51 +67,7 @@ export class ListConversationsComponent implements OnInit {
 
   ngDoCheck() {
     let changesListConversation = this.iterableDifferListConv.diff(this.listConversations);
-    if(changesListConversation){
-      // changesListConversation.forEachAddedItem(element => {
-      //   let conv = element.item
-      //   this.onImageLoaded.emit(conv)
-      //   this.onConversationLoaded.emit(conv)
-      // });
-      // changesListConversation.forEachRemovedItem(element => {
-      // });
-      // changesListConversation.forEachOperation((element: IterableChangeRecord<ConversationModel>, adjustedPreviousIndex: number, currentIndex: number) => {
-      //     // if (item.previousIndex == null) {
-      //     //   console.log('itemmmm 1111', item, adjustedPreviousIndex)
-      //     // } else if (currentIndex == null) {
-      //     //   console.log('itemmmm 2222', item, adjustedPreviousIndex)
-      //     // } else {
-      //     //   console.log('itemmmm 3333', item, adjustedPreviousIndex)
-      //     // }
-      //     if(element.currentIndex == null || element.previousIndex == null){
-      //       console.log('itemmmm 44444', element, adjustedPreviousIndex, currentIndex)
-      //       let conv = element.item
-      //       this.onImageLoaded.emit(conv)
-      //       this.onConversationLoaded.emit(conv)
-      //     }
-      // });
-      // changesListConversation.forEachItem((item: IterableChangeRecord<ConversationModel>)=> {
-      //   console.log('itemmmm forEachItem', item)
-      // });
-
-    }
-
 
-    //Detect changes in object inside array
-    // for (let [key, empDiffer] of this.objDiffers) {
-    //   let empChanges = empDiffer.diff(this.differ.get(key));
-    //   if (empChanges) {
-    //     empChanges.forEachChangedItem(record => {
-    //       console.log('--- Employee with id ' + key + ' updated ---');
-    //       // this.changeLogs.push('--- Employee with id ' + key + ' updated ---');
-    //       console.log('Previous value: ' + record.previousValue);
-    //       // this.changeLogs.push('Previous value: ' + record.previousValue);
-    //       console.log('Current value: ' + record.currentValue);
-    //       // this.changeLogs.push('Current value: ' + record.currentValue);
-    //     });
-    //   }
-    // }
-    
   }
 
 

package/src/app/component/message/avatar/avatar.component.ts

@@ -23,7 +23,6 @@ export class AvatarComponent implements OnInit {
       let url = this.imageRepoService.getImagePhotoUrl(this.senderID)
       // this.imageRepoService.checkImageExists(url,  (existImage)=> {
       //   existImage? this.url = url: null;
-      //   console.log('existttttt', existImage)
       // })
       this.checkImageExists(url, (existImage)=> {
         existImage? this.url = url: null;