@chat21/chat21-ionic 3.4.30 → 3.4.31

package/CHANGELOG.md

@@ -8,6 +8,10 @@
 ### **Copyrigth**: 
 *Tiledesk SRL*
 
+# 3.4.31 in PROD
+- **changed**: enhance HTML entities encoding by normalizing line breaks and handling null/undefined inputs
+- **changed**: API for upload a file/image into chat
+
 # 3.4.30 in PROD
 - **changed**: when the app is in background, play a sound whenever a new message arrives.
 

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@chat21/chat21-ionic",
     "author": "Tiledesk SRL",
-    "version": "3.4.30",
+    "version": "3.4.31",
     "license": "MIT License",
     "homepage": "https://tiledesk.com/",
     "repository": {

package/src/app/app.component.ts

@@ -119,7 +119,6 @@ export class AppComponent implements OnInit {
     private navService: NavProxyService,
     // public chatPresenceHandler: ChatPresenceHandler,
     public typingService: TypingService,
-    public uploadService: UploadService,
     public appStorageService: AppStorageService,
 
     // public chatConversationsHandler: ChatConversationsHandler,
@@ -547,7 +546,6 @@ export class AppComponent implements OnInit {
       if (pushEngine && pushEngine !== 'none') {
         this.notificationsService.initialize(this.tenant, vap_id_Key, platform)
       }
-      this.uploadService.initialize();
 
       this.setLanguage(null)
       this.initAuthentication();

package/src/app/chatlib/conversation-detail/message/image/image.component.html

@@ -8,5 +8,6 @@
     [height]="height"
     [src]="metadata.src" 
     (load)="onLoaded($event)" 
+    (error)="onError($event)"
     (click)="openImageViewerModal(metadata.src, metadata.name)" />
 </div>

package/src/app/chatlib/conversation-detail/message/image/image.component.ts

@@ -15,6 +15,7 @@ export class ImageComponent implements OnInit {
   loading: boolean = true
   modal: any
   span: any
+  private readonly fallbackSrc = 'assets/img/no_data_found.png'
 
   constructor() { }
 
@@ -26,6 +27,24 @@ export class ImageComponent implements OnInit {
     this.onElementRendered.emit({element: "image", status:true})
   }
 
+  onError(event: Event) {
+    this.loading = false
+    const img = event?.target as HTMLImageElement | null
+    if (!img) {
+      return
+    }
+    // avoid infinite loop if fallback image fails too
+    if (img.src && img.src.includes(this.fallbackSrc)) {
+      return
+    }
+    img.src = this.fallbackSrc
+    // also update metadata so click-to-open uses the fallback consistently
+    if (this.metadata) {
+      this.metadata.src = this.fallbackSrc
+    }
+    this.onElementRendered.emit({ element: 'image', status: true })
+  }
+
   _downloadImage(url: string, fileName: string) {
     // console.log('Image COMP - IMAGE URL ', url) 
     // console.log('Image COMP - IMAGE FILENAME ', fileName) 

package/src/app/components/conversation-detail/message-text-area/message-text-area.component.ts

@@ -12,7 +12,7 @@ import { LoaderPreviewPage } from 'src/app/modals/loader-preview/loader-preview.
 // Services 
 import { UploadService } from 'src/chat21-core/providers/abstract/upload.service';
 // utils
-import { TYPE_MSG_EMAIL, TYPE_MSG_TEXT, CHANNEL_TYPE } from 'src/chat21-core/utils/constants';
+import { TYPE_MSG_EMAIL, TYPE_MSG_TEXT, CHANNEL_TYPE, TYPE_DIRECT } from 'src/chat21-core/utils/constants';
 // Models
 import { UploadModel } from 'src/chat21-core/models/upload';
 
@@ -162,6 +162,11 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
 
     this.project = this.projectService.getProject();
     this.logger.log('[CONVS-DETAIL] - returnChangeTextArea ngOnChanges in [MSG-TEXT-AREA] project', this.project)
+    if (this.channelType === TYPE_DIRECT) {
+      this.uploadService.initialize();
+    } else {
+      this.uploadService.initialize(this.project?._id);
+    }
     // use case drop
     if (this.dropEvent) {
       this.presentModal(this.dropEvent)
@@ -384,7 +389,10 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
           this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] FIREBASE-UPLOAD presentModal onDidDismiss currentUpload', currentUpload);
           this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] FIREBASE-UPLOAD presentModal onDidDismiss detail.data', detail.data);
 
-          that.uploadService.upload(that.loggedUser.uid, currentUpload).then((data) => {
+          const uploadPromise = (that.channelType === TYPE_DIRECT)
+            ? that.uploadService.upload(that.loggedUser.uid, currentUpload)
+            : that.uploadService.uploadFile(that.loggedUser.uid, currentUpload)
+          uploadPromise.then((data) => {
             metadata.src = data.src;
             metadata.downloadURL = data.downloadURL;
             this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] FIREBASE-UPLOAD presentModal invio msg metadata::: ', metadata);

package/src/app/directives/html-entities-encode.pipe.ts

@@ -1,5 +1,5 @@
 import { Pipe, PipeTransform } from '@angular/core';
-import { htmlEntities, replaceEndOfLine } from 'src/chat21-core/utils/utils';
+import { htmlEntities } from 'src/chat21-core/utils/utils';
 
 @Pipe({
   name: 'htmlEntiesEncode'
@@ -8,10 +8,25 @@ import { htmlEntities, replaceEndOfLine } from 'src/chat21-core/utils/utils';
 export class HtmlEntitiesEncodePipe implements PipeTransform {
 
   transform(text: any, args?: any): any { 
-    text = htmlEntities(text);
-    text = replaceEndOfLine(text);
-    text = text.trim();
-    return text;
+    if (text === null || text === undefined) {
+      return text;
+    }
+
+    // Normalize line breaks BEFORE encoding HTML:
+    // - real CRLF/CR/LF to LF
+    // - escaped sequences (\n, \r, \r\n) to LF
+    // - HTML <br> tags (if present) to LF
+    let normalized = String(text)
+      .replace(/\r\n/g, '\n')
+      .replace(/\r/g, '\n')
+      .replace(/\\r\\n/g, '\n')
+      .replace(/\\n/g, '\n')
+      .replace(/\\r/g, '\n')
+      .replace(/<br\s*\/?>/gi, '\n');
+
+    normalized = htmlEntities(normalized);
+    normalized = normalized.trim();
+    return normalized;
   }
 
 }

package/src/app/pages/conversation-detail/conversation-detail.page.ts

@@ -84,6 +84,7 @@ import { Project } from 'src/chat21-core/models/projects';
 import { Globals } from 'src/app/utils/globals';
 import { ProjectService } from 'src/app/services/projects/project.service';
 import { getOSCode } from 'src/app/utils/utils';
+import { UploadService } from 'src/chat21-core/providers/abstract/upload.service';
 
 @Component({
   selector: 'app-conversation-detail',
@@ -236,6 +237,7 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     public conversationHandlerBuilderService: ConversationHandlerBuilderService,
     public cannedResponsesService: CannedResponsesService,
     public imageRepoService: ImageRepoService,
+    public uploadService: UploadService,
     public presenceService: PresenceService,
     public toastController: ToastController,
     public tiledeskService: TiledeskService,
@@ -478,7 +480,8 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     this.isFileSelected = false // indicates if a file has been selected (image to upload)
     this.isEmailEnabled = (this.appConfigProvider.getConfig().emailSection === 'true' || this.appConfigProvider.getConfig().emailSection === true) ? true : false;
     this.isWhatsappTemplatesEnabled = (this.appConfigProvider.getConfig().whatsappTemplatesSection === 'true' || this.appConfigProvider.getConfig().whatsappTemplatesSection === true) ? true : false;
-
+    this.fileUploadAccept = this.appConfigProvider.getConfig().fileUploadAccept
+    
     this.cannedResponsesService.initialize(appconfig.apiUrl)
 
     if (checkPlatformIsMobile()) {
@@ -507,10 +510,10 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     // this.initConversationsHandler(); // nk
     if (this.conversationWith) {
       this.disableTextarea = false
+      this.startConversation();
       this._getProjectIdByConversationWith(this.conversationWith)
       this.initConversationHandler()
       this.initGroupsHandler();
-      this.startConversation();
       this.initSubscriptions();
       this.getLeadDetail();
       this.initializeTyping();
@@ -521,6 +524,7 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
   }
 
   _getProjectIdByConversationWith(conversationWith: string) {
+    console.log('[CONVS-DETAIL] - _getProjectIdByConversationWith conversationWith', conversationWith, this.channelType)
     if (this.channelType !== TYPE_DIRECT && !this.conversationWith.startsWith('group-')) {
       this.tiledeskService.getProjectIdByConvRecipient(conversationWith).subscribe((res) => {
         this.logger.log('[CONVS-DETAIL] - GET PROJECTID BY CONV RECIPIENT RES + projectId', res, res.id_project)

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

@@ -34,9 +34,13 @@ export abstract class UploadService {
   // abstract tenant = environment.tenant;
 
   // 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

@@ -42,7 +42,7 @@ export class FirebaseUploadService extends UploadService {
     });
   }
 
-  public initialize() {
+  public async initialize(projectId?: string) {
     this.logger.log('[FIREBASEUploadSERVICE] initialize');
   }
   
@@ -104,6 +104,107 @@ export class FirebaseUploadService extends UploadService {
 
   }
 
+  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 = 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 firebase.storage.TaskState.PAUSED: // or 'paused'
+            that.logger.debug('[FIREBASEUploadSERVICE] Upload is paused');
+            
+            break;
+          case 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})
+        // 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 = 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 firebase.storage.TaskState.PAUSED:
+            that.logger.debug('[FIREBASEUploadSERVICE] uploadAsset is paused');
+            break;
+          case 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>  {
     const that = this;
     const urlImagesNodeFirebase = '/profiles/' + userId + '/photo.jpg'
@@ -192,6 +293,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 = 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 +354,5 @@ export class FirebaseUploadService extends UploadService {
     })
   }
 
-  // // ------------------------------------
-  // // Delete the file photo
-  // // ------------------------------------
-  private deleteFile(pathToFile, fileName){
-    const ref = 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

@@ -6,6 +6,7 @@ import { UploadModel } from '../../models/upload';
 import { AppStorageService } from '../abstract/app-storage.service';
 import { LoggerService } from '../abstract/logger.service';
 import { LoggerInstance } from '../logger/loggerInstance';
+import { first } from 'rxjs/operators';
 
 // @Injectable({ providedIn: 'root' })
 @Injectable()
@@ -14,8 +15,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,15 +26,17 @@ export class NativeUploadService extends UploadService {
         super();
     }
 
-    initialize(): void {
-        this.logger.info('[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}>  {
+    upload(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,
@@ -45,37 +48,93 @@ export class NativeUploadService extends UploadService {
 
         const that = this;
         if ((upload.file.type.startsWith('image') && (!upload.file.type.includes('svg')))) {
-            this.logger.log('[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.log('[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 +147,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 +173,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 +227,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)
+                }
             });
         });
     }