@chat21/chat21-ionic 3.0.80 → 3.0.81-rc.2

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

@@ -4,6 +4,10 @@ ion-header {
   border-bottom-style: solid;
   border-color: var(--light-gray);
   border-bottom-width: thin;
+  &:not(.mobile){
+    border: none;
+    background: var(--list-bkg-color);
+  }
 }
 
 ion-content {
@@ -11,6 +15,9 @@ ion-content {
   --offset-bottom: auto!important;
   --overflow: hidden;
   overflow: scroll;
+  &:not(.mobile){
+    background: var(--list-bkg-color);
+  }
 
   &::-webkit-scrollbar {
     width: 6px;
@@ -40,10 +47,11 @@ ion-list {
   list-style-type: none;
   margin: 0;
   padding: 0;
+  background: transparent;
 
   ion-item {
     cursor: pointer;
-    height: 64px;
+    // height: 64px;
     position: relative;
     display: flex;
     text-decoration: none;
@@ -51,6 +59,7 @@ ion-list {
     padding-right: 8px;
     --padding-start: 0;
     --inner-padding-end: 0;
+    --background: transparent;
     .selected {
       border-radius: 10px;
       padding-left: 8px;
@@ -324,7 +333,7 @@ ion-list {
   padding-left: 0px !important ;
   padding-right: 0px !important;
   // height: 55px !important;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  // border-bottom: 1px solid rgba(0, 0, 0, 0.05);
   --background-hover: #ffffff;
   cursor:default !important;
 }

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

@@ -92,6 +92,7 @@ export class ConversationListPage implements OnInit {
   public displayNewConvsItem: boolean = true
   public archiveActionNotAllowed: boolean = false
 
+  public isMobile: boolean = false;
   public isInitialized: boolean = false;
 
   tooltipOptions = {
@@ -124,6 +125,7 @@ export class ConversationListPage implements OnInit {
     private networkService: NetworkService,
     private appStorageService: AppStorageService
   ) {
+    this.checkPlatform();
     this.listenToAppCompConvsLengthOnInitConvs()
     this.listenToAppIsInitialized()
     this.listenToLogoutEvent()
@@ -136,6 +138,16 @@ 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);
@@ -401,7 +413,6 @@ export class ConversationListPage implements OnInit {
     })
   }
 
-
   listenGoOnline() {
     this.events.subscribe('go:online', (goonline) => {
       this.logger.info('[CONVS-LIST-PAGE] - listen To go:online - goonline',goonline)
@@ -492,11 +503,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)
@@ -515,22 +526,6 @@ 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
@@ -646,7 +641,7 @@ export class ConversationListPage implements OnInit {
    * ::: setUidConvSelected :::
    */
   setUidConvSelected(uidConvSelected: string, conversationType?: string) {
-    this.logger.log('[CONVS-LIST-PAGE] setuidCOnvSelected', uidConvSelected)
+    this.logger.log('[CONVS-LIST-PAGE] setuidCOnvSelected', uidConvSelected, conversationType)
     this.uidConvSelected = uidConvSelected
     // this.conversationsHandlerService.uidConvSelected = uidConvSelected;
     if (uidConvSelected) {
@@ -677,6 +672,7 @@ export class ConversationListPage implements OnInit {
       this.navigateByUrl('active', conversation.uid)
       this.conversationsHandlerService.uidConvSelected = conversation.uid
       this.logger.log('[CONVS-LIST-PAGE] onConversationSelected active conversation.uid ', conversation.uid)
+      this.events.publish('convList:onConversationSelected', conversation)
     }
   }
 
@@ -744,7 +740,14 @@ 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)
     // }
@@ -821,6 +824,7 @@ export class ConversationListPage implements OnInit {
     if (checkPlatformIsMobile()) {
       presentModal(this.modalController, ContactsDirectoryPage, {
         token: TOKEN,
+        isMobile: this.isMobile
       })
     } else {
       this.navService.push(ContactsDirectoryPage, { token: TOKEN })
@@ -1023,7 +1027,6 @@ export class ConversationListPage implements OnInit {
       } 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,3 +1,4 @@
+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';
@@ -38,6 +39,7 @@ 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,
@@ -181,19 +183,17 @@ 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.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);
-      });
+    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);
+    });
   }
 
   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 color="primary" (click)="onSendMessage()">
+    <ion-fab-button (click)="onSendMessage()">
       <ion-icon name="send"></ion-icon>
     </ion-fab-button>
   </ion-fab>

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

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

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

@@ -1,5 +1,4 @@
-import {
-  Component, OnInit, Input, ViewChild, ElementRef,  HostListener, AfterViewInit} from '@angular/core'
+import {Component, OnInit, Input, ViewChild, ElementRef,  HostListener, AfterViewInit} from '@angular/core'
 import { TYPE_MSG_IMAGE } from 'src/chat21-core/utils/constants'
 import { ModalController } from '@ionic/angular'
 import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'

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

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

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

@@ -1,5 +1,5 @@
 <ion-header>
-  <ion-toolbar>
+  <ion-toolbar [class.mobile]="isMobile">
     <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,3 +1,45 @@
+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,6 +16,7 @@ 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,6 +43,32 @@ 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/projects/projects.service.spec.ts

@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ProjectsService } from './projects.service';
+
+describe('ProjectsService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: ProjectsService = TestBed.get(ProjectsService);
+    expect(service).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,43 @@
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { map } from 'rxjs/operators';
+import { Project } from 'src/chat21-core/models/projects';
+import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
+import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
+import { AppConfigProvider } from '../app-config';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ProjectsService {
+
+  private apiUrl: string;
+  private logger: LoggerService = LoggerInstance.getInstance();
+
+  constructor(
+    public http: HttpClient,
+    public appConfigProvider: AppConfigProvider
+  ) {
+   
+    this.logger.log('[PROJECTS-SERVICE] HELLO !');
+    this.apiUrl = appConfigProvider.getConfig().apiUrl;
+    this.logger.log('[PROJECTS-SERVICE] apiUrl ', this.apiUrl);
+  }
+
+  public getProjects(token: string) {
+    const url = this.apiUrl  + "projects/";
+    this.logger.log('[PROJECTS-SERVICE] getProjects - URL ', url);
+
+    const httpOptions = {
+      headers: new HttpHeaders({
+        'Content-Type': 'application/json',
+        Authorization: token
+      })
+    };
+    
+    return this.http.get(url, httpOptions).pipe(map((res: Project[]) => {
+        this.logger.log('[PROJECTS-SERVICE] getProjects - RES ', res);
+        return res
+    }))
+  }
+}

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

@@ -40,7 +40,7 @@ export class TiledeskService {
     // console.log('CLOUD FUNCT CLOSE SUPPORT GROUP REQUEST BODY ', body);
     // https://tiledesk-server-pre.herokuapp.com/
     // const url = 'https://tiledesk-server-pre.herokuapp.com/' + this.project_id + '/requests/' + group_id + '/close';
-    const url = this.apiUrl + projectid + '/requests/' + supportgroupid + '/close';
+    const url = this.apiUrl + projectid + '/requests/' + supportgroupid + '/close'+'?forceArchive=true';
 
     this.logger.log('[TILEDESK-SERVICE] - closeSupportGroup URL ', url);
     return this.http.put(url, body, httpOptions).pipe(map((res: any) => {
@@ -252,31 +252,7 @@ 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,32 +21,29 @@ import { CommonModule } from '@angular/common';
 import { IonicModule } from '@ionic/angular';
 
 import { AvatarProfileComponent } from 'src/app/components/utils/avatar-profile/avatar-profile.component';
-import { DdpHeaderComponent } from 'src/app/components/ddp-header/ddp-header.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 { 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 '../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 { 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 { TooltipModule, TooltipOptions } from 'ng2-tooltip-directive';
-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 { 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 { DefaultTooltipOptions } from 'src/chat21-core/utils/utils';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
@@ -59,12 +56,13 @@ import { SafeHtmlPipe } from '../directives/safe-html.pipe';
   declarations: [
     // MessageTextAreaComponent,
     AvatarProfileComponent,
-    DdpHeaderComponent,
+    HeaderConversationsList,
     UserPresenceComponent,
     UserTypingComponent,
     ListConversationsComponent,
     IonListConversationsComponent,
     ImageViewerComponent,
+    NavbarComponent,
     SidebarComponent,
     SidebarUserDetailsComponent,
     ProjectItemComponent,
@@ -82,10 +80,6 @@ import { SafeHtmlPipe } from '../directives/safe-html.pipe';
     ReturnReceiptComponent,
     TextComponent,
     HtmlComponent,
-    BubbleDayMessageComponent,
-    BubbleSystemMessageComponent,
-    BubbleMyMessageComponent,
-    BubbleOthersMessageComponent,
     InfoContentComponent,
     InfoSupportGroupComponent,
     InfoDirectComponent,
@@ -95,15 +89,16 @@ import { SafeHtmlPipe } from '../directives/safe-html.pipe';
     AutofocusDirective,
     HtmlEntitiesEncodePipe,
     SafeHtmlPipe,
-    OptionHeaderComponent,
+    HeaderConversationsListArchived,
     NetworkOfflineComponent
   ],
   exports: [
     // MessageTextAreaComponent,
     AutofocusDirective,
     AvatarProfileComponent,
-    DdpHeaderComponent,
+    HeaderConversationsList,
     ImageViewerComponent,
+    NavbarComponent,
     SidebarComponent,
     SidebarUserDetailsComponent,
     ProjectItemComponent,
@@ -123,15 +118,11 @@ import { SafeHtmlPipe } from '../directives/safe-html.pipe';
     InfoMessageComponent,
     ReturnReceiptComponent,
     TextComponent,
-    BubbleDayMessageComponent,
-    BubbleSystemMessageComponent,
-    BubbleMyMessageComponent,
-    BubbleOthersMessageComponent,
     InfoContentComponent,
     InfoSupportGroupComponent,
     InfoDirectComponent,
     InfoGroupComponent,
-    OptionHeaderComponent,
+    HeaderConversationsListArchived,
     NetworkOfflineComponent
 
   ],