@chat21/chat21-ionic 3.0.85 → 3.0.86-rc.2

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # chat21-ionic ver 3.0
 
+### 3.0.86 in PROD
+
+### 3.0.86-rc.2
+- bug-fixed: undefined reading 'channel' while render email icon in ion-conversation-detail component
+
+### 3.0.86-rc.1
+- added: send-email modal on Email footer option click
+- added: handle window['analytics'] error
+- added: send Offline message email if lead is offline and conversation is still open
+- changed: info-conversation width from 300px to 320px
+- changed: z-index of element when canned-list is open
+- changed: chat21client.js file to 1.12.3
+- changed: disable email section for direct conversations
+- changed: do not reload right side bar conversation-info component
+- bug-fixed: canned element is not focused on arrowDown keyboard action
+- bug-fixed: if scroll over canned element, focus on text-area is missed
+- bug-fixed: on text-area change, scroll conversation-detail if needed
+- removed: 'Resolve' conversation button from header-conversation detail component
+
 ## 3.0.85 in PROD
 - bug-fixed: remove focus from last edited canned
 - changed: do not cache right side-bar conversation-info component
@@ -16,19 +35,117 @@
 - bug-fixed: do not disable textArea if is a direct archived conversation
 - bug-fixed: canned item not fire click event on Firefox browser
 
-## 3.0.81 in PROD
+### 3.0.82-rc.7
+- bug-fixed: do not disable textArea if is a direct archived conversation
+- bug-fixed: canned item not fire click event on Firefox browser
+
+### 3.0.82-rc.6
+- bug-fixed: axios is undefined in chat21Client.js
+- bug-fixed: if userImage not exist in sidebar--user-detail, no info of fillColor exist
+
+### 3.0.82-rc.3
+- bug-fixed: incorrect dashboard urls in navbar
+- changed: used logger in mqtt auth service
+
+### 3.0.82-rc.2
+- changed: 'force' parameter to /close post as body content
+- changed: enabled MTT 
+- changed: position of 'LogOut' button in sidebar-user-detail component
+- bug-fixed: removed scrollbar on firefox browser in conversation-list, contacts-directory pages
+
+### 3.0.82-rc.1
+- changed: forceArchive to force while calling /close API URL
+- changed: chat21Client.js from 1.12.1 to 1.12.2
+- changed: list conversations component with from 360px to 320px
+
+### 3.0.81 in PROD
+
+### 3.0.81-rc.3
+- bug-fixed: if window width is less then 991px, move 'Close detail' icon to right
+- changed: removed segment from index.html and loaded dynamically only if in not production
+
+### 3.0.81-rc.2
+- changed: canned loader
 - bug-fixed: if search for a string that not correspond with an existing canned, was shown loader ever
 
-## 3.0.80 in PROD
+### 3.0.81-rc.1
+- added: remove bubble-message background if is image or iframe and no text is in message
+- added: new sound if unassigned request arrive
+- added: animation on hover an image
+- added: parameter to /close to forse the closing of a conversation
+- added: v.0.1.12.1 chatclient.js
+- changed: info-message UI, image UI, frame UI
+- bug-fixed: if click on canned icon, then close and clear '/' char, if click again on canned icon, '/' was not added to message text-area
+
+### 3.0.80 in PROD
 - bug-fixed: if search a canned response, after clicked it does not replaced into text-area
 
-## 3.0.79 in PROD
+### 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.78 in PROD
+### 3.0.79-rc.4
+- bug-fixed: testsiteBaseUrl wrong value env property
+
+### 3.0.79-rc.3
+- added: segment analytics for SignIn-SignOut-Resolved-MsgAdded-ConvAdded
+- added: navbar component if not mobile
+- added: NAVBAR translations
+- changed: minor improvements on UI
+- changed: ion-split-pane UI if mobile
+- changed: moved hover 'add canned' button from bubble-message to ion-conversation-detail component
+- changed: moved addNewCanned to tiledesk service to canned-responses service
+- bug-fixed: open/close detail icon not aligned correctly on click 'close'
+
+### 3.0.79-rc.2
+- added: new sound if new conversation is triggered in agent's chat
+- changed: header UI of header-conversation-detail and unassigned-conversations components
+
+### 3.0.79-rc.1
+- added: LABEL_ONLINE, LABEL_OFFLINE translations
+- changed: renamed ddp-header with conversations-list-header
+- changed: unified control to mobile/desktop app
+- changed: LABEL_AVAILABLE/NOT_AVAILABLE with LABEL_ONLINE/OFFLINE in user-presence component	
+- changed: icon to user-presence
+- changed: UI for conversation-list, conversation-detail and info-group for desktop and mobile
+- changed: renamed option-header component with header-conversations-list-archived
+- changed: contacts-directory UI
+- bug-fixed: if app is opened and user press width expand, move correctly the right position
+
+## 3.0.78 in PROD 
 - bug-fixed: unassigned request not sound the if is the first at all
 - bug-fixed: canned responses opens in incorrect mode
 
