@chat21/chat21-ionic 3.0.59-rc1 → 3.0.59-rc5

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # chat21-ionic ver 3.0
 
+### 3.0.59-rc5
+- Display a "toast message" of success after that the agent has joined to an unassigned conversation
+
+### 3.0.59-rc4
+- Adds an item to the top of the conversation list that shows the number of unassigned conversations for a selected project
+- Adds the ability, by clicking on the element that displays the number of unassigned conversations, to view the unassigned conversations and to join to them or archive them
+
+### 3.0.59-rc3
+- Improves the method that allows to chain multiple canned responses
+
+### 3.0.59-rc2
+- Fixes the bug: on small windows, images and iframes are not the same size as the bubble message that contains them
+- Adds in the "bubble-message" component a check if the metadata is an object before calling the getMetadataSize() method
+- Hides the "canned responses" if there are whitespace after the forward slash "/" or if there are no whitespace before the forward slash "/"
+- Fixes the bug: if the "canned responses" are selected with the mouse, the "send message" text area does not have focus
+- Adds the image viewer and the ability to download an image from it
+- Fixes the position of the "archive" button when the app runs on mobile devices
+- Updates Android splash screen .png image
+
 ### 3.0.59-rc1
 - Fixes the bug: the "send message" button remains in the "disabled" state even if it is active
 - Changes the format of the date displayed in the message tooltips

package/README.md

