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

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # chat21-ionic ver 3.0
 
+### 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
+- Other minor improvements
+
 ### 3.0.62.2
 - Fixed bug: if the teammate has the role of agent when switching from the dashboard to the chat and vice versa, the icons that only owners and admins have access to are displayed briefly in the left sidebar
 - Adds the "Edit Profile" button and a link to the help center in the teammate details drawer

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.2",
+    "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!');
@@ -299,7 +298,7 @@ export class AppComponent implements OnInit {
   ngOnInit() {
     const appconfig = this.appConfigProvider.getConfig();
     this.logger.log('[APP-COMP] ngOnInit  appconfig', appconfig)
-    if (appconfig && appconfig.supportMode &&  (appconfig.supportMode === true || appconfig.supportMode === 'true' )) {
+    if (appconfig && appconfig.supportMode && (appconfig.supportMode === true || appconfig.supportMode === 'true')) {
       this.SUPPORT_MODE = true;
       this.logger.log('[APP-COMP] appconfig > SUPPORT_MODE', this.SUPPORT_MODE)
     } else {
@@ -564,16 +563,16 @@ export class AppComponent implements OnInit {
     } else if (browserLang && stored_preferred_lang) {
       chat_lang = stored_preferred_lang
     }
-  
+
     this.logger.log('[APP-COMP] - chat_lang', chat_lang)
-  
+
     if (tranlatedLanguage.includes(chat_lang)) {
-      this.logger.log('[APP-COMP] tranlatedLanguage includes',chat_lang , ': ', tranlatedLanguage.includes(chat_lang)) 
+      this.logger.log('[APP-COMP] tranlatedLanguage includes', chat_lang, ': ', tranlatedLanguage.includes(chat_lang))
       this.translate.setDefaultLang(chat_lang)
       this.translate.use(chat_lang);
     }
     else {
-      this.logger.log('[APP-COMP] tranlatedLanguage includes',chat_lang , ': ', tranlatedLanguage.includes(chat_lang)) 
+      this.logger.log('[APP-COMP] tranlatedLanguage includes', chat_lang, ': ', tranlatedLanguage.includes(chat_lang))
       this.translate.setDefaultLang('en');
       this.translate.use('en');
     }
@@ -659,6 +658,87 @@ export class AppComponent implements OnInit {
   }
 
 
+  updateStoredCurrentUser() {
+    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.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)
+          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)
+        }
+
+        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)
+        }
+
+        this.appStorageService.setItem('currentUser', JSON.stringify(currentUser));
+        this.tiledeskAuthService.setCurrentUser(currentUser);
+      }
+    } else {
+      this.logger.error('[APP-COMP] updateStoredCurrentUser - currentuser or dashboarduser not found in storage')
+    }
+  }
+
   /***************************************************+*/
   /**------- AUTHENTICATION FUNCTIONS --> START <--- +*/
   private initAuthentication() {
@@ -672,6 +752,9 @@ 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)
       }).catch(error => {
         this.logger.error('[APP-COMP] initAuthentication SIGNINWITHCUSTOMTOKEN error::', error)
@@ -701,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();
 
@@ -894,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  ');
       }
     });
   }
