@chat21/chat21-web-widget 5.1.20 → 5.1.24-rc1

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

@@ -419,3 +419,28 @@ textarea:active{
     border: none;
     // margin: -2px -2px 0px;
 }
+
+
+// aggiungi un'animazione di fade in e fade out quando .star-rating-widget è visibile con transition
+.star-rating-widget {
+    transition: all 0.5s ease-in-out;
+}
+
+.star-rating-widget {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: -52px;
+    height: 100%;
+    width: 100%;
+    flex-direction: row;
+    justify-content: center;
+    background-color: rgb(255, 255, 255);
+    flex-wrap: nowrap;
+    &.active {
+        bottom: 0px;
+    }
+    &.inactive {
+        bottom: -52px;
+    }
+}

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

@@ -87,6 +87,7 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
 
   file_size_limit = FILE_SIZE_LIMIT;
   attachmentTooltip: string = '';
+  isErrorNetwork: boolean = false;
 
 
   convertColorToRGBA = convertColorToRGBA;
@@ -316,7 +317,7 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
       // });
       // this.resetLoadImage();
       
-      this.uploadService.upload(this.senderId, currentUpload).then(data => {
+      this.uploadService.uploadFile(this.senderId, currentUpload).then(data => {
         that.logger.log('[CONV-FOOTER] AppComponent::uploadSingle:: downloadURL', data);
         that.logger.log(`[CONV-FOOTER] Successfully uploaded file and got download link - ${data}`);
 

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

@@ -38,9 +38,14 @@
     <!--CASE: no conversations EXIST - >1 agents is available -->
     <div *ngIf="(!listConversations || listConversations.length == 0) && availableAgents && availableAgents.length > 1 && g.showAvailableAgents === true" style="display: flex; margin: 20px 30px;"> 
       <div *ngFor="let agent of availableAgents" class="c21-pallozzo">
-          <div class="c21-ball" [ngStyle] = "{ 'background-color':setColorFromString(agent.firstname) }" >
-            <span class="c21-ball-label">{{avatarPlaceholder(agent.firstname)}}</span>
-            <div *ngIf="agent.imageurl" #avatarImage class="c21-avatar-image" [style.background-image]="'url(' + agent.imageurl + ')'"></div>
+          <div class="c21-ball" [ngStyle] = "{ 'background-color': isImageLoaded(agent) ? 'transparent' : setColorFromString(agent.firstname) }" >
+            <span *ngIf="!isImageLoaded(agent)" class="c21-ball-label">{{avatarPlaceholder(agent.firstname)}}</span>
+            <img *ngIf="agent.imageurl" 
+                 [src]="agent.imageurl" 
+                 style="display: none;"
+                 (load)="onImageLoad(agent)"
+                 (error)="onImageError(agent)">
+            <div *ngIf="isImageLoaded(agent)" #avatarImage class="c21-avatar-image" [style.background-image]="'url(' + agent.imageurl + ')'"></div>
           </div>
       </div>
     </div>
@@ -48,9 +53,14 @@
     <!--CASE: no conversations EXIST - 1 agents is available -->
     <div class="flex-container" *ngIf="(!listConversations || listConversations.length == 0) && availableAgents && availableAgents.length === 1 && g.showAvailableAgents === true">
       <div *ngFor="let agent of availableAgents" class="c21-pallozzo flex-inline-agent ">
-        <div class="c21-ball" [ngStyle] = "{ 'background-color':setColorFromString(agent.firstname) }" >
-          <span class="c21-ball-label">{{avatarPlaceholder(agent.firstname)}}</span>
-          <div *ngIf="agent.imageurl" #avatarImage class="c21-avatar-image" [style.background-image]="'url(' + agent.imageurl + ')'"></div>
+        <div class="c21-ball" [ngStyle] = "{ 'background-color': isImageLoaded(agent) ? 'transparent' : setColorFromString(agent.firstname) }" >
+          <span *ngIf="!isImageLoaded(agent)" class="c21-ball-label">{{avatarPlaceholder(agent.firstname)}}</span>
+          <img *ngIf="agent.imageurl" 
+               [src]="agent.imageurl" 
+               style="display: none;"
+               (load)="onImageLoad(agent)"
+               (error)="onImageError(agent)">
+          <div *ngIf="isImageLoaded(agent)" #avatarImage class="c21-avatar-image" [style.background-image]="'url(' + agent.imageurl + ')'"></div>
         </div>
       </div>
       <button tabindex="1040" aflistconv #aflistconv class="c21-button-primary" (click)="openNewConversation()" [ngStyle]="{'background-color': g.themeColor, 'border-color': g.themeColor, 'color': g.themeForegroundColor }">

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

@@ -65,6 +65,7 @@ export class HomeConversationsComponent implements OnInit, OnDestroy {
   themeForegroundColor = '';
   LABEL_START_NW_CONV: string;
   availableAgents: Array<UserAgent> = [];
+  imageLoadedMap: Map<string, boolean> = new Map<string, boolean>();
   // ========= end:: variabili del componente ======== //
 
   waitingTime: number;
@@ -203,6 +204,34 @@ export class HomeConversationsComponent implements OnInit, OnDestroy {
     this.onConversationLoaded.emit(conversation)
   }
 
+  /**
+   * Verifica se l'immagine dell'agente esiste e si carica correttamente
+   */
+  isImageLoaded(agent: UserAgent): boolean {
+    if (!agent?.imageurl) {
+      return false;
+    }
+    return this.imageLoadedMap.get(agent.id) === true;
+  }
+
+  /**
+   * Gestisce il caricamento riuscito dell'immagine
+   */
+  onImageLoad(agent: UserAgent) {
+    if (agent?.id && agent?.imageurl) {
+      this.imageLoadedMap.set(agent.id, true);
+    }
+  }
+
+  /**
+   * Gestisce l'errore di caricamento dell'immagine
+   */
+  onImageError(agent: UserAgent) {
+    if (agent?.id) {
+      this.imageLoadedMap.set(agent.id, false);
+    }
+  }
+
   private openConversationByID(conversation) {
     this.logger.debug('[HOMECONVERSATIONS] openConversationByID: ', conversation);
     if ( conversation ) {

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/component/list-conversations/list-conversations.component.html

@@ -3,9 +3,14 @@
     <button tabindex="1103" class="c21-item-conversation" (click)="openConversationByID(conversation)">
       <div class="c21-body-conv">
         <div class="c21-left-conv">
-          <div class="c21-ball" [ngStyle]="{'background': 'linear-gradient(rgb(255,255,255) -125%, ' + conversation.color + ')'}">
-            <span class="c21-ball-label">{{conversation?.avatar}}</span>
-            <div *ngIf="conversation?.image" #avatarImage class="c21-avatar-image" [style.background-image]="'url(' + conversation.image + ')'"></div>
+          <div class="c21-ball" [ngStyle]="{'background': isImageLoaded(conversation) ? 'transparent' : 'linear-gradient(rgb(255,255,255) -125%, ' + conversation.color + ')'}">
+            <span *ngIf="!isImageLoaded(conversation)" class="c21-ball-label">{{conversation?.avatar}}</span>
+            <img *ngIf="conversation?.image" 
+                 [src]="conversation.image" 
+                 style="display: none;"
+                 (load)="onImageLoad(conversation)"
+                 (error)="onImageError(conversation)">
+            <div *ngIf="isImageLoaded(conversation)" #avatarImage class="c21-avatar-image" [style.background-image]="'url(' + conversation.image + ')'"></div>
           </div>
         </div>
         <div class="c21-right-conv">

package/src/app/component/list-conversations/list-conversations.component.ts

@@ -35,6 +35,7 @@ export class ListConversationsComponent implements OnInit {
   arrayDiffer: any;
 
   uidConvSelected: string;
+  imageLoadedMap: Map<string, boolean> = new Map<string, boolean>();
   constructor(private iterableDiffers: IterableDiffers) {
       this.iterableDifferListConv = this.iterableDiffers.find([]).create(null);
       
@@ -67,5 +68,33 @@ export class ListConversationsComponent implements OnInit {
 
   }
 
+  /**
+   * Verifica se l'immagine esiste e si carica correttamente
+   */
+  isImageLoaded(conversation: ConversationModel): boolean {
+    if (!conversation?.image) {
+      return false;
+    }
+    return this.imageLoadedMap.get(conversation.uid) === true;
+  }
+
+  /**
+   * Gestisce il caricamento riuscito dell'immagine
+   */
+  onImageLoad(conversation: ConversationModel) {
+    if (conversation?.uid && conversation?.image) {
+      this.imageLoadedMap.set(conversation.uid, true);
+    }
+  }
+
+  /**
+   * Gestisce l'errore di caricamento dell'immagine
+   */
+  onImageError(conversation: ConversationModel) {
+    if (conversation?.uid) {
+      this.imageLoadedMap.set(conversation.uid, false);
+    }
+  }
+
 
 }

package/src/app/pipe/marked.pipe.ts

@@ -1,184 +1,57 @@
 import { Pipe, PipeTransform } from '@angular/core';
 import { marked } from 'marked';
-import { BLOCKED_DOMAINS } from '../utils/utils';
-import { htmlEntities } from 'src/chat21-core/utils/utils';
-
 
 @Pipe({
   name: 'marked'
 })
-
 export class MarkedPipe implements PipeTransform {
+
   transform(value: any): any {
-    // Security hardening:
-    // - Do not allow raw HTML from chat messages to be interpreted as DOM.
-    // - Keep Markdown working (marked will generate the needed HTML tags).
-    // This makes inputs like "<h1>Title</h1>" render exactly as typed.
+    // Convertiamo tutto in stringa sicura
     const input =
       typeof value === 'string'
         ? value
         : (value === null || value === undefined) ? '' : String(value);
-    
-    // Converti i \n letterali in newline reali prima di htmlEntities
-    // così il markdown con breaks: true li renderizzerà correttamente
+
+    // Converti \n letterali in newline reali
     const inputWithNewlines = input.replace(/\\n/g, '\n');
-    
-    // Proteggi i > usati per i blockquote markdown (all'inizio di riga)
-    // sostituendoli temporaneamente con un placeholder
-    const BLOCKQUOTE_PLACEHOLDER = '___MARKDOWN_BLOCKQUOTE___';
-    const protectedInput = inputWithNewlines.replace(/^(\s*)>/gm, (match, spaces) => {
-      return spaces + BLOCKQUOTE_PLACEHOLDER;
-    });
-    
-    // Applica htmlEntities (che codificherà tutti gli altri >)
-    let safeInput = htmlEntities(protectedInput);
-    
-    // Ripristina i > dei blockquote
-    safeInput = safeInput.replace(new RegExp(BLOCKQUOTE_PLACEHOLDER, 'g'), '>');
 
+    // Renderer custom solo per i link
     const renderer = new marked.Renderer();
+    const originalLinkRenderer = renderer.link.bind(renderer);
+
+    // Lista protocolli / pattern pericolosi
+    const dangerousPatterns = [
+      /^javascript:/i,
+      /^data:/i,
+      /^vbscript:/i
+    ];
+
     renderer.link = function({ href, title, tokens }) {
-      // Normalizza l'href per evitare falsi negativi
-      const normalized = (href || '').trim().toLowerCase();
-      // Pattern pericolosi da cercare nell'intero URL (non solo all'inizio)
-      const dangerousPatterns = [
-        /javascript:/i,           // javascript: protocol
-        /data:/i,                // data: protocol  
-        /vbscript:/i,            // vbscript: protocol
-        /on\w+\s*=/i,           // event handlers (onclick, onload, etc.)
-        /alert\s*\(/i,          // alert() function
-        /eval\s*\(/i,           // eval() function
-        /document\./i,          // document object access
-        /window\./i,            // window object access
-        /\.appendChild\s*\(/i,  // DOM manipulation
-        /\.createElement\s*\(/i, // DOM creation
-        /<script/i,             // script tags
-        /<\/script>/i,          // closing script tags
-        /function\s*\(/i,       // function definitions
-        /\(function/i,          // IIFE patterns
-        /setTimeout\s*\(/i,     // setTimeout
-        /setInterval\s*\(/i,    // setInterval
-        /location\./i,          // location object manipulation
-        /history\./i,           // history object manipulation
-        /localStorage\./i,      // localStorage access
-        /sessionStorage\./i,    // sessionStorage access
-        /cookie/i,              // cookie manipulation
-        /fetch\s*\(/i,          // fetch API
-        /XMLHttpRequest/i,      // XHR
-        /FormData/i,            // FormData
-        /Blob\s*\(/i,           // Blob constructor
-        /FileReader/i,          // FileReader
-        /crypto\./i,            // crypto object
-        /btoa\s*\(/i,           // base64 encoding
-        /atob\s*\(/i,           // base64 decoding
-        /decodeURI/i,           // URI decoding
-        /encodeURI/i,           // URI encoding
-        /String\.fromCharCode/i, // character code conversion
-        /unescape\s*\(/i,       // unescape function
-        /escape\s*\(/i          // escape function
-      ];
+      const normalized = (href || '').trim();
 
-      // Controlla se l'URL contiene pattern pericolosi
+      // Se il link è pericoloso, restituisci solo il testo
       const isDangerous = dangerousPatterns.some(pattern => pattern.test(normalized));
       if (isDangerous) {
-        // Ritorna solo il testo come stringa, niente <a>
-        return tokens ? tokens.map(token => token.raw).join('') : href || '';
+        return tokens ? tokens.map(t => t.raw).join('') : href || '';
       }
 
-      // tokens = this.cleanInput(href);
-
-      const text = tokens
-        ? tokens.map(token => token.raw).join('')
-        : href; // fallback se tokens non c'è
-      if (!href) return text;
-
-      return `<a href="${href}" target="_blank" rel="noopener noreferrer">${text}</a>`;
+      // Altrimenti delega al renderer originale di marked
+      return originalLinkRenderer({ href, title, tokens });
     };
-    
+
+    // Opzioni marked
     marked.setOptions({
       renderer,
       gfm: true,
       breaks: true
     });
 
-    if (safeInput && safeInput.length > 0) {
-      try {
-        return marked.parse(safeInput);
-      } catch (err) {
-        console.error('Errore nel parsing markdown:', err);
-        return safeInput;
-      }
+    try {
+      return marked.parse(inputWithNewlines);
+    } catch (err) {
+      console.error('Errore nel parsing markdown:', err);
+      return inputWithNewlines;
     }
-    return safeInput;
-  }
-
-
-  private cleanInput(input: string): string {
-    if (!input) return '';
-    let cleaned = (input || '').trim().toLowerCase();
-
-    BLOCKED_DOMAINS.forEach(domain => {
-    const escapedDomain = domain.replace(/\./g, '\\.');
-    // Pattern che copre TUTTI i casi
-    const comprehensivePattern = new RegExp(
-      `(\\[([^\\]]*)\\]\\([^)]*(?:https?://)?(?:www\\.)?${escapedDomain}(?:/[^)]*)?\\))|((?:https?://)?(?:www\\.)?${escapedDomain}(?:/\\S*)?)`,
-      'gi'
-    );
-    
-    cleaned = cleaned.replace(comprehensivePattern, (match, p1, p2, p3) => {
-      // Se è un link markdown [text](url), mantieni il testo
-      if (p2) return `${p2} 🔒`;
-      // Se è un URL diretto, sostituisci con dominio + 🔒
-      if (p3) return `${domain} 🔒`;
-      return match;
-      });
-   
-    });
-
-
-    // Pattern che sostituisce i link pericolosi con solo il testo
-    const dangerousLinkPatterns = [
-      // Sostituisce [text](javascript:...) con "text"
-      /\[([^\]]*)\]\(javascript:[^)]*\)/gi,
-      /\[([^\]]*)\]\(data:[^)]*\)/gi,
-      /\[([^\]]*)\]\(vbscript:[^)]*\)/gi,
-      /\[([^\]]*)\]\([^)]*alert\([^)]*\)/gi
-    ];
-
-    dangerousLinkPatterns.forEach(pattern => {
-      cleaned = cleaned.replace(pattern, '$1'); // $1 = il testo del link
-    });
-
-    // Pattern generali per sicurezza (rimuovono completamente)
-    const generalPatterns = [
-      /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi,
-      /<script[^>]*>[\s\S]*?<\/script>/gi, // Script multi-linea
-      /<script[^>]*>.*?<\/script>/gi, // Script single-line
-      /<script[^>]*>/gi, // Solo tag di apertura
-      /<\/script>/gi, // Solo tag di chiusura
-      /javascript:/gi,
-      /vbscript:/gi,
-      /data:/gi,
-      /on\w+\s*=/gi,
-      /alert\(/gi,
-      /eval\(/gi,
-      /document\./gi,
-      /window\./gi,
-      /\(function\s*\(\)\s*\{/gi,
-      /\.appendChild\(/gi,
-      /\.createElement\(/gi,
-      /\.getElementsByTagName\(/gi,
-    
-      // ✅ PATTERN PER FUNZIONI IIFE (Immediately Invoked Function Expression):
-      /\(function\s*\(\s*\)\s*\{[\s\S]*?\}\)\(\s*\)\s*;/gi,
-      /\(function\s*\(\)\s*\{/gi
-    ];
-
-    generalPatterns.forEach(pattern => {
-      cleaned = cleaned.replace(pattern, '');
-    });
-
-    return cleaned;
   }
-
-}
+}

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

@@ -1963,7 +1963,7 @@ export class GlobalSettingsService {
             this.logger.debug('[GLOBAL-SET] setDepartmentFromExternal > END departmentID ::::' + this.globals.departmentID + isValidID);
         }
         //remove default department from list
-        this.globals.departments = this.globals.departments.filter(obj => obj['default'] !== true)
+        this.globals.departments = this.globals.departments?.filter(obj => obj['default'] !== true) ?? []
         if(this.globals.departments && this.globals.departments.length === 1){
             this.setDepartment(this.globals.departments[0])
         }

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

@@ -302,6 +302,7 @@ export class TranslatorService {
       'CLOSED',
       'LABEL_PREVIEW',
       'MAX_ATTACHMENT',
+      'MAX_ATTACHMENT_ERROR',
       'EMOJI'
     ];
 
@@ -358,6 +359,7 @@ export class TranslatorService {
       globals.LABEL_PREVIEW = res['LABEL_PREVIEW']
       globals.LABEL_ERROR_FIELD_REQUIRED= res['LABEL_ERROR_FIELD_REQUIRED']
       globals.MAX_ATTACHMENT = res['MAX_ATTACHMENT']
+      globals.MAX_ATTACHMENT_ERROR = res['MAX_ATTACHMENT_ERROR']
       globals.EMOJI = res['EMOJI']
       
       

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

@@ -96,5 +96,6 @@
     "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",
     "EMOJI": "Emoji"
 }

package/src/assets/i18n/es.json

@@ -96,5 +96,6 @@
     "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",
     "EMOJI": "Emoji"
 }

package/src/assets/i18n/fr.json

@@ -96,5 +96,6 @@
     "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",
     "EMOJI": "Emoji"
 }

package/src/assets/i18n/it.json

@@ -94,5 +94,6 @@
     "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",
     "EMOJI": "Emoji"
 }

package/src/chat21-core/providers/abstract/upload.service.ts

@@ -27,9 +27,13 @@ export abstract class UploadService {
   abstract BSStateUpload: BehaviorSubject<any>;
 
   // functions
-  abstract initialize(): void;
+  abstract initialize(projectId?: string): void;
   abstract upload(userId: string, upload: UploadModel): Promise<{downloadURL: string, src: string}>;
+  abstract uploadFile(userId: string, upload: UploadModel): Promise<{downloadURL: string, src: string}>;
+  abstract uploadAsset(userId: string, upload: UploadModel, expiration?: number): Promise<{downloadURL: string, src: string}>;
   abstract uploadProfile(userId: string, upload: UploadModel): Promise<any>;
   abstract delete(userId: string, path: string): Promise<any>;
+  abstract deleteFile(userId: string, path: string): Promise<any>;
+  abstract deleteAsset(userId: string, path: string): Promise<any>
   abstract deleteProfile(userId: string, path: string): Promise<any>
 }