@chat21/chat21-ionic 3.0.61-rc12 → 3.0.61-rc16

package/CHANGELOG.md

@@ -1,12 +1,22 @@
 # chat21-ionic ver 3.0
 
+### 3.0.61-rc16
+- Does not allow teammates with agent role to access the "settings sidebar"
+
+### 3.0.61-rc15
+- Increase the size of the emoji and remove the background color when it is sent or received without text
+- Adds the ability to open sidebar menu items in a new tab by combining left mouse button + CMD keyboard key
+
+### 3.0.61-rc14
+- Fixes the bug: the page to which the sidebar Settings menu item redirects is not correct for team members with agent role
+- Fixes the bug: right clicking on the sidebar menu items doesn't show the context menu
+
 ### 3.0.61-rc12
-- Fixes the bug: it is not possible to read the requester's id which occurs when in the modal window "Create ticket" after selecting the requester the same is deleted
 - Improves the alignment of left sidebar menu item icons
-- Adds the ability teammates to add a message as a canned response
+- Adds the ability to add a message as a canned response
 - Hides the "Open canned responses" button if the "supportMode" environment variable is set to false
 - Fixes the bug: "Settings" menu item in the left sidebar redirects to the "Canned responses" page instead of the "Widget" page
-- Adds the ability to add a canned response
+- Adds the ability to add a new canned response
 - Fixes the bug: "Resolve conversation" from conversation detail header doesn't work on mobile
 - Adds the ability to insert emoji in the message text
 - Fixes the bug: on iOS mobile devices in the conversation detail the requester's avatar is not vertically aligned

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chat21/chat21-ionic",
-    "version": "3.0.61-rc12",
+    "version": "3.0.61-rc16",
     "author": "Tiledesk SRL",
     "homepage": "https://tiledesk.com/",
     "scripts": {

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

@@ -58,20 +58,19 @@
 
     <ng-container *ngIf="first || (messages[i - 1].timestamp | date:'d') !== (message.timestamp | date:'d')">
       <div class="long-date-divider-wpr">
-          <div class="long-date-divider-border-b"></div>
-          <div class="long-date-divider">
-              <!-- {{message.timestamp | date: 'longDate' : 'it'}} -->
-              {{message.timestamp | amDateFormat:'LL'}}
-              
-          </div>
-          <div class="long-date-divider-border-b"></div>
+        <div class="long-date-divider-border-b"></div>
+        <div class="long-date-divider">
+          <!-- {{message.timestamp | date: 'longDate' : 'it'}} -->
+          {{message.timestamp | amDateFormat:'LL'}}
+
+        </div>
+        <div class="long-date-divider-border-b"></div>
       </div>
-  </ng-container>
+    </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">
+      <chat-info-message class="messages" [message]="message">
       </chat-info-message>
     </div>
 
@@ -79,16 +78,15 @@
     <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"
-        [support_mode]="support_mode">
+      
+      <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"
+        [support_mode]="support_mode"
+        [class.emoticon]="message?.emoticon">
       </chat-bubble-message>
 
       <!-- icon status message -->
@@ -113,35 +111,30 @@
       </chat-avatar-image> -->
 
       <!--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'"
+
+      <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"
-        [support_mode]="support_mode" >
+        (onAfterMessageRender)="returnOnAfterMessageRender($event)" (onImageRendered)="onImageRenderedFN($event)"
+        [addAsCannedResponseTooltipText]="addAsCannedResponseTooltipText" [areVisibleCAR]="areVisibleCAR"
+        [support_mode]="support_mode"
+        [class.emoticon]="message?.emoticon">
       </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"
-          (onAttachmentButtonClicked)="returnOnAttachmentButtonClicked($event)">
+    <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"
+        (onAttachmentButtonClicked)="returnOnAttachmentButtonClicked($event)">
       </chat-message-attachment>
     </div>
   </div>
   <!-- (fileType === 'file' && uploadProgress !== 100)  -->
 
   <!-- uploadProgress -> {{ uploadProgress }} -->
-  <div *ngIf="uploadProgress !== 100" class="msg_container base_sent"
-    style="margin-right: 20px;">
+  <div *ngIf="uploadProgress !== 100" class="msg_container base_sent" style="margin-right: 20px;">
     <div class="messages msg_sent">
       <div class="spinner">
         <div class="bounce1"></div>

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

@@ -91,10 +91,12 @@ ion-item {
         border-top-right-radius: 8px;
         border-bottom-right-radius: 0px;
     }
-    // .msg_sent:hover {
-    //     background-color: rgba(0, 153, 255, 0.6);
-    // }
-
+    .emoticon {
+        background: unset !important;
+        font-size: 4em;
+        padding-bottom: 21px;
+        padding-top: 30px;
+    }
     .has-metadata {
         max-width: 100% !important;
     }
@@ -144,9 +146,10 @@ ion-item {
         border-bottom-left-radius: 0px;
     }
 
-    // .msg_receive:hover {
-    //     background-color: rgba(247, 247, 247, 0.6);
-    // }
+    .emoticon {
+        background: unset !important;
+        font-size: 4em;
+    }
 
     .has-metadata {
         max-width: 100% !important;
@@ -290,3 +293,17 @@ ion-item {
     font-size: 10px;
     left: 0px;
 }
+// ---------------------------------------------------------
+// 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_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;
+}

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

@@ -43,6 +43,7 @@
       </ng-template> -->
 
       <chat-text [text]="message?.text" [color]="textColor" [message]="message"
+      [class.chat-text-emoticon]="message?.emoticon"
         (onBeforeMessageRender)="returnOnBeforeMessageRender($event)"
         (onAfterMessageRender)="returnOnAfterMessageRender($event)">
       </chat-text>

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

@@ -21,7 +21,6 @@
         font-variant: normal;
         font-weight: 300;
         overflow: hidden;
-        
     }
     img {
         border-radius: 8px;
@@ -32,30 +31,33 @@
         height: auto;
         object-fit: cover;
     }
