@chat21/chat21-web-widget 5.1.6 → 5.1.7-rc14

package/.github/workflows/docker-community-push-latest.yml

@@ -1,10 +1,10 @@
 name: Docker Image Community latest CI
 
-on:	
-  push:	 
+on:  
+  push:  
     branches: [ master ]
-  pull_request:	
-    branches: [ master ]	
+  pull_request:  
+    branches: [ master ]  
 
 jobs:
   push_to_registry:
@@ -12,12 +12,22 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-    - uses: actions/checkout@v2	     
-      name: Check out the repo
-    - uses: docker/build-push-action@v1
-      with:	    
-        username: ${{ secrets.DOCKERHUB_USERNAME }}
-        password: ${{ secrets.DOCKERHUB_TOKEN }}
-        repository: chat21/chat21-web-widget
-        push: true
-        tags: latest
+      - name: Check out the repo
+        uses: actions/checkout@v2
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+
+      - name: Log in to Docker Hub
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Build and push multiarch Docker image
+        uses: docker/build-push-action@v3
+        with:
+          context: .
+          push: true
+          platforms: linux/amd64,linux/arm64
+          tags: chat21/chat21-web-widget:latest

package/.github/workflows/docker-image-tag-community-tag-push.yml

@@ -3,20 +3,30 @@ name: Publish Docker Community image tags
 on:
   push:
     tags:
-      - '**'           # Push events to every tag including hierarchical tags like
-jobs:
+      - '**'  # Trigger su qualsiasi tag
 
+jobs:
   push_to_registry:
     name: Push Docker image to Docker Hub
     runs-on: ubuntu-latest
+
     steps:
-     - name: Check out the repo
-       uses: actions/checkout@v2
-     - name: Push to Docker Hub
-       uses: docker/build-push-action@v1
-       with:
-        username: ${{ secrets.DOCKERHUB_USERNAME }}
-        password: ${{ secrets.DOCKERHUB_TOKEN }}
-        repository: chat21/chat21-web-widget
-        push: true
-        tag_with_ref: true
+      - name: Check out the repo
+        uses: actions/checkout@v2
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+
+      - name: Log in to Docker Hub
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Build and push multiarch Docker image
+        uses: docker/build-push-action@v3
+        with:
+          context: .
+          push: true
+          platforms: linux/amd64,linux/arm64
+          tags: chat21/chat21-web-widget:${{ github.ref_name }}

package/CHANGELOG.md

@@ -6,6 +6,57 @@
 ### **Copyrigth**: 
 *Tiledesk SRL*
 
+# 5.1.7-rc14
+- **bug-fixed**: departmentId and departmentName is incorrect in attributes
+
+# 5.1.7-rc13
+- **changed**: Force authentication if ageChangeVisibilityDesktop or PageChangeVisibilityMobile is OPEN
+
+# 5.1.7-rc12
+- **changed**: Set the default autoStart value to false
+- **added**: Added the open widget loading spinner
+- **changed**: Load the widget without authentication and display the speech bubble
+
+# 5.1.7-rc11
+- **changed**: set default value autoStart false
+- **added**:added loading spinner
+
+# 5.1.7-rc10
+- **changed**: load widget without authentication and display the balloon
+
+# 5.1.7-rc9
+- **removed**: 'DOMAIN_NOT_ALLOWED' in textarea footer component
+
+# 5.1.7-rc8
+- **changed**: Updated the translations of the tooltips in the footer-component
+- **changed**: Refactored the network-offline component and made it generic for displaying errors (now error-alert.component)
+
+# 5.1.7-rc7
+- **bug-fixed**: button new_conversation always appear. added subscription to conversationAdded
+
+# 5.1.7-rc6
+- **added**: Added MAX_ATTACHMENT_ERROR error message when uploading a file larger than 10 MB
+
+# 5.1.7-rc5
+- **bug-fixed**: bug fixed BUTTON STYLES
+
+# 5.1.7-rc4
+- **bug-fixed**: bug fixed widget fullscreen style
+
+# 5.1.7-rc3
+- **changed**: replace extractUrls
+
+# 5.1.7-rc2
+- **bug-fixed**: translations completed
+- **changed**: set wait to 0 if messages have already been read
+
+# 5.1.7-rc1
+- **changed**: replace fullname with firstname
+- **added**: added tooltip on attachment an emoji
+- **bug-fixed**: bug fixed button color
+- **bug-fixed**: bug fixed min-height message-receive
+- **bug-fixed**: bug-fixed css footer
+
 # 5.1.6
 
 # 5.1.5

