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

package/CHANGELOG.md

@@ -6,6 +6,10 @@
 ### **Copyrigth**: 
 *Tiledesk SRL*
 
+# 5.1.20-rc2
+- **changed**: API for upload a file/iamges
+- **changed**: marked pipe do not render /n 
+
 # 5.1.20-rc1
 - **changed**: API for upload a file/iamges
 

package/package.json

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

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

@@ -317,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/pipe/marked.pipe.ts

@@ -18,7 +18,23 @@ export class MarkedPipe implements PipeTransform {
       typeof value === 'string'
         ? value
         : (value === null || value === undefined) ? '' : String(value);
-    const safeInput = htmlEntities(input);
+    
+    // Converti i \n letterali in newline reali prima di htmlEntities
+    // così il markdown con breaks: true li renderizzerà correttamente
+    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'), '>');
 
     const renderer = new marked.Renderer();
     renderer.link = function({ href, title, tokens }) {

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

@@ -27,9 +27,13 @@ export abstract class UploadService {
   abstract BSStateUpload: BehaviorSubject<any>;
 
   // functions
-  abstract initialize(projectId: string): 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

@@ -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-upload-service.ts

@@ -15,6 +15,7 @@ export class NativeUploadService extends UploadService {
 
     private tiledeskToken: string;
     private URL_TILEDESK_FILE: string;
+    private URL_TILEDESK_UPLOAD: string;
     private logger: LoggerService = LoggerInstance.getInstance()
 
     constructor(
@@ -24,9 +25,12 @@ export class NativeUploadService extends UploadService {
         super();
     }
 
-    initialize(projectId: string): void {
+    initialize(projectId?: string): void {
         this.logger.info('[NATIVE UPLOAD] initialize', this.getBaseUrl())
-        this.URL_TILEDESK_FILE = this.getBaseUrl() + projectId + '/files'
+        if (projectId) {
+            this.URL_TILEDESK_FILE = this.getBaseUrl() + projectId + '/files'
+        }
+        this.URL_TILEDESK_UPLOAD = this.getBaseUrl();
         this.tiledeskToken = this.appStorage.getItem('tiledeskToken')
     }
 
@@ -41,51 +45,93 @@ export class NativeUploadService extends UploadService {
         const formData = new FormData();
         formData.append('file', upload.file);
 
+        const that = this;
+        if ((upload.file.type.startsWith('image') && (!upload.file.type.includes('svg')))) {
+            //USE IMAGE API
+            const url = this.URL_TILEDESK_UPLOAD + 'images/users'
+            return new Promise((resolve, reject) => {
+                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 {
+            //USE FILE API
+            const url = this.URL_TILEDESK_UPLOAD + 'files/users'
+            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})
+                        // 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 downloadURL = this.getBaseUrl() + 'files' + '?path=' + data['filename'];
-                    resolve({downloadURL : downloadURL, src: downloadURL})
+                    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);
 
-        //old_implemenation
-        // if ((upload.file.type.startsWith('image') && (!upload.file.type.includes('svg')))) {
-        //     this.logger.log('[NATIVE UPLOAD] - upload new image', this.URL_TILEDESK_IMAGES)
-        //     //USE IMAGE API
-        //     const url = this.URL_TILEDESK_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)
-        //         });
-        //     });
-        // } else {
-        //     this.logger.log('[NATIVE UPLOAD] - upload new file', this.URL_TILEDESK_FILE)
-        //     //USE FILE API
-        //     const url = this.URL_TILEDESK_FILE + '/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)
-        //         });
-        //     });
-        // }
-        
+        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> {
@@ -100,8 +146,8 @@ export class NativeUploadService extends UploadService {
 
         // USE IMAGE API
         const that = this;
-        const botId = userId?.startsWith('bot_') ? userId.substring('bot_'.length) : userId
-        const url = this.URL_TILEDESK_FILE + `/users/photo?bot_id=${botId}`
+        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).pipe(first()).subscribe({
                 next: (data) => {
@@ -124,6 +170,31 @@ export class NativeUploadService extends UploadService {
         });
         const requestOptions = { headers: headers };
 
+        //USE IMAGE API
+        const that = this;
+        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]
@@ -141,6 +212,10 @@ export class NativeUploadService extends UploadService {
         });
     }
 
+    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({