@chat21/chat21-web-widget 5.0.79 → 5.0.80-rc.1

package/CHANGELOG.md

@@ -5,6 +5,12 @@
     *Dario De Pascalis* 
 ### **Copyrigth**: *Tiledesk SRL*
 
+### 5.0.80-rc.1
+- added: network-offline component to manage network connection/disconnection
+- added: onDisconnect MQTT method to subscribe and manage reconnect/close/offline event
+- changed: v0.1.12.8 chat21client.js
+
+
 ### 5.0.79 in PROD
 
 ### 5.0.79-rc.3

package/package.json

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

package/src/app/app.component.html

@@ -96,6 +96,16 @@
 
     </div>
 
+
+    <!-- 
+    ****************************************
+    ******* MODALE OFFLINE NETWORK *********
+    ****************************************
+    -->
+    <div *ngIf="g.isOpen && !isOnline" class="modal-page star-rating-widget active">
+      <chat-network-offline></chat-network-offline>
+    </div>
+
   </div>
   
 

package/src/app/app.component.scss

@@ -699,6 +699,21 @@ chat-root {
 
         }
 
+        /***************************
+        ***** NETWORK OFFLINE ******
+        ****************************/
+        chat-network-offline {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, .32);
+            justify-content: center;
+            align-items: flex-end;
+            display: flex;
+        }
+
+
+
     
     }
 
@@ -858,6 +873,9 @@ chat-root {
     }
     // ========= END: CSS STANDARD PAGE ========= //
 
+
+
+
     /**************
     // nk: .chat21-sheet CUSTOM DIMENSIONS WHEN THE WINDOW WIDTH IS < 451PX 
     ***************/

package/src/app/app.component.ts

@@ -37,7 +37,7 @@ import { TranslatorService } from './providers/translator.service';
 // UTILS
 import * as dayjs from 'dayjs';
 import { MessageModel } from 'src/chat21-core/models/message';
-import { AUTH_STATE_OFFLINE, AUTH_STATE_ONLINE, CHANNEL_TYPE, TYPE_MSG_FILE, TYPE_MSG_IMAGE, URL_SOUND_LIST_CONVERSATION } from 'src/chat21-core/utils/constants';
+import { AUTH_STATE_CLOSE, AUTH_STATE_OFFLINE, AUTH_STATE_ONLINE, CHANNEL_TYPE, TYPE_MSG_FILE, TYPE_MSG_IMAGE, URL_SOUND_LIST_CONVERSATION } from 'src/chat21-core/utils/constants';
 import { supports_html5_storage } from 'src/chat21-core/utils/utils';
 import { UID_SUPPORT_GROUP_MESSAGES } from './utils/constants';
 import { Globals } from './utils/globals';
@@ -103,6 +103,10 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
   marginBottom: number;
   
   forceDisconnect: boolean = false;
+
+  //network status
+  isOnline: boolean = true;
+  
   private logger: LoggerService = LoggerInstance.getInstance();
   constructor(
     private el: ElementRef,
@@ -358,6 +362,10 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
         this.triggerLoadParamsEvent(); // first trigger
         //this.setAvailableAgentsStatus();
 
+
+        /** NETWORK STATUS */
+        this.listenToNetworkStatus()
+
     }
 
     // ========= begin:: SUBSCRIPTIONS ============//
@@ -435,6 +443,12 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
                 if (autoStart) {
                     that.authenticate();
                 }
+            }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;
+                }
             }
 
 
@@ -2121,6 +2135,11 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
         })
     }
 
