@chat21/chat21-ionic 2.0.13 → 3.0.5-9.2

package/src/app/app.module.ts

@@ -1,115 +1,265 @@
-import { BrowserModule } from '@angular/platform-browser';
+import { LogLevel, PUSH_ENGINE_FIREBASE, PUSH_ENGINE_MQTT } from './../chat21-core/utils/constants';
+import { CustomLogger } from 'src/chat21-core/providers/logger/customLogger';
 import { NgModule, ErrorHandler, APP_INITIALIZER } from '@angular/core';
+import { RouteReuseStrategy } from '@angular/router';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
+import { SplashScreen } from '@ionic-native/splash-screen/ngx';
+import { StatusBar } from '@ionic-native/status-bar/ngx';
+import { ActivatedRoute } from '@angular/router';
+import { TranslateLoader, TranslateModule, TranslatePipe } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { HttpClient, HttpClientModule } from '@angular/common/http';
+import { Keyboard } from '@ionic-native/keyboard/ngx';
+import { NgxLinkifyjsModule } from 'ngx-linkifyjs';
+import { Chooser } from '@ionic-native/chooser/ngx';
+import { LoggerModule, NGXLogger, NgxLoggerLevel } from "ngx-logger";
 
-import { HttpModule, Http } from '@angular/http';
-import { IonicStorageModule } from '@ionic/storage';
-import { LinkyModule } from 'angular-linky';
+// COMPONENTS
+import { AppComponent } from './app.component';
+import { AppRoutingModule } from './app-routing.module';
 
-import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
-import { MyApp } from './app.component';
+// CONFIG
 import { environment } from '../environments/environment';
+import { CHAT_ENGINE_MQTT, CHAT_ENGINE_FIREBASE, UPLOAD_ENGINE_NATIVE } from '../chat21-core/utils/constants';
 
+// SERVICES
+import { AppConfigProvider } from './services/app-config';
+import { EventsService } from './services/events-service';
 
-//import { HelloIonicPage } from '../pages/hello-ionic/hello-ionic';
-import { UsersPage } from '../pages/users/users';
-import { LoginPage } from '../pages/authentication/login/login';
-import { RegisterPage } from '../pages/authentication/register/register';
-import { ResetpwdPage } from '../pages/authentication/resetpwd/resetpwd';
-import { ListaConversazioniPage } from '../pages/lista-conversazioni/lista-conversazioni';
-import { DettaglioConversazionePage } from '../pages/dettaglio-conversazione/dettaglio-conversazione';
-import { ProfilePage } from '../pages/profile/profile';
-import { InfoConversationPage } from '../pages/info-conversation/info-conversation';
-import { InfoUserPage } from '../pages/info-user/info-user';
-import { InfoMessagePage } from '../pages/info-message/info-message';
-import { InfoAdvancedPage } from '../pages/info-advanced/info-advanced';
-
-// import { AngularFireModule } from 'angularfire2';
-import * as firebase from "firebase";
-// import { AngularFireDatabaseModule } from 'angularfire2/database';
-// import { AngularFireAuthModule } from 'angularfire2/auth';
-
-import { AuthService } from '../providers/auth-service';
-import { ChatPresenceHandler } from '../providers/chat-presence-handler';
-import { UploadService } from '../providers/upload-service/upload-service';
-
-import { NavProxyService } from '../providers/nav-proxy';
-import { PlaceholderPage } from '../pages/placeholder/placeholder';
-import { PopoverPage } from '../pages/popover/popover';
-import { PopoverProfilePage } from '../pages/popover-profile/popover-profile';
-import { UpdateImageProfilePage } from '../pages/update-image-profile/update-image-profile';
-import { ArchivedConversationsPage } from '../pages/archived-conversations/archived-conversations';
-//import { FirebaseProvider } from '../providers/firebase-provider';
-
-// @ionic
-// import { StatusBar } from '@ionic-native/status-bar';
-// import { SplashScreen } from '@ionic-native/splash-screen';
-import { StatusBar } from '@ionic-native/status-bar/ngx';
-import { SplashScreen } from '@ionic-native/splash-screen/ngx';
+// ABSTRACT SERVICES
+import { MessagingAuthService } from 'src/chat21-core/providers/abstract/messagingAuth.service';
+import { ConversationHandlerBuilderService } from 'src/chat21-core/providers/abstract/conversation-handler-builder.service';
+import { ConversationsHandlerService } from 'src/chat21-core/providers/abstract/conversations-handler.service';
+import { ArchivedConversationsHandlerService } from 'src/chat21-core/providers/abstract/archivedconversations-handler.service';
+import { ConversationHandlerService } from 'src/chat21-core/providers/abstract/conversation-handler.service';
+import { TypingService } from 'src/chat21-core/providers/abstract/typing.service';
+import { PresenceService } from 'src/chat21-core/providers/abstract/presence.service';
+import { ImageRepoService } from 'src/chat21-core/providers/abstract/image-repo.service';
+import { UploadService } from 'src/chat21-core/providers/abstract/upload.service';
+import { GroupsHandlerService } from 'src/chat21-core/providers/abstract/groups-handler.service';
+import { NotificationsService } from 'src/chat21-core/providers/abstract/notifications.service';
+import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
 