+
     .message_innerhtml {
         margin: 0px;
         // padding: 0px 14px;
-        &.marked{
-            padding:8px;
-            margin-block-start: -1em!important;
-            margin-block-end: -1em!important;
+        &.marked {
+            padding: 8px;
+            margin-block-start: -1em !important;
+            margin-block-end: -1em !important;
         }
-        
+
         .text-message {
             padding-top: 14px;
         }
     }
-    
 }
 // > .button-native
-.btn-add-msg-as-canned-response  {
+.btn-add-msg-as-canned-response {
     // padding-left: 5px ;
     // padding-right: 5px ;
     border-radius: 50%;
-    --padding-end: 7px ;
-    --padding-start: 7px ;
-    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 6%)
-
+    --padding-end: 7px;
+    --padding-start: 7px;
+    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 6%);
 }
 
+// .emoticon {
+//     padding: 35px 0px !important;
+// }
+
 

package/src/app/components/sidebar/sidebar.component.html

@@ -71,11 +71,12 @@
       </li>
 
       <!-- ------------------------------------------- -->
-      <!-- HOME  -->
+      <!-- HOME   (click)="goToHome()"" -->
       <!-- ------------------------------------------- -->
-      <li (click)="goToHome()" matTooltip="Home" #tooltip="matTooltip" matTooltipPosition='right'
+   
+      <li  matTooltip="Home" #tooltip="matTooltip" matTooltipPosition='right'
         matTooltipHideDelay="100" matTooltipClass="custom-mat-tooltip">
-        <a class="customAncor">
+        <a target="_self" href="{{ dashboard_home_url }}" class="customAncor">
           <i class="material-icons sidebar-icons">
             home
           </i>
@@ -84,12 +85,12 @@
 
 
       <!-- ---------------------------------- -->
-      <!-- Bot    -->
+      <!-- Bot  (click)="goToBots()"  -->
       <!-- ---------------------------------- -->
       <ng-container *ngIf="USER_ROLE !== 'agent'">