+### 3.0.78-rc.4
+- bug-fixed: unassigned request not sound the if is the first at all
+- bug-fixed: translations missed
+- bug-fixed: direct info not showed in conversation-header component
+- removed: conversation-footer border top
+- changed: colors to message-text-area icons and message-attachment components
+
+### 3.0.78-rc.3
+- changed: user-typing location moved from conversation-header to conversation-detail component
+- changed: replace includes with startsWith for check what type of conversation is in project info conversation-list component
+- added: styleMap integrations to some elements	
+- bug-fixed: no tooltip showed if no unserved request are present
+
+### 3.0.78-rc.2
+- changed: project item UI and tooltip msg
+- changed: conversation UI in conversations list component
+- changed: conversation detail header component
+- added: open/close info-conversation moved from conversation-header to conversation detail component
+- bug-fixed: canned responses opens in incorrect mode
+
+### 3.0.78-rc.1
+- changed: conversation-list page width increased
+- changed: background changed in info-message component
+- changed: project-item UI
+- changed: conversation-list page UI
+
 ## 3.0.77 in PROD
 
 ### 3.0.77-rc.3

package/README.md

@@ -100,8 +100,8 @@ Use [Docker Compose Tiledesk installation guide](https://github.com/Tiledesk/til
         },
         "apiUrl": "https://<YOUR-TILEDESK-API-URL>",
         "baseImageUrl": "https://<YOUR-BASE-IMAGE-URL>",
-        "dashboardUrl": "https://<YOUR-DASHBOARD-URL>",
-        "testsiteBaseUrl": "https:<YOUR-WIDGET-URL>/test_widget_page/index.html",
+        "dashboardUrl": "https://<YOUR-DASHBOARD-URL>"
+        "testsiteBaseUrl": "https:<YOUR-WIDGET-URL>/test_widget_page/index.html"
         "wsUrl": 'ws://' + window.location.hostname + '/ws/',
     }
   };

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@chat21/chat21-ionic",
     "author": "Tiledesk SRL",
-    "version": "3.0.85",
+    "version": "3.0.86-rc.2",
     "license": "MIT License",
     "homepage": "https://tiledesk.com/",
     "repository": {
@@ -42,6 +42,7 @@
         "@ng-select/ng-select": "^3.7.3",
         "@ngx-translate/core": "^12.1.2",
         "@ngx-translate/http-loader": "^4.0.0",
+        "@types/marked": "^1.1.0",
         "angular2-moment": "^1.9.0",
         "autolinker": "^3.14.2",
         "cordova-android": "9.1.0",
@@ -59,7 +60,7 @@
         "core-js": "^2.5.4",
         "file-saver": "^2.0.5",
         "firebase": "^8.6.7",
-        "marked": "^2.0.1",
+        "marked": "^2.1.3",
         "material-icons": "^1.11.2",
         "moment": "^2.24.0",
         "moment-timezone": "^0.5.28",
@@ -119,4 +120,4 @@
             "android"
         ]
     }
-}
+}

package/src/app/app-routing.module.ts