+    private listenToNetworkStatus(){
+        window.addEventListener('online', () => this.isOnline = true);
+        window.addEventListener('offline', () =>  this.isOnline = false);
+    }
+
     // ========= begin:: DESTROY ALL SUBSCRIPTIONS ============//
     /** elimino tutte le sottoscrizioni */
     ngOnDestroy() {

package/src/app/app.module.ts

@@ -133,6 +133,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';
 
 
 
@@ -294,7 +295,8 @@ export function uploadFactory(http: HttpClient, appConfig: AppConfigService, app
     LikeUnlikeComponent,
     TooltipDirective,
     AudioComponent,
-    CarouselComponent
+    CarouselComponent,
+    NetworkOfflineComponent
   ],
   imports: [
     BrowserModule,

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

@@ -300,9 +300,13 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
       // this.scrollToBottom();
     }
     // CHECK if conversationId is changed and re-build component
-    if(changes && changes['conversationId'] && changes['conversationId'].previousValue !== undefined && (changes['conversationId'].previousValue !== changes['conversationId'].currentValue)){
+    if(changes && 
+        changes['conversationId'] && 
+        changes['conversationId'].previousValue !== undefined && 
+        (changes['conversationId'].previousValue !== changes['conversationId'].currentValue) &&
+        changes['conversationId'].currentValue
+      ){
       this.logger.debug("[CONV-COMP] UID CHANGESSSS", changes['conversationId'])
-      
       this.ngOnDestroy();
       this.ngOnInit();
       this.ngAfterViewInit();
@@ -446,7 +450,7 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
   private setConversation() {
     const recipientId = this.g.recipientId;
     const channelType = this.g.channelType;
-    this.logger.debug('[CONV-COMP] setConversation recipientId::: ', recipientId, channelType);
+    this.logger.debug('[CONV-COMP] setConversation recipientId::: ', recipientId, channelType, this.g.recipientId);
     if ( !recipientId ) { this.g.setParameter('recipientId', this.setRecipientId()); }
     if ( !channelType ) { this.g.setParameter('channelType', this.setChannelType()); }
     this.conversationWith = recipientId as string;

package/src/app/component/network-offline/network-offline.component.html

@@ -0,0 +1,8 @@
+<div id="alert-container">
+    <svg xmlns="http://www.w3.org/2000/svg" height="20px" width="20px" viewBox="0 -960 960 960"  fill="#e8eaed">
+        <path d="M440-280h80v-240h-80v240Zm40-320q17 0 28.5-11.5T520-640q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640q0 17 11.5 28.5T480-600Zm0 520q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/>
+    </svg>
+    <div class="alert-content">
+        {{ translationMap.get('CONNECTION_NETWORK_ERROR')}}
+    </div>
+</div>

package/src/app/component/network-offline/network-offline.component.scss

@@ -0,0 +1,31 @@
+#alert-container{
+    /* // z-index: 1051;
+    // position: fixed; */
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 5px;
+    border-radius: 3px;
+    box-shadow: rgba(0, 27, 71, .24) 0px 1px 3px;
+    background: rgb(14 14 14);
+    padding: 7px 10px;
+    bottom: 10px;
+    width: 90%;
+}
+
+span.material-icons,
+span.material-icons-outlined{
+    color: rgb(242, 247, 247);
+    font-size: 20px;
+}
+
+
+.alert-content{
+    color: rgb(242, 247, 247);
+    text-align: center;
+    transition: all 0.15s ease-in-out 0s;
+    font-size: 11px;
+    line-height: 18px;
+    /* // letter-spacing: -0.01em; */
+}

package/src/app/component/network-offline/network-offline.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NetworkOfflineComponent } from './network-offline.component';
+
+describe('NetworkOfflineComponent', () => {
+  let component: NetworkOfflineComponent;
+  let fixture: ComponentFixture<NetworkOfflineComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ NetworkOfflineComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(NetworkOfflineComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/app/component/network-offline/network-offline.component.ts

@@ -0,0 +1,24 @@
+import { Component, OnInit } from '@angular/core';
+import { CustomTranslateService } from 'src/chat21-core/providers/custom-translate.service';
+
+@Component({
+  selector: 'chat-network-offline',
+  templateUrl: './network-offline.component.html',
+  styleUrls: ['./network-offline.component.scss']
+})
+export class NetworkOfflineComponent implements OnInit {
+
+  translationMap: Map< string, string>;
+
+  constructor(
+    private customTranslateService: CustomTranslateService
+  ){}
+
+  ngOnInit(): void {
+    let keys = [
+      'CONNECTION_NETWORK_ERROR'
+    ]
+    this.translationMap = this.customTranslateService.translateLanguage(keys)
+  }
+
+}

package/src/assets/i18n/en.json

@@ -77,6 +77,8 @@
     "LABEL_PRECHAT_ACCEPT_TERMS_PRIVACY": "I agree",
     "PRECHAT_REQUIRED_ERROR": "This field is required",
 
+    "TICKET_TAKING":"The request has been received and the assistance staff is dealing with it.\nTo add more comments, reply to this email.",
+    
     "LABEL_TODAY": "today",
     "LABEL_TOMORROW": "yesterday",
     "LABEL_LAST_ACCESS": "last access",
@@ -87,5 +89,6 @@
     "SENT_AN_IMAGE":"sent an image",
 
     "LABEL_PREVIEW": "Preview",
-    "SWITCH_TO": "Or switch to:"
+    "SWITCH_TO": "Or switch to:",
+    "CONNECTION_NETWORK_ERROR": "Our apologies. There was some trouble connecting to network"
 }

package/src/assets/i18n/es.json

@@ -77,6 +77,8 @@
     "LABEL_PRECHAT_ACCEPT_TERMS_PRIVACY": "Acepto",
     "PRECHAT_REQUIRED_ERROR": "Este campo es obligatorio",
     
+    "TICKET_TAKING":"La solicitud ha sido recibida y el personal de asistencia está tratando con ella. \nPara agregar más comentarios, responda a este correo electrónico.",
+    
     "LABEL_TODAY": "hoy",
     "LABEL_TOMORROW": "ayer",
     "LABEL_LAST_ACCESS": "ultimo acceso",
@@ -87,5 +89,6 @@
     "SENT_AN_IMAGE": "envió una imagen",
 
     "LABEL_PREVIEW": "Avance",
-    "SWITCH_TO":"O cambiar a:"
+    "SWITCH_TO":"O cambiar a:",
+    "CONNECTION_NETWORK_ERROR": "Nuestras disculpas. Hubo algunos problemas para conectarse a la red"
 }

package/src/assets/i18n/fr.json

@@ -77,6 +77,8 @@
     "LABEL_PRECHAT_ACCEPT_TERMS_PRIVACY": "Je suis d'accord",
     "PRECHAT_REQUIRED_ERROR": "Ce champ est obligatoire",
 
+    "TICKET_TAKING":"La demande a été reçue et le personnel d'assistance la traite.\nPour ajouter d'autres commentaires, répondez à cet e-mail.",
+	
     "LABEL_TODAY": "aujourd'hui",
     "LABEL_TOMORROW": "hier",
     "LABEL_LAST_ACCESS": "dernier accès",
@@ -87,5 +89,6 @@
     "SENT_AN_IMAGE": "envoyé une image",
 
     "LABEL_PREVIEW": "Aperçu",
-    "SWITCH_TO":"Ou passer à:"
+    "SWITCH_TO":"Ou passer à:",
+    "CONNECTION_NETWORK_ERROR": "Nos excuses. Il y a eu des problèmes de connexion au réseau"
 }

package/src/assets/i18n/it.json

@@ -77,6 +77,8 @@
     "LABEL_PRECHAT_ACCEPT_TERMS_PRIVACY": "Sono d'accordo",
     "PRECHAT_REQUIRED_ERROR": "Questo campo è obbligatorio",
 
+    "TICKET_TAKING":"La richiesta è stata ricevuta e il personale di assistenza se ne sta occupando.\nPer aggiungere ulteriori commenti, rispondi a questa email.",
+    
     "LABEL_TODAY": "oggi",
     "LABEL_TOMORROW": "ieri",
     "LABEL_LAST_ACCESS": "ultimo accesso",
@@ -87,5 +89,6 @@
     "SENT_AN_IMAGE":"ha inviato un'immagine",
     
     "LABEL_PREVIEW": "Anteprima",
-    "SWITCH_TO":"Oppure passa a:"
+    "SWITCH_TO":"Oppure passa a:",
+    "CONNECTION_NETWORK_ERROR": "Ci scusiamo. Si sono verificati problemi di connessione di rete"
 }

package/src/assets/js/chat21client.js

@@ -1,7 +1,7 @@
 /*
     Chat21Client
 
-    v0.1.12.7
+    v0.1.12.8
 
     @Author Andrea Sponziello
     @Member Gabriele Panico
@@ -1022,25 +1022,31 @@ class Chat21Client {
                 );
             }
         );
+        this.client.on('error',
+            (error) => {
+                console.error("Chat client error event", error);
+            }
+        );
+    }
+
+    onDisconnect(callback){
         this.client.on('reconnect',
             () => {
                 if (this.log) {console.log("Chat client reconnect event");}
+                // callback('reconnect')
             }
         );
         this.client.on('close',
             () => {
                 this.connected = false
                 if (this.log) {console.log("Chat client close event");}
+                callback('close')
             }
         );
         this.client.on('offline',
             () => {
                 if (this.log) {console.log("Chat client offline event");}
-            }
-        );
-        this.client.on('error',
-            (error) => {
-                console.error("Chat client error event", error);
+                // callback('offline')
             }
         );
     }

package/src/chat21-core/providers/mqtt/mqtt-auth-service.ts

@@ -265,9 +265,17 @@ z
     this.chat21Service.chatClient.connect(userid, credentials.token, () => {
       this.logger.debug('[MQTTAuthService] connectMQTT: Chat connected');
       this.BSAuthStateChanged.next('online');
+      this.onDisconnectMQTT();
     });
   }
 
+  onDisconnectMQTT(): any{
+    this.chat21Service.chatClient.onDisconnect((state)=> {
+      this.logger.debug('[MQTTAuthService] onDisconnect --> ', state)
+      this.BSAuthStateChanged.next('close');
+    })
+  }
+
   // /**
   //  * createCompleteUser
   //  * @param user

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

@@ -13,6 +13,7 @@ export const PUSH_ENGINE_FIREBASE = 'firebase';
 // AUTH
 export const AUTH_STATE_OFFLINE = 'offline';
 export const AUTH_STATE_ONLINE = 'online'
+export const AUTH_STATE_CLOSE = 'close'
 
 
 // MESSAGES STATUS