@chat21/chat21-web-widget 5.0.73 → 5.0.74-rc.4

package/CHANGELOG.md

@@ -1,4 +1,21 @@
-# chat21-web-widget ver 5.0
+# **CHAT21-WEB-WIDGET - Changelog** ver 5.0
+
+### **Authors**: 
+    *Gabriele Panico*
+    *Dario De Pascalis* 
+### **Copyrigth**: *Tiledesk SRL*
+
+### 5.0.74-rc.4
+- added: clearStorage method to index-dev.html file
+
+### 5.0.74-rc.3
+- added: brand-service and BrandResources class to manage resources
+
+### 5.0.74-rc.2
+- added: clearStorage public method from external iframe
+
+### 5.0.74-rc.1
+- minor improvement
 
 ### 5.0.73 in PROD
 

package/angular.json

@@ -27,6 +27,7 @@
               "src/assets",
               "src/test.html",
               "src/test-new.html",
+              "src/test-custom-authentication.html",
               "src/test-custom-auth.html",
               "src/tiledesk.js",
               "src/launch.js",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@chat21/chat21-web-widget",
   "author": "Tiledesk SRL",
-  "version": "5.0.73",
+  "version": "5.0.74-rc.4",
   "license": "MIT",
   "homepage": "https://www.tiledesk.com",
   "repository": {

package/src/app/app.component.ts

@@ -944,7 +944,7 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
      * 2 - remove user in firebase
     */
     signOut(): Promise<boolean> {
-        this.logger.debug('[APP-COMP] SIGNOUT');
+        this.logger.debug('[APP-COMP] SIGNOUT', this.g.isLogged);
         if (this.g.isLogged === true) {
             this.logger.debug('[APP-COMP] prima ero loggato allora mi sloggo!');
             this.g.setIsOpen(false);
@@ -960,6 +960,11 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
         }
     }
 
+    clearStorage(){
+        this.logger.debug('[APP-COMP] clearStorage');
+        this.appStorageService.clear();
+    }
+
     /** show widget */
     private showWidget() {
         this.logger.debug('[APP-COMP] show widget--> autoStart:', this.g.autoStart, 'startHidden', this.g.startHidden, 'isShown', this.g.isShown)
@@ -1411,6 +1416,13 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
                 });
             };
 
