@chat21/chat21-ionic 3.0.60 → 3.0.61-rc11

package/src/app/components/conversation-detail/message-text-area/message-text-area.component.ts

@@ -54,6 +54,7 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
   @Output() hasClickedOpenCannedResponses = new EventEmitter<boolean>();
   @Output() eventSendMessage = new EventEmitter<object>();
   @Output() onPresentModalScrollToBottom = new EventEmitter<boolean>();
+  @Input() disableTextarea: boolean;
 
   public conversationEnabled = false;
   public messageString: string;
@@ -69,6 +70,7 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
   public IS_SUPPORT_GROUP_CONVERSATION: boolean;
 
   TYPE_MSG_TEXT = TYPE_MSG_TEXT;
+  msg : string
 
   tooltipOptions = {
     'show-delay': 500,
@@ -123,6 +125,7 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
       // this.SHORTER_TEXAREA_PLACEHOLDER = this.translationMap.get('LABEL_ENTER_MSG_SHORTER')
 
       this.TEXAREA_PLACEHOLDER = this.translationMap.get('LABEL_ENTER_MSG_SHORT')
+   
     }
 
     if (this.conversationWith.startsWith("support-group")) {
@@ -130,7 +133,7 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
     } else {
       this.IS_SUPPORT_GROUP_CONVERSATION = false
     }
-
+    this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] ngOnChanges disableTextarea ', this.disableTextarea)
     this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] ngOnChanges DROP EVENT ", this.dropEvent);
     this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] ngOnChanges tagsCannedFilter ", this.tagsCannedFilter);
     this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] ngOnChanges areVisibleCAR; ", this.areVisibleCAR);
@@ -269,6 +272,8 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
 
         let content = event.clipboardData.getData('text/plain');
         this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] onPaste content ", content);
+        this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] onPaste this.messageString ", this.messageString);
+        this.msg = this.messageString
         setTimeout(() => {
           this.messageString = "";
         }, 100);
@@ -301,6 +306,11 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
 
   onFileSelected(e: any) {
     this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] - onFileSelected event', e);
+    this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] - onFileSelected this.messageString ", this.messageString);
+    this.msg = this.messageString
+    setTimeout(() => {
+      this.messageString = "";
+    }, 100);
     this.presentModal(e);
 
   }
@@ -339,7 +349,7 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
     }
     // this.logger.log('presentModal e.target.files.length', e.target.files.length);
 
