@chat21/chat21-ionic 3.0.6-2.4 → 3.0.6-2.4-rc1

package/CHANGELOG.md

@@ -1,8 +1,13 @@
 # chat21-ionic ver 3.0
 
-### 3.0.62.4
-- Fixed bug: when the user profile is updated in the dashboard it is not updated in the chat
-- Fixed bug: when is sent a message with only emojis, some emojis have the chat balloon background
+### 3.0.62.4-rc1
+- Fixes the bug: when the user profile is updated in the dashboard it is not updated in the chat
+- Fixes the bug: when is sent a message with only emojis, some emojis have the chat balloon background
+- Fixes the bug: in the conversation detail header  the requester's avatar does not update after the same has filled in the pre-chat form requested by the bot
+- Fixes the bug: images that are not in the database cannot be downloaded
+- Adds default chat color to emojis picker tabs
+- Fixes the bug: the selected conversation is undefined
+- Fixes the bug: in the conversation list, the name of the requester changes according to the order of arrival of the conversations
 
 ### 3.0.62.3
 - Fixes the bug: the method setTyping fired twice after that a message is sent

package/deploy_prod.sh

@@ -25,16 +25,16 @@ cp -p config.xml platforms/browser/www/
 
 ###### CHAT in prod
 cd platforms/browser/www
-aws s3 sync . s3://tiledesk-console/v2/chat/
+# aws s3 sync . s3://tiledesk-console/v2/chat/
 aws s3 sync . s3://tiledesk-console/v2/chat/$version/
 cd ../../../
 # aws cloudfront create-invalidation --distribution-id E2DTAKWHWQ7C3J --paths "/*"
 
 # echo new version deployed on s3://tiledesk-dashboard/chat/$NEW_BUILD/
 echo new version deployed on s3://tiledesk-console/v2/chat/$version/
-echo new version deployed on s3://tiledesk-console/v2/chat/
+# echo new version deployed on s3://tiledesk-console/v2/chat/
 echo available on https://console.tiledesk.com/v2/chat/$version/index.html
