@chat21/chat21-ionic 3.0.60-rc9 → 3.0.61-rc4

package/CHANGELOG.md

@@ -1,5 +1,42 @@
 # chat21-ionic ver 3.0
 
+### 3.0.61-rc4
+- Hides the item showing unassigned conversations in the list of archived conversations
+- Adds in the list of conversations to the "archive" button the tooltip "Resolve" if the conversation is of type "support" and the tooltip "Archive" if the conversation is of type "direct" or "group"
+- Changes all occurrences of the "teammatesButton" environment variable to "writeToButton"
+- Fixes the bug: if the sidebar is visible and the window width is less than 768px, the content of the conversation detail is not completely visible
+- Moves for conversations of type "support" the "Resolve conversation" button from the dropdown menu to the header of the conversation detail
+
+### 3.0.61-rc3
+- Replaces console.log with custom loggers 
+- Fixes the bug: the info support sidebar is no more displayed
+
+### 3.0.61-rc2
+- Fixes the bug: Profile picture in the sidebar does not update when logged in with another user after logging out
+- Bug Fix: in the "info-profile" page avoid the "uid of undefined" error
+- Adds the "user details" sidebar
+- Adds the languages flags images
+- Allows to close the "user details" sidebar by clicking outside it
+- Adds the tooltips to the links of the sidebar
+- Hides the sidebar when the teammate logs out, if the app is on a mobile device and if the environment variable "supportMode" is set to false
+- Hides in the item showing unassigned conversations the button to pin a project if the app is not on a mobile device 
+- Gets in the sidebar the feature tokens from the environment variables
+- Install the "Roboto" font
+- Changes font priority in global.scss: replace "Helvetica Neue" font with "Roboto" font
+- Imports the "Poppins" font family into index.html
+- Adds the "Resolve" tooltip to the "archive" button available in the conversation list
+- Displays the "Resolved Conversations" button and the "Teammates" button in the header of the conversation list  based on how the "teammatesButton" and "archivedButton" environment variables are set
+- Adds "teammatesButton" and "archivedButton" variables to the environments
+- Adds the "TEAMMATES_BUTTON" and the "ARCHIVED_BUTTON" variables to the env.sample file
+- Adds the "teammatesButton" and the "archivedButton" variables to the "chat-config-template.json" file and to "the chat-config.json" file
+- Updates the section "Configuration" of the "README.md" file with the new variables "teammatesButton" and the "archivedButton" 
+
+### 3.0.61-rc1
+- Adds a sidebar that allows navigation to the dashboard
+
+### 3.0.60
+- Deploys in production
+
 ### 3.0.60-rc9
 - Adds the message "All conversations served" in the conversation details section that appears when there are no active conversations
 - Fixes the bug: in the item that displays the number of unassigned conversations the button "fix a project" does not go to the right in mobile mode

package/README.md

@@ -61,6 +61,8 @@ In progress git
         fileUploadAccept:"*/*",
         logLevel":"<YOUR-PREFERRED-LOG-LEVEL>",
         supportMode: false,