-    const attributes = { files: dataFiles, enableBackdropDismiss: false };
+    const attributes = { files: dataFiles, enableBackdropDismiss: false , msg: this.msg};
     this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] attributes', attributes);
     const modal: HTMLIonModalElement =
       await this.modalController.create({

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

@@ -1,24 +1,38 @@
+<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 ion-button fill="clear" (click)="presentCreateTicketModal()"
+      tooltip="{{translationMap?.get('CreateTicket')}}" [options]="tooltipOptions" placement="bottom">
+      <ion-icon slot="icon-only" name="ticket-outline"></ion-icon>
+    </ion-button>
+
+    <ion-button *ngIf="archived_btn" ion-button fill="clear" (click)="onClickArchivedConversation()" 
+      tooltip="{{translationMap?.get('ViewArchivedConversations')}}" [options]="tooltipOptions" placement="bottom">
+      <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)"
+    tooltip="{{translationMap?.get('ViewContactsList')}}" [options]="tooltipOptions" placement="bottom">
       <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,18 +1,77 @@
-import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
-
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'
+import { ModalController } from '@ionic/angular'
+import { EventsService } from 'src/app/services/events-service'
+import { CreateTicketPage } from 'src/app/pages/create-ticket/create-ticket.page'
+import { CustomTranslateService } from 'src/chat21-core/providers/custom-translate.service'
 @Component({
   selector: 'app-ddp-header',
   templateUrl: './ddp-header.component.html',
   styleUrls: ['./ddp-header.component.scss'],
 })
 export class DdpHeaderComponent implements OnInit {
-  @Input() numberOpenConv: number;
-  @Input() supportMode: boolean;
-  @Output() openContactsDirectory = new EventEmitter();
-  @Output() openProfileInfo = new EventEmitter();
-
+  @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
+  createTicketModal = null
+  public translationMap: Map<string, string>;
+  tooltipOptions = {
+    'show-delay': 0,
+    'tooltip-class': 'chat-tooltip',
+    'theme': 'light',
+    'shadow': false,
+    'hide-delay-mobile': 0,
+    'hideDelayAfterClick': 3000,
+    'hide-delay': 0
+  };
   constructor(
-  ) { }
+    public events: EventsService,
+    public modalController: ModalController,
+    private translateService: CustomTranslateService,
+  ) {
+    this.isOnMobileDevice();
+    this.translations();
+    // this.listenToCloseCreateTicketModal() // published from create ticket page
+  }
+
+  public translations() {
+    const keys = [
+      'CreateTicket',
+      'ViewArchivedConversations',
+      'ViewContactsList'
+    ];
+    this.translationMap = this.translateService.translateLanguage(keys);
+  }
+
+  // listenToCloseCreateTicketModal() {
+  //   this.events.subscribe('closeModalCreateTicket', (bool) => {
+  //     console.log('[HEADER-CONV] closeModalCreateTicket ', bool)
+  //     if (bool === true) {
+  //       this.closeCreateTicketModal()
+
+  //     }
+  //   })
+  // }
+
+  // closeCreateTicketModal() {
+  //   if (this.createTicketModal) {
+  //     this.createTicketModal.dismiss().then(() => {
+  //       this.createTicketModal = null;
+  //     });
+  //   }
+  // }
+
+  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)
@@ -21,13 +80,48 @@ export class DdpHeaderComponent implements OnInit {
   // START @Output() //
   /** */
   onOpenProfileInfo(e: any) {
-    this.openProfileInfo.emit(e);
+    this.openProfileInfo.emit(e)
   }
 
   /** */
   onOpenContactsDirectory(e: any) {
-    this.openContactsDirectory.emit(e);
+    this.openContactsDirectory.emit(e)
   }
   // END @Output() //
 
+  onClickArchivedConversation() {
+    this.events.publish('profileInfoButtonClick:changed', 'displayArchived')
+  }
+
+  // PRESENT MODAL CREATE TICKET
+  // async presentCreateTicketModal(): Promise<any>{
+
+  //   // const attributes = {  enableBackdropDismiss: false };
+  //   const modal: HTMLIonModalElement =
+  //     await this.modalController.create({
+  //       component: CreateTicketPage,
+  //       // componentProps: attributes,
+  //       swipeToClose: false,
+  //       backdropDismiss: false
+  //     });
+  //   modal.onDidDismiss().then((detail: any) => {
+  //     console.log('[DDP-HEADER] ', detail.data);
+  //   });
+  //   return await modal.present();
+  // }
+
+  async presentCreateTicketModal() {
+    // const attributes = {  enableBackdropDismiss: false };
+    const modal = await this.modalController.create({
+      component: CreateTicketPage,
+      // componentProps: attributes,
+      swipeToClose: false,
+      backdropDismiss: false,
+    })
+    modal.onDidDismiss().then((detail: any) => {
+      // console.log('[DDP-HEADER] ', detail.data)
+    })
+    modal.present()
+    this.createTicketModal = modal
+  }
 }

package/src/app/components/project-item/project-item.component.html

@@ -23,7 +23,7 @@
                   </g>
                 </svg>
               </div>
-              <div class="unassigned-notifications-badge">
+              <div class="unassigned-notifications-badge" *ngIf="unservedRequestCount > 0">
                 <!-- || currentUserRequestCount > 0  -->
                 <!-- <span *ngIf="unservedRequestCount > 0 "> -->
                 <!-- + currentUserRequestCount -->
@@ -48,7 +48,7 @@
 
 
             <div class="flex-child-right">