@@ -43,7 +43,7 @@ const routes: Routes = [
   },
   {
     path: 'loader-preview',
-    loadChildren: () => import('./pages/loader-preview/loader-preview.module').then( m => m.LoaderPreviewPageModule)
+    loadChildren: () => import('./modals/loader-preview/loader-preview.module').then( m => m.LoaderPreviewPageModule)
   },
   {
     path: 'unassigned-conversations',
@@ -59,13 +59,18 @@ const routes: Routes = [
   },
   {
     path: 'create-canned-response',
-    loadChildren: () => import('./pages/create-canned-response/create-canned-response.module').then( m => m.CreateCannedResponsePageModule)
+    loadChildren: () => import('./modals/create-canned-response/create-canned-response.module').then( m => m.CreateCannedResponsePageModule)
+  },
+  {
+    path: 'send-email',
+    loadChildren: () => import('./modals/send-email/send-email.module').then( m => m.SendEmailModalModule)
   }
 
 
 
 
 
+
   // {
   //   path: 'conversation-detail/:IDConv',
   //   loadChildren: () => import('./pages/conversation-detail/conversation-detail.module').then( m => m.ConversationDetailPageModule)

package/src/app/app.component.html

@@ -5,6 +5,12 @@
 
     <app-network-offline></app-network-offline>
 
+
+    <app-navbar *ngIf="!IS_ON_MOBILE_DEVICE"
+      [isSoundEnabled]="isSoundEnabled"
+      (onSoundChange)="onSoundChange($event)">
+    </app-navbar>
+
     <div class="sidebar" [ngClass]="{'hide-sidebar': IS_ONLINE === false || IS_ON_MOBILE_DEVICE === true || SUPPORT_MODE === false}">
       <app-sidebar></app-sidebar>
     </div>
@@ -13,7 +19,7 @@
       <app-sidebar-user-details> </app-sidebar-user-details>
     </div>
  
-    <ion-split-pane when="md" contentId="main">
+    <ion-split-pane when="md" contentId="main" [ngClass]="{'mobile': IS_ON_MOBILE_DEVICE}">
       <!-- 'sidebar-visible': IS_ONLINE === true && SUPPORT_MODE === true, -->
       <ion-nav #sidebarNav [root]="sidebarPage" [ngClass]="{'sidebar-hidden': IS_ON_MOBILE_DEVICE === true || SUPPORT_MODE === false}"></ion-nav>
       <!--  our side menu  -->

package/src/app/app.component.scss

@@ -1,7 +1,21 @@
+@import '../variables.scss';
+
 .split-pane-md.split-pane-visible > .split-pane-side {
-    min-width: 312px;
+    min-width: 320px; //360px; //312px;
     display: block; // Safari bug fix
-    margin-left: 60px;
+    margin-left: var(--sidebar-width);
+    --border: 0px;
+}
+
+.split-pane-md:not(.mobile){
+    height: calc( 100% - var(--nav-bar-heigth));
+    margin-top: var(--nav-bar-heigth);
+}
+
+.navbar{
+    display: flex;
+    position: fixed;
+    top: 0px;
 }
 
 .sidebar-visible {
@@ -20,6 +34,10 @@
     left: 60px
 }
 
+// ion-nav {
+//     background-color: var(--list-bkg-color);
+// }
+
 // @media (min-width: 768px) {
 //     .split-pane-md.split-pane-visible > .split-pane-side {
 //         min-width: 312px;

package/src/app/app.component.ts

@@ -1,5 +1,6 @@
-import { TYPE_DIRECT, TYPE_SUPPORT_GROUP } from 'src/chat21-core/utils/constants';
-import { tranlatedLanguage, URL_SOUND_LIST_CONVERSATION } from './../chat21-core/utils/constants';
+
+import { TYPE_DIRECT, TYPE_SUPPORT_GROUP, URL_SOUND_CONVERSATION_UNASSIGNED } from 'src/chat21-core/utils/constants';
+import { tranlatedLanguage, URL_SOUND_CONVERSATION_ADDED, URL_SOUND_LIST_CONVERSATION } from 'src/chat21-core/utils/constants';
 import { ArchivedConversationsHandlerService } from 'src/chat21-core/providers/abstract/archivedconversations-handler.service';
 import { AppStorageService } from 'src/chat21-core/providers/abstract/app-storage.service';
 
@@ -38,8 +39,8 @@ import { LoginPage } from './pages/authentication/login/login.page';
 import { ConversationListPage } from './pages/conversations-list/conversations-list.page';
 
 // utils
-import { checkPlatformIsMobile, isGroup, getParameterByName, searchIndexInArrayForUid, compareValues } from '../chat21-core/utils/utils';
-import { STORAGE_PREFIX, PLATFORM_MOBILE, PLATFORM_DESKTOP, CHAT_ENGINE_FIREBASE, AUTH_STATE_OFFLINE, AUTH_STATE_ONLINE } from '../chat21-core/utils/constants';
+import { checkPlatformIsMobile, isGroup, getParameterByName, searchIndexInArrayForUid, compareValues, stripTags } from 'src/chat21-core/utils/utils';
+import { STORAGE_PREFIX, PLATFORM_MOBILE, PLATFORM_DESKTOP, CHAT_ENGINE_FIREBASE, AUTH_STATE_OFFLINE, AUTH_STATE_ONLINE } from 'src/chat21-core/utils/constants';
 import { environment } from '../environments/environment';
 import { UserModel } from '../chat21-core/models/user';
 import { ConversationModel } from 'src/chat21-core/models/conversation';
@@ -87,11 +88,15 @@ export class AppComponent implements OnInit {
   public authModal: any;
 
   private audio: any;
+  private audio_NewConv: any;
+  private audio_Unassigned: any;
   private setIntervalTime: any;
   private setTimeoutSound: any;
   private isTabVisible: boolean = true;
-  private isSoundEnabled: boolean;
+  public isSoundEnabled: boolean;
   private hasPlayed: boolean;
+  private hasPlayedConversation: boolean;
+  private hasPlayedConversationUnassigned: boolean;
   private tabTitle: string;
   private setTimeoutConversationsEvent: any;
   private logger: LoggerService = LoggerInstance.getInstance();
@@ -335,6 +340,7 @@ export class AppComponent implements OnInit {
 
 
     this.initializeApp('oninit');
+    this.initSegment()
     this.listenToPostMsgs();
   }
 
@@ -467,6 +473,7 @@ export class AppComponent implements OnInit {
       this.statusBar.styleDefault();
       this.navService.init(this.sidebarNav, this.detailNav);
       // this.persistence = appconfig.authPersistence;
+      // this.appStorageService.initialize(environment.storage_prefix, this.persistence, '')
       this.tiledeskAuthService.initialize(this.appConfigProvider.getConfig().apiUrl);
       this.messagingAuthService.initialize();
 
@@ -830,6 +837,14 @@ export class AppComponent implements OnInit {
     this.audio.src = chatBaseUrl + URL_SOUND_LIST_CONVERSATION;
     this.audio.load();
 
+    this.audio_NewConv = new Audio();
+    this.audio_NewConv.src = chatBaseUrl + URL_SOUND_CONVERSATION_ADDED;
+    this.audio_NewConv.load();
+
+    this.audio_Unassigned = new Audio();
+    this.audio_Unassigned.src = chatBaseUrl + URL_SOUND_CONVERSATION_UNASSIGNED;
+    this.audio_Unassigned.load();
+
     const sound_status = localStorage.getItem('dshbrd----sound')
     if(sound_status && sound_status !== 'undefined'){
       this.isSoundEnabled = sound_status === 'enabled'? true: false
@@ -839,7 +854,14 @@ export class AppComponent implements OnInit {
 
   }
 
-  private manageTabNotification(badgeNotificationCount?: number) {
+  onSoundChange(event){
+    if(event && event !== undefined){
+      localStorage.setItem('dshbrd----sound', event)
+      this.isSoundEnabled = event === 'enabled'? true: false
+    }
+  }
+
+  private manageTabNotification(sound_type: string, badgeNotificationCount?: number) {
     if (!this.isTabVisible) {
       // TAB IS HIDDEN --> manage title and SOUND
       let badgeNewConverstionNumber = badgeNotificationCount? badgeNotificationCount : this.conversationsHandlerService.countIsNew()
@@ -863,7 +885,26 @@ export class AppComponent implements OnInit {
       this.isSoundEnabled = sound_status === 'enabled'? true: false
     }
     this.logger.debug('[APP-COMP] manageTabNotification can saund?', this.isInitialized, this.isSoundEnabled)
-    if(this.isInitialized && this.isSoundEnabled) this.soundMessage()
+    if(this.isInitialized && this.isSoundEnabled) {
+      switch(sound_type){
+        case 'conv_added': {
+          this.soundConversationAdded();
+          break;
+        }
+        case 'new_message': {
+          this.soundMessage();
+          break;
+        }
+        case 'conv_unassigned': {
+          this.soundConversationUnassigned();
+          break;
+        }
+        default:{
+          this.soundMessage();
+          break;
+        }
+      }
+    }
   }
 
   soundMessage() {
@@ -879,7 +920,7 @@ export class AppComponent implements OnInit {
     // }, 4000);
 
     //play sound every 4s from the fist time you receive a conversation added/changed
-    if(!this.hasPlayed){
+    if(!this.hasPlayed && !this.hasPlayedConversation){
       that.audio.play().then(() => {
         that.hasPlayed = true
         that.logger.debug('[APP-COMP] ****** soundMessage played *****');
@@ -891,6 +932,36 @@ export class AppComponent implements OnInit {
       });
     }
   }
+
+  soundConversationAdded(){
+    const that = this;
+    if(!this.hasPlayedConversation ){
+      that.audio_NewConv.play().then(() => {
+        that.hasPlayedConversation = true
+        that.logger.debug('[APP-COMP] ****** soundConversationAdded played *****');
+        setTimeout(() => {
+          that.hasPlayedConversation = false
+        }, 4000);
+      }).catch((error: any) => {
+        that.logger.error('[APP-COMP] ***soundConversationAdded error*', error);
+      });
+    }
+  }
+
+  soundConversationUnassigned(){
+    const that = this;
+    if(!this.hasPlayedConversationUnassigned ){
+      that.audio_Unassigned.play().then(() => {
+        that.hasPlayedConversationUnassigned = true
+        that.logger.debug('[APP-COMP] ****** soundConversationUnassigned played *****');
+        setTimeout(() => {
+          that.hasPlayedConversationUnassigned = false
+        }, 4000);
+      }).catch((error: any) => {
+        that.logger.error('[APP-COMP] ***soundConversationUnassigned error*', error);
+      });
+    }
+  }
   /**---------------- SOUND FUNCTIONS --> END <--- +*/
   /***************************************************+*/
 
@@ -938,11 +1009,11 @@ 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) {
-        this.manageTabNotification()
+        this.manageTabNotification('conv_added')
       }
       if(conversation) this.updateConversationsOnStorage()
     });
@@ -960,7 +1031,7 @@ export class AppComponent implements OnInit {
         this.logger.log('[APP-COMP] ***** subscribeConversationChangedDetailed currentUser: ', currentUser);
         if (changes.value && changes.value.sender !== currentUser.uid) {
           if(changes.value.is_new === changes.previousValue.is_new){
-            this.manageTabNotification();
+            this.manageTabNotification('new_message');
           }
         }
       }
@@ -972,7 +1043,6 @@ export class AppComponent implements OnInit {
         this.updateConversationsOnStorage();
         isDevMode()? null: this.segmentResolved(conversation)
       }
-
     });
   }
 
@@ -1018,7 +1088,6 @@ export class AppComponent implements OnInit {
       this.initConversationsHandler(currentUser.uid);
       this.initArchivedConversationsHandler(currentUser.uid);
       isDevMode()? null: this.segmentSignIn()
-
     }
     this.checkPlatform();
     try {
@@ -1059,7 +1128,7 @@ export class AppComponent implements OnInit {
 
     // this.unsubscribe$.next();
     // this.unsubscribe$.complete();
-
+    
   }
 
   goToDashboardLogin(){
@@ -1120,7 +1189,7 @@ export class AppComponent implements OnInit {
   }
 
   subscribeProfileInfoButtonLogOut = (hasClickedLogout) => {
-    this.logger.log('[APP-COMP] FIREBASE-NOTIFICATION >>>>  subscribeProfileInfoButtonLogOut');
+    this.logger.log('[APP-COMP] FIREBASE-NOTIFICATION >>>>  subscribeProfileInfoButtonLogOut ');
     // if (hasClickedLogout === true) {
     //   this.removePresenceAndLogout()
     // }
@@ -1141,6 +1210,7 @@ export class AppComponent implements OnInit {
 
           if (res === 'success') {
             that.removePresenceAndLogout();
+            
           } else {
             that.removePresenceAndLogout();
             // that.presentToast();
@@ -1154,13 +1224,19 @@ export class AppComponent implements OnInit {
 
   subscribeUnservedRequestCount = (unservedRequestCount) => {
     if(unservedRequestCount && unservedRequestCount > 0){
-      this.logger.debug("hasToSoundUnservedRequestCount::::", this.isInitialized)
+      this.logger.debug("subscribeUnservedRequestCount appIsInitialized::::",this.isInitialized)
       if(this.isInitialized){
-        this.manageTabNotification(unservedRequestCount) //sound and alternate title
+        this.manageTabNotification('conv_unassigned', unservedRequestCount) //sound and alternate title
       }
     }
   }
 
+  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 };
@@ -1268,8 +1344,21 @@ export class AppComponent implements OnInit {
     }
   }
 
+  private initSegment(){
+    if(!isDevMode()){
+      var head  = document.getElementsByTagName('head')[0];
+      var script  = document.createElement('script');
+      script.type="text/javascript";
+      script.text =`!function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on","addSourceMiddleware","addIntegrationMiddleware","setAnonymousId","addDestinationMiddleware"];analytics.factory=function(e){return function(){var t=Array.prototype.slice.call(arguments);t.unshift(e);analytics.push(t);return analytics}};for(var e=0;e<analytics.methods.length;e++){var key=analytics.methods[e];analytics[key]=analytics.factory(key)}analytics.load=function(key,e){var t=document.createElement("script");t.type="text/javascript";t.async=!0;t.src="https://cdn.segment.com/analytics.js/v1/" + key + "/analytics.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n);analytics._loadOptions=e};analytics._writeKey="qaTU0wG6VH6xPAhOzD2kneI70Txg1fTB";;analytics.SNIPPET_VERSION="4.15.3";
+                    analytics.load("qaTU0wG6VH6xPAhOzD2kneI70Txg1fTB");
+                    analytics.page();
+                    }}();`
+      head.appendChild(script);
+    } 
+  }
+
   private segmentSignIn(){
-    let user = this.tiledeskAuthService.getCurrentUser();
+    let user = this.tiledeskAuthService.getCurrentUser()
     if(window['analytics']){
       try {
         window['analytics'].page("Chat Auth Page, Signin", {});
@@ -1301,7 +1390,7 @@ export class AppComponent implements OnInit {
 
 
   private segmentSignedOut(){
-    let user = this.tiledeskAuthService.getCurrentUser();
+    let user = this.tiledeskAuthService.getCurrentUser()
     if(window['analytics']){
       try {
         window['analytics'].page("Chat Auth Page, Signed Out", {});
@@ -1341,7 +1430,7 @@ export class AppComponent implements OnInit {
 
   private segmentResolved(conversation: ConversationModel){
     let user = this.tiledeskAuthService.getCurrentUser();
-    if( window['analytics']){
+    if(window['analytics']){
       try {
         window['analytics'].page("Chat List Conversations Page, Chat Resolved", {});
       } catch (err) {
@@ -1390,6 +1479,7 @@ export class AppComponent implements OnInit {
     }
   }
 
+
   @HostListener('document:visibilitychange', [])
   visibilitychange() {
     // this.logger.debug("document TITLE", document.hidden, document.title);
@@ -1453,5 +1543,26 @@ export class AppComponent implements OnInit {
       this.isSoundEnabled = event.newValue === 'enabled'? true: false
     }
   }
+
+
+  // @HostListener('mouseenter', ['$event']) 
+  // onMouseEnter(event: any) {
+  //   console.log('HostListener onMouseEnter-->', event)
+  // }
+
+  // @HostListener('mouseleave', ['$event']) 
+  // onMouseLeave(event: any) {
+  //   console.log('HostListener onMouseLeave-->', event)
+  // }
+
+  // @HostListener('focus', ['$event']) 
+  // onFocus(event: any) {
+  //   console.log('HostListener onFocus-->', event)
+  // }
+
+  // @HostListener('blur', ['$event']) 
+  // onBlur(event: any) {
+  //   console.log('HostListener onBlur-->', event)
+  // }
 }
 

package/src/app/app.module.ts

@@ -1,3 +1,5 @@
+import { SendEmailModal } from './modals/send-email/send-email.page';
+import { ConvertRequestToConversation } from './../chat21-core/utils/convertRequestToConversation';
 import { LogLevel, PUSH_ENGINE_FIREBASE, PUSH_ENGINE_MQTT } from './../chat21-core/utils/constants';
 import { CustomLogger } from 'src/chat21-core/providers/logger/customLogger';
 import { NgModule, ErrorHandler, APP_INITIALIZER } from '@angular/core';
@@ -81,10 +83,10 @@ import { AppStorageService } from 'src/chat21-core/providers/abstract/app-storag
 import { ConversationListPageModule } from './pages/conversations-list/conversations-list.module';
 import { ConversationDetailPageModule } from './pages/conversation-detail/conversation-detail.module';
 import { LoginPageModule } from './pages/authentication/login/login.module';
-import { LoaderPreviewPageModule } from './pages/loader-preview/loader-preview.module';
+import { LoaderPreviewPageModule } from './modals/loader-preview/loader-preview.module';
 import { CreateTicketPageModule } from './pages/create-ticket/create-ticket.module';
 import { CreateRequesterPageModule } from './pages/create-requester/create-requester.module';
-import { CreateCannedResponsePageModule } from './pages/create-canned-response/create-canned-response.module';
+import { CreateCannedResponsePageModule } from './modals/create-canned-response/create-canned-response.module';
 // UTILS
 import { ScrollbarThemeModule } from './utils/scrollbar-theme.directive';
 import { SharedModule } from 'src/app/shared/shared.module';
@@ -101,6 +103,7 @@ import { ConnectionService } from 'ng-connection-service';
 import { WebSocketJs } from './services/websocket/websocket-js';
 import { UnassignedConversationsPageModule } from './pages/unassigned-conversations/unassigned-conversations.module';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { SendEmailModalModule } from './modals/send-email/send-email.module';
 
 // FACTORIES
 export function createTranslateLoader(http: HttpClient) {
@@ -287,6 +290,7 @@ const appInitializerFn = (appConfig: AppConfigProvider, logger: NGXLogger) => {
     ConversationInfoModule,
     NgxLinkifyjsModule.forRoot(),
     LoaderPreviewPageModule,
+    SendEmailModalModule,
     CreateTicketPageModule,
     CreateRequesterPageModule,
     CreateCannedResponsePageModule
@@ -369,7 +373,8 @@ const appInitializerFn = (appConfig: AppConfigProvider, logger: NGXLogger) => {
     EventsService,
     Chooser,
     Chat21Service,
-    WebSocketJs
+    WebSocketJs,
+    ConvertRequestToConversation
   ]
 })
 export class AppModule { }

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

@@ -1,7 +1,7 @@
 import { ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild, SimpleChanges } from '@angular/core';
-import { MessageModel } from '../../../../chat21-core/models/message';
-import { isPopupUrl, popupUrl, stripTags } from '../../../../chat21-core/utils/utils';
-import { MSG_STATUS_SENT, MSG_STATUS_RETURN_RECEIPT, MSG_STATUS_SENT_SERVER, MAX_WIDTH_IMAGES, MESSAGE_TYPE_INFO, MESSAGE_TYPE_MINE, MESSAGE_TYPE_OTHERS } from '../../../../chat21-core/utils/constants';
+import { MessageModel } from 'src/chat21-core/models/message';
+import { isPopupUrl, popupUrl, stripTags } from 'src/chat21-core/utils/utils';
+import { MSG_STATUS_SENT, MSG_STATUS_RETURN_RECEIPT, MSG_STATUS_SENT_SERVER, MAX_WIDTH_IMAGES, MESSAGE_TYPE_INFO, MESSAGE_TYPE_MINE, MESSAGE_TYPE_OTHERS } from 'src/chat21-core/utils/constants';
 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';
@@ -17,11 +17,18 @@ export class ConversationContentComponent implements OnInit {
   @Input() messages: MessageModel[]
   @Input() senderId: string;
   @Input() baseLocation: string;
+  @Input() isConversationArchived: boolean;
+  @Input() isTypings: boolean;
+  @Input() idUserTypingNow: string;
+  @Input() nameUserTypingNow: string;
+  @Input() typingLocation: string;
+  @Input() fullscreenMode: boolean;
   @Input() translationMap: Map<string, string>;
   @Input() stylesMap: Map<string, string>;
   @Output() onBeforeMessageRender = new EventEmitter();
   @Output() onAfterMessageRender = new EventEmitter();
-  @Output() onMenuOptionShow = new EventEmitter();
+  @Output() onMenuOptionShow = new EventEmitter<boolean>();
+  @Output() onEmojiiPickerShow = new EventEmitter<boolean>()
   @Output() onAttachmentButtonClicked = new EventEmitter();
   @Output() onScrollContent = new EventEmitter();