@chat21/chat21-web-widget 5.0.58 → 5.0.59-rc.2

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # chat21-web-widget ver 5.0
 
+### 5.0.59-rc.2
+- added: handler for buttons in last-message component
+- changed: tooltip custom directive
+- changed: user-avatar size in last-message component
+
+### 5.0.59-rc.1
+- added: hashing while building dist files
+
 ### 5.0.58 in PROD
 
 ### 5.0.57 in PROD

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@chat21/chat21-web-widget",
   "author": "Tiledesk SRL",
-  "version": "5.0.58",
+  "version": "5.0.59-rc.2",
   "license": "MIT",
   "homepage": "https://www.tiledesk.com",
   "repository": {
@@ -43,6 +43,7 @@
     "marked": "^4.0.16",
     "ngx-logger": "^5.0.11",
     "popper.js": "^1.16.1",
+    "replace": "^1.2.2",
     "rxjs": "~6.5.1",
     "source-map-explorer": "^2.5.3",
     "tslib": "^2.0.0",

package/src/app/app.component.scss

@@ -208,6 +208,8 @@ textarea::placeholder {
     
 }
 
+
+// TOOLTIP: start
 .tooltip-container {
     font-family: 'Roboto','Google Sans', Helvetica, Arial, sans-serif;
     font-size: 12px;
@@ -245,6 +247,68 @@ textarea::placeholder {
   }
 }
 
+.ng-tooltip {
+    position: absolute;
+    max-width: 150px;
+    font-size: 14px;
+    text-align: center;
+    color: black;
+    padding: 3px 8px;
+    background:rgb(255, 255, 255);
+    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3); 
+    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
+    border-radius: 10px;
+    z-index: 1000;
+    opacity: 0;
+
+    font-family: 'Roboto','Google Sans', Helvetica, Arial, sans-serif;
+    font-size: 12px;
+    font-style: normal;
+    letter-spacing: normal;
+    font-stretch: normal;
+    font-variant: normal;
+    font-weight: 300;
+
+  }
+  .ng-tooltip:after {
+    content: "";
+    position: absolute;
+    border-style: solid;
+  }
+  .ng-tooltip-top:after {
+    top: 100%;
+    left: 50%;
+    margin-left: -5px;
+    border-width: 5px;
+    border-color: rgb(255, 255, 255) transparent transparent transparent;
+  }
+  .ng-tooltip-bottom:after {
+    bottom: 100%;
+    left: 50%;
+    margin-left: -5px;
+    border-width: 5px;
+    border-color: transparent transparent rgb(255, 255, 255) transparent;
+  }
+  .ng-tooltip-left:after {
+    top: 50%;
+    left: 100%;
+    margin-top: -5px;
+    border-width: 5px;
+    border-color: transparent transparent transparent rgb(255, 255, 255);
+  }
+  .ng-tooltip-right:after {
+    top: 50%;
+    right: 100%;
+    margin-top: -5px;
+    border-width: 5px;
+    border-color: transparent rgb(255, 255, 255) transparent transparent;
+  }
+  .ng-tooltip-show {
+    opacity: 1;
+  }
+
+  //TOOLTIP : end
+
 chat-root {
     position: absolute;
     display: block;

package/src/app/component/last-message/last-message.component.scss

@@ -3,10 +3,10 @@
 :host  .c21-avatar-image ::ng-deep > chat-avatar-image {
 
     .c21-icon-avatar { 
-        height: 32px;
-        width: 32px;
-        min-width: 32px;
-        min-height: 32px;
+        height: 38px;
+        width: 38px;
+        min-width: 38px;
+        min-height: 38px;
     }  
 }
 :host .previewNewMessagge ::ng-deep > chat-bubble-message > #bubble-message > div > div > chat-text {
@@ -152,10 +152,10 @@
 
 .c21-icon-avatar {
     position: absolute;
-    width: 32px;
-    height: 32px;
+    width: 38px;
+    height: 38px;
     bottom: 0px;
-    left: -40px;
+    left: -46px;
     box-shadow: rgba(35, 47, 53, 0.09) 0px 2px 8px 0px;
     border-radius: 100%; //GAB
     border: 1px solid #eee;
@@ -163,8 +163,8 @@
 }
 
 .c21-avatar-image {
-    width: 32px;
-    height: 32px;
+    width: 38px;
+    height: 38px;
     display: block;
     position: absolute;
 }

package/src/app/component/last-message/last-message.component.ts

@@ -167,8 +167,10 @@ export class LastMessageComponent implements OnInit, AfterViewInit, OnDestroy {
   onAttachmentButtonClicked(event: any){
     // this.onAttachmentButtonClicked.emit(event)
     this.logger.debug('[LASTMESSAGE] onAttachmentButtonClicked', event)
-    this.events.publish('lastMessage:attachmentButtonClicked', event)
     this.openConversationByID(this.conversation);
+    setTimeout(() => {
+      this.events.publish('lastMessage:attachmentButtonClicked', event)
+    }, 500);
   }
   /** */
   openConversationByID(conversation) {

package/src/app/component/message/bubble-message/bubble-message.component.html

@@ -46,7 +46,7 @@
       <!-- <div *ngIf="message.type == 'text'"> -->     
 
         
-      <div *ngIf="message?.text" tooltip="{{message.timestamp | dateAgo}} ({{message.timestamp | date:'shortDate'}} {{message.timestamp | date:'HH:mm:ss'}})">
+      <div *ngIf="message?.text" tooltip="{{message.timestamp | dateAgo}} ({{message.timestamp | date:'shortDate'}} {{message.timestamp | date:'HH:mm:ss'}})" placement="bottom">
 
         <!-- [htmlEnabled]="(message?.type==='html')? true : false" -->
         <chat-text *ngIf="message?.type !=='html'"

package/src/app/component/message/buttons/action-button/action-button.component.html

@@ -1,8 +1,8 @@
 <div #actionButton id="actionButton" class="button-in-msg action" 
   [ngClass]="{'disabled': isConversationArchived}"
-  title="{{button?.value}}"
   (click)="actionButtonAction()" 
   (mouseover)="onMouseOver($event)" 
   (mouseout)="onMouseOut($event)">
     {{button?.value}}
 </div>
+<!-- title="{{button?.value}}" -->

package/src/app/component/message/buttons/link-button/link-button.component.html

@@ -1,4 +1,5 @@
-<div class="button-in-msg url" (click)="actionButtonUrl()" title="{{button?.value}}"
+<!-- title="{{button?.value}}" -->
+<div class="button-in-msg url" (click)="actionButtonUrl()" 
 (mouseover)="onMouseOver($event)" (mouseout)="onMouseOut($event)"> 
   <span *ngIf="button?.target !== 'self'" class="icon-button-action">
     <!-- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="12px" height="12px">

package/src/app/component/message/buttons/text-button/text-button.component.html

@@ -1,8 +1,8 @@
+<!-- title="{{button?.value}}" -->
 <div class="button-in-msg text" 
-[ngClass]="{'disabled': isConversationArchived}"
-title="{{button?.value}}"
-(click)="actionButtonText()" 
-(mouseover)="onMouseOver($event)" 
-(mouseout)="onMouseOut($event)">
+  [ngClass]="{'disabled': isConversationArchived}"
+  (click)="actionButtonText()" 
+  (mouseover)="onMouseOver($event)" 
+  (mouseout)="onMouseOut($event)">
   {{button?.value}}
 </div>

package/src/app/component/message/image/image.component.html

@@ -1,6 +1,5 @@
 <!-- [ngStyle] = "{ 'max-width': width +'px', 'max-height': height +'px' }" style="position: relative; text-align: center; margin: auto"-->
 <div class="c21-img-container" >
-  <!-- <div *ngIf="loading" class="loader" [ngStyle] = "{ 'width': width , 'height': height }"></div> -->
   <img 
     class="message-contentX message-content-imageX" 
     [alt]="metadata?.name"
@@ -9,7 +8,4 @@
     [src]="metadata.src" 
     (load)="onLoaded($event)"
     (click)="downloadImage(metadata.src, metadata.name)"/>
-  <ng-template #timeTooltipRight>
-    <span>{{ tooltipMessage }}</span>
-  </ng-template>
 </div>

package/src/app/component/message/info-message/info-message.component.html

@@ -7,7 +7,7 @@
       
     <div style="max-width: 70%;">
         
-        <span class="base_info" [innerHTML]="message?.text | marked" tooltip="{{message.timestamp | dateAgo}} ({{message.timestamp | date:'shortDate'}} {{message.timestamp | date:'HH:mm:ss'}})"  placement="left" contentType="template"></span>
+        <span class="base_info" [innerHTML]="message?.text | marked" tooltip="{{message.timestamp | dateAgo}} ({{message.timestamp | date:'shortDate'}} {{message.timestamp | date:'HH:mm:ss'}})" placement="left"></span>
         <!-- <ng-template #timeTooltipLeft>
             <span>{{message.timestamp | amTimeAgo}} ({{message.timestamp | amLocal | amDateFormat: 'L HH:mm:ss'}})</span>
         </ng-template>  -->

package/src/app/directives/tooltip.directive.ts

@@ -1,46 +1,134 @@
-import { Directive, ElementRef, HostListener, Input, OnDestroy } from '@angular/core';
+import { Directive, ElementRef, HostListener, Input, Renderer2 } from '@angular/core';
+import { isOnMobileDevice } from 'src/chat21-core/utils/utils';
 
 @Directive({
   selector: '[tooltip]'
 })
-export class TooltipDirective implements OnDestroy{
+export class TooltipDirective {
 
-  @Input() tooltip: any; // The text for the tooltip to display
-  @Input() delay? = 190; // Optional delay input, in ms
+  @Input('tooltip') tooltipTitle: string;
+  @Input() placement: string;
+  @Input() delay: string;
+  tooltip: HTMLElement;
+  
+  offset = 10;
+  isMobile = isOnMobileDevice()
 
-  private myPopup;
-  private timer;
+  constructor(private el: ElementRef, private renderer: Renderer2) {}
 
-  constructor(private el: ElementRef) { }
+  @HostListener('mouseenter') onMouseEnter() {
+    if (!this.tooltip && !this.isMobile) { this.show(); }
+  }
 
-  ngOnDestroy(): void {
-    if (this.myPopup) { this.myPopup.remove() }
+  @HostListener('mouseleave') onMouseLeave() {
+    if (this.tooltip) { this.hide(); }
   }
 
-  @HostListener('mouseenter') onMouseEnter() {
-    this.timer = setTimeout(() => {
-      let x = this.el.nativeElement.getBoundingClientRect().left + this.el.nativeElement.offsetWidth / 2; // Get the middle of the element
-      let y = this.el.nativeElement.getBoundingClientRect().top + this.el.nativeElement.offsetHeight + 6; // Get the bottom of the element, plus a little extra
-      this.createTooltipPopup(x, y);
-    }, this.delay)
+  show() {
+    this.create();
+    this.setPosition();
+    this.renderer.addClass(this.tooltip, 'ng-tooltip-show');
   }
 
-  @HostListener('mouseleave') onMouseLeave() {
-    if (this.timer) clearTimeout(this.timer);
-    if (this.myPopup) { this.myPopup.remove() }
+  hide() {
+    this.renderer.removeClass(this.tooltip, 'ng-tooltip-show');
+    window.setTimeout(() => {
+      this.renderer.removeChild(document.body, this.tooltip);
+      this.tooltip = null;
+    }, +this.delay);
+  }
+
+  create() {
+    this.tooltip = this.renderer.createElement('span');
+
+    this.renderer.appendChild(
+      this.tooltip,
+      this.renderer.createText(this.tooltipTitle) // textNode
+    );
+
+    this.renderer.appendChild(document.body, this.tooltip);
+    // this.renderer.appendChild(this.el.nativeElement, this.tooltip);
+
+    this.renderer.addClass(this.tooltip, 'ng-tooltip');
+    this.renderer.addClass(this.tooltip, `ng-tooltip-${this.placement}`);
+
+    // delay 설정
+    this.renderer.setStyle(this.tooltip, '-webkit-transition', `opacity ${this.delay}ms`);
+    this.renderer.setStyle(this.tooltip, '-moz-transition', `opacity ${this.delay}ms`);
+    this.renderer.setStyle(this.tooltip, '-o-transition', `opacity ${this.delay}ms`);
+    this.renderer.setStyle(this.tooltip, 'transition', `opacity ${this.delay}ms`);
   }
 
-  private createTooltipPopup(x: number, y: number) {
-    let popup = document.createElement('div');
-    popup.innerHTML = this.tooltip;
-    popup.setAttribute("class", "tooltip-container");
-    popup.style.top = y.toString() + "px";
-    popup.style.left = x.toString() + "px";
-    document.body.appendChild(popup);
-    this.myPopup = popup;
-    setTimeout(() => {
-      if (this.myPopup) this.myPopup.remove();
-    }, 5000); // Remove tooltip after 5 seconds
+  setPosition() {
+    const hostPos = this.el.nativeElement.getBoundingClientRect();
+    const tooltipPos = this.tooltip.getBoundingClientRect();
+
+    const scrollPos = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
+
+    let top, left;
+
+    if (this.placement === 'top') {
+      top = hostPos.top - tooltipPos.height - this.offset;
+      left = hostPos.left + (hostPos.width - tooltipPos.width) / 2;
+    }
+
+    if (this.placement === 'bottom') {
+      top = hostPos.bottom + this.offset;
+      left = hostPos.left + (hostPos.width - tooltipPos.width) / 2;
+    }
+
+    if (this.placement === 'left') {
+      top = hostPos.top + (hostPos.height - tooltipPos.height) / 2;
+      left = hostPos.left - tooltipPos.width - this.offset;
+    }
+
+    if (this.placement === 'right') {
+      top = hostPos.top + (hostPos.height - tooltipPos.height) / 2;
+      left = hostPos.right + this.offset;
+    }
+
+    this.renderer.setStyle(this.tooltip, 'top', `${top + scrollPos}px`);
+    this.renderer.setStyle(this.tooltip, 'left', `${left}px`);
   }
 
+
+
+  // @Input() tooltip2: any; // The text for the tooltip to display
+  // @Input() delay? = 190; // Optional delay input, in ms
+
+  // private myPopup;
+  // private timer;
+
+
+  // ngOnDestroy(): void {
+  //   if (this.myPopup) { this.myPopup.remove() }
+  // }
+
+  // @HostListener('mouseenter') onMouseEnter() {
+  //   this.timer = setTimeout(() => {
+  //     let x = this.el.nativeElement.getBoundingClientRect().left + this.el.nativeElement.offsetWidth / 2; // Get the middle of the element
+  //     let y = this.el.nativeElement.getBoundingClientRect().top + this.el.nativeElement.offsetHeight + 6; // Get the bottom of the element, plus a little extra
+  //     this.createTooltipPopup(x, y);
+  //   }, this.delay)
+  // }
+
+  // @HostListener('mouseleave') onMouseLeave() {
+  //   if (this.timer) clearTimeout(this.timer);
+  //   if (this.myPopup) { this.myPopup.remove() }
+  // }
+
+  // private createTooltipPopup(x: number, y: number) {
+  //   let popup = document.createElement('div');
+  //   popup.innerHTML = this.tooltip2;
+  //   popup.setAttribute("class", "tooltip-container");
+  //   popup.style.top = y.toString() + "px";
+  //   popup.style.left = x.toString() + "px";
+  //   document.body.appendChild(popup);
+  //   this.myPopup = popup;
+  //   setTimeout(() => {
+  //     if (this.myPopup) this.myPopup.remove();
+  //   }, 5000); // Remove tooltip after 5 seconds
+  // }
+
+
 }

package/src/build_launch.js

@@ -0,0 +1,71 @@
+var glob = require("glob")
+var replace = require("replace");
+
+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|$)/},
+    }
+
+    Object.keys(fileToBeReplaced).forEach(key => {
+        replaceFile(key, fileToBeReplaced[key])
+    })
+    // glob("./dist/main*", function (er, files) {
+    //     // files is an array of filenames.
+    //     // If the `nonull` option is set, and nothing
+    //     // was found, then files is ["**/*.js"]
+    //     // er is an error object or null.
+    //     console.log('fileeeeee', files)
+    //     hashCode = files[0].match(/(?<=\/main\.)(.+?)(?=\.js|$)/)[0]
+    //     console.log('hashhh',hashCode )
+    //     replace({
+    //         regex: "main",
+    //         replacement: "main."+hashCode ,
+    //         paths: [ './dist/launch.js' ],
+    //         recursive: true,
+    //         silent: false,
+    //     }, (error,changedFiles)=>{
+    //         if (error) {
+    //             return console.error('Error occurred:', error);
+    //           }
+    //           console.log('Modified files:', changedFiles.join(', '));
+    //     });
+        
+    // })
+    
+}
+
+
+
+function replaceFile(name, element){
+    let hashCode = ''
+    glob("./dist/"+name+"*", function (er, files) {
+        // files is an array of filenames.
+        // If the `nonull` option is set, and nothing
+        // was found, then files is ["**/*.js"]
+        // er is an error object or null.
+        console.log('fileeeeee', files, element)
+        hashCode = files[0].match(element.regex)[0]
+        console.log('hashhh',hashCode ,name )
+        replace({
+            regex: '{{'+ name + '}}'+ element.extension,
+            replacement: name + "." + hashCode + element.extension ,
+            paths: [ './dist/launch.js' ],
+            recursive: true,
+            silent: false,
+        }, (error,changedFiles)=>{
+            if (error) {
+                return console.error('Error occurred:', error);
+            }
+              console.log('Modified files:', changedFiles);
+        });
+        
+    })
+}

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

@@ -220,6 +220,7 @@ export function conversationToMessage(conversation: ConversationModel, currentUs
   message.sender_fullname = conversation.sender_fullname
   message.recipient = conversation.recipient
   message.recipient_fullname = conversation.recipient_fullname
+  message.conversation_with = conversation.conversation_with
   message.status = +conversation.status
   message.timestamp = conversation.timestamp
   message.metadata = conversation['metadata']
@@ -239,6 +240,7 @@ export function commandToMessage(msg: MessageModel, conversation: ConversationMo
   message.sender_fullname = conversation.sender_fullname
   message.recipient = conversation.recipient
   message.recipient_fullname = conversation.recipient_fullname
+  message.conversation_with = conversation.conversation_with
   message.status = +conversation.status
   message.timestamp = conversation.timestamp
   message.metadata = msg['metadata']
@@ -246,6 +248,7 @@ export function commandToMessage(msg: MessageModel, conversation: ConversationMo
   message.type = msg['type']
   message.isSender = isSender(message.sender, currentUserId)
   message.attributes = { ...conversation.attributes, ...msg['attributes']}
+  
 
   return message as MessageModel
 }

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

@@ -19,6 +19,26 @@ export function windowsMatchMedia() {
   }
 }
 
+/** */
+export function isOniOSMobileDevice(): boolean {
+  let IS_ON_IOS_MOBILE_DEVICE = false;
+  if (/iPad|iPhone|iPod/i.test(window.navigator.userAgent)) {
+    IS_ON_IOS_MOBILE_DEVICE = true;
+
+  }
+  // console.log('[CONVS-DETAIL][HEADER] IS_ON_IOS_MOBILE_DEVICE ', this.IS_ON_IOS_MOBILE_DEVICE)
+  return IS_ON_IOS_MOBILE_DEVICE;
+}
+
+export function isOnMobileDevice() {
+  let IS_ON_MOBILE_DEVICE = false;
+  if (/Android|iPhone/i.test(window.navigator.userAgent)) {
+    IS_ON_MOBILE_DEVICE = true;
+  }
+  // this.logger.log('[APP-COMP] IS_ON_MOBILE_DEVICE', this.IS_ON_MOBILE_DEVICE)
+  return IS_ON_MOBILE_DEVICE;
+}
+
 /**
  * chiamata da ChatConversationsHandler
  * restituisce url '/conversations'

package/src/launch_template.js

@@ -0,0 +1,417 @@
+/** */
+ready(function() {
+    console.log('DOM is ready, call initWidget');
+    if(!window.tileDeskAsyncInit){
+      initAysncEvents();
+    }
+    initWidget();
+});
+
+/** */
+function ready(callbackFunction){
+    // if(document.readyState != 'loading'){
+    //   console.log('in ifffffff', document.readyState)
+    //   callbackFunction()
+    // }
+    // else{
+    //   document.addEventListener("DOMContentLoaded", callbackFunction)
+    // }
+    document.addEventListener('scroll', start);
+    document.addEventListener('mousedown', start);
+    document.addEventListener('mousemove', start);
+    document.addEventListener('touchstart', start);
+    document.addEventListener('keydown', start);
+
+    function start(){
+      if(document.readyState==='complete'){
+        callbackFunction()
+      }else if(window.attachEvent){
+        window.attachEvent('onload',callbackFunction);
+      }else{
+        window.addEventListener('load',callbackFunction,false);
+      }
+      
+      document.removeEventListener('scroll', start);
+      document.removeEventListener('mousedown', start);
+      document.removeEventListener('mousemove', start);
+      document.removeEventListener('touchstart', start);
+      document.removeEventListener('scroll', start);
+      document.removeEventListener('keydown', start);
+    }
+
+    
+}
+       
+
+/** */
+function loadIframe(tiledeskScriptBaseLocation) {
+    var dev = window.location.hostname.includes('localhost')? true: false;
+
+    var containerDiv = document.createElement('div');
+    containerDiv.setAttribute('id','tiledesk-container');
+    containerDiv.classList.add("closed");
+    document.body.appendChild(containerDiv);
+    
+    var iDiv = document.createElement('div');
+    iDiv.setAttribute('id','tiledeskdiv');
+    containerDiv.appendChild(iDiv);
+
+    var ifrm = document.createElement("iframe");
+    ifrm.setAttribute("frameborder", "0");
+    ifrm.setAttribute("border", "0");
+    ifrm.setAttribute("title", "Tiledesk Widget")
+       
+    var srcTileDesk = '<html lang="en">';
+    srcTileDesk += '<head>';
+    srcTileDesk += '<meta charset="utf-8">';
+    srcTileDesk += '<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />';
+    srcTileDesk += '<title>Tilechat Widget</title>';
+    srcTileDesk += '<base href="'+tiledeskScriptBaseLocation+ '/">';
+    srcTileDesk += '<link rel="icon" type="image/x-icon" href="favicon.ico">';
+    srcTileDesk += '<link rel="stylesheet" type="text/css" href="' + tiledeskScriptBaseLocation +'/assets/styles/tiledesk_v1.scss" media="all">';
+    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 += '<link type="text/css" rel="stylesheet" href="'+tiledeskScriptBaseLocation+'/{{styles}}.css" media="all"></link>';
+    srcTileDesk += '</body>';
+    srcTileDesk += '</html>';
+    
+    ifrm.setAttribute('id','tiledeskiframe');
+    ifrm.setAttribute('tiledesk_context','parent');
+   
+    /** */
+    window.tiledesk.on('onInit', function(event_data) {
+        // console.log("launch onInit isopen", tiledeskScriptBaseLocation, window.tiledesk.angularcomponent.component.g.isOpen);
+        if (window.tiledesk.angularcomponent.component.g.isOpen) {
+            containerDiv.classList.add("open");
+            containerDiv.classList.remove("closed");
+            iDiv.classList.remove("callout");
+        } else {
+            containerDiv.classList.add("closed");
+            containerDiv.classList.remove("open");
+            iDiv.classList.remove("messagePreview");
+        }         
+    });
+    /** */
+    window.tiledesk.on('onOpen', function(event_data) {
+        containerDiv.classList.add("open");
+        containerDiv.classList.remove("closed");
+        iDiv.classList.remove("callout");
+        iDiv.classList.remove("messagePreview");
+    });
+    /** */
+    window.tiledesk.on('onClose', function(event_data) {
+        containerDiv.classList.add("closed");
+        containerDiv.classList.remove("open");
+    });
+
+    /** */
+    window.tiledesk.on('onOpenEyeCatcher', function(event_data) {
+        iDiv.classList.add("callout");
+    });
+    /** */
+    window.tiledesk.on('onClosedEyeCatcher', function(event_data) {
+        iDiv.classList.remove("callout");
+    });
+
+    /** */
+    window.tiledesk.on('onConversationUpdated', function(event_data) {
+        const messagePreview = window.tiledesk.angularcomponent.component.g.isOpenNewMessage
+        const isOpen = window.tiledesk.angularcomponent.component.g.isOpen
+        try {
+            if (!isOpen && messagePreview) {
+                iDiv.classList.add("messagePreview");
+                iDiv.classList.remove("callout");
+                // ----------------------------//
+            }  
+        } catch(er) {
+            console.error("onConversationUpdated > error: " + er);
+        }
+    });
+
+    window.tiledesk.on('onCloseMessagePreview', function(event_data) {
+        try {
+            iDiv.classList.remove("messagePreview");
+        } catch(er) {
+            console.error("onCloseMessagePreview > error: " + er);
+        }
+    });
+
+
+    /**** BEGIN EVENST ****/
+    /** */
+    window.tiledesk.on('onNewConversation', function(event_data) {
+        // console.log("test-custom-auth.html onNewConversation >>>",event_data);
+        const tiledeskToken = window.tiledesk.angularcomponent.component.g.tiledeskToken;
+        // 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
+          httpRequest.setRequestHeader('Content-type', 'application/json');
+          httpRequest.setRequestHeader('Authorization',tiledeskToken);
+          httpRequest.send(JSON.stringify({ "name":"new_conversation",
+                                            "attributes": {
+                                              "request_id":event_data.detail.newConvId, 
+                                              "department": event_data.detail.global.departmentSelected.id, 
+                                              "participants": event_data.detail.global.participants, 
+                                              "language": event_data.detail.global.lang, 
+                                              "subtype":"info", 
+                                              "fullname":event_data.detail.global.attributes.userFullname, 
+                                              "email":event_data.detail.global.attributes.userEmail, 
+                                              "attributes":event_data.detail.global.attributes
+                                            }
+                                          }
+          ));
+        }
+    });
+
+    /** @deprecated event */
+    window.tiledesk.on('onLoggedIn', function(event_data) {
+        // console.log("test-custom-auth.html onLoggedIn",event_data);
+        const tiledeskToken = window.tiledesk.angularcomponent.component.g.tiledeskToken;
+        // console.log("------------------->>>> tiledeskToken: ",window.tiledesk.angularcomponent.component.g);
+        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
+            httpRequest.setRequestHeader('Content-type','application/json');
+            httpRequest.setRequestHeader('Authorization',tiledeskToken);
+            httpRequest.send(JSON.stringify({"name":"logged_in","attributes": {"fullname":event_data.detail.global.attributes.userFullname, "email":event_data.detail.global.attributes.userEmail, "language": event_data.detail.global.lang, "attributes":event_data.detail.global.attributes}}));
+        }
+    });
+
+    /** */
+    window.tiledesk.on('onAuthStateChanged', function(event_data) {
+        // console.log("test-custom-auth.html onAuthStateChanged",event_data);
+        const tiledeskToken = window.tiledesk.angularcomponent.component.g.tiledeskToken;
+        // console.log("------------------->>>> tiledeskToken: ",window.tiledesk.angularcomponent.component.g);
+        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
+            httpRequest.setRequestHeader('Content-type','application/json');
+            httpRequest.setRequestHeader('Authorization',tiledeskToken);
+            httpRequest.send(JSON.stringify({"name":"auth_state_changed","attributes": {"user_id":event_data.detail.global.senderId, "isLogged":event_data.detail.global.isLogged, "event":event_data.detail.event, "subtype":"info", "fullname":event_data.detail.global.attributes.userFullname, "email":event_data.detail.global.attributes.userEmail, "language":event_data.detail.global.lang, "attributes":event_data.detail.global.attributes}}));  
+            httpRequest.onload = function(event) {
+              if(event.target && event.target.status === 401){
+                window.tiledesk.hide()
+                window.tiledesk.dispose()
+              }
+            } 
+          }
+    }); 
+    /**** END EVENST ****/
+
+    iDiv.appendChild(ifrm);
+
+    if(tiledeskScriptBaseLocation.includes('localhost')){
+      ifrm.contentWindow.document.open();
+      ifrm.contentWindow.document.write(srcTileDesk);
+      ifrm.contentWindow.document.close();
+    }else {
+      ifrm.srcdoc = srcTileDesk
+    }
+
+
+}
+
+
+function initAysncEvents() {
+  console.log('INIT ASYNC EVENTS')
+
+  window.tileDeskAsyncInit = function() {  
+    // console.log('launch tiledeskAsyncInit:::', window.Tiledesk.q)
+    window.tiledesk.on('onLoadParams', function(event_data) {
+      if (window.Tiledesk && window.Tiledesk.q && window.Tiledesk.q.length>0) {
+        window.Tiledesk.q.forEach(f => {
+          if (f.length>=1) {
+            var functionName = f[0];
+            if (functionName==="onLoadParams") {
+              //CALLING ONLY FUNCTION 'onLoadParams'
+              if (f.length==2) {
+                var functionCallback = f[1];
+                if(typeof functionCallback === "function") {
+                  window.tiledesk.on(functionName, functionCallback); 
+                  functionCallback(event_data);
+                } else {
+                  console.error("initAysncEvents --> functionCallback is not a function.");
+                }
+              }   
+            }else if(functionName=='setParameter'){
+              //CALLING ONLY METHOD 'setParameter' AND CHECK IF IT HAS OBJECT ARG
+              if (f.length==2) {
+                var functionArgs = f[1];
+                if(typeof functionArgs === "object") {
+                  window.tiledesk[functionName](functionArgs);
+                } else {
+                  console.error("initAysncEvents --> functionArgs is not a object.");
+                }
+              }
+            }
+          }
+        });
+      }
+    });
+
+    window.tiledesk.on('onBeforeInit', function(event_data) {
+      if (window.Tiledesk && window.Tiledesk.q && window.Tiledesk.q.length>0) {
+        // console.log("w.q", window.Tiledesk.q);
+        window.Tiledesk.q.forEach(f => {
+          if (f.length>=1) {
+            var functionName = f[0];
+            if (functionName==="onLoadParams" || functionName==="setParameter") {
+              //SKIP FUNCTION WITH NAMES 'onLoadParams' AND METHOD 'setParameter'
+            } else if (functionName.startsWith("on")) {
+              // CALLING METHOD THAT STARTS WITH 'on'
+              if (f.length==2) {
+                var functionCallback = f[1];
+                if(typeof functionCallback === "function"){
+                  window.tiledesk.on(functionName, functionCallback); //potrei usare window.Tiledesk ?!?
+                  if (functionName==="onBeforeInit") {
+                      functionCallback(event_data)
+                  }
+                } else {
+                  console.error("functionCallback is not a function.");
+                }
+              }   
+            } else {
+              //CALLING REMAININGS METHOD and CHECK IF CONTAINS ARG TO PASS THROUGH THE METHOD
+              if (f.length==2) {
+                let args = f[1]
+                window.tiledesk[functionName](args);
+              } else {
+                window.tiledesk[functionName](); 
+              }
+            }
+
+          }   
+        });
+
+      }
+
+      // RICHIAMATO DOPO L'INIT DEL WIDGET
+      window.Tiledesk = function() {
+        if (arguments.length>=1) {
+          var functionName = arguments[0];
+          if (arguments.length==2) {
+              var functionCallback = arguments[1];
+          }
+          var methodOrProperty = window.tiledesk[functionName];
+          if(typeof methodOrProperty==="function"){            
+            return window.tiledesk[functionName](functionCallback);            
+          }else { //property
+            return window.tiledesk[functionName];
+          }
+        }
+      };
+
+    });
+  }
+}
+
+
+/**
+ * 
+ */
+function initWidget() {
+    var tiledeskroot = document.createElement('chat-root');
+    var tiledeskScriptLocation = document.getElementById("tiledesk-jssdk").src;
+    //var currentScript = document.currentScript;
+    //var tiledeskScriptLocation = '';
+    //setInterval(function(){
+        //tiledeskScriptLocation = currentScript.src;
+        var tiledeskScriptBaseLocation = tiledeskScriptLocation.replace("/launch.js","");
+        window.tiledesk = new function() {
+            //this.type = "macintosh";
+            this.tiledeskroot = tiledeskroot;
+            this.on = function (event_name, handler) {
+                tiledeskroot.addEventListener(event_name, handler);
+            };
+            this.getBaseLocation = function() {
+                return tiledeskScriptBaseLocation;
+            }
+        }
+
+        try {
+            window.tileDeskAsyncInit();
+        }catch(er) {
+            if (typeof window.tileDeskAsyncInit == "undefined") { 
+                console.log("tileDeskAsyncInit() doesn't exists");
+            } else {
+                console.log(er);
+            }
+        }
+        document.body.appendChild(tiledeskroot);
+        initCSSWidget(tiledeskScriptBaseLocation);
+        loadIframe(tiledeskScriptBaseLocation);
+    //},2000);
+}
+
+
+
+
+
+function initCSSWidget(tiledeskScriptBaseLocation) {
+    var cssId = 'iframeCss';  // you could encode the css path itself to generate id..
+    // if (!document.getElementById(cssId))
+    // {
+        var head  = document.getElementsByTagName('head')[0];
+        var link  = document.createElement('link');
+        link.id   = cssId;
+        link.rel  = 'stylesheet';
+        link.type = 'text/css';
+        link.href = tiledeskScriptBaseLocation+'/iframe-style.css';
+        link.media = 'print';
+        link.onload = function(){
+          link.media = 'all'
+        }
+        head.appendChild(link);
+    // }
+}
+
+
+//DEPRECATED
+function signInWithCustomToken() {
+    let json = JSON.stringify({
+        "id_project": "5b55e806c93dde00143163dd"
+    });
+	var httpRequest = createCORSRequest('POST', 'https://tiledesk-server-pre.herokuapp.com/auth/signinAnonymously',true); 
+    if (!httpRequest) {
+        throw new Error('CORS not supported');
+    }
+    httpRequest.setRequestHeader('Content-type','application/json');
+	  httpRequest.send(json);
+    httpRequest.onload = function() {
+      if (httpRequest.readyState === XMLHttpRequest.DONE) {
+        if (httpRequest.status === 200) {
+                    try {
+                        var response = JSON.parse(httpRequest.responseText);
+                        window.tiledesk.signInWithCustomToken(response);
+                    }
+                    catch(err) {
+                        console.error(err.message);
+                    }
+                    return true;
+        } else {
+            alert('There was a problem with the request.');
+        }
+      }
+   	};
+	httpRequest.onerror = function() {
+		console.error('There was an error!');
+        return false;
+	};
+}
+
+
+function createCORSRequest(method, url, async) {
+	var xhr = new XMLHttpRequest();
+	if ("withCredentials" in xhr) {
+		xhr.open(method, url, async);
+	} else if (typeof XDomainRequest != "undefined") {
+		xhr = new XDomainRequest();
+		xhr.open(method, url);
+	} else {
+		xhr = null;
+	}
+	return xhr;
+}