+        teammatesButton: false,
+        archivedButton: false,
         firebaseConfig: {
             tenant:"tilechat",
             apiKey: '123ABC..',

package/angular.json

@@ -41,6 +41,8 @@
               "src/chat-config-dev.json"
             ],
             "styles": [
+              "node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
+              "node_modules/roboto-fontface/css/roboto/roboto-fontface.css",
               {
                 "input": "src/theme/variables.scss"
               },

package/env.sample

@@ -3,7 +3,7 @@ DASHBOARD_URL=https://YOUR_DASHBOARD_URL
 WS_URL=wss://YOUR_TILEDESK_SERVER_URL?token=
 WS_URL_RELATIVE=********
 SERVER_BASE_URL=http://localhost:3000/
-FEATURES_TOKEN=CAR:F
+FEATURES_TOKEN=CAR:F-PAY:F-ANA:F-ACT:F-APP:F
 CHAT21_ENGINE=mqtt
 UPLOAD_ENGINE=native
 PUSH_ENGINE=none
@@ -11,6 +11,8 @@ FILE_UPLOAD_ACCEPT=*/*
 TENANT=tilechat
 LOG_LEVEL=INFO
 SUPPORT_MODE=false
+WRITE_TO_BUTTON=false,
+ARCHIVED_BUTTON=false,
 
 # For MQTT Chat Engine
 MQTT_APPID=tilechat

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chat21/chat21-ionic",
-    "version": "3.0.60-rc9",
+    "version": "3.0.61-rc4",
     "author": "Tiledesk SRL",
     "homepage": "https://ionicframework.com/",
     "scripts": {
@@ -13,10 +13,13 @@
     },
     "private": false,
     "dependencies": {
+        "@angular/animations": "^8.2.14",
+        "@angular/cdk": "^8.2.3",
         "@angular/common": "~8.2.14",
         "@angular/core": "~8.2.14",
         "@angular/forms": "~8.2.14",
         "@angular/http": "^7.2.16",
+        "@angular/material": "^8.2.3",
         "@angular/platform-browser": "~8.2.14",
         "@angular/platform-browser-dynamic": "~8.2.14",
         "@angular/router": "~8.2.14",
@@ -59,6 +62,7 @@
         "ngx-logger": "^4.2.1",
         "ngx-perfect-scrollbar": "^9.0.0",
         "perfect-scrollbar": "^1.5.0",
+        "roboto-fontface": "^0.10.0",
         "rxjs": "~6.5.1",
         "tslib": "^1.9.0",
         "zone.js": "~0.9.1"

package/src/app/app.component.html

@@ -1,17 +1,26 @@
 <ion-app>
   <div>
-    <!-- (click)="hideAlert()" -->
+
     <app-image-viewer></app-image-viewer>
+
+    <div class="sidebar" [ngClass]="{'hide-sidebar': IS_ONLINE === false || IS_ON_MOBILE_DEVICE === true || SUPPORT_MODE === false}">
+      <app-sidebar></app-sidebar>
+    </div>
+    
+    <div class="user-details-sidebar" [ngClass]="{'hide-sidebar': IS_ONLINE === false || IS_ON_MOBILE_DEVICE === true || SUPPORT_MODE === false}">
+      <app-sidebar-user-details> </app-sidebar-user-details>
+    </div>
+ 
     <ion-split-pane when="md" contentId="main">
 
-      <ion-nav #sidebarNav [root]="sidebarPage"></ion-nav>
+      <ion-nav #sidebarNav [root]="sidebarPage" [ngClass]="{'sidebar-visible': IS_ONLINE === true && SUPPORT_MODE === true,  'sidebar-hidden': IS_ON_MOBILE_DEVICE === true || SUPPORT_MODE === false}"></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> -->
       <!-- </ion-router-outlet> -->
       <!-- the main content -->
-      <ion-router-outlet id="main" #detailNav animated="false">
+      <ion-router-outlet id="main" #detailNav animated="false" [ngClass]="{'router-outlet-margin-left': platformIs === 'mobile' &&  SUPPORT_MODE === true}">
       </ion-router-outlet>
     </ion-split-pane>
   </div>

package/src/app/app.component.scss

@@ -1,8 +1,24 @@
-.split-pane-md.split-pane-visible > .split-pane-side { 
+.split-pane-md.split-pane-visible > .split-pane-side {
     min-width: 312px;
     display: block; // Safari bug fix
 }
 
+.sidebar-visible {
+    margin-left: 60px;
+}
+
+.sidebar-hidden {
+    margin-left: 0px;
+}
+
+.hide-sidebar {
+    display: none;
+}
+
+.router-outlet-margin-left {
+    left: 60px
+}
+
 // @media (min-width: 768px) {
 //     .split-pane-md.split-pane-visible > .split-pane-side {
 //         min-width: 312px;

package/src/app/app.component.ts

@@ -58,6 +58,7 @@ import * as PACKAGE from 'package.json';
 import { filter } from 'rxjs/operators'
 import { WebSocketJs } from './services/websocket/websocket-js';
 import { Location } from '@angular/common'
+
 // import { filter } from 'rxjs/operators';
 
 @Component({
@@ -77,7 +78,7 @@ export class AppComponent implements OnInit {
   public sidebarPage: any;
   public notificationsEnabled: boolean;
   public zone: NgZone;
-  private platformIs: string;
+  public platformIs: string;
   private doitResize: any;
   private timeModalLogin: any;
   public tenant: string;
@@ -98,7 +99,9 @@ export class AppComponent implements OnInit {
   public missingConnectionToast: any
   public executedInitializeAppByWatchConnection: boolean = false;
   private version: string;
-
+  IS_ONLINE: boolean;
+  IS_ON_MOBILE_DEVICE: boolean;
+  SUPPORT_MODE: boolean;
   // private isOnline: boolean = false;
 
   wsService: WebSocketJs;
@@ -145,11 +148,20 @@ export class AppComponent implements OnInit {
 
     this.saveInStorageNumberOfOpenedChatTab();
     this.listenChatAlreadyOpenWithoutParamsInMobileMode()
-
+    this.isOnMobileDevice()
     // this.listenToUrlChanges();
     // this.getPageState();
   }
 
+  isOnMobileDevice() {
+    this.IS_ON_MOBILE_DEVICE = false;
+    if (/Android|iPhone/i.test(window.navigator.userAgent)) {
+      this.IS_ON_MOBILE_DEVICE = true;
+    }
+    console.log('[APP-COMP] IS_ON_MOBILE_DEVICE', this.IS_ON_MOBILE_DEVICE)
+    return this.IS_ON_MOBILE_DEVICE;
+  }
+
 
 
   listenChatAlreadyOpenWithoutParamsInMobileMode() {
@@ -286,6 +298,13 @@ export class AppComponent implements OnInit {
    */
   ngOnInit() {
     const appconfig = this.appConfigProvider.getConfig();
+    // console.log('[APP-COMP] appconfig', appconfig)
+    if (appconfig && appconfig.supportMode) {
+      this.SUPPORT_MODE = appconfig.supportMode
+      // console.log('[APP-COMP] appconfig > SUPPORT_MODE', this.SUPPORT_MODE)
+    } else {
+      this.SUPPORT_MODE = false;
+    }
     this.persistence = appconfig.authPersistence;
     this.appStorageService.initialize(environment.storage_prefix, this.persistence, '')
     // this.logger.log('[APP-COMP] HELLO ngOnInit !!!!!!!')
@@ -647,7 +666,7 @@ export class AppComponent implements OnInit {
       })
     } else {
       this.logger.warn('[APP-COMP] >>> I AM NOT LOGGED IN <<<')
-
+      this.IS_ONLINE = false;
       // clearTimeout(this.timeModalLogin);
       // this.timeModalLogin = setTimeout(() => {
       if (!this.hadBeenCalledOpenModal) {
@@ -830,10 +849,14 @@ export class AppComponent implements OnInit {
           // const user = this.tiledeskAuthService.getCurrentUser();
           // if (this.isOnline === false) {
           // if (AUTH_STATE_ONLINE) {
+          this.IS_ONLINE = true;
+          // console.log('[APP-COMP] IS_ONLINE', this.IS_ONLINE)
           this.goOnLine();
           // }
         } else if (state === AUTH_STATE_OFFLINE) {
           // this.checkTokenAndGoOffline() //se c'è un tiledeskToken salvato, allora aspetta, altrimenti vai offline
+          this.IS_ONLINE = false;
+          // console.log('[APP-COMP] IS_ONLINE', this.IS_ONLINE)
           this.goOffLine()
         }
       }, error => {

package/src/app/app.module.ts

@@ -96,7 +96,7 @@ 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';
-
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 // FACTORIES
 export function createTranslateLoader(http: HttpClient) {
   return new TranslateHttpLoader(http, './assets/i18n/', '.json');
@@ -251,6 +251,7 @@ const appInitializerFn = (appConfig: AppConfigProvider, logger: NGXLogger) => {
   ],
   imports: [
     BrowserModule,
+    BrowserAnimationsModule,
     FormsModule,
     ReactiveFormsModule,
     IonicModule.forRoot(),

package/src/app/chatlib/list-conversations-component/ion-list-conversations/ion-list-conversations.component.html

@@ -118,12 +118,17 @@
   <ion-note *ngIf="!conversation.archived" class="conversation_time">{{conversation.timestamp | amTimeAgo}}</ion-note>
 
   <ion-buttons slot="end">
-    <ion-button *ngIf="!conversation.archived"
+    <ion-button *ngIf="!conversation.archived" [tooltip]="archiveTooltip"  [options]="tooltip_options" placement="bottom"  content-type="template"
       [ngClass]="{'hide': !isApp, 'button-on-desktop': !isApp, 'button-on-mobile': isApp  }"
       id="{{ 'close_conversation_button' + conversation.uid }}" class="close-conversation-button" ion-button clear
       item-end (click)="closeConversation(conversation);$event.stopPropagation();" padding>
       <ion-icon slot="icon-only" style="display:block;" id="{{ 'close_button_icon' + conversation.uid }}"
         color="close-conversation" name="archive-outline" item-end></ion-icon>
+
+        <ng-template #archiveTooltip>
+          <span *ngIf="conversation?.recipient.startsWith('support-group')"> {{ resolve_btn_tooltip}} </span>
+          <span *ngIf="!conversation?.recipient.startsWith('support-group')"> {{ archive_btn_tooltip }} </span>
+        </ng-template>
     </ion-button>
     <!-- <ion-button *ngIf="conversation.archived" class="close-conversation-button" ion-button clear item-end disabled padding>
       <!- - <ion-icon  style="display:block;" id="{{ 'close_button_icon' + conversation.uid }}" color="close-conversation" name="archive-outline" item-end></ion-icon> - ->
@@ -142,7 +147,7 @@
       {{browserLang === 'en' ? (conversation.timestamp | amDateFormat:'MMM DD YYYY') : (conversation.timestamp| amDateFormat:'DD MMM YYYY') }}
       <!-- {{conversation.timestamp | amDateFormat:'DD MMM YYYY'}} -->
     </span>
-    <i class="material-icons" item-end style="font-size: 15px;font-weight: 400;color: #666666;"> history </i>
+    <!-- <i class="material-icons" item-end style="font-size: 15px;font-weight: 400;color: #666666;"> history </i> -->
   </div>
 
   <!-- && !conversation?.archived -->

package/src/app/chatlib/list-conversations-component/ion-list-conversations/ion-list-conversations.component.ts

@@ -9,12 +9,11 @@ import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance'
 import { TranslateService } from '@ngx-translate/core';
 
 import * as moment from 'moment';
-// import { EventsService } from 'src/app/services/events-service';
-// import { TiledeskService } from '../../../services/tiledesk/tiledesk.service';
 import { NetworkService } from '../../../services/network-service/network.service';
 import { AppConfigProvider } from 'src/app/services/app-config';
 import { DomSanitizer } from '@angular/platform-browser'
 import { TiledeskAuthService } from 'src/chat21-core/providers/tiledesk/tiledesk-auth.service';
+
 // import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
 // import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 
@@ -35,7 +34,18 @@ export class IonListConversationsComponent extends ListConversationsComponent im
   public browserLang: string;
 
   public PROJECT_FOR_PANEL: any;
-
+  public archive_btn_tooltip: string;
+  public resolve_btn_tooltip: string;
+
+  tooltip_options = {
+    'show-delay': 0,
+    'tooltip-class': 'chat-tooltip',
+    'theme': 'light',
+    'shadow': false,
+    'hide-delay-mobile': 0,
+    'hideDelayAfterClick': 3000,
+    'hide-delay': 100
+  };
   /**
    * 
    * @param iterableDiffers 
@@ -47,12 +57,11 @@ export class IonListConversationsComponent extends ListConversationsComponent im
     public kvDiffers: KeyValueDiffers,
     public platform: Platform,
     private translate: TranslateService,
-    // private events: EventsService,
-    // private tiledeskService: TiledeskService,
     private networkService: NetworkService,
     private appConfigProvider: AppConfigProvider,
     private sanitizer: DomSanitizer,
-    public tiledeskAuthService: TiledeskAuthService
+    public tiledeskAuthService: TiledeskAuthService,
+  
   ) {
     super(iterableDiffers, kvDiffers)
     this.setMomentLocale();
@@ -78,6 +87,25 @@ export class IonListConversationsComponent extends ListConversationsComponent im
 
     // console.log('[ION-LIST-CONVS-COMP] - DASHBOARD_BASE_URL ', DASHBOARD_BASE_URL)
     this.PROJECT_FOR_PANEL = this.sanitizer.bypassSecurityTrustResourceUrl(DASHBOARD_BASE_URL + '#/project-for-panel');
+    this.translateLbls();
+    
+  }
+
+
+  translateLbls() {
+    this.translate.get('Resolve')
+      .subscribe((text: string) => {
+        // this.deleteContact_msg = text;
+        this.resolve_btn_tooltip = text;
+        //  console.log('[ION-LIST-CONVS-COMP] getTranslations Resolve : ', text)
+
+      });
+      this.translate.get('Archive')
+      .subscribe((text: string) => {
+        // this.deleteContact_msg = text;
+        this.archive_btn_tooltip = text;
+        //  console.log('[ION-LIST-CONVS-COMP] getTranslations Resolve : ', text)
+      });
   }
 
   setMomentLocale() {

package/src/app/components/conversation-detail/header-conversation-detail/header-conversation-detail.component.html

@@ -1,50 +1,39 @@
-
 <ion-header no-border class="ion-no-border">
-  <ion-toolbar>
-    
-    <ion-buttons slot="start">
+  <ion-toolbar style="height:60px">
+    <ion-buttons slot="start" style="height:60px">
       <!-- (click)="pushPage('conversations-list')" defaultHref="/conversations-list" -->
       <ion-back-button style="display: block;" text="" *ngIf="isMobile" (click)="goBackToConversationList()">
-      </ion-back-button> 
+      </ion-back-button>
     </ion-buttons>
 
     <ion-title [class.info-open]="openInfoConversation || openInfoMessage">
 
       <div *ngIf="conversationAvatar" class="avatar-and-typing-wpr">
         <!-- [ngStyle] = "{ 'left': platformName === 'ios' ? '55px' : ''  }" -->
-        <div *ngIf="conversationAvatar" class="avatar-container" [ngClass] = "{ 'avatar-container-ios': platformName === 'ios' }">
-          <app-avatar-profile
-            [itemAvatar] = conversationAvatar
-          ></app-avatar-profile>
+        <div *ngIf="conversationAvatar" class="avatar-container"
+          [ngClass]="{ 'avatar-container-ios': platformName === 'ios' }">
+          <app-avatar-profile [itemAvatar]=conversationAvatar></app-avatar-profile>
         </div>
         <!-- [ngStyle] = "{ 'left': platformName === 'ios' ? '63px' : ''  }" -->
-        <div *ngIf="isDirect" class="user-presence" [ngClass] = "{ 'user-presence-ios': platformName === 'ios' }">
-          <app-user-presence 
-            [idUser] = conversationAvatar.conversation_with
-            [translationMap] = translationMap
-            [borderColor] = borderColor
-            [fontColor] = fontColor>
+        <div *ngIf="isDirect" class="user-presence" [ngClass]="{ 'user-presence-ios': platformName === 'ios' }">
+          <app-user-presence [idUser]=conversationAvatar.conversation_with [translationMap]=translationMap
+            [borderColor]=borderColor [fontColor]=fontColor>
           </app-user-presence>
         </div>
 
         <div *ngIf="conversationAvatar" class="user-typing">
-          <app-user-typing 
-            [idConversation] = conversationAvatar.uid
-            [idCurrentUser] = idLoggedUser
-            [isDirect] = isDirect
-            [translationMap] = translationMap
-            [color] = fontColor
-            [membersConversation] = membersConversation
-          ></app-user-typing>
+          <app-user-typing [idConversation]=conversationAvatar.uid [idCurrentUser]=idLoggedUser [isDirect]=isDirect
+            [translationMap]=translationMap [color]=fontColor [membersConversation]=membersConversation>
+          </app-user-typing>
         </div>
 
       </div>
       <!-- [ngClass] = "{ 'tile-info-with-ios': platformName === 'ios' ? '82px' : ''82px''  }" -->
-      <div *ngIf="conversationAvatar" class="tile-info-with" (click)="onOpenCloseInfoConversation()" 
-      [ngClass] = "{ 'tile-info-with-ios': platformName === 'ios' }">        
+      <div *ngIf="conversationAvatar" class="tile-info-with" (click)="onOpenCloseInfoConversation()"
+        [ngClass]="{ 'tile-info-with-ios': platformName === 'ios' }">
         <!-- <span class="tile-username">{{ conversationAvatar.conversation_with_fullname }} </span> -->
         <span class="tile-username">{{ conversation_with_fullname }} </span>
-        
+
       </div>
 
       <!-- <div *ngIf="conversationWithFullname" class="tile-info-with" (click)="onOpenCloseInfoConversation()">        
@@ -55,15 +44,22 @@
     <!-- openInfoConversation  {{openInfoConversation}} -->
     <ion-buttons slot="end">
 
-          <ion-button  *ngIf="!openInfoConversation" ion-button fill="clear" (click)="onOpenCloseInfoConversation()">
-            <!-- <ion-icon slot="icon-only" name="alert-circle-outline"></ion-icon> -->
-            <ion-icon slot="icon-only"  name="information-circle-outline"></ion-icon>
-            <!-- <ion-icon slot="icon-only"  name="information-outline"></ion-icon> -->
-          
-          </ion-button>
-          <ion-button  *ngIf="openInfoConversation" ion-button fill="clear" (click)="onOpenCloseInfoConversation()">
-            <ion-icon slot="icon-only" name="close-circle-outline"></ion-icon>
-          </ion-button>
+      <ion-button *ngIf="idConv.startsWith('support-group')" ion-button fill="clear" color="primary" size="small" (click)="closeConversation()" [ngClass]="{'resolve-conv-margin-right': !isMobile}" style="">
+        <!-- <ion-icon slot="icon-only" name="alert-circle-outline"></ion-icon> -->
+        <ion-icon name="archive-outline"></ion-icon>
+        <!-- <ion-icon slot="icon-only"  name="information-outline"></ion-icon> -->
+        <span style="text-transform: capitalize; margin-left: 5px;"> {{ 'Resolve' | translate}} </span>
+      </ion-button>
+
+      <ion-button *ngIf="!openInfoConversation" ion-button fill="clear" (click)="onOpenCloseInfoConversation()">
+        <!-- <ion-icon slot="icon-only" name="alert-circle-outline"></ion-icon> -->
+        <ion-icon slot="icon-only" name="information-circle-outline"></ion-icon>
+        <!-- <ion-icon slot="icon-only"  name="information-outline"></ion-icon> -->
+
+      </ion-button>
+      <ion-button *ngIf="openInfoConversation" ion-button fill="clear" (click)="onOpenCloseInfoConversation()">
+        <ion-icon slot="icon-only" name="close-circle-outline"></ion-icon>
+      </ion-button>
 
     </ion-buttons>
 

package/src/app/components/conversation-detail/header-conversation-detail/header-conversation-detail.component.scss

@@ -158,4 +158,8 @@ ion-header {
 
 .avatar-container-ios {
     left: 55px;
+}
+
+.resolve-conv-margin-right {
+    margin-right: 56px;
 }

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

@@ -7,6 +7,10 @@ import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 import { setConversationAvatar, setChannelType } from 'src/chat21-core/utils/utils';
 import { Platform } from '@ionic/angular';
+// import { TiledeskAuthService } from 'src/chat21-core/providers/tiledesk/tiledesk-auth.service';
+// import { TiledeskService } from 'src/app/services/tiledesk/tiledesk.service';
+import { EventsService } from 'src/app/services/events-service';
+
 @Component({
   selector: 'app-header-conversation-detail',
   templateUrl: './header-conversation-detail.component.html',
@@ -44,7 +48,10 @@ export class HeaderConversationDetailComponent implements OnInit, OnChanges {
     public imageRepoService: ImageRepoService,
     private route: ActivatedRoute,
     public platform: Platform,
-    private router: Router
+    private router: Router,
+    // public tiledeskAuthService: TiledeskAuthService,
+    // public tiledeskService: TiledeskService,
+    public events: EventsService,
   ) {
     this.route.paramMap.subscribe(params => {
 
@@ -58,6 +65,10 @@ export class HeaderConversationDetailComponent implements OnInit, OnChanges {
     });
   }
 
+ 
+
+
+
   // ----------------------------------------------------
   // @ Lifehooks
   // ----------------------------------------------------
@@ -113,7 +124,10 @@ export class HeaderConversationDetailComponent implements OnInit, OnChanges {
       this.platformName = 'android'
       this.logger.log('getPlatformName platformName', this.platformName) 
     }
+  }
 
+  closeConversation() {
+    this.events.publish('hasclosedconversation', this.idConv);
   }
 
   onOpenCloseInfoConversation() {

package/src/app/components/ddp-header/ddp-header.component.html

@@ -1,24 +1,31 @@
+<ion-toolbar style="height:60px" [ngClass]="{'bottom-border-on-mobile':IS_ON_MOBILE_DEVICE === true }">
 
-<ion-toolbar>
-  
-  <ion-buttons slot="start">
+  <ion-buttons *ngIf="IS_ON_MOBILE_DEVICE === true || supportMode === false" slot="start" style="height:60px">
     <ion-button ion-button icon-only fill="clear" (click)="onOpenProfileInfo($event)">
       <ion-icon slot="icon-only" name="reorder-three-outline"></ion-icon>
     </ion-button>
   </ion-buttons>
 
   <ion-title>
-    <img src="assets/chat21-logo.svg" class="header-logo" alt="header-logo">
+    <!-- <img src="assets/chat21-logo.svg" class="header-logo" alt="header-logo"> -->
     <div *ngIf="numberOpenConv > 0" class="number-open-conv">({{numberOpenConv}})</div>
   </ion-title>
 
   <ion-buttons slot="end">
 
-    <ion-button *ngIf="supportMode" ion-button fill="clear" (click)="onOpenContactsDirectory($event)">
+    <ion-button *ngIf="archived_btn" ion-button fill="clear" (click)="onClickArchivedConversation()">
+      <ion-icon slot="icon-only" name="file-tray-full-outline"></ion-icon>
+      <!-- <ion-icon name="file-tray-stacked-outline"></ion-icon> -->
+      <!-- <ion-icon name="file-tray-full-outline"></ion-icon> -->
+    </ion-button>
+
+    <ion-button *ngIf="writeto_btn" ion-button fill="clear" (click)="onOpenContactsDirectory($event)">
       <ion-icon slot="icon-only" name="create-outline"></ion-icon>
+      <!-- <ion-icon slot="icon-only" name="people-outline"></ion-icon> -->
+
     </ion-button>
 
-    <!-- <button ion-button icon-only (click)="onOpenArchivedConversationsPage()">
+    <!--   <button ion-button icon-only (click)="onOpenArchivedConversationsPage()">
       <span class="material-icons">history</span>
     </button>
 

package/src/app/components/ddp-header/ddp-header.component.scss

@@ -23,4 +23,8 @@ ion-title img {
 
 .header-logo {
     margin-top: 5px;
+}
+
+.bottom-border-on-mobile {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
 }

package/src/app/components/ddp-header/ddp-header.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
-
+import { EventsService } from 'src/app/services/events-service';
 @Component({
   selector: 'app-ddp-header',
   templateUrl: './ddp-header.component.html',
@@ -8,11 +8,26 @@ import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 export class DdpHeaderComponent implements OnInit {
   @Input() numberOpenConv: number;
   @Input() supportMode: boolean;
+  @Input() archived_btn: boolean;
+  @Input() writeto_btn: boolean;
   @Output() openContactsDirectory = new EventEmitter();
   @Output() openProfileInfo = new EventEmitter();
+  IS_ON_MOBILE_DEVICE: boolean;
 
   constructor(
-  ) { }
+    public events: EventsService,
+  ) { 
+    this.isOnMobileDevice()
+  }
+
+  isOnMobileDevice() {
+    this.IS_ON_MOBILE_DEVICE = false;
+    if (/Android|iPhone/i.test(window.navigator.userAgent)) {
+      this.IS_ON_MOBILE_DEVICE = true;
+    }
+    // console.log('[DDP-HEADER] IS_ON_MOBILE_DEVICE', this.IS_ON_MOBILE_DEVICE)
+    return this.IS_ON_MOBILE_DEVICE;
+  }
 
   ngOnInit() {
     // console.log('DDP HEADER SUPPORT MODE ', this.supportMode)
@@ -30,4 +45,8 @@ export class DdpHeaderComponent implements OnInit {
   }
   // END @Output() //
 
+  onClickArchivedConversation() {
+    this.events.publish('profileInfoButtonClick:changed', 'displayArchived');
+  }
+
 }