-        <li (click)="goToBots()" id="bot-anchor-wpr" matTooltipClass="custom-mat-tooltip" matTooltip="Bots"
+        <li  id="bot-anchor-wpr" matTooltipClass="custom-mat-tooltip" matTooltip="Bots"
           #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100" style="text-align: center;">
-          <a id="bot-anchor" #botbtn class="customAncor" style="height: 40px;margin-right: 0px !important;">
+          <a target="_self" href="{{ dashboard_bots_url }}" id="bot-anchor" #botbtn class="customAncor" style="height: 40px;margin-right: 0px !important;">
             <span class="bot-icon-wpr">
               <svg version="1.1" id="Objects" xmlns="http://www.w3.org/2000/svg"
                 xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 30 30"
@@ -114,12 +115,12 @@
       </ng-container>
 
       <!-- ------------------------------------------- -->
-      <!-- Conversations (VISITORS) {{ conversations_lbl }} -->
+      <!-- Conversations (MONITOR) (click)="goToConversations()" -->
       <!-- ------------------------------------------- -->
       <ng-container *ngIf="USER_ROLE !== 'agent'">
-        <li (click)="goToConversations()" matTooltipClass="custom-mat-tooltip" matTooltip="Monitor"
+        <li  matTooltipClass="custom-mat-tooltip" matTooltip="Monitor"
           #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100"  style="text-align: center;">
-          <a class="customAncor" style="height: 40px;margin-right: 0px !important;">
+          <a target="_self" href="{{ dashboard_convs_url }}" class="customAncor" style="height: 40px;margin-right: 0px !important;">
             <!-- <i class="material-icons sidebar-icons">forum</i> -->
             <span  class="realtime-icon-wpr" >
 
@@ -136,22 +137,22 @@
       </ng-container>
 
       <!-- ------------------------------------------- -->
-      <!-- CONTACTS (LEADS)  -->
+      <!-- CONTACTS (LEADS)  (click)="goToContacts()" -->
       <!-- ------------------------------------------- -->
-      <li (click)="goToContacts()" matTooltipClass="custom-mat-tooltip" matTooltip="{{ contacts_lbl }}"
+      <li  matTooltipClass="custom-mat-tooltip" matTooltip="{{ contacts_lbl }}"
         #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100" style="text-align: center;">
-        <a class="customAncor">
+        <a target="_self" href="{{ dashboard_contacts_url }}" class="customAncor">
           <i class="material-icons sidebar-icons">contacts</i>
         </a>
       </li>
 
       <!-- ------------------------------------------- -->
-      <!-- APPS  -->
+      <!-- APPS  (click)="goToAppStore()" -->
       <!-- ------------------------------------------- -->
       <ng-container *ngIf="isVisibleAPP && USER_ROLE !== 'agent'">
-        <li (click)="goToAppStore()" matTooltipClass="custom-mat-tooltip" matTooltip="{{ apps_lbl }}"
+        <li  matTooltipClass="custom-mat-tooltip" matTooltip="{{ apps_lbl }}"
           #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100" style="text-align: center;">
-          <a class="customAncor" style="margin-right: 0px !important;">
+          <a target="_self" href="{{ dashboard_app_url }}" class="customAncor" style="margin-right: 0px !important;">
             <!-- <i class="material-icons sidebar-icons">apps</i> -->
             <!-- <i class="material-icons sidebar-icons">dashboard_customize</i> -->
             <span class="dashboard-customize-icon-wpr"> 
@@ -166,12 +167,12 @@
       </ng-container>
 
       <!-- ------------------------------------------- -->
-      <!-- ANALYTICS -->
+      <!-- ANALYTICS (click)="goToAnalytics()" -->
       <!-- ------------------------------------------- -->
       <ng-container *ngIf="isVisibleANA && USER_ROLE !== 'agent'">