+// FIREBASE
+import { FirebaseInitService } from 'src/chat21-core/providers/firebase/firebase-init-service';
+import { FirebaseAuthService } from 'src/chat21-core/providers/firebase/firebase-auth-service';
+import { FirebaseConversationHandlerBuilderService } from 'src/chat21-core/providers/firebase/firebase-conversation-handler-builder.service';
+import { FirebaseConversationsHandler } from 'src/chat21-core/providers/firebase/firebase-conversations-handler';
+import { FirebaseArchivedConversationsHandler } from 'src/chat21-core/providers/firebase/firebase-archivedconversations-handler';
+import { FirebaseConversationHandler } from 'src/chat21-core/providers/firebase/firebase-conversation-handler';
+import { FirebaseTypingService } from 'src/chat21-core/providers/firebase/firebase-typing.service';
+import { FirebasePresenceService } from 'src/chat21-core/providers/firebase/firebase-presence.service';
+import { FirebaseImageRepoService } from 'src/chat21-core/providers/firebase/firebase-image-repo';
+import { FirebaseUploadService } from 'src/chat21-core/providers/firebase/firebase-upload.service';
+import { FirebaseGroupsHandler } from 'src/chat21-core/providers/firebase/firebase-groups-handler';
+import { FirebaseNotifications } from 'src/chat21-core/providers/firebase/firebase-notifications';
 
-import { SQLitePorter } from '@ionic-native/sqlite-porter/ngx';
-import { SQLite } from '@ionic-native/sqlite/ngx';
+// MQTT
+import { Chat21Service } from 'src/chat21-core/providers/mqtt/chat-service';
+import { MQTTAuthService } from 'src/chat21-core/providers/mqtt/mqtt-auth-service';
+import { MQTTConversationHandlerBuilderService } from 'src/chat21-core/providers/mqtt/mqtt-conversation-handler-builder.service';
+import { MQTTArchivedConversationsHandler } from 'src/chat21-core/providers/mqtt/mqtt-archivedconversations-handler';
+import { MQTTConversationsHandler } from 'src/chat21-core/providers/mqtt/mqtt-conversations-handler';
+import { MQTTConversationHandler } from 'src/chat21-core/providers/mqtt/mqtt-conversation-handler';
+import { MQTTTypingService } from 'src/chat21-core/providers/mqtt/mqtt-typing.service';
+import { MQTTPresenceService } from 'src/chat21-core/providers/mqtt/mqtt-presence.service';
+import { MQTTGroupsHandler } from '../chat21-core/providers/mqtt/mqtt-groups-handler';
+import { MQTTNotifications } from 'src/chat21-core/providers/mqtt/mqtt-notifications';
 