package/Dockerfile

@@ -1,7 +1,7 @@
 ### STAGE 1: Build ###
 
 # We label our stage as ‘builder’
-FROM node:20.12.2-alpine3.19 as builder
+FROM --platform=$BUILDPLATFORM node:20.12.2-alpine3.19 as builder
 
 COPY package.json package-lock.json ./
 
@@ -15,12 +15,11 @@ COPY . .
 
 ## Build the angular app in production mode and store the artifacts in dist folder
 
-RUN npx ng build --configuration="prod" --output-path=dist --base-href=./ --output-hashing=none
 
+RUN npx ng build --configuration="prod" --output-path=dist --base-href=./ --output-hashing=none
 
 ### STAGE 2: Setup ###
-
-FROM nginx:1.14.1-alpine
+FROM --platform=$BUILDPLATFORM nginx:1.14.1-alpine
 
 ## Copy our default nginx config
 COPY nginx.conf /etc/nginx/nginx.conf
@@ -33,4 +32,4 @@ COPY --from=builder /ng-app/dist/browser /usr/share/nginx/html
 
 RUN echo "Chat21 Web Widget Started!!"
 
-CMD ["/bin/sh",  "-c",  "envsubst < /usr/share/nginx/html/widget-config-template.json > /usr/share/nginx/html/widget-config.json && exec nginx -g 'daemon off;'"]
+CMD ["/bin/sh", "-c", "envsubst < /usr/share/nginx/html/widget-config-template.json > /usr/share/nginx/html/widget-config.json && exec nginx -g 'daemon off;'"]

package/angular.json

@@ -44,7 +44,8 @@
               "src/environments/real_data/widget-config-docker.json",
               "src/environments/real_data/widget-config-native-mqtt.json",
               "src/environments/real_data/widget-config-native-prod.json",