-        <li (click)="goToAnalytics()" matTooltipClass="custom-mat-tooltip" matTooltip="{{ analytics_lbl }}"
-          #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100" style="text-align: center;">
-          <a class="customAncor" style="margin-right: 0px !important;">
+        <li  matTooltipClass="custom-mat-tooltip" matTooltip="{{ analytics_lbl }}"
+          #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100" style="text-align: center;" >
+          <a target="_self" href="{{ dashboard_analytics_url }}" class="customAncor" style="margin-right: 0px !important;">
             <!-- <i class="material-icons sidebar-icons">trending_up</i> -->
             <!-- <i class="material-icons sidebar-icons"> analytics </i> -->
             <!-- <i class="material-icons sidebar-icons">  bar_chart </i> -->
@@ -187,12 +188,12 @@
       </ng-container>
 
       <!-- ------------------------------------------- -->
-      <!-- ACTIVITIES -->
+      <!-- ACTIVITIES (click)="goToActivities()" -->
       <!-- ------------------------------------------- -->
       <ng-container *ngIf="isVisibleACT">
-        <li *ngIf="USER_ROLE !== 'agent'" (click)="goToActivities()" matTooltipClass="custom-mat-tooltip"
+        <li *ngIf="USER_ROLE !== 'agent'"  matTooltipClass="custom-mat-tooltip"
           matTooltip="{{ activities_lbl }}" #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100" style="text-align: center;">
-          <a class="customAncor">
+          <a target="_self" href="{{ dashboard_activities_url }}" class="customAncor">
             <i class="material-icons sidebar-icons">assignment</i>
           </a>
         </li>
@@ -200,21 +201,21 @@
 
 
       <!-- ------------------------------------------- -->
-      <!-- REQUESTS HISTORY -->
+      <!-- REQUESTS HISTORY (click)="goToHistory()" -->
       <!-- ------------------------------------------- -->
-      <li (click)="goToHistory()" matTooltipClass="custom-mat-tooltip" matTooltip="{{ history_lbl }}"
+      <li  matTooltipClass="custom-mat-tooltip" matTooltip="{{ history_lbl }}"
         #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100" style="text-align: center;">
-        <a class="customAncor">
+        <a target="_self" href="{{ dashboard_history_url }}" class="customAncor">
           <i class="material-icons sidebar-icons">history</i>
         </a>
       </li>
 
       <!-- ----------------------------------------------------------------------------------- -->
-      <!-- SETTINGS // old: goToSettings_CannedResponses()  *ngIf="USER_ROLE !== 'agent'" -->
+      <!-- SETTINGS // old: goToSettings_CannedResponses()  *ngIf="USER_ROLE !== 'agent'" (click)="goToWidgetSetUpOrToCannedResponses()" -->
       <!-- ----------------------------------------------------------------------------------- -->
-      <li (click)="goToWidgetSetUp()" matTooltipClass="custom-mat-tooltip"
+      <li *ngIf="USER_ROLE !== 'agent'"  matTooltipClass="custom-mat-tooltip"
         matTooltip="{{ settings_lbl }}" #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100" style="text-align: center;">
-        <a class="customAncor">
+        <a target="_self" href="{{ dashboard_settings_url }}" class="customAncor">
           <i class="material-icons sidebar-icons">settings</i>
         </a>
       </li>

package/src/app/components/sidebar/sidebar.component.ts