+             /** set logout */
+             windowContext['tiledesk'].clearStorage = function (): Promise<boolean> {
+                return ngZone.run(() => {
+                    return windowContext['tiledesk']['angularcomponent'].component.clearStorage();
+                });
+            };
+
             /** show callout */
             windowContext['tiledesk'].showCallout = function () {
                 ngZone.run(() => {

package/src/app/app.module.ts

@@ -132,16 +132,18 @@ import { LikeUnlikeComponent } from './component/message/like-unlike/like-unlike
 import { Rules } from './utils/rules';
 import { ScriptService } from 'src/chat21-core/providers/scripts/script.service';
 import { CarouselComponent } from './component/message/carousel/carousel.component';
+import { BrandService } from './providers/brand.service';
 
 
 
-const appInitializerFn = (appConfig: AppConfigService, logger: NGXLogger) => {
-  return () => {
+const appInitializerFn = (appConfig: AppConfigService, brandService: BrandService, logger: NGXLogger) => {
+  return async() => {
     let customLogger = new CustomLogger(logger)
     LoggerInstance.setInstance(customLogger)
     if (environment.remoteConfig) {
-      return appConfig.loadAppConfig();
+      await appConfig.loadAppConfig();
     }
+    await brandService.loadBrand();
   };
 };
 
@@ -331,7 +333,7 @@ export function uploadFactory(http: HttpClient, appConfig: AppConfigService, app
       provide: APP_INITIALIZER,
       useFactory: appInitializerFn,
       multi: true,
-      deps: [AppConfigService, NGXLogger]
+      deps: [AppConfigService, BrandService, NGXLogger]
     },
     {
       provide: AppStorageService,
@@ -388,7 +390,8 @@ export function uploadFactory(http: HttpClient, appConfig: AppConfigService, app
     CustomTranslateService,
     Triggerhandler,
     WaitingService,
-    ScriptService
+    ScriptService,
+    BrandService
   ],
   bootstrap: [AppComponent]
 })

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

@@ -27,8 +27,8 @@
     <div class="c21-content" #scrollMePreview id="scroll-me-preview">
         <chat-image *ngIf="fileSelected"
           [metadata]="fileSelected"
-          [width]="fileSelected?.width"
-          [height]="fileSelected?.height"
+          [width]="sizeImage?.width"
+          [height]="sizeImage?.height"
           (onImageRendered)="onImageRenderedFN($event)">
         </chat-image>
         <div id="img-preview-file-extension">{{ file_extension }} </div>

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

@@ -40,6 +40,7 @@ export class ConversationPreviewComponent implements OnInit {
   firstScroll = true;
   // ========= end:: gestione scroll view messaggi ======= //
 
+  sizeImage : { width: number, height: number}
 
   public logger: LoggerService = LoggerInstance.getInstance()
   constructor(private sanitizer: DomSanitizer) { }
@@ -64,6 +65,7 @@ export class ConversationPreviewComponent implements OnInit {
   getMetadataSize(metadata): {width, height} {
     const MAX_WIDTH_IMAGES_PREVIEW = 230
     const MAX_HEIGHT_IMAGES_PREIEW = 150
+    console.log('PREVIEW - getMetadataSize metadata', metadata)
     if(metadata.width === undefined){
       metadata.width= MAX_WIDTH_IMAGES_PREVIEW
     }
@@ -94,6 +96,7 @@ export class ConversationPreviewComponent implements OnInit {
       sizeImage.width = MAX_HEIGHT_IMAGES_PREIEW / ratio;
       sizeImage.height = MAX_HEIGHT_IMAGES_PREIEW ;
     }
+    console.log('PREVIEW - getMetadataSize return sizeimage', sizeImage)
     return sizeImage; // h.toString();
   }
   
@@ -108,7 +111,8 @@ export class ConversationPreviewComponent implements OnInit {
       this.logger.log('[LOADER-PREVIEW-PAGE] - readAsDataURL - USE CASE IMAGE - IMAGE ', attachment);
       if(!this.fileSelected){
         this.fileSelected = Object.assign({}, this.attachments[0].metadata)
-        this.fileSelected = Object.assign(this.fileSelected, this.getMetadataSize(this.fileSelected))
+        // this.fileSelected = Object.assign(this.fileSelected, this.getMetadataSize(this.fileSelected))
+        this.sizeImage = this.getMetadataSize(this.fileSelected)
 
       }
     } else if ((attachment.file.type.startsWith("image")) && (attachment.file.type.includes("svg"))){
@@ -119,7 +123,8 @@ export class ConversationPreviewComponent implements OnInit {
       attachment.metadata.src = this.sanitizer.bypassSecurityTrustUrl(attachment.metadata.src)
       if(!this.fileSelected){
         this.fileSelected = Object.assign({}, this.attachments[0].metadata)
-        this.fileSelected = Object.assign(this.fileSelected, this.getMetadataSize(this.fileSelected))
+        // this.fileSelected = Object.assign(this.fileSelected, this.getMetadataSize(this.fileSelected))
+        this.sizeImage = this.getMetadataSize(this.fileSelected)
       }
     }else if(!attachment.file.type.startsWith("image")){
       // ---------------------------------------------------------------------
@@ -158,7 +163,8 @@ export class ConversationPreviewComponent implements OnInit {
         that.arrayFiles.push({metadata});
         if (!that.fileSelected) {
           that.fileSelected = Object.assign({}, metadata)
-          that.fileSelected = Object.assign(that.fileSelected, that.getMetadataSize(that.fileSelected))
+          // that.fileSelected = Object.assign(that.fileSelected, that.getMetadataSize(that.fileSelected))
+          that.sizeImage = that.getMetadataSize(that.fileSelected)
         }
       };
     }

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

@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { BrandService } from './brand.service';
+
+describe('BrandService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: BrandService = TestBed.get(BrandService);
+    expect(service).toBeTruthy();
+  });
+});

package/src/app/providers/brand.service.ts

@@ -0,0 +1,232 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { environment } from '../../environments/environment';
+
+// import  brand  from "../../assets/brand/brand.json";
+// import * as brand from 'assets/brand/brand.json';
+import { TranslateService } from '@ngx-translate/core';
+import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
+import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
+import { AppConfigService } from './app-config.service';
+import { BrandResources } from '../utils/BrandResources';
+
+// const swal = require('sweetalert');
+
+@Injectable()
+export class BrandService {
+
+  // "brandSrc":"https://tiledeskbrand.nicolan74.repl.co/mybrand",
+
+  public brand: any;
+
+  _brand = {
+    DASHBOARD: {
+      META_TITLE: "Tiledesk Support Dashboard",
+      FAVICON_URL: "https://tiledesk.com/wp-content/uploads/2022/07/tiledesk_v13-300x300.png",
+      "company_name": "Tiledesk",
+      "company_site_name": "tiledesk.com",
+      "company_site_url": "https://www.tiledesk.com",
+      "company_logo_white__url": "assets/img/logos/tiledesk-logo_white_orange.svg",
+      "company_logo_black__url": "assets/img/logos/tiledesk_3.0_logo_black_v2_no_version.svg",
+      "company_logo_allwhite__url": "assets/img/logos/tiledesk_3.0_logo_all_white_v2_no_version.svg",
+      "company_logo_no_text__url": "assets/img/logos/tiledesk-solo-logo.png",
+      "privacy_policy_link_text": "Privacy Policy",
+      "privacy_policy_url": "https://www.tiledesk.com/privacy.html",
+      "display_terms_and_conditions_link": true,
+      "terms_and_conditions_url": "https://www.tiledesk.com/termsofservice.html",
+      "contact_us_email": "support@tiledesk.com",
+      "footer": {
+          "display_terms_and_conditions_link": true,
+          "display_contact_us_email": true
+      },
+      "recent_project_page": {
+          "company_logo_black__width": "130px"
+      },
+      "signup_page": {
+          "display_terms_and_conditions_link": true
+      },
+      "handle_invitation_page": {
+          "company_logo_45x45": "assets/img/logos/tiledesk-solo-logo.png"
+      },
+      "wizard_create_project_page": {
+          "logo_x_rocket": "assets/img/logos/logo_x_rocket4x4.svg"
+      },
+      "wizard_install_widget_page": {
+          "logo_on_rocket": "assets/img/logos/tiledesk-solo-logo.png"
+      },
+    },
+    CHAT: {
+
+    },
+    WIDGET: {
+      LOGO_CHAT: "https://smartflows-eu-public.s3.eu-central-1.amazonaws.com/imagicle-resources/SmartflowsLogo-NoText.svg",
+      POWERED_BY: "<a tabindex='-1' target='_blank href='https://www.imagicle.com/en/products/conversational-ai/'><img src='https://smartflows-eu-public.s3.eu-central-1.amazonaws.com/imagicle-resources/SmartflowsLogo-NoText.svg'/><span> Powered by Conversational AI</span></a>",
+    },
+    CDS: {
+      META_TITLE:"Design Studio",
+      FAVICON_URL: "https://tiledesk.com/wp-content/uploads/2022/07/tiledesk_v13-300x300.png",
+      INFO_MENU_ITEMS: [
+        { key: 'HELP_CENTER', icon: "", src:"", status: "inactive"},
+        { key: 'ROAD_MAP', icon: "", src:"", status: "inactive"},
+        { key: 'FEEDBACK', icon: "", src:"", status: "inactive"},
+        { key: 'SUPPORT', icon: "", src:"", status: "inactive"},
+        { key: 'CHANGELOG', icon: "", src:"", status: "inactive"},
+        { key: 'GITHUB', icon: "", src:"", status: "inactive"},
+      ]
+    },
+    COMMON: {
+      COMPANY_LOGO:"assets/logos/tiledesk_logo.svg",
+      COMPANY_LOGO_NO_TEXT:"assets/logos/tiledesk_logo.svg",
+      BASE_LOGO: "assets/logos/tiledesk_logo.svg",
+      BASE_LOGO_NO_TEXT: "assets/logos/tiledesk_logo.svg",
+      BASE_LOGO_WHITE: "assets/logos/tiledesk-logo_new_white.svg",
+      BASE_LOGO_WHITE_NO_TEXT:"",
+      COMPANY_NAME: "Tiledesk",
+      BRAND_NAME: "Tiledesk",
+      COMPANY_SITE_NAME:"tiledesk.com",
+      COMANY_SITE_URL:"https://www.tiledesk.com",
+      CONTACT_US_EMAIL: "support@tiledesk.com",
+      COMPANY_PRIMARY_COLOR:"",
+      DOCS: true
+    }
+  }
+
+  public assetBrand: any;
+  // public brand = brand
+  // local_url = '/assets/brand/brand.json';
+  warning: string;
+  loadBrandError: string;
+
+  private logger: LoggerService = LoggerInstance.getInstance();
+  
+  constructor(
+    private httpClient: HttpClient,
+    private translate: TranslateService,
+    private appConfig: AppConfigService
+  ) {
+    this.getTranslations()
+    this.brand = this._brand
+  }
+
+  getTranslations() {
+    this.translate.get('Warning')
+      .subscribe((text: string) => {
+        this.warning = text;
+      });
+
+    this.translate.get('RelatedKnowledgeBase')
+      .subscribe((text: string) => {
+        this.loadBrandError = text;
+      });
+  }
+
+  isEmpty(url: string) {
+    return (url === undefined || url == null || url.length <= 0) ? true : false;
+  }
+
+  // getData() {
+  //   return this.httpClient.get('/assets/brand/brand.json');
+  // }
+
+
+
+  async loadBrand() {
+    // this.getData()
+    //   .subscribe(data => {
+    //     this.assetBrand = data
+    //     console.log('[BRAND-SERV] BRAND RETIEVED FROM ASSET assetBrand ', this.assetBrand);
+    //   });
+
+    // let url = ''
+    // if (environment.remoteConfig === false) {
+
+    //   if (environment.hasOwnProperty("brandSrc")) {
+
+    //     this.logger.log('[BRAND-SERV] loadBrand remoteConfig is false - env has Property brandSrc');
+    //     const remoteBrandUrl = this.isEmpty(environment['brandSrc']);
+
+    //     if (!remoteBrandUrl) {
+    //       this.logger.log('[BRAND-SERV] loadBrand remoteConfig is false - env brandSrc is empty ? ', remoteBrandUrl);
+    //       url = environment['brandSrc']
+    //     } else {
+    //       this.logger.log('[BRAND-SERV] loadBrand remoteConfig is false - env brandSrc is empty ? ', remoteBrandUrl, ' -> load from assets')
+    //       this.brand =  this._brand;
+    //     }
+    //   } else {
+    //     this.logger.log('[BRAND-SERV] loadBrand remoteConfig is false - env NOT has Property brandSrc -> load from assets');
+    //     this.brand = this._brand;
+    //   }
+    // } else {
+    //   const res = await this.httpClient.get(environment['remoteConfigUrl']).toPromise();
+    //   this.logger.log('[BRAND-SERV] loadBrand - remoteConfig -> true get remoteConfig response ', res);
+
+    //   // const remoteConfigData = JSON.parse(res['_body'])
+    //   const remoteConfigData = res
+    //   // this.logger.log('BrandService loadBrand - remoteConfig is true - get remoteConfigData  res ', remoteConfigData);
+
+    //   if (remoteConfigData.hasOwnProperty("brandSrc")) {
+    //     this.logger.log('[BRAND-SERV] loadBrand remoteConfig is true - remoteConfigData has Property brandSrc');
+
+    //     const remoteBrandUrl = this.isEmpty(remoteConfigData['brandSrc']);
+    //     if (!remoteBrandUrl) {
+    //       this.logger.log('[BRAND-SERV] loadBrand remoteConfig is true - remoteConfigData brandSrc is empty ?', remoteBrandUrl);
+
+    //       url = remoteConfigData['brandSrc']
+
+
+    //     } else {
+    //       this.logger.log('[BRAND-SERV] loadBrand remoteConfig is true - remoteConfigData brandSrc is empty ?', remoteBrandUrl, ' -> load from assets');
+
+    //       this.brand = this._brand;
+    //     }
+
+    //   } else {
+    //     this.logger.log('[BRAND-SERV] loadBrand remoteConfig is true - remoteConfigData NOT has Property brandSrc -> load from assets');
+    //     // this.setBrand(this.local_url)
+    //     // url = this.local_url
+    //     this.brand = this._brand;
+    //   }
+    // }
+    const that = this
+    try {
+      let url = this.appConfig.getConfig().brandSrc
+      if (url && url !== 'CHANGEIT') {
+        console.log('[BRAND-SERV] **** GET BRAND FROM URL ****', url);
+        const data = await this.httpClient.get(url).toPromise();
+
+
+        this.brand =data
+
+        console.log('[BRAND-SERV] loadBrand - brand: ', this.brand);
+
+        const resources = new BrandResources(this);
+        resources.loadResources()
+      }
+    } catch (err) {
+      console.error('[BRAND-SERV] loadBrand error : ', err);
+
+      this.brand = this._brand;
+      // this.notify.showNotificationChangeProject('ops', 2, 'done');
+      // this.displaySwalAlert(err)
+    }
+    
+    
+  }
+
+  // displaySwalAlert(err) {
+  //   swal({
+  //     title: this.warning,
+  //     text: 'An error occurred while uploading your brand. Error code: ' + err.status,
+  //     icon: "warning",
+  //     button: true,
+  //     dangerMode: false,
+  //   })
+  // }
+
+  getBrand() {
+    //this.logger.log('BrandService getBrand has been called - brand: ', this.brand);
+    return { ...this.brand['WIDGET'], ...this.brand['COMMON'] }
+  }
+
+
+}

package/src/app/utils/BrandResources.ts

@@ -0,0 +1,38 @@
+import { Injectable } from "@angular/core";
+import { BrandService } from "../providers/brand.service";
+import { BRAND_BASE_INFO, LOGOS_ITEMS } from "./utils-resources";
+
+@Injectable({
+    providedIn: 'root'
+})
+export class BrandResources {
+    
+    brand: {}
+    
+    constructor(
+        brandService: BrandService
+    ) {
+        this.brand = brandService.getBrand()
+    }
+
+    loadResources(){
+        if(!this.brand){
+            return;
+        }
+
+        /** META TITLE and FAVICON */
+        document.title = this.brand['BRAND_NAME'] + ' ' + this.brand['META_TITLE']
+        // var icon = document.querySelector("link[rel~='icon']") as HTMLElement;
+        // icon.setAttribute('href', this.brand['FAVICON_URL'])
+
+        /** CSS */
+        document.documentElement.style.setProperty('--base-brand-color', this.brand['BRAND_PRIMARY_COLOR']);
+
+        /** BRAND_BASE_INFO */
+        Object.keys(BRAND_BASE_INFO).forEach(key => BRAND_BASE_INFO[key] = this.brand[key])
+
+        /** LOGOS_ITEMS */
+        Object.keys(LOGOS_ITEMS).forEach(key => { LOGOS_ITEMS[key].icon = this.brand[key] })
+        
+    }
+}

package/src/app/utils/globals.ts

@@ -16,16 +16,13 @@ import { avatarPlaceholder, detectIfIsMobile, getParameterByName, setColorFromSt
 import { ConversationModel } from 'src/chat21-core/models/conversation';
 import { convertColorToRGBA } from 'src/chat21-core/utils/utils';
 import { Rule } from 'src/models/rule';
+import { BRAND_BASE_INFO } from './utils-resources';
 
 @Injectable({
     providedIn: 'root'
   })
 export class Globals {
 
-  BASE_LOCATION = 'https://widget.tiledesk.com/v2';
-  POWERED_BY ='<a tabindex="-1" target="_blank" href="https://www.tiledesk.com/?utm_source=widget"><img src="https://support-pre.tiledesk.com/dashboard/assets/img/logos/tiledesk-solo_logo_new_gray.svg"/><span>Powered by Tiledesk</span></a>'
-  DEFAULT_LOGO_CHAT = '/assets/images/tiledesk_logo_white_small.svg';
-
   // ============ BEGIN: SET FUNCTION BY UTILS ==============//
   // getParameterByName = getParameterByName;
   // convertColorToRGBA = convertColorToRGBA;
@@ -226,7 +223,6 @@ export class Globals {
    * 1: initParameters
    */
   initDefafultParameters() {
-
     let wContext: any = window;
     if (window.frameElement && window.frameElement.getAttribute('tiledesk_context') === 'parent') {
       wContext = window.parent;
@@ -239,7 +235,7 @@ export class Globals {
     this.windowContext = wContext;
 
     // ============ BEGIN: SET EXTERNAL PARAMETERS ==============//
-    this.baseLocation = this.BASE_LOCATION;
+    this.baseLocation = 'https://widget.tiledesk.com/v2';
     this.autoStart = true;
     this.startHidden = false;
     /** start Authentication and startUI */
@@ -309,9 +305,9 @@ export class Globals {
     /** allows the user to download the chat transcript. The download button appears
     when the chat is closed by the operator. Permitter values: true, false.
     Default value: false */
-    this.poweredBy = this.POWERED_BY;
+    this.poweredBy = BRAND_BASE_INFO.POWERED_BY;
     /** link nel footer widget */
-    this.logoChat = this.BASE_LOCATION + this.DEFAULT_LOGO_CHAT;
+    this.logoChat = BRAND_BASE_INFO.LOGO_CHAT;
     /** url img logo */
     this.marginX = '20px';
     /** set margin left or rigth widget  */

package/src/app/utils/utils-resources.ts

@@ -0,0 +1,21 @@
+export const BRAND_BASE_INFO: { [key: string] : string} ={
+    COMPANY_NAME: "Tiledesk",
+    BRAND_NAME: "Tiledesk",
+    COMPANY_SITE_NAME:"tiledesk.com",
+    COMPANY_SITE_URL:"https://www.tiledesk.com",
+    CONTACT_US_EMAIL: "support@tiledesk.com",
+    FAVICON: "https://tiledesk.com/wp-content/uploads/2022/07/tiledesk_v13-300x300.png",
+    META_TITLE:"Design Studio",
+    LOGO_CHAT:"https://widget.tiledesk.com/v2/assets/images/tiledesk_logo_white_small.svg",
+    POWERED_BY:"<a tabindex='-1' target='_blank' ref='https://www.tiledesk.com/?utm_source=widget'><img src='https://support-pre.tiledesk.com/dashboard/assets/img/logos/tiledesk-solo_logo_new_gray.svg'/><span>Powered by Tiledesk</span></a>",
+}
+
+export const LOGOS_ITEMS: { [key: string] : { label: string, icon: string }} ={
+    COMPANY_LOGO: {label: BRAND_BASE_INFO.COMPANY_NAME,  icon: 'assets/logos/tiledesk_logo.svg'},
+    COMPANY_LOGO_NO_TEXT: {label: BRAND_BASE_INFO.COMPANY_NAME, icon: 'assets/logos/tiledesk_logo_no_text.svg'},
+    BASE_LOGO: {label: BRAND_BASE_INFO.BRAND_NAME,  icon: 'assets/logos/tiledesk_logo.svg'},
+    BASE_LOGO_NO_TEXT: {label: BRAND_BASE_INFO.BRAND_NAME, icon: 'assets/logos/tiledesk_logo_no_text.svg'},
+    BASE_LOGO_WHITE: { label: BRAND_BASE_INFO.BRAND_NAME, icon: '"assets/logos/tiledesk-logo_new_white.svg'},
+    BASE_LOGO_WHITE_NO_TEXT: { label: BRAND_BASE_INFO.BRAND_NAME, icon: '"assets/logos/tiledesk-logo_new_white.svg'},
+    BASE_LOGO_GRAY: { label: BRAND_BASE_INFO.BRAND_NAME, icon: 'https://support-pre.tiledesk.com/dashboard/assets/img/logos/tiledesk-logo_new_gray.svg'}
+}

package/src/assets/twp/index-dev.html

@@ -1710,13 +1710,14 @@
                     <div class="row method_container">
                         <button class="btn btn-light" onclick="onClickTestButton('open')">Open <em class="fa-arrow-up fa"></em></button>
                         <button class="btn btn-light" onclick="onClickTestButton('close')">Close <em class="fa fa-arrow-down"></em></button>
-                        <button class="btn btn-light" onclick="onClickTestButton('hide')">Hide</button>
-                        <button class="btn btn-light" onclick="onClickTestButton('show')">Show</button>
-                        <button class="btn btn-light" onclick="onClickTestButton('startConversation')">Start Conversation</button>
+                        <button class="btn btn-light" onclick="onClickTestButton('hide')">Hide <em class="fa fa-eye-slash"></em></button>
+                        <button class="btn btn-light" onclick="onClickTestButton('show')">Show <em class="fa fa-eye"></em></button>
+                        <button class="btn btn-light" onclick="onClickTestButton('startConversation')">Start Conversation <em class="fa fa-play"></em></button>
+                        <button class="btn btn-light" onclick="onClickTestButton('clearStorage')">Clear data <em class="fa fa-trash"></em></button>
                         <button class="btn btn-light" onclick="onClickTestButton('dispose')">Dispose</button>
                         <button class="btn btn-light" onclick="onClickTestButton('showCallout')">Show callout</button>
-                        <button class="btn btn-light" onclick="onClickTestButton('reInit')">ReInit</button>
-                        <button class="btn btn-light" onclick="onClickTestButton('restart')">ReStart</button>
+                        <button class="btn btn-light" onclick="onClickTestButton('reInit')">ReInit <em class="fa fa-rotate-right"></em></button>
+                        <button class="btn btn-light" onclick="onClickTestButton('restart')">ReStart <em class="fa fa-rotate-right"></em></button>
                         <button class="btn btn-light" onclick="onClickTestButton('logout')">LogOut</button>
                     </div>
                     <div class="row section">

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

@@ -131,6 +131,7 @@ export class TiledeskAuthService {
     this.appStorage.removeItem('tiledeskToken');
     this.appStorage.removeItem('currentUser');
     this.setCurrentUser(null);
+    this.setTiledeskToken(null);
   }
 
 
@@ -191,4 +192,8 @@ export class TiledeskAuthService {
     return this.tiledeskToken;
   }
 
+  setTiledeskToken(token: string) {
+    this.tiledeskToken = token
+  }
+
 }

package/src/test-custom-authentication.html

@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <base href="./">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Widget Test Page</title>
+    <script type="application/javascript" async> 
+      // Handler for .ready() called.
+      window.tiledeskSettings = 
+      {
+          // PRE: 
+          // projectid: "6066e60cc3dade4e7389d182", //mqtt
+          projectid:"615577276b34e900353c1a63", //"62445574a0353b0035a05f27", //"6013ec749b32000045be650e", // firebase
+          // projectid: "609b8efa8732eb00141763d9", //mqtt-docker
+          // projectid: "61ae2f221c081a001a045961",//" 61b7840c7b4c750013b69025", //native-mqtt
+          // preChatForm: true, 
+          align:'left',
+          calloutTimer: 5,
+          // calloutTitle: 'TITOLO CALLOUT',
+          // calloutMsg: 'messaggio callout widget',
+          // welcomeTitle: 'CIAO CLIENT',
+          // welcomeMsg: 'Messaggio benvenuto widget',
+          widgetTitle: "widget Title Test",
+          //startFromHome: false,
+          // logoChat: 'https://miro.medium.com/proxy/1*8mpWApzQD5gZZlnYYUkbcA.png',
+          // lang: 'fr',
+          // hideHeaderCloseButton: true,1626341000398
+          // isOpen: true,
+          // fullscreenMode: true,
+          // themeColor: '#ffcb05',
+          // themeForegroundColor: '#000000',
+          // departmentID : "615579216b34e900353c1da0",
+          // isShown: true,
+          allowTranscriptDownload: true,
+          marginX: "100px",
+          // marginY: "200px",
+          // startHidden: true,
+          // persistence: 'session',
+          // showWaitTime: false,
+          autoStart: false,
+          showAvailableAgents: true,
+          // showLogoutOption: false,
+          isLogEnabled: true,
+          // logLevel: "DEBUG"
+          // userFullname: " ",
+          // userEmail: "",
+          // autoStart: false,
+          // persistence: 'session'
+          // tenant: "tenant test",
+          // showAttachmentButton: false,
+          // privacyField: 'Accetto i termini della privacy <a style="text-transform: none" target="_blank" href="http://www.tiledesk.com/privacy.html">Privacy Policy</a>'
+          // customAttributes: {"nome": "Andrea", "nazione": "italia", "userFullname":"carlo"},
+          // bubbleSentBackground: "#828282",
+          // bubbleSentTextColor: "#b61416",
+          // bubbleReceivedBackground: "rgb(182, 20, 22)",
+          // bubbleReceivedTextColor: "rgb(247, 247, 247)",
+          // buttonBackgroundColor: "#828282",
+          // buttonTextColor: "#b61416",
+          // buttonHoverTextColor: "#828282",
+          // buttonHoverBackgroundColor: "#b61416",
+          // preChatFormJson: [{"name": "userFullname", "type":"text", "mandatory":true, "label":"LABEL_FIELD_NAME"}]
+          hideSettings: false
+        };
+
+      (function(d, s, id) {
+        var w = window; var d = document; var i = function () {i.c(arguments);};
+        i.q = []; i.c = function (args) {i.q.push(args);}; w.Tiledesk = i;
+        var js, fjs = d.getElementsByTagName(s)[0];
+        if (d.getElementById(id)) return;
+        js = d.createElement(s);
+        js.id = id; js.async = true; js.src = "./launch.js"; //
+        fjs.parentNode.insertBefore(js, fjs);
+
+      }(document, 'script', 'tiledesk-jssdk'));
+     
+
+      window.Tiledesk('logout');
+
+      window.Tiledesk('onLoadParams', function(event_data) {
+        console.log("onLoadParams Tiledesk FN", event_data);
+        // let token = 'JWT eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJfaWQiOiI4ODgzNTQ4Ny05ZjllLTRiMGItOGRmNy0wMDA0NWUwYTY4NjYiLCJmaXJzdG5hbWUiOiJndWVzdCM4ODgzIiwiaWQiOiI4ODgzNTQ4Ny05ZjllLTRiMGItOGRmNy0wMDA0NWUwYTY4NjYiLCJmdWxsTmFtZSI6Imd1ZXN0Izg4ODMgIiwiaWF0IjoxNzEyNzQyNTA1LCJhdWQiOiJodHRwczovL3RpbGVkZXNrLmNvbSIsImlzcyI6Imh0dHBzOi8vdGlsZWRlc2suY29tIiwic3ViIjoiZ3Vlc3QiLCJqdGkiOiJkNDJhZmY5MS0xZTgxLTQyYjAtOGIyYS1mMjU3YzdmMzc4YWEifQ.UCKvk5VE4XMlXKB20hjOYZTuq3YE1XyfpcXQfJnwclgvFaoyZzIuX5_1mz1ZMauWMV69ZecwkkwKb1S6rPH4bf0VqWO0Ez9LJYA1ZI0FU4HZO4oAGivYh-tPArP41k7bxl369314QKesm4-a7_S81T_i4wrmB663u7th5WVKjkg'
+        // window.Tiledesk('signInWithCustomToken',token);
+        window.Tiledesk('signInAnonymous')
+        
+      });
+
+      window.Tiledesk('onBeforeInit', function(event_data) {
+        console.log("onBeforeInit Tiledesk FN", event_data);
+       
+      });
+      
+      window.Tiledesk('onAuthStateChanged', function(event_data) {
+        console.log("onAuthStateChanged FN", event_data);
+        if (event_data.detail.isLogged) {
+          document.getElementById("status").innerHTML = "Signed in.";
+          window.Tiledesk('show')
+        }
+      });
+
+      window.Tiledesk('onLoggedOut', function(event_data) {
+        console.log("onLoggedOut FN", event_data);
+      });
+
+      
+
+
+      function authenticate(email, password, callback) {
+      // Endpoint's backend source code: https://replit.com/@tiledesk/tiledesk-jwt-token-example#index.js  
+      const options = {
+        url: `https://87d1bd2e-fa44-4b02-b8ab-e7797f7d92f7-00-eswv3xnlk9yn.kirk.replit.dev/authpre`, // https://tiledesk-jwt-token-example.tiledesk.repl.co/auth
+        method: 'POST'
+      };
+      let xmlhttp = new XMLHttpRequest();
+      xmlhttp.open(options.method, options.url, true);
+      xmlhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
+      xmlhttp.onreadystatechange = function () {
+        if (callback && xmlhttp.readyState == 4 && xmlhttp.status == 200 && xmlhttp.responseText) {
+          try {
+            const json = JSON.parse(xmlhttp.responseText);
+            let token = json.token;
+            if (token && !token.startsWith("JWT ")) {
+              token = "JWT " + token;
+            }
+            callback(null, token);
+          }
+          catch (err) {
+            callback(err, null);
+          }
+        }
+      };
+      xmlhttp.send(JSON.stringify({
+        "email": email,
+        "password": password
+      }));
+    }
+    </script>
+  </head>
+  <body>
+    <h1>Tiledesk Custom JWT Authentication live App</h1>
+    <h2 id="status">Authenticating...</h2>
+  </body>
+</html>