-              "src/environments/real_data/widget-config-aws-stage.json"
+              "src/environments/real_data/widget-config-aws-stage.json",
+              "src/environments/real_data/widget-config-aws-aruba.json"
             ],
             "styles": [
               "src/app/sass/styles.scss"

package/package.json

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

package/src/app/app.component.html

@@ -105,11 +105,11 @@
 
     <!-- 
     ****************************************
-    ******* MODALE OFFLINE NETWORK *********
+    ********* MODALE ERROR ALERT ***********
     ****************************************
     -->
-    <div *ngIf="g.isOpen && !isOnline" class="modal-page star-rating-widget active">
-      <chat-network-offline></chat-network-offline>
+    <div *ngIf="g.isOpen && isShowErrorMessage" class="modal-page star-rating-widget active">
+      <chat-error-alert [errorMessage]="errorMessage" [errorKeyMessage]="errorKeyMessage" [errorParams]="errorParams"></chat-error-alert>
     </div>
 
   </div>
@@ -145,5 +145,12 @@
   <chat-launcher-button *ngIf="isInitialized" 
     (onButtonClicked)="onOpenCloseWidget($event)">
   </chat-launcher-button>
-  
+
+  <!-- Loading Spinner -->
+  <div *ngIf="loading" class="tiledesk-loading-overlay">
+    <div class="tiledesk-loading-spinner">
+      <div class="spinner-circle"></div>
+      <div class="loading-text">{{ translationMap.get('LABEL_LOADING') }}</div>
+    </div>
+  </div>
 </div>

package/src/app/app.component.scss

@@ -571,7 +571,7 @@ chat-root {
         /***************************
         ***** NETWORK OFFLINE ******
         ****************************/
-        chat-network-offline {
+        chat-error-alert {
             position: absolute;
             width: 100%;
             height: 100%;
@@ -764,4 +764,63 @@ chat-root {
         }
     }
 
+    // ========= BEGIN: LOADING SPINNER ========= //
+    .tiledesk-loading-overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(248, 249, 250, 0.95);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        z-index: 9999;
+        backdrop-filter: blur(2px);
+    }
+
+    .tiledesk-loading-spinner {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 16px;
+    }
+
+    .spinner-circle {
+        width: 50px;
+        height: 50px;
+        border: 4px solid rgba(59, 130, 246, 0.2);
+        border-top-color: #3b82f6;
+        border-radius: 50%;
+        animation: spin 0.8s linear infinite;
+    }
+
+    @keyframes spin {
+        0% {
+            transform: rotate(0deg);
+        }
+        100% {
+            transform: rotate(360deg);
+        }
+    }
+
+    .loading-text {
+        font-family: var(--font-family-bubble-message, 'Roboto', 'Google Sans', Helvetica, Arial, sans-serif);
+        font-size: 14px;
+        font-weight: 500;
+        color: #3b82f6;
+        letter-spacing: 0.5px;
+        animation: pulse 1.5s ease-in-out infinite;
+    }
+
+    @keyframes pulse {
+        0%, 100% {
+            opacity: 1;
+        }
+        50% {
+            opacity: 0.5;
+        }
+    }
+    // ========= END: LOADING SPINNER ========= //
+
 }

package/src/app/app.component.ts

@@ -108,7 +108,14 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
 
   //network status
   isOnline: boolean = true;
+  loading: boolean = false;
   
+  // alert error message 
+  isShowErrorMessage: boolean = false;
+  errorMessage: string = '';
+  errorKeyMessage: string = null;
+  errorParams: Record<string, any> = {};
+
   private logger: LoggerService = LoggerInstance.getInstance();
   constructor(
     private el: ElementRef,
@@ -146,7 +153,7 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
         this.logger.info('[APP-CONF]---------------- ngAfterViewInit: APP.COMPONENT ---------------- ')
         
         // Initialize translation map and enable buttons
-        const keys = ['MAXIMIZE', 'MINIMIZE', 'CENTER', 'BUTTON_CLOSE_TO_ICON'];
+        const keys = ['MAXIMIZE', 'MINIMIZE', 'CENTER', 'BUTTON_CLOSE_TO_ICON', 'LABEL_LOADING'];
         this.translationMap = this.translateService.translateLanguage(keys);
         this.isButtonsDisabled = false;
         
@@ -313,8 +320,15 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
                     this.g.setIsOpen(isOpen)
                     this.appStorageService.setItem('isOpen', isOpen)
                 }
-                
-                
+
+                if(this.g.onPageChangeVisibilityDesktop === 'last'){
+                    this.logger.debug('[APP-COMP2] ------this.g.isOpen: ', this.g.isOpen)
+                    if(this.g.isOpen){
+                        this.g.autoStart = true;
+                    }
+                }
+
+
                 /**CHECK IF JWT IS IN URL PARAMETERS */
                 this.logger.debug('[APP-COMP] check if token is passed throw url: ', this.g.jwt);
                 if (this.g.jwt) {
@@ -351,10 +365,6 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
         this.subscriptions.push(obsSettingsService);
         this.globalSettingsService.initWidgetParamiters(this.g, this.el);
 
-        // SET AUDIO
-        this.audio = new Audio();
-        this.audio.src = this.g.baseLocation + URL_SOUND_LIST_CONVERSATION;
-        this.audio.load();
     }
 
     private initAll() {
@@ -400,7 +410,7 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
 
 
         /** NETWORK STATUS */
-        this.listenToNetworkStatus()
+        this.listenToNetworkStatus();
 
     }
 
@@ -443,7 +453,7 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
                 that.triggerOnAuthStateChanged(that.stateLoggedUser);
                 that.logger.debug('[APP-COMP]  1 - IMPOSTO STATO CONNESSO UTENTE ', autoStart);
                 
-                
+                this.initAudioNotification()
 
                 new Promise(async (resolve, reject)=> {
                     that.typingService.initialize(this.g.tenant);
@@ -469,26 +479,30 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
                     that.listenToWidgetClick()
                 }
 
+                /** DDP IF AUTOSTART IS FALSE, SHOW WIDGET */
+                if(!autoStart){
+                    that.logger.info('[APP-COMP] AUTOSTART IS FALSE AND LOGGED SUCCESSFULLY ');
+                    this.g.setParameter('isShown', true, true);
+                }
 
 
             } else if (state && state === AUTH_STATE_OFFLINE && !this.forceDisconnect) {
                 /** non sono loggato */
                 that.logger.info('[APP-COMP] OFFLINE - NO CURRENT USER AUTENTICATE: ');
                 that.g.setParameter('isLogged', false);
-                that.hideWidget();
+                // that.hideWidget();
                 // that.g.setParameter('isShown', false, true);
                 that.triggerOnAuthStateChanged(that.stateLoggedUser);
-                if (autoStart) {
+                if (autoStart || this.g.onPageChangeVisibilityDesktop === 'open' || this.g.onPageChangeVisibilityMobile === 'open') {
                     that.authenticate();
                 }
-            }else if(state && state === AUTH_STATE_CLOSE ){
+            } else if(state && state === AUTH_STATE_CLOSE ){
                 that.logger.info('[APP-COMP] CLOSE - CHANNEL CLOSED: ', this.chatManager);
                 if(this.g.recipientId){
                     this.chatManager.removeConversationHandler(this.g.recipientId)
                     this.g.recipientId = null;
                 }
-            }
-
+            }  
 
         });
         this.subscriptions.push(subAuthStateChanged);
