@chat21/chat21-ionic 3.0.61 → 3.0.63

package/CHANGELOG.md

@@ -1,5 +1,44 @@
 # chat21-ionic ver 3.0
 
+### 3.0.63
+- Deploys in production
+
+### 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
+
+### 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
+
+### 3.0.62.1
+- Allows agents to use the "Monitor" page
+
+### 3.0.62
+- Deploys in production
+
+### 3.0.62-rc2
+- Fixed bug: in the teammate drawer if the full name is too long it overlaps the email
+- Fixed bug: in the teammate drawer if the email is too long it exceeds the width of the drawer
+
+### 3.0.62-rc1
+- Change the URL of the environment variable "dashboardUrl" from absolute to relative
+
 ### 3.0.61
 - Deploys in production
 

package/README.md

@@ -67,7 +67,7 @@ Use [Docker Compose Tiledesk installation guide](https://github.com/Tiledesk/til
         fileUploadAccept:"*/*",
         logLevel":"<YOUR-PREFERRED-LOG-LEVEL>",
         supportMode: false,
-        teammatesButton: false,
+        writeToButton: false,
         archivedButton: false,
         firebaseConfig: {
             tenant:"tilechat",
@@ -100,7 +100,11 @@ Use [Docker Compose Tiledesk installation guide](https://github.com/Tiledesk/til
 
 * `wsUrl`: allows you to know in real time the agent's availability status, the agent's busy status and the number of unassigned conversations for a selected project
 
-* `supportMode`: if set to true it allows you to view the list of contacts from which you can make direct conversations and the item at the top of the list of conversations that shows the number of unassigned conversations of a selected project and that the agent can view and take over by clicking on it 
+* `supportMode`: if it is set to true it shows the left sidebar which makes dashboard and chat management smarter
+
+* `writeToButton`: if set to true, it makes the button for viewing the contact list visible and makes direct conversations with them possible
+
+* `archivedButton`: if set to true, it makes the button for viewing archived conversations visible
 
 ### Push notification
 * open `/src/firebase-messaging-sw.js` and replace messagingSenderId: with < your messagingSenderId >

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.61",
+    "version": "3.0.63",
     "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>