-import { MessagingService } from '../providers/messaging-service';
-import { UserService } from '../providers/user/user';
-import { GroupService } from '../providers/group/group';
-import { AutosizeDirective } from '../directives/autosize/autosize';
-import { DatabaseProvider } from '../providers/database/database';
-import { ChatConversationsHandler } from '../providers/chat-conversations-handler';
-import { ChatArchivedConversationsHandler } from '../providers/chat-archived-conversations-handler';
-import { ChatConversationHandler } from '../providers/chat-conversation-handler';
-import { ChatManager } from '../providers/chat-manager/chat-manager';
-import { ChatContactsSynchronizer } from '../providers/chat-contacts-synchronizer';
+//NATIVE 
+import { NativeUploadService } from 'src/chat21-core/providers/native/native-upload-service';
+import { NativeImageRepoService } from './../chat21-core/providers/native/native-image-repo';
 
+//LOGGER SERVICES
+import { LocalSessionStorage } from 'src/chat21-core/providers/localSessionStorage';
+//APP_STORAGE
+import { AppStorageService } from 'src/chat21-core/providers/abstract/app-storage.service';
+
+// PAGES
+import { ConversationListPageModule } from './pages/conversations-list/conversations-list.module';
+import { ConversationDetailPageModule } from './pages/conversation-detail/conversation-detail.module';
+import { LoginPageModule } from './pages/authentication/login/login.module';
+import { LoaderPreviewPageModule } from './pages/loader-preview/loader-preview.module';
+
+// UTILS
+import { ScrollbarThemeModule } from './utils/scrollbar-theme.directive';
+import { SharedModule } from 'src/app/shared/shared.module';
+import { ConversationInfoModule } from 'src/app/components/conversation-info/conversation-info.module';
 
-import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
-import { TranslateHttpLoader } from '@ngx-translate/http-loader';
-import { HttpClientModule, HttpClient } from '@angular/common/http';
-import { TiledeskConversationProvider } from '../providers/tiledesk-conversation/tiledesk-conversation';
-import { AppConfigProvider } from '../providers/app-config/app-config';
-import { CannedResponsesServiceProvider } from '../providers/canned-responses-service/canned-responses-service';
 
+// Directives
+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) {
   return new TranslateHttpLoader(http, './assets/i18n/', '.json');
+
+}
+
+export function authenticationFactory(http: HttpClient, appConfig: AppConfigProvider, chat21Service: Chat21Service, appSorage: AppStorageService, network: Network, connectionService: ConnectionService) {
+  const config = appConfig.getConfig()
+  if (config.chatEngine === CHAT_ENGINE_MQTT) {
+
+    chat21Service.config = config.chat21Config;
+    chat21Service.initChat();
+
+    const auth = new MQTTAuthService(http, chat21Service, appSorage);
+
+    auth.setBaseUrl(appConfig.getConfig().apiUrl);
+
+    if (config.pushEngine = PUSH_ENGINE_MQTT) {
+      // FOR PUSH NOTIFICATIONS INIT FIREBASE APP
+      FirebaseInitService.initFirebase(config.firebaseConfig);
+    }
+
+    return auth
+  } else {
+
+    FirebaseInitService.initFirebase(config.firebaseConfig)
+    // console.log('[APP-MOD] FirebaseInitService config ', config)
+    const auth = new FirebaseAuthService(http, network, connectionService);
+    auth.setBaseUrl(config.apiUrl)
+
+    return auth
+  }
+}
+
+export function conversationsHandlerFactory(chat21Service: Chat21Service, httpClient: HttpClient, appConfig: AppConfigProvider) {
+
+  const config = appConfig.getConfig()
+  if (config.chatEngine === CHAT_ENGINE_MQTT) {
+    return new MQTTConversationsHandler(chat21Service);
+  } else {
+    return new FirebaseConversationsHandler(httpClient, appConfig);
+  }
+}
+
+export function archivedConversationsHandlerFactory(chat21Service: Chat21Service, appConfig: AppConfigProvider) {
+  const config = appConfig.getConfig()
+  if (config.chatEngine === CHAT_ENGINE_MQTT) {
+    return new MQTTArchivedConversationsHandler(chat21Service);
+  } else {
+    return new FirebaseArchivedConversationsHandler();
+  }
+}
+
+export function conversationHandlerBuilderFactory(chat21Service: Chat21Service, appConfig: AppConfigProvider) {
+  const config = appConfig.getConfig()
+  if (config.chatEngine === CHAT_ENGINE_MQTT) {
+    return new MQTTConversationHandlerBuilderService(chat21Service);
+  } else {
+    return new FirebaseConversationHandlerBuilderService();
+  }
+}
+
+export function conversationHandlerFactory(chat21Service: Chat21Service, appConfig: AppConfigProvider) {
+  const config = appConfig.getConfig()
+  if (config.chatEngine === CHAT_ENGINE_MQTT) {
+    return new MQTTConversationHandler(chat21Service, false);
+  } else {
+    return new FirebaseConversationHandler(false);
+  }
+}
+
+export function groupsHandlerFactory(http: HttpClient, chat21Service: Chat21Service, appConfig: AppConfigProvider) {
+  const config = appConfig.getConfig()
+  if (config.chatEngine === CHAT_ENGINE_MQTT) {
+    return new MQTTGroupsHandler(chat21Service)
+  } else {
+    return new FirebaseGroupsHandler(http, appConfig);
+  }
+}
+
+export function typingFactory(appConfig: AppConfigProvider) {
+  const config = appConfig.getConfig()
+  if (config.chatEngine === CHAT_ENGINE_MQTT) {
+    return new MQTTTypingService();
+  } else {
+    return new FirebaseTypingService();
+  }
+}
+
+export function presenceFactory(appConfig: AppConfigProvider) {
+  const config = appConfig.getConfig()
+  if (config.chatEngine === CHAT_ENGINE_MQTT) {
+    return new MQTTPresenceService();
+  } else {
+    return new FirebasePresenceService();
+  }
+}
+
+export function imageRepoFactory(appConfig: AppConfigProvider) {
+
+  const config = appConfig.getConfig()
+  if (config.uploadEngine === UPLOAD_ENGINE_NATIVE) {
+    const imageService = new NativeImageRepoService()
+    imageService.setImageBaseUrl(config.baseImageUrl)
+    return imageService
+  } else {
+    const imageService = new FirebaseImageRepoService();
+    FirebaseInitService.initFirebase(config.firebaseConfig)
+    imageService.setImageBaseUrl(config.baseImageUrl)
+    return imageService
+  }
 }
 
