@chat21/chat21-web-widget 5.1.20 → 5.1.23

package/CHANGELOG.md

@@ -6,6 +6,15 @@
 ### **Copyrigth**: 
 *Tiledesk SRL*
 
+# 5.1.23
+- **changed**: API for upload a file/iamges
+
+# 5.1.22
+- **changed**: Updated Launch.js for Wix and Shopify by bypassing scrdoc
+
+# 5.1.21 
+- **bug fixed**: saved the widget's size state to local storage (in HP conversations)
+
 # 5.1.20
 - **changed**: marked pipe do not render /n 
 

package/package.json

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

package/src/app/app.component.ts

@@ -262,7 +262,7 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
         this.tiledeskRequestsService.initialize(this.appConfigService.getConfig().apiUrl, this.g.projectid)
         this.messagingAuthService.initialize();
         this.chatManager.initialize();
-        this.uploadService.initialize();
+        this.uploadService.initialize(this.g.projectid);
     }
 
 
@@ -2038,27 +2038,50 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
         }
     }
 
-    onWidgetSizeChange(mode: 'min' | 'max' | 'top') {
-        var tiledeskDiv = this.g.windowContext.window.document.getElementById('tiledeskdiv');
-        this.g.size = mode;
+    onWidgetSizeChange(mode: any) {
+        const normalize = (val: any): 'min' | 'max' | 'top' => {
+            const v = (typeof val === 'string') ? val.toLowerCase().trim() : '';
+            return (v === 'min' || v === 'max' || v === 'top') ? (v as any) : 'min';
+        };
+        const normalizedMode = normalize(mode);
+
+        const tiledeskDiv = this.g.windowContext?.window?.document?.getElementById('tiledeskdiv');
+        this.g.size = normalizedMode;
+        if (!tiledeskDiv) {
+            // Widget container not yet available; still persist choice for later restores.
+            try {
+                this.appStorageService.setItem('size', normalizedMode);
+            } catch (e) {
+                this.logger.warn('[APP-COMP] onWidgetSizeChange > cannot persist size', e);
+            }
+            return;
+        }
+
         let parent = tiledeskDiv.parentElement as HTMLElement | null;
 
-        if(mode==='max'){
+        if(normalizedMode==='max'){
             tiledeskDiv.classList.add('max-size')
             tiledeskDiv.classList.remove('min-size')
             tiledeskDiv.classList.remove('top-size')
             if(parent) parent.classList.remove('overlay--popup');
-        } else if(mode==='min'){
+        } else if(normalizedMode==='min'){
             tiledeskDiv.classList.add('min-size')
             tiledeskDiv.classList.remove('max-size')
             tiledeskDiv.classList.remove('top-size')
             if(parent) parent.classList.remove('overlay--popup');
-        } else if(mode=== 'top'){
+        } else if(normalizedMode=== 'top'){
             tiledeskDiv.classList.add('top-size')
             tiledeskDiv.classList.remove('max-size')
             tiledeskDiv.classList.remove('min-size')
             if(parent) parent.classList.add('overlay--popup');
         }
+
+        // Persist size changes also from the home (conversations list) view.
+        try {
+            this.appStorageService.setItem('size', normalizedMode);
+        } catch (e) {
+            this.logger.warn('[APP-COMP] onWidgetSizeChange > cannot persist size', e);
+        }
     }
 
     /**

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

@@ -316,7 +316,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/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/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/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>
 }

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

@@ -31,7 +31,7 @@ export class FirebaseUploadService extends UploadService {
     super();
   }
 
-  public async initialize() {
+  public async initialize(projectId: string) {
     this.logger.debug('[FIREBASEUploadSERVICE] initialize');
 
     const { default: firebase} = await import("firebase/app");
@@ -96,14 +96,115 @@ export class FirebaseUploadService extends UploadService {
       }, async function complete() {
         // Handle successful uploads on complete
         that.logger.debug('[FIREBASEUploadSERVICE] Upload is complete', upload);
-       
+        
+        const downloadURL = await uploadTask.snapshot.ref.getDownloadURL();
+        resolve({downloadURL: downloadURL, src: downloadURL})
+        // that.BSStateUpload.next({upload: upload});
+
+      });
+    })
+
+  }
+
+  public uploadFile(userId: string, upload: UploadModel): Promise<{downloadURL: string, src: any}> {
+    const that = this;
+    const uid = this.createGuid();
+    const urlImagesNodeFirebase = '/public/images/' + userId + '/' + uid + '/' + upload.file.name;
+    this.logger.debug('[FIREBASEUploadSERVICE] pushUpload ', urlImagesNodeFirebase, upload.file);
+
+    // Create a root reference
+    const storageRef = this.firebase.storage().ref();
+    this.logger.debug('[FIREBASEUploadSERVICE] storageRef', storageRef);
+    
+    // Create a reference to 'mountains.jpg'
+    const mountainsRef = storageRef.child(urlImagesNodeFirebase);
+    this.logger.debug('[FIREBASEUploadSERVICE] mountainsRef ', mountainsRef);
+ 
+    // const metadata = {};
+    const metadata = { name: upload.file.name, contentType: upload.file.type, contentDisposition: 'attachment; filename=' + upload.file.name };
+
+    let uploadTask = mountainsRef.put(upload.file, metadata);
+   
+    return new Promise((resolve, reject) => {
+      uploadTask.on('state_changed', function progress(snapshot) {
+        // Observe state change events such as progress, pause, and resume
+        // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
+        var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
+        that.logger.debug('[FIREBASEUploadSERVICE] Upload is ' + progress + '% done');
+        
+        // ----------------------------------------------------------------------------------------------------------------------------------------------
+        // BehaviorSubject publish the upload progress state - the subscriber is in ion-conversastion-detail.component.ts > listenToUploadFileProgress()
+        // ----------------------------------------------------------------------------------------------------------------------------------------------
+      
+        that.BSStateUpload.next({ upload: progress, type: upload.file.type });
+        
+        switch (snapshot.state) {
+          case that.firebase.storage.TaskState.PAUSED: // or 'paused'
+            that.logger.debug('[FIREBASEUploadSERVICE] Upload is paused');
+            
+            break;
+          case that.firebase.storage.TaskState.RUNNING: // or 'running'
+            that.logger.debug('[FIREBASEUploadSERVICE] Upload is running');
+            
+            break;
+        }
+      }, function error(error) {
+        // Handle unsuccessful uploads
+        reject(error)
+      }, async function complete() {
+        // Handle successful uploads on complete
+        that.logger.debug('[FIREBASEUploadSERVICE] Upload is complete', upload);
+        
         const downloadURL = await uploadTask.snapshot.ref.getDownloadURL();
-        resolve({downloadURL : downloadURL, src: downloadURL})
+        resolve({downloadURL: downloadURL, src: downloadURL})
         // that.BSStateUpload.next({upload: upload});
 
       });
     })
+  }
+
+  public uploadAsset(userId: string, upload: UploadModel, expiration: number = 60): Promise<{downloadURL: string, src: any}> {
+    // expiration is ignored on Firebase, but kept for API compatibility with NativeUploadService
+    const that = this;
+    const uid = this.createGuid();
+    const urlAssetsNodeFirebase = '/public/assets/' + userId + '/' + uid + '/' + upload.file.name;
+    this.logger.debug('[FIREBASEUploadSERVICE] uploadAsset ', urlAssetsNodeFirebase, upload.file, 'expiration:', expiration);
 
+    // Create a root reference
+    const storageRef = this.firebase.storage().ref();
+    this.logger.debug('[FIREBASEUploadSERVICE] storageRef', storageRef);
+    
+    const assetRef = storageRef.child(urlAssetsNodeFirebase);
+    this.logger.debug('[FIREBASEUploadSERVICE] assetRef ', assetRef);
+ 
+    const metadata = { name: upload.file.name, contentType: upload.file.type, contentDisposition: 'attachment; filename=' + upload.file.name };
+
+    let uploadTask = assetRef.put(upload.file, metadata);
+   
+    return new Promise((resolve, reject) => {
+      uploadTask.on('state_changed', function progress(snapshot) {
+        var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
+        that.logger.debug('[FIREBASEUploadSERVICE] uploadAsset is ' + progress + '% done');
+        
+        that.BSStateUpload.next({ upload: progress, type: upload.file.type });
+        
+        switch (snapshot.state) {
+          case that.firebase.storage.TaskState.PAUSED:
+            that.logger.debug('[FIREBASEUploadSERVICE] uploadAsset is paused');
+            break;
+          case that.firebase.storage.TaskState.RUNNING:
+            that.logger.debug('[FIREBASEUploadSERVICE] uploadAsset is running');
+            break;
+        }
+      }, function error(error) {
+        reject(error)
+      }, async function complete() {
+        that.logger.debug('[FIREBASEUploadSERVICE] uploadAsset is complete', upload);
+        
+        const downloadURL = await uploadTask.snapshot.ref.getDownloadURL();
+        resolve({downloadURL: downloadURL, src: downloadURL})
+      });
+    })
   }
 
   public uploadProfile(userId: string, upload: UploadModel): Promise<any>  {
@@ -154,7 +255,9 @@ export class FirebaseUploadService extends UploadService {
         // Handle successful uploads on complete
         that.logger.debug('[FIREBASEUploadSERVICE] Upload is complete', upload);
        
-        resolve(uploadTask.snapshot.ref.getDownloadURL())
+        const downloadURL = uploadTask.snapshot.ref.getDownloadURL();
+        resolve({downloadURL : downloadURL, url: downloadURL})
+
         // that.BSStateUpload.next({upload: upload});
 
       });
@@ -192,6 +295,40 @@ export class FirebaseUploadService extends UploadService {
     })
   }
 
+  public async deleteFile(userId: string, path: string): Promise<any>{
+    const that = this;
+    const file_name_photo = 'photo.jpg';
+    const file_name_thumb_photo = 'thumb_photo.jpg';
+
+    that.logger.debug('[FIREBASEUploadSERVICE] delete image for USER', userId, path);
+
+    let uid = path.split(userId)[1].split('%2F')[1]; // get the UID of the image
+    let imageName = path.split(uid + '%2F')[1].split('?')[0];
+
+    // Create a root reference
+    const storageRef = this.firebase.storage().ref();
+    const ref = storageRef.child('public/images/' + userId + '/'+ uid + '/')
+    let arrayPromise = []
+    await ref.listAll().then((dir => {
+      dir.items.forEach(fileRef => arrayPromise.push(this.deleteFile(ref.fullPath, fileRef.name)));
+    })).catch(error => {
+      that.logger.error('[FIREBASEUploadSERVICE] delete: listAll error', error)
+    })
+
+    //AWAIT to return ALL the promise delete()
+    return new Promise((resolve, reject)=> {
+      Promise.all(arrayPromise).then(()=>{
+        resolve(true)
+      }).catch((error)=>{
+        reject(error)
+      })
+    })
+  }
+
+  public async deleteAsset(userId: string, path: string): Promise<any>{
+    return this.deleteProfile(userId, path);
+  }
+
   public async deleteProfile(userId: string, path: string): Promise<any>{
     const that = this;
     const file_name_photo = 'photo.jpg';
@@ -219,13 +356,5 @@ export class FirebaseUploadService extends UploadService {
     })
   }
 
-  // // ------------------------------------
-  // // Delete the file photo
-  // // ------------------------------------
-  private deleteFile(pathToFile, fileName){
-    const ref = this.firebase.storage().ref(pathToFile);
-    const childRef = ref.child(fileName);
-    return childRef.delete()
-  }
 
 }

package/src/chat21-core/providers/native/native-image-repo.ts

@@ -16,7 +16,7 @@ export class NativeImageRepoService extends ImageRepoService {
      * @param uid
      */
     getImagePhotoUrl(uid: string): string {
-        this.baseImageURL = this.getImageBaseUrl() + 'images'
+        this.baseImageURL = this.getImageBaseUrl() + 'files'
         let sender_id = '';
         if (uid.includes('bot_')) {
             sender_id = uid.slice(4)

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

@@ -1,7 +1,7 @@
 import { UploadService } from '../abstract/upload.service';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { BehaviorSubject } from 'rxjs';
+import { BehaviorSubject, first } from 'rxjs';
 import { UploadModel } from '../../models/upload';
 import { AppStorageService } from '../abstract/app-storage.service';
 import { LoggerService } from '../abstract/logger.service';
@@ -14,8 +14,8 @@ export class NativeUploadService extends UploadService {
     BSStateUpload: BehaviorSubject<any> = new BehaviorSubject<any>(null)
 
     private tiledeskToken: string;
-    private URL_TILEDESK_IMAGES: string;
     private URL_TILEDESK_FILE: string;
+    private URL_TILEDESK_UPLOAD: string;
     private logger: LoggerService = LoggerInstance.getInstance()
 
     constructor(
@@ -25,16 +25,18 @@ export class NativeUploadService extends UploadService {
         super();
     }
 
-    initialize(): void {
-        this.logger.debug('[NATIVE UPLOAD] initialize')
-        this.URL_TILEDESK_FILE = this.getBaseUrl() + 'files'
-        this.URL_TILEDESK_IMAGES = this.getBaseUrl() + 'images'
+    initialize(projectId?: string): void {
+        this.logger.info('[NATIVE UPLOAD] initialize', this.getBaseUrl())
+        if (projectId) {
+            this.URL_TILEDESK_FILE = this.getBaseUrl() + projectId + '/files'
+        }
+        this.URL_TILEDESK_UPLOAD = this.getBaseUrl();
         this.tiledeskToken = this.appStorage.getItem('tiledeskToken')
     }
 
 
     upload(userId: string, upload: UploadModel): Promise<{downloadURL: string, src: string}>  {
-        this.logger.debug('[NATIVE UPLOAD] - upload new image/file ... upload', upload)
+        this.logger.log('[NATIVE UPLOAD] - upload new image/file ... upload', upload)
         const headers = new HttpHeaders({
             Authorization: this.tiledeskToken,
             //'Content-Type': 'multipart/form-data',
@@ -45,37 +47,93 @@ export class NativeUploadService extends UploadService {
 
         const that = this;
         if ((upload.file.type.startsWith('image') && (!upload.file.type.includes('svg')))) {
-            this.logger.debug('[NATIVE UPLOAD] - upload new image')
             //USE IMAGE API
-            const url = this.URL_TILEDESK_IMAGES + '/users'
+            const url = this.URL_TILEDESK_UPLOAD + 'images/users'
             return new Promise((resolve, reject) => {
-                that.http.post(url, formData, requestOptions).subscribe(data => {
-                    const downloadURL = this.URL_TILEDESK_IMAGES + '?path=' + data['filename'];
-                    resolve({downloadURL : downloadURL, src: downloadURL})
-                    // that.BSStateUpload.next({upload: upload});
-                }, (error) => {
-                    reject(error)
+                that.http.post(url, formData, requestOptions).pipe(first()).subscribe({
+                    next: (data) => {
+                        const downloadURL = this.URL_TILEDESK_UPLOAD + 'images?path=' + encodeURIComponent(data?.['filename']);
+                        resolve({downloadURL : downloadURL, src: downloadURL})
+                        // that.BSStateUpload.next({upload: upload});
+                    },
+                    error: (error) => {
+                        reject(error)
+                    }
                 });
             });
         } else {
-            this.logger.debug('[NATIVE UPLOAD] - upload new file')
             //USE FILE API
-            const url = this.URL_TILEDESK_FILE + '/users'
+            const url = this.URL_TILEDESK_UPLOAD + 'files/users'
             return new Promise((resolve, reject) => {
-                that.http.post(url, formData, requestOptions).subscribe(data => {
-                    const src = this.URL_TILEDESK_FILE + '?path=' + encodeURI(data['filename']);
-                    const downloadURL = this.URL_TILEDESK_FILE + '/download' + '?path=' + encodeURI(data['filename']);
-                    resolve({downloadURL : downloadURL, src: src})
-                    // that.BSStateUpload.next({upload: upload});
-                }, (error) => {
-                    this.logger.error('[NATIVE UPLOAD] - ERROR upload new file ', error)
-                    reject(error)
+                that.http.post(url, formData, requestOptions).pipe(first()).subscribe({
+                    next: (data) => {
+                        const src = this.URL_TILEDESK_UPLOAD + 'files?path=' + encodeURIComponent(data['filename']);
+                        const downloadURL = this.URL_TILEDESK_UPLOAD + 'files/download' + '?path=' + encodeURIComponent(data['filename']);
+                        resolve({downloadURL : downloadURL, src: src})
+                        // that.BSStateUpload.next({upload: upload});
+                    }, 
+                    error: (error) => {
+                        this.logger.error('[NATIVE UPLOAD] - ERROR upload new file ', error)
+                        reject(error)
+                    }
                 });
             });
         }
         
     }
 
+    uploadFile(userId: string, upload: UploadModel): Promise<{downloadURL: string, src: string}>  {
+        this.logger.log('[NATIVE UPLOAD] - upload new image/file ... upload', upload)
+        const headers = new HttpHeaders({
+            Authorization: this.tiledeskToken,
+            //'Content-Type': 'multipart/form-data',
+        });
+        const requestOptions = { headers: headers };
+        const formData = new FormData();
+        formData.append('file', upload.file);
+
+        const that = this;
+        const url = this.URL_TILEDESK_FILE + '/chat'
+        return new Promise((resolve, reject) => {
+            that.http.post(url, formData, requestOptions).pipe(first()).subscribe({
+                next: (data) => {
+                    const src = this.URL_TILEDESK_UPLOAD + 'files?path=' + encodeURIComponent(data['filename']);
+                    const downloadURL = this.URL_TILEDESK_UPLOAD + 'files/download?path=' + encodeURIComponent(data['filename']);
+                    resolve({downloadURL : downloadURL, src: src})
+                },
+                error: (error) => {
+                    reject(error)
+                }
+            });
+        });    
+    }
+
+    uploadAsset(userId: string, upload: UploadModel, expiration: number = 60): Promise<{downloadURL: string, src: string}> {
+        this.logger.log('[NATIVE UPLOAD] - upload new asset ... upload', upload, 'expiration:', expiration)
+        const headers = new HttpHeaders({
+            Authorization: this.tiledeskToken,
+        });
+        const requestOptions = { headers: headers };
+        const formData = new FormData();
+        formData.append('file', upload.file);
+
+        const that = this;
+        const queryString = expiration !== undefined ? `?expiration=${encodeURIComponent(String(expiration))}` : ''
+        const url = this.URL_TILEDESK_FILE + `/assets${queryString}`
+        return new Promise((resolve, reject) => {
+            that.http.post(url, formData, requestOptions).pipe(first()).subscribe({
+                next: (data) => {
+                    const src = this.URL_TILEDESK_UPLOAD + 'files?path=' + data['filename'];
+                    const downloadURL = this.URL_TILEDESK_UPLOAD + 'files/download?path=' + encodeURIComponent(data['filename']);
+                    resolve({downloadURL : downloadURL, src: src})
+                },
+                error: (error) => {
+                    reject(error)
+                }
+            });
+        });
+    }
+
     uploadProfile(userId: string, upload: UploadModel): Promise<any> {
         this.logger.log('[NATIVE UPLOAD] - upload new photo profile  ... upload', upload)
         const headers = new HttpHeaders({
@@ -88,14 +146,18 @@ export class NativeUploadService extends UploadService {
 
         // USE IMAGE API
         const that = this;
-        const url = this.URL_TILEDESK_IMAGES + `/users/photo?force=true&user_id=${userId}`
+        const queryString = userId?.startsWith('bot_') ? `?bot_id=${encodeURIComponent(userId.substring('bot_'.length))}` : ''
+        const url = this.URL_TILEDESK_FILE + `/users/photo${queryString}`
         return new Promise((resolve, reject) => {
-            that.http.put(url, formData, requestOptions).subscribe(data => {
-                const downloadURL = this.URL_TILEDESK_IMAGES + '?path=' + data['thumbnail'];
-                resolve(downloadURL)
-                // that.BSStateUpload.next({upload: upload});
-            }, (error) => {
-                reject(error)
+            that.http.put(url, formData, requestOptions).pipe(first()).subscribe({
+                next: (data) => {
+                    const downloadURL = this.getBaseUrl() + 'files?path=' + data['thumbnail'];
+                    resolve(downloadURL)
+                    // that.BSStateUpload.next({upload: upload});
+                },
+                error: (error) => {
+                    reject(error)
+                }
             });
         });
     }
@@ -110,18 +172,50 @@ export class NativeUploadService extends UploadService {
 
         //USE IMAGE API
         const that = this;
-        const url = this.URL_TILEDESK_IMAGES + '/users' + '?path=' + path.split('path=')[1]
+        const url = this.URL_TILEDESK_UPLOAD + 'images/users' + '?path=' + path.split('path=')[1]
+        return new Promise((resolve, reject) => {
+            that.http.delete(url, requestOptions).pipe(first()).subscribe({
+                next: (data) => {
+                    // const downloadURL = this.URL_TILEDESK_IMAGES + '?path=' + data['filename'];
+                    resolve(true)
+                    // that.BSStateUpload.next({upload: upload});
+                }, 
+                error: (error) => {
+                    reject(error)
+                }
+            });
+        });
+    }
+
+    deleteFile(userId: string, path: string): Promise<any>{
+        this.logger.log('[NATIVE UPLOAD] - delete image ... upload', userId)
+        const headers = new HttpHeaders({
+            Authorization: this.tiledeskToken,
+            //'Content-Type': 'multipart/form-data',
+        });
+        const requestOptions = { headers: headers };
+
+        //USE IMAGE API
+        const that = this;
+        const url = this.URL_TILEDESK_FILE + '?path=' + path.split('path=')[1]
         return new Promise((resolve, reject) => {
-            that.http.delete(url, requestOptions).subscribe(data => {
-                // const downloadURL = this.URL_TILEDESK_IMAGES + '?path=' + data['filename'];
-                resolve(true)
-                // that.BSStateUpload.next({upload: upload});
-            }, (error) => {
-                reject(error)
+            that.http.delete(url, requestOptions).pipe(first()).subscribe({
+                next: (data) => {
+                    // const downloadURL = this.URL_TILEDESK_IMAGES + '?path=' + data['filename'];
+                    resolve(true)
+                    // that.BSStateUpload.next({upload: upload});
+                },
+                error: (error) => {
+                    reject(error)
+                }
             });
         });
     }
 
+    deleteAsset(userId: string, path: string): Promise<any>{
+        return this.deleteFile(userId, path);
+    }
+
     deleteProfile(userId: string, path: string): Promise<any>{
         this.logger.log('[NATIVE UPLOAD] - delete image ... upload', userId)
         const headers = new HttpHeaders({
@@ -132,14 +226,17 @@ export class NativeUploadService extends UploadService {
 
         //USE IMAGE API
         const that = this;
-        const url = this.URL_TILEDESK_IMAGES + '/users' + '?path=' + "uploads/users/"+ userId + "/images/photo.jpg"
+        const url = this.URL_TILEDESK_FILE + '?path=' + "uploads/users/"+ userId + "/images/photo.jpg"
         return new Promise((resolve, reject) => {
-            that.http.delete(url, requestOptions).subscribe(data => {
-                // const downloadURL = this.URL_TILEDESK_IMAGES + '?path=' + data['filename'];
-                resolve(true)
-                // that.BSStateUpload.next({upload: upload});
-            }, (error) => {
-                reject(error)
+            that.http.delete(url, requestOptions).pipe(first()).subscribe({
+                next: (data) => {
+                    // const downloadURL = this.URL_TILEDESK_IMAGES + '?path=' + data['filename'];
+                    resolve(true)
+                    // that.BSStateUpload.next({upload: upload});
+                },
+                error: (error) => {
+                    reject(error)
+                }
             });
         });
     }

package/src/launch.js

@@ -217,13 +217,68 @@ function loadIframe(tiledeskScriptBaseLocation) {
 
     iDiv.appendChild(ifrm);
 
-    if(tiledeskScriptBaseLocation.includes('localhost')){
-      ifrm.contentWindow.document.open();
-      ifrm.contentWindow.document.write(srcTileDesk);
-      ifrm.contentWindow.document.close();
-    }else {
-      ifrm.srcdoc = srcTileDesk
+    // Funzione helper per caricare iframe con fallback per compatibilità CSP (Wix, etc.)
+    // Usa Blob URL come metodo principale (più compatibile con CSP) con fallback a srcdoc e document.write
+    function loadIframeContent(iframe, htmlContent, baseLocation) {
+        var isLocalhost = baseLocation.includes('localhost');
+        var blobUrl = null;
+        
+        // Metodo 1: Blob URL (più compatibile con CSP di Wix e altre piattaforme)
+        // Usa Blob URL come metodo principale perché è meno spesso bloccato da CSP rispetto a srcdoc
+        if (typeof Blob !== 'undefined' && typeof URL !== 'undefined' && URL.createObjectURL) {
+            try {
+                var blob = new Blob([htmlContent], { type: 'text/html;charset=utf-8' });
+                blobUrl = URL.createObjectURL(blob);
+                iframe.src = blobUrl;
+                
+                // Cleanup del blob URL dopo il caricamento per liberare memoria
+                var originalOnload = iframe.onload;
+                iframe.onload = function() {
+                    // Revoca il blob URL dopo un delay per assicurarsi che tutto sia caricato
+                    setTimeout(function() {
+                        if (blobUrl) {
+                            try {
+                                URL.revokeObjectURL(blobUrl);
+                                blobUrl = null;
+                            } catch(e) {
+                                console.warn('Error revoking blob URL:', e);
+                            }
+                        }
+                    }, 1000);
+                    if (originalOnload) originalOnload.call(this);
+                };
+                return; // Blob URL impostato con successo
+            } catch(e) {
+                console.warn('Blob URL not available, trying srcdoc:', e);
+            }
+        }
+        
+        // Metodo 2: srcdoc (fallback se Blob URL non disponibile)
+        // Skip per localhost (usa document.write per compatibilità sviluppo)
+        if (!isLocalhost && 'srcdoc' in iframe) {
+            try {
+                iframe.srcdoc = htmlContent;
+                return; // srcdoc impostato
+            } catch(e) {
+                console.warn('srcdoc not allowed, trying document.write:', e);
+            }
+        }
+        
+        // Metodo 3: document.write (fallback finale, funziona su localhost e browser vecchi)
+        if (isLocalhost || (iframe.contentWindow && iframe.contentWindow.document)) {
+            try {
+                iframe.contentWindow.document.open();
+                iframe.contentWindow.document.write(htmlContent);
+                iframe.contentWindow.document.close();
+                return; // document.write completato
+            } catch(e) {
+                console.error('All iframe loading methods failed:', e);
+            }
+        }
     }
+    
+    // Carica il contenuto dell'iframe con fallback automatico
+    loadIframeContent(ifrm, srcTileDesk, tiledeskScriptBaseLocation);
 
 
 }

package/src/launch_template.js

@@ -218,13 +218,68 @@ function loadIframe(tiledeskScriptBaseLocation) {
 
     iDiv.appendChild(ifrm);
 
-    if(tiledeskScriptBaseLocation.includes('localhost')){
-      ifrm.contentWindow.document.open();
-      ifrm.contentWindow.document.write(srcTileDesk);
-      ifrm.contentWindow.document.close();
-    }else {
-      ifrm.srcdoc = srcTileDesk
+    // Funzione helper per caricare iframe con fallback per compatibilità CSP (Wix, etc.)
+    // Usa Blob URL come metodo principale (più compatibile con CSP) con fallback a srcdoc e document.write
+    function loadIframeContent(iframe, htmlContent, baseLocation) {
+        var isLocalhost = baseLocation.includes('localhost');
+        var blobUrl = null;
+        
+        // Metodo 1: Blob URL (più compatibile con CSP di Wix e altre piattaforme)
+        // Usa Blob URL come metodo principale perché è meno spesso bloccato da CSP rispetto a srcdoc
+        if (typeof Blob !== 'undefined' && typeof URL !== 'undefined' && URL.createObjectURL) {
+            try {
+                var blob = new Blob([htmlContent], { type: 'text/html;charset=utf-8' });
+                blobUrl = URL.createObjectURL(blob);
+                iframe.src = blobUrl;
+                
+                // Cleanup del blob URL dopo il caricamento per liberare memoria
+                var originalOnload = iframe.onload;
+                iframe.onload = function() {
+                    // Revoca il blob URL dopo un delay per assicurarsi che tutto sia caricato
+                    setTimeout(function() {
+                        if (blobUrl) {
+                            try {
+                                URL.revokeObjectURL(blobUrl);
+                                blobUrl = null;
+                            } catch(e) {
+                                console.warn('Error revoking blob URL:', e);
+                            }
+                        }
+                    }, 1000);
+                    if (originalOnload) originalOnload.call(this);
+                };
+                return; // Blob URL impostato con successo
+            } catch(e) {
+                console.warn('Blob URL not available, trying srcdoc:', e);
+            }
+        }
+        
+        // Metodo 2: srcdoc (fallback se Blob URL non disponibile)
+        // Skip per localhost (usa document.write per compatibilità sviluppo)
+        if (!isLocalhost && 'srcdoc' in iframe) {
+            try {
+                iframe.srcdoc = htmlContent;
+                return; // srcdoc impostato
+            } catch(e) {
+                console.warn('srcdoc not allowed, trying document.write:', e);
+            }
+        }
+        
+        // Metodo 3: document.write (fallback finale, funziona su localhost e browser vecchi)
+        if (isLocalhost || (iframe.contentWindow && iframe.contentWindow.document)) {
+            try {
+                iframe.contentWindow.document.open();
+                iframe.contentWindow.document.write(htmlContent);
+                iframe.contentWindow.document.close();
+                return; // document.write completato
+            } catch(e) {
+                console.error('All iframe loading methods failed:', e);
+            }
+        }
     }
+    
+    // Carica il contenuto dell'iframe con fallback automatico
+    loadIframeContent(ifrm, srcTileDesk, tiledeskScriptBaseLocation);
 
 
 }