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

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

@@ -298,6 +298,19 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
       if (this.afConversationComponent) {
         this.afConversationComponent.nativeElement.focus();
       }
+      // Sync initial "scroll to bottom" button/badge visibility.
+      // The state is normally driven by real scroll events, but on first render
+      // we might not get any scroll event -> stale UI.
+      setTimeout(() => {
+        try {
+          const isAtBottom = this.conversationContent?.checkContentScrollPosition();
+          if (typeof isAtBottom === 'boolean') {
+            this.onScrollContent(isAtBottom);
+          }
+        } catch (e) {
+          this.logger.error('[CONV-COMP] initial scroll state sync error:', e);
+        }
+      }, 0);
       this.isButtonsDisabled = false;
     }, 300);
   }
@@ -457,7 +470,7 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
       return this.isConversationArchived;
     }
 
-    //FALLBACK TO TILEDESK
+    //   //FALLBACK TO TILEDESK
     const requests_list = await this.tiledeskRequestService.getMyRequests().catch(err => {
       this.logger.error('[CONV-COMP] getConversationDetail: error getting request from Tiledesk', err);
       this.isConversationArchived=true
@@ -475,9 +488,9 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
       return this.isConversationArchived
     }
 
-    this.isConversationArchived = true;
-    return null;
-  }
+      this.isConversationArchived = false;
+      return null;
+    }
 
   /**
     * this.g.recipientId:
@@ -827,6 +840,20 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
       this.subscriptions.push(subscribe);
     }
 
+    subscribtionKey = 'conversationsAdded';
+    subscribtion = this.subscriptions.find(item => item.key === subscribtionKey);
+    if(!subscribtion){
+
+      subscribtion = this.chatManager.conversationsHandlerService.conversationChanged.pipe(takeUntil(this.unsubscribe$)).subscribe((conversation) => {
+        this.logger.debug('[CONV-COMP] ***** DATAIL conversationsChanged *****', conversation, this.conversationWith, this.isConversationArchived);
+        if(conversation && conversation.recipient === this.conversationId){
+          this.isConversationArchived = false
+        }
+      });
+      const subscribe = {key: subscribtionKey, value: subscribtion };
+      this.subscriptions.push(subscribe);
+    }
+
     subscribtionKey = 'messageWait';
     subscribtion = this.subscriptions.find(item => item.key === subscribtionKey);
     if (!subscribtion) {
@@ -1074,29 +1101,76 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
     // this.hideTextAreaContent = true
   }
   /** CALLED BY: conv-header component */
-  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');
+    if(!tiledeskDiv){
+      this.g.size = normalizedMode;
+      this.isMenuShow = false;
+      return;
+    }
+
+    this.g.size = normalizedMode;
     const parent = tiledeskDiv.parentElement as HTMLElement | null;
-    if(mode==='max'){
+    if(normalizedMode==='max'){
+        this.restoreInlinePositionStylesForPopup(tiledeskDiv);
         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'){
+        this.restoreInlinePositionStylesForPopup(tiledeskDiv);
         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'){
+        // Remove inline positioning so CSS can control centering without needing `!important`.
+        // this.clearInlinePositionStylesForPopup(tiledeskDiv);
         tiledeskDiv.classList.add('top-size')
         tiledeskDiv.classList.remove('max-size')
         tiledeskDiv.classList.remove('min-size')
         if(parent) parent.classList.add('overlay--popup');
     }
+
+    // Persist user-driven size changes so, when `size` is not specified via URL/settings,
+    // GlobalSettingsService can restore it from storage (it already loads `size` from storage).
+    try{
+      this.appStorageService.setItem('size', normalizedMode);
+    }catch(e){
+      this.logger.warn('[CONV-COMP] onWidgetSizeChange > cannot persist size', e);
+    }
+
     this.isMenuShow = false;
   }
 
