@chat21/chat21-ionic 3.0.79-rc.4 → 3.0.80-rc.1

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # chat21-ionic ver 3.0
 
+
+### 3.0.80-rc.1
+- changed: moved sender_fullname inside bubble-message component
+- changed: publish onConversationSelect event to stop audio after agent has clicked on it
+- bug-fixed: /null  loading flag_url in sidebar-user-detail
+
+### 3.0.79 in PROD
+- added: segment analytics events
+
 ### 3.0.79-rc.4
 - bug-fixed: testsiteBaseUrl wrong value env property
 

package/deploy_amazon_prod.sh

@@ -18,7 +18,7 @@ cp -p src/manifest.json platforms/browser/www/
 cp -p src/chat-config.json platforms/browser/www/
 
 cd platforms/browser/www
-# aws s3 sync . s3://tiledesk-console/v2/chat/ --cache-control max-age=172800
+aws s3 sync . s3://tiledesk-console/v2/chat/ --cache-control max-age=172800
 aws s3 sync . s3://tiledesk-console/v2/chat/$version/ --cache-control max-age=172800
 # aws s3 sync . s3://tiledesk-console/v2/chat/latest/ --cache-control max-age=172800
 cd ../../../

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@chat21/chat21-ionic",
     "author": "Tiledesk SRL",