-echo available on https://console.tiledesk.com/v2/chat/index.html
+# echo available on https://console.tiledesk.com/v2/chat/index.html
 
 
 ###### CHAT-IONIC5

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chat21/chat21-ionic",
-    "version": "3.0.62.4",
+    "version": "3.0.62.4-rc1",
     "author": "Tiledesk SRL",
     "homepage": "https://tiledesk.com/",
     "scripts": {
@@ -52,6 +52,7 @@
         "cordova-plugin-whitelist": "^1.3.5",
         "cordova-res": "^0.15.1",
         "core-js": "^2.5.4",
+        "file-saver": "^2.0.5",
         "firebase": "^8.6.7",
         "marked": "^2.0.1",
         "material-design-icons": "^3.0.1",

package/src/app/app.component.ts

@@ -269,7 +269,6 @@ export class AppComponent implements OnInit {
 
   saveInStorageNumberOfOpenedChatTab() {
     // this.logger.log('Calling saveInStorageChatOpenedTab!');
-
     // https://jsfiddle.net/jjjs5wd3/3/å
     if (+localStorage.tabCount > 0) {
       this.logger.log('Chat IONIC Already open!');
@@ -660,75 +659,84 @@ export class AppComponent implements OnInit {
 
 
   updateStoredCurrentUser() {
-    const currentUser = JSON.parse(this.appStorageService.getItem('currentUser'));
-    this.logger.log('[APP-COMP] updateStoredCurrentUser - currentUser', currentUser)
-    const dshbrdUser = JSON.parse(localStorage.getItem('user'));
-    this.logger.log('[APP-COMP] updateStoredCurrentUser - dshbrdUser', dshbrdUser)
-    
-    if (currentUser.color !== dshbrdUser.fillColour) {
-      this.logger.log('[APP-COMP] updateStoredCurrentUser - currentUser.color !== dshbrdUser.fillColour')
-      this.logger.log('[APP-COMP] updateStoredCurrentUser - currentUser.color ', currentUser.color)
-      this.logger.log('[APP-COMP] updateStoredCurrentUser - dshbrdUser.fillColour ', dshbrdUser.fillColour)
-      currentUser.color = dshbrdUser.fillColour;
-    } else {
-      this.logger.log('[APP-COMP] updateStoredCurrentUser - currentUser.color === dshbrdUser.fillColour')
-      this.logger.log('[APP-COMP] updateStoredCurrentUser - currentUser.color ', currentUser.color)
-      this.logger.log('[APP-COMP] updateStoredCurrentUser - dshbrdUser.fillColour ', dshbrdUser.fillColour)
-    }
+    const storedCurrentUser = this.appStorageService.getItem('currentUser')
+    const storedDshbrdUser = localStorage.getItem('user')
+
+    this.logger.log('[APP-COMP] updateStoredCurrentUser - stored currentUser', storedCurrentUser)
+    this.logger.log('[APP-COMP] updateStoredCurrentUser - stored dshbrdUser', storedDshbrdUser)
+    if ((storedCurrentUser && storedCurrentUser !== 'undefined') && (storedDshbrdUser && storedDshbrdUser !== 'undefined')) {
+      const currentUser = JSON.parse(storedCurrentUser);
+      const dshbrdUser = JSON.parse(storedDshbrdUser);
+      if (currentUser && dshbrdUser) {
+        if (currentUser.color !== dshbrdUser.fillColour) {
+          this.logger.log('[APP-COMP] updateStoredCurrentUser - currentUser.color !== dshbrdUser.fillColour')
+          this.logger.log('[APP-COMP] updateStoredCurrentUser - currentUser.color ', currentUser.color)
+          this.logger.log('[APP-COMP] updateStoredCurrentUser - dshbrdUser.fillColour ', dshbrdUser.fillColour)
+          currentUser.color = dshbrdUser.fillColour;
+        } else {
+          this.logger.log('[APP-COMP] updateStoredCurrentUser - currentUser.color === dshbrdUser.fillColour')
+          this.logger.log('[APP-COMP] updateStoredCurrentUser - currentUser.color ', currentUser.color)
+          this.logger.log('[APP-COMP] updateStoredCurrentUser - dshbrdUser.fillColour ', dshbrdUser.fillColour)
+        }
 
-    if (currentUser.firstname !== dshbrdUser.firstname) {
-      this.logger.log('[APP-COMP] updateStoredCurrentUser - currentUser.firstname !== dshbrdUser.firstname')
-      this.logger.log('[APP-COMP] updateStoredCurrentUser - currentUser.firstname ', currentUser.firstname)
-      this.logger.log('[APP-COMP] updateStoredCurrentUser - dshbrdUser.firstname ', dshbrdUser.firstname)
-      currentUser.firstname = dshbrdUser.firstname
-    } else {
-      this.logger.log('[APP-COMP] updateStoredCurrentUser - currentUser.firstname === dshbrdUser.firstname')
-      this.logger.log('[APP-COMP] updateStoredCurrentUser - currentUser.firstname ', currentUser.firstname)
-      this.logger.log('[APP-COMP] updateStoredCurrentUser - dshbrdUser.firstname ', dshbrdUser.firstname)
-   
-    }
+        if (currentUser.firstname !== dshbrdUser.firstname) {
+          this.logger.log('[APP-COMP] updateStoredCurrentUser - currentUser.firstname !== dshbrdUser.firstname')
+          this.logger.log('[APP-COMP] updateStoredCurrentUser - currentUser.firstname ', currentUser.firstname)
+          this.logger.log('[APP-COMP] updateStoredCurrentUser - dshbrdUser.firstname ', dshbrdUser.firstname)
+          currentUser.firstname = dshbrdUser.firstname;
+        } else {
+          this.logger.log('[APP-COMP] updateStoredCurrentUser - currentUser.firstname === dshbrdUser.firstname')
+          this.logger.log('[APP-COMP] updateStoredCurrentUser - currentUser.firstname ', currentUser.firstname)
+          this.logger.log('[APP-COMP] updateStoredCurrentUser - dshbrdUser.firstname ', dshbrdUser.firstname)
+        }
 
-    if (currentUser.lastname !== dshbrdUser.lastname) {
-      this.logger.log('[APP-COMP] updateStoredCurrentUser - currentUser.lastname !== dshbrdUser.lastname')
-      this.logger.log('[APP-COMP] updateStoredCurrentUser - currentUser.lastname ', currentUser.lastname)
-      this.logger.log('[APP-COMP] updateStoredCurrentUser - dshbrdUser.lastname ', dshbrdUser.lastname)
-      currentUser.lastname = dshbrdUser.lastname
-    } else {
-      this.logger.log('[APP-COMP] updateStoredCurrentUser - currentUser.lastname === dshbrdUser.lastname')
-      this.logger.log('[APP-COMP] updateStoredCurrentUser - currentUser.lastname ', currentUser.lastname)
-      this.logger.log('[APP-COMP] updateStoredCurrentUser - dshbrdUser.lastname ', dshbrdUser.lastname)
-    }
+        if (currentUser.lastname !== dshbrdUser.lastname) {
+          this.logger.log('[APP-COMP] updateStoredCurrentUser - currentUser.lastname !== dshbrdUser.lastname')
+          this.logger.log('[APP-COMP] updateStoredCurrentUser - currentUser.lastname ', currentUser.lastname)
+          this.logger.log('[APP-COMP] updateStoredCurrentUser - dshbrdUser.lastname ', dshbrdUser.lastname)
+          currentUser.lastname = dshbrdUser.lastname;
+        } else {
+          this.logger.log('[APP-COMP] updateStoredCurrentUser - currentUser.lastname === dshbrdUser.lastname')
+          this.logger.log('[APP-COMP] updateStoredCurrentUser - currentUser.lastname ', currentUser.lastname)
+          this.logger.log('[APP-COMP] updateStoredCurrentUser - dshbrdUser.lastname ', dshbrdUser.lastname)
+        }
 
-    if (currentUser.avatar !== dshbrdUser.fullname_initial) {
-      this.logger.log('[APP-COMP] updateStoredCurrentUser - currentUser.avatar !== dshbrdUser.fullname_initial')
-      this.logger.log('[APP-COMP] updateStoredCurrentUser - currentUser.avatar ', currentUser.avatar)
-      this.logger.log('[APP-COMP] updateStoredCurrentUser - dshbrdUser.fullname_initial ', dshbrdUser.fullname_initial )
-    } else {
-      this.logger.log('[APP-COMP] updateStoredCurrentUser - currentUser.avatar === dshbrdUser.fullname_initial')
-      this.logger.log('[APP-COMP] updateStoredCurrentUser - currentUser.avatar ', currentUser.avatar)
-      this.logger.log('[APP-COMP] updateStoredCurrentUser - dshbrdUser.fullname_initial ', dshbrdUser.fullname_initial )
-    }
+        if (currentUser.avatar !== dshbrdUser.fullname_initial) {
+          this.logger.log('[APP-COMP] updateStoredCurrentUser - currentUser.avatar !== dshbrdUser.fullname_initial')
+          this.logger.log('[APP-COMP] updateStoredCurrentUser - currentUser.avatar ', currentUser.avatar)
+          this.logger.log('[APP-COMP] updateStoredCurrentUser - dshbrdUser.fullname_initial ', dshbrdUser.fullname_initial)
+          currentUser.avatar = dshbrdUser.fullname_initial
+        } else {
+          this.logger.log('[APP-COMP] updateStoredCurrentUser - currentUser.avatar === dshbrdUser.fullname_initial')
+          this.logger.log('[APP-COMP] updateStoredCurrentUser - currentUser.avatar ', currentUser.avatar)
+          this.logger.log('[APP-COMP] updateStoredCurrentUser - dshbrdUser.fullname_initial ', dshbrdUser.fullname_initial)
+        }
 
-    let fullname = ""
-    if (dshbrdUser.firstname && !dshbrdUser.lastname ) {
-      fullname = dshbrdUser.firstname
-    } else if (dshbrdUser.firstname && dshbrdUser.lastname) {
-      fullname = dshbrdUser.firstname + ' ' + dshbrdUser.lastname
-      this.logger.log('[APP-COMP] updateStoredCurrentUser - fullname ', fullname)
-    }
+        let fullname = ""
+        if (dshbrdUser.firstname && !dshbrdUser.lastname) {
+          fullname = dshbrdUser.firstname
+        } else if (dshbrdUser.firstname && dshbrdUser.lastname) {
+          fullname = dshbrdUser.firstname + ' ' + dshbrdUser.lastname
+          this.logger.log('[APP-COMP] updateStoredCurrentUser - fullname ', fullname)
+        }
+
+        if (fullname !== currentUser.fullname) {
+          this.logger.log('[APP-COMP] updateStoredCurrentUser - currentUser.fullname !== dshbrdUser.fullname ')
+          this.logger.log('[APP-COMP] updateStoredCurrentUser - currentUser.fullname  ', fullname)
+          this.logger.log('[APP-COMP] updateStoredCurrentUser - dshbrdUser.fullname ', currentUser.fullname)
+          currentUser.fullname = fullname
+        } else {
+          this.logger.log('[APP-COMP] updateStoredCurrentUser - currentUser.fullname === dshbrdUser.fullname ')
+          this.logger.log('[APP-COMP] updateStoredCurrentUser - currentUser.fullname  ', fullname)
+          this.logger.log('[APP-COMP] updateStoredCurrentUser - dshbrdUser.fullname ', currentUser.fullname)
+        }
 
-    if (fullname !== currentUser.fullname) {
-      this.logger.log('[APP-COMP] updateStoredCurrentUser - currentUser.fullname !== dshbrdUser.fullname ')
-      this.logger.log('[APP-COMP] updateStoredCurrentUser - currentUser.fullname  ' , fullname)
-      this.logger.log('[APP-COMP] updateStoredCurrentUser - dshbrdUser.fullname ', currentUser.fullname )
-      currentUser.fullname = fullname
+        this.appStorageService.setItem('currentUser', JSON.stringify(currentUser));
+        this.tiledeskAuthService.setCurrentUser(currentUser);
+      }
     } else {
-      this.logger.log('[APP-COMP] updateStoredCurrentUser - currentUser.fullname === dshbrdUser.fullname ')
-      this.logger.log('[APP-COMP] updateStoredCurrentUser - currentUser.fullname  ' , fullname)
-      this.logger.log('[APP-COMP] updateStoredCurrentUser - dshbrdUser.fullname ', currentUser.fullname )
+      this.logger.error('[APP-COMP] updateStoredCurrentUser - currentuser or dashboarduser not found in storage')
     }
-
-    this.appStorageService.setItem('currentUser', JSON.stringify(currentUser));
   }
 
   /***************************************************+*/
@@ -744,7 +752,7 @@ export class AppComponent implements OnInit {
       this.logger.log('[APP-COMP] >>> initAuthentication I LOG IN WITH A TOKEN EXISTING IN THE LOCAL STORAGE OR WITH A TOKEN PASSED IN THE URL PARAMETERS <<<')
       this.tiledeskAuthService.signInWithCustomToken(tiledeskToken).then(user => {
         this.logger.log('[APP-COMP] >>> initAuthentication user ', user)
-        
+
         this.updateStoredCurrentUser()
 
         this.messagingAuthService.createCustomToken(tiledeskToken)
@@ -776,24 +784,7 @@ export class AppComponent implements OnInit {
   /**------- AUTHENTICATION FUNCTIONS --> END <--- +*/
   /***************************************************+*/
 
-
-
   checkPlatform() {
-    //  console.log('[APP-COMP] checkPlatform');
-    // let pageUrl = '';
-    // try {
-    //   const pathPage = this.route.snapshot.firstChild.routeConfig.path;
-    //   this.route.snapshot.firstChild.url.forEach(element => {
-    //     pageUrl += '/' + element.path;
-    //   });
-    // } catch (error) {
-    //   this.logger.debug('error', error);
-    // }
-    // this.logger.debug('checkPlatform pathPage: ', pageUrl);
-    // if (!pageUrl || pageUrl === '') {
-    //   pageUrl = '/conversations-list';
-    // }
-
     if (checkPlatformIsMobile()) {
       this.chatManager.startApp();
 
@@ -969,14 +960,20 @@ export class AppComponent implements OnInit {
     this.conversationsHandlerService.conversationChanged.subscribe((conversation: ConversationModel) => {
 
       // console.log('[APP-COMP] ***** subscribeConversationChanged conversation: ', conversation);
-      const currentUser = JSON.parse(this.appStorageService.getItem('currentUser'));
-      this.logger.log('[APP-COMP] ***** subscribeConversationChanged current_user: ', currentUser);
-
-      if (currentUser) {
-        this.logger.log('[APP-COMP] ***** subscribeConversationChanged current_user uid: ', currentUser.uid);
-        if (conversation && conversation.sender !== currentUser.uid) {
-          this.manageTabNotification();
+      let currentUser = null
+      const storedCurrentUser = this.appStorageService.getItem('currentUser')
+      if (storedCurrentUser && storedCurrentUser !== 'undefined') {
+        currentUser = JSON.parse(storedCurrentUser);
+        this.logger.log('[APP-COMP] ***** subscribeConversationChanged currentUser: ', currentUser);
+
+        if (currentUser) {
+          this.logger.log('[APP-COMP] ***** subscribeConversationChanged current_user uid: ', currentUser.uid);
+          if (conversation && conversation.sender !== currentUser.uid) {
+            this.manageTabNotification();
+          }
         }
+      } else {
+        this.logger.error('[APP-COMP] ***** subscribeConversationChanged currentUser nor found in storage  ');
       }
     });
   }

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

@@ -80,7 +80,7 @@
       <!--backgroundColor non viene ancora usato -->
       <chat-bubble-message class="messages msg_sent" id="message_msg_sent" style="position: relative;" 
         [ngClass]="{'has-metadata': (isImage(message) || isFrame(message))}" 
-        [class.emoticon]="isEmojii_2(message?.text)"
+        [class.emoticon]="isEmojii(message?.text)"
         [ngClass]="{'button-in-msg' : message.metadata && message.metadata.button}"
         [message]="message" 
         [textColor]="'col-msg-sent'"
@@ -120,7 +120,7 @@
 
       <chat-bubble-message class="messages msg_receive" id="message_msg_receive" style="position: relative;"
         [ngClass]="{'has-metadata': (isImage(message) || isFrame(message))}" 
-        [class.emoticon]="isEmojii_2(message?.text)"
+        [class.emoticon]="isEmojii(message?.text)"
         [message]="message" 
         [textColor]="'black'"
         [addAsCannedResponseTooltipText]="addAsCannedResponseTooltipText" 

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

@@ -98,6 +98,7 @@ ion-item {
         font-size: 4em;
         // padding-bottom: 21px;
         padding-top: 30px;
+        text-align: right;
     }
     .has-metadata {
         max-width: 100% !important;

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

@@ -3,7 +3,7 @@ import { ChangeDetectorRef, Component, Input, OnInit, Output, EventEmitter } fro
 
 
 import { MESSAGE_TYPE_INFO, MESSAGE_TYPE_MINE, MESSAGE_TYPE_OTHERS } from 'src/chat21-core/utils/constants';
-import { isChannelTypeGroup, isEmojii,isEmojii_2, isFirstMessage, isInfo, isMine, messageType } from 'src/chat21-core/utils/utils-message';
+import { isChannelTypeGroup, isEmojii, isFirstMessage, isInfo, isMine, messageType } from 'src/chat21-core/utils/utils-message';
 import { UploadService } from 'src/chat21-core/providers/abstract/upload.service';
 import { isFile, isFrame, isImage } from 'src/chat21-core/utils/utils-message';
 
@@ -42,7 +42,6 @@ export class IonConversationDetailComponent extends ConversationContentComponent
   messageType = messageType;
   isChannelTypeGroup = isChannelTypeGroup;
   isEmojii = isEmojii;
-  isEmojii_2 =isEmojii_2
 
   MESSAGE_TYPE_INFO = MESSAGE_TYPE_INFO;
   MESSAGE_TYPE_MINE = MESSAGE_TYPE_MINE;

package/src/app/chatlib/conversation-detail/message/image/image.component.ts

@@ -66,11 +66,13 @@ export class ImageComponent implements OnInit {
     var modalImg = <HTMLImageElement>document.getElementById("image-viewer-img");
     var captionText = document.getElementById("caption");
     modalImg.src = url
-    captionText.innerHTML = fileName;
+    if (captionText) {
    
-  }
+      captionText.innerHTML = fileName ? null : fileName = decodeURIComponent(decodeURIComponent(url).split('/').pop());
+      // console.log('XXXX ', decodeURIComponent(decodeURIComponent(url).split('/').pop()))
+    }
 
- 
+  }
 
 
 }

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

@@ -32,8 +32,8 @@
       <!-- (click)="onOpenCloseInfoConversation()" -->
       <div *ngIf="conversationAvatar" class="tile-info-with" 
         [ngClass]="{ 'tile-info-with-ios': platformName === 'ios' }">
-        <!-- <span class="tile-username">{{ conversationAvatar.conversation_with_fullname }} </span> -->
-        <span class="tile-username">{{ conversation_with_fullname }} </span>
+        <span class="tile-username">{{ conversationAvatar.conversation_with_fullname }} </span>
+        <!-- <span class="tile-username">{{ conversation_with_fullname }} </span> -->
 
       </div>
 
@@ -50,7 +50,7 @@
         <span style="text-transform: capitalize; margin-left: 5px;"> {{ 'Crea ticket' | translate}} </span>
       </ion-button> -->
 
-      <ion-button *ngIf="idConv.startsWith('support-group') && conv_type !== 'archived'" ion-button fill="clear" color="primary" size="small" 
+      <ion-button *ngIf="conversationUid?.startsWith('support-group') && conv_type !== 'archived'" ion-button fill="clear" color="primary" size="small" 
       (click)="closeConversation()" [ngClass]="{'resolve-conv-margin-right': !isMobile}" [disabled]="conv_closed === true">
         <!-- <ion-icon slot="icon-only" name="alert-circle-outline"></ion-icon> -->
         <ion-icon name="archive-outline"></ion-icon>

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

@@ -22,6 +22,7 @@ import { ModalController } from '@ionic/angular'
 import { EventsService } from 'src/app/services/events-service'
 import { CreateTicketPage } from 'src/app/pages/create-ticket/create-ticket.page'
 import { TiledeskService } from 'src/app/services/tiledesk/tiledesk.service'
+import { TYPE_DIRECT } from 'src/chat21-core/utils/constants'
 
 @Component({
   selector: 'app-header-conversation-detail',
@@ -31,57 +32,36 @@ import { TiledeskService } from 'src/app/services/tiledesk/tiledesk.service'
 export class HeaderConversationDetailComponent implements OnInit, OnChanges {
   @Input() conversationAvatar: any
   @Input() idLoggedUser: string
+  @Input() conversationUid: string
   @Input() conv_type: string
-  @Input() isOpenInfoConversation: boolean
+  @Input() isOpenInfoConversation: boolean = true
   @Input() isMobile: boolean
   @Input() translationMap: Map<string, string>
   @Output() eventOpenCloseInfoConversation = new EventEmitter<boolean>()
   conversationWithFullname: string
   openInfoConversation = true
   openInfoMessage = true
-  DIRECT = 'direct'
 
   isDirect = false
   isTyping = false
   borderColor = '#ffffff'
   fontColor = '#949494'
   membersConversation = ['SYSTEM']
-  fullNameConv: string
-  idConv: string
-  conversation_with_fullname: string
   platformName: string
   conv_closed: boolean = false;
   IS_ON_IOS_MOBILE_DEVICE: boolean
   private logger: LoggerService = LoggerInstance.getInstance()
 
-  /**
-   * Constructor
-   * @param imageRepoService
-   */
   constructor(
     public imageRepoService: ImageRepoService,
     private route: ActivatedRoute,
     public platform: Platform,
     private router: Router,
-    // public tiledeskAuthService: TiledeskAuthService,
     public tiledeskService: TiledeskService,
     public events: EventsService,
     public modalController: ModalController,
   ) {
-    this.route.paramMap.subscribe((params) => {
-      // this.conversationWithFullname = params.get('FullNameConv');
-      this.logger.log('[CONVS-DETAIL][HEADER] -> params: ', params)
-      this.fullNameConv = params.get('FullNameConv')
-      this.logger.log(
-        '[CONVS-DETAIL][HEADER] -> params > conversation_with_fullname: ',
-        this.fullNameConv,
-      )
-      this.idConv = params.get('IDConv')
-      this.logger.log(
-        '[CONVS-DETAIL][HEADER] -> params > conversation_with: ',
-        this.idConv,
-      )
-    })
+    
   }
 
   // ----------------------------------------------------
@@ -91,8 +71,7 @@ export class HeaderConversationDetailComponent implements OnInit, OnChanges {
 
     this.logger.log('[CONVS-DETAIL][HEADER] - (ngOnInit) - idLoggedUser', this.idLoggedUser,)
     this.logger.log('[CONVS-DETAIL][HEADER] - (ngOnInit) - conversationAvatar', this.conversationAvatar,)
-    this.logger.log('[CONVS-DETAIL][HEADER] - (ngOnInit) -  conv_type', this.conv_type,)
-    this.conversation_with_fullname = this.conversationAvatar.conversation_with_fullname
+    this.logger.log('[CONVS-DETAIL][HEADER] - (ngOnInit) -  conv_type', this.conv_type)
     this.listenToConversationHasBeenClosed()
     this.initialize();
     // this.isOniOSMobileDevice()
@@ -111,29 +90,8 @@ export class HeaderConversationDetailComponent implements OnInit, OnChanges {
   ngOnChanges() {
     this.logger.log('[CONVS-DETAIL][HEADER] - (ngOnChanges) -  conversationAvatar', this.conversationAvatar)
     if (this.conversationAvatar) {
-      this.conversationAvatar.imageurl = this.imageRepoService.getImagePhotoUrl(
-        this.conversationAvatar.uid,
-      )
-    } else {
-      const channelType = setChannelType(this.idConv)
-      this.logger.log('[CONVS-DETAIL][HEADER] - (ngOnChanges) - conversationAvatar usecase UNDEFINED channelType ', channelType)
-      this.conversationAvatar = setConversationAvatar(
-        this.idConv,
-        this.fullNameConv,
-        channelType,
-      )
-      if (this.conversationAvatar) {
-        this.conversationAvatar.imageurl = this.imageRepoService.getImagePhotoUrl(
-          this.conversationAvatar.uid,
-        )
-      }
-      this.logger.log('[CONVS-DETAIL][HEADER] - (ngOnChanges) - conversationAvatar usecase UNDEFINED conversationAvatar', this.conversationAvatar)
-    }
-
-    this.logger.log(
-      '[CONVS-DETAIL][HEADER] - (ngOnChanges) - isOpenInfoConversation',
-      this.isOpenInfoConversation,
-    )
+      this.conversationAvatar.imageurl = this.imageRepoService.getImagePhotoUrl(this.conversationAvatar.uid)
+    } 
     this.openInfoConversation = this.isOpenInfoConversation
   }
 
@@ -142,10 +100,7 @@ export class HeaderConversationDetailComponent implements OnInit, OnChanges {
   // ----------------------------------------------------
   initialize() {
     this.getPlatformName()
-    if (
-      this.conversationAvatar &&
-      this.conversationAvatar.channelType === this.DIRECT
-    ) {
+    if ( this.conversationAvatar && this.conversationAvatar.channelType === TYPE_DIRECT ) {
       this.isDirect = true
     } else if (this.idLoggedUser) {
       this.membersConversation.push(this.idLoggedUser)
@@ -165,13 +120,13 @@ export class HeaderConversationDetailComponent implements OnInit, OnChanges {
 
   closeConversation() {
     this.logger.log('[CONVS-DETAIL][HEADER] click on RESOLVE this.events', this.events) 
-    this.events.publish('conversation:closed', this.idConv)
+    this.events.publish('conversation:closed', this.conversationUid)
   }
 
   listenToConversationHasBeenClosed() {
     this.events.subscribe('conversationhasbeenclosed', (convId) => {
       // console.log('[CONVS-DETAIL][HEADER] conversationhasbeenclosed  convId', convId)
-      if (convId === this.idConv) {
+      if (convId === this.conversationUid) {
         this.logger.log('[CONVS-DETAIL][HEADER] the conversation was closed',)
         this.conv_closed = true;
       }

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

@@ -92,8 +92,14 @@
           <!-- https://www.npmjs.com/package/@ctrl/ngx-emoji-mart/v/1.0.6 -->
           <!-- --------------------------------------------------------------------- -->
           <!-- [style]="{ position: 'absolute', bottom: '53px', right: '-246px' }" -->
-          <emoji-mart [showPreview]="false" [perLine]="emojiPerLine" [style.visibility]="showEmojiPicker?'visible':'hidden'"
-            (emojiSelect)="addEmoji($event)"  [ngClass]="{'emoji-mart-desktop': !IS_ON_MOBILE_DEVICE, 'emoji-mart-mobile': IS_ON_MOBILE_DEVICE }">
+          <emoji-mart 
+            [showPreview]="false" 
+            [perLine]="emojiPerLine" 
+            [style.visibility]="showEmojiPicker?'visible':'hidden'"  
+            [include]="emojiiCategories"
+            [color]="emojiColor" 
+            [ngClass]="{'emoji-mart-desktop': !IS_ON_MOBILE_DEVICE, 'emoji-mart-mobile': IS_ON_MOBILE_DEVICE }"
+            (emojiSelect)="addEmoji($event)">
           </emoji-mart>
           <!-- </div> -->
 

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

@@ -87,6 +87,8 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
   showEmojiPicker: boolean = false; //To show/hide emoji picker
   addWhiteSpaceBefore: boolean;
   emojiPerLine: number = 9
+  emojiColor: string ="#3880ff"
+  emojiiCategories = [ 'recent', 'people', 'nature', 'activity']
   /**
    * Constructor
    * @param chooser 

package/src/app/components/image-viewer/image-viewer.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-
+import { saveAs } from 'file-saver';
 @Component({
   selector: 'app-image-viewer',
   templateUrl: './image-viewer.component.html',
@@ -7,9 +7,14 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ImageViewerComponent implements OnInit {
 
-  constructor() { }
+  constructor(
+    
+  ) {  }
+
+
+  ngOnInit() { }
+
 
-  ngOnInit() {}
 
   closeImageViewerModal() {
     // console.log('HAS CLICKED CLOSE MODAL')
@@ -18,6 +23,24 @@ export class ImageViewerComponent implements OnInit {
     modal.style.display = "none";
   }
 
+  // __downloadImage()  {
+  //   var modalImg = <HTMLImageElement>document.getElementById("image-viewer-img")
+  //   console.log('HAS CLICKED CLOSE DWNLD IMG modalImg ', modalImg)
+  //   var modalImgURL = modalImg.src;
+  //   console.log('HAS CLICKED CLOSE DWNLD IMG modalImgURL ', modalImgURL)
+  //   var captionText = document.getElementById("caption").innerHTML;
+  //   console.log('HAS CLICKED CLOSE DWNLD IMG captionText ', captionText)
+
+  //   const a: any = document.createElement('a');
+  //   a.href = modalImgURL;
+  //   a.download = captionText;
+  //   document.body.appendChild(a);
+  //   a.style = 'display: none';
+  //   a.click();
+  //   a.remove();
+  // }
+
+
   downloadImage()  {
     var modalImg = <HTMLImageElement>document.getElementById("image-viewer-img")
     // console.log('HAS CLICKED CLOSE DWNLD IMG modalImg ', modalImg)
@@ -26,13 +49,8 @@ export class ImageViewerComponent implements OnInit {
     var captionText = document.getElementById("caption").innerHTML;
     // console.log('HAS CLICKED CLOSE DWNLD IMG captionText ', captionText)
 
-    const a: any = document.createElement('a');
-    a.href = modalImgURL;
-    a.download = captionText;
-    document.body.appendChild(a);
-    a.style = 'display: none';
-    a.click();
-    a.remove();
+    saveAs(modalImgURL, captionText);
+    this.closeImageViewerModal()
   }
 
 }