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

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,7 +14,6 @@ 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 logger: LoggerService = LoggerInstance.getInstance()
 
@@ -25,16 +24,15 @@ 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())
+        this.URL_TILEDESK_FILE = this.getBaseUrl() + projectId + '/files'
         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',
@@ -44,35 +42,49 @@ export class NativeUploadService extends UploadService {
         formData.append('file', upload.file);
 
         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'
-            return new Promise((resolve, reject) => {
-                that.http.post(url, formData, requestOptions).subscribe(data => {
-                    const downloadURL = this.URL_TILEDESK_IMAGES + '?path=' + data['filename'];
+        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})
-                    // that.BSStateUpload.next({upload: upload});
-                }, (error) => {
+                },
+                error: (error) => {
                     reject(error)
-                });
+                }
             });
-        } else {
-            this.logger.debug('[NATIVE UPLOAD] - upload new 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)
-                });
-            });
-        }
+        });
+
+        //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)
+        //         });
+        //     });
+        // }
         
     }
 
@@ -88,14 +100,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 botId = userId?.startsWith('bot_') ? userId.substring('bot_'.length) : userId
+        const url = this.URL_TILEDESK_FILE + `/users/photo?bot_id=${botId}`
         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,14 +126,17 @@ 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_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)
+                }
             });
         });
     }
@@ -132,14 +151,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/chat21-core/providers/tiledesk/tiledesk-requests.service.ts

@@ -71,7 +71,7 @@ export class TiledeskRequestsService {
 
   public getMyRequests(): Promise<{ requests: Array<any>}> {
     this.tiledeskToken = this.appStorage.getItem('tiledeskToken')
-    const url = this.URL_TILEDESK_REQUEST + '/me?preflight=true'
+    const url = this.URL_TILEDESK_REQUEST + 'me?preflight=true'
     this.logger.log('[TILEDESK-SERVICE] - GET REQUEST url ', url);
     const httpOptions = {
       headers: new HttpHeaders({

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

@@ -773,6 +773,11 @@ export function isAllowedUrlInText(text: string, allowedUrls: string[]) {
   return nonWhitelistedDomains.length === 0;
 }
 
+// function extractUrls(text: string): string[] {
+//   const urlRegex = /https?:\/\/[^\s]+/g;
+//   return text.match(urlRegex) || [];
+// }
+
 function extractUrls(text: string): string[] {
   // Rileva URL con o senza protocollo (http/https)
   const urlRegex = /\b((https?:\/\/)?(www\.)?[a-z0-9.-]+\.[a-z]{2,})(\/[^\s]*)?/gi;
@@ -787,5 +792,3 @@ function extractUrls(text: string): string[] {
 }
 
 
-
-

package/src/iframe-style.css

@@ -13,10 +13,28 @@
     bottom: 0px;
     width: auto;   
     height: auto;
-    display: none;
+    display: block;
     z-index: 3000000000; /*999999*/; 
 }
 
+#tiledesk-container.open {
+    /*
+    Fade-in the whole container when the "open" class is added.
+    This avoids the initial "flash" while the widget is still small.
+    */
+    opacity: 0;
+    animation: tiledesk-container-fade-in 400ms ease-in both;
+    will-change: opacity;
+}
+
+@keyframes tiledesk-container-fade-in {
+    /* Stay invisible, then become visible very fast at the end */
+    0% { opacity: 0; }
+    80% { opacity: 0.15; }
+    92% { opacity: 0.30; }
+    100% { opacity: 1; }
+}
+
 #tiledesk-container.open.overlay--popup {
     background-color: rgba(0, 0, 0, 0.4);
     position: fixed;
@@ -57,8 +75,8 @@
     margin: auto;
     top: 0;
     bottom: 0;
-    left: 0!important;
-    right: 0!important;
+    left: 0;
+    right: 0;
     height: 100%; /*var(--iframeMaxHeight);*/
     /* transform: translate(-50%, -50%);   */
     /* transform: translate(-50%, 0%);   */
@@ -66,12 +84,12 @@
     max-width: 1024px;
     max-height: 100%;
 
-    transition: 
+    /* transition: 
     width 300ms, 
     height 300ms, 
     max-height 300ms, 
     transform 300ms cubic-bezier(0, 1.2, 1, 1), 
-    opacity 300ms ease-out;
+    opacity 300ms ease-out; */
     /* per migliorare le prestazioni quando si usa transform */
     will-change: transform, opacity, width, height;
 }
@@ -130,9 +148,20 @@
     display: block;
     /*width: 376px;*/
     border-radius: 16px;
+    /*
+    Fade-in: keep content transparent while the widget grows (width/height transition
+    lives on #tiledeskdiv.{min-size|max-size|top-size}), then show it near full size.
+    */
+    opacity: 0;
+    animation: tiledesk-iframe-fade-in 220ms ease-out 140ms both;
     transition: box-shadow 0.8s ease-in;
     box-shadow: rgba(0, 0, 0, 0.16) 0px 8px 36px 0px; /*NEW GAB*/
 }
+
+@keyframes tiledesk-iframe-fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
 /* 
 #tiledesk-container.open #tiledeskdiv.shadow {
     transition: box-shadow 0.8s ease-in;
@@ -140,25 +169,20 @@
 } 
 */
 
-#tiledesk-container.open #tiledeskdiv {
-    /* transition: box-shadow 0.8s ease-in;
-    box-shadow: rgba(0, 0, 0, 0.16) 0px 8px 36px 0px; */
-}
-
 #tiledesk-container.closed #tiledeskiframe {
     display: block;
     box-shadow: none;
 }
 
 #tiledesk-container.open #tiledeskdiv.min-size {
-    transition: width 200ms, height 200ms, max-height 200ms, transform 300ms cubic-bezier(0, 1.2, 1, 1), opacity 83ms ease-out;
+    /* transition: width 200ms, height 200ms, max-height 200ms, transform 300ms cubic-bezier(0, 1.2, 1, 1), opacity 83ms ease-out; */
     width: var(--iframeMinWidth);
     height: var(--iframeMinHeight);
 }
 
 #tiledesk-container.open #tiledeskdiv.max-size {
     /* transition: width 1s, height 1s; */
-    transition: width 200ms, height 200ms, max-height 200ms, transform 300ms cubic-bezier(0, 1.2, 1, 1), opacity 83ms ease-out;
+    /* transition: width 200ms, height 200ms, max-height 200ms, transform 300ms cubic-bezier(0, 1.2, 1, 1), opacity 83ms ease-out; */
     width: var(--iframeMaxWidth);
     height: var(--iframeMaxHeight);
 }

package/.vscode/settings.json

@@ -1,3 +0,0 @@
-{
-    "git.ignoreLimitWarning": true
-}