+export function uploadFactory(http: HttpClient, appConfig: AppConfigProvider, appStorage: AppStorageService) {
+
+  const config = appConfig.getConfig()
+  if (config.uploadEngine === UPLOAD_ENGINE_NATIVE) {
+    const nativeUploadService = new NativeUploadService(http, appStorage)
+    nativeUploadService.setBaseUrl(config.apiUrl)
+    return nativeUploadService
+  } else {
+    return new FirebaseUploadService();
+  }
+}
+
+export function notificationsServiceFactory(appConfig: AppConfigProvider, chat21Service: Chat21Service) {
+  const config = appConfig.getConfig()
+  if (config.pushEngine === PUSH_ENGINE_FIREBASE) {
+    return new FirebaseNotifications();
+  } else if (config.pushEngine === PUSH_ENGINE_MQTT) {
+    return new MQTTNotifications(chat21Service);
+  } else {
+    return;
+  }
+}
 
-const appInitializerFn = (appConfig: AppConfigProvider) => {
+const appInitializerFn = (appConfig: AppConfigProvider, logger: NGXLogger) => {
   return () => {
+    let customLogger = new CustomLogger(logger)
+    LoggerInstance.setInstance(customLogger)
     if (environment.remoteConfig) {
-      console.log('environment.remoteConfig: ', environment.remoteConfig);
       return appConfig.loadAppConfig();
     }
   };
 };
 
-
 @NgModule({
   declarations: [
-    MyApp,
-    UsersPage,
-    //UserDetailsPage,
-    LoginPage,
-    RegisterPage,
-    ResetpwdPage,
-    ProfilePage,
-    ListaConversazioniPage,
-    DettaglioConversazionePage,
-    PlaceholderPage,
-    PopoverPage,
-    PopoverProfilePage,
-    UpdateImageProfilePage,
-    AutosizeDirective,
-    InfoConversationPage,
-    InfoUserPage,
-    InfoMessagePage,
-    InfoAdvancedPage,
-    ArchivedConversationsPage,
+    AppComponent,
+  ],
+  entryComponents: [
   ],
   imports: [
     BrowserModule,
-    HttpModule,
+    FormsModule,
+    ReactiveFormsModule,
+    IonicModule.forRoot(),
+    AppRoutingModule,
     HttpClientModule,
+    LoginPageModule,
+    ConversationListPageModule,
+    ConversationDetailPageModule,
+    UnassignedConversationsPageModule,
     TranslateModule.forRoot({
       loader: {
         provide: TranslateLoader,
@@ -117,41 +267,21 @@ const appInitializerFn = (appConfig: AppConfigProvider) => {
         deps: [HttpClient]
       }
     }),
-    LinkyModule,
-    IonicModule.forRoot(MyApp,{
-      appConfig: {
-        tenant:"tilechat"
-      }
+    LoggerModule.forRoot({
+      level: NgxLoggerLevel.DEBUG,
+      serverLogLevel: NgxLoggerLevel.ERROR,
+      timestampFormat: 'HH:mm:ss.SSS',
+      enableSourceMaps: false,
+      colorScheme: ['purple', 'yellow', 'gray', 'gray', 'red', 'red', 'red'],
+      serverLoggingUrl: 'https://tiledesk-server-pre.herokuapp.com/logs'
     }),
-    IonicStorageModule.forRoot({
-      name: "tilechat",
-      storeName: 'settings',
-      driverOrder: ['indexeddb','sqlite', 'websql', 'indexeddb', 'localstorage']
-    })
-    // AngularFireModule.initializeApp(this.firebaseConfig)
-    // AngularFireDatabaseModule,
-    // AngularFireAuthModule
-  ],
-  bootstrap: [IonicApp],
-  entryComponents: [
-    MyApp,
-    UsersPage,
-    LoginPage,
-    RegisterPage,
-    ResetpwdPage,
-    ProfilePage,
-    ListaConversazioniPage,
-    DettaglioConversazionePage,
-    PlaceholderPage,
-    PopoverPage,
-    PopoverProfilePage,
-    UpdateImageProfilePage,
-    InfoConversationPage,
-    InfoUserPage,
-    InfoMessagePage,
-    InfoAdvancedPage,
-    ArchivedConversationsPage
+    ScrollbarThemeModule,
+    SharedModule,
+    ConversationInfoModule,
+    NgxLinkifyjsModule.forRoot(),
+    LoaderPreviewPageModule
   ],
+  bootstrap: [AppComponent],
 
   providers: [
     AppConfigProvider, // https://juristr.com/blog/2018/01/ng-app-runtime-config/
@@ -159,29 +289,78 @@ const appInitializerFn = (appConfig: AppConfigProvider) => {
       provide: APP_INITIALIZER,
       useFactory: appInitializerFn,
       multi: true,
+      deps: [AppConfigProvider, NGXLogger]
+    },
+    {
+      provide: MessagingAuthService,
+      useFactory: authenticationFactory,
+      deps: [HttpClient, AppConfigProvider, Chat21Service, AppStorageService, Network, ConnectionService]
+    },
+    {
+      provide: PresenceService,
+      useFactory: presenceFactory,
       deps: [AppConfigProvider]
     },
-    //ApplicationContext,
+    {
+      provide: TypingService,
+      useFactory: typingFactory,
+      deps: [AppConfigProvider]
+    },
+    {
+      provide: UploadService,
+      useFactory: uploadFactory,
+      deps: [HttpClient, AppConfigProvider, AppStorageService]
+    },
+    {
+      provide: ConversationsHandlerService,
+      useFactory: conversationsHandlerFactory,
+      deps: [Chat21Service, HttpClient, AppConfigProvider]
+    },
+    {
+      provide: ArchivedConversationsHandlerService,
+      useFactory: archivedConversationsHandlerFactory,
+      deps: [Chat21Service, AppConfigProvider]
+    },
+    {
+      provide: ConversationHandlerService,
+      useFactory: conversationHandlerFactory,
+      deps: [Chat21Service, AppConfigProvider]
+    },
+    {
+      provide: GroupsHandlerService,
+      useFactory: groupsHandlerFactory,
+      deps: [HttpClient, Chat21Service, AppConfigProvider]
+    },
+
+    {
+      provide: ImageRepoService,
+      useFactory: imageRepoFactory,
+      deps: [AppConfigProvider]
+    },
+    {
+      provide: ConversationHandlerBuilderService,
+      useFactory: conversationHandlerBuilderFactory,
+      deps: [Chat21Service, AppConfigProvider]
+    },
+    {
+      provide: NotificationsService,
+      useFactory: notificationsServiceFactory,
+      deps: [AppConfigProvider, Chat21Service]
+    },
+    {
+      provide: AppStorageService,
+      useClass: LocalSessionStorage
+    },
     StatusBar,
     SplashScreen,
-    {provide: ErrorHandler, useClass: IonicErrorHandler},
-    DatabaseProvider,
-    SQLitePorter,
-    SQLite,
-    AuthService,
-    ChatPresenceHandler,
-    NavProxyService,
-    MessagingService,
-    UserService,
-    UploadService,
-    ChatManager,
-    ChatConversationsHandler,
-    ChatArchivedConversationsHandler,
-    ChatConversationHandler,
-    ChatContactsSynchronizer,
-    GroupService,
-    TiledeskConversationProvider,
-    CannedResponsesServiceProvider
+    Keyboard,
+    Network,
+    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
+    EventsService,
+    Chooser,
+    Chat21Service,
+    WebSocketJs
   ]
 })
-export class AppModule {}
+export class AppModule { }
+

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

@@ -0,0 +1,143 @@
+<div class="c21-body" (click)="hideMenuOption()">
+
+  <div class="c21-body-container">
+  
+    <div class="c21-body-content" tabindex="1520" aria-label=" messaggi della conversazione: ">
+  
+      <!-- CONTENT !isNewConversation && [class.active]="isShowSpinner"  -->
+      <span *ngIf="messages && this.messages.length === 0">
+        <div class="chat21-spinner active" id="chat21-spinner">
+            <div class="chat21-bounce1" [ngStyle]="{'background-color': stylesMap.get('themeColor')}"></div>
+            <div class="chat21-bounce2" [ngStyle]="{'background-color': stylesMap.get('themeColor')}"></div>
+            <div class="chat21-bounce3" [ngStyle]="{'background-color': stylesMap.get('themeColor')}"></div>
+            <span>{{translationMap?.get('LABEL_LOADING')}}</span>
+        </div>
+      </span>
+      
+    
+      <div id="chat21-sheet-content" class="chat21-sheet-content">
+          <div class="chat21-conversation-parts-container">
+              <div #scrollMe id="scroll-me" (scroll)="onScroll($event)">
+    
+                  <div id="{{idDivScroll}}" class="c21-contentScroll" > <!-- (resized)="onResized($event)" -->
+                      <div *ngFor="let message of messages; let last = last; let i = index" tabindex="1521" class="rowMsg">
+    
+                          <!-- message SENDER:: -->
+                          <div role="messaggio" *ngIf="message.sender == senderId;" class="msg_container base_sent">
+                          
+                            <!--backgroundColor non viene ancora usato -->
+                            <tiledeskwidget-bubble-message class="messages msg_sent slide-in-right"
+                              [ngClass]="{'button-in-msg' : message?.metadata && message?.metadata?.button}"
+                              [message]="message"
+                              [textColor]="'col-msg-sent'"
+                              (onBeforeMessageRender)="returnOnBeforeMessageRender($event)"
+                              (onAfterMessageRender)="returnOnAfterMessageRender($event)">
+                            </tiledeskwidget-bubble-message>
+
+                              <!-- icon status message -->
+                            <tiledeskwidget-return-receipt class="slide-in-right"
+                              [status]="message?.status">
+                            </tiledeskwidget-return-receipt>
+
+                          </div>
+    
+    
+                          <!-- message RECIPIENT:: -->
+                          <div role="messaggio" *ngIf="message.sender != senderId;" class="message_sender_fullname slide-in-left">{{message?.sender_fullname}}</div>
+                          <div role="messaggio" *ngIf="message.sender != senderId;" class="msg_container base_receive">
+                            
+                            <!-- <tiledeskwidget-avatar-image class="slide-in-left"  
+                                [senderID]="message.sender"
+                                [senderFullname]="message.sender_fullname"
+                                [baseLocation]="baseLocation">
+                            </tiledeskwidget-avatar-image> -->
+
+                            <!--backgroundColor non viene ancora usato -->
+                            <tiledeskwidget-bubble-message class="messages msg_receive slide-in-left"
+                              [message]="message"
+                              [textColor]="'black'"
+                              (onBeforeMessageRender)="returnOnBeforeMessageRender($event)"
+                              (onAfterMessageRender)="returnOnAfterMessageRender($event)">
+                            </tiledeskwidget-bubble-message>
+
+                          </div>
+                          
+                          <!-- <div role="messaggio" *ngIf="message.sender != senderId;" class="msg_container base_receive slide-in-left">
+                              
+                              <div class="messages msg_receive" [class.emoticon]="message.emoticon">
+                  
+                                <div>
+
+                                    <tiledeskwidget-image *ngIf="message.type == 'image' && message.metadata"
+                                      [metadata]="message.metadata"
+                                      [width]="getMetadataSize(message.metadata).width"
+                                      [height]="getMetadataSize(message.metadata).height">
+                                    </tiledeskwidget-image>
+  
+                                    <tiledeskwidget-frame *ngIf="message.type == 'frame' && message.metadata"
+                                      [metadata]="message.metadata"
+                                      [width]="getMetadataSize(message.metadata).width"
+                                      [height]="getMetadataSize(message.metadata).height">
+                                    </tiledeskwidget-frame>
+
+                                    <!- - <div *ngIf="message.type == 'frame' && message.metadata"   [ngStyle] = "{ 'max-width': '100%', 'width': message.metadata.width, 'height': message.metadata.height }">
+                                        <iframe width = "100%" height = "100%" style= "border:none;" [src] = "message.metadata.src" ></iframe>
+                                    </div> -- >
+                                   
+  
+                                    <! -- message type:: text - ->
+                                    <! -- <div *ngIf="message.type == 'text';">  {{message.timestamp  | amTimeAgo}}- ->
+                                    <div *ngIf="message.text" [tooltip]="timeTooltipRight" [options]="tooltipOptions" placement="right" content-type="template" (click)="handleTooltipEvents($event)">
+                                        <ng-template #timeTooltipRight>
+                                            <span>{{message.timestamp  | amTimeAgo}}</span>
+                                        </ng-template>
+
+                                        <tiledeskwidget-text
+                                              [text]="message.text"
+                                              [color]="'black'"
+                                              (onBeforeMessageRender)="returnOnBeforeMessageRender($event)"
+                                              (onAfterMessageRender)="returnOnAfterMessageRender($event)">
+                                        </tiledeskwidget-text>
+
+                                    </div>
+                                </div>
+  
+                            </div>
+    
+                          </div> -->
+    
+    
+                          <div class="time slide-in-left" [ngClass]="{'sender' : message?.sender == senderId}">
+                              <time #timeTooltip *ngIf="message?.sender!=='' && message?.timestamp !== '{.sv: timestamp}'" >{{message?.timestamp  | amTimeAgo}} </time>
+                          </div>
+    
+                          <!-- message INFO/SUPPORT:: -->
+                          <!-- <div *ngIf=" message.attributes['subtype'] === 'info/support'" class="msg_info_container">
+                            <tiledeskwidget-info-message class="messages"
+                                [message]="message">
+                            </tiledeskwidget-info-message>
+                          </div> -->
+    
+                          <!-- message type:: button &&  -->
+                          <div *ngIf="message?.attributes && message?.attributes?.attachment " class="slide-in-left" > 
+                              <tiledeskwidget-message-attachment 
+                                  style="height: 100%; display: block;"
+                                  [message]="message"
+                                  [isLastMessage] = "isLastMessage(message?.uid)"
+                                  [stylesMap]="stylesMap"
+                                  (onAttachmentButtonClicked)="returnOnAttachmentButtonClicked($event)">
+                              </tiledeskwidget-message-attachment>
+                          </div>
+    
+                      </div>
+                  </div>
+              </div>
+          </div>
+      
+      </div>
+    </div>  
+  </div>
+
+</div>
+
+