@chat21/chat21-web-widget 5.0.55 → 5.0.56-rc.2

package/.github/workflows/build.yml

@@ -4,6 +4,7 @@ on:
     branches:
       - master # The default branch
       - branch-*   # The other branches to be analyzed
+      - features/*
   pull_request:
     types: [opened, synchronize, reopened]
 jobs:

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # chat21-web-widget ver 5.0
 
+### 5.0.56-rc.2
+- added: firebase laxy loading
+- added: dynamic base herf to load chunk files
+- added: get and set method for chatClient mqtt lib
+- changed: fire initWidget to 'complete' event of document
+- changed: replace moment with dayjs
+- removed: @import for sass/variables constants file
+- removed: unsed directives and imports
+- removed: ngx-moment and moment in favour of dayjs
+
+### 5.0.56-rc.1
+- added: custom colors to senderFullname to better distinguish the user
+- bug-fixed: cannot read text.trim() of undefined if no text is sent with an image
+- bug-fixed: markdown not split work correctly
+- bug-fixed: dispose loader bubbles if wait command message is received
+
 ### 5.0.55 in PROD
 - added: preflight property to /message API body
 

package/angular.json

@@ -18,19 +18,18 @@
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
             "outputPath": "dist",
+            "baseHref":"/",
             "index": "src/index.html",
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
             "assets": [
-              "src/favicon.ico",
               "src/assets",
               "src/test.html",
               "src/test-new.html",
               "src/test-custom-auth.html",
               "src/tiledesk.js",
               "src/launch.js",
-              "src/base_script.html",
               "src/iframe-style.css",
               "src/widget-config-template.json",
               "src/widget-config.json",
@@ -41,8 +40,7 @@
               "src/environments/real_data/widget-config-native-prod.json"
             ],
             "styles": [
-              "src/app/sass/styles.scss",
-              "node_modules/@ctrl/ngx-emoji-mart/picker.css"
+              "src/app/sass/styles.scss"
             ],
             "scripts": [
               "src/assets/js/mqtt/4.2.6/mqtt.min.js",
@@ -54,8 +52,10 @@
             "buildOptimizer": false,
             "allowedCommonJsDependencies": [
               "rxjs-compat",
-              "moment",
-              "idb"
+              "idb",
+              "accept-language-parser",
+              "file-saver",
+              "dayjs"
             ],
             "sourceMap": true,
             "optimization": false,
@@ -146,7 +146,6 @@
             "tsConfig": "tsconfig.spec.json",
             "karmaConfig": "karma.conf.js",
             "assets": [
-              "src/favicon.ico",
               "src/assets"
             ],
             "styles": [

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@chat21/chat21-web-widget",
   "author": "Tiledesk SRL",
-  "version": "5.0.55",
+  "version": "5.0.56-rc.2",
   "license": "MIT",
   "homepage": "https://www.tiledesk.com",
   "repository": {
@@ -14,7 +14,8 @@
     "build": "ng build",
     "test": "ng test",
     "lint": "ng lint",
-    "e2e": "ng e2e"
+    "e2e": "ng e2e",
+    "source-map-explorer": "source-map-explorer dist/*.js"
   },
   "private": false,
   "dependencies": {
@@ -35,15 +36,15 @@
     "@types/marked": "^4.0.3",
     "accept-language-parser": "^1.5.0",
     "bootstrap": "^5.1.3",
+    "dayjs": "^1.11.7",
     "file-saver": "^2.0.5",
     "firebase": "^8.6.7",
     "humanize-duration-ts": "^2.1.1",
     "marked": "^4.0.16",
-    "moment": "^2.29.3",
     "ngx-logger": "^5.0.11",
-    "ngx-moment": "^6.0.2",
     "popper.js": "^1.16.1",
     "rxjs": "~6.5.1",
+    "source-map-explorer": "^2.5.3",
     "tslib": "^2.0.0",
     "uuid": "^8.3.2",
     "zone.js": "~0.11.4"

package/src/app/app.component.html

@@ -1,18 +1,11 @@
 
 <div id="tiledesk-container" [class.active]="g.isShown" tabindex="9999"> 
-  <!-- [class.active]="isLogged" onFocus="document.querySelector('.btn-new-conversation').focus()" -->
-  <!-- 
-  ****** WINDOW CHAT CONVERSATION ******
-  [class.active]="g.isOpen" -> su firefox nn funziona bene, aggiunto come style inline
-  'background-color':g.themeColor,
-  -->
 
   <div id="chat21-conversations"
     [ngClass]="{ 'swing-in-bottom-fwd' : g.isOpen === true, 'full-screen-mode' : g.fullscreenMode === true, 'c21-align-left' : g.align === 'left', 'c21-align-right' : g.align !== 'left'}"
     [ngStyle]="{ 'display': (g.isOpen == true)?'block':'none', 'bottom': g.marginY+'px', 'left':(g.align==='left')?g.marginX+'px':'', 'right':(g.align==='right')?g.marginX+'px':'' }">
       
     <div *ngIf="isOpenHome && g.senderId" class="modal-page active">
-      <!-- [class.active]="true" -->
       <chat-home 
         [listConversations]="listConversations"
         [archivedConversations]="archivedConversations"
@@ -29,7 +22,6 @@
     </div>
 
     <div *ngIf="isOpenAllConversation && g.senderId" class="modal-page active">
-      <!-- [class.active]="true" -->
       <chat-list-all-conversations
         [listConversations]="listConversations"
         [archivedConversations]="archivedConversations"
@@ -67,7 +59,7 @@
     ****************************************
     ******* MODALE SELECT DEPARTMENT *******
     *************** STEP 1 *****************
-    [class.active]="isOpenSelectionDepartment" -->
+     -->
     <div *ngIf="isOpenSelectionDepartment" class="modal-page selection-department active">
       <chat-selection-department
         (onBeforeDepartmentsFormRender)="triggerHandler.triggerOnbeforeDepartmentsFormRender($event)" 
@@ -80,7 +72,6 @@
     *******************************************
     *********** MODALE PRECHAT FORM ***********
     **************** STEP 2 *******************
-    [class.active]="g.isOpenPrechatForm === true"
     -->
     <div *ngIf="g.isOpenPrechatForm && g.senderId" class="modal-page prechat-form active">
       <chat-prechat-form
@@ -94,7 +85,6 @@
     ****************************************
     *********** MODALE RATE CHAT ***********
     ****************************************
-    [class.active]="g.isOpenStartRating === true"
     -->
     <div *ngIf="g.isOpenStartRating" class="modal-page star-rating-widget active">
       <chat-star-rating-widget

package/src/app/app.component.scss

@@ -2,7 +2,6 @@
 @import url('https://fonts.googleapis.com/css?family=Roboto:400,700,300|Material+Icons');
 @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,400;0,700;1,300;1,400');
 @import 'src/app/sass/normalize.scss';
-@import 'src/app/sass/variables';
 @import url('./sass/animations.scss');
 @import url("./sass/hover.css");
 @import '@ctrl/ngx-emoji-mart/picker';
@@ -42,8 +41,8 @@ input, select:focus, textarea {
 //     background: #777; 
 // }
 
-:root {
-    --button-in-msg-background-color:  #{$blue};
+:host {
+    --button-in-msg-background-color:  --black;
     --button-in-msg-font-size: 15px;
 }
 
@@ -172,7 +171,7 @@ body {
 
 
 textarea::placeholder {
-    color: $gray;  
+    color: var(--gray);  
     font-weight: 300;
   }
 
@@ -269,7 +268,7 @@ chat-root {
         line-height: 20px!important;
         outline: none!important;
         box-shadow:none!important;
-        border: 0px solid $trasp-light-black!important;
+        border: 0px solid var(--trasp-light-black)!important;
     }
 
     // ========= BEGIN: CSS APP.COMPONENT ========= //
@@ -364,7 +363,7 @@ chat-root {
         .time {
             display: none;
             font-size: 1em;
-            color: $gray;
+            color: var(--gray);
             text-align: left;
             margin: 0px;
             padding: 0px 40px;
@@ -380,11 +379,11 @@ chat-root {
         // === CSS LINKS === //
         /* .messages.msg_receive a */
         .msg_receive a { 
-            color: $bck-msg-sent;
+            color: var(--bck-msg-sent);
         }
 
         img {
-            max-width: $max-width-images;
+            max-width: var(--max-width-images);
         }
 
         // === CSS BUTTON === //