+  // private clearInlinePositionStylesForPopup(tiledeskDiv: HTMLElement) {
+  //   tiledeskDiv.style.removeProperty('left');
+  //   tiledeskDiv.style.removeProperty('right');
+  //   tiledeskDiv.style.removeProperty('top');
+  //   tiledeskDiv.style.removeProperty('bottom');
+  // }
+
+  private restoreInlinePositionStylesForPopup(tiledeskDiv: HTMLElement) {
+    const marginX = this.g.isMobile ? this.g.mobileMarginX : this.g.marginX;
+    const marginY = this.g.isMobile ? this.g.mobileMarginY : this.g.marginY;
+
+    if (this.g.align === 'left') {
+      tiledeskDiv.style.left = marginX;
+      tiledeskDiv.style.removeProperty('right');
+    } else {
+      tiledeskDiv.style.right = marginX;
+      tiledeskDiv.style.removeProperty('left');
+    }
+    tiledeskDiv.style.bottom = marginY;
+    tiledeskDiv.style.removeProperty('top');
+  }
+
 
   /** CALLED BY: conv-header component */
   onSignOutFN(event){

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

@@ -187,6 +187,10 @@ export class ConversationContentComponent implements OnInit {
       objDiv.parentElement.scrollTop = objDiv.scrollHeight;
       objDiv.style.opacity = '1';
       that.firstScroll = false;
+      // Keep parent state in sync even when scroll is programmatic.
+      // Without this, the "scroll to bottom" button/badge can remain visible
+      // because (scroll) event might not fire reliably for programmatic scrollTop.
+      that.onScrollContent.emit(true);
     }, 0);
   } catch (err) {
     this.logger.error('[CONV-CONTENT] scrollToBottom > Error :' + err);

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

@@ -192,9 +192,10 @@ textarea:active{
     max-height: 110px;
     min-height: auto;
     height: 20px;
-    padding: 0px 12px; //0px 40px 0px 70px; //NEW FOR EMOJII BUTTON
+    padding: 0px 12px;
     margin: 10px 0px 10px;
     border: none;
+    display: inline-block;
 
     &::-webkit-scrollbar {
         width: 6px;
@@ -418,3 +419,28 @@ textarea:active{
     border: none;
     // margin: -2px -2px 0px;
 }
+
+
+// aggiungi un'animazione di fade in e fade out quando .star-rating-widget è visibile con transition
+.star-rating-widget {
+    transition: all 0.5s ease-in-out;
+}
+
+.star-rating-widget {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: -52px;
+    height: 100%;
+    width: 100%;
+    flex-direction: row;
+    justify-content: center;
+    background-color: rgb(255, 255, 255);
+    flex-wrap: nowrap;
+    &.active {
+        bottom: 0px;
+    }
+    &.inactive {
+        bottom: -52px;
+    }
+}

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

@@ -87,6 +87,7 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
 
   file_size_limit = FILE_SIZE_LIMIT;
   attachmentTooltip: string = '';
+  isErrorNetwork: boolean = false;
 
 
   convertColorToRGBA = convertColorToRGBA;
@@ -447,13 +448,11 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
   }
 
   private restoreTextArea() {
-    // that.logger.log('[CONV-FOOTER] AppComponent:restoreTextArea::restoreTextArea');
-    this.resizeInputField();
     const textArea = (<HTMLInputElement>document.getElementById('chat21-main-message-context'));
-    this.textInputTextArea = ''; // clear the textarea
+    this.textInputTextArea = '';
     if (textArea) {
-      textArea.value = '';  // clear the textarea
-      textArea.placeholder = this.translationMap.get('LABEL_PLACEHOLDER');  // restore the placholder
+      textArea.value = '';
+      textArea.placeholder = this.translationMap.get('LABEL_PLACEHOLDER');
       if(textArea.style.height > this.HEIGHT_DEFAULT){
         document.getElementById('chat21-button-send').style.removeProperty('right')
       }
@@ -461,6 +460,7 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
     }
     this.setFocusOnId('chat21-main-message-context');
     this.isStopRec= false;
+    this.resizeInputField();
   }
 
   /**

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

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

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

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

package/src/app/component/launcher-button/launcher-button.component.html

@@ -1,7 +1,7 @@
 <!-- tabindex="000"-->
 
 <button aflauncherbutton #aflauncherbutton id="c21-launcher-button" class="c21-button-clean scale-in-center" 
-    *ngIf="g.isLogged == true && g.isOpen == false" 
+    *ngIf="g.isOpen == false" 
     [ngClass]="{'c21-align-left' : g.align === 'left', 'c21-align-right' : g.align !== 'left'}"
     [ngStyle]="{ 'background-color': g.baloonImage? null: g.themeColor, 'bottom': g.marginY+'px!important', 'left':(g.align==='left')?g.marginX+'px!important':'', 'right':(g.align==='right')?g.marginX+'px!important':'', 'width': g.launcherWidth, 'height': g.launcherHeight, 'border-radius': g.baloonShape}"
     (click)="openCloseWidget()"

package/src/app/component/launcher-button/launcher-button.component.ts

@@ -67,8 +67,9 @@ export class LauncherButtonComponent implements OnInit, AfterViewInit {
       // this.g.isOpen = !this.g.isOpen;
       // this.g.setIsOpen(!this.g.isOpen);
       // this.appStorageService.setItem('isOpen', this.g.isOpen);
-      this.onButtonClicked.emit( this.g.isOpen );
-    }
+     
+    } 
+    this.onButtonClicked.emit( this.g.isOpen );
   }
 
 }

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

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

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

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

package/src/app/component/message/html/html.component.html

@@ -1 +1,5 @@
-<div id="htmlCode" #htmlCode [innerHTML]="htmlText | safeHtml"></div>
+<!--
+  Security: render HTML messages as plain text (no DOM interpretation).
+  This preserves the exact input (e.g. "<h1>...</h1>") including line breaks.
+-->
+<pre id="htmlCode" #htmlCode [textContent]="htmlText"></pre>

package/src/app/component/message/html/html.component.scss

@@ -74,4 +74,13 @@
         overflow: hidden;
     }
 
+}
+
+/* Render raw HTML source safely */
+#htmlCode {
+    white-space: pre-wrap; /* preserve newlines, allow wrapping */
+    word-break: break-word;
+    margin: 0;
+    font-size: 1.4em;
+    line-height: 1.4em;
 }

package/src/app/component/message/text/text.component.scss

@@ -65,6 +65,10 @@ p h1, p h2, p h3, p h4, p h5, p h6 {
     color: inherit; // Eredita il colore dal parent
 }
 
+.message_innerhtml.marked h1 {
+    line-height: normal;
+}
+
 p ul {
     margin-block-end: 0em;
     margin-block-start: 0em;

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

@@ -1,6 +1,7 @@
 import { Pipe, PipeTransform } from '@angular/core';
 import { marked } from 'marked';
 import { BLOCKED_DOMAINS } from '../utils/utils';
+import { htmlEntities } from 'src/chat21-core/utils/utils';
 
 
 @Pipe({
@@ -9,6 +10,16 @@ import { BLOCKED_DOMAINS } from '../utils/utils';
 
 export class MarkedPipe implements PipeTransform {
   transform(value: any): any {
+    // Security hardening:
+    // - Do not allow raw HTML from chat messages to be interpreted as DOM.
+    // - Keep Markdown working (marked will generate the needed HTML tags).
+    // This makes inputs like "<h1>Title</h1>" render exactly as typed.
+    const input =
+      typeof value === 'string'
+        ? value
+        : (value === null || value === undefined) ? '' : String(value);
+    const safeInput = htmlEntities(input);
+
     const renderer = new marked.Renderer();
     renderer.link = function({ href, title, tokens }) {
       // Normalizza l'href per evitare falsi negativi
@@ -74,15 +85,15 @@ export class MarkedPipe implements PipeTransform {
       breaks: true
     });
 
-    if (value && value.length > 0) {
+    if (safeInput && safeInput.length > 0) {
       try {
-        return marked.parse(value);
+        return marked.parse(safeInput);
       } catch (err) {
         console.error('Errore nel parsing markdown:', err);
-        return value;
+        return safeInput;
       }
     }
-    return value;
+    return safeInput;
   }
 
 

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

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

package/src/app/sass/normalize.scss

@@ -40,6 +40,7 @@
   h1 {
     font-size: 2em;
     margin: 0.67em 0;
+    line-height: normal;
   }
   
   /* Grouping content

package/src/app/utils/globals.ts

@@ -247,7 +247,7 @@ export class Globals {
 
     // ============ BEGIN: SET EXTERNAL PARAMETERS ==============//
     this.baseLocation = 'https://widget.tiledesk.com/v2';
-    this.autoStart = true;
+    this.autoStart = false;
     /** start Authentication and startUI */
     this.startHidden = false;
     /** show/hide all widget -> js call: showAllWidget */

package/src/assets/i18n/en.json

@@ -96,5 +96,6 @@
     "EMOJI_NOT_ELLOWED":"Emoji not allowed",
     "DOMAIN_NOT_ALLOWED":"URL contains a non-allowed domain",
     "MAX_ATTACHMENT": "Max allowed size {{FILE_SIZE_LIMIT}}Mb",
+    "MAX_ATTACHMENT_ERROR": "The file exceeds the maximum allowed size",
     "EMOJI": "Emoji"
 }

package/src/assets/i18n/es.json

@@ -96,5 +96,6 @@
     "EMOJI_NOT_ELLOWED":"Emoji no permitido",
     "DOMAIN_NOT_ALLOWED":"La URL contiene un dominio no permitido",
     "MAX_ATTACHMENT": "Tamaño máximo permitido {{FILE_SIZE_LIMIT}}Mb",
+    "MAX_ATTACHMENT_ERROR": "El archivo supera el tamaño máximo permitido",
     "EMOJI": "Emoji"
 }

package/src/assets/i18n/fr.json

@@ -96,5 +96,6 @@
     "EMOJI_NOT_ELLOWED":"Emoji non autorisé",
     "DOMAIN_NOT_ALLOWED":"L'URL contient un domaine non autorisé",
     "MAX_ATTACHMENT": "Taille maximale autorisée {{FILE_SIZE_LIMIT}}Mo",
+    "MAX_ATTACHMENT_ERROR": "Le fichier dépasse la taille maximale autorisée",
     "EMOJI": "Emoji"
 }

package/src/assets/i18n/it.json

@@ -94,5 +94,6 @@
     "EMOJI_NOT_ELLOWED":"Emoji non consentiti",
     "DOMAIN_NOT_ALLOWED":"L'URL contiene un dominio non consentito",
     "MAX_ATTACHMENT": "Dimensione massima consentita {{FILE_SIZE_LIMIT}}Mb",
+    "MAX_ATTACHMENT_ERROR": "Il file supera la dimensione massima consentita",
     "EMOJI": "Emoji"
 }

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

@@ -27,7 +27,7 @@ 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 uploadProfile(userId: string, upload: UploadModel): Promise<any>;
   abstract delete(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");

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)