@chat21/chat21-ionic 3.0.79-rc.3 → 3.0.79

package/src/app/pages/conversations-list/conversations-list.page.ts

@@ -92,15 +92,15 @@ export class ConversationListPage implements OnInit {
   public displayNewConvsItem: boolean = true
   public archiveActionNotAllowed: boolean = false
 
-  public isMobile: boolean = false;
+  public isInitialized: boolean = false;
 
   tooltipOptions = {
     'show-delay': 1500,
     'tooltip-class': 'chat-tooltip',
-    theme: 'light',
-    shadow: false,
+    'theme': 'light',
+    'shadow': false,
     'hide-delay-mobile': 0,
-    hideDelayAfterClick: 3000,
+    'hideDelayAfterClick': 3000,
     'hide-delay': 200,
   }
 
@@ -124,8 +124,8 @@ export class ConversationListPage implements OnInit {
     private networkService: NetworkService,
     private appStorageService: AppStorageService
   ) {
-    this.checkPlatform();
     this.listenToAppCompConvsLengthOnInitConvs()
+    this.listenToAppIsInitialized()
     this.listenToLogoutEvent()
     this.listenGoOnline()
     this.listenGoOffline()
@@ -136,16 +136,6 @@ export class ConversationListPage implements OnInit {
     this.listenToCloseConvFromHeaderConversation()
   }
 
-  private checkPlatform(){
-    if (checkPlatformIsMobile()) {
-      this.isMobile = true
-      this.logger.log('[CONVS-LIST-PAGE] - initialize -> checkPlatformIsMobile isMobile? ', this.isMobile)
-    } else {
-      this.isMobile = false
-      this.logger.log('[CONVS-LIST-PAGE] - initialize -> checkPlatformIsMobile isMobile? ', this.isMobile)
-    }
-  }
-
   listenSupportConvIdHasChanged() {
     this.events.subscribe('supportconvid:haschanged', (IDConv) => {
       // console.log('[CONVS-LIST-PAGE] - listen To convid:haschanged - convId', IDConv);
@@ -404,6 +394,14 @@ export class ConversationListPage implements OnInit {
     })
   }
 
+  listenToAppIsInitialized(){
+    this.events.subscribe( 'appComp:appIsInitialized', (isInitialized) => {
+      this.logger.log( '[CONVS-LIST-PAGE]-CONVS isInitialized', isInitialized)
+      this.isInitialized = isInitialized
+    })
+  }
+
+
   listenGoOnline() {
     this.events.subscribe('go:online', (goonline) => {
       this.logger.info('[CONVS-LIST-PAGE] - listen To go:online - goonline',goonline)
@@ -480,7 +478,7 @@ export class ConversationListPage implements OnInit {
         if (conversation) {
           this.onImageLoaded(conversation)
           this.onConversationLoaded(conversation)
-          !isDevMode() && conversation.is_new? this.segmentNewConversationAdded(conversation) : null;
+          !isDevMode() && conversation.is_new && this.isInitialized? this.segmentNewConversationAdded(conversation) : null;
         }
     })
 
@@ -494,11 +492,11 @@ export class ConversationListPage implements OnInit {
     })
 
     this.conversationsHandlerService.conversationRemoved.subscribe((conversation: ConversationModel) => {
-        this.logger.log('[CONVS-LIST-PAGE] ***** conversationsRemoved *****',conversation)
+        // this.logger.log('[CONVS-LIST-PAGE] ***** conversationsRemoved *****',conversation)
     })
 
     this.archivedConversationsHandlerService.archivedConversationAdded.subscribe((conversation: ConversationModel) => {
-        this.logger.log('[CONVS-LIST-PAGE] ***** archivedConversationAdded *****',conversation)
+        // this.logger.log('[CONVS-LIST-PAGE] ***** archivedConversationAdded *****',conversation)
         // that.conversationsChanged(conversations);
         if (conversation) {
           this.onImageLoaded(conversation)
@@ -517,6 +515,22 @@ export class ConversationListPage implements OnInit {
     this.logger.log('[CONVS-LIST-PAGE] - subscribeLoggedUserLogout uidConvSelected ',this.uidConvSelected)
   }
 
+  // ------------------------------------------------------------------------------------
+  // @ SUBSCRIBE TO CONVERSATION CHANGED  ??????????? SEEMS NOT USED ?????????????????
+  // ------------------------------------------------------------------------------------
+  conversationsChanged = (conversations: ConversationModel[]) => {
+    this.numberOpenConv = this.conversationsHandlerService.countIsNew()
+    this.logger.log('[CONVS-LIST-PAGE] - conversationsChanged - NUMB OF CONVERSATIONS: ',this.numberOpenConv)
+    // console.log('conversationsChanged »»»»»»»»» uidConvSelected', that.conversations[0], that.uidConvSelected);
+    if (this.uidConvSelected && !this.conversationSelected) {
+      const conversationSelected = this.conversations.find((item) => item.uid === this.uidConvSelected)
+      if (conversationSelected) {
+        this.conversationSelected = conversationSelected
+        this.setUidConvSelected(this.uidConvSelected)
+      }
+    }
+  }
+
   /**
    * ::: subscribeProfileInfoButtonClicked :::
    * evento richiamato quando si seleziona bottone profile-info-modal
@@ -632,7 +646,7 @@ export class ConversationListPage implements OnInit {
    * ::: setUidConvSelected :::
    */
   setUidConvSelected(uidConvSelected: string, conversationType?: string) {
-    this.logger.log('[CONVS-LIST-PAGE] setuidCOnvSelected', uidConvSelected, conversationType)
+    this.logger.log('[CONVS-LIST-PAGE] setuidCOnvSelected', uidConvSelected)
     this.uidConvSelected = uidConvSelected
     // this.conversationsHandlerService.uidConvSelected = uidConvSelected;
     if (uidConvSelected) {
@@ -731,13 +745,6 @@ export class ConversationListPage implements OnInit {
       }
     }
 
-    if(conversation.attributes && conversation.attributes['projectId']){
-      let project = localStorage.getItem(conversation.attributes['projectId'])
-      if(project){
-        project = JSON.parse(project)
-        conversation.attributes.project_name = project['name']
-      }
-    }
     // if(conversation.conversation_with_fullname === 'Guest '){
     //   conversation.conversation_with_fullname = 'guest' + '#' + this.getUUidConversation(conversation.uid)
     // }
@@ -814,7 +821,6 @@ export class ConversationListPage implements OnInit {
     if (checkPlatformIsMobile()) {
       presentModal(this.modalController, ContactsDirectoryPage, {
         token: TOKEN,
-        isMobile: this.isMobile
       })
     } else {
       this.navService.push(ContactsDirectoryPage, { token: TOKEN })
@@ -974,9 +980,9 @@ export class ConversationListPage implements OnInit {
   private segmentNewConversationAdded(conversation: ConversationModel){
     let user = this.tiledeskAuthService.getCurrentUser()
     try {
-      window['analytics'].page("Chat List Conversations Page, Conversation Added", {});
+      window['analytics'].page("Chat List Conversations Page, Agent added to conversation", {});
     } catch (err) {
-      this.logger.error('Event:Conversation Added [page] error', err);
+      this.logger.error('Event:Agent added to conversation [page] error', err);
     }
 
     try {
@@ -986,36 +992,38 @@ export class ConversationListPage implements OnInit {
         logins: 5,
       });
     } catch (err) {
-      this.logger.error('Event:Conversation Added [identify] error', err);
+      this.logger.error('Event:Agent added to conversation [identify] error', err);
     }
 
     try {
-      window['analytics'].track('Conversation Added', {
+      window['analytics'].track('Agent added to conversation', {
         "username": user.firstname + ' ' + user.lastname,
         "userId": user.uid,
         "conversation_id": conversation.uid,
         "channel_type": conversation.channel_type,
         "conversation_with": conversation.conversation_with,
-        "conversation_with_fullname": conversation.conversation_with_fullname,
-        "department_name":(conversation.channel_type !== TYPE_DIRECT)? conversation.attributes.departmentName: null,
-        "department_id":(conversation.channel_type !== TYPE_DIRECT)? conversation.attributes.departmentId: null,
+        "project_id":(conversation.channel_type !== TYPE_DIRECT)? conversation.uid.split('-')[2]: null,
+        "project_name":(conversation.channel_type !== TYPE_DIRECT && conversation.attributes && conversation.attributes.departmentId)? conversation.attributes.departmentId: null,
       },
       {
         "context": {
-          "groupId": (conversation.channel_type !== TYPE_DIRECT)? conversation.attributes.projectId: null
+          "groupId": (conversation.channel_type !== TYPE_DIRECT)? conversation.uid.split('-')[2]: null
         }
       });
     } catch (err) {
-      this.logger.error('Event:Conversation Added [track] error', err);
+      this.logger.error('Event:Agent added to conversation [track] error', err);
     }
 
-    try {
-      window['analytics'].group(conversation.attributes.projectId, {
-        name: (conversation.attributes.project_name)? conversation.attributes.project_name : null,
-        // plan: projectProfileName,
-      });
-    } catch (err) {
-      this.logger.error('Event:Conversation Added [group] error', err);
+    if(conversation.channel_type !== TYPE_DIRECT){
+      try {
+        window['analytics'].group(conversation.uid.split('-')[2], {
+          name: (conversation.attributes && conversation.attributes.project_name)? conversation.attributes.project_name : null,
+          // plan: projectProfileName,
+        });
+      } catch (err) {
+        this.logger.error('Event:Agent added to conversation [group] error', err);
+      }
+
     }
   }
 

package/src/app/pages/create-canned-response/create-canned-response.page.ts

@@ -1,4 +1,3 @@
-import { CannedResponsesService } from 'src/app/services/canned-responses/canned-responses.service';
 import { Component, Input, OnInit } from '@angular/core';
 import { ModalController } from '@ionic/angular';
 import { Validators, FormBuilder, FormGroup, FormControl } from '@angular/forms';
@@ -39,7 +38,6 @@ export class CreateCannedResponsePage implements OnInit {
     private translate: TranslateService,
     public tiledeskAuthService: TiledeskAuthService,
     public tiledeskService: TiledeskService,
-    public cannedResponsesService: CannedResponsesService,
     private menu: MenuController,
     public events: EventsService,
     private route: ActivatedRoute,
@@ -183,17 +181,19 @@ export class CreateCannedResponsePage implements OnInit {
     this.logger.log('[CREATE-CANNED-RES] - CREATE CANNED RESP - MSG ', canned_response_message);
     this.logger.log('[CREATE-CANNED-RES] - CREATE CANNED RESP - TITLE ', canned_response_title);
 
-    this.cannedResponsesService.add(this.tiledeskToken, this.prjctID, canned_response_title.trim(), canned_response_message.trim()).subscribe((responses: any) => {
-      this.logger.log('[CREATE-CANNED-RES] - CREATE CANNED RESP - RES ', responses);
-    }, (error) => {
-      this.logger.error('[CREATE-CANNED-RES]- CREATE CANNED RESP - ERROR  ', error);
-      this.showSpinnerCreateCannedResponse = false;
-    }, () => {
-      this.logger.log('[CREATE-CANNED-RES] - CREATE CANNED RESP * COMPLETE *');
-      this.showSpinnerCreateCannedResponse = false;
-      this.closeModalCreateCannedResponseModal()
-      this.events.publish('newcannedresponse:created', true);
-    });
+    this.tiledeskService.createCannedResponse(canned_response_message.trim(), canned_response_title.trim(), this.prjctID, this.tiledeskToken)
+      .subscribe((responses: any) => {
+        this.logger.log('[CREATE-CANNED-RES] - CREATE CANNED RESP - RES ', responses);
+
+      }, (error) => {
+        this.logger.error('[CREATE-CANNED-RES]- CREATE CANNED RESP - ERROR  ', error);
+        this.showSpinnerCreateCannedResponse = false;
+      }, () => {
+        this.logger.log('[CREATE-CANNED-RES] - CREATE CANNED RESP * COMPLETE *');
+        this.showSpinnerCreateCannedResponse = false;
+        this.closeModalCreateCannedResponseModal()
+        this.events.publish('newcannedresponse:created', true);
+      });
   }
 
   openAddPersonalisationMenu() {

package/src/app/pages/loader-preview/loader-preview.page.html

@@ -55,7 +55,7 @@
 
   <!-- fab placed to the (vertical) center and end -->
   <ion-fab vertical="end" horizontal="end" slot="fixed" class="sendButton">
-    <ion-fab-button (click)="onSendMessage()">
+    <ion-fab-button color="primary" (click)="onSendMessage()">
       <ion-icon name="send"></ion-icon>
     </ion-fab-button>
   </ion-fab>

package/src/app/pages/loader-preview/loader-preview.page.scss

@@ -11,10 +11,6 @@
     transform: translateX(-50%);
 }
 
-ion-fab-button{
-    --background: var(--basic-blue);
-}
-
 .previewSelected {
     width: 100%;
     height: auto;

package/src/app/pages/profile-info/profile-info.page.html

@@ -30,8 +30,10 @@
 
       <div class="user-presence">
         <app-user-presence 
-          [idUser]=loggedUser.uid 
-          [translationMap]=translationMap>
+        [idUser]=loggedUser.uid 
+        [translationMap]=translationMap 
+        [borderColor]=borderColor
+        [fontColor]=fontColor>
         </app-user-presence>
       </div>
 

package/src/app/pages/unassigned-conversations/unassigned-conversations.page.html

@@ -1,5 +1,5 @@
 <ion-header>
-  <ion-toolbar [class.mobile]="isMobile">
+  <ion-toolbar>
     <ion-title *ngIf="callerBtn !== 'pinbtn'" style="font-size: 16px;">
       {{translationMap?.get('UnassignedConversations') }}
     </ion-title>

package/src/app/pages/unassigned-conversations/unassigned-conversations.page.scss

@@ -1,45 +1,3 @@
-ion-toolbar {
-  height: var(--header-height);   
-  &:not(.mobile){
-      --background: var(--list-bkg-color);
-      border: none;
-  }
-  &.mobile{
-      border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-  }
-
-  ion-button{
-      --color: var(--basic-blue);
-  }
-}
-
-ion-content {
-  // overwrite inline styles
-  --overflow: hidden;
-  overflow: scroll;
-  &:not(.mobile){
-    background: var(--list-bkg-color);
-  }
-
-  &::-webkit-scrollbar {
-    width: 6px;
-    height: 8px;
-    display: none;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: #f9f9f9;
-  }
-  &::-webkit-scrollbar-thumb {
-       background-color: #b9b9b9;
-        border-radius: 0px;
-  }
-  &::-webkit-scrollbar-thumb:hover {
-      background-color: #727272;
-  }
-}
-
-
 .ion-content-black-background {
   --background: #2d323e;
 }

package/src/app/pages/unassigned-conversations/unassigned-conversations.page.ts

@@ -16,7 +16,6 @@ export class UnassignedConversationsPage implements OnInit {
 
   @Input() iframe_URL: any;
   @Input() callerBtn: string;
-  @Input() isMobile: boolean;
   // @Input() prjctsxpanel_url: any;
   // @Input() unassigned_convs_url: any;
 

package/src/app/services/canned-responses/canned-responses.service.ts

@@ -43,32 +43,6 @@ export class CannedResponsesService {
     }))
   }
 
-  // -------------------------------------------------------------------------------------
-  // @ Create - Save (POST) new canned response
-  // -------------------------------------------------------------------------------------
-  public add(token: string, projectid: string, title: string, message: string) {
-    const url =  this.apiUrl  + projectid + '/canned/'
-    this.logger.log('[TILEDESK-SERVICE] - CREATE CANNED-RES - URL', url); 
-    
-    const httpOptions = {
-      headers: new HttpHeaders({
-        'Content-Type': 'application/json',
-        Authorization: token
-      })
-    };
-
-    const body = {
-      title: title,
-      text: message
-    }
-
-    return this.http.post(url, JSON.stringify(body), httpOptions).pipe(map((res: any) => {
-      this.logger.log('[TILEDESK-SERVICE] - CREATE CANNED-RES - RES ', res);
-      return res
-    }))
-      
-  }
-
   public edit(token: string, projectid: string, canned: any){
     const cannedResponsesURL = this.apiUrl + projectid + "/canned/"+ canned._id;
     this.logger.log('[CANNED-RESPONSES-SERVICE] editCannedResponses - URL ', cannedResponsesURL);

package/src/app/services/tiledesk/tiledesk.service.ts

@@ -252,7 +252,31 @@ export class TiledeskService {
   }
   
 
-  
+  // -------------------------------------------------------------------------------------
+  // @ Create - Save (POST) new canned response
+  // -------------------------------------------------------------------------------------
+  public createCannedResponse(message: string, title: string, project_id: string, token: string) {
+    this.logger.log('[TILEDESK-SERVICE] - CREATE CANNED-RES - token', token); 
+    const url =  this.apiUrl  + project_id + '/canned/'
+    this.logger.log('[TILEDESK-SERVICE] - CREATE CANNED-RES - URL', url); 
+    
+    const httpOptions = {
+      headers: new HttpHeaders({
+        'Content-Type': 'application/json',
+        Authorization: token
+      })
+    };
+
+    const body = { 'text': message, 'title': title };
+
+    this.logger.log('[TILEDESK-SERVICE] CREATE CANNED-RES - BODY ', body);
+
+    return this.http.post(url, JSON.stringify(body), httpOptions).pipe(map((res: any) => {
+      this.logger.log('[TILEDESK-SERVICE] - CREATE CANNED-RES - RES ', res);
+      return res
+    }))
+      
+  }
 
   // .post(url, JSON.stringify(body), options)
   // .map((res) => res.json());

package/src/app/shared/shared.module.ts

@@ -1,9 +1,9 @@
-import { NavbarComponent } from './../components/navbar/navbar.component';
 import { FormsModule } from '@angular/forms';
 import { NgSelectModule } from '@ng-select/ng-select';
 import { NetworkOfflineComponent } from './../components/network-offline/network-offline.component';
 import { ContactsDirectoryComponent } from './../components/contacts-directory/contacts-directory.component';
 import { HtmlComponent } from './../chatlib/conversation-detail/message/html/html.component';
+import { BubbleOthersMessageComponent } from './../components/conversation-detail/bubble-others-message/bubble-others-message.component';
 
 import { TextComponent } from '../chatlib/conversation-detail/message/text/text.component';
 import { ReturnReceiptComponent } from '../chatlib/conversation-detail/message/return-receipt/return-receipt.component';
@@ -21,29 +21,32 @@ import { CommonModule } from '@angular/common';
 import { IonicModule } from '@ionic/angular';
 
 import { AvatarProfileComponent } from 'src/app/components/utils/avatar-profile/avatar-profile.component';
-import { HeaderConversationsList } from 'src/app/components/conversations-list/header-conversations-list/header-conversations-list.component';
-import { HeaderConversationsListArchived } from 'src/app/components/conversations-list/header-conversations-list-archived/header-conversations-list-archived.component';
+import { DdpHeaderComponent } from 'src/app/components/ddp-header/ddp-header.component';
 
 import { UserPresenceComponent } from 'src/app/components/utils/user-presence/user-presence.component';
 import { UserTypingComponent } from 'src/chat21-core/utils/user-typing/user-typing.component';
 import { ListConversationsComponent } from '../chatlib/list-conversations-component/list-conversations/list-conversations.component';
 import { MomentModule } from 'angular2-moment';
-import { AvatarComponent } from 'src/app/chatlib/conversation-detail/message/avatar/avatar.component';
-import { MarkedPipe } from 'src/app/directives/marked.pipe';
-import { AutofocusDirective } from 'src/app/directives/autofocus.directive';
-import { HtmlEntitiesEncodePipe } from 'src/app/directives/html-entities-encode.pipe';
-import { IonConversationDetailComponent } from 'src/app/chatlib/conversation-detail/ion-conversation-detail/ion-conversation-detail.component';
-import { InfoContentComponent } from 'src/app/components/conversation-info/info-content/info-content.component';
-import { InfoSupportGroupComponent } from 'src/app/components/conversation-info/info-support-group/info-support-group.component';
-import { InfoDirectComponent } from 'src/app/components/conversation-info/info-direct/info-direct.component';
-import { AdvancedInfoAccordionComponent } from 'src/app/components/conversation-info/advanced-info-accordion/advanced-info-accordion.component';
-import { InfoGroupComponent } from 'src/app/components/conversation-info/info-group/info-group.component';
+import { AvatarComponent } from '../chatlib/conversation-detail/message/avatar/avatar.component';
+import { MarkedPipe } from '../directives/marked.pipe';
+import { AutofocusDirective } from '../directives/autofocus.directive';
+import { HtmlEntitiesEncodePipe } from '../directives/html-entities-encode.pipe';
+import { IonConversationDetailComponent } from '../chatlib/conversation-detail/ion-conversation-detail/ion-conversation-detail.component';
+import { BubbleMyMessageComponent } from '../components/conversation-detail/bubble-my-message/bubble-my-message.component';
+import { BubbleDayMessageComponent } from '../components/conversation-detail/bubble-day-message/bubble-day-message.component';
+import { BubbleSystemMessageComponent } from '../components/conversation-detail/bubble-system-message/bubble-system-message.component';
+import { InfoContentComponent } from '../components/conversation-info/info-content/info-content.component';
+import { InfoSupportGroupComponent } from '../components/conversation-info/info-support-group/info-support-group.component';
+import { InfoDirectComponent } from '../components/conversation-info/info-direct/info-direct.component';
+import { AdvancedInfoAccordionComponent } from '../components/conversation-info/advanced-info-accordion/advanced-info-accordion.component';
+import { InfoGroupComponent } from '../components/conversation-info/info-group/info-group.component';
 import { TooltipModule, TooltipOptions } from 'ng2-tooltip-directive';
-import { MessageAttachmentComponent } from 'src/app/chatlib/conversation-detail/message/message-attachment/message-attachment.component';
-import { ImageViewerComponent } from 'src/app/components/image-viewer/image-viewer.component';
-import { SidebarComponent } from 'src/app/components/sidebar/sidebar.component';
-import { SidebarUserDetailsComponent } from 'src/app/components/sidebar-user-details/sidebar-user-details.component';
-import { ProjectItemComponent } from 'src/app/components/project-item/project-item.component';
+import { OptionHeaderComponent } from '../components/conversation-detail/option-header/option-header.component';
+import { MessageAttachmentComponent } from '../chatlib/conversation-detail/message/message-attachment/message-attachment.component';
+import { ImageViewerComponent } from '../components/image-viewer/image-viewer.component';
+import { SidebarComponent } from '../components/sidebar/sidebar.component';
+import { SidebarUserDetailsComponent } from '../components/sidebar-user-details/sidebar-user-details.component';
+import { ProjectItemComponent } from '../components/project-item/project-item.component';
 import { DefaultTooltipOptions } from 'src/chat21-core/utils/utils';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
@@ -56,13 +59,12 @@ import { SafeHtmlPipe } from '../directives/safe-html.pipe';
   declarations: [
     // MessageTextAreaComponent,
     AvatarProfileComponent,
-    HeaderConversationsList,
+    DdpHeaderComponent,
     UserPresenceComponent,
     UserTypingComponent,
     ListConversationsComponent,
     IonListConversationsComponent,
     ImageViewerComponent,
-    NavbarComponent,
     SidebarComponent,
     SidebarUserDetailsComponent,
     ProjectItemComponent,
@@ -80,6 +82,10 @@ import { SafeHtmlPipe } from '../directives/safe-html.pipe';
     ReturnReceiptComponent,
     TextComponent,
     HtmlComponent,
+    BubbleDayMessageComponent,
+    BubbleSystemMessageComponent,
+    BubbleMyMessageComponent,
+    BubbleOthersMessageComponent,
     InfoContentComponent,
     InfoSupportGroupComponent,
     InfoDirectComponent,
@@ -89,16 +95,15 @@ import { SafeHtmlPipe } from '../directives/safe-html.pipe';
     AutofocusDirective,
     HtmlEntitiesEncodePipe,
     SafeHtmlPipe,
-    HeaderConversationsListArchived,
+    OptionHeaderComponent,
     NetworkOfflineComponent
   ],
   exports: [
     // MessageTextAreaComponent,
     AutofocusDirective,
     AvatarProfileComponent,
-    HeaderConversationsList,
+    DdpHeaderComponent,
     ImageViewerComponent,
-    NavbarComponent,
     SidebarComponent,
     SidebarUserDetailsComponent,
     ProjectItemComponent,
@@ -118,11 +123,15 @@ import { SafeHtmlPipe } from '../directives/safe-html.pipe';
     InfoMessageComponent,
     ReturnReceiptComponent,
     TextComponent,
+    BubbleDayMessageComponent,
+    BubbleSystemMessageComponent,
+    BubbleMyMessageComponent,
+    BubbleOthersMessageComponent,
     InfoContentComponent,
     InfoSupportGroupComponent,
     InfoDirectComponent,
     InfoGroupComponent,
-    HeaderConversationsListArchived,
+    OptionHeaderComponent,
     NetworkOfflineComponent
 
   ],