@@ -398,7 +397,7 @@ chat-root {
             text-align: center;
             font-size: 1em;
             border-radius: 40px;
-            background-color: $blue;
+            background-color: var(--blue);
             color: #ffffff;
             border: 0px;
 
@@ -419,7 +418,7 @@ chat-root {
         button.c21-button-link {
             font-weight: 400;
             font-size: 14px;
-            color: $blue;
+            color: var(--blue);
             text-decoration: none;
             background-color: transparent;
             border: 1px solid transparent;
@@ -441,7 +440,7 @@ chat-root {
             font-size: 1em;
             line-height: 1.2em;
             border-radius: 50%;
-            background-color: $red;
+            background-color: red;
             color: white;
             text-align: center;
             margin-top: -10px;
@@ -500,7 +499,7 @@ chat-root {
         #chat21-spinner > div {
             width: 12px;
             height: 12px;
-            background-color: $blue;
+            background-color: var(--blue);
             border-radius: 100%;
             display: inline-block;
             -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
@@ -517,7 +516,7 @@ chat-root {
         #chat21-spinner span {
             display: block;
             margin: 0.5em 0 0 0;
-            color: $black;
+            color: var(--black);
             /* text-transform: uppercase; */
             font-family: 'Roboto', sans-serif;
             -webkit-animation: pulse 2000ms linear infinite;

package/src/app/app.component.spec.ts

@@ -5,7 +5,6 @@ import { AppComponent } from './app.component';
 import { GlobalSettingsService } from './providers/global-settings.service';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { AppStorageService } from 'src/chat21-core/providers/abstract/app-storage.service';
-import { SettingsSaverService } from './providers/settings-saver.service';
 import { TranslatorService } from './providers/translator.service';
 import { TranslateModule } from '@ngx-translate/core';
 import { CustomTranslateService } from '../chat21-core/providers/custom-translate.service';
@@ -43,7 +42,6 @@ describe('AppComponent', () => {
         GlobalSettingsService,
         AppStorageService,
         AppConfigService,
-        SettingsSaverService,
         TranslatorService,
         CustomTranslateService,
         ChatManager,

package/src/app/app.component.ts

@@ -3,7 +3,6 @@ import { TYPE_DIRECT } from './../chat21-core/utils/constants';
 import { AfterViewInit, Component, ElementRef, HostListener, NgZone, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
 import { environment } from 'src/environments/environment';
 import { Subscription } from 'rxjs/internal/Subscription';
-import * as moment from 'moment';
 import { v4 as uuidv4 } from 'uuid';
 //COMPONENTS
 import { EyeeyeCatcherCardComponent } from './component/eyeeye-catcher-card/eyeeye-catcher-card.component';
@@ -18,32 +17,32 @@ import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance'
 import { TiledeskAuthService } from 'src/chat21-core/providers/tiledesk/tiledesk-auth.service';
 import { TiledeskRequestsService } from 'src/chat21-core/providers/tiledesk/tiledesk-requests.service';
 /** CONVERSATIONS - MESSAGE SERVICES */
-import { MessagingAuthService } from 'src/chat21-core/providers/abstract/messagingAuth.service';
-import { ChatManager } from 'src/chat21-core/providers/chat-manager';
-import { UploadService } from 'src/chat21-core/providers/abstract/upload.service';
-import { Triggerhandler } from 'src/chat21-core/utils/triggerHandler';
 import { AppStorageService } from 'src/chat21-core/providers/abstract/app-storage.service';
-import { ConversationHandlerBuilderService } from 'src/chat21-core/providers/abstract/conversation-handler-builder.service';
 import { ArchivedConversationsHandlerService } from 'src/chat21-core/providers/abstract/archivedconversations-handler.service';
-import { ConversationsHandlerService } from 'src/chat21-core/providers/abstract/conversations-handler.service';
+import { ConversationHandlerBuilderService } from 'src/chat21-core/providers/abstract/conversation-handler-builder.service';
 import { ConversationHandlerService } from 'src/chat21-core/providers/abstract/conversation-handler.service';
+import { ConversationsHandlerService } from 'src/chat21-core/providers/abstract/conversations-handler.service';
 import { ImageRepoService } from 'src/chat21-core/providers/abstract/image-repo.service';
-import { TypingService } from 'src/chat21-core/providers/abstract/typing.service';
+import { MessagingAuthService } from 'src/chat21-core/providers/abstract/messagingAuth.service';
 import { PresenceService } from 'src/chat21-core/providers/abstract/presence.service';
+import { TypingService } from 'src/chat21-core/providers/abstract/typing.service';
+import { UploadService } from 'src/chat21-core/providers/abstract/upload.service';
+import { ChatManager } from 'src/chat21-core/providers/chat-manager';
 import { CustomTranslateService } from 'src/chat21-core/providers/custom-translate.service';
+import { Triggerhandler } from 'src/chat21-core/utils/triggerHandler';
 /** OTHERS */
 import { AppConfigService } from './providers/app-config.service';
 import { GlobalSettingsService } from './providers/global-settings.service';
 import { TranslatorService } from './providers/translator.service';
-import { SettingsSaverService } from './providers/settings-saver.service';
 // UTILS
-import { Globals } from './utils/globals';
-import { UID_SUPPORT_GROUP_MESSAGES } from './utils/constants';
-import { supports_html5_storage } from 'src/chat21-core/utils/utils';
-import { AUTH_STATE_OFFLINE, AUTH_STATE_ONLINE, TYPE_MSG_FILE, TYPE_MSG_IMAGE, URL_SOUND_LIST_CONVERSATION } from 'src/chat21-core/utils/constants';
-import { isInfo, isUserBanned } from 'src/chat21-core/utils/utils-message';
+import * as dayjs from 'dayjs';
 import { MessageModel } from 'src/chat21-core/models/message';
+import { AUTH_STATE_OFFLINE, AUTH_STATE_ONLINE, TYPE_MSG_FILE, TYPE_MSG_IMAGE, URL_SOUND_LIST_CONVERSATION } from 'src/chat21-core/utils/constants';
+import { supports_html5_storage } from 'src/chat21-core/utils/utils';
+import { UID_SUPPORT_GROUP_MESSAGES } from './utils/constants';
+import { Globals } from './utils/globals';
 import { Rules } from './utils/rules';
+import { isInfo, isUserBanned } from 'src/chat21-core/utils/utils-message';
 
 interface MessageObj {
   tenant?: string;
@@ -108,10 +107,8 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
     private el: ElementRef,
     private ngZone: NgZone,
     public g: Globals,
-    private rules: Rules,
     public triggerHandler: Triggerhandler,
     public globalSettingsService: GlobalSettingsService,
-    private settingsSaverService: SettingsSaverService,
     public appConfigService: AppConfigService,
     private appStorageService: AppStorageService,
     private translatorService: TranslatorService,
@@ -160,9 +157,6 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
                     if (conversation.attributes && conversation.attributes['subtype'] === 'info') {
                         return;
                     }
-                    if (conversation.is_new && !this.isOpenConversation) {
-                        // this.soundMessage();
-                    }
 
                 } else {
                     // if(conversation.is_new && isJustRecived(this.g.startedAt.getTime(), conversation.timestamp)){
@@ -278,7 +272,8 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
             this.translatorService.initI18n().then((result) => {
                 this.logger.debug('[APP-COMP] »»»» APP-COMPONENT.TS initI18n result', result);
                 const browserLang = this.translatorService.getLanguage();
-                moment.locale(browserLang)
+                // moment.locale(browserLang)
+                dayjs.locale(browserLang)
                 this.translatorService.translate(this.g);
             }).then(() => {
                 /** INIT  */
@@ -321,12 +316,6 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
     }
     this.setStyleMap()
 
-    /**
-     * SUBSCRIPTION :
-     * Subscription to runtime changes in globals
-     * and save changes in localstorage
-    */
-    this.settingsSaverService.initialize();
     // ------------------------------- //
 
     // ------------------------------- //
@@ -350,7 +339,7 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
     // ========= begin:: SUBSCRIPTIONS ============//
-    private setAuthSubscription(){
+    private async setAuthSubscription(){
         this.logger.debug('[APP-COMP] setLoginSubscription : ');
         const that = this;
         
@@ -392,9 +381,16 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
                 that.g.singleConversation? null: that.startUI();
                 that.triggerOnAuthStateChanged(that.stateLoggedUser);
                 that.logger.debug('[APP-COMP]  1 - IMPOSTO STATO CONNESSO UTENTE ', autoStart);
-                that.typingService.initialize(this.g.tenant);
-                that.presenceService.initialize(this.g.tenant);
-                that.presenceService.setPresence(user.uid);
+                
+                
+
+                new Promise(async (resolve, reject)=> {
+                    that.typingService.initialize(this.g.tenant);
+                    await that.presenceService.initialize(this.g.tenant);
+                }).then(()=>{
+                    that.presenceService.setPresence(user.uid);
+                });
+
                 // this.initConversationsHandler(this.g.tenant, that.g.senderId);
                 /* If singleConversation mode is active wait to showWidget: do it later in initConversationsHandler */
                 if (autoStart && !that.g.singleConversation) { 
@@ -443,7 +439,6 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
                 this.g.setParameter('recipientId', null, false)
                 that.hideWidget();
                 // that.g.setParameter('isShown', false, true);
-                that.g.isLogout = true;
                 that.triggerOnAuthStateChanged('offline');
                 // that.triggerOnLoggedOut()
             }
@@ -836,7 +831,7 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
     }
 
 
-    private initConversationsHandler(tenant: string, senderId: string) {
+    private async initConversationsHandler(tenant: string, senderId: string) {
         this.logger.debug('[APP-COMP] initialize: ListConversationsComponent');
         const keys = ['YOU'];
         const translationMap = this.translateService.translateLanguage(keys);
@@ -848,8 +843,8 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
         this.logger.debug('[APP-COMP] tenant: ', tenant);
 
         // 1 - init chatConversationsHandler and  archviedConversationsHandler
-        this.conversationsHandlerService.initialize(tenant, senderId, translationMap)
-        this.archivedConversationsService.initialize(tenant, senderId, translationMap)
+        await this.conversationsHandlerService.initialize(tenant, senderId, translationMap)
+        await this.archivedConversationsService.initialize(tenant, senderId, translationMap)
         // 2 - get conversations from storage
         // this.chatConversationsHandler.getConversationsFromStorage();
         // 3 - get conversation from database with REST Api call if singleConversation mode is active and widget is Opened; otherwize show only widget and start conversation when launcher icon is clicked
@@ -1116,7 +1111,6 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
             this.hideWidget();
             // that.g.setParameter('isShown', false, true);
             this.appStorageService.removeItem('tiledeskToken');
-            this.g.isLogout = true;
             if (this.g.autoStart !== false) {
                 this.authenticate();
                 this.initAll();

package/src/app/app.module.ts

@@ -1,3 +1,4 @@
+import { DateAgoPipe } from './pipe/date-ago.pipe';
 import { EventsService } from './providers/events.service';
 
 // ************** COMPONENTS ************** //
@@ -57,9 +58,9 @@ import { environment } from 'src/environments/environment';
 
 //THIRD-PART MODULES
 import { TranslateModule } from '@ngx-translate/core';
-import { MomentModule } from 'ngx-moment';
+// import { MomentModule } from 'ngx-moment';
 import { PickerModule } from '@ctrl/ngx-emoji-mart';
-import { INGXLoggerMetadata, LoggerModule, NGXLogger, NgxLoggerLevel, NGXLoggerServerService, TOKEN_LOGGER_SERVER_SERVICE } from "ngx-logger";
+import { LoggerModule, NGXLogger, NgxLoggerLevel } from "ngx-logger";
 
 //DIRECTIVES
 import { HtmlEntitiesEncodePipe } from './pipe/html-entities-encode.pipe';
@@ -119,7 +120,6 @@ import { CHAT_ENGINE_MQTT, UPLOAD_ENGINE_NATIVE } from 'src/chat21-core/utils/co
 
 //STORAGE
 import { LocalSessionStorage } from 'src/chat21-core/providers/localSessionStorage';
-import { SettingsSaverService } from './providers/settings-saver.service';
 
 import { Globals } from './utils/globals';
 import { GlobalSettingsService } from './providers/global-settings.service';
@@ -283,6 +283,7 @@ export function uploadFactory(http: HttpClient, appConfig: AppConfigService, app
     /**DIRECTIVES */
     HtmlEntitiesEncodePipe,
     MarkedPipe,
+    DateAgoPipe,
     SafeHtmlPipe,
     LikeUnlikeComponent,
     TooltipDirective
@@ -294,7 +295,6 @@ export function uploadFactory(http: HttpClient, appConfig: AppConfigService, app
     HttpClientModule,
     FormsModule,
     ReactiveFormsModule,
-    MomentModule,
     PickerModule,
     TranslateModule.forRoot(//),
     {
@@ -319,7 +319,6 @@ export function uploadFactory(http: HttpClient, appConfig: AppConfigService, app
     Globals,
     Rules,
     GlobalSettingsService,
-    SettingsSaverService,
     EventsService,
     StarRatingWidgetService,
     {

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

@@ -131,13 +131,4 @@
     </div>
 
 
-</div>
-<!-- 
-<div *ngIf="isFileSelected" class="modal-page" [class.active]="true">
-    <tiledeskwidget-preview-loading-files
-        [arrayFilesLoad]="arrayFilesLoad"
-        (eventClose)="returnClose()" 
-        (eventSend)="returnSend()">
-    </tiledeskwidget-preview-loading-files>
-</div> 
--->
+</div>