@chat21/chat21-web-widget 5.1.12 → 5.1.14

package/CHANGELOG.md

@@ -6,10 +6,21 @@
 ### **Copyrigth**: 
 *Tiledesk SRL*
 
+
+# 5.1.14 
+- **bug-fixed**: stopped loading local language json file
+
+# 5.1.13 
+- **bug-fixed**: set default widget size
+- **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)
+- **bug-fixed**: set the color of the buttons with visibility control to the font color (setButtonColors function)
+
 # 5.1.12
 - **bug-fixed**: check showEmojiFooterButton to enable/disable emojii
 - **bug-fixed**: markdown is fired as an emojii and blocked by isEmojii check fn
 
+
 # 5.1.7-rc5
 - **bug-fixed**: bug fixed BUTTON STYLES
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@chat21/chat21-web-widget",
   "author": "Tiledesk SRL",
-  "version": "5.1.12",
+  "version": "5.1.14",
   "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>

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%;

package/src/app/app.component.ts

@@ -106,9 +106,12 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
   
   forceDisconnect: boolean = false;
 
-  //network status
-  isOnline: boolean = true;
-  
+  // alert error message 
+  isShowErrorMessage: boolean = false;
+  errorMessage: string = '';
+  errorKeyMessage: string = null;
+  errorParams: Record<string, any> = {};
+
   private logger: LoggerService = LoggerInstance.getInstance();
   constructor(
     private el: ElementRef,
@@ -398,9 +401,11 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
         this.triggerLoadParamsEvent(); // first trigger
         //this.setAvailableAgentsStatus();
 
-
         /** NETWORK STATUS */
-        this.listenToNetworkStatus()
+        this.listenToNetworkStatus();
+
+        /** SET WIDGET SIZE */
+        this.onWidgetSizeChange(this.g.size);
 
     }
 
@@ -724,7 +729,7 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
         // visualizzo l'iframe!!!
         this.triggerOnViewInit();
         this.g.setParentBodyStyleMobile(this.g.isOpen, this.g.isMobile);
-        this.g.setElementStyle(this.g.isOpen)
+        this.g.setElementStyle(this.g.isOpen);
         // this.triggerOnAuthStateChanged(true)
         // mostro il widget
         // setTimeout(() => {
@@ -2215,8 +2220,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

@@ -60,6 +60,8 @@ 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 +136,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 +206,13 @@ 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 +309,7 @@ export function uploadFactory(http: HttpClient, appConfig: AppConfigService, app
     LikeUnlikeComponent,
     TooltipDirective,
     CarouselComponent,
-    NetworkOfflineComponent,
+    ErrorAlertComponent,
     ConfirmCloseComponent
   ],
   imports: [BrowserModule,
@@ -308,13 +317,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-footer/conversation-footer.component.html

@@ -23,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>

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';
@@ -83,9 +85,10 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
 
   showAlertEmoji: boolean = false
 
-  file_size_limit: number = 10;
+  file_size_limit = FILE_SIZE_LIMIT;
   attachmentTooltip: string = '';
 
+
   convertColorToRGBA = convertColorToRGBA;
   private logger: LoggerService = LoggerInstance.getInstance()
   constructor(private chatManager: ChatManager,
@@ -93,7 +96,7 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
               private uploadService: UploadService) { }
 
   ngOnInit() {
-    this.updateAttachmentTooltip();
+    // this.updateAttachmentTooltip();
   }
 
 
@@ -109,9 +112,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();
+    // }
 
   }
   
@@ -120,24 +123,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');
-      }
-    }, 500);
-  }
+  // 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 //
@@ -227,7 +230,12 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
             const fileXLoad = this.arrayFilesLoad[0].file;
             const uid = this.arrayFilesLoad[0].uid;
             const type = this.arrayFilesLoad[0].type;
-            const size = this.arrayFilesLoad[0].size
+            const size = this.arrayFilesLoad[0].size;
+            if(size > this.file_size_limit * 1024 * 1024){
+              this.logger.error('[CONV-FOOTER] file size is greater than the limit: ', size, this.file_size_limit * 1024 * 1024);
+              this.showErrorNetwork();
+              return;
+            }
             this.logger.log('[CONV-FOOTER] that.fileXLoad: ', type);
             let metadata;
             if (type.startsWith('image') && !type.includes('svg')) {
@@ -264,6 +272,17 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
     }
 
 
