@chat21/chat21-web-widget 5.0.59-rc.1 → 5.0.59-rc.3

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # chat21-web-widget ver 5.0
 
+### 5.0.59-rc.3
+- bug-fixed: if mobileMarginX or MobileMarginY is set, widget do not fit on fullscreen once is opened
+
+### 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
 

package/package.json

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

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/app.component.ts

@@ -1,3 +1,4 @@
+import { ScriptService } from './../chat21-core/providers/scripts/script.service';
 import { TYPE_DIRECT } from './../chat21-core/utils/constants';
 /** ANGULAR MODULES */
 import { AfterViewInit, Component, ElementRef, HostListener, NgZone, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
@@ -113,6 +114,7 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
     private appStorageService: AppStorageService,
     private translatorService: TranslatorService,
     private translateService: CustomTranslateService,
+    private scriptService: ScriptService,
     public chatManager: ChatManager,
     private tiledeskRequestsService: TiledeskRequestsService,
     public tiledeskAuthService: TiledeskAuthService,
@@ -123,220 +125,222 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
     public imageRepoService: ImageRepoService,
     public typingService: TypingService,
     public presenceService: PresenceService,
-    public uploadService: UploadService
+    public uploadService: UploadService 
   ){}
 
-  ngOnInit(): void {
-    this.logger.info('[APP-CONF]---------------- ngOnInit: APP.COMPONENT ---------------- ')
-    this.initWidgetParamiters();
-  }
+    ngOnInit(): void {
+        this.logger.info('[APP-CONF]---------------- ngOnInit: APP.COMPONENT ---------------- ')
+        this.initWidgetParamiters();
+    }
 
-  ngAfterViewInit(): void {
-    this.logger.info('[APP-CONF]---------------- ngAfterViewInit: APP.COMPONENT ---------------- ')
-    this.ngZone.run(() => {
-        const that = this;
-        const subChangedConversation = this.conversationsHandlerService.conversationChanged.subscribe((conversation) => {
-            // that.ngZone.run(() => {
-            if (conversation) {
-                this.onImageLoaded(conversation)
-                this.onConversationLoaded(conversation)
+    ngAfterViewInit(): void {
+        this.logger.info('[APP-CONF]---------------- ngAfterViewInit: APP.COMPONENT ---------------- ')
+        this.ngZone.run(() => {
+            const that = this;
+            const subChangedConversation = this.conversationsHandlerService.conversationChanged.subscribe((conversation) => {
+                // that.ngZone.run(() => {
+                if (conversation) {
+                    this.onImageLoaded(conversation)
+                    this.onConversationLoaded(conversation)
 
-                if(conversation.recipient === this.g.senderId && isUserBanned(conversation)){
-                    that.disposeWidget();
+                    if(conversation.recipient === this.g.senderId && isUserBanned(conversation)){
+                        that.disposeWidget();
+                        return;
+                    }
+    
+                    if(conversation.is_new && conversation.sender !== this.g.senderId && !isInfo(conversation)){
+                        that.manageTabNotification();
+                    }
+
+                    if (that.g.isOpen === true) {
+                        that.g.setParameter('displayEyeCatcherCard', 'none');
+
+                        this.logger.debug('[APP-COMP] obsChangeConversation ::: ', conversation);
+                        if (conversation.attributes && conversation.attributes['subtype'] === 'info') {
+                            return;
+                        }
+
+                    } else {
+                        // if(conversation.is_new && isJustRecived(this.g.startedAt.getTime(), conversation.timestamp)){
+                        //widget closed
+                        if(conversation.is_new && conversation.sender !== this.g.senderId && !isInfo(conversation)){
+                            that.lastConversation = conversation;
+                            that.g.isOpenNewMessage = true;
+                            that.logger.debug('[APP-COMP] lastconversationnn', that.lastConversation)
+                        }
+                        
+
+                        let badgeNewConverstionNumber = that.conversationsHandlerService.countIsNew()
+                        that.g.setParameter('conversationsBadge', badgeNewConverstionNumber);
+                        // }
+                    }
+
+                    that.triggerOnConversationUpdated(conversation);
+                } else {
+                    this.logger.debug('[APP-COMP] oBSconversationChanged null: errorrr')
                     return;
                 }
- 
-                if(conversation.is_new && conversation.sender !== this.g.senderId && !isInfo(conversation)){
-                    that.manageTabNotification();
-                }
+                
+                // });
+            });
+            this.subscriptions.push(subChangedConversation);
 
-                if (that.g.isOpen === true) {
+            const subAddedConversation = this.conversationsHandlerService.conversationAdded.subscribe((conversation) => {
+                // that.ngZone.run(() => {
+                if (that.g.isOpen === true && conversation) {
                     that.g.setParameter('displayEyeCatcherCard', 'none');
-
-                    this.logger.debug('[APP-COMP] obsChangeConversation ::: ', conversation);
+                    that.triggerOnConversationUpdated(conversation);
+                    that.logger.debug('[APP-COMP] obsAddedConversation ::: ', conversation);
                     if (conversation.attributes && conversation.attributes['subtype'] === 'info') {
                         return;
                     }
-
-                } else {
-                    // if(conversation.is_new && isJustRecived(this.g.startedAt.getTime(), conversation.timestamp)){
-                    //widget closed
-                    if(conversation.is_new && conversation.sender !== this.g.senderId && !isInfo(conversation)){
+                    if (conversation.is_new) {
+                        that.manageTabNotification()
+                        // this.soundMessage(); 
+                    }
+                    if(this.g.isOpen === false){
                         that.lastConversation = conversation;
                         that.g.isOpenNewMessage = true;
-                        that.logger.debug('[APP-COMP] lastconversationnn', that.lastConversation)
                     }
-                    
+                } else {
+                    //widget closed
 
                     let badgeNewConverstionNumber = that.conversationsHandlerService.countIsNew()
                     that.g.setParameter('conversationsBadge', badgeNewConverstionNumber);
-                    // }
                 }
-
-                that.triggerOnConversationUpdated(conversation);
-            } else {
-                this.logger.debug('[APP-COMP] oBSconversationChanged null: errorrr')
-                return;
-            }
-            
-            // });
-        });
-        this.subscriptions.push(subChangedConversation);
-
-        const subAddedConversation = this.conversationsHandlerService.conversationAdded.subscribe((conversation) => {
-            // that.ngZone.run(() => {
-            if (that.g.isOpen === true && conversation) {
-                that.g.setParameter('displayEyeCatcherCard', 'none');
-                that.triggerOnConversationUpdated(conversation);
-                that.logger.debug('[APP-COMP] obsAddedConversation ::: ', conversation);
-                if (conversation.attributes && conversation.attributes['subtype'] === 'info') {
-                    return;
+                // that.manageTabNotification()
+                // });
+                if(conversation){
+                    this.onImageLoaded(conversation)
+                    this.onConversationLoaded(conversation)
                 }
-                if (conversation.is_new) {
-                    that.manageTabNotification()
-                    // this.soundMessage(); 
+                
+            });
+            this.subscriptions.push(subAddedConversation);
+
+            const subAddedArchivedConversations = this.archivedConversationsService.archivedConversationAdded.subscribe((conversation) => {
+                // that.ngZone.run(() => {
+                if (conversation) {
+                    that.triggerOnConversationUpdated(conversation);
+                    this.onImageLoaded(conversation)
+                    this.onConversationLoaded(conversation)
                 }
-                if(this.g.isOpen === false){
-                    that.lastConversation = conversation;
-                    that.g.isOpenNewMessage = true;
+                // });
+            });
+            this.subscriptions.push(subAddedArchivedConversations);
+
+            const subRemovedArchivedConversations = this.archivedConversationsService.archivedConversationRemoved.subscribe((conversation) => {
+                // that.ngZone.run(() => {
+                if (conversation) {
+                    this.isConversationArchived = false;
+                    that.triggerOnConversationUpdated(conversation);
                 }
-            } else {
-                //widget closed
+                // });
+            });
+            this.subscriptions.push(subRemovedArchivedConversations);
 
-                let badgeNewConverstionNumber = that.conversationsHandlerService.countIsNew()
-                that.g.setParameter('conversationsBadge', badgeNewConverstionNumber);
-            }
-            // that.manageTabNotification()
-            // });
-            if(conversation){
-                this.onImageLoaded(conversation)
-                this.onConversationLoaded(conversation)
-            }
-            
         });
-        this.subscriptions.push(subAddedConversation);
+        this.appStorageService.initialize(environment.storage_prefix, this.g.persistence, this.g.projectid)
+        this.tiledeskAuthService.initialize(this.appConfigService.getConfig().apiUrl)
+        this.tiledeskRequestsService.initialize(this.appConfigService.getConfig().apiUrl, this.g.projectid)
+        this.messagingAuthService.initialize();
+        this.chatManager.initialize();
+        this.uploadService.initialize();
+    }
 
-        const subAddedArchivedConversations = this.archivedConversationsService.archivedConversationAdded.subscribe((conversation) => {
-            // that.ngZone.run(() => {
-            if (conversation) {
-                that.triggerOnConversationUpdated(conversation);
-                this.onImageLoaded(conversation)
-                this.onConversationLoaded(conversation)
-            }
-            // });
-        });
-        this.subscriptions.push(subAddedArchivedConversations);
+    private initWidgetParamiters(){
+        const that = this;
+        const obsSettingsService = this.globalSettingsService.obsSettingsService.subscribe((resp) => {
+            if(resp){
+
+                // /** INIT  */
+                this.logger.setLoggerConfig(this.g.isLogEnabled, this.g.logLevel)
+                this.tabTitle = this.g.windowContext.window.document.title
+                this.appStorageService.initialize(environment.storage_prefix, this.g.persistence, this.g.projectid)
+                this.logger.debug('[APP-COMP] check if token is passed throw url: ', this.g.jwt);
+                /**CHECK IF JWT IS IN URL PARAMETERS */
+                if (this.g.jwt) {
+                    // logging in with custom token from url
+                    // add JWY token to localstorage and authenticate with it           this.logger.debug('[APP-COMP] token from url. isShown:', this.g.isShown, 'autostart:', this.g.autoStart)
+                    this.logger.debug('[APP-COMP]  ----------------  logging in with custom token from url ---------------- ');
+                    //   this.g.autoStart = false;
+                    const storedTiledeskToken = this.appStorageService.getItem('tiledeskToken')
+                    storedTiledeskToken === this.g.jwt? null: this.appStorageService.setItem('tiledeskToken', this.g.jwt);
+                    this.g.tiledeskToken = this.g.jwt;
+                    // this.signInWithCustomToken(this.g.jwt) // moved to authenticate() in else(tiledeskToken)
+                }
 
-        const subRemovedArchivedConversations = this.archivedConversationsService.archivedConversationRemoved.subscribe((conversation) => {
-            // that.ngZone.run(() => {
-            if (conversation) {
-                this.isConversationArchived = false;
-                that.triggerOnConversationUpdated(conversation);
+                /** INIT LABELS TRANSLATIONS */
+                this.translatorService.initI18n().then((result) => {
+                    this.logger.debug('[APP-COMP] »»»» APP-COMPONENT.TS initI18n result', result);
+                    const browserLang = this.translatorService.getLanguage();
+                    // moment.locale(browserLang)
+                    dayjs.locale(browserLang)
+                    this.translatorService.translate(this.g);
+                }).then(() => {
+                    /** INIT  */
+                    that.initAll();
+                    /** TRIGGER ONBEFORE INIT */
+                    that.triggerOnBeforeInit();
+                    /** AUTH */
+                    that.setAuthSubscription();
+                    /** SCRIPT LOAD */
+                    that.loadCustomScript(this.appConfigService.getConfig())
+                })
+        
             }
-            // });
         });
-        this.subscriptions.push(subRemovedArchivedConversations);
-
-    });
-    this.appStorageService.initialize(environment.storage_prefix, this.g.persistence, this.g.projectid)
-    this.tiledeskAuthService.initialize(this.appConfigService.getConfig().apiUrl)
-    this.tiledeskRequestsService.initialize(this.appConfigService.getConfig().apiUrl, this.g.projectid)
-    this.messagingAuthService.initialize();
-    this.chatManager.initialize();
-    this.uploadService.initialize();
-  }
-
-  private initWidgetParamiters(){
-    const that = this;
-    const obsSettingsService = this.globalSettingsService.obsSettingsService.subscribe((resp) => {
-        if(resp){
-
-            // /** INIT  */
-            this.logger.setLoggerConfig(this.g.isLogEnabled, this.g.logLevel)
-            this.tabTitle = this.g.windowContext.window.document.title
-            this.appStorageService.initialize(environment.storage_prefix, this.g.persistence, this.g.projectid)
-            this.logger.debug('[APP-COMP] check if token is passed throw url: ', this.g.jwt);
-            /**CHECK IF JWT IS IN URL PARAMETERS */
-            if (this.g.jwt) {
-                // logging in with custom token from url
-                // add JWY token to localstorage and authenticate with it           this.logger.debug('[APP-COMP] token from url. isShown:', this.g.isShown, 'autostart:', this.g.autoStart)
-                this.logger.debug('[APP-COMP]  ----------------  logging in with custom token from url ---------------- ');
-                //   this.g.autoStart = false;
-                const storedTiledeskToken = this.appStorageService.getItem('tiledeskToken')
-                storedTiledeskToken === this.g.jwt? null: this.appStorageService.setItem('tiledeskToken', this.g.jwt);
-                this.g.tiledeskToken = this.g.jwt;
-                // this.signInWithCustomToken(this.g.jwt) // moved to authenticate() in else(tiledeskToken)
-            }
-
-            /** INIT LABELS TRANSLATIONS */
-            this.translatorService.initI18n().then((result) => {
-                this.logger.debug('[APP-COMP] »»»» APP-COMPONENT.TS initI18n result', result);
-                const browserLang = this.translatorService.getLanguage();
-                // moment.locale(browserLang)
-                dayjs.locale(browserLang)
-                this.translatorService.translate(this.g);
-            }).then(() => {
-                /** INIT  */
-                that.initAll();
-                /** TRIGGER ONBEFORE INIT */
-                that.triggerOnBeforeInit();
-                /** AUTH */
-                that.setAuthSubscription();
-            })
-      
-        }
-    });
-    this.subscriptions.push(obsSettingsService);
-    this.globalSettingsService.initWidgetParamiters(this.g, this.el);
+        this.subscriptions.push(obsSettingsService);
+        this.globalSettingsService.initWidgetParamiters(this.g, this.el);
 
-    // SET AUDIO
-    this.audio = new Audio();
-    this.audio.src = this.g.baseLocation + URL_SOUND_LIST_CONVERSATION;
-    this.audio.load();
-  }
+        // SET AUDIO
+        this.audio = new Audio();
+        this.audio.src = this.g.baseLocation + URL_SOUND_LIST_CONVERSATION;
+        this.audio.load();
+    }
 
-  private initAll() {
-    this.addComponentToWindow(this.ngZone);
+    private initAll() {
+        this.addComponentToWindow(this.ngZone);
 
-    //INIT TRIGGER-HANDLER
-    this.triggerHandler.setElement(this.el)
-    this.triggerHandler.setWindowContext(this.g.windowContext)
+        //INIT TRIGGER-HANDLER
+        this.triggerHandler.setElement(this.el)
+        this.triggerHandler.setWindowContext(this.g.windowContext)
 
-    // /** TRANSLATION LOADER: */
-    // //  this.translatorService.translate(this.g);
-    // this.translatorService.initI18n().then((result) => {
-    //     this.g.wdLog(['»»»» APP-COMPONENT.TS initI18n result', result]);
-    //     this.translatorService.translate(this.g);
-    // });
+        // /** TRANSLATION LOADER: */
+        // //  this.translatorService.translate(this.g);
+        // this.translatorService.initI18n().then((result) => {
+        //     this.g.wdLog(['»»»» APP-COMPONENT.TS initI18n result', result]);
+        //     this.translatorService.translate(this.g);
+        // });
 
-    /** SET ATTRIBUTES */
-    const attributes = this.setAttributesFromStorageService();
-    if (attributes) {
-        this.g.attributes = attributes;
-    }
-    this.setStyleMap()
+        /** SET ATTRIBUTES */
+        const attributes = this.setAttributesFromStorageService();
+        if (attributes) {
+            this.g.attributes = attributes;
+        }
+        this.setStyleMap()
 
-    // ------------------------------- //
+        // ------------------------------- //
 
-    // ------------------------------- //
-    /**
-     * INIZIALIZE GLOBALS :
-     * create settings object used in trigger
-     * set isMobile
-     * set attributes
-    */
-    this.g.initialize();
-    // ------------------------------- //
+        // ------------------------------- //
+        /**
+         * INIZIALIZE GLOBALS :
+         * create settings object used in trigger
+         * set isMobile
+         * set attributes
+        */
+        this.g.initialize();
+        // ------------------------------- //
 
-    this.removeFirebasewebsocketFromLocalStorage();
-    // this.triggerLoadParamsEvent();
-    // this.addComponentToWindow(this.ngZone); // forse dovrebbe stare prima di tutti i triggers
+        this.removeFirebasewebsocketFromLocalStorage();
+        // this.triggerLoadParamsEvent();
+        // this.addComponentToWindow(this.ngZone); // forse dovrebbe stare prima di tutti i triggers
 
-    this.initLauncherButton();
-    this.triggerLoadParamsEvent(); // first trigger
-    //this.setAvailableAgentsStatus();
+        this.initLauncherButton();
+        this.triggerLoadParamsEvent(); // first trigger
+        //this.setAvailableAgentsStatus();
 
-  }
+    }
 
     // ========= begin:: SUBSCRIPTIONS ============//
     private async setAuthSubscription(){
@@ -2064,6 +2068,13 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
         this.el.nativeElement.style.setProperty('--button-in-msg-font-size', this.g.buttonFontSize)
     }
 
+
+    private loadCustomScript(config){
+        if(config.hasOwnProperty("globalRemoteJSSrc")){
+          this.scriptService.buildScriptArray(config['globalRemoteJSSrc'])
+        }
+    }
+
     // ========= begin:: DESTROY ALL SUBSCRIPTIONS ============//
     /** elimino tutte le sottoscrizioni */
     ngOnDestroy() {

package/src/app/app.module.ts

@@ -62,10 +62,11 @@ import { TranslateModule } from '@ngx-translate/core';
 import { PickerModule } from '@ctrl/ngx-emoji-mart';
 import { LoggerModule, NGXLogger, NgxLoggerLevel } from "ngx-logger";
 
-//DIRECTIVES
+//DIRECTIVES-PIPES
 import { HtmlEntitiesEncodePipe } from './pipe/html-entities-encode.pipe';
 import { MarkedPipe } from './pipe/marked.pipe';
 import { SafeHtmlPipe } from './pipe/safe-html.pipe';
+import { TooltipDirective } from 'src/app/directives/tooltip.directive';
 
 //LOGGER SERVICES
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
@@ -128,7 +129,7 @@ import { WaitingService } from './providers/waiting.service';
 import { StarRatingWidgetService } from './providers/star-rating-widget.service';
 import { LikeUnlikeComponent } from './component/message/like-unlike/like-unlike.component';
 import { Rules } from './utils/rules';
-import { TooltipDirective } from 'src/app/directives/tooltip.directive';
+import { ScriptService } from 'src/chat21-core/providers/scripts/script.service';
 
 
 const appInitializerFn = (appConfig: AppConfigService, logger: NGXLogger) => {
@@ -381,7 +382,8 @@ export function uploadFactory(http: HttpClient, appConfig: AppConfigService, app
     TranslatorService,
     CustomTranslateService,
     Triggerhandler,
-    WaitingService
+    WaitingService,
+    ScriptService
   ],
   bootstrap: [AppComponent]
 })

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

@@ -1,7 +1,7 @@
 <!-- LOGO-->
 <div id="hiddenFooter" *ngIf="!hideTextAreaContent && poweredBy" class="fade-in-bottom" 
     [class.hideTextReply]="hideTextReply">
-    <div tabindex="-1" class="c21-powered-by" [innerHTML]="poweredBy"></div>
+    <div tabindex="-1" class="c21-powered-by" [innerHTML]="poweredBy" (click)="managePoweredBy($event)"></div>
 </div>
 
 <!-- TEXTAREA + ICONS: conv active-->

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

@@ -596,4 +596,47 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
     }
   }
 
+
+
+  managePoweredBy(event: Event){
+    event.stopPropagation();
+    this.segmentLogoClick()
+    let target = (event.target as Element) || (event.srcElement as Element) || (event.currentTarget as Element)
+    if(target.parentElement.tagName === 'A' && target.parentElement.hasAttribute('href')){
+     window.open(target.parentElement.getAttribute('href'), '_blank')
+    }
+  }
+
+
+  private segmentLogoClick(){
+    let that = this
+    if(window['analytics']){
+      try {
+        window['analytics'].page("Widget Conversation Page, LogoClick", {});
+      } catch (err) {
+        this.logger.error('Event:Signed In [page] error', err);
+      }
+  
+      try {
+        window['analytics'].identify(that.senderId, {
+          name: that.userFullname,
+          email: that.userEmail,
+          logins: 5,
+        });
+      } catch (err) {
+        this.logger.error('Event:LogoClick [identify] error', err);
+      }
+      // Segments
+      try {
+        window['analytics'].track('LogoClick', {
+          "username": that.userFullname,
+          "userId": that.userEmail,
+          "attributes": that.attributes
+        });
+      } catch (err) {
+        this.logger.error('Event:LogoClick [track] error', err);
+      }
+    }
+  }
+
 }

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

@@ -144,7 +144,7 @@
     <!-- FOOTER -->
     <div class="c21-footer fade-in-bottom-footer">
         <div id="c21-powered-by" (mouseover)="hover=true" (mouseleave)="hover=false">
-            <div tabindex="-1" class="c21-powered-by" [innerHTML]="g.poweredBy"></div>
+            <div tabindex="-1" class="c21-powered-by" [innerHTML]="g.poweredBy" (click)="managePoweredBy($event)"></div>
             <!-- <div class="build_version">{{g.BUILD_VERSION}}</div> -->
         </div>
         <chat-menu-options *ngIf="!hideSettings"

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

@@ -1,3 +1,4 @@
+import { TiledeskAuthService } from './../../../chat21-core/providers/tiledesk/tiledesk-auth.service';
 import { AfterViewInit, Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild, ViewEncapsulation } from '@angular/core';
 import { CustomTranslateService } from 'src/chat21-core/providers/custom-translate.service';
 import { ConversationModel } from '../../../chat21-core/models/conversation';
@@ -47,6 +48,7 @@ export class HomeComponent implements OnInit, AfterViewInit {
   
   constructor(
     public g: Globals,
+    private tiledeskAuthService : TiledeskAuthService,
     private customTranslateService: CustomTranslateService,
   ) {
 
@@ -85,6 +87,49 @@ export class HomeComponent implements OnInit, AfterViewInit {
   }
 
 
+  managePoweredBy(event: Event){
+    event.stopPropagation();
+    this.segmentLogoClick()
+    let target = (event.target as Element) || (event.srcElement as Element) || (event.currentTarget as Element)
+    if(target.parentElement.tagName === 'A' && target.parentElement.hasAttribute('href')){
+     window.open(target.parentElement.getAttribute('href'), '_blank')
+    }
+  }
+
+
+  private segmentLogoClick(){
+    let that = this
+    let user = this.tiledeskAuthService.getCurrentUser()
+    if(window['analytics']){
+      try {
+        window['analytics'].page("Widget Home Page, LogoClick", {});
+      } catch (err) {
+        this.logger.error('Event:Signed In [page] error', err);
+      }
+  
+      try {
+        window['analytics'].identify(user.uid, {
+          name: user.firstname + ' ' + user.lastname,
+          email: user.email,
+          logins: 5,
+        });
+      } catch (err) {
+        this.logger.error('Event:LogoClick [identify] error', err);
+      }
+      // Segments
+      try {
+        window['analytics'].track('LogoClick', {
+          "username": user.firstname + ' ' + user.lastname,
+          "userId": user.uid,
+          "attributes": that.g.attributes
+        });
+      } catch (err) {
+        this.logger.error('Event:LogoClick [track] error', err);
+      }
+    }
+  }
+
+
   
 
 

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/app/providers/global-settings.service.ts

@@ -369,6 +369,7 @@ export class GlobalSettingsService {
             this.globals.isMobile? marginX= this.globals.mobileMarginX: marginX = this.globals.marginX
             divTiledeskiframe.style.right =  marginX;
         }
+        
         if (this.globals.isMobile) {
             divTiledeskiframe.style.bottom =  this.globals.mobileMarginY
         } else {

package/src/app/utils/globals.ts

@@ -587,6 +587,18 @@ export class Globals {
     } else if(!isOpen && chat21conversationsEL){
       chat21conversationsEL.classList.remove('isMobile')
     }
+
+
+    //customize position for 'tiledeskdiv' for mobile
+    if(isOpen && this.isMobile && divTiledeskWidget){
+      divTiledeskWidget.style.right = '0px'
+      divTiledeskWidget.style.bottom = '0px'
+    } else if(!isOpen && this.isMobile && divTiledeskWidget){
+      divTiledeskWidget.style.bottom = this.marginY
+      this.align === 'left'?  divTiledeskWidget.style.left = this.mobileMarginX : divTiledeskWidget.style.right = this.mobileMarginX; 
+    }
+
+
   }
 
   setWidgetPreviewContainerSize(width: number, height: number){

package/src/chat21-core/providers/scripts/script.service.spec.ts

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

package/src/chat21-core/providers/scripts/script.service.ts

@@ -0,0 +1,71 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
+import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ScriptService {
+
+  private scriptList: Array<{name: string, loaded: boolean, src: string}> = []
+  private logger: LoggerService = LoggerInstance.getInstance();
+  
+  constructor(
+    public http: HttpClient,
+  ) { }
+
+  buildScriptArray(globalRemoteJSSrc: string){
+    this.logger.log('[SCRIPT-SERVICE] buildScriptArray globalRemoteJSSrc ', globalRemoteJSSrc);
+    if(!this.isEmpty(globalRemoteJSSrc)){
+      var scriptArray = globalRemoteJSSrc.split(",")
+
+      let count = 0;
+      scriptArray.forEach(element => {
+        count = count + 1;
+        this.scriptList.push({name: element.split('/').pop(), loaded: false, src: element})
+      });
+      this.logger.log('[SCRIPT-SERVICE] buildScriptArray ', this.scriptList);
+      this.load()
+       
+    }
+  }
+
+  load() {
+    this.logger.log('[SCRIPT-SERV] load ...scripts ', this.scriptList)
+    var promises: any[] = [];
+    this.scriptList.forEach((script) => promises.push(this.loadScript(script)));
+    return Promise.all(promises).catch((err) => {
+        // log that I have an error, return the entire array;
+        this.logger.error('A promise failed to resolve', err);
+
+    });
+  }
+
+
+  loadScript(currentScript){
+    this.logger.log('[SCRIPT-SERVICE] load script:', currentScript);
+    return new Promise((resolve, reject) => {
+      //resolve if already loaded
+      if (currentScript.loaded) {
+        resolve({ script: currentScript.name, loaded: true, status: 'Already Loaded' });
+      }
+      else {
+        //load script
+        let script = document.createElement('script')
+        script.type = 'text/javascript';
+        script.src = currentScript.src;
+        script.onload = () => {
+            currentScript.loaded = true;
+            resolve({ script: name, loaded: true, status: 'Loaded' });
+        }
+        script.onerror = (error: any) => resolve({ script: currentScript.name, loaded: false, status: 'Loaded' });
+        document.getElementsByTagName('head')[0].appendChild(script);
+      }
+    });
+  }
+
+  isEmpty(url: string) {
+    return (url === undefined || url == null || url.length <= 0) ? true : false;
+  }
+}

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'