@chat21/chat21-web-widget 5.0.95 → 5.1.0-rc.3

package/CHANGELOG.md

@@ -6,6 +6,14 @@
 ### **Copyrigth**: 
 *Tiledesk SRL*
 
+# 5.1.0-rc.3
+- **added**: angular 18
+
+# 5.1.0-rc.2
+- **added**: angular 17
+
+# 5.0.96
+
 # 5.0.95
 - **bug-fixed**: first message is fired twice ( from /event and from /messages with hiddenMesage)
 

package/Dockerfile

@@ -1,7 +1,7 @@
 ### STAGE 1: Build ###
 
 # We label our stage as ‘builder’
-FROM node:16.20.2-alpine3.18 as builder
+FROM node:18.19.1-alpine3.18 as builder
 
 COPY package.json package-lock.json ./
 

package/angular.json

@@ -15,13 +15,17 @@
       },
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:application",
           "options": {
-            "outputPath": "dist",
+            "outputPath": {
+              "base": "dist"
+            },
             "baseHref":"/",
             "index": "src/index.html",
-            "main": "src/main.ts",
-            "polyfills": "src/polyfills.ts",
+            "polyfills": [
+              "src/polyfills.ts",
+              "@angular/localize/init",
+            ],
             "tsConfig": "tsconfig.app.json",
             "assets": [
               "src/assets",
@@ -48,11 +52,8 @@
             "scripts": [
               "src/assets/js/mqtt/4.2.6/mqtt.min.js",
               "node_modules/bootstrap/dist/js/bootstrap.min.js",
-              "node_modules/popper.js/dist/umd/popper.min.js"
             ],
-            "vendorChunk": true,
             "extractLicenses": false,
-            "buildOptimizer": false,
             "allowedCommonJsDependencies": [
               "rxjs-compat",
               "idb",
@@ -62,7 +63,13 @@
             ],
             "sourceMap": true,
             "optimization": false,
-            "namedChunks": true
+            "namedChunks": true,
+            "browser": "src/main.ts",
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "."
+              ]
+            }
           },
           "configurations": {
             "prod": {
@@ -78,8 +85,6 @@
               "namedChunks": false,
               "aot": true,
               "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
               "budgets": [
                 {
                   "type": "initial",
@@ -105,8 +110,6 @@
               "namedChunks": false,
               "aot": true,
               "extractLicenses": true,
-              "vendorChunk": true,
-              "buildOptimizer": true,
               "budgets": [
                 {
                   "type": "initial",
@@ -125,13 +128,13 @@
           },
           "configurations": {
             "prod": {
-              "browserTarget": "widget:build:prod"
+              "buildTarget": "widget:build:prod"
             },
             "pre": {
-              "browserTarget": "widget:build:pre"
+              "buildTarget": "widget:build:pre"
             },
             "development": {
-              "browserTarget": "widget:build:development"
+              "buildTarget": "widget:build:development"
             }
           },
           "defaultConfiguration": "development"
@@ -139,7 +142,7 @@
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "widget:build"
+            "buildTarget": "widget:build"
           }
         },
         "test": {

package/deploy_amazon_beta.sh

@@ -2,7 +2,7 @@
 version=`node -e 'console.log(require("./package.json").version)'`
 echo "version $version"
 
-ng build --configuration="pre" --aot=true --base-href --build-optimizer=true
+ng build --configuration="pre" --aot=true --base-href
 
 
 # ########## --->>>> NATIVE-MQTT folder START <<<<<------ ########## #

package/deploy_amazon_prod.sh

@@ -3,7 +3,7 @@ version=`node -e 'console.log(require("./package.json").version)'`
 echo "version $version"
 
 # --build-optimizer=false if localstorage is disabled (webview) appears https://github.com/firebase/angularfire/issues/970
-ng build --configuration="prod" --aot=true   --build-optimizer=true --vendor-chunk=true
+ng build --configuration="prod" --aot=true
 
 #### FIREBASE #####
 # cd dist

package/deploy_beta.sh

@@ -2,19 +2,9 @@
 version=`node -e 'console.log(require("./package.json").version)'`
 echo "version $version"
 
-
-# Get curent branch name
-current_branch=$(git rev-parse --abbrev-ref HEAD)
-remote_name=$(git config --get branch.$current_branch.remote)
-
-## Push commit to git
-git add .
-git commit -m "version added: ### $version"
-git push "$remote_name" "$current_branch"
-
 if [ "$version" != "" ]; then
     git tag -a "$version" -m "`git log -1 --format=%s`"
     echo "Created a new tag, $version"
-    git push --tags
+    git push remoteTiledesk --tags
     npm publish
 fi

package/deploy_prod.sh

@@ -4,18 +4,9 @@ ECHO "____________WIDGET-V5______________"
 echo "CREATING TAG ON GIT FOR version: $version"
 # echo "version $version"
 
-# Get curent branch name
-current_branch=$(git rev-parse --abbrev-ref HEAD)
-remote_name=$(git config --get branch.$current_branch.remote)
-
-## Push commit to git
-git add .
-git commit -m "version added: ### $version"
-git push "$remote_name" "$current_branch"
-
 if [ "$version" != "" ]; then
     git tag -a "$version" -m "`git log -1 --format=%s`"
     echo "Created a new tag, $version"
-    git push --tags
+    git push remoteTiledesk --tags
     npm publish
 fi

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@chat21/chat21-web-widget",
   "author": "Tiledesk SRL",
-  "version": "5.0.95",
+  "version": "5.1.0-rc.3",
   "license": "MIT",
   "homepage": "https://www.tiledesk.com",
   "repository": {
@@ -19,20 +19,19 @@
   },
   "private": false,
   "dependencies": {
-    "@angular/animations": "^15.0.4",
-    "@angular/cdk": "^15.0.3",
-    "@angular/common": "^15.0.4",
-    "@angular/compiler": "^15.0.4",
-    "@angular/core": "^15.0.4",
-    "@angular/forms": "^15.0.4",
-    "@angular/localize": "^15.0.4",
-    "@angular/platform-browser": "^15.0.4",
-    "@angular/platform-browser-dynamic": "^15.0.4",
-    "@angular/router": "^15.0.4",
-    "@ctrl/ngx-emoji-mart": "^7.1.0",
-    "@ngx-translate/core": "^14.0.0",
-    "@ngx-translate/http-loader": "^4.0.0",
-    "@popperjs/core": "^2.11.5",
+    "@angular/animations": "^18.2.13",
+    "@angular/cdk": "^17.3.10",
+    "@angular/common": "^18.2.13",
+    "@angular/compiler": "^18.2.13",
+    "@angular/core": "^18.2.13",
+    "@angular/forms": "^18.2.13",
+    "@angular/localize": "^18.2.13",
+    "@angular/platform-browser": "^18.2.13",
+    "@angular/platform-browser-dynamic": "^18.2.13",
+    "@angular/router": "^18.2.13",
+    "@ctrl/ngx-emoji-mart": "^9.2.0",
+    "@ngx-translate/core": "^16.0.4",
+    "@ngx-translate/http-loader": "^16.0.1",
     "@types/marked": "^4.0.3",
     "accept-language-parser": "^1.5.0",
     "bootstrap": "^5.1.3",
@@ -42,19 +41,18 @@
     "humanize-duration-ts": "^2.1.1",
     "marked": "^4.0.16",
     "ngx-logger": "^5.0.11",
-    "popper.js": "^1.16.1",
     "replace": "^1.2.2",
-    "rxjs": "~6.5.1",
+    "rxjs": "^7.8.2",
     "source-map-explorer": "^2.5.3",
     "tslib": "^2.0.0",
     "uuid": "^8.3.2",
-    "zone.js": "~0.11.4"
+    "zone.js": "~0.14.10"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^15.0.4",
-    "@angular/cli": "^15.0.4",
-    "@angular/compiler-cli": "^15.0.4",
-    "@angular/language-service": "^15.0.4",
+    "@angular-devkit/build-angular": "^18.2.19",
+    "@angular/cli": "^18.2.19",
+    "@angular/compiler-cli": "^18.2.13",
+    "@angular/language-service": "^18.2.13",
     "@types/jasmine": "^3.6.11",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "^12.11.1",
@@ -70,6 +68,6 @@
     "protractor": "~7.0.0",
     "ts-node": "~7.0.0",
     "tslint": "~6.1.0",
-    "typescript": "^4.8.4"
+    "typescript": "~5.4"
   }
 }

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

@@ -3,7 +3,7 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { AppComponent } from './app.component';
 import { GlobalSettingsService } from './providers/global-settings.service';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { AppStorageService } from 'src/chat21-core/providers/abstract/app-storage.service';
 import { TranslatorService } from './providers/translator.service';
 import { TranslateModule } from '@ngx-translate/core';
@@ -23,6 +23,7 @@ import { ChatManager } from 'src/chat21-core/providers/chat-manager';
 import { NGXLogger } from 'ngx-logger';
 import { CustomLogger } from 'src/chat21-core/providers/logger/customLogger';
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
  
 describe('AppComponent', () => {
   let component: AppComponent;
@@ -32,12 +33,12 @@ describe('AppComponent', () => {
   
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [
-        RouterTestingModule,
-        HttpClientTestingModule,
-        TranslateModule.forRoot(),
-      ],
-      providers:[
+    declarations: [
+        AppComponent
+    ],
+    imports: [RouterTestingModule,
+        TranslateModule.forRoot()],
+    providers: [
         Triggerhandler,
         GlobalSettingsService,
         AppStorageService,
@@ -54,12 +55,11 @@ describe('AppComponent', () => {
         ImageRepoService,
         TypingService,
         PresenceService,
-        UploadService
-      ],
-      declarations: [
-        AppComponent
-      ],
-    }).compileComponents();
+        UploadService,
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting()
+    ]
+}).compileComponents();
   }));
 
   beforeEach(() => {

package/src/app/app.module.ts

@@ -54,7 +54,7 @@ import { AppConfigService } from './providers/app-config.service';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { APP_INITIALIZER, NgModule } from '@angular/core';
-import { HttpClient, HttpClientModule } from '@angular/common/http';
+import { HttpClient, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { environment } from 'src/environments/environment';
 
@@ -303,21 +303,18 @@ export function uploadFactory(http: HttpClient, appConfig: AppConfigService, app
     NetworkOfflineComponent,
     ConfirmCloseComponent
   ],
-  imports: [
-    BrowserModule,
+  imports: [BrowserModule,
     BrowserAnimationsModule,
-    // AppRoutingModule,
-    HttpClientModule,
     FormsModule,
     ReactiveFormsModule,
     PickerModule,
     TranslateModule.forRoot(//),
     {
-      // loader: {
-      //   provide: TranslateLoader,
-      //   useFactory: (createTranslateLoader),
-      //   deps: [HttpClient]
-      // }
+    // loader: {
+    //   provide: TranslateLoader,
+    //   useFactory: (createTranslateLoader),
+    //   deps: [HttpClient]
+    // }
     }),
     LoggerModule.forRoot({
       level: NgxLoggerLevel.DEBUG,
@@ -349,7 +346,7 @@ export function uploadFactory(http: HttpClient, appConfig: AppConfigService, app
     {
       provide: MessagingAuthService,
       useFactory: authenticationFactory,
-      deps: [HttpClient, AppConfigService, Chat21Service, AppStorageService ]
+      deps: [HttpClient, AppConfigService, Chat21Service, AppStorageService]
     },
     {
       provide: ConversationsHandlerService,
@@ -389,7 +386,7 @@ export function uploadFactory(http: HttpClient, appConfig: AppConfigService, app
     {
       provide: UploadService,
       useFactory: uploadFactory,
-      deps: [HttpClient, AppConfigService, AppStorageService ]
+      deps: [HttpClient, AppConfigService, AppStorageService]
     },
     TiledeskAuthService,
     TiledeskRequestsService,
@@ -398,7 +395,8 @@ export function uploadFactory(http: HttpClient, appConfig: AppConfigService, app
     Triggerhandler,
     WaitingService,
     ScriptService,
-    BrandService
+    BrandService,
+    provideHttpClient(withInterceptorsFromDi())
   ],
   bootstrap: [AppComponent]
 })

package/src/app/component/conversation-detail/conversation/conversation.component.spec.ts

@@ -1,7 +1,7 @@
 import { TiledeskRequestsService } from './../../../../chat21-core/providers/tiledesk/tiledesk-requests.service';
 import { StarRatingWidgetService } from './../../../providers/star-rating-widget.service';
 import { StarRatingWidgetComponent } from './../../star-rating-widget/star-rating-widget.component';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
 
 import { Triggerhandler } from './../../../../chat21-core/utils/triggerHandler';
 import { AppComponent } from './../../../app.component';
@@ -13,7 +13,6 @@ import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { ConversationComponent } from './conversation.component';
 import { GlobalSettingsService } from '../../../providers/global-settings.service';
-import { SettingsSaverService } from '../../../providers/settings-saver.service';
 import { TranslatorService } from '../../../providers/translator.service';
 
 import { AppStorageService } from '../../../../chat21-core/providers/abstract/app-storage.service';
@@ -33,6 +32,7 @@ import { TranslateModule } from '@ngx-translate/core';
 import { NGXLogger } from 'ngx-logger';
 import { CustomLogger } from 'src/chat21-core/providers/logger/customLogger';
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 
 describe('ConversationComponent', () => {
   let component: ConversationComponent;
@@ -43,18 +43,15 @@ describe('ConversationComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ ConversationComponent ],
-      imports: [
-        HttpClientTestingModule,
-        TranslateModule.forRoot(),
-      ],
-      providers: [
+    declarations: [ConversationComponent],
+    schemas: [NO_ERRORS_SCHEMA],
+    imports: [TranslateModule.forRoot()],
+    providers: [
         Globals,
         AppConfigService,
         AppComponent,
         { provide: ElementRef, useClass: MockElementRef },
         GlobalSettingsService,
-        SettingsSaverService,
         Triggerhandler,
         TranslatorService,
         AppConfigService,
@@ -72,10 +69,11 @@ describe('ConversationComponent', () => {
         UploadService,
         StarRatingWidgetService,
         TiledeskRequestsService,
-        NGXLogger
-      ],
-      schemas: [NO_ERRORS_SCHEMA]
-    })
+        NGXLogger,
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting()
+    ]
+})
     .compileComponents();
   }));
 

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

@@ -118,7 +118,7 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
 
   // devo inserirle nel globals
   subscriptions: Array<any> = [];
-  private unsubscribe$: Subject<any> = new Subject<any>();
+  private unsubscribe$: Subject<void> = new Subject<void>();
   showMessageWelcome: boolean;
 
   // ========= begin::agent availability

package/src/app/component/conversation-detail/conversation-header/conversation-header.component.spec.ts

@@ -1,8 +1,8 @@
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { AppConfigService } from './../../../providers/app-config.service';
 import { Globals } from './../../../utils/globals';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { async, ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { ConversationHeaderComponent } from './conversation-header.component';
 import { TypingService } from '../../../../chat21-core/providers/abstract/typing.service';
@@ -18,17 +18,16 @@ describe('ConversationHeaderComponent', () => {
   
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ ConversationHeaderComponent ],
-      imports: [
-        HttpClientModule
-      ],
-      providers: [ 
+    declarations: [ConversationHeaderComponent],
+    schemas: [NO_ERRORS_SCHEMA],
+    imports: [],
+    providers: [
         Globals,
         TypingService,
-        AppConfigService
-      ],
-      schemas: [NO_ERRORS_SCHEMA],
-    })
+        AppConfigService,
+        provideHttpClient(withInterceptorsFromDi())
+    ]
+})
     .compileComponents();
   }));
 

package/src/app/component/eyeeye-catcher-card/eyeeye-catcher-card.component.ts

@@ -96,7 +96,6 @@ export class EyeeyeCatcherCardComponent implements OnInit {
       title = this.g.calloutTitle.trim();
     }
     this.title = title;
-    const emojiRegex = require('emoji-regex');
     const regex = emojiRegex();
     let match: any;
     // this.logger.debug('[EYEEYE-CATCHER-CARD]-->regex, emojiRegex', regex, emojiRegex)
@@ -163,3 +162,8 @@ export class EyeeyeCatcherCardComponent implements OnInit {
   //     this.displayEyeCatcherCardCloseBtnIsMobileWrapper = 'none';
   // }
 }
+
+
+export default function emojiRegex(): RegExp {
+  return /(?:\uD83C[\uDFFB-\uDFFF])|(?:[\u2700-\u27BF])|(?:\u24C2)|(?:[\u1F680-\u1F6FF])/g;
+}

package/src/app/component/home-conversations/home-conversations.component.html

@@ -36,7 +36,7 @@
     
     
     <!--CASE: no conversations EXIST - >1 agents is available -->
-    <div *ngIf="(!listConversations || listConversations.length == 0) && availableAgents && availableAgents.length > 1 && g.showAvailableAgents === true" style="margin: 20px 30px;"> 
+    <div *ngIf="(!listConversations || listConversations.length == 0) && availableAgents && availableAgents.length > 1 && g.showAvailableAgents === true" style="display: flex; margin: 20px 30px;"> 
       <div *ngFor="let agent of availableAgents" class="c21-pallozzo">
           <div class="c21-ball" [ngStyle] = "{ 'background-color':setColorFromString(agent.firstname) }" >
             <span class="c21-ball-label">{{avatarPlaceholder(agent.firstname)}}</span>

package/src/app/component/home-conversations/home-conversations.component.spec.ts

@@ -1,6 +1,6 @@
 import { CustomTranslateService } from './../../../chat21-core/providers/custom-translate.service';
 import { TranslatorService } from './../../providers/translator.service';
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { AppConfigService } from './../../providers/app-config.service';
 import { WaitingService } from './../../providers/waiting.service';
 import { ChatManager } from './../../../chat21-core/providers/chat-manager';
@@ -25,12 +25,10 @@ describe('HomeConversationsComponent', () => {
   
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ HomeConversationsComponent ],
-      imports: [
-        HttpClientModule,
-        TranslateModule.forRoot()
-      ],
-      providers: [
+    declarations: [HomeConversationsComponent],
+    schemas: [NO_ERRORS_SCHEMA],
+    imports: [TranslateModule.forRoot()],
+    providers: [
         Globals,
         ImageRepoService,
         ChatManager,
@@ -39,10 +37,10 @@ describe('HomeConversationsComponent', () => {
         WaitingService,
         AppConfigService,
         TranslatorService,
-        CustomTranslateService
-      ],
-      schemas: [NO_ERRORS_SCHEMA]
-    })
+        CustomTranslateService,
+        provideHttpClient(withInterceptorsFromDi())
+    ]
+})
     .compileComponents();
   }));
 