-              <div class="project-name-project-for-panel" [tooltip]="conversationsInQueueOnProjectName"
+              <div class="project-name-project-for-panel" [ngClass]="{'project-name-project-for-panel-on-desktop': IS_ON_MOBILE_DEVICE === false}" [tooltip]="conversationsInQueueOnProjectName"
                 [options]="tooltipOptions" placement="top" content-type="template" (click)="openUnservedConvs()">
                 <div class="project---name"> {{ project?.id_project?.name }} </div>
               </div>
@@ -87,7 +87,9 @@
                   [ngClass]="{'online-text-color' : project?.ws_projct_user_available === true, 'offline-text-color' : project?.ws_projct_user_available === false}">
                   {{translationMap?.get('Unavailable')}}
                 </span>
-                <div class="project-item--isBusy-icon-wpr" *ngIf="project?.ws_projct_user_isBusy === true">
+
+                <div class="project-item--isBusy-icon-wpr" *ngIf="project?.ws_projct_user_isBusy === true" tooltip="{{translationMap?.get('Busy')}}"
+                [options]="tooltipOptions" placement="top" >
                   <!-- <span class="material-icons project-item--isBusy-icon">
                       access_time
                     </span> -->
@@ -102,14 +104,14 @@
                     </g>
                   </svg>
                 </div>
-                <span *ngIf="project?.ws_projct_user_isBusy === true"
+                <!-- <span *ngIf="project?.ws_projct_user_isBusy === true"
                   class="project-item--isBusy-busy-text text-pulse-animation">
                   {{translationMap?.get('Busy')}}
-                </span>
+                </span> -->
               </div>
             </div>
 
-            <div class="flex-child-view-all-convs">
+            <div *ngIf="IS_ON_MOBILE_DEVICE === true" class="flex-child-view-all-convs">
               <div class="view-all-convs-icon-wpr" style="cursor: pointer;" [tooltip]="viewAllConvs"
                 [options]="tooltipOptions" placement="top" content-type="template">
 
@@ -153,7 +155,6 @@
               </div>
               <ng-template #viewAllConvs>
                 <span>
-
                   {{translationMap?.get('CHANGE_PINNED_PROJECT') }}</span>
               </ng-template>
             </div>

package/src/app/components/project-item/project-item.component.scss

@@ -311,7 +311,7 @@
     color: #1e2129;
     font-weight: 400;
     margin-left: 10px;
-    width: 185px !important;
+    width: 185px ;
     // width: 220px !important;
     white-space: nowrap !important;
     overflow: hidden !important;
@@ -323,6 +323,11 @@
     cursor: pointer;
 }
 
+
+.project-name-project-for-panel-on-desktop {
+    width: 217px
+}
+
 // .project-name-project-for-panel:hover span {
 //     color: rgba(0, 0, 0, 0.35);
 //     // display: none;

package/src/app/components/project-item/project-item.component.ts