@@ -733,6 +747,8 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
         //         divWidgetContainer.style.display = 'block';
         //     }
         // }, 500);
+
+        this.loading = false;
     }
     // ========= end:: START UI ============//
 
@@ -841,7 +857,13 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
         this.appStorageService.setItem('attributes', JSON.stringify(attributes));
         return attributes;
     }
-
+    
+    // SET AUDIO
+    private initAudioNotification(){
+        this.audio = new Audio();
+        this.audio.src = this.g.baseLocation + URL_SOUND_LIST_CONVERSATION;
+        this.audio.load();
+    }
 
     private async initConversationsHandler(tenant: string, senderId: string) {
         this.logger.debug('[APP-COMP] initialize: ListConversationsComponent');
@@ -1600,23 +1622,46 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
         this.f21_close();
     }
 
+
+    /** DDP reload widget */
+    async reloadWidget() { 
+        this.openCloseWidget();
+        this.logger.debug('[APP-COMP-1] AAA - hideWidget');
+        await Promise.all([
+                this.authenticate(),
+                // this.initAll()
+            ]);
+        this.logger.debug('[APP-COMP-1] CCC - showWidget');
+    }
+
+
     /**
      * LAUNCHER BUTTON:
      * onClick button open/close widget
      */
     onOpenCloseWidget($event) {
+        this.logger.debug('[APP-COMP] onOpenCloseWidget', $event, this.g.isLogged);
+        if(!this.g.isLogged){
+            this.reloadWidget();
+        } else {
+            this.openCloseWidget();
+        }
+    }
+
+    /** DDP show widget */
+    openCloseWidget() {
         this.g.setParameter('displayEyeCatcherCard', 'none');
         // const conversationActive: ConversationModel = JSON.parse(this.appStorageService.getItem('activeConversation'));
         const recipientId : string = this.appStorageService.getItem('recipientId')
         this.g.setParameter('recipientId', recipientId);
         this.logger.debug('[APP-COMP] openCloseWidget', recipientId, this.g.isOpen, this.g.startFromHome);
+
         if (this.g.isOpen === false) {
             if(this.forceDisconnect){
                 this.logger.log('[FORCE] onOpenCloseWidget --> reconnect', this.forceDisconnect)
                 this.messagingAuthService.createCustomToken(this.g.tiledeskToken)
                 this.forceDisconnect = false;
             }
-
             if (!recipientId) {
                 if(this.g.singleConversation){
                     this.isOpenHome = false;
@@ -1636,29 +1681,22 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
                 this.isOpenHome = false;
                 this.isOpenConversation = true;
                 this.startUI()
-                // this.isOpenSelectionDepartment = false;
             }
-            // if (!conversationActive && !this.g.startFromHome) {
-            //     this.isOpenHome = false;
-            //     this.isOpenConversation = true;
-            //     this.startNwConversation();
-            // } else if (conversationActive) {
-            //     this.isOpenHome = false;
-            //     this.isOpenConversation = true;
-            // }
-            // this.g.startFromHome = true;
             this.triggerOnOpenEvent();
-            
         } else {
             this.triggerOnCloseEvent();
         }
         //change status to the widget
         this.g.setIsOpen(!this.g.isOpen);
         this.appStorageService.setItem('isOpen', this.g.isOpen);
-
+        //show loading if widget is open and user is not logged
+        if(this.g.isOpen === true && !this.g.isLogged){
+            this.loading = true;
+        }
         // this.saveBadgeNewConverstionNumber();
     }
 
+
     /**
      * MODAL SELECTION DEPARTMENT:
      * selected department
@@ -2189,12 +2227,6 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
         this.el.nativeElement.style.setProperty('--chat-header-height', this.g.hideHeaderConversation? '0px': null)
         this.el.nativeElement.style.setProperty('--font-size-bubble-message', this.g.fontSize)
         this.el.nativeElement.style.setProperty('--font-family-bubble-message', this.g.fontFamily)
-        
-
-        this.styleMapConversation.set('buttonBackgroundColor', this.g.bubbleReceivedBackground)
-        this.styleMapConversation.set('buttonTextColor', this.g.bubbleReceivedTextColor)
-        this.styleMapConversation.set('buttonHoverBackgroundColor',this.g.bubbleSentBackground)
-        this.styleMapConversation.set('buttonHoverTextColor', this.g.bubbleSentTextColor)
 
     }
 
@@ -2221,8 +2253,23 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
     }
 
     private listenToNetworkStatus(){
-        window.addEventListener('online', () => this.isOnline = true);
-        window.addEventListener('offline', () =>  this.isOnline = false);
+        window.addEventListener('online', () => {
+            this.isShowErrorMessage = false;
+            this.errorMessage = null;
+            this.errorKeyMessage = null;
+        });
+        window.addEventListener('offline', () => {
+            this.isShowErrorMessage = true;
+            this.errorMessage = null;
+            this.errorKeyMessage = 'CONNECTION_NETWORK_ERROR';
+        });
+        window.addEventListener('tooltipErrorMessage', (event: CustomEvent) => {
+            // console.log('event-------------------> tooltipErrorMessage', event);
+            this.isShowErrorMessage = event.detail?.error;
+            this.errorKeyMessage = event.detail?.keyMessage || null;
+            this.errorMessage = event.detail?.message || null;
+            this.errorParams = event.detail?.params || {};                                        
+        });
     }
 
     // ========= begin:: DESTROY ALL SUBSCRIPTIONS ============//

package/src/app/app.module.ts

@@ -59,7 +59,8 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { environment } from 'src/environments/environment';
 
 //THIRD-PART MODULES
-import { TranslateModule } from '@ngx-translate/core';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 // import { MomentModule } from 'ngx-moment';
 import { PickerModule } from '@ctrl/ngx-emoji-mart';
 import { LoggerModule, NGXLogger, NgxLoggerLevel } from "ngx-logger";
@@ -134,7 +135,7 @@ import { Rules } from './utils/rules';
 import { ScriptService } from 'src/chat21-core/providers/scripts/script.service';
 import { CarouselComponent } from './component/message/carousel/carousel.component';
 import { BrandService } from './providers/brand.service';
-import { NetworkOfflineComponent } from './component/network-offline/network-offline.component';
+import { ErrorAlertComponent } from './component/error-alert/error-alert.component';
 import { ConfirmCloseComponent } from './modals/confirm-close/confirm-close.component';
 
 
@@ -204,6 +205,11 @@ export function conversationHandlerFactory(chat21Service: Chat21Service, appConf
   }
 }
 
+// ngx-translate Http loader factory
+export function createTranslateLoader(http: HttpClient) {
+  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
+}
+
 export function typingFactory(chat21Service: Chat21Service, appConfig: AppConfigService) {
   const config = appConfig.getConfig()
   if (config.chatEngine === CHAT_ENGINE_MQTT) {
@@ -300,7 +306,7 @@ export function uploadFactory(http: HttpClient, appConfig: AppConfigService, app
     LikeUnlikeComponent,
     TooltipDirective,
     CarouselComponent,
-    NetworkOfflineComponent,
+    ErrorAlertComponent,
     ConfirmCloseComponent
   ],
   imports: [BrowserModule,
@@ -308,13 +314,13 @@ export function uploadFactory(http: HttpClient, appConfig: AppConfigService, app
     FormsModule,
     ReactiveFormsModule,
     PickerModule,
-    TranslateModule.forRoot(//),
-    {
-    // loader: {
-    //   provide: TranslateLoader,
-    //   useFactory: (createTranslateLoader),
-    //   deps: [HttpClient]
-    // }
+    TranslateModule.forRoot({
+      defaultLanguage: 'en',
+      loader: {
+        provide: TranslateLoader,
+        useFactory: (createTranslateLoader),
+        deps: [HttpClient]
+      }
     }),
     LoggerModule.forRoot({
       level: NgxLoggerLevel.DEBUG,

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

@@ -89,7 +89,7 @@
     left: 0px;
     right: 0px;
     margin: 0px;
-    padding: 12px;
+    padding: 0 12px 12px 12px;
     // box-shadow: 0 -1px 0px 0px $trasp-light-gray;
     background: white;
     min-height: 40px;

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

@@ -234,7 +234,8 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
       'LABEL_START_NW_CONV',
       'CONTINUE',
       'EMOJI_NOT_ELLOWED',
-      'DOMAIN_NOT_ALLOWED'
+      'ATTACHMENT',
+      'EMOJI'
     ];
 
     const keysContent = [
@@ -456,7 +457,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
@@ -474,9 +475,9 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
       return this.isConversationArchived
     }
 
-    this.isConversationArchived = true;
-    return null;
-  }
+      this.isConversationArchived = false;
+      return null;
+    }
 
   /**
     * this.g.recipientId:
@@ -826,6 +827,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) {