package/src/app/component/home-conversations/home-conversations.component.ts

@@ -67,7 +67,7 @@ export class HomeConversationsComponent implements OnInit, OnDestroy {
   availableAgents: Array<UserAgent> = [];
   // ========= end:: variabili del componente ======== //
 
-  waitingTime: Number;
+  waitingTime: number;
   langService: HumanizeDurationLanguage = new HumanizeDurationLanguage();
   humanizer: HumanizeDuration;
   humanWaitingTime: string;

package/src/app/component/star-rating-widget/star-rating-widget.component.spec.ts

@@ -1,27 +1,26 @@
 import { AppConfigService } from './../../providers/app-config.service';
 import { StarRatingWidgetService } from './../../providers/star-rating-widget.service';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { StarRatingWidgetComponent } from './star-rating-widget.component';
 import { Globals } from '../../utils/globals';
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 
 describe('StarRatingWidgetComponent', () => {
   let component: StarRatingWidgetComponent;
   let fixture: ComponentFixture<StarRatingWidgetComponent>;
 
-  beforeEach(async(() => {
+  beforeEach((() => {
     TestBed.configureTestingModule({
-      declarations: [ StarRatingWidgetComponent ],
-      imports: [
-        HttpClientModule
-      ],
-      providers: [
+    declarations: [StarRatingWidgetComponent],
+    imports: [],
+    providers: [
         Globals,
         AppConfigService,
-        StarRatingWidgetService
-      ]
-    })
+        StarRatingWidgetService,
+        provideHttpClient(withInterceptorsFromDi())
+    ]
+})
     .compileComponents();
   }));
 

package/src/app/pipe/date-ago.pipe.ts

@@ -1,7 +1,7 @@
 import { Pipe, PipeTransform } from '@angular/core';
 
-import * as dayjs from 'dayjs'
-import * as relativeTime from 'dayjs/plugin/relativeTime'
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
 dayjs.extend(relativeTime)
 
 @Pipe({

package/src/app/providers/app-config.service.spec.ts

@@ -1,4 +1,4 @@
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { TestBed } from '@angular/core/testing';
 import { Globals } from '../utils/globals';
 
@@ -6,13 +6,12 @@ import { AppConfigService } from './app-config.service';
 
 describe('AppConfigService', () => {
   beforeEach(() => TestBed.configureTestingModule({
-    imports: [
-      HttpClientModule,
-    ],
+    imports: [],
     providers: [
-      Globals
+        Globals,
+        provideHttpClient(withInterceptorsFromDi())
     ]
-  }));
+}));
 
   it('should be created', () => {
     const service: AppConfigService = TestBed.get(AppConfigService);

package/src/app/providers/global-settings.service.spec.ts

@@ -1,5 +1,5 @@
 import { Globals } from './../utils/globals';
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { TestBed, inject } from '@angular/core/testing';
 import { AppStorageService } from '../../chat21-core/providers/abstract/app-storage.service';
 import { AppConfigService } from './app-config.service';
@@ -9,16 +9,15 @@ import { GlobalSettingsService } from './global-settings.service';
 describe('GlobalSettingsService', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [
-        HttpClientModule,
-      ],
-      providers: [
+    imports: [],
+    providers: [
         GlobalSettingsService,
         AppStorageService,
         AppConfigService,
-        Globals
-      ]
-    });
+        Globals,
+        provideHttpClient(withInterceptorsFromDi())
+    ]
+});
   });
 
   it('should be created', inject([GlobalSettingsService], (service: GlobalSettingsService) => {

package/src/app/providers/star-rating-widget.service.spec.ts

@@ -3,20 +3,19 @@ import { Globals } from '../utils/globals';
 import { TestBed, inject } from '@angular/core/testing';
 
 import { StarRatingWidgetService } from './star-rating-widget.service';
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 
 describe('StarRatingWidgetService', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [
-        HttpClientModule
-      ],
-      providers: [
+    imports: [],
+    providers: [
         StarRatingWidgetService,
         Globals,
-        AppConfigService
-      ]
-    });
+        AppConfigService,
+        provideHttpClient(withInterceptorsFromDi())
+    ]
+});
   });
 
   it('should be created', inject([StarRatingWidgetService], (service: StarRatingWidgetService) => {

package/src/app/providers/translator.service.spec.ts

@@ -1,4 +1,4 @@
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { AppConfigService } from './app-config.service';
 import { Globals } from './../utils/globals';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
@@ -9,16 +9,14 @@ import { TranslatorService } from './translator.service';
 describe('TranslatorService', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [
-        HttpClientModule,
-        TranslateModule.forRoot(),
-      ],
-      providers: [
+    imports: [TranslateModule.forRoot()],
+    providers: [
         TranslatorService,
         Globals,
-        AppConfigService
-      ]
-    });
+        AppConfigService,
+        provideHttpClient(withInterceptorsFromDi())
+    ]
+});
   });
 
   it('should be created', inject([TranslatorService], (service: TranslatorService) => {

package/src/app/providers/waiting.service.spec.ts

@@ -1,4 +1,4 @@
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { AppConfigService } from './app-config.service';
 import { Globals } from './../utils/globals';
 import { TestBed, inject } from '@angular/core/testing';
@@ -8,15 +8,14 @@ import { WaitingService } from './waiting.service';
 describe('WaitingService', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [
-        HttpClientModule
-      ],
-      providers: [
+    imports: [],
+    providers: [
         WaitingService,
         Globals,
-        AppConfigService
-      ]
-    });
+        AppConfigService,
+        provideHttpClient(withInterceptorsFromDi())
+    ]
+});
   });
 
   it('should be created', inject([WaitingService], (service: WaitingService) => {

package/src/app/sass/animations.scss

@@ -1,3 +1,4 @@
+@import 'variables';
 
 /**
  * ----------------------------------------

package/src/build_launch.js

@@ -7,11 +7,12 @@ initReplacement()
 function initReplacement(){
     console.log('init replacement HEREEE')
     fileToBeReplaced = {
-        'main' : {name: 'main', extension: '.js', regex: /(?<=\/main\.)(.+?)(?=\.js|$)/},
-        'runtime' : {name: 'runtime', extension: '.js', regex: /(?<=\/runtime\.)(.+?)(?=\.js|$)/},
-        'polyfills' : {name: 'polyfills', extension: '.js', regex: /(?<=\/polyfills\.)(.+?)(?=\.js|$)/},
-        'vendor' : {name: 'vendor', extension: '.js', regex: /(?<=\/vendor\.)(.+?)(?=\.js|$)/},
-        'styles' : {name: 'styles', extension: '.css', regex: /(?<=\/styles\.)(.+?)(?=\.css|$)/},
+        'main' : {name: 'main', extension: '.js', regex: /(?<=\/main-)(.+?)(?=\.js|$)/},
+        'scripts' : {name: 'scripts', extension: '.js', regex: /(?<=\/scripts-)(.+?)(?=\.js|$)/},
+        // 'runtime' : {name: 'runtime', extension: '.js', regex: /(?<=\/runtime\.)(.+?)(?=\.js|$)/},
+        'polyfills' : {name: 'polyfills', extension: '.js', regex: /(?<=\/polyfills-)(.+?)(?=\.js|$)/},
+        // 'vendor' : {name: 'vendor', extension: '.js', regex: /(?<=\/vendor\.)(.+?)(?=\.js|$)/},
+        'styles' : {name: 'styles', extension: '.css', regex: /(?<=\/styles-)(.+?)(?=\.css|$)/},
     }
 
     Object.keys(fileToBeReplaced).forEach(key => {
@@ -46,7 +47,7 @@ function initReplacement(){
 
 function replaceFile(name, element){
     let hashCode = ''
-    glob("./dist/"+name+"*", function (er, files) {
+    glob("./dist/browser/"+name+"*", function (er, files) {
         // files is an array of filenames.
         // If the `nonull` option is set, and nothing
         // was found, then files is ["**/*.js"]
@@ -56,8 +57,8 @@ function replaceFile(name, element){
         console.log('hashhh',hashCode ,name )
         replace({
             regex: '{{'+ name + '}}'+ element.extension,
-            replacement: name + "." + hashCode + element.extension ,
-            paths: [ './dist/launch.js' ],
+            replacement: name + "-" + hashCode + element.extension ,
+            paths: [ './dist/browser/launch.js' ],
             recursive: true,
             silent: false,
         }, (error,changedFiles)=>{

package/src/chat21-core/providers/tiledesk/tiledesk-auth.service.spec.ts

@@ -1,7 +1,7 @@
-import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { HttpClient, HttpHeaders, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { TestBed } from '@angular/core/testing';
 import { AppStorageService } from '../abstract/app-storage.service';
-import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+import { HttpTestingController, provideHttpClientTesting } from '@angular/common/http/testing';
 import { TiledeskAuthService } from './tiledesk-auth.service';
 import { NGXLogger } from 'ngx-logger';
 import { CustomLogger } from '../logger/customLogger';
@@ -17,13 +17,14 @@ describe('TiledeskAuthService', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      providers: [
+    imports: [],
+    providers: [
         TiledeskAuthService,
         AppStorageService,
-        // {provide: HttpClient, useValue: httpClientMock}
-      ],
-      imports: [HttpClientTestingModule]
-    })
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+    ]
+})
 
     // httpClientMock = jasmine.createSpyObj(['getAllObjects']);
     httpMock = TestBed.inject(HttpTestingController);

package/src/chat21-core/providers/tiledesk/tiledesk-requests.service.spec.ts

@@ -1,17 +1,21 @@
-import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { TestBed, inject } from '@angular/core/testing';
 import { AppStorageService } from '../abstract/app-storage.service';
 
 import { TiledeskRequestsService } from './tiledesk-requests.service';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 
 describe('TiledeskRequestsService', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
-      providers: [
-        TiledeskRequestsService, 
-        AppStorageService],
-      imports: [HttpClientTestingModule]
-    });
+    imports: [],
+    providers: [
+        TiledeskRequestsService,
+        AppStorageService,
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting()
+    ]
+});
   });
 
   it('should be created', inject([TiledeskRequestsService], (service: TiledeskRequestsService) => {

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

@@ -1,5 +1,5 @@
-import * as dayjs from 'dayjs'
-import * as duration from 'dayjs/plugin/duration'
+import dayjs from 'dayjs';
+import duration from 'dayjs/plugin/duration'
 dayjs.extend(duration)
 // tslint:disable-next-line:max-line-length
 

package/src/launch.js

@@ -79,10 +79,11 @@ function loadIframe(tiledeskScriptBaseLocation) {
     srcTileDesk += '</head>';
     srcTileDesk += '<body>';
     srcTileDesk += '<chat-root></chat-root>';
-    srcTileDesk += '<script async type="text/javascript" src="'+tiledeskScriptBaseLocation+'/runtime.js"></script>';
-    srcTileDesk += '<script async type="text/javascript" src="'+tiledeskScriptBaseLocation+'/polyfills.js"></script>';
-    srcTileDesk += '<script async type="text/javascript" src="'+tiledeskScriptBaseLocation+'/vendor.js"></script>';
-    srcTileDesk += '<script async type="text/javascript" src="'+tiledeskScriptBaseLocation+'/main.js"></script>';
+    // srcTileDesk += '<script async type="text/javascript" src="'+tiledeskScriptBaseLocation+'/runtime.js"></script>';
+    srcTileDesk += '<script type="module" async type="text/javascript" src="'+tiledeskScriptBaseLocation+'/polyfills.js"></script>';
+    // srcTileDesk += '<script async type="text/javascript" src="'+tiledeskScriptBaseLocation+'/vendor.js"></script>';
+    srcTileDesk += '<script type="module" async type="text/javascript" src="'+tiledeskScriptBaseLocation+'/main.js"></script>';
+    srcTileDesk += '<script type="module" async type="text/javascript" src="'+tiledeskScriptBaseLocation+'/scripts.js"></script>';
     srcTileDesk += '<link type="text/css" rel="stylesheet" href="'+tiledeskScriptBaseLocation+'/styles.css" media="all"></link>';
     srcTileDesk += '</body>';
     srcTileDesk += '</html>';
@@ -154,9 +155,9 @@ function loadIframe(tiledeskScriptBaseLocation) {
     window.tiledesk.on('onNewConversation', function(event_data) {
         // console.log("test-custom-auth.html onNewConversation >>>",event_data);
         const tiledeskToken = window.tiledesk.angularcomponent.component.g.tiledeskToken;
-        const hiddenMessage = window.tiledesk.angularcomponent.component.g.hiddenMessage;
         
         // if hiddenMessage is present, do not call /events endpoint because conversation is created by /messages endpoint
+        const hiddenMessage = window.tiledesk.angularcomponent.component.g.hiddenMessage;
         if(hiddenMessage){
           return;
         }

package/src/launch_template.js

@@ -80,10 +80,11 @@ function loadIframe(tiledeskScriptBaseLocation) {
     srcTileDesk += '</head>';
     srcTileDesk += '<body>';
     srcTileDesk += '<chat-root></chat-root>';
-    srcTileDesk += '<script async type="text/javascript" src="'+tiledeskScriptBaseLocation+'/{{runtime}}.js"></script>';
-    srcTileDesk += '<script async type="text/javascript" src="'+tiledeskScriptBaseLocation+'/{{polyfills}}.js"></script>';
-    srcTileDesk += '<script async type="text/javascript" src="'+tiledeskScriptBaseLocation+'/{{vendor}}.js"></script>';
-    srcTileDesk += '<script async type="text/javascript" src="'+tiledeskScriptBaseLocation+'/{{main}}.js"></script>';
+    // srcTileDesk += '<script async type="text/javascript" src="'+tiledeskScriptBaseLocation+'/{{runtime}}.js"></script>';
+    srcTileDesk += '<script type="module" async type="text/javascript" src="'+tiledeskScriptBaseLocation+'/{{polyfills}}.js"></script>';
+    // srcTileDesk += '<script async type="text/javascript" src="'+tiledeskScriptBaseLocation+'/{{vendor}}.js"></script>';
+    srcTileDesk += '<script type="module" async type="text/javascript" src="'+tiledeskScriptBaseLocation+'/{{main}}.js"></script>';
+    srcTileDesk += '<script type="module" async type="text/javascript" src="'+tiledeskScriptBaseLocation+'/{{scripts}}.js"></script>';
     srcTileDesk += '<link type="text/css" rel="stylesheet" href="'+tiledeskScriptBaseLocation+'/{{styles}}.css" media="all"></link>';
     srcTileDesk += '</body>';
     srcTileDesk += '</html>';
@@ -155,6 +156,12 @@ function loadIframe(tiledeskScriptBaseLocation) {
     window.tiledesk.on('onNewConversation', function(event_data) {
         // console.log("test-custom-auth.html onNewConversation >>>",event_data);
         const tiledeskToken = window.tiledesk.angularcomponent.component.g.tiledeskToken;
+
+        // if hiddenMessage is present, do not call /events endpoint because conversation is created by /messages endpoint
+        const hiddenMessage = window.tiledesk.angularcomponent.component.g.hiddenMessage;
+        if(hiddenMessage){
+          return;
+        }
         // console.log(">>>> tiledeskToken >>>> ",event_data.detail.appConfigs.apiUrl+event_data.detail.default_settings.projectid);
         if(tiledeskToken) {
           var httpRequest = createCORSRequest('POST', event_data.detail.appConfigs.apiUrl+event_data.detail.default_settings.projectid+'/events',true); //set async to false because loadParams must return when the get is complete

package/src/polyfills.ts

@@ -46,7 +46,7 @@
  * Zone JS is required by default for Angular itself.
  */
 // import './zone-flag';
-import 'zone.js/dist/zone';  // Included with Angular CLI.
+import 'zone.js';  // Included with Angular CLI.
 
 
 /***************************************************************************************************

package/tsconfig.json

@@ -5,7 +5,7 @@
     "outDir": "./dist/out-tsc",
     "sourceMap": true,
     "declaration": false,
-    "downlevelIteration": true,
+    "esModuleInterop": true,
     "experimentalDecorators": true,
     "module": "es2020",
     "moduleResolution": "node",
@@ -23,7 +23,6 @@
       "dom"
     ],
     "resolveJsonModule": true,
-    "allowSyntheticDefaultImports": true,
   },
   "skipLibCheck": true,
   "angularCompilerOptions": {