@@ -1007,7 +1079,7 @@ export class AppComponent implements OnInit {
     let platformIsNow = PLATFORM_DESKTOP;
     if (checkPlatformIsMobile()) {
       platformIsNow = PLATFORM_MOBILE;
-      this.logger.log('onResize platformIsNow ', platformIsNow) 
+      this.logger.log('onResize platformIsNow ', platformIsNow)
     }
     if (!this.platformIs || this.platformIs === '') {
       this.platformIs = platformIsNow;

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

@@ -28,6 +28,7 @@
                             <!--backgroundColor non viene ancora usato -->
                             <tiledeskwidget-bubble-message class="messages msg_sent slide-in-right"
                               [ngClass]="{'button-in-msg' : message?.metadata && message?.metadata?.button}"
+                              [class.chat-text-emoticon]="isEmojii(message?.text)"
                               [message]="message"
                               [textColor]="'col-msg-sent'"
                               (onBeforeMessageRender)="returnOnBeforeMessageRender($event)"
@@ -54,6 +55,7 @@
 
                             <!--backgroundColor non viene ancora usato -->
                             <tiledeskwidget-bubble-message class="messages msg_receive slide-in-left"
+                              [class.chat-text-emoticon]="isEmojii(message?.text)"
                               [message]="message"
                               [textColor]="'black'"
                               (onBeforeMessageRender)="returnOnBeforeMessageRender($event)"

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

@@ -5,7 +5,7 @@ import { MSG_STATUS_SENT, MSG_STATUS_RETURN_RECEIPT, MSG_STATUS_SENT_SERVER, MAX
 import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 import { UploadService } from 'src/chat21-core/providers/abstract/upload.service';
-import { isInfo, isMine, messageType } from 'src/chat21-core/utils/utils-message';
+import { isEmojii, isInfo, isMine, messageType } from 'src/chat21-core/utils/utils-message';
 @Component({
   selector: 'tiledeskwidget-conversation-content',
   templateUrl: './conversation-content.component.html',
@@ -49,6 +49,7 @@ export class ConversationContentComponent implements OnInit {
   isMine = isMine;
   isInfo = isInfo;
   messageType = messageType;
+  isEmojii = isEmojii;
 
   MESSAGE_TYPE_INFO = MESSAGE_TYPE_INFO;
   MESSAGE_TYPE_MINE = MESSAGE_TYPE_MINE;

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

@@ -68,9 +68,9 @@
       </div>
     </ng-container>
 
-    <div class="align-center" class="ion-text-center" *ngIf="messageType(MESSAGE_TYPE_INFO, message)"
-      class="msg_info_container">
-      <chat-info-message class="messages" [message]="message">
+    <div class="align-center ion-text-center msg_info_container" *ngIf="messageType(MESSAGE_TYPE_INFO, message)">
+      <chat-info-message class="messages" 
+        [message]="message">
       </chat-info-message>
     </div>
 
@@ -78,19 +78,25 @@
     <div role="messaggio" *ngIf="messageType(MESSAGE_TYPE_MINE, message)" class="msg_container base_sent">
 
       <!--backgroundColor non viene ancora usato -->
-      
-      <chat-bubble-message style="position: relative;"
-        [ngClass]="{'has-metadata': (isImage(message) || isFrame(message))}" class="messages msg_sent"
-        id="message_msg_sent" [ngClass]="{'button-in-msg' : message.metadata && message.metadata.button}"
-        [message]="message" [textColor]="'col-msg-sent'" (onBeforeMessageRender)="returnOnBeforeMessageRender($event)"
-        (onAfterMessageRender)="returnOnAfterMessageRender($event)" (onImageRendered)="onImageRenderedFN($event)"
-        [addAsCannedResponseTooltipText]="addAsCannedResponseTooltipText" [areVisibleCAR]="areVisibleCAR"
+      <chat-bubble-message class="messages msg_sent" id="message_msg_sent" style="position: relative;" 
+        [ngClass]="{'has-metadata': (isImage(message) || isFrame(message))}" 
+        [class.emoticon]="isEmojii(message?.text)"
+        [ngClass]="{'button-in-msg' : message.metadata && message.metadata.button}"
+        [message]="message" 
+        [textColor]="'col-msg-sent'"
+        [addAsCannedResponseTooltipText]="addAsCannedResponseTooltipText" 
+        [areVisibleCAR]="areVisibleCAR"
         [support_mode]="support_mode"
-        [class.emoticon]="message?.emoticon">
+        (onBeforeMessageRender)="returnOnBeforeMessageRender($event)"
+        (onAfterMessageRender)="returnOnAfterMessageRender($event)" 
+        (onImageRendered)="onImageRenderedFN($event)">
       </chat-bubble-message>
 
       <!-- icon status message -->
-      <chat-return-receipt [status]="message.status" [message]="message" [senderId]="senderId">
+      <chat-return-receipt 
+        [status]="message.status" 
+        [message]="message" 
+        [senderId]="senderId">
       </chat-return-receipt>
 
     </div>
@@ -112,21 +118,27 @@
 
       <!--backgroundColor non viene ancora usato -->
 
-      <chat-bubble-message style="position: relative;"
-        [ngClass]="{'has-metadata': (isImage(message) || isFrame(message))}" class="messages msg_receive"
-        id="message_msg_receive" [message]="message" [textColor]="'black'"
-        (onBeforeMessageRender)="returnOnBeforeMessageRender($event)"
-        (onAfterMessageRender)="returnOnAfterMessageRender($event)" (onImageRendered)="onImageRenderedFN($event)"
-        [addAsCannedResponseTooltipText]="addAsCannedResponseTooltipText" [areVisibleCAR]="areVisibleCAR"
+      <chat-bubble-message class="messages msg_receive" id="message_msg_receive" style="position: relative;"
+        [ngClass]="{'has-metadata': (isImage(message) || isFrame(message))}" 
+        [class.emoticon]="isEmojii(message?.text)"
+        [message]="message" 
+        [textColor]="'black'"
+        [addAsCannedResponseTooltipText]="addAsCannedResponseTooltipText" 
+        [areVisibleCAR]="areVisibleCAR"
         [support_mode]="support_mode"
-        [class.emoticon]="message?.emoticon">
+        (onBeforeMessageRender)="returnOnBeforeMessageRender($event)"
+        (onAfterMessageRender)="returnOnAfterMessageRender($event)" 
+        (onImageRendered)="onImageRenderedFN($event)"
+        >
       </chat-bubble-message>
     </div>
 
     <!-- message type:: button &&  -->
     <div *ngIf="message?.attributes && message?.attributes?.attachment " class="slide-in-left">
-      <chat-message-attachment style="height: 100%; display: block;" [message]="message"
-        [isLastMessage]="isLastMessage(message?.uid)" [stylesMap]="stylesMap"
+      <chat-message-attachment style="height: 100%; display: block;" 
+        [message]="message"
+        [isLastMessage]="isLastMessage(message?.uid)" 
+        [stylesMap]="stylesMap"
         (onAttachmentButtonClicked)="returnOnAttachmentButtonClicked($event)">
       </chat-message-attachment>
     </div>

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

@@ -59,9 +59,11 @@ ion-item {
 }
 
 .message_sender_fullname {
-    font-size: 0.7em;
+    font-size: 0.9em;
     margin: 0 0 1px 10px;
-    color: var(--gray);
+    // color: var(--gray);
+    font-weight: 500;
+    color: #080f1a;
 }
 
 .messages {
@@ -94,8 +96,9 @@ ion-item {
     .emoticon {
         background: unset !important;
         font-size: 4em;
-        padding-bottom: 21px;
+        // padding-bottom: 21px;
         padding-top: 30px;
+        text-align: right;
     }
     .has-metadata {
         max-width: 100% !important;
@@ -297,13 +300,26 @@ ion-item {
 // emoticon
 // ---------------------------------------------------------
 
-:host .base_sent .msg_sent ::ng-deep div > div > div > .chat-text-emoticon > p > p {
-    margin-bottom: 6px !important;
-    margin-right: -7px !important;
-}
+// :host .base_sent .msg_sent ::ng-deep div > div > div > .chat-text-emoticon > p > p {
+//     margin-bottom: 6px !important;
+//     margin-right: -7px !important;
+// }
+
+// :host .base_receive .msg_receive ::ng-deep div > div > div > .chat-text-emoticon > p > p {
+//     margin-bottom: 41px !important;
+//     margin-left: -8px !important;
+//     margin-top: 49px !important;
+// }
+
 
-:host .base_receive .msg_receive ::ng-deep div > div > div > .chat-text-emoticon > p > p {
-    margin-bottom: 41px !important;
-    margin-left: -8px !important;
-    margin-top: 49px !important;
+// :host .base_sent .msg_sent  .emoticon  ::ng-deep div > div >  div > chat-text > p > p {
+//     margin-bottom: 38px;
+// }
+
+:host .base_sent .emoticon ::ng-deep div > div > div > chat-text > p > p {
+    margin-bottom: 38px;
 }
+
+:host .base_receive .emoticon ::ng-deep div > div > div > chat-text > p > p {
+    margin-bottom: 38px;
+}

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, 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';
 
@@ -41,6 +41,7 @@ export class IonConversationDetailComponent extends ConversationContentComponent
   isFirstMessage = isFirstMessage;
   messageType = messageType;
   isChannelTypeGroup = isChannelTypeGroup;
+  isEmojii = isEmojii;
 
   MESSAGE_TYPE_INFO = MESSAGE_TYPE_INFO;
   MESSAGE_TYPE_MINE = MESSAGE_TYPE_MINE;

package/src/app/chatlib/conversation-detail/message/bubble-message/bubble-message.component.scss

@@ -53,7 +53,7 @@
     border-radius: 50%;
     --padding-end: 7px;
     --padding-start: 7px;
-    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 6%);
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.6);
 }
 
 // .emoticon {

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;
       }