@@ -17,6 +17,8 @@ import { AppConfigProvider } from 'src/app/services/app-config';
   styleUrls: ['./project-item.component.scss'],
 })
 export class ProjectItemComponent implements OnInit {
+  private logger: LoggerService = LoggerInstance.getInstance();
+
   @Output() projectIdEvent = new EventEmitter<string>()
   @Output() openUnsevedConvsEvent = new EventEmitter<any>()
 
@@ -29,7 +31,7 @@ export class ProjectItemComponent implements OnInit {
   ROLE_IS_AGENT: boolean;
   currentUserId: string;
   public translationMap: Map<string, string>;
-  private logger: LoggerService = LoggerInstance.getInstance();
+ 
   window_width_is_60: boolean;
   newInnerWidth: any;
   avaialble_status_for_tooltip: string;
@@ -42,7 +44,7 @@ export class ProjectItemComponent implements OnInit {
     'hideDelayAfterClick': 3000,
     'hide-delay': 200
   };
-
+  IS_ON_MOBILE_DEVICE: boolean;
   constructor(
     public wsService: WebsocketService,
     public appStorageService: AppStorageService,
@@ -59,9 +61,20 @@ export class ProjectItemComponent implements OnInit {
     this.translations();
     this.listenToPostMsgs();
     this.onInitWindowWidth();
+
+    this.isOnMobileDevice()
     // console.log('[PROJECT-ITEM] - on INIT')
   }
 
+  isOnMobileDevice() {
+    this.IS_ON_MOBILE_DEVICE = false;
+    if (/Android|iPhone/i.test(window.navigator.userAgent)) {
+      this.IS_ON_MOBILE_DEVICE = true;
+    }
+    // console.log('[PROJECT-ITEM] IS_ON_MOBILE_DEVICE', this.IS_ON_MOBILE_DEVICE)
+    return this.IS_ON_MOBILE_DEVICE;
+  }
+
   openUnservedConvs() {
     this.openUnsevedConvsEvent.emit('notificationsorprjctbtn')
   }

package/src/app/components/sidebar/sidebar.component.html

@@ -0,0 +1,274 @@
+<!-- *ngIf="project"  -->
+<div class="logo">
+  <!-- <a class="logo-img-wpr" [ngClass]="{'small-sidebar-logo-img-wpr' : SIDEBAR_IS_SMALL === true }">
+    <div class="logo-img" (click)="goToHome()" style="cursor: pointer;">
+      <img class="small-sidebar__logo" src="assets/tiledesk-solo-logo.png" />
+    </div>
+  </a> -->
+
+
+
+  <div id="sidebaravatar-img-wpr" class="sidebar-avatar-container tiledesk-nav-avatar" (click)="openUserDetailSidePanel()"
+    style="cursor: pointer;" [ngClass]="{'small-sidebar-avatar' : SIDEBAR_IS_SMALL === true,  'small-sidebar-avatar-with-avatar': SIDEBAR_IS_SMALL === true && !USER_PHOTO_PROFILE_EXIST}">
+
+    <img *ngIf="USER_PHOTO_PROFILE_EXIST" id="sidebaravatar-img" class="sidebar-avatar" [src]="photo_profile_URL"
+      onerror="this.src='assets/images/no_image_user.png'" />
+
+    <div *ngIf="!USER_PHOTO_PROFILE_EXIST" id="sidebaravatar-no-img" class="sidebar-avatar"
+      [ngStyle]="{'background':  'linear-gradient(rgb(255,255,255) -125%,' + currentUser?.fillColour + ')'}">
+      <span id="sidebaravatar-altenative-user-avatar" class="sidebar-altenative-user-avatar">
+        {{ currentUser?.fullname_initial }}
+      </span>
+    </div>
+
+    <!-- matTooltipClass="custom-mat-tooltip" matTooltip="{{ tooltip_text_for_availability_status}}" #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100" -->
+    <!-- (click)="changeAvailabilityState(IS_AVAILABLE = !IS_AVAILABLE)"  -->
+    <div id="sidebaravatar-status-icon" class="status-icon"
+      [ngClass]="{'is-user-online' : IS_AVAILABLE === true, 'is-user-offline' : IS_AVAILABLE === false, 'small-sidebar-status-icon' : SIDEBAR_IS_SMALL === true  }">
+    </div>
+
+        <!-- matTooltipClass="custom-mat-tooltip" matTooltip="{{ 'Busy' | translate }}" #tooltip="matTooltip"  matTooltipPosition='right' matTooltipHideDelay="100" -->
+        <div id="sidebaravatar-isbusy-icon-wpr" class="sidebar--isBusy-icon-wpr" [ngClass]="{'sidebar--isBusy-icon-wpr-with-image': USER_PHOTO_PROFILE_EXIST}" *ngIf="IS_BUSY === true"
+        style="cursor:pointer">
+        <span id="sidebaravatar-isbusy-icon" class="material-icons sidebar-is-busy-icon">
+          access_time
+        </span>
+      </div>
+
+  </div>
+</div>
+
+<div class="sidebar-wrapper">
+
+  <div class="nav-container">
+    <!-- [ngClass]="{'is-desktop-menu' : IS_MOBILE_MENU === false, 'is-mobile-menu' : IS_MOBILE_MENU === true  }" -->
+    <!-- padding-bottom: 65px; -->
+    <ul style="margin-top: 0px;" class="nav">
+
+      <!-- ------------------------------------------- -->
+      <!-- CHAT  -->
+      <!-- ------------------------------------------- -->
+      <li class="item-active" style="cursor: unset;" matTooltipClass="custom-mat-tooltip" matTooltip="Chat"
+        #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100" style="text-align: center; ">
+        <a class="customAncor" style="margin-right: 0px !important">
+          <!-- <i class="material-icons sidebar-icons">chat</i> -->
+          <span id="openchat-span" style="position: relative;top: 10px;vertical-align: middle;">
+            <svg id="openchat-svg" version="1.1" xmlns="http://www.w3.org/2000/svg"
+              xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 23 21"
+              style="enable-background:new 0 0 23 21;" xml:space="preserve"
+              style="width:20px;height:20px; vertical-align: middle;">
+              <style type="text/css">
+                .chat21-icon {
+                  fill: #fff;
+                }
+              </style>
+              <path id="openchat-path" class="chat21-icon" d="M11.5,0.5C5.8,0.5,1.3,5,1.3,10.5c0,1.8,0.5,3.5,1.4,5l-0.8,4.3l4.4-0.8c1.5,0.9,3.3,1.4,5.3,1.4
+              c5.7,0,10.2-4.5,10.2-10S17.2,0.5,11.5,0.5z M11.5,17.2c-2.5,0-4.6-1.3-5.7-2.6c0.6-0.2,0.8-0.8,1.4-1c0.7,0.9,2.5,2.1,4.4,2.1
+              c1.9,0,3.6-1.2,4.2-2.1c0.5,0.2,0.9,0.6,1.4,0.9C16.1,15.8,14,17.2,11.5,17.2z" />
+            </svg>
+          </span>
+        </a>
+      </li>
+
+      <!-- ------------------------------------------- -->
+      <!-- HOME  -->
+      <!-- ------------------------------------------- -->
+      <li (click)="goToHome()" matTooltip="Home" #tooltip="matTooltip" matTooltipPosition='right'
+        matTooltipHideDelay="100" matTooltipClass="custom-mat-tooltip">
+        <a class="customAncor">
+          <i class="material-icons sidebar-icons">
+            home
+          </i>
+        </a>
+      </li>
+
+
+      <!-- ---------------------------------- -->
+      <!-- Bot    -->
+      <!-- ---------------------------------- -->
+      <ng-container *ngIf="USER_ROLE !== 'agent'">
+        <li (click)="goToBots()" id="bot-anchor-wpr" matTooltipClass="custom-mat-tooltip" matTooltip="Bots"
+          #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100" style="text-align: center;">
+          <a id="bot-anchor" #botbtn class="customAncor" style="height: 40px;margin-right: 0px !important;">
+            <span class="bot-icon-wpr">
+              <svg version="1.1" id="Objects" xmlns="http://www.w3.org/2000/svg"
+                xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 30 30"
+                style="enable-background:new 0 0 30 30;" xml:space="preserve" style="width: 25px;height: 25px;margin-top: 6px;">
+                <g>
+                  <g>
+                    <path class="chat-bot-icon-st0" d="M24.6,12.6c-0.1,0-0.2,0-0.3,0c-1.6-2.9-4.5-5.8-9.2-5.8c-4.7,0-7.6,2.9-9.2,5.8c-0.2,0-0.4-0.1-0.6-0.1
+                      c-2,0-3.5,2.3-3.5,5c0,2.8,1.6,5,3.5,5c0.1,0,0.3,0,0.4,0c2.3,3.6,7,3.9,9.4,3.9c2.3,0,6.9-0.5,9.2-3.9c0.1,0,0.1,0,0.2,0
+                      c2,0,3.5-2.3,3.5-5C28.1,14.8,26.6,12.6,24.6,12.6z M22,21.1c0,0-7.8,2.3-14.3-0.1c0,0-0.8-4.1-0.5-7.2c0,0,8.1-3.2,15.6,0.3
+                      C22.8,14.1,23.3,19.1,22,21.1z" />
+                    <ellipse class="chat-bot-icon-st0" cx="11.9" cy="17.4" rx="0.7" ry="1.4" />
+                    <ellipse class="chat-bot-icon-st0" cx="18.1" cy="17.4" rx="0.7" ry="1.4" />
+                    <path class="chat-bot-icon-st0" d="M14.5,5.3v1.1h1V5.3c0.3-0.2,0.5-0.5,0.5-0.8c0-0.5-0.4-0.9-1-0.9c-0.5,0-0.9,0.4-0.9,0.9
+                      C14.1,4.8,14.2,5.1,14.5,5.3z" />
+                  </g>
+                  <rect class="chat-bot-icon-st1" width="30" height="30" />
+                </g>
+              </svg>
+            </span>
+          </a>
+        </li>
+      </ng-container>
+
+      <!-- ------------------------------------------- -->
+      <!-- Conversations (VISITORS) {{ conversations_lbl }} -->
+      <!-- ------------------------------------------- -->
+      <ng-container *ngIf="USER_ROLE !== 'agent'">
+        <li (click)="goToConversations()" matTooltipClass="custom-mat-tooltip" matTooltip="Monitor"
+          #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100"  style="text-align: center;">
+          <a class="customAncor" style="height: 40px;margin-right: 0px !important;">
+            <!-- <i class="material-icons sidebar-icons">forum</i> -->
+            <span  class="realtime-icon-wpr" >
+
+              <svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+                viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve" style="width: 30px;height: 30px;margin-top: 6px;">
+            
+              <path class="realtime-icon-st3" d="M17.9,11.6l-1.4,1.9l-3.2-5.6l-1-2l-0.2,0.2l-3.7,6.4l-3-4.8L2.7,9.9v2.4l2.4-1.8L9,16.2l3.3-6.2l4,6.7l2.7-3.3
+                l0.9,0c0.5-0.7,1-1.4,1.4-2L17.9,11.6z"/>
+              </svg>
+            </span>
+        
+          </a>
+        </li>
+      </ng-container>
+
+      <!-- ------------------------------------------- -->
+      <!-- CONTACTS (LEADS)  -->
+      <!-- ------------------------------------------- -->
+      <li (click)="goToContacts()" matTooltipClass="custom-mat-tooltip" matTooltip="{{ contacts_lbl }}"
+        #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100" style="text-align: center;">
+        <a class="customAncor">
+          <i class="material-icons sidebar-icons">contacts</i>
+        </a>
+      </li>
+
+      <!-- ------------------------------------------- -->
+      <!-- APPS  -->
+      <!-- ------------------------------------------- -->
+      <ng-container *ngIf="isVisibleAPP && USER_ROLE !== 'agent'">
+        <li (click)="goToAppStore()" matTooltipClass="custom-mat-tooltip" matTooltip="{{ apps_lbl }}"
+          #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100" style="text-align: center;">
+          <a class="customAncor" style="margin-right: 0px !important;">
+            <!-- <i class="material-icons sidebar-icons">apps</i> -->
+            <!-- <i class="material-icons sidebar-icons">dashboard_customize</i> -->
+            <span class="dashboard-customize-icon-wpr"> 
+              <svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+              viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve" style="width: 20px;height: 20px;margin-top: 9px;">
+                <path class="dashboard_customize-st0" d="M0,0h24v24H0V0z"/>
+                <path class="dashboard_customize-st1" d="M3,3h8v8H3V3z M13,3h8v8h-8V3z M3,13h8v8H3V13z M18,13h-2v3h-3v2h3v3h2v-3h3v-2h-3V13z"/>
+              </svg>
+            </span>
+          </a>
+        </li>
+      </ng-container>
+
+      <!-- ------------------------------------------- -->
+      <!-- ANALYTICS -->
+      <!-- ------------------------------------------- -->
+      <ng-container *ngIf="isVisibleANA && USER_ROLE !== 'agent'">
+        <li (click)="goToAnalytics()" matTooltipClass="custom-mat-tooltip" matTooltip="{{ analytics_lbl }}"
+          #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100" style="text-align: center;">
+          <a class="customAncor" style="margin-right: 0px !important;">
+            <!-- <i class="material-icons sidebar-icons">trending_up</i> -->
+            <!-- <i class="material-icons sidebar-icons"> analytics </i> -->
+            <!-- <i class="material-icons sidebar-icons">  bar_chart </i> -->
+            <span class="bar-chart-icon-wpr"> 
+              <svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+              viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve" style="width: 20px;height: 20px;margin-top: 9px;">
+                <path class="bar-chart-icon-st0" d="M0,0h24v24H0V0z"/>
+                <path class="bar-chart-icon-st1" d="M5,9.2h3V19H5V9.2z M10.6,5h2.8v14h-2.8V5z M16.2,13H19v6h-2.8V13z"/>
+              </svg>
+           </span>
+          </a>
+        </li>
+      </ng-container>
+
+      <!-- ------------------------------------------- -->
+      <!-- ACTIVITIES -->
+      <!-- ------------------------------------------- -->
+      <ng-container *ngIf="isVisibleACT">
+        <li *ngIf="USER_ROLE !== 'agent'" (click)="goToActivities()" matTooltipClass="custom-mat-tooltip"
+          matTooltip="{{ activities_lbl }}" #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100" style="text-align: center;">
+          <a class="customAncor">
+            <i class="material-icons sidebar-icons">assignment</i>
+          </a>
+        </li>
+      </ng-container>
+
+
+      <!-- ------------------------------------------- -->
+      <!-- REQUESTS HISTORY -->
+      <!-- ------------------------------------------- -->
+      <li (click)="goToHistory()" matTooltipClass="custom-mat-tooltip" matTooltip="{{ history_lbl }}"
+        #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100" style="text-align: center;">
+        <a class="customAncor">
+          <i class="material-icons sidebar-icons">history</i>
+        </a>
+      </li>
+
+      <!-- ------------------------------------------- -->
+      <!-- SETTINGS -->
+      <!-- ------------------------------------------- -->
+      <li *ngIf="USER_ROLE !== 'agent'" (click)="goToSettings_CannedResponses()" matTooltipClass="custom-mat-tooltip"
+        matTooltip="{{ settings_lbl }}" #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100" style="text-align: center;">
+        <a class="customAncor">
+          <i class="material-icons sidebar-icons">settings</i>
+        </a>
+      </li>
+
+
+      <!-- [_prjct_profile_name]="_prjct_profile_name" [plan_subscription_is_active]="plan_subscription_is_active"
+  [plan_name]="plan_name"
+  [plan_type]="plan_type"
+  [isVisiblePAY]="isVisiblePAY"
+  [prjct_name]="prjct_name" -->
+      <!-- HAS_CLICKED_OPEN_USER_DETAIL {{ HAS_CLICKED_OPEN_USER_DETAIL }} -->
+      <!-- [HAS_CLICKED_OPEN_USER_DETAIL]='HAS_CLICKED_OPEN_USER_DETAIL' -->
+      <!-- tabindex="-1"  style="z-index: 20001;"  -->
+
+
+      <!-- <app-sidebar-user-details    
+  (onCloseUserDetailsSidebar)='onCloseUserDetailsSidebar($event)'>
+</app-sidebar-user-details> -->
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    </ul>
+  </div>
+</div>