+    private showErrorNetwork() {
+      // 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.isFilePendingToUpload = false;
+        this.hideTextReply = false;
+        window.dispatchEvent(new CustomEvent('tooltipErrorMessage', { detail: { error: false, message: '', keyMessage: null } }));
+      }, 5000);
+    }
+
     uploadSingle(metadata, file, messageText?: string) {
       const that = this;
       try {

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('CONNECTION_NETWORK_ERROR')}}
+        {{ 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/message/buttons/action-button/action-button.component.ts

@@ -1,4 +1,5 @@
 import { Component, ElementRef, EventEmitter, Input, OnInit, Output, SimpleChanges } from '@angular/core';
+import { getColorBck } from 'src/chat21-core/utils/utils-user';
 
 @Component({
   selector: 'chat-action-button-attachment',
@@ -26,9 +27,10 @@ export class ActionButtonComponent implements OnInit {
     //decomment if element should have same color of themeColor and fregroundColor
     if(this.fontSize) this.elementRef.nativeElement.querySelector('.action').style.setProperty('--buttonFontSize', this.fontSize);
     if(this.backgroundColor) this.elementRef.nativeElement.querySelector('.action').style.setProperty('--buttonBackgroundColor', this.backgroundColor);
-    if(this.textColor) this.elementRef.nativeElement.querySelector('.action').style.setProperty('--textColor', this.textColor);
+    if(this.textColor) this.elementRef.nativeElement.querySelector('.action').style.setProperty('--buttonTextColor', this.textColor);
     if(this.hoverBackgroundColor) this.elementRef.nativeElement.querySelector('.action').style.setProperty('--hoverBackgroundColor', this.hoverBackgroundColor);
     if(this.hoverTextColor) this.elementRef.nativeElement.querySelector('.action').style.setProperty('--hoverTextColor', this.hoverTextColor);
+    
   }
 
   onMouseOver(event){

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

@@ -10,7 +10,7 @@ import { TemplateBindingParseResult } from '@angular/compiler';
 import { AppStorageService } from '../../chat21-core/providers/abstract/app-storage.service';
 import { LoggerService } from '../../chat21-core/providers/abstract/logger.service';
 import { LoggerInstance } from '../../chat21-core/providers/logger/loggerInstance';
-import { invertColor, isAllowedUrlInText, isJsonArray } from '../../chat21-core/utils/utils';
+import { ensureAccessibleTextColor, invertColor, isAllowedUrlInText, isJsonArray, normalizeColorToHex } from '../../chat21-core/utils/utils';
 import { AppConfigService } from './app-config.service';
 
 
@@ -322,10 +322,14 @@ export class GlobalSettingsService {
         if (response !== null) {
             this.setVariablesFromService(this.globals, response);
         }
+        /** set button colors */
+        this.setButtonColors();
+
         this.setVariableFromStorage(this.globals);
         this.setVariablesFromSettings(this.globals);
         this.setVariablesFromAttributeHtml(this.globals, this.el);
         this.setVariablesFromUrlParameters(this.globals);
+        
         this.setDepartmentFromExternal();
         /** set color with gradient from theme's colors */
         this.globals.setColorWithGradient();
@@ -333,11 +337,19 @@ export class GlobalSettingsService {
         this.setCssIframe();
         /** set main style */
         this.setStyle();
-
-        this.logger.debug('[GLOBAL-SET] ***** END SET PARAMETERS *****');
         this.obsSettingsService.next(true);
     }
 
+    private setButtonColors() {
+        this.logger.debug('[GLOBAL-SET] ***** END SET PARAMETERS *****', this.globals);
+        const bubbleSentBackground = this.globals?.bubbleSentBackground;
+        const buttonBackgroundColor = this.globals?.buttonBackgroundColor;
+
+            this.globals.buttonTextColor = ensureAccessibleTextColor(buttonBackgroundColor, bubbleSentBackground);    
+            this.globals.buttonHoverTextColor = ensureAccessibleTextColor(bubbleSentBackground, buttonBackgroundColor);    
+        
+    }
+
     /**
      *
      */

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/assets/i18n/en.json

@@ -95,6 +95,6 @@
     "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": "Max allowed size {{FILE_SIZE_LIMIT}}Mb",
     "EMOJI": "Emoji"
 }

package/src/assets/i18n/es.json

@@ -95,6 +95,6 @@
     "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": "Tamaño máximo permitido {{FILE_SIZE_LIMIT}}Mb",
     "EMOJI": "Emoji"
 }

package/src/assets/i18n/fr.json

@@ -95,6 +95,6 @@
     "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": "Taille maximale autorisée {{FILE_SIZE_LIMIT}}Mo",
     "EMOJI": "Emoji"
 }

package/src/assets/i18n/it.json

@@ -93,6 +93,6 @@
     "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": "Dimensione massima consentita {{FILE_SIZE_LIMIT}}Mb",
     "EMOJI": "Emoji"
 }

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

@@ -389,6 +389,115 @@ export function convertColorToRGBA(color, opacity) {
   return result;
 }
 
+export function normalizeColorToHex(input?: string): string | null {
+  if (!input) {
+    return null;
+  }
+  let color = input.trim();
+  if (color.toLowerCase().includes('gradient')) {
+    const match = color.match(/(#[0-9a-fA-F]{3,8}|rgba?\([^)]*\))/);
+    if (!match) {
+      return null;
+    }
+    color = match[0];
+  }
+  if (color.startsWith('#')) {
+    const hex = color.slice(1);
+    if (hex.length === 3) {
+      return (
+        '#' +
+        hex
+          .split('')
+          .map((char) => char + char)
+          .join('')
+          .toLowerCase()
+      );
+    }
+    if (hex.length === 4) {
+      return (
+        '#' +
+        hex
+          .slice(0, 3)
+          .split('')
+          .map((char) => char + char)
+          .join('')
+          .toLowerCase()
+      );
+    }
+    if (hex.length === 6 || hex.length === 8) {
+      return '#' + hex.slice(0, 6).toLowerCase();
+    }
+    return null;
+  }
+  const rgbaMatch = color.match(/rgba?\s*\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)(?:\s*,\s*([\d.]+))?\s*\)/i);
+  if (rgbaMatch) {
+    const [, r, g, b] = rgbaMatch;
+    const toHex = (value: number) => {
+      const clamped = Math.max(0, Math.min(255, Math.round(value)));
+      return clamped.toString(16).padStart(2, '0');
+    };
+    return `#${toHex(parseFloat(r))}${toHex(parseFloat(g))}${toHex(parseFloat(b))}`;
+  }
+  return null;
+}
+
+export function ensureAccessibleTextColor(backgroundColor?: string, fontColor?: string, minContrast = 4.5): string | null {
+  const bgHex = normalizeColorToHex(backgroundColor);
+  if (!bgHex) {
+    return normalizeColorToHex(fontColor);
+  }
+
+  const fontHex = normalizeColorToHex(fontColor);
+  if (fontHex && getContrastRatio(bgHex, fontHex) >= minContrast) {
+    return fontHex;
+  }
+
+  const blackContrast = getContrastRatio(bgHex, '#000000');
+  const whiteContrast = getContrastRatio(bgHex, '#ffffff');
+  return blackContrast >= whiteContrast ? '#000000' : '#ffffff';
+}
+
+function getContrastRatio(backgroundHex: string, foregroundHex: string): number {
+  const bg = hexToRgb(backgroundHex);
+  const fg = hexToRgb(foregroundHex);
+  if (!bg || !fg) {
+    return 1;
+  }
+  const l1 = relativeLuminance(bg);
+  const l2 = relativeLuminance(fg);
+  const lighter = Math.max(l1, l2);
+  const darker = Math.min(l1, l2);
+  return (lighter + 0.05) / (darker + 0.05);
+}
+
+function relativeLuminance({ r, g, b }: { r: number; g: number; b: number }): number {
+  const srgb = [r, g, b].map((value) => {
+    const channel = value / 255;
+    return channel <= 0.03928 ? channel / 12.92 : Math.pow((channel + 0.055) / 1.055, 2.4);
+  });
+  return 0.2126 * srgb[0] + 0.7152 * srgb[1] + 0.0722 * srgb[2];
+}
+
+function hexToRgb(hex: string): { r: number; g: number; b: number } | null {
+  let value = hex.replace('#', '');
+  if (value.length === 3) {
+    value = value
+      .split('')
+      .map((char) => char + char)
+      .join('');
+  }
+  if (value.length !== 6) {
+    return null;
+  }
+  const r = parseInt(value.slice(0, 2), 16);
+  const g = parseInt(value.slice(2, 4), 16);
+  const b = parseInt(value.slice(4, 6), 16);
+  if ([r, g, b].some((channel) => Number.isNaN(channel))) {
+    return null;
+  }
+  return { r, g, b };
+}
+
 
 // export function setLanguage(windowContext, translatorService) {
 //   if (translatorService.getBrowserLanguage(windowContext)) {

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

@@ -1,24 +0,0 @@
-import { Component, 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 {
-
-  translationMap: Map< string, string>;
-
-  constructor(
-    private customTranslateService: CustomTranslateService
-  ){}
-
-  ngOnInit(): void {
-    let keys = [
-      'CONNECTION_NETWORK_ERROR'
-    ]
-    this.translationMap = this.customTranslateService.translateLanguage(keys)
-  }
-
-}