-    "version": "3.0.79-rc.4",
+    "version": "3.0.80-rc.1",
     "license": "MIT License",
     "homepage": "https://tiledesk.com/",
     "repository": {

package/src/app/app.component.ts

@@ -1,3 +1,4 @@
+
 import { TYPE_DIRECT, TYPE_SUPPORT_GROUP } from 'src/chat21-core/utils/constants';
 import { tranlatedLanguage, URL_SOUND_CONVERSATION_ADDED, URL_SOUND_LIST_CONVERSATION } from './../chat21-core/utils/constants';
 import { ArchivedConversationsHandlerService } from 'src/chat21-core/providers/abstract/archivedconversations-handler.service';
@@ -910,7 +911,6 @@ export class AppComponent implements OnInit {
 
   soundConversationAdded(){
     const that = this;
-    console.log('soundConversationAdded ENABLEDDDD-->', this.hasPlayed)
     if(!this.hasPlayedConversation ){
       that.audio_NewConv.play().then(() => {
         that.hasPlayedConversation = true
@@ -970,7 +970,7 @@ export class AppComponent implements OnInit {
     this.events.subscribe('uidConvSelected:changed', this.subscribeChangedConversationSelected);
     this.events.subscribe('profileInfoButtonClick:logout', this.subscribeProfileInfoButtonLogOut);
     this.events.subscribe('unservedRequest:count', this.subscribeUnservedRequestCount)
-
+    this.events.subscribe('convList:onConversationSelected', this.subscribeConversationSelected)
     this.conversationsHandlerService.conversationAdded.subscribe((conversation: ConversationModel) => {
       // this.logger.log('[APP-COMP] ***** subscribeConversationAdded *****', conversation);
       if (conversation && conversation.is_new === true) {
@@ -1048,7 +1048,7 @@ export class AppComponent implements OnInit {
 
       this.initConversationsHandler(currentUser.uid);
       this.initArchivedConversationsHandler(currentUser.uid);
-      isDevMode()? null: this.segmentSignIn(currentUser)
+      isDevMode()? null: this.segmentSignIn()
     }
     this.checkPlatform();
     try {
@@ -1070,8 +1070,6 @@ export class AppComponent implements OnInit {
     if (this.SUPPORT_MODE === true) {
       this.webSocketClose()
     }
-    const currentUser = this.tiledeskAuthService.getCurrentUser();
-    isDevMode()? null: this.segmentSignedOut(currentUser)
     // this.isOnline = false;
     // this.conversationsHandlerService.conversations = [];
     this.chatManager.setTiledeskToken(null);
@@ -1159,6 +1157,7 @@ export class AppComponent implements OnInit {
 
 
     if (hasClickedLogout === true) {
+      isDevMode()? null: this.segmentSignedOut()
       this.appStorageService.removeItem('conversations')
       this.isInitialized = false;
       // ----------------------------------------------
@@ -1172,6 +1171,7 @@ export class AppComponent implements OnInit {
 
           if (res === 'success') {
             that.removePresenceAndLogout();
+            
           } else {
             that.removePresenceAndLogout();
             // that.presentToast();
@@ -1192,6 +1192,12 @@ export class AppComponent implements OnInit {
     }
   }
 
+  subscribeConversationSelected= (conversation: ConversationModel) => {
+    if(conversation && conversation.is_new){
+      this.audio_NewConv.pause()
+    }
+  }
+
   private async presentModal(calledby): Promise<any> {
     this.logger.log('[APP-COMP] presentModal calledby', calledby, '- hadBeenCalledOpenModal: ', this.hadBeenCalledOpenModal);
     const attributes = { tenant: this.tenant, enableBackdropDismiss: false };
@@ -1274,6 +1280,7 @@ export class AppComponent implements OnInit {
       that.logger.debug('[APP-COMP] updateConversationsOnStorage: reset timer and save conversations -> ', this.conversationsHandlerService.conversations.length)
       that.appStorageService.setItem('conversations', JSON.stringify(that.conversationsHandlerService.conversations))
       that.isInitialized = true;
+      this.events.publish('appComp:appIsInitialized', true)
     }, 10000);
   }
 
@@ -1298,7 +1305,8 @@ export class AppComponent implements OnInit {
     }
   }
 
-  segmentSignIn(user: UserModel){
+  private segmentSignIn(){
+    let user = this.tiledeskAuthService.getCurrentUser()
     try {
       window['analytics'].page("Chat Auth Page, Signin", {});
     } catch (err) {
@@ -1327,7 +1335,8 @@ export class AppComponent implements OnInit {
   }
 
 
-  segmentSignedOut(user: UserModel){
+  private segmentSignedOut(){
+    let user = this.tiledeskAuthService.getCurrentUser()
     try {
       window['analytics'].page("Chat Auth Page, Signed Out", {});
     } catch (err) {
@@ -1363,7 +1372,7 @@ export class AppComponent implements OnInit {
     }
   }
 
-  segmentResolved(conversation: ConversationModel){
+  private segmentResolved(conversation: ConversationModel){
     let user = this.tiledeskAuthService.getCurrentUser();
     try {
       window['analytics'].page("Chat List Conversations Page, Chat Resolved", {});
@@ -1389,9 +1398,8 @@ export class AppComponent implements OnInit {
         "conversation_id": conversation.uid,
         "channel_type": conversation.channel_type,
         "conversation_with":(conversation.channel_type !== TYPE_DIRECT)? null: conversation.conversation_with,
-        "conversation_with_fullname": (conversation.channel_type !== TYPE_DIRECT)? null: conversation.conversation_with_fullname,
         "department_name":(conversation.channel_type !== TYPE_DIRECT)? conversation.attributes.departmentName: null,
-        "department_id":(conversation.channel_type !== TYPE_DIRECT)? conversation.attributes.departmentId: null,
+        "department_id":(conversation.channel_type !== TYPE_DIRECT)? conversation.attributes.departmentId: null
       },
       { "context": {
           "groupId": (conversation.channel_type !== TYPE_DIRECT)? conversation.attributes.projectId: null
@@ -1401,13 +1409,15 @@ export class AppComponent implements OnInit {
       this.logger.error('Event:Chat Resolved [track] error', err);
     }
 
-    try {
-      window['analytics'].group(conversation.attributes.projectId, {
-        name: (conversation.attributes.project_name)? conversation.attributes.project_name : null,
-        // plan: projectProfileName,
-      });
-    } catch (err) {
-      this.logger.error('Event:Chat Resolved [group] error', err);
+    if(conversation.channel_type !== TYPE_DIRECT){
+      try {
+        window['analytics'].group(conversation.attributes.projectId, {
+          name: (conversation.attributes.project_name)? conversation.attributes.project_name : null,
+          // plan: projectProfileName,
+        });
+      } catch (err) {
+        this.logger.error('Event:Chat Resolved [group] error', err);
+      }
     }
   }
 

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

@@ -124,12 +124,12 @@
     </div>
 
     <!-- message RECIPIENT + TIME :: -->
-    <div class="msg_container base_receive" *ngIf="messageType(MESSAGE_TYPE_OTHERS, message) && isChannelTypeGroup(channelType) && !isSameSender(message?.sender, i)">
+    <!-- <div class="msg_container base_receive" *ngIf="messageType(MESSAGE_TYPE_OTHERS, message) && isChannelTypeGroup(channelType) && !isSameSender(message?.sender, i)">
       <div role="messaggio" class="message_sender_fullname">
         {{message.sender_fullname}}
       </div>
       <div class="message-date"> {{message.timestamp | date:'HH:mm' }} </div>
-    </div>
+    </div> -->
     <!-- message RECIPIENT :: -->
     <div role="messaggio" *ngIf="messageType(MESSAGE_TYPE_OTHERS, message)" class="msg_container base_receive">
 
@@ -144,6 +144,7 @@
         [ngClass]="{'has-metadata': (isImage(message) || isFrame(message)), 'privateMsg': (message?.attributes && message?.attributes?.subtype === 'private')}" 
         [class.emoticon]="isEmojii(message?.text)"
         [ngStyle]="{'background': stylesMap?.get('bubbleReceivedBackground'), 'color': stylesMap.get('bubbleReceivedTextColor')}"
+        [isSameSender]="isSameSender(message?.sender, i)"
         [message]="message" 
         [fontColor]="stylesMap?.get('bubbleReceivedTextColor')"
         [fontSize]="stylesMap?.get('fontSize')"
@@ -169,7 +170,7 @@
         </ion-button>
       </ng-container> -->
 
-      <div class="message-date-hover" *ngIf="(isChannelTypeGroup(channelType) && isSameSender(message?.sender, i)) || !isChannelTypeGroup(channelType)"> {{message.timestamp | date:'HH:mm' }} </div>
+      <div class="message-date-hover" *ngIf="isChannelTypeGroup(channelType)"> {{message.timestamp | date:'HH:mm' }} </div>
     </div>
 
     <!-- message type:: button &&  -->

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

@@ -7,6 +7,12 @@
 
 
   <div>
+
+    <div *ngIf="messageType(MESSAGE_TYPE_OTHERS, message) && !isSameSender" 
+      [style.color]="convertColorToRGBA(fontColor, 65)"
+      [ngStyle]="{'margin': (isImage(message) || isFrame(message))? '10px 16px 0px 16px': '10px 8px 0px 8px'}" class="message_sender_fullname">
+      {{message?.sender_fullname}}
+    </div>
     <!-- message type:: image -->
     <!-- <div *ngIf="message.type == 'image' && message.metadata"  [ngStyle] = "{ 'max-width': getSizeImg(message).width, 'max-height': getSizeImg(message).height }">
         <img class="message-contentX message-content-imageX" [src]="message.metadata.src" />

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

@@ -11,6 +11,11 @@
     // -webkit-animation: heartbeat 1.5s ease-in-out both;
     // animation: heartbeat 1.5s ease-in-out both;
 
+    .message_sender_fullname{
+        font-size: 12px;
+        font-weight: 600;
+    }
+
     p {
         font-size: 1.4em;
         margin: 0;

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

@@ -50,7 +50,7 @@ describe('BubbleMessageComponent', () => {
           isSender: false
     }
     component.message = messages
-    component.textColor = 'black'
+    component.fontColor = 'black'
     fixture.detectChanges()
     const textChild = fixture.debugElement.query(By.css('chat-text'))
     textChild.properties.text
@@ -76,7 +76,7 @@ describe('BubbleMessageComponent', () => {
           isSender: false
     }
     component.message = messages
-    component.textColor = 'black'
+    component.fontColor = 'black'
     fixture.detectChanges()
     const textChild = fixture.debugElement.query(By.css('chat-text'))
     expect(textChild.properties.text).toEqual(messages.text)

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

@@ -1,15 +1,16 @@
 import { Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { MessageModel } from 'src/chat21-core/models/message';
-import { MAX_WIDTH_IMAGES, MIN_WIDTH_IMAGES } from 'src/chat21-core/utils/constants';
+import { MAX_WIDTH_IMAGES, MESSAGE_TYPE_MINE, MESSAGE_TYPE_OTHERS, MIN_WIDTH_IMAGES } from 'src/chat21-core/utils/constants';
 import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
-import { isFile, isFrame, isImage } from 'src/chat21-core/utils/utils-message';
+import { isFile, isFrame, isImage, messageType } from 'src/chat21-core/utils/utils-message';
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 import { TranslateService } from '@ngx-translate/core';
 import { TiledeskAuthService } from 'src/chat21-core/providers/tiledesk/tiledesk-auth.service';
 import * as moment from 'moment';
 import { CreateCannedResponsePage } from 'src/app/pages/create-canned-response/create-canned-response.page'
 import { ModalController } from '@ionic/angular';
+import { convertColorToRGBA } from 'src/chat21-core/utils/utils';
 @Component({
   selector: 'chat-bubble-message',
   templateUrl: './bubble-message.component.html',
@@ -18,16 +19,25 @@ import { ModalController } from '@ionic/angular';
 export class BubbleMessageComponent implements OnInit, OnChanges {
 
   @Input() message: MessageModel;
+  @Input() isSameSender: boolean;
   @Input() fontColor: string;
   @Input() fontSize: string;
   @Input() fontFamily: string;
   @Output() onBeforeMessageRender = new EventEmitter();
   @Output() onAfterMessageRender = new EventEmitter();
   @Output() onElementRendered = new EventEmitter<{element: string, status: boolean}>();
-  
   isImage = isImage;
   isFile = isFile;
   isFrame = isFrame;
+  convertColorToRGBA = convertColorToRGBA
+
+  // ========== begin:: check message type functions ======= //
+  messageType = messageType;
+
+  MESSAGE_TYPE_MINE = MESSAGE_TYPE_MINE;
+  MESSAGE_TYPE_OTHERS = MESSAGE_TYPE_OTHERS;
+ // ========== end:: check message type functions ======= //
+ 
   public browserLang: string;
 
   tooltipOptions = {

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

@@ -1,4 +1,3 @@
-import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 import { Component, ElementRef, Input, OnInit, SimpleChange, SimpleChanges, ViewChild, ViewEncapsulation } from '@angular/core';
 
 @Component({

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

@@ -619,7 +619,7 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
 
   @HostListener('document:keydown', ['$event'])
   handleKeyboardEvent(event: KeyboardEvent) {
-    this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] handleKeyboardEvent  event.key ", event);
+    // this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] handleKeyboardEvent  event.key ", event);
     // Note: on mac keyboard "metakey" matches "cmd"
     
     if (event.key === 'Enter' && event.altKey || event.key === 'Enter' && event.ctrlKey || event.key === 'Enter' && event.metaKey) {

package/src/app/components/project-item/project-item.component.html

@@ -25,7 +25,7 @@
       <div class="flex-child-right">
         <div class="project-name-project-for-panel" [tooltip]="conversationsInQueueOnProjectName"
           [options]="tooltipOptions" placement="top" content-type="template" (click)="openUnservedConvs()">
-          <div class="project---name"> <a>{{ project?.id_project?.name }}</a> </div>
+          <div class="unassigned_label"> <a>{{ translationMap?.get('UnassignedConversations') }}</a> </div>
         </div>
         
         <!-- <div class="availabily-and-busy-wpr">

package/src/app/components/project-item/project-item.component.scss

@@ -303,7 +303,7 @@
     color: #1e2129;
     font-weight: 400;
     margin-left: 10px;
-    width: 185px ;
+    width: 250px;
     // width: 220px !important;
     white-space: nowrap !important;
     overflow: hidden !important;
@@ -325,11 +325,11 @@
 //     width: fit-content;
 //     display: block;
 // }
-.project---name {
+.unassigned_label {
     width: fit-content;
     
 }
-.project---name:hover {
+.unassigned_label:hover {
     color: rgb(100, 131, 158);
     // font-weight: 600;
 }

package/src/app/components/sidebar-user-details/sidebar-user-details.component.html

@@ -5,7 +5,7 @@
         <span class="user-details-dshbrd-lang-code" style="text-transform: uppercase;color: #647491;">
             {{chat_lang}}
         </span>
-        <img [src]="flag_url" style="width: auto;height: 19px; position: relative;top: 1px;">
+        <img *ngIf="flag_url" [src]="flag_url" style="width: auto;height: 19px; position: relative;top: 1px;">
 
     </div>
 
@@ -79,11 +79,11 @@
             [clearable]="false"
             [searchable]="false">
             <ng-template ng-label-tmp let-item="item">
-                <img style="width: 15px;height: 15px;position: relative; top: 1px;" height="15" width="15" [src]="item.avatar" />
+                <img style="width: 15px;height: 15px;position: relative; top: 1px;" height="15" width="15" [src]="item?.avatar" />
                 <span id="sidebaravatar_{{item.name}}" style="text-transform: capitalize; margin-left:8px">  {{item.label}} </span>
             </ng-template>
             <ng-template ng-option-tmp let-item="item" let-index="index">
-                <img style="width: 15px;height: 15px;position: relative; top: 1px;" height="15" width="15" [src]="item.avatar" />
+                <img style="width: 15px;height: 15px;position: relative; top: 1px;" height="15" width="15" [src]="item?.avatar" />
                 <span id="sidebaravatar_{{item.name}}" style="text-transform: capitalize; margin-left:8px">  {{item.label}} </span>
             </ng-template>
         </ng-select>

package/src/app/components/sidebar-user-details/sidebar-user-details.component.ts

@@ -78,6 +78,8 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
     // this.listenOpenUserSidebarEvent();
   }
 
+  ngOnChanges() {  }
+
   subcribeToAuthStateChanged() {
     this.messagingAuthService.BSAuthStateChanged.subscribe((state) => {
       this.logger.log('[SIDEBAR-USER-DETAILS] BSAuthStateChanged ', state)
@@ -327,16 +329,16 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
           if (projectUser['user_available'] === false && projectUser['profileStatus'] === 'inactive') {
             // console.log('teammateStatus ', this.teammateStatus) 
             this.selectedStatus = this.teammateStatus[2].id;
-             console.log('[SIDEBAR-USER-DETAILS] - PROFILE_STATUS selected option', this.teammateStatus[2].name);
+            this.logger.debug('[SIDEBAR-USER-DETAILS] - PROFILE_STATUS selected option', this.teammateStatus[2].name);
             this.teammateStatus = this.teammateStatus.slice(0)
           } else if (projectUser['user_available'] === false && (projectUser['profileStatus'] === '' || !projectUser['profileStatus'])) {
             this.selectedStatus = this.teammateStatus[1].id;
-             console.log('[SIDEBAR-USER-DETAILS] - PROFILE_STATUS selected option', this.teammateStatus[1].name);
+            this.logger.debug('[SIDEBAR-USER-DETAILS] - PROFILE_STATUS selected option', this.teammateStatus[1].name);
             this.teammateStatus = this.teammateStatus.slice(0)
           } else if (projectUser['user_available'] === true && (projectUser['profileStatus'] === '' || !projectUser['profileStatus'])) {
             this.selectedStatus = this.teammateStatus[0].id
             this.teammateStatus = this.teammateStatus.slice(0)
-            console.log('[SIDEBAR-USER-DETAILS] - PROFILE_STATUS selected option', this.teammateStatus[0].name);
+            this.logger.debug('[SIDEBAR-USER-DETAILS] - PROFILE_STATUS selected option', this.teammateStatus[0].name);
           }
           this.IS_BUSY = projectUser['isBusy']
           this.USER_ROLE = projectUser['role']
@@ -356,13 +358,6 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
     });
   }
 
-
-  ngOnChanges() {  }
-
-
-
-
-
   changeAvailabilityStateInUserDetailsSidebar(selectedStatusID) {
     this.logger.log('[SIDEBAR-USER-DETAILS] - changeAvailabilityState projectid', this.project._id, ' available 1: ', selectedStatusID);
     

package/src/app/pages/conversation-detail/conversation-detail.page.ts

@@ -771,8 +771,8 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
         conversation.attributes.project_name = project['name']
       }
 
-      return conversation
     }
+    return conversation
   }
 
   setHeaderContent() {
@@ -1701,26 +1701,17 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
         if (accept_file_segment[1] === '*') {
           if (draggedFileMimeType.startsWith(accept_file_segment[0])) {
             isAcceptFile = true
-            this.logger.log(
-              '[CONVS-DETAIL] > checkAcceptedFile - fileUploadAccept isAcceptFile',
-              isAcceptFile,
-            )
+            this.logger.log('[CONVS-DETAIL] > checkAcceptedFile - fileUploadAccept isAcceptFile',isAcceptFile)
             return isAcceptFile
           } else {
             isAcceptFile = false
-            this.logger.log(
-              '[CONVS-DETAIL] > checkAcceptedFile - fileUploadAccept isAcceptFile',
-              isAcceptFile,
-            )
+            this.logger.log('[CONVS-DETAIL] > checkAcceptedFile - fileUploadAccept isAcceptFile',isAcceptFile)
             return isAcceptFile
           }
         } else if (accept_file_segment[1] !== '*') {
           if (draggedFileMimeType === accept_file) {
             isAcceptFile = true
-            this.logger.log(
-              '[CONVS-DETAIL] > checkAcceptedFile - fileUploadAccept isAcceptFile',
-              isAcceptFile,
-            )
+            this.logger.log('[CONVS-DETAIL] > checkAcceptedFile - fileUploadAccept isAcceptFile',isAcceptFile)
             return isAcceptFile
           }
         }
@@ -1733,10 +1724,11 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
 
   initializeTyping() {
     this.logger.debug('[CONVS-DETAIL] membersconversation', this.membersConversation)
-    this.membersConversation.push(this.loggedUser.uid)
-    //this.setSubscriptions();
-    this.typingService.isTyping(this.conversationWith, this.loggedUser.uid, this.isDirect);
-    
+    if(this.loggedUser){
+      this.membersConversation.push(this.loggedUser.uid)
+      //this.setSubscriptions();
+      this.typingService.isTyping(this.conversationWith, this.loggedUser.uid, this.isDirect);
+    }
   }
 
   /** */
@@ -1790,9 +1782,9 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
   segmentNewAgentMessage(conversation: ConversationModel){
     let user = this.loggedUser
     try {
-      window['analytics'].page("Chat Conversation Detail Page, Message Added", {});
+      window['analytics'].page("Chat Conversation Detail Page, Message Sent", {});
     } catch (err) {
-      this.logger.error('Event:Message Added [page] error', err);
+      this.logger.error('Event:Message Sent [page] error', err);
     }
 
     try {
@@ -1802,17 +1794,16 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
         logins: 5,
       });
     } catch (err) {
-      this.logger.error('Event:Message Added [identify] error', err);
+      this.logger.error('Event:Message Sent [identify] error', err);
     }
 
     try {
-      window['analytics'].track('Message Added', {
+      window['analytics'].track('Message Sent', {
         "username": user.firstname + ' ' + user.lastname,
         "userId": user.uid,
         "conversation_id": conversation.uid,
         "channel_type": conversation.channel_type,
         "conversation_with": conversation.conversation_with,
-        "conversation_with_fullname": conversation.conversation_with_fullname,
         "department_name":(conversation.channel_type !== TYPE_DIRECT)? conversation.attributes.departmentName: null,
         "department_id":(conversation.channel_type !== TYPE_DIRECT)? conversation.attributes.departmentId: null,
       },
@@ -1822,7 +1813,7 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
         }
       });
     } catch (err) {
-      this.logger.error('Event:Message Added [track] error', err);
+      this.logger.error('Event:Message Sent [track] error', err);
     }
 
     try {
@@ -1831,7 +1822,7 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
         // plan: projectProfileName,
       });
     } catch (err) {
-      this.logger.error('Event:Message Added [group] error', err);
+      this.logger.error('Event:Message Sent [group] error', err);
     }
   }
 

package/src/app/pages/conversations-list/conversations-list.page.ts

@@ -93,14 +93,15 @@ export class ConversationListPage implements OnInit {
   public archiveActionNotAllowed: boolean = false
 
   public isMobile: boolean = false;
+  public isInitialized: boolean = false;
 
   tooltipOptions = {
     'show-delay': 1500,
     'tooltip-class': 'chat-tooltip',
-    theme: 'light',
-    shadow: false,
+    'theme': 'light',
+    'shadow': false,
     'hide-delay-mobile': 0,
-    hideDelayAfterClick: 3000,
+    'hideDelayAfterClick': 3000,
     'hide-delay': 200,
   }
 
@@ -126,6 +127,7 @@ export class ConversationListPage implements OnInit {
   ) {
     this.checkPlatform();
     this.listenToAppCompConvsLengthOnInitConvs()
+    this.listenToAppIsInitialized()
     this.listenToLogoutEvent()
     this.listenGoOnline()
     this.listenGoOffline()
@@ -404,6 +406,13 @@ export class ConversationListPage implements OnInit {
     })
   }
 
+  listenToAppIsInitialized(){
+    this.events.subscribe( 'appComp:appIsInitialized', (isInitialized) => {
+      this.logger.log( '[CONVS-LIST-PAGE]-CONVS isInitialized', isInitialized)
+      this.isInitialized = isInitialized
+    })
+  }
+
   listenGoOnline() {
     this.events.subscribe('go:online', (goonline) => {
       this.logger.info('[CONVS-LIST-PAGE] - listen To go:online - goonline',goonline)
@@ -480,7 +489,7 @@ export class ConversationListPage implements OnInit {
         if (conversation) {
           this.onImageLoaded(conversation)
           this.onConversationLoaded(conversation)
-          !isDevMode() && conversation.is_new? this.segmentNewConversationAdded(conversation) : null;
+          !isDevMode() && conversation.is_new && this.isInitialized? this.segmentNewConversationAdded(conversation) : null;
         }
     })
 
@@ -663,6 +672,7 @@ export class ConversationListPage implements OnInit {
       this.navigateByUrl('active', conversation.uid)
       this.conversationsHandlerService.uidConvSelected = conversation.uid
       this.logger.log('[CONVS-LIST-PAGE] onConversationSelected active conversation.uid ', conversation.uid)
+      this.events.publish('convList:onConversationSelected', conversation)
     }
   }
 
@@ -730,7 +740,7 @@ export class ConversationListPage implements OnInit {
         }
       }
     }
-
+    
     if(conversation.attributes && conversation.attributes['projectId']){
       let project = localStorage.getItem(conversation.attributes['projectId'])
       if(project){
@@ -974,9 +984,9 @@ export class ConversationListPage implements OnInit {
   private segmentNewConversationAdded(conversation: ConversationModel){
     let user = this.tiledeskAuthService.getCurrentUser()
     try {
-      window['analytics'].page("Chat List Conversations Page, Conversation Added", {});
+      window['analytics'].page("Chat List Conversations Page, Agent added to conversation", {});
     } catch (err) {
-      this.logger.error('Event:Conversation Added [page] error', err);
+      this.logger.error('Event:Agent added to conversation [page] error', err);
     }
 
     try {
@@ -986,36 +996,37 @@ export class ConversationListPage implements OnInit {
         logins: 5,
       });
     } catch (err) {
-      this.logger.error('Event:Conversation Added [identify] error', err);
+      this.logger.error('Event:Agent added to conversation [identify] error', err);
     }
 
     try {
-      window['analytics'].track('Conversation Added', {
+      window['analytics'].track('Agent added to conversation', {
         "username": user.firstname + ' ' + user.lastname,
         "userId": user.uid,
         "conversation_id": conversation.uid,
         "channel_type": conversation.channel_type,
         "conversation_with": conversation.conversation_with,
-        "conversation_with_fullname": conversation.conversation_with_fullname,
-        "department_name":(conversation.channel_type !== TYPE_DIRECT)? conversation.attributes.departmentName: null,
-        "department_id":(conversation.channel_type !== TYPE_DIRECT)? conversation.attributes.departmentId: null,
+        "project_id":(conversation.channel_type !== TYPE_DIRECT)? conversation.uid.split('-')[2]: null,
+        "project_name":(conversation.channel_type !== TYPE_DIRECT && conversation.attributes && conversation.attributes.departmentId)? conversation.attributes.departmentId: null,
       },
       {
         "context": {
-          "groupId": (conversation.channel_type !== TYPE_DIRECT)? conversation.attributes.projectId: null
+          "groupId": (conversation.channel_type !== TYPE_DIRECT)? conversation.uid.split('-')[2]: null
         }
       });
     } catch (err) {
-      this.logger.error('Event:Conversation Added [track] error', err);
+      this.logger.error('Event:Agent added to conversation [track] error', err);
     }
 
-    try {
-      window['analytics'].group(conversation.attributes.projectId, {
-        name: (conversation.attributes.project_name)? conversation.attributes.project_name : null,
-        // plan: projectProfileName,
-      });
-    } catch (err) {
-      this.logger.error('Event:Conversation Added [group] error', err);
+    if(conversation.channel_type !== TYPE_DIRECT){
+      try {
+        window['analytics'].group(conversation.uid.split('-')[2], {
+          name: (conversation.attributes && conversation.attributes.project_name)? conversation.attributes.project_name : null,
+          // plan: projectProfileName,
+        });
+      } catch (err) {
+        this.logger.error('Event:Agent added to conversation [group] error', err);
+      }
     }
   }
 

package/src/app/pages/loader-preview/loader-preview.page.ts

@@ -1,5 +1,4 @@
-import {
-  Component, OnInit, Input, ViewChild, ElementRef,  HostListener, AfterViewInit} from '@angular/core'
+import {Component, OnInit, Input, ViewChild, ElementRef,  HostListener, AfterViewInit} from '@angular/core'
 import { TYPE_MSG_IMAGE } from 'src/chat21-core/utils/constants'
 import { ModalController } from '@ionic/angular'
 import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'

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

@@ -698,15 +698,35 @@ export function isURL(str: string) {
   }
 }
 
-// export function isHostname() {
-
-
-//   if (environment.supportMode === true) {
-
-//     return true
-//   }
-//   return false
-// }
+export function convertColorToRGBA(color, opacity) {
+  let result = color;
+  // console.log('convertColorToRGBA' + color, opacity);
+  if ( color.indexOf('#') > -1 ) {
+    color = color.replace('#', '');
+    const r = parseInt(color.substring(0, 2), 16);
+    const g = parseInt(color.substring(2, 4), 16);
+    const b = parseInt(color.substring(4, 6), 16);
+    result = 'rgba(' + r + ',' + g + ',' + b + ',' + opacity / 100 + ')';
+  } else if ( color.indexOf('rgba') > -1 ) {
+    const rgb = color.split(',');
+    const r = rgb[0].substring(5);
+    const g = rgb[1];
+    const b = rgb[2];
+    // const b = rgb[2].substring(1, rgb[2].length - 1);
+    result = 'rgba(' + r + ',' + g + ',' + b + ',' + opacity / 100 + ')';
+  } else if ( color.indexOf('rgb(') > -1 ) {
+    const rgb = color.split(',');
+    // console.log(rgb);
+    const r = rgb[0].substring(4);
+    const g = rgb[1];
+    const b = rgb[2].substring(0, rgb[2].length - 1);
+    // console.log(b);
+    // console.log(rgb[2].length);
+    result = 'rgba(' + r + ',' + g + ',' + b + ',' + opacity / 100 + ')';
+  }
+  // console.log('convertColorToRGBA' + color + result);
+  return result;
+}
 
 export function getParameterByName(name: string) {
   var url = window.location.href;