@chat21/chat21-ionic 3.0.6-2.3 → 3.0.6-2.4-rc2

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # chat21-ionic ver 3.0
 
+### 3.0.62.4-rc2
+- Fixed bug: in the modal window showing the image preview before download, the image name is missing
+- Add the ability to display the app sidebar in "wide mode"
+- Displays balloon messages with a light orange background for "internal notes" type message
+- Updates the regex that detects if the message contains only one or more emojis
+
+### 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

package/deploy_prod.sh

@@ -32,7 +32,7 @@ cd ../../../
 
 # 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
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chat21/chat21-ionic",
-    "version": "3.0.62.3",
+    "version": "3.0.62.4-rc2",
     "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)), 'privateMsg': (message?.attributes && message?.attributes?.subtype === 'private')}" 
+        [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 {
@@ -82,7 +84,7 @@ ion-item {
     // padding: 2px 0px 4px 40px;
     padding: 2px 0px 14px 40px; // edited to display the date at the bottom of the "message bubble"
     .msg_sent {
-        background-color: var(--bobble-blue);
+        background-color: var(--bubble-blue);
         color: var(--col-msg-sent);
         margin-right: 4px;
         margin-left: 4px;
@@ -90,12 +92,19 @@ ion-item {
         min-width: 14px;
         border-top-right-radius: 8px;
         border-bottom-right-radius: 0px;
+
+        &.privateMsg{
+            background-color: var(--bubble-privateMsg);
+            color: var(--bubble-privateMsgColor)
+        }
+
     }
     .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 +306,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 ? fileName : decodeURIComponent(decodeURIComponent(url).split('/').pop());
+      // console.log('XXXX ', decodeURIComponent(decodeURIComponent(url).split('/').pop()))
+    }
 
- 
+  }
 
 
 }

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

@@ -12,7 +12,7 @@
     }
 
     svg {
-        fill:  var(--bobble-blue) 
+        fill:  var(--bubble-blue) 
     }
 
     .c21-ico-schedule {

package/src/app/components/conversation-detail/bubble-my-message/bubble-my-message.component.html

@@ -1,6 +1,6 @@
 <div class="message message-my" [class.first-message]="isFirstMessage" >
  
-  <div class="bobble-message" 
+  <div class="bubble-message" 
     [class.image]="message.type == 'image'" 
     [class.no-text]="!message.text" 
     (mouseover)="showButtonInfo()">

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

@@ -1,5 +1,5 @@
 .message {
-    .bobble-message {
+    .bubble-message {
         position: relative;
         border-radius: 15px;
         font-size: 15px;
@@ -57,8 +57,8 @@
     }
         
   
-    .bobble-message {
-        background-color: var(--bobble-blue);
+    .bubble-message {
+        background-color: var(--bubble-blue);
         color: white;
         margin-right: 24px;
         float: right;
@@ -67,7 +67,7 @@
     }
     &.first-message {
         margin-top: 10px;
-        .bobble-message {
+        .bubble-message {
             border-top-right-radius: 12px;
             border-bottom-right-radius: 0px;
         }

package/src/app/components/conversation-detail/bubble-others-message/bubble-others-message.component.html

@@ -2,7 +2,7 @@
                           
   <span class="button-info" [ngClass]="message.uid" (click)="presentPopover($event, message)"></span>
   
-  <div class="bobble-message" 
+  <div class="bubble-message" 
     [class.image]="message.type == 'image'"
     [class.no-text]="!message.text"
     (mouseover)="showButtonInfo()">

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

@@ -1,5 +1,5 @@
 .message {
-    .bobble-message {
+    .bubble-message {
         position: relative;
         border-radius: 15px;
         font-size: 15px;
@@ -50,7 +50,7 @@
         .message-other {
             width: 100%;
             margin-top: 4px;
-            .bobble-message {
+            .bubble-message {
                 background-color: var(--light-gray);
                 color: var(--black);
                 margin-left: 24px;
@@ -72,7 +72,7 @@
             }
             &.first-message {
                 margin-top: 10px;
-                .bobble-message {
+                .bubble-message {
                     border-top-left-radius: 12px;
                     border-bottom-left-radius: 0px;
                 }

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>