@@ -1,5 +1,9 @@
 [![npm version](https://badge.fury.io/js/%40chat21%2Fchat21-ionic.svg)](https://badge.fury.io/js/%40chat21%2Fchat21-ionic)
 
+> ***🚀 Do you want to install Tiledesk on your server with just one click?***
+> 
+> ***Use [Docker Compose Tiledesk installation](https://github.com/Tiledesk/tiledesk-deployment/blob/master/docker-compose/README.md) guide***
+
 Chat21 is the core of the open source live chat platform [Tiledesk.com](http://www.tiledesk.com).
 
 # Features #

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chat21/chat21-ionic",
-    "version": "3.0.59-rc1",
+    "version": "3.0.59-rc5",
     "author": "Tiledesk SRL",
     "homepage": "https://ionicframework.com/",
     "scripts": {

package/src/app/app-routing.module.ts

@@ -29,6 +29,27 @@ const routes: Routes = [
     loadChildren: './pages/conversation-detail/conversation-detail.module#ConversationDetailPageModule'
    
   },
+  {
+    path: 'contacts-directory',
+    loadChildren: () => import('./pages/contacts-directory/contacts-directory.module').then( m => m.ContactsDirectoryPageModule)
+  },
+  {
+    path: 'login',
+    loadChildren: () => import('./pages/authentication/login/login.module').then( m => m.LoginPageModule)
+  },
+  {
+    path: 'profile-info',
+    loadChildren: () => import('./pages/profile-info/profile-info.module').then( m => m.ProfileInfoPageModule)
+  },
+  {
+    path: 'loader-preview',
+    loadChildren: () => import('./pages/loader-preview/loader-preview.module').then( m => m.LoaderPreviewPageModule)
+  },
+  {
+    path: 'unassigned-conversations',
+    loadChildren: () => import('./pages/unassigned-conversations/unassigned-conversations.module').then( m => m.UnassignedConversationsPageModule)
+  }
+
 
   // {
   //   path: 'conversation-detail/:IDConv',
@@ -50,23 +71,6 @@ const routes: Routes = [
   //   // loadChildren: () => import('./pages/details/details.module').then( m => m.DetailsPageModule),
   //   // loadChildren: './pages/details/details.module',
   // },
-  {
-    path: 'contacts-directory',
-    loadChildren: () => import('./pages/contacts-directory/contacts-directory.module').then( m => m.ContactsDirectoryPageModule)
-  },
-  {
-    path: 'login',
-    loadChildren: () => import('./pages/authentication/login/login.module').then( m => m.LoginPageModule)
-  },
-  {
-    path: 'profile-info',
-    loadChildren: () => import('./pages/profile-info/profile-info.module').then( m => m.ProfileInfoPageModule)
-  },
-  {
-    path: 'loader-preview',
-    loadChildren: () => import('./pages/loader-preview/loader-preview.module').then( m => m.LoaderPreviewPageModule)
-  }
-
 
 
   // {

package/src/app/app.component.html

@@ -1,11 +1,14 @@
 <ion-app>
-  <div > <!-- (click)="hideAlert()" -->
+  <div>
+    <!-- (click)="hideAlert()" -->
+    <app-image-viewer></app-image-viewer>
     <ion-split-pane when="md" contentId="main">
+
       <ion-nav #sidebarNav [root]="sidebarPage"></ion-nav>
       <!--  our side menu  -->
       <!-- <ion-router-outlet id="sidebar" name='sidebar' animated="false" #masterNav> -->
-        <!-- <app-conversations-list></app-conversations-list> -->
-        <!-- <app-details></app-details> -->
+      <!-- <app-conversations-list></app-conversations-list> -->
+      <!-- <app-details></app-details> -->
       <!-- </ion-router-outlet> -->
       <!-- the main content -->
       <ion-router-outlet id="main" #detailNav animated="false">

package/src/app/app.component.ts

@@ -55,9 +55,8 @@ import { getImageUrlThumbFromFirebasestorage } from 'src/chat21-core/utils/utils
 import { TiledeskService } from './services/tiledesk/tiledesk.service';
 import { NetworkService } from './services/network-service/network.service';
 import * as PACKAGE from 'package.json';
-
-import { Subject } from 'rxjs';
-import { filter, takeUntil } from 'rxjs/operators'
+import { filter } from 'rxjs/operators'
+import { WebSocketJs } from './services/websocket/websocket-js';
 
 // import { filter } from 'rxjs/operators';
 
@@ -99,9 +98,11 @@ export class AppComponent implements OnInit {
   public missingConnectionToast: any
   public executedInitializeAppByWatchConnection: boolean = false;
   private version: string;
-  private unsubscribe$: Subject<any> = new Subject<any>();
+
   // private isOnline: boolean = false;
 
+  wsService: WebSocketJs;
+
   constructor(
     private platform: Platform,
     private splashScreen: SplashScreen,
@@ -136,34 +137,105 @@ export class AppComponent implements OnInit {
     public toastController: ToastController,
     // private network: Network,
     // private tiledeskService: TiledeskService,
-    private networkService: NetworkService
+    private networkService: NetworkService,
+    public webSocketJs: WebSocketJs,
   ) {
-    this.logger.log('[APP-COMP] HELLO Constuctor !!!!!!!')
-    // HACK: fix toast not presented when offline, due to lazy loading the toast controller.
-    // this.toastController.create({ animated: false }).then(t => {
-    //   console.log('[APP-COMP] toastController create')
-    //   t.present();
-    //   t.dismiss();
-    // });
+
+    // this.saveInStorageChatOpenedTab();
+    // FOR TEST
+    // const last_project = { "user_available": true, "number_assigned_requests": 59, "last_login_at": "2021-08-09T17:30:55.234Z", "status": "active", "_id": "6112bc8f58c958003495a2cb", "id_project": { "status": 100, "_id": "60ffe291f725db00347661ef", "name": "27-LUGLIO-21-STRIPE-TEST", "activeOperatingHours": false, "createdBy": "608ad02d3a4dc000344ade17", "profile": { "name": "pro", "trialDays": 30, "agents": 5, "type": "payment", "subStart": "2021-11-18T10:42:41.000Z", "subEnd": "2021-11-19T10:42:41.000Z", "subscriptionId": "sub_Jvf4kABe9t8JvX", "last_stripe_event": "invoice.payment_succeeded" }, "versions": 20115, "channels": [{ "name": "chat21" }], "createdAt": "2021-07-27T10:40:17.752Z", "updatedAt": "2021-11-18T11:55:01.346Z", "__v": 0, "widget": { "preChatForm": true, "preChatFormJson": [{ "name": "userFullname", "type": "text", "mandatory": true, "label": { "en": "Your name", "it": "Il tuo nome" } }, { "name": "userEmail", "type": "text", "mandatory": true, "regex": "/^(?=.{1,254}$)(?=.{1,64}@)[-!#$%&'*+/0-9=?A-Z^_`a-z{|}~]+(.[-!#$%&'*+/0-9=?A-Z^_`a-z{|}~]+)*@[A-Za-z0-9]([A-Za-z0-9-]{0,61}[A-Za-z0-9])?(.[A-Za-z0-9]([A-Za-z0-9-]{0,61}[A-Za-z0-9])?)+$/", "label": { "en": "Your email", "it": "La tua email" }, "errorLabel": { "en": "Invalid email address", "it": "Indirizzo email non valido" } }, { "name": "tel", "mandatory": true, "label": { "en": "Your phone number", "it": "Il tuo numero di telefono" } }], "preChatFormCustomFieldsEnabled": true }, "trialExpired": true, "trialDaysLeft": 84, "isActiveSubscription": true, "id": "60ffe291f725db00347661ef" }, "id_user": "60aa0fef1482fe00346854a7", "role": "admin", "createdBy": "608ad02d3a4dc000344ade17", "createdAt": "2021-08-10T17:51:11.318Z", "updatedAt": "2021-11-19T08:08:21.437Z", "__v": 0, "presence": { "status": "online", "changedAt": "2021-11-19T08:08:21.432Z" }, "isAuthenticated": true, "id": "6112bc8f58c958003495a2cb" }
+    // localStorage.setItem('last_project', JSON.stringify(last_project))
   }
+  saveInStorageChatOpenedTab() {
+    // if (+localStorage.tabCount > 0) {
+    //   alert('Already open!');
+    // } else {
+    //   localStorage.tabCount = 0;
+    // }
+
+    // window.addEventListener('load', (event) => {
+    //   console.log('[CONVS-LIST-PAGE] page is fully loaded', event);
+    //   // let tab  = + localStorage.getItem('tab')
+    //   // console.log('[CONVS-LIST-PAGE] page is fully loaded getItem tab', + tab);
+    //   // localStorage.setItem('tab', "1" )
+    //   localStorage.tabCount = +localStorage.tabCount + 1;
+    // });
+
+    // // https://developers.google.com/web/updates/2018/07/page-lifecycle-api#the-beforeunload-event
+    // const terminationEvent = 'onpagehide' in self ? 'pagehide' : 'unload';
+    // window.addEventListener(terminationEvent, (event) => {
+    //   console.log('[CONVS-LIST-PAGE] page is terminationEvent', event);
+    //   localStorage.tabCount = +localStorage.tabCount - 1;
+    // }, { capture: true });
+    const getState = () => {
+      if (document.visibilityState === 'hidden') {
+        return 'hidden';
+      }
+      if (document.hasFocus()) {
+        return 'active';
+      }
+      return 'passive';
+    };
+
+    let state = getState();
+    console.log('[CONVS-LIST-PAGE] page state ', state)
+    if (state === 'hidden') {
+      localStorage.setItem('hidden', 'true')
+    }
+
+    const logStateChange = (nextState) => {
+      const prevState = state;
+      if (nextState !== prevState) {
+        console.log(`State change: ${prevState} >>> ${nextState}`);
+        state = nextState;
+      }
+    };
+
+    ['pageshow', 'focus', 'blur', 'visibilitychange', 'resume'].forEach((type) => {
+      window.addEventListener(type, () => logStateChange(getState()), { capture: true });
+    });
+
+    // The next two listeners, on the other hand, can determine the next
+    // state from the event itself.
+    window.addEventListener('freeze', () => {
+      // In the freeze event, the next state is always frozen.
+      logStateChange('frozen');
+    }, { capture: true });
+
+    window.addEventListener('pagehide', (event) => {
+      if (event.persisted) {
+        // If the event's persisted property is `true` the page is about
+        // to enter the Back-Forward Cache, which is also in the frozen state.
+        logStateChange('frozen');
+        localStorage.setItem('terminated', 'true')
+      } else {
+        // If the event's persisted property is not `true` the page is
+        // about to be unloaded.
+        logStateChange('terminated');
+        localStorage.setItem('terminated', 'true')
+      }
+    }, { capture: true });
 
-  param() {
-    // PARAM
-    const url: URL = new URL(window.top.location.href);
-    const params: URLSearchParams = url.searchParams;
-    return params;
   }
+
+
+  // param() {
+  //   // PARAM
+  //   const url: URL = new URL(window.top.location.href);
+  //   const params: URLSearchParams = url.searchParams;
+  //   return params;
+  // }
   /**
    */
   ngOnInit() {
     const appconfig = this.appConfigProvider.getConfig();
     this.persistence = appconfig.authPersistence;
     this.appStorageService.initialize(environment.storage_prefix, this.persistence, '')
-    this.logger.log('[APP-COMP] HELLO ngOnInit !!!!!!!')
-    this.logger.info('[APP-COMP] ngOnInit this.route.snapshot.params -->', this.route.snapshot.params);
+    // this.logger.log('[APP-COMP] HELLO ngOnInit !!!!!!!')
+    // this.logger.log('[APP-COMP] ngOnInit this.route.snapshot.params -->', this.route.snapshot.params);
     // this.initializeApp('oninit');
     const token = getParameterByName('jwt')
-    this.logger.info('[APP-COMP] ngOnInit AUTOLOGIN token get with getParameterByName -->', token);
+    // this.logger.log('[APP-COMP] ngOnInit AUTOLOGIN token get with getParameterByName -->', token);
 
     if (token) {
       // this.isOnline = false;
@@ -182,9 +254,81 @@ export class AppComponent implements OnInit {
     }
     this.initializeApp('oninit');
 
+    this.listenToPostMsgs();
   }
 
 
+
+  listenToPostMsgs() {
+    window.addEventListener("message", (event) => {
+      console.log("[APP-COMP] message event ", event);
+
+      if (event && event.data && event.data.action && event.data.parameter) {
+        if (event.data.action === 'openJoinConversationModal') {
+          console.log("[APP-COMP] message event action ", event.data.action);
+          console.log("[APP-COMP] message event parameter ", event.data.parameter);
+          this.presentAlertConfirmJoinRequest(event.data.parameter, event.data.calledBy)
+        }
+      }
+      if (event && event.data && event.data.action && event.data.text) {
+        if (event.data.action === "display_toast_join_complete") {
+          this.presentToastJoinComplete(event.data.text)
+        }
+      }
+    })
+  }
+
+  async presentToastJoinComplete(text) {
+    const toast = await this.toastController.create({
+      message: text,
+      duration: 2000,
+      color: "success"
+    });
+    toast.present();
+  }
+
+  async presentAlertConfirmJoinRequest(requestid, calledby) {
+    var iframeWin = <HTMLIFrameElement>document.getElementById("unassigned-convs-iframe")
+    // console.log("[APP-COMP] message event iframeWin ", iframeWin);
+
+    const isIFrame = (input: HTMLElement | null): input is HTMLIFrameElement =>
+      input !== null && input.tagName === 'IFRAME';
+
+    const keys = ['YouAreAboutToJoinThisChat', 'Cancel', 'AreYouSure'];
+    const translationMap = this.translateService.translateLanguage(keys);
+
+    const alert = await this.alertController.create({
+      cssClass: 'my-custom-class',
+      header: translationMap.get('AreYouSure'),
+      message: translationMap.get('YouAreAboutToJoinThisChat'),
+      buttons: [
+        {
+          text: translationMap.get('Cancel'),
+          role: 'cancel',
+          cssClass: 'secondary',
+          handler: (blah) => {
+            // console.log('Confirm Cancel: blah', blah);
+          }
+        }, {
+          text: 'Ok',
+          handler: () => {
+            // console.log('Confirm Okay');
+
+            if (isIFrame(iframeWin) && iframeWin.contentWindow) {
+              const msg = { action: "joinConversation", parameter: requestid, calledBy: calledby }
+              iframeWin.contentWindow.postMessage(msg, '*');
+            }
+          }
+        }
+      ]
+    });
+
+    await alert.present();
+  }
+
+
+
+
   signInWithCustomToken(token) {
     // this.isOnline = false;
     this.logger.log('[APP-COMP] SIGNINWITHCUSTOMTOKEN  token', token)
@@ -200,8 +344,8 @@ export class AppComponent implements OnInit {
 
   /** */
   initializeApp(calledby: string) {
-    this.logger.log('[APP-COMP] - X - initializeApp !!! CALLED-BY: ', calledby);
-    this.logger.log('[APP-COMP] appconfig platform is cordova: ', this.platform.is('cordova'))
+    // this.logger.log('[APP-COMP] - X - initializeApp !!! CALLED-BY: ', calledby);
+    // this.logger.log('[APP-COMP] appconfig platform is cordova: ', this.platform.is('cordova'))
 
     if (!this.platform.is('cordova')) {
       this.splashScreen.show();
@@ -211,7 +355,7 @@ export class AppComponent implements OnInit {
     this.getRouteParamsAndSetLoggerConfig();
 
     const appconfig = this.appConfigProvider.getConfig();
-    this.logger.info('[APP-COMP] appconfig: ', appconfig)
+    // this.logger.info('[APP-COMP] appconfig: ', appconfig)
     this.version = PACKAGE.version;
     this.logger.info('[APP-COMP] version: ', this.version)
 
@@ -320,9 +464,9 @@ export class AppComponent implements OnInit {
   getRouteParamsAndSetLoggerConfig() {
     const appconfig = this.appConfigProvider.getConfig();
     this.route.queryParams.subscribe(params => {
-      this.logger.info('[APP-COMP] getRouteParamsAndSetLoggerConfig - queryParams params: ', params)
+      // this.logger.log('[APP-COMP] getRouteParamsAndSetLoggerConfig - queryParams params: ', params)
       if (params.logLevel) {
-        this.logger.info('[APP-COMP] getRouteParamsAndSetLoggerConfig - log level get from queryParams: ', params.logLevel)
+        this.logger.log('[APP-COMP] getRouteParamsAndSetLoggerConfig - log level get from queryParams: ', params.logLevel)
         this.logger.setLoggerConfig(true, params.logLevel)
       } else {
         this.logger.info('[APP-COMP] getRouteParamsAndSetLoggerConfig - log level get from appconfig: ', appconfig.logLevel)
@@ -352,6 +496,7 @@ export class AppComponent implements OnInit {
   /**------- AUTHENTICATION FUNCTIONS --> START <--- +*/
   private initAuthentication() {
     const tiledeskToken = this.appStorageService.getItem('tiledeskToken')
+
     this.logger.log('[APP-COMP] >>> INIT-AUTHENTICATION !!! ')
     this.logger.log('[APP-COMP] >>> initAuthentication tiledeskToken ', tiledeskToken)
     // const currentUser = JSON.parse(this.appStorageService.getItem('currentUser'));
@@ -360,19 +505,19 @@ export class AppComponent implements OnInit {
       this.logger.log('[APP-COMP] >>> initAuthentication I LOG IN WITH A TOKEN EXISTING IN THE LOCAL STORAGE OR WITH A TOKEN PASSED IN THE URL PARAMETERS <<<')
       this.tiledeskAuthService.signInWithCustomToken(tiledeskToken).then(user => {
         this.logger.log('[APP-COMP] >>> initAuthentication user ', user)
-        this.messagingAuthService.createCustomToken(tiledeskToken) 
+        this.messagingAuthService.createCustomToken(tiledeskToken)
       }).catch(error => {
         this.logger.error('[APP-COMP] initAuthentication SIGNINWITHCUSTOMTOKEN error::', error)
       })
     } else {
       this.logger.warn('[APP-COMP] >>> I AM NOT LOGGED IN <<<')
-      
+
       // clearTimeout(this.timeModalLogin);
       // this.timeModalLogin = setTimeout(() => {
-        if (!this.hadBeenCalledOpenModal) {
-          this.authModal = this.presentModal('initAuthentication');
-          this.hadBeenCalledOpenModal = true;
-        }
+      if (!this.hadBeenCalledOpenModal) {
+        this.authModal = this.presentModal('initAuthentication');
+        this.hadBeenCalledOpenModal = true;
+      }
       // }, 1000);
     }
   }
@@ -385,6 +530,16 @@ export class AppComponent implements OnInit {
   //   }
   // }
 
+  connetWebsocket(tiledeskToken) {
+    const WS_URL = 'wss://tiledesk-server-pre.herokuapp.com/' + '?token=' + tiledeskToken
+    this.webSocketJs.init(
+      WS_URL,
+      undefined,
+      undefined,
+      undefined
+    );
+  }
+
   /**
    * goOnLine:
    * 1 - nascondo splashscreen
@@ -396,8 +551,10 @@ export class AppComponent implements OnInit {
     // this.isOnline = true;
     // this.logger.info('initialize FROM [APP-COMP] - [APP-COMP] - GO-ONLINE isOnline ', this.isOnline);
 
-    clearTimeout(this.timeModalLogin);
+    // clearTimeout(this.timeModalLogin);
     const tiledeskToken = this.tiledeskAuthService.getTiledeskToken();
+    this.connetWebsocket(tiledeskToken)
+
     const currentUser = this.tiledeskAuthService.getCurrentUser();
     // this.logger.printDebug('APP-COMP - goOnLine****', currentUser);
     this.logger.log('[APP-COMP] - GO-ONLINE - currentUser ', currentUser);
@@ -429,8 +586,16 @@ export class AppComponent implements OnInit {
     this.chatManager.startApp();
   }
 
+
+  webSocketClose() {
+    this.logger.log('[APP-COMP] - GO-OFFLINE - webSocketClose');
+    this.webSocketJs.close()
+  }
+
   goOffLine = () => {
     this.logger.log('[APP-COMP] - GO-OFFLINE');
+
+    this.webSocketClose()
     // this.isOnline = false;
     // this.conversationsHandlerService.conversations = [];
 
@@ -439,13 +604,13 @@ export class AppComponent implements OnInit {
     this.chatManager.goOffLine();
 
     this.router.navigateByUrl('conversation-detail/'); //redirect to basePage
-   
+
     // clearTimeout(this.timeModalLogin);
     // this.timeModalLogin = setTimeout(() => {
-      if (!this.hadBeenCalledOpenModal) {
-        this.authModal = this.presentModal('goOffLine');
-        this.hadBeenCalledOpenModal = true
-      }
+    if (!this.hadBeenCalledOpenModal) {
+      this.authModal = this.presentModal('goOffLine');
+      this.hadBeenCalledOpenModal = true
+    }
     // }, 1000);
 
     // this.unsubscribe$.next();
@@ -601,8 +766,8 @@ export class AppComponent implements OnInit {
       return;
     }
 
-    this.BSAuthStateChangedSubscriptionRef = this.messagingAuthService.BSAuthStateChanged 
-   
+    this.BSAuthStateChangedSubscriptionRef = this.messagingAuthService.BSAuthStateChanged
+
       // .pipe(takeUntil(this.unsubscribe$))
       .pipe(filter((state) => state !== null))
       .subscribe((state: any) => {
@@ -658,7 +823,7 @@ export class AppComponent implements OnInit {
    * apro dettaglio conversazione
    */
   subscribeChangedConversationSelected = (user: UserModel, type: string) => {
-    this.logger.info('[APP-COMP] subscribeUidConvSelectedChanged navigateByUrl', user, type);
+    this.logger.log('[APP-COMP] subscribeUidConvSelectedChanged navigateByUrl', user, type);
     // this.router.navigateByUrl('conversation-detail/' + user.uid + '?conversationWithFullname=' + user.fullname);
     this.router.navigateByUrl('conversation-detail/' + user.uid + '/' + user.fullname + '/' + type);
   }
@@ -877,7 +1042,7 @@ export class AppComponent implements OnInit {
         // this.unsubscribe$.complete();
         this.initializeApp('onstoragechanged');
 
-       
+
 
         // console.log('[APP-COMP]  onAuthStateChanged HERE !!! ')
         // firebase.auth().onAuthStateChanged(user => {

package/src/app/app.module.ts

@@ -94,7 +94,8 @@ import { TooltipModule } from 'ng2-tooltip-directive';
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 import { Network } from '@ionic-native/network/ngx';
 import { ConnectionService } from 'ng-connection-service';
-
+import { WebSocketJs } from './services/websocket/websocket-js';
+import { UnassignedConversationsPageModule } from './pages/unassigned-conversations/unassigned-conversations.module';
 
 // FACTORIES
 export function createTranslateLoader(http: HttpClient) {
@@ -253,6 +254,7 @@ const appInitializerFn = (appConfig: AppConfigProvider, logger: NGXLogger) => {
     LoginPageModule,
     ConversationListPageModule,
     ConversationDetailPageModule,
+    UnassignedConversationsPageModule,
     TranslateModule.forRoot({
       loader: {
         provide: TranslateLoader,
@@ -352,6 +354,7 @@ const appInitializerFn = (appConfig: AppConfigProvider, logger: NGXLogger) => {
     EventsService,
     Chooser,
     Chat21Service,
+    WebSocketJs
   ]
 })
 export class AppModule { }

package/src/app/chatlib/conversation-detail/ion-conversation-detail/ion-conversation-detail.component.html

@@ -67,8 +67,8 @@
     <div role="messaggio" *ngIf="messageType(MESSAGE_TYPE_MINE, message)" class="msg_container base_sent">
 
       <!--backgroundColor non viene ancora usato -->
-      <chat-bubble-message 
-      class="messages msg_sent" id="{{'message'+'_'+ i}}"
+      <chat-bubble-message  [ngClass]="{'has-metadata': (isImage(message) || isFrame(message))}"
+        class="messages msg_sent" id="message_msg_sent"
         [ngClass]="{'button-in-msg' : message.metadata && message.metadata.button}" [message]="message"
         [textColor]="'col-msg-sent'" 
         (onBeforeMessageRender)="returnOnBeforeMessageRender($event)"
@@ -98,8 +98,8 @@
       </chat-avatar-image> -->
 
       <!--backgroundColor non viene ancora usato -->
-
-      <chat-bubble-message class="messages msg_receive" 
+      
+      <chat-bubble-message [ngClass]="{'has-metadata': (isImage(message) || isFrame(message))}" class="messages msg_receive" id="message_msg_receive"
         [message]="message" 
         [textColor]="'black'"
         (onBeforeMessageRender)="returnOnBeforeMessageRender($event)"

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

@@ -93,7 +93,9 @@ ion-item {
      
     }
 
-    
+    .has-metadata {
+        max-width: 100% !important;
+    }
 }
     
 /** recive message **/
@@ -138,7 +140,11 @@ ion-item {
         border-top-left-radius: 8px;
         border-bottom-left-radius: 0px;
 
-    }                    
+    }          
+    
+    .has-metadata {
+        max-width: 100% !important;
+    }
 }
 
 .time{

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

@@ -5,6 +5,7 @@ import { ChangeDetectorRef, Component, Input, OnInit, Output, EventEmitter} from
 import { MESSAGE_TYPE_INFO, MESSAGE_TYPE_MINE, MESSAGE_TYPE_OTHERS } from 'src/chat21-core/utils/constants';
 import { isChannelTypeGroup, isFirstMessage, isInfo, isMine, messageType } from 'src/chat21-core/utils/utils-message';
 import { UploadService } from 'src/chat21-core/providers/abstract/upload.service';
+import { isFile, isFrame, isImage } from 'src/chat21-core/utils/utils-message';
 
 import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
@@ -25,6 +26,10 @@ export class IonConversationDetailComponent extends ConversationContentComponent
   public uploadProgress: number = 100
   public fileType: any
 
+  isImage = isImage;
+  isFile = isFile;
+  isFrame = isFrame;
+
   isMine = isMine;
   isInfo = isInfo;
   isFirstMessage = isFirstMessage;
@@ -34,7 +39,7 @@ export class IonConversationDetailComponent extends ConversationContentComponent
   MESSAGE_TYPE_INFO = MESSAGE_TYPE_INFO;
   MESSAGE_TYPE_MINE = MESSAGE_TYPE_MINE;
   MESSAGE_TYPE_OTHERS = MESSAGE_TYPE_OTHERS;
-
+  logger: LoggerService = LoggerInstance.getInstance()
   /**
    * Constructor
    * @param cdref 

package/src/app/chatlib/conversation-detail/message/bubble-message/bubble-message.component.html

@@ -1,7 +1,7 @@
 <!-- [ngClass]="{'button-in-msg' : message.metadata && message.metadata.button}" -->
 <!-- [ngStyle]="{'padding': (isImage(message) || isFrame(message))?'0px':'0 8px'}" -->
 <!-- isImage >{{isImage(message) }}    message.metadata.width {{message?.metadata?.width }}  -->
-<div  [ngStyle]="{'padding': (isImage(message) || isFrame(message))?'0px':'0 8px', 'width': (isImage(message) || isFrame(message))? message?.metadata?.width + 'px' : null }"
+<div id="bubble-message" [ngStyle]="{'padding': (isImage(message) || isFrame(message))?'0px':'0 8px', 'width': (isImage(message) || isFrame(message))? message?.metadata?.width + 'px' : null }"
    class="messages primary-color"
   [class.emoticon]="message?.emoticon">
 

package/src/app/chatlib/conversation-detail/message/bubble-message/bubble-message.component.ts

@@ -87,7 +87,7 @@ export class BubbleMessageComponent implements OnInit, OnChanges {
 
   ngOnChanges() {
     // console.log('BUBBLE-MSG Hello !!!! this.message ',  this.message)
-    if (this.message && this.message.metadata) {
+    if (this.message && this.message.metadata && typeof this.message.metadata === 'object') {
       this.getMetadataSize(this.message.metadata)
       // console.log('BUBBLE-MSG ngOnChanges message > metadata', this.message.metadata)
     }