@@ -49,6 +49,15 @@ export class SidebarComponent implements OnInit {
   countClickOnOpenUserDetailSidebar: number = 0
   USER_PHOTO_PROFILE_EXIST: boolean;
   currentUser: any;
+  dashboard_home_url: string;
+  dashboard_bots_url: string;
+  dashboard_convs_url: string;
+  dashboard_contacts_url: string;
+  dashboard_app_url: string;
+  dashboard_analytics_url: string;
+  dashboard_activities_url: string;
+  dashboard_history_url: string;
+  dashboard_settings_url: string;
   constructor(
     public imageRepoService: ImageRepoService,
     public appStorageService: AppStorageService,
@@ -84,8 +93,44 @@ export class SidebarComponent implements OnInit {
     //     height: '35px'
     //   };
     // }
+
+
+  }
+
+
+  getStoredProjectAndUserRole() {
+    const stored_project = localStorage.getItem('last_project')
+    // console.log('[SIDEBAR] stored_project ', stored_project)
+    if (stored_project) {
+      const project = JSON.parse(stored_project)
+      this.logger.log('[SIDEBAR] project ', project)
+
+      this.project_id = project.id_project.id
+      this.logger.log('[SIDEBAR] project_id ', this.project_id)
+
+      this.USER_ROLE = project.role;
+      this.logger.log('[SIDEBAR] USER_ROLE ', this.USER_ROLE)
+      this.buildURLs(this.USER_ROLE)
+    }
   }
 
+  buildURLs(USER_ROLE) {
+    this.dashboard_home_url = this.DASHBOARD_URL + this.project_id + '/home'
+    this.dashboard_bots_url = this.DASHBOARD_URL + this.project_id + '/bots'
+    this.dashboard_convs_url = this.DASHBOARD_URL + this.project_id + '/wsrequests'
+    this.dashboard_contacts_url = this.DASHBOARD_URL + this.project_id + '/contacts'
+    this.dashboard_app_url = this.DASHBOARD_URL + this.project_id + '/app-store'
+    this.dashboard_analytics_url = this.DASHBOARD_URL + this.project_id + '/analytics'
+    this.dashboard_activities_url = this.DASHBOARD_URL + this.project_id + '/activities'
+    this.dashboard_history_url = this.DASHBOARD_URL + this.project_id + '/history'
+    this.dashboard_settings_url = ''
+    if (USER_ROLE !== 'agent') {
+      this.dashboard_settings_url = this.DASHBOARD_URL + this.project_id + '/widget-set-up'
+    } else if (USER_ROLE === 'agent') {
+      this.dashboard_settings_url = this.DASHBOARD_URL + this.project_id + '/cannedresponses'
+    }
+
+  }
 
   subcribeToAuthStateChanged() {
     this.messagingAuthService.BSAuthStateChanged.subscribe((state) => {
@@ -378,35 +423,23 @@ export class SidebarComponent implements OnInit {
   // }
   // }
 
-  getStoredProjectAndUserRole() {
-    const stored_project = localStorage.getItem('last_project')
-    // console.log('[SIDEBAR] stored_project ', stored_project)
-    if (stored_project) {
-      const project = JSON.parse(stored_project)
-      this.logger.log('[SIDEBAR] project ', project)
 
-      this.project_id = project.id_project.id
-      this.logger.log('[SIDEBAR] project_id ', this.project_id)
-
-      this.USER_ROLE = project.role;
-      this.logger.log('[SIDEBAR] USER_ROLE ', this.USER_ROLE)
-    }
-  }
 
   goToHome() {
     let url = this.DASHBOARD_URL + this.project_id + '/home'
+    this.dashboard_home_url = url;
     const myWindow = window.open(url, '_self');
     myWindow.focus();
   }
 
-  goToConversations() {
-    let url = this.DASHBOARD_URL + this.project_id + '/wsrequests'
+  goToBots() {
+    let url = this.DASHBOARD_URL + this.project_id + '/bots'
     const myWindow = window.open(url, '_self');
     myWindow.focus();
   }
 
-  goToBots() {
-    let url = this.DASHBOARD_URL + this.project_id + '/bots'
+  goToConversations() {
+    let url = this.DASHBOARD_URL + this.project_id + '/wsrequests'
     const myWindow = window.open(url, '_self');
     myWindow.focus();
   }
@@ -443,10 +476,12 @@ export class SidebarComponent implements OnInit {
     myWindow.focus();
   }
 
-  goToSettings_CannedResponses() {
-    let url = this.DASHBOARD_URL + this.project_id + '/cannedresponses'
-    const myWindow = window.open(url, '_self');
-    myWindow.focus();
+  goToWidgetSetUpOrToCannedResponses() {
+    if (this.USER_ROLE !== 'agent') {
+      this.goToWidgetSetUp()
+    } else if (this.USER_ROLE === 'agent') {
+      this.goToSettings_CannedResponses()
+    }
   }
 
   goToWidgetSetUp() {
@@ -455,6 +490,14 @@ export class SidebarComponent implements OnInit {
     myWindow.focus();
   }
 
+  goToSettings_CannedResponses() {
+    let url = this.DASHBOARD_URL + this.project_id + '/cannedresponses'
+    const myWindow = window.open(url, '_self');
+    myWindow.focus();
+  }
+
+
+
   public translations() {
     const keys = [
       'Available',

package/src/chat21-core/providers/firebase/firebase-conversation-handler.ts

@@ -18,11 +18,11 @@ import { ConversationHandlerService } from '../abstract/conversation-handler.ser
 import { LoggerService } from '../abstract/logger.service';
 import { LoggerInstance } from '../logger/loggerInstance';
 // utils
-import { MSG_STATUS_RECEIVED, CHAT_REOPENED, CHAT_CLOSED, MEMBER_JOINED_GROUP, TYPE_DIRECT, MESSAGE_TYPE_INFO , TOUCHING_OPERATOR} from '../../utils/constants';
+import { MSG_STATUS_RECEIVED, CHAT_REOPENED, CHAT_CLOSED, MEMBER_JOINED_GROUP, TYPE_DIRECT, MESSAGE_TYPE_INFO, TOUCHING_OPERATOR } from '../../utils/constants';
 import { compareValues, searchIndexInArrayForUid, conversationMessagesRef } from '../../utils/utils';
 
 
-import { messageType } from 'src/chat21-core/utils/utils-message';
+import { messageType, isEmojii } from 'src/chat21-core/utils/utils-message';
 
 
 
@@ -156,7 +156,8 @@ export class FirebaseConversationHandler extends ConversationHandlerService {
             typeMsg,
             attributes,
             channelType,
-            false
+            false,
+            isEmojii(msg)
         );
         const messageRef = firebaseMessagesCustomUid.push({
             language: lang,
@@ -288,6 +289,10 @@ export class FirebaseConversationHandler extends ConversationHandlerService {
 
         // verifico che il sender è il logged user
         msg.isSender = this.isSender(msg.sender, this.loggedUser.uid);
+
+        //check if message contains only an emojii
+        msg.emoticon = isEmojii(msg.text)
+
         // traduco messaggi se sono del server
         if (msg.attributes && msg.attributes.subtype) {
             if (msg.attributes.subtype === 'info' || msg.attributes.subtype === 'info/support') {

package/src/chat21-core/utils/utils-message.ts

@@ -85,6 +85,25 @@ export function messageType(msgType: string, message: any) {
     }
 }
 
+export function isEmojii(message: any){
+  if (message.length > 2) {
+    return false;
+  }
+  let fistChar = '';
+  try {
+    fistChar = message.trim(); // .charAt(0);
+  } catch (e) {
+    return false;
+  }
+
+  const ranges = ['(?:[\u2700-\u27bf]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff]|[\u0023-\u0039]\ufe0f?\u20e3|\u3299|\u3297|\u303d|\u3030|\u24c2|\ud83c[\udd70-\udd71]|\ud83c[\udd7e-\udd7f]|\ud83c\udd8e|\ud83c[\udd91-\udd9a]|\ud83c[\udde6-\uddff]|[\ud83c[\ude01-\ude02]|\ud83c\ude1a|\ud83c\ude2f|[\ud83c[\ude32-\ude3a]|[\ud83c[\ude50-\ude51]|\u203c|\u2049|[\u25aa-\u25ab]|\u25b6|\u25c0|[\u25fb-\u25fe]|\u00a9|\u00ae|\u2122|\u2139|\ud83c\udc04|[\u2600-\u26FF]|\u2b05|\u2b06|\u2b07|\u2b1b|\u2b1c|\u2b50|\u2b55|\u231a|\u231b|\u2328|\u23cf|[\u23e9-\u23f3]|[\u23f8-\u23fa]|\ud83c\udccf|\u2934|\u2935|[\u2190-\u21ff])'];
+  if (fistChar.match(ranges.join('|'))) {
+      return true;
+  } else {
+      return false;
+  }
+}
+
 /** */
 export function getSizeImg(message: any, maxWidthImage?: number): any {
     try {