@chat21/chat21-web-widget 5.1.7-rc7 → 5.1.11

package/CHANGELOG.md

@@ -6,6 +6,23 @@
 ### **Copyrigth**: 
 *Tiledesk SRL*
 
+# 5.1.11
+- **bug-fixed**: departmentId and departmentName is incorrect in attributes
+
+# 5.1.10
+- **changed**: Force authentication if ageChangeVisibilityDesktop or PageChangeVisibilityMobile is OPEN
+
+# 5.1.9
+- **changed**: Set the default autoStart value to false
+- **added**: Added the open widget loading spinner
+- **changed**: Load the widget without authentication and display the speech bubble
+
+# 5.1.8
+
+# 5.1.7-rc8
+- **changed**: Updated the translations of the tooltips in the footer-component
+- **changed**: Refactored the network-offline component and made it generic for displaying errors (now error-alert.component)
+
 # 5.1.7-rc7
 - **bug-fixed**: button new_conversation always appear. added subscription to conversationAdded
 

package/deploy_amazon_prod.sh

@@ -33,9 +33,9 @@ cd ../..
 
 aws  cloudfront create-invalidation --distribution-id E3EJDWEHY08CZZ --paths "/*"
 
-git restore src/environments/environment.pre.ts
+git restore src/environments/environment.prod.ts
 
-echo new version deployed $version on s3://tiledesk-widget/v5
-echo available on https://s3.eu-west-1.amazonaws.com/tiledesk-widget/v5/index.html
-echo https://widget.tiledesk.com/v5/index.html
-echo https://widget.tiledesk.com/v5/$version/index.html
+echo new version deployed $version on s3://tiledesk-widget/v6
+echo available on https://s3.eu-west-1.amazonaws.com/tiledesk-widget/v6/index.html
+echo https://widget.tiledesk.com/v6/index.html
+echo https://widget.tiledesk.com/v6/$version/index.html

package/deploy_prod.sh

@@ -8,6 +8,9 @@ echo "CREATING TAG ON GIT FOR version: $version"
 current_branch=$(git rev-parse --abbrev-ref HEAD)
 remote_name=$(git config --get branch.$current_branch.remote)
 
+# Update dependencies
+npm i
+
 ## Push commit to git
 git add .
 git commit -m "version added: ### $version"

package/package.json

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

package/src/app/app.component.html

@@ -105,11 +105,11 @@
 
     <!-- 
     ****************************************
-    ******* MODALE OFFLINE NETWORK *********
+    ********* MODALE ERROR ALERT ***********
     ****************************************
     -->
-    <div *ngIf="g.isOpen && !isOnline" class="modal-page star-rating-widget active">
-      <chat-network-offline></chat-network-offline>
+    <div *ngIf="g.isOpen && isShowErrorMessage" class="modal-page star-rating-widget active">
+      <chat-error-alert [errorMessage]="errorMessage" [errorKeyMessage]="errorKeyMessage" [errorParams]="errorParams"></chat-error-alert>
     </div>
 
   </div>
@@ -145,5 +145,12 @@
   <chat-launcher-button *ngIf="isInitialized" 
     (onButtonClicked)="onOpenCloseWidget($event)">
   </chat-launcher-button>
-  
+
+  <!-- Loading Spinner -->
+  <div *ngIf="loading" class="tiledesk-loading-overlay">
+    <div class="tiledesk-loading-spinner">
+      <div class="spinner-circle"></div>
+      <div class="loading-text">{{ translationMap.get('LABEL_LOADING') }}</div>
+    </div>
+  </div>
 </div>

package/src/app/app.component.scss

@@ -571,7 +571,7 @@ chat-root {
         /***************************
         ***** NETWORK OFFLINE ******
         ****************************/
-        chat-network-offline {
+        chat-error-alert {
             position: absolute;
             width: 100%;
             height: 100%;
@@ -764,4 +764,63 @@ chat-root {
         }
     }
 
+    // ========= BEGIN: LOADING SPINNER ========= //
+    .tiledesk-loading-overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(248, 249, 250, 0.95);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        z-index: 9999;
+        backdrop-filter: blur(2px);
+    }
+
+    .tiledesk-loading-spinner {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 16px;
+    }
+
+    .spinner-circle {
+        width: 50px;
+        height: 50px;
+        border: 4px solid rgba(59, 130, 246, 0.2);
+        border-top-color: #3b82f6;
+        border-radius: 50%;
+        animation: spin 0.8s linear infinite;
+    }
+
+    @keyframes spin {
+        0% {
+            transform: rotate(0deg);
+        }
+        100% {
+            transform: rotate(360deg);
+        }
+    }
+
+    .loading-text {
+        font-family: var(--font-family-bubble-message, 'Roboto', 'Google Sans', Helvetica, Arial, sans-serif);
+        font-size: 14px;
+        font-weight: 500;
+        color: #3b82f6;
+        letter-spacing: 0.5px;
+        animation: pulse 1.5s ease-in-out infinite;
+    }
+
+    @keyframes pulse {
+        0%, 100% {
+            opacity: 1;
+        }
+        50% {
+            opacity: 0.5;
+        }
+    }
+    // ========= END: LOADING SPINNER ========= //
+
 }

package/src/app/app.component.ts

@@ -108,7 +108,14 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
 
   //network status
   isOnline: boolean = true;
+  loading: boolean = false;
   
+  // alert error message 
+  isShowErrorMessage: boolean = false;
+  errorMessage: string = '';
+  errorKeyMessage: string = null;
+  errorParams: Record<string, any> = {};
+
   private logger: LoggerService = LoggerInstance.getInstance();
   constructor(
     private el: ElementRef,
@@ -146,7 +153,7 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
         this.logger.info('[APP-CONF]---------------- ngAfterViewInit: APP.COMPONENT ---------------- ')
         
         // Initialize translation map and enable buttons
-        const keys = ['MAXIMIZE', 'MINIMIZE', 'CENTER', 'BUTTON_CLOSE_TO_ICON'];
+        const keys = ['MAXIMIZE', 'MINIMIZE', 'CENTER', 'BUTTON_CLOSE_TO_ICON', 'LABEL_LOADING'];
         this.translationMap = this.translateService.translateLanguage(keys);
         this.isButtonsDisabled = false;
         
@@ -313,8 +320,15 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
                     this.g.setIsOpen(isOpen)
                     this.appStorageService.setItem('isOpen', isOpen)
                 }
-                
-                
+
+                if(this.g.onPageChangeVisibilityDesktop === 'last'){
+                    this.logger.debug('[APP-COMP2] ------this.g.isOpen: ', this.g.isOpen)
+                    if(this.g.isOpen){
+                        this.g.autoStart = true;
+                    }
+                }
+
+
                 /**CHECK IF JWT IS IN URL PARAMETERS */
                 this.logger.debug('[APP-COMP] check if token is passed throw url: ', this.g.jwt);
                 if (this.g.jwt) {
@@ -351,13 +365,10 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
         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();
     }
 
     private initAll() {
+        this.logger.debug('[APP-COMP] initAll : ');
         this.addComponentToWindow(this.ngZone);
 
         //INIT TRIGGER-HANDLER
@@ -400,7 +411,7 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
 
 
         /** NETWORK STATUS */
-        this.listenToNetworkStatus()
+        this.listenToNetworkStatus();
 
     }
 
@@ -443,7 +454,7 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
                 that.triggerOnAuthStateChanged(that.stateLoggedUser);
                 that.logger.debug('[APP-COMP]  1 - IMPOSTO STATO CONNESSO UTENTE ', autoStart);
                 
-                
+                this.initAudioNotification()
 
                 new Promise(async (resolve, reject)=> {
                     that.typingService.initialize(this.g.tenant);
@@ -469,26 +480,35 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
                     that.listenToWidgetClick()
                 }
 
+                /** DDP IF AUTOSTART IS FALSE, SHOW WIDGET */
+                if(!autoStart){
+                    that.logger.info('[APP-COMP] AUTOSTART IS FALSE AND LOGGED SUCCESSFULLY ');
+                    this.g.setParameter('isShown', true, true);
+                }
 
+                /** DDP IF AUTOSTART IS FALSE, SHOW WIDGET */
+                if(!autoStart){
+                    that.logger.info('[APP-COMP] AUTOSTART IS FALSE AND LOGGED SUCCESSFULLY ');
+                    this.g.setParameter('isShown', true, true);
+                }
 
             } else if (state && state === AUTH_STATE_OFFLINE && !this.forceDisconnect) {
                 /** non sono loggato */
                 that.logger.info('[APP-COMP] OFFLINE - NO CURRENT USER AUTENTICATE: ');
                 that.g.setParameter('isLogged', false);
-                that.hideWidget();
+                // that.hideWidget();
                 // that.g.setParameter('isShown', false, true);
                 that.triggerOnAuthStateChanged(that.stateLoggedUser);
-                if (autoStart) {
+                if (autoStart || this.g.onPageChangeVisibilityDesktop === 'open' || this.g.onPageChangeVisibilityMobile === 'open') {
                     that.authenticate();
                 }
-            }else if(state && state === AUTH_STATE_CLOSE ){
+            } else if(state && state === AUTH_STATE_CLOSE ){
                 that.logger.info('[APP-COMP] CLOSE - CHANNEL CLOSED: ', this.chatManager);
                 if(this.g.recipientId){
                     this.chatManager.removeConversationHandler(this.g.recipientId)
                     this.g.recipientId = null;
                 }
-            }
-
+            }  
 
         });
         this.subscriptions.push(subAuthStateChanged);
@@ -733,6 +753,7 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
         //         divWidgetContainer.style.display = 'block';
         //     }
         // }, 500);
+        this.loading = false;
     }
     // ========= end:: START UI ============//
 
@@ -841,7 +862,13 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
         this.appStorageService.setItem('attributes', JSON.stringify(attributes));
         return attributes;
     }
-
+    
+    // SET AUDIO
+    private initAudioNotification(){
+        this.audio = new Audio();
+        this.audio.src = this.g.baseLocation + URL_SOUND_LIST_CONVERSATION;
+        this.audio.load();
+    }
 
     private async initConversationsHandler(tenant: string, senderId: string) {
         this.logger.debug('[APP-COMP] initialize: ListConversationsComponent');
@@ -1114,6 +1141,7 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
      * 3 - reinit widget
     */
     private reInit() {
+        this.logger.debug('[APP-COMP] reInit');
         // if (!firebase.auth().currentUser) {
         if (!this.tiledeskAuthService.getCurrentUser()) {
             this.logger.debug('[APP-COMP] reInit ma NON SONO LOGGATO!');
@@ -1147,7 +1175,7 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
     */
     private restart() {
         // if (!firebase.auth().currentUser) {
-        
+        this.logger.debug('[APP-COMP] restart');
         this.hideWidget();
         // that.triggerOnAuthStateChanged(resp);
         if (this.g.autoStart !== false) {
@@ -1600,23 +1628,47 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
         this.f21_close();
     }
 
+
+    /** DDP reload widget */
+    async reloadWidget() { 
+        // prima deve aprire il widget e poi mostrare il loading
+        this.openCloseWidget();
+        this.logger.debug('[APP-COMP-1] AAA - hideWidget');
+        await Promise.all([
+                this.authenticate(),
+                // this.initAll()
+            ]);
+        this.logger.debug('[APP-COMP-1] CCC - showWidget');
+    }
+
+
     /**
      * LAUNCHER BUTTON:
      * onClick button open/close widget
      */
     onOpenCloseWidget($event) {
+        this.logger.debug('[APP-COMP] onOpenCloseWidget', $event, this.g.isLogged);
+        if(!this.g.isLogged){
+            this.reloadWidget();
+        } else {
+            this.openCloseWidget();
+        }
+    }
+
+    /** DDP show widget */
+    openCloseWidget() {
         this.g.setParameter('displayEyeCatcherCard', 'none');
         // const conversationActive: ConversationModel = JSON.parse(this.appStorageService.getItem('activeConversation'));
         const recipientId : string = this.appStorageService.getItem('recipientId')
         this.g.setParameter('recipientId', recipientId);
         this.logger.debug('[APP-COMP] openCloseWidget', recipientId, this.g.isOpen, this.g.startFromHome);
+
         if (this.g.isOpen === false) {
             if(this.forceDisconnect){
                 this.logger.log('[FORCE] onOpenCloseWidget --> reconnect', this.forceDisconnect)
                 this.messagingAuthService.createCustomToken(this.g.tiledeskToken)
                 this.forceDisconnect = false;
             }
-
             if (!recipientId) {
                 if(this.g.singleConversation){
                     this.isOpenHome = false;
@@ -1636,29 +1688,22 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
                 this.isOpenHome = false;
                 this.isOpenConversation = true;
                 this.startUI()
-                // this.isOpenSelectionDepartment = false;
             }
-            // if (!conversationActive && !this.g.startFromHome) {
-            //     this.isOpenHome = false;
-            //     this.isOpenConversation = true;
-            //     this.startNwConversation();
-            // } else if (conversationActive) {
-            //     this.isOpenHome = false;
-            //     this.isOpenConversation = true;
-            // }
-            // this.g.startFromHome = true;
             this.triggerOnOpenEvent();
-            
         } else {
             this.triggerOnCloseEvent();
         }
         //change status to the widget
         this.g.setIsOpen(!this.g.isOpen);
         this.appStorageService.setItem('isOpen', this.g.isOpen);
-
+        //show loading if widget is open and user is not logged
+        if(this.g.isOpen === true && !this.g.isLogged){
+            this.loading = true;
+        }
         // this.saveBadgeNewConverstionNumber();
     }
 
+
     /**
      * MODAL SELECTION DEPARTMENT:
      * selected department
@@ -2215,8 +2260,23 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
     }
 
     private listenToNetworkStatus(){
-        window.addEventListener('online', () => this.isOnline = true);
-        window.addEventListener('offline', () =>  this.isOnline = false);
+        window.addEventListener('online', () => {
+            this.isShowErrorMessage = false;
+            this.errorMessage = null;
+            this.errorKeyMessage = null;
+        });
+        window.addEventListener('offline', () => {
+            this.isShowErrorMessage = true;
+            this.errorMessage = null;
+            this.errorKeyMessage = 'CONNECTION_NETWORK_ERROR';
+        });
+        window.addEventListener('tooltipErrorMessage', (event: CustomEvent) => {
+            // console.log('event-------------------> tooltipErrorMessage', event);
+            this.isShowErrorMessage = event.detail?.error;
+            this.errorKeyMessage = event.detail?.keyMessage || null;
+            this.errorMessage = event.detail?.message || null;
+            this.errorParams = event.detail?.params || {};                                        
+        });
     }
 
     // ========= begin:: DESTROY ALL SUBSCRIPTIONS ============//

package/src/app/app.module.ts

@@ -59,7 +59,8 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { environment } from 'src/environments/environment';
 
 //THIRD-PART MODULES
-import { TranslateModule } from '@ngx-translate/core';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 // import { MomentModule } from 'ngx-moment';
 import { PickerModule } from '@ctrl/ngx-emoji-mart';
 import { LoggerModule, NGXLogger, NgxLoggerLevel } from "ngx-logger";
@@ -134,7 +135,7 @@ 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';
-import { NetworkOfflineComponent } from './component/network-offline/network-offline.component';
+import { ErrorAlertComponent } from './component/error-alert/error-alert.component';
 import { ConfirmCloseComponent } from './modals/confirm-close/confirm-close.component';
 
 
@@ -204,6 +205,11 @@ export function conversationHandlerFactory(chat21Service: Chat21Service, appConf
   }
 }
 
+// ngx-translate Http loader factory
+export function createTranslateLoader(http: HttpClient) {
+  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
+}
+
 export function typingFactory(chat21Service: Chat21Service, appConfig: AppConfigService) {
   const config = appConfig.getConfig()
   if (config.chatEngine === CHAT_ENGINE_MQTT) {
@@ -300,7 +306,7 @@ export function uploadFactory(http: HttpClient, appConfig: AppConfigService, app
     LikeUnlikeComponent,
     TooltipDirective,
     CarouselComponent,
-    NetworkOfflineComponent,
+    ErrorAlertComponent,
     ConfirmCloseComponent
   ],
   imports: [BrowserModule,
@@ -308,13 +314,13 @@ export function uploadFactory(http: HttpClient, appConfig: AppConfigService, app
     FormsModule,
     ReactiveFormsModule,
     PickerModule,
-    TranslateModule.forRoot(//),
-    {
-    // loader: {
-    //   provide: TranslateLoader,
-    //   useFactory: (createTranslateLoader),
-    //   deps: [HttpClient]
-    // }
+    TranslateModule.forRoot({
+      defaultLanguage: 'en',
+      loader: {
+        provide: TranslateLoader,
+        useFactory: (createTranslateLoader),
+        deps: [HttpClient]
+      }
     }),
     LoggerModule.forRoot({
       level: NgxLoggerLevel.DEBUG,

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

@@ -234,9 +234,7 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
       'LABEL_START_NW_CONV',
       'CONTINUE',
       'EMOJI_NOT_ELLOWED',
-      'DOMAIN_NOT_ALLOWED',
-      'MAX_ATTACHMENT',
-      'MAX_ATTACHMENT_ERROR',
+      'ATTACHMENT',
       'EMOJI'
     ];
 
@@ -465,7 +463,6 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
       this.isConversationArchived=true
       return { requests: [] }
     });
-    console.log('requesttttttt', requests_list)
     if (requests_list && requests_list.requests.length > 0) {
       this.logger.debug('[CONV-COMP] getConversationDetail: request exist on Tiledesk', requests_list);
       let conversation = requests_list.requests.find((request)=> request.request_id === this.conversationId)
@@ -836,16 +833,6 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
 
       subscribtion = this.chatManager.conversationsHandlerService.conversationChanged.pipe(takeUntil(this.unsubscribe$)).subscribe((conversation) => {
         this.logger.debug('[CONV-COMP] ***** DATAIL conversationsChanged *****', conversation, this.conversationWith, this.isConversationArchived);
-        // if(conversation && conversation.recipient === this.g.senderId && isUserBanned(conversation)){
-        //   return;
-        // }
-        // if(conversation && conversation.sender !== this.senderId){
-        //   const checkContentScrollPosition = that.conversationContent.checkContentScrollPosition();
-        //   if(checkContentScrollPosition && conversation.is_new){ //update conversation if scroolToBottom is to the end
-        //     this.logger.debug('[CONV-COMP] updateConversationBadge...')
-        //     that.updateConversationBadge();
-        //   }
-        // }
         if(conversation && conversation.recipient === this.conversationId){
           this.isConversationArchived = false
         }
@@ -1454,5 +1441,4 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
     this.isHovering = false
   }
 
-}
-
+}

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

@@ -4,7 +4,7 @@
         <div tabindex="-1" class="c21-powered-by" [innerHTML]="poweredBy" (click)="managePoweredBy($event)"></div>
     </div>
 
-    <!-- ALERT EMOJI & URLS -->
+    <!-- ALERT EMOJI -->
     <div id="textAlert" *ngIf="!hideTextAreaContent && showAlertEmoji" class="fade-in-bottom" [class.hideTextReply]="hideTextReply">
         <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" version="1.1" viewBox="0 0 110 135">
             <path d="M55,25.8c-23,0-41.7,18.7-41.7,41.7s18.7,41.7,41.7,41.7,41.7-18.7,41.7-41.7-18.7-41.7-41.7-41.7ZM55,91.5c-3.4,0-6.2-2.8-6.2-6.2s2.8-6.2,6.2-6.2,6.2,2.8,6.2,6.2-2.8,6.2-6.2,6.2ZM60.3,70.1c-.2,2.8-2.5,4.9-5.3,4.9s-5.1-2.2-5.3-4.9l-1.6-22.3c-.3-4,2.9-7.4,6.9-7.4s7.2,3.4,6.9,7.4l-1.6,22.3Z"/>
@@ -12,12 +12,6 @@
         <div tabindex="-1" class="alertText">{{translationMap.get('EMOJI_NOT_ELLOWED')}}</div>
     </div>
 
-    <div id="textAlert" *ngIf="!hideTextAreaContent && showAlertUrl" class="fade-in-bottom" [class.hideTextReply]="hideTextReply">
-        <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" version="1.1" viewBox="0 0 110 135">
-            <path d="M55,25.8c-23,0-41.7,18.7-41.7,41.7s18.7,41.7,41.7,41.7,41.7-18.7,41.7-41.7-18.7-41.7-41.7-41.7ZM55,91.5c-3.4,0-6.2-2.8-6.2-6.2s2.8-6.2,6.2-6.2,6.2,2.8,6.2,6.2-2.8,6.2-6.2,6.2ZM60.3,70.1c-.2,2.8-2.5,4.9-5.3,4.9s-5.1-2.2-5.3-4.9l-1.6-22.3c-.3-4,2.9-7.4,6.9-7.4s7.2,3.4,6.9,7.4l-1.6,22.3Z"/>
-          </svg>
-        <div tabindex="-1" class="alertText">{{translationMap.get('DOMAIN_NOT_ALLOWED')}}</div>
-    </div>
 </div>
 
 <!-- TEXTAREA + ICONS: conv active-->
@@ -29,7 +23,7 @@
             <span class="v-align-center">
                 <svg role="img" aria-labelledby="altIconTitle" xmlns="http://www.w3.org/2000/svg" width="24px" height="24" viewBox="0 0 24 24" fill="currentColor">
                     <path d="M9.9,22.7c0,0-.1,0-.2,0-1.9.3-3.7-.2-5.2-1.4-3-2.3-3.6-6.4-1.4-9.5L9.5,2.5c.4-.5,1.1-.6,1.6-.3.5.4.6,1.1.3,1.6l-6.5,9.4c-1.4,2-1,4.8.9,6.3,1,.8,2.2,1.1,3.5.9,1.3-.2,2.4-.9,3.1-1.9l6-8.7c.9-1.2.6-3-.6-3.9-.6-.5-1.4-.6-2.1-.5-.8.1-1.4.5-1.9,1.1l-5.8,8.2c-.3.5-.2,1.1.2,1.5.2.2.5.3.8.2.3,0,.6-.2.7-.4l4.7-6.2c.4-.5,1.1-.6,1.6-.2.5.4.6,1.1.2,1.6l-4.7,6.2c-.5.7-1.4,1.2-2.3,1.3-.9.1-1.8-.2-2.5-.7-1.4-1.1-1.6-3.1-.6-4.6l5.8-8.2c.8-1.1,2-1.9,3.4-2.1,1.4-.2,2.7.1,3.8,1,2.2,1.7,2.7,4.8,1.1,7.1l-6,8.7c-1.1,1.5-2.6,2.5-4.4,2.8h0Z"/>
-                    <title id="altIconTitle">{{ attachmentTooltip || translationMap?.get('MAX_ATTACHMENT') }}</title>
+                    <title id="altIconTitle">{{ 'MAX_ATTACHMENT' | translate: { FILE_SIZE_LIMIT: file_size_limit } }}</title>
                 </svg>
                 
             </span>
@@ -68,7 +62,7 @@
 
 
 
-    <div *ngIf="!isStopRec" class="visible-text-area" [class.hasError]="showAlertEmoji || showAlertUrl" [class.disabled] = "( isConversationArchived || hideTextReply)? true : null">
+    <div *ngIf="!isStopRec" class="visible-text-area" [class.hasError]="showAlertEmoji" [class.disabled] = "( isConversationArchived || hideTextReply)? true : null">
         <!-- isFilePendingToUpload || -->
       <textarea 
         [attr.disabled] = "(hideTextReply)? true : null"
@@ -91,7 +85,7 @@
     </div>
 
     <!-- ICON SEND -->
-    <div *ngIf="(textInputTextArea !== '' && !isStopRec) || !showAudioRecorderFooterButton" tabindex="-1" class="chat21-textarea-button" [class.disabled]="showAlertEmoji || showAlertUrl" [class.active]="textInputTextArea && !hideTextReply" id="chat21-button-send" (click)="onSendPressed($event)">
+    <div *ngIf="(textInputTextArea !== '' && !isStopRec) || !showAudioRecorderFooterButton" tabindex="-1" class="chat21-textarea-button" [class.disabled]="showAlertEmoji" [class.active]="textInputTextArea && !hideTextReply" id="chat21-button-send" (click)="onSendPressed($event)">
         <span class="v-align-center">
             <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  height="24" width="24" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve" fill="currentColor">
                 <path d="M1.8,20.6V3.4l20.2,8.6L1.8,20.6ZM3.9,17.3l12.6-5.4L3.9,6.6v3.7l6.4,1.6-6.4,1.6v3.8ZM3.9,17.3V6.6v10.7Z"/>
@@ -149,14 +143,3 @@
         <div class="clear"></div>
     </button> -->
 </div>
-
-
-    <!-- 
-    ****************************************
-    ******* MODALE OFFLINE NETWORK *********
-    ****************************************
-    -->
-    
-<div class="star-rating-widget" [class.active]="isErrorNetwork" [class.inactive]="!isErrorNetwork">
-    <chat-network-offline [keyErrorMessage]="'MAX_ATTACHMENT_ERROR'"></chat-network-offline>
-</div>

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

@@ -1,4 +1,6 @@
 import { Component, ComponentFactoryResolver, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild, ViewContainerRef } from '@angular/core';
+import { error } from 'console';
+import { FILE_SIZE_LIMIT } from 'src/app/utils/constants';
 import { Globals } from 'src/app/utils/globals';
 import { checkAcceptedFile } from 'src/app/utils/utils';
 import { MessageModel } from 'src/chat21-core/models/message';
@@ -82,12 +84,12 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
   }
 
   showAlertEmoji: boolean = false
-  showAlertUrl: boolean = false;
 
-  file_size_limit: number = 10;
+  file_size_limit = FILE_SIZE_LIMIT;
   attachmentTooltip: string = '';
   isErrorNetwork: boolean = false;
 
+
   convertColorToRGBA = convertColorToRGBA;
   private logger: LoggerService = LoggerInstance.getInstance()
   constructor(private chatManager: ChatManager,
@@ -95,7 +97,7 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
               private uploadService: UploadService) { }
 
   ngOnInit() {
-    this.updateAttachmentTooltip();
+    // this.updateAttachmentTooltip();
   }
 
 
@@ -111,9 +113,9 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
       this.onDrop(this.dropEvent)
     }
 
-    if(changes['translationMap'] && changes['translationMap'].currentValue !== undefined){
-      this.updateAttachmentTooltip();
-    }
+    // if(changes['translationMap'] && changes['translationMap'].currentValue !== undefined){
+    //   this.updateAttachmentTooltip();
+    // }
 
   }
   
@@ -122,24 +124,24 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
     // setTimeout(() => {
       this.showEmojiPicker = true
     // }, 500);
-    this.updateAttachmentTooltip();
+    // this.updateAttachmentTooltip();
   }
 
 
-  updateAttachmentTooltip() {
-    // Use setTimeout to wait for the async translation map to be populated
-    setTimeout(() => {
-      this.logger.log('[CONV-FOOTER] updateAttachmentTooltip - translationMap:', this.translationMap);
-      if (this.translationMap && this.translationMap.has('MAX_ATTACHMENT')) {
-        const template = this.translationMap.get('MAX_ATTACHMENT');
-        this.logger.log('[CONV-FOOTER] MAX_ATTACHMENT template:', template);
-        this.attachmentTooltip = template.replace('{{file_size_limit}}', this.file_size_limit.toString());
-        this.logger.log('[CONV-FOOTER] attachmentTooltip:', this.attachmentTooltip);
-      } else {
-        this.logger.log('[CONV-FOOTER] MAX_ATTACHMENT not found in translationMap');
-      }
-    }, 0);
-  }
+  // updateAttachmentTooltip() {
+  //   // Use setTimeout to wait for the async translation map to be populated
+  //   setTimeout(() => {
+  //     this.logger.log('[CONV-FOOTER] updateAttachmentTooltip - translationMap:', this.translationMap);
+  //     if (this.translationMap && this.translationMap.has('MAX_ATTACHMENT')) {
+  //       const template = this.translationMap.get('MAX_ATTACHMENT');
+  //       this.logger.log('[CONV-FOOTER] MAX_ATTACHMENT template:', template);
+  //       // this.attachmentTooltip = template.replace('{{file_size_limit}}', this.file_size_limit.toString());
+  //       this.logger.log('[CONV-FOOTER] attachmentTooltip:', this.attachmentTooltip);
+  //     } else {
+  //       this.logger.log('[CONV-FOOTER] MAX_ATTACHMENT not found in translationMap');
+  //     }
+  //   }, 500);
+  // }
 
   // ========= begin:: functions send image ======= //
   // START LOAD IMAGE //
@@ -272,11 +274,13 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
 
 
     private showErrorNetwork() {
-      this.isErrorNetwork = true;
+      // posso anche passare solo keyMessage, nel caso non voglio passare un messaggio custom posso passare message e params(se il messaggio possiede dei parametri),
+      //window.dispatchEvent(new CustomEvent('tooltipErrorMessage', { detail: { error: true, message: 'File size is greater than the limit {{file_size_limit}}', keyMessage: null, params: { file_size_limit: this.file_size_limit } } }));
+      window.dispatchEvent(new CustomEvent('tooltipErrorMessage', { detail: { error: true,  keyMessage: 'MAX_ATTACHMENT' } }));
       setTimeout(() => {
-        this.isErrorNetwork = false;
         this.isFilePendingToUpload = false;
         this.hideTextReply = false;
+        window.dispatchEvent(new CustomEvent('tooltipErrorMessage', { detail: { error: false, message: '', keyMessage: null } }));
       }, 5000);
     }
 
@@ -365,10 +369,9 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
     this.onEmojiiPickerShow.emit(false)
     this.logger.log('[CONV-FOOTER] SEND MESSAGE: ', msg, type, metadata, additional_attributes);
 
-
-    let checkUrlDomain = this.checkForUrlDomain(this.textInputTextArea)
-    if(!checkUrlDomain){
-      return
+    let check = this.checkForEmojii(this.textInputTextArea)
+    if(!check){
+      return;
     }
 
     if (msg && msg.trim() !== '' || type === TYPE_MSG_IMAGE || type === TYPE_MSG_FILE ) {
@@ -578,22 +581,6 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
     this.showAlertEmoji = false;
     return true
   }
-
-  checkForUrlDomain(text){
-    if(this.project && this.project.settings?.allowed_urls === true && this.project.settings?.allowed_urls_list){
-      this.showAlertUrl = !isAllowedUrlInText(text, this.project.settings?.allowed_urls_list);
-      if(this.showAlertUrl){
-        return false
-      }
-      this.showAlertUrl = false
-      return true
-    }
-    this.showAlertUrl = false
-    return true
-
-
-  }
-
   
 
   onTextAreaChange(){
@@ -602,7 +589,6 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
 
     //reset alert to defalt values before checking again
     this.showAlertEmoji= false;
-    this.showAlertUrl = false;
     let check = this.checkForEmojii(this.textInputTextArea)
     if(!check){
       return;
@@ -612,6 +598,9 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
   onSendPressed(event) {
     this.logger.log('[CONV-FOOTER] onSendPressed:event', event);
     event.preventDefault();
+    if(this.showAlertEmoji){
+      return; 
+    }
     this.logger.log('[CONV-FOOTER] AppComponent::onSendPressed::isFilePendingToUpload:', this.isFilePendingToUpload);
     if (this.isFilePendingToUpload) {
       this.logger.log('[CONV-FOOTER] AppComponent::onSendPressed', 'is a file');
@@ -739,6 +728,9 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
     const keyCode = event.which || event.keyCode;
     this.textInputTextArea = ((document.getElementById('chat21-main-message-context') as HTMLInputElement).value);
     if (keyCode === 13) { // ENTER pressed
+      if(this.showAlertEmoji){
+        return; 
+      }
       if (this.textInputTextArea && this.textInputTextArea.trim() !== '') {
         //   that.logger.log('[CONV-FOOTER] sendMessage -> ', this.textInputTextArea);
         // this.resizeInputField();

package/src/app/component/{network-offline/network-offline.component.html → error-alert/error-alert.component.html}

@@ -3,6 +3,8 @@
         <path d="M440-280h80v-240h-80v240Zm40-320q17 0 28.5-11.5T520-640q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640q0 17 11.5 28.5T480-600Zm0 520q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/>
     </svg>
     <div class="alert-content">
-        {{ translationMap.get(keyErrorMessage)}}
+        {{ errorMessage }}
     </div>
-</div>
+</div>
+
+

package/src/app/component/{network-offline/network-offline.component.scss → error-alert/error-alert.component.scss}

@@ -28,4 +28,6 @@ span.material-icons-outlined{
     font-size: 11px;
     line-height: 18px;
     /* // letter-spacing: -0.01em; */
-}
+}
+
+

package/src/app/component/{network-offline/network-offline.component.spec.ts → error-alert/error-alert.component.spec.ts}

@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { NetworkOfflineComponent } from './network-offline.component';
+import { ErrorAlertComponent } from './error-alert.component';
 
-describe('NetworkOfflineComponent', () => {
-  let component: NetworkOfflineComponent;
-  let fixture: ComponentFixture<NetworkOfflineComponent>;
+describe('ErrorAlertComponent', () => {
+  let component: ErrorAlertComponent;
+  let fixture: ComponentFixture<ErrorAlertComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ NetworkOfflineComponent ]
+      declarations: [ ErrorAlertComponent ]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(NetworkOfflineComponent);
+    fixture = TestBed.createComponent(ErrorAlertComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
@@ -21,3 +21,5 @@ describe('NetworkOfflineComponent', () => {
     expect(component).toBeTruthy();
   });
 });
+
+

package/src/app/component/error-alert/error-alert.component.ts

@@ -0,0 +1,47 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { CustomTranslateService } from 'src/chat21-core/providers/custom-translate.service';
+import * as CONSTANTS from 'src/app/utils/constants';
+
+@Component({
+  selector: 'chat-error-alert',
+  templateUrl: './error-alert.component.html',
+  styleUrls: ['./error-alert.component.scss']
+})
+export class ErrorAlertComponent implements OnInit {
+
+  @Input() errorMessage: string = '';
+  @Input() errorKeyMessage: string = '';
+  @Input() errorParams: Record<string, any> = {}; 
+
+  translationMap: Map<string, string>;
+
+  constructor(
+    private customTranslateService: CustomTranslateService,
+  ){}
+
+  ngOnInit(): void {
+    let rawMessage: string = '';
+    // Combina costanti globali + parametri passati come input
+    const replacements = { ...CONSTANTS, ...this.errorParams };
+    if (this.errorKeyMessage) {
+      // Traduci il messaggio e sostituisci i placeholder
+        rawMessage = this.customTranslateService
+        .translateLanguage([this.errorKeyMessage])
+        .get(this.errorKeyMessage);
+    } else if (this.errorMessage) {
+      rawMessage = this.errorMessage;
+    }
+    this.errorMessage = this.interpolate(rawMessage, replacements);
+  }
+
+  /** Sostituisce {{placeholders}} con i valori corrispondenti */
+  private interpolate(template: string, variables: Record<string, any>): string {
+    return template.replace(/\{\{(.*?)\}\}/g, (_, key) => {
+      const trimmedKey = key.trim();
+      return variables[trimmedKey] ?? `{{${trimmedKey}}}`;
+    });
+  }
+
+}
+
+

package/src/app/component/launcher-button/launcher-button.component.html

@@ -1,7 +1,7 @@
 <!-- tabindex="000"-->
 
 <button aflauncherbutton #aflauncherbutton id="c21-launcher-button" class="c21-button-clean scale-in-center" 
-    *ngIf="g.isLogged == true && g.isOpen == false" 
+    *ngIf="g.isOpen == false" 
     [ngClass]="{'c21-align-left' : g.align === 'left', 'c21-align-right' : g.align !== 'left'}"
     [ngStyle]="{ 'background-color': g.baloonImage? null: g.themeColor, 'bottom': g.marginY+'px!important', 'left':(g.align==='left')?g.marginX+'px!important':'', 'right':(g.align==='right')?g.marginX+'px!important':'', 'width': g.launcherWidth, 'height': g.launcherHeight, 'border-radius': g.baloonShape}"
     (click)="openCloseWidget()"

package/src/app/component/launcher-button/launcher-button.component.ts

@@ -67,8 +67,9 @@ export class LauncherButtonComponent implements OnInit, AfterViewInit {
       // this.g.isOpen = !this.g.isOpen;
       // this.g.setIsOpen(!this.g.isOpen);
       // this.appStorageService.setItem('isOpen', this.g.isOpen);
-      this.onButtonClicked.emit( this.g.isOpen );
-    }
+     
+    } 
+    this.onButtonClicked.emit( this.g.isOpen );
   }
 
 }

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

@@ -1936,7 +1936,7 @@ export class GlobalSettingsService {
         if (this.globals.departmentID) {
             this.globals.departments.forEach(department => {
                 if (department._id === this.globals.departmentID) {
-                    this.logger.debug('[GLOBAL-SET] setDepartmentFromExternal > EXTERNAL DEPARTMENT ::::' + department._id);
+                    console.log('[GLOBAL-SET] setDepartmentFromExternal > EXTERNAL DEPARTMENT ::::' + department._id);
                     this.globals.setParameter('departmentDefault', department);
                     this.setDepartment(department);
                     isValidID = true;
@@ -1964,7 +1964,7 @@ export class GlobalSettingsService {
      * save attributes in this.appStorageService
     */
     setDepartment(department) {
-        this.logger.debug('[GLOBAL-SET] setDepartment: ', JSON.stringify(department));
+        this.logger.log('[GLOBAL-SET] setDepartment: ', JSON.stringify(department));
         this.globals.setParameter('departmentSelected', department);
         // let attributes = this.globals.attributes;
         let attributes: any = JSON.parse(this.appStorageService.getItem('attributes'));
@@ -1983,7 +1983,7 @@ export class GlobalSettingsService {
         this.logger.debug('[GLOBAL-SET] setDepartment > setAttributes: ', JSON.stringify(attributes));
         this.globals.setParameter('departmentSelected', department);
         this.globals.setParameter('attributes', attributes);
-        // this.appStorageService.setItem('attributes', JSON.stringify(attributes));
+        this.appStorageService.setItem('attributes', JSON.stringify(attributes));
 
     }
     // ========= end:: GET DEPARTEMENTS ============//

package/src/app/utils/constants.ts

@@ -38,6 +38,9 @@ export const MAX_HEIGHT_TEXTAREA = 180;
 export const MAX_WIDTH_IMAGES = 230;
 export const MIN_WIDTH_IMAGES = 130;
 
+// FILE SIZE LIMIT
+export const FILE_SIZE_LIMIT = 10;
+
 
 // pagine
 export const PARENT_PAGE_USERS = 'users';

package/src/app/utils/globals.ts

@@ -247,7 +247,7 @@ export class Globals {
 
     // ============ BEGIN: SET EXTERNAL PARAMETERS ==============//
     this.baseLocation = 'https://widget.tiledesk.com/v2';
-    this.autoStart = true;
+    this.autoStart = false;
     /** start Authentication and startUI */
     this.startHidden = false;
     /** show/hide all widget -> js call: showAllWidget */

package/src/assets/i18n/en.json

@@ -95,7 +95,7 @@
     "CONNECTION_NETWORK_ERROR": "Our apologies. There was some trouble connecting to network",
     "EMOJI_NOT_ELLOWED":"Emoji not allowed",
     "DOMAIN_NOT_ALLOWED":"URL contains a non-allowed domain",
+    "MAX_ATTACHMENT": "Max allowed size {{FILE_SIZE_LIMIT}}Mb",
     "MAX_ATTACHMENT_ERROR": "The file exceeds the maximum allowed size",
-    "MAX_ATTACHMENT": "Max allowed size {{file_size_limit}}Mb",
     "EMOJI": "Emoji"
 }

package/src/assets/i18n/es.json

@@ -95,7 +95,7 @@
     "CONNECTION_NETWORK_ERROR": "Nuestras disculpas. Hubo algunos problemas para conectarse a la red",
     "EMOJI_NOT_ELLOWED":"Emoji no permitido",
     "DOMAIN_NOT_ALLOWED":"La URL contiene un dominio no permitido",
+    "MAX_ATTACHMENT": "Tamaño máximo permitido {{FILE_SIZE_LIMIT}}Mb",
     "MAX_ATTACHMENT_ERROR": "El archivo supera el tamaño máximo permitido",
-    "MAX_ATTACHMENT": "Tamaño máximo permitido {{file_size_limit}}Mb",
     "EMOJI": "Emoji"
 }

package/src/assets/i18n/fr.json

@@ -95,7 +95,7 @@
     "CONNECTION_NETWORK_ERROR": "Nos excuses. Il y a eu des problèmes de connexion au réseau",
     "EMOJI_NOT_ELLOWED":"Emoji non autorisé",
     "DOMAIN_NOT_ALLOWED":"L'URL contient un domaine non autorisé",
+    "MAX_ATTACHMENT": "Taille maximale autorisée {{FILE_SIZE_LIMIT}}Mo",
     "MAX_ATTACHMENT_ERROR": "Le fichier dépasse la taille maximale autorisée",
-    "MAX_ATTACHMENT": "Taille maximale autorisée {{file_size_limit}}Mo",
     "EMOJI": "Emoji"
 }

package/src/assets/i18n/it.json

@@ -93,7 +93,7 @@
     "CONNECTION_NETWORK_ERROR": "Ci scusiamo. Si sono verificati problemi di connessione di rete",
     "EMOJI_NOT_ELLOWED":"Emoji non consentiti",
     "DOMAIN_NOT_ALLOWED":"L'URL contiene un dominio non consentito",
+    "MAX_ATTACHMENT": "Dimensione massima consentita {{FILE_SIZE_LIMIT}}Mb",
     "MAX_ATTACHMENT_ERROR": "Il file supera la dimensione massima consentita",
-    "MAX_ATTACHMENT": "Dimensione massima consentita {{file_size_limit}}Mb",
     "EMOJI": "Emoji"
 }

package/src/iframe-style.css

@@ -13,7 +13,7 @@
     bottom: 0px;
     width: auto;   
     height: auto;
-    display: none;
+    display: block;
     z-index: 3000000000; /*999999*/; 
 }
 
@@ -66,12 +66,12 @@
     max-width: 1024px;
     max-height: 100%;
 
-    transition: 
+    /* transition: 
     width 300ms, 
     height 300ms, 
     max-height 300ms, 
     transform 300ms cubic-bezier(0, 1.2, 1, 1), 
-    opacity 300ms ease-out;
+    opacity 300ms ease-out; */
     /* per migliorare le prestazioni quando si usa transform */
     will-change: transform, opacity, width, height;
 }
@@ -151,14 +151,14 @@
 }
 
 #tiledesk-container.open #tiledeskdiv.min-size {
-    transition: width 200ms, height 200ms, max-height 200ms, transform 300ms cubic-bezier(0, 1.2, 1, 1), opacity 83ms ease-out;
+    /* transition: width 200ms, height 200ms, max-height 200ms, transform 300ms cubic-bezier(0, 1.2, 1, 1), opacity 83ms ease-out; */
     width: var(--iframeMinWidth);
     height: var(--iframeMinHeight);
 }
 
 #tiledesk-container.open #tiledeskdiv.max-size {
     /* transition: width 1s, height 1s; */
-    transition: width 200ms, height 200ms, max-height 200ms, transform 300ms cubic-bezier(0, 1.2, 1, 1), opacity 83ms ease-out;
+    /* transition: width 200ms, height 200ms, max-height 200ms, transform 300ms cubic-bezier(0, 1.2, 1, 1), opacity 83ms ease-out; */
     width: var(--iframeMaxWidth);
     height: var(--iframeMaxHeight);
 }

package/src/app/component/network-offline/network-offline.component.ts

@@ -1,25 +0,0 @@
-import { Component, Input, OnInit } from '@angular/core';
-import { CustomTranslateService } from 'src/chat21-core/providers/custom-translate.service';
-
-@Component({
-  selector: 'chat-network-offline',
-  templateUrl: './network-offline.component.html',
-  styleUrls: ['./network-offline.component.scss']
-})
-export class NetworkOfflineComponent implements OnInit {
-
-  @Input() keyErrorMessage: string = 'CONNECTION_NETWORK_ERROR';
-  translationMap: Map< string, string>;
-
-  constructor(
-    private customTranslateService: CustomTranslateService
-  ){}
-
-  ngOnInit(): void {
-    let keys = [
-      this.keyErrorMessage
-    ]
-    this.translationMap = this.customTranslateService.translateLanguage(keys)
-  }
-
-}