@chat21/chat21-ionic 3.0.61-rc8 → 3.0.61

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

@@ -52,7 +52,7 @@
         #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;">
+          <span id="openchat-span" style="position: relative;top: 9px;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"
@@ -71,11 +71,12 @@
       </li>
 
       <!-- ------------------------------------------- -->
-      <!-- HOME  -->
+      <!-- HOME   (click)="goToHome()"" -->
       <!-- ------------------------------------------- -->
-      <li (click)="goToHome()" matTooltip="Home" #tooltip="matTooltip" matTooltipPosition='right'
+   
+      <li  matTooltip="Home" #tooltip="matTooltip" matTooltipPosition='right'
         matTooltipHideDelay="100" matTooltipClass="custom-mat-tooltip">
-        <a class="customAncor">
+        <a target="_self" href="{{ dashboard_home_url }}" class="customAncor">
           <i class="material-icons sidebar-icons">
             home
           </i>
@@ -84,16 +85,16 @@
 
 
       <!-- ---------------------------------- -->
-      <!-- Bot    -->
+      <!-- Bot  (click)="goToBots()"  -->
       <!-- ---------------------------------- -->
       <ng-container *ngIf="USER_ROLE !== 'agent'">
-        <li (click)="goToBots()" id="bot-anchor-wpr" matTooltipClass="custom-mat-tooltip" matTooltip="Bots"
+        <li  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;">
+          <a target="_self" href="{{ dashboard_bots_url }}" 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;">
+                style="enable-background:new 0 0 30 30;" xml:space="preserve" style="width: 25px;height: 25px;margin-top: 7px;">
                 <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
@@ -114,73 +115,85 @@
       </ng-container>
 
       <!-- ------------------------------------------- -->
-      <!-- REQUESTS (VISITORS)  -->
+      <!-- Conversations (MONITOR) (click)="goToConversations()" -->
       <!-- ------------------------------------------- -->
-      <li (click)="goToConversations()" matTooltipClass="custom-mat-tooltip" matTooltip="{{ conversations_lbl }}"
-        #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 *ngIf="USER_ROLE !== 'agent'">
+        <li  matTooltipClass="custom-mat-tooltip" matTooltip="Monitor"
+          #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100"  style="text-align: center;">
+          <a target="_self" href="{{ dashboard_convs_url }}" 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: 5px;">
+            
+              <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)  -->
+      <!-- CONTACTS (LEADS)  (click)="goToContacts()" -->
       <!-- ------------------------------------------- -->
-      <li (click)="goToContacts()" matTooltipClass="custom-mat-tooltip" matTooltip="{{ contacts_lbl }}"
+      <li  matTooltipClass="custom-mat-tooltip" matTooltip="{{ contacts_lbl }}"
         #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100" style="text-align: center;">
-        <a class="customAncor">
+        <a target="_self" href="{{ dashboard_contacts_url }}" class="customAncor">
           <i class="material-icons sidebar-icons">contacts</i>
         </a>
       </li>
 
       <!-- ------------------------------------------- -->
-      <!-- APPS  -->
+      <!-- APPS  (click)="goToAppStore()" -->
       <!-- ------------------------------------------- -->
       <ng-container *ngIf="isVisibleAPP && USER_ROLE !== 'agent'">
-        <li (click)="goToAppStore()" matTooltipClass="custom-mat-tooltip" matTooltip="{{ apps_lbl }}"
+        <li  matTooltipClass="custom-mat-tooltip" matTooltip="{{ apps_lbl }}"
           #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100" style="text-align: center;">
-          <a class="customAncor">
+          <a target="_self" href="{{ dashboard_app_url }}" class="customAncor" style="margin-right: 0px !important;">
             <!-- <i class="material-icons sidebar-icons">apps</i> -->
-            <i class="material-icons sidebar-icons">dashboard_customize</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: 10px;">
+                <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 -->
+      <!-- ANALYTICS (click)="goToAnalytics()" -->
       <!-- ------------------------------------------- -->
       <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">
+        <li  matTooltipClass="custom-mat-tooltip" matTooltip="{{ analytics_lbl }}"
+          #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100" style="text-align: center;" >
+          <a target="_self" href="{{ dashboard_analytics_url }}" 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>
-           
+            <!-- <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: 10px;">
+                <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 -->
+      <!-- ACTIVITIES (click)="goToActivities()" -->
       <!-- ------------------------------------------- -->
       <ng-container *ngIf="isVisibleACT">
-        <li *ngIf="USER_ROLE !== 'agent'" (click)="goToActivities()" matTooltipClass="custom-mat-tooltip"
+        <li *ngIf="USER_ROLE !== 'agent'"  matTooltipClass="custom-mat-tooltip"
           matTooltip="{{ activities_lbl }}" #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100" style="text-align: center;">
-          <a class="customAncor">
+          <a target="_self" href="{{ dashboard_activities_url }}" class="customAncor">
             <i class="material-icons sidebar-icons">assignment</i>
           </a>
         </li>
@@ -188,21 +201,21 @@
 
 
       <!-- ------------------------------------------- -->
-      <!-- REQUESTS HISTORY -->
+      <!-- REQUESTS HISTORY (click)="goToHistory()" -->
       <!-- ------------------------------------------- -->
-      <li (click)="goToHistory()" matTooltipClass="custom-mat-tooltip" matTooltip="{{ history_lbl }}"
+      <li  matTooltipClass="custom-mat-tooltip" matTooltip="{{ history_lbl }}"
         #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100" style="text-align: center;">
-        <a class="customAncor">
+        <a target="_self" href="{{ dashboard_history_url }}" 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"
+      <!-- ----------------------------------------------------------------------------------- -->
+      <!-- SETTINGS // old: goToSettings_CannedResponses()  *ngIf="USER_ROLE !== 'agent'" (click)="goToWidgetSetUpOrToCannedResponses()" -->
+      <!-- ----------------------------------------------------------------------------------- -->
+      <li *ngIf="USER_ROLE !== 'agent'"  matTooltipClass="custom-mat-tooltip"
         matTooltip="{{ settings_lbl }}" #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100" style="text-align: center;">
-        <a class="customAncor">
+        <a target="_self" href="{{ dashboard_settings_url }}" class="customAncor">
           <i class="material-icons sidebar-icons">settings</i>
         </a>
       </li>

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

@@ -24,6 +24,21 @@
   fill: #647491
 }
 
+.dashboard_customize-st0{
+  fill:none;
+}
+.dashboard_customize-st1{
+  fill:#647491;
+}
+
+.bar-chart-icon-st0{
+  fill:none;
+}
+
+.bar-chart-icon-st1{
+  fill:#647491;
+}
+
 #bot-anchor-wpr:hover > #bot-anchor > .bot-icon-wpr > svg > g > g > .chat-bot-icon-st0 {
   fill: #a9afbb ;
 }
@@ -32,6 +47,14 @@ li:hover > a > .realtime-icon-wpr > svg  > path {
   fill: #a9afbb;
 }
 
+li:hover > a > .dashboard-customize-icon-wpr > svg  > .dashboard_customize-st1 {
+  fill: #a9afbb;
+}
+
+li:hover > a > .bar-chart-icon-wpr > svg  > .bar-chart-icon-st1{
+  fill: #a9afbb;
+}
+
 #sidebaravatar-altenative-user-avatar {
   // line-height: 2.9;
   font-weight: 400;

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

@@ -13,7 +13,7 @@ import { EventsService } from 'src/app/services/events-service';
 import { tranlatedLanguage } from '../../../chat21-core/utils/constants';
 
 // utils
-import { avatarPlaceholder,  getColorBck} from 'src/chat21-core/utils/utils-user';
+import { avatarPlaceholder, getColorBck } from 'src/chat21-core/utils/utils-user';
 
 @Component({
   selector: 'app-sidebar',
@@ -49,6 +49,15 @@ export class SidebarComponent implements OnInit {
   countClickOnOpenUserDetailSidebar: number = 0
   USER_PHOTO_PROFILE_EXIST: boolean;
   currentUser: any;
+  dashboard_home_url: string;
+  dashboard_bots_url: string;
+  dashboard_convs_url: string;
+  dashboard_contacts_url: string;
+  dashboard_app_url: string;
+  dashboard_analytics_url: string;
+  dashboard_activities_url: string;
+  dashboard_history_url: string;
+  dashboard_settings_url: string;
   constructor(
     public imageRepoService: ImageRepoService,
     public appStorageService: AppStorageService,
@@ -59,13 +68,13 @@ export class SidebarComponent implements OnInit {
     public appConfigProvider: AppConfigProvider,
     private translate: TranslateService,
     public events: EventsService,
-   
+
   ) { }
 
   ngOnInit() {
     this.DASHBOARD_URL = this.appConfig.getConfig().dashboardUrl + '#/project/';
     // console.log('[SIDEBAR] DASHBOARD_URL ', this.DASHBOARD_URL)
-    this.getStoredProjectAndDashboardBaseUrl()
+    this.getStoredProjectAndUserRole()
     this.subcribeToAuthStateChanged()
     this.listenTocurrentProjectUserUserAvailability$()
     this.getOSCODE();
@@ -84,9 +93,47 @@ export class SidebarComponent implements OnInit {
     //     height: '35px'
     //   };
     // }
+
+
   }
 
 
+  getStoredProjectAndUserRole() {
+    const stored_project = localStorage.getItem('last_project')
+    this.logger.log('[SIDEBAR] stored_project ', stored_project)
+    if (stored_project && stored_project !== 'undefined') {
+      const project = JSON.parse(stored_project)
+      this.logger.log('[SIDEBAR] project ', project)
+
+      this.project_id = project.id_project.id
+      this.logger.log('[SIDEBAR] project_id ', this.project_id)
+
+      this.USER_ROLE = project.role;
+      this.logger.log('[SIDEBAR] USER_ROLE ', this.USER_ROLE)
+      this.buildURLs(this.USER_ROLE)
+    } else {
+      this.logger.log('[SIDEBAR] stored_project ', stored_project)
+    }
+  }
+
+  buildURLs(USER_ROLE) {
+    this.dashboard_home_url = this.DASHBOARD_URL + this.project_id + '/home'
+    this.dashboard_bots_url = this.DASHBOARD_URL + this.project_id + '/bots'
+    this.dashboard_convs_url = this.DASHBOARD_URL + this.project_id + '/wsrequests'
+    this.dashboard_contacts_url = this.DASHBOARD_URL + this.project_id + '/contacts'
+    this.dashboard_app_url = this.DASHBOARD_URL + this.project_id + '/app-store'
+    this.dashboard_analytics_url = this.DASHBOARD_URL + this.project_id + '/analytics'
+    this.dashboard_activities_url = this.DASHBOARD_URL + this.project_id + '/activities'
+    this.dashboard_history_url = this.DASHBOARD_URL + this.project_id + '/history'
+    this.dashboard_settings_url = ''
+    if (USER_ROLE !== 'agent') {
+      this.dashboard_settings_url = this.DASHBOARD_URL + this.project_id + '/widget-set-up'
+    } else if (USER_ROLE === 'agent') {
+      this.dashboard_settings_url = this.DASHBOARD_URL + this.project_id + '/cannedresponses'
+    }
+
+  }
+
   subcribeToAuthStateChanged() {
     this.messagingAuthService.BSAuthStateChanged.subscribe((state) => {
       this.logger.log('[SIDEBAR] BSAuthStateChanged ', state)
@@ -106,12 +153,12 @@ export class SidebarComponent implements OnInit {
   }
 
   checkIfExistPhotoProfile(imageUrl) {
-    this.verifyImageURL(imageUrl,  (imageExists) => {
+    this.verifyImageURL(imageUrl, (imageExists) => {
 
       if (imageExists === true) {
         this.USER_PHOTO_PROFILE_EXIST = true;
         this.logger.log('[SIDEBAR] photo_profile_URL IMAGE EXIST ', imageExists)
-      
+
       } else {
         this.USER_PHOTO_PROFILE_EXIST = false;
         this.logger.log('[SIDEBAR] photo_profile_URL IMAGE EXIST ', imageExists)
@@ -134,7 +181,7 @@ export class SidebarComponent implements OnInit {
       currentUser['fullname_initial'] = 'N/A'
       currentUser['fillColour'] = 'rgb(98, 100, 167)'
     }
-}
+  }
 
   verifyImageURL(image_url, callBack) {
     const img = new Image();
@@ -380,36 +427,21 @@ export class SidebarComponent implements OnInit {
 
 
 
-
-  getStoredProjectAndDashboardBaseUrl() {
-    const stored_project = localStorage.getItem('last_project')
-    // console.log('[SIDEBAR] stored_project ', stored_project)
-    if (stored_project) {
-      const project = JSON.parse(stored_project)
-      this.logger.log('[SIDEBAR] project ', project)
-
-      this.project_id = project.id_project.id
-      this.logger.log('[SIDEBAR] project_id ', this.project_id)
-
-      this.USER_ROLE = project.role;
-      this.logger.log('[SIDEBAR] USER_ROLE ', this.USER_ROLE)
-    }
-  }
-
   goToHome() {
     let url = this.DASHBOARD_URL + this.project_id + '/home'
+    this.dashboard_home_url = url;
     const myWindow = window.open(url, '_self');
     myWindow.focus();
   }
 
-  goToConversations() {
-    let url = this.DASHBOARD_URL + this.project_id + '/wsrequests'
+  goToBots() {
+    let url = this.DASHBOARD_URL + this.project_id + '/bots'
     const myWindow = window.open(url, '_self');
     myWindow.focus();
   }
 
-  goToBots() {
-    let url = this.DASHBOARD_URL + this.project_id + '/bots'
+  goToConversations() {
+    let url = this.DASHBOARD_URL + this.project_id + '/wsrequests'
     const myWindow = window.open(url, '_self');
     myWindow.focus();
   }
@@ -446,12 +478,28 @@ export class SidebarComponent implements OnInit {
     myWindow.focus();
   }
 
+  goToWidgetSetUpOrToCannedResponses() {
+    if (this.USER_ROLE !== 'agent') {
+      this.goToWidgetSetUp()
+    } else if (this.USER_ROLE === 'agent') {
+      this.goToSettings_CannedResponses()
+    }
+  }
+
+  goToWidgetSetUp() {
+    let url = this.DASHBOARD_URL + this.project_id + '/widget-set-up'
+    const myWindow = window.open(url, '_self');
+    myWindow.focus();
+  }
+
   goToSettings_CannedResponses() {
     let url = this.DASHBOARD_URL + this.project_id + '/cannedresponses'
     const myWindow = window.open(url, '_self');
     myWindow.focus();
   }
 
+
+
   public translations() {
     const keys = [
       'Available',

package/src/app/components/sidebar-user-details/sidebar-user-details.component.html

@@ -21,11 +21,11 @@
 
     <!-- (click)="goToUserProfile()" -->
     <div role="button" class="user-details-avatar">
-        <img  *ngIf="USER_PHOTO_PROFILE_EXIST" class="user-img-in-sidebar-user-details" [src]="photo_profile_URL"
+        <img *ngIf="USER_PHOTO_PROFILE_EXIST" class="user-img-in-sidebar-user-details" [src]="photo_profile_URL"
             onerror="this.src='assets/images/no_image_user.png'" />
 
-        <div *ngIf="!USER_PHOTO_PROFILE_EXIST"  class="user-img-in-sidebar-user-details"
-        [ngStyle]="{'background':  'linear-gradient(rgb(255,255,255) -125%,' + user?.fillColour + ')'}">
+        <div *ngIf="!USER_PHOTO_PROFILE_EXIST" class="user-img-in-sidebar-user-details"
+            [ngStyle]="{'background':  'linear-gradient(rgb(255,255,255) -125%,' + user?.fillColour + ')'}">
             <span id="sidebaravatar-altenative-user-avatar" class="sidebar-user-details-altenative-user-avatar">
                 {{ user?.fullname_initial }}
             </span>
@@ -76,7 +76,7 @@
     <section *ngIf="isVisiblePAY" class="user-details-plan-info">
         <span>
             <div> {{prjct_name}} </div>
-            <div  style="display: inline-block;"> {{ profile_name_translated }} </div>
+            <div style="display: inline-block;"> {{ profile_name_translated }} </div>
 
             <div *ngIf="plan_type === 'payment' && plan_subscription_is_active === false"
                 style="color:#f44336; position:relative; top: -1px;;display: inline-block;">
@@ -99,12 +99,23 @@
         border-top: 1px solid rgba(255, 255,255, 0.2);"> -->
 
 
-    <section class="user-details-footer-section" (click)=onLogout()
+    <section class="user-details-footer-section"
         [ngClass]="{'footer-margin-top-pricing-no-visible': isVisiblePAY === false }">
-        <i class="material-icons user-details-logout-icon">
-            logout
-        </i>
-        <div> Logout</div>
+        <div role="button" class="logout-btn-wpr" (click)=onLogout()>
+            <i class="material-icons user-details-logout-icon" >
+                logout
+            </i>
+            <div class="user-details-logout-text"> 
+                 {{LOGOUT_msg}} 
+            </div>
+        </div>
+    </section>
+
+    <section class="user-details-footer-chat-version">
+        <div class="chat-version">
+            <!-- &copy; {{test | date: 'yyyy'}} {{company_name}} ver {{version}} -->
+            ver {{version}}
+        </div>
     </section>
 
 </div>

package/src/app/components/sidebar-user-details/sidebar-user-details.component.scss

@@ -253,28 +253,45 @@ button.user-details-btn-close {
     margin: auto;
     position: absolute;
     text-align: center;
-    cursor: pointer;
+
     padding-bottom: 15px;
     padding-top: 200px;
     font-size: 16px;
     font-weight: 400;
     // bottom: 50px;
+    bottom: 55px;
     // top:355px
 }
 
+.logout-btn-wpr {
+    cursor: pointer;
+}
+
 .footer-margin-top-pricing-no-visible {
     padding-top: 240px;
 }
 .user-details-logout-icon {
     color: #a9afbb;
     font-size: 30px;
-    margin-top: 30px;
+    // margin-top: 30px;
 }
 
 .user-details-logout-icon:hover {
     color: #fff;
 }
 
+.user-details-footer-chat-version {
+    position: absolute;
+    bottom: 11px;
+    text-align: center;
+    margin: auto;
+    transform: translateX(-50%);
+    left: 50%;
+    margin: auto;
+    font-size: 12px;
+    font-weight: 400;
+}
+
 :host ::ng-deep .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
     background-color: #a9afbb;
     margin-left: 30px;
@@ -315,4 +332,4 @@ button.user-details-btn-close {
     font-weight: 400;
     font-family: "Poppins";
     font-size: 32px;
-}
+}

package/src/app/components/sidebar-user-details/sidebar-user-details.component.ts

@@ -11,7 +11,8 @@ import { skip } from 'rxjs/operators';
 import { AppConfigProvider } from 'src/app/services/app-config';
 import { EventsService } from 'src/app/services/events-service';
 import { tranlatedLanguage } from '../../../chat21-core/utils/constants';
-import { avatarPlaceholder,  getColorBck} from 'src/chat21-core/utils/utils-user';
+import { avatarPlaceholder, getColorBck } from 'src/chat21-core/utils/utils-user';
+import * as PACKAGE from 'package.json';
 @Component({
   selector: 'app-sidebar-user-details',
   templateUrl: './sidebar-user-details.component.html',
@@ -40,6 +41,7 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
   PAYD_PLAN_NAME_ENTERPRISE_msg: string;
   PRO_PLAN_TRIAL_msg: string;
   FREE_PLAN_msg: string;
+  LOGOUT_msg: string;
   profile_name_translated: string;
   SubscriptionPaymentProblem: string;
   user: any
@@ -53,8 +55,10 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
   public_Key: any
   plan_name: string;
   plan_subscription_is_active: boolean;
-   USER_PHOTO_PROFILE_EXIST: boolean;
- 
+  USER_PHOTO_PROFILE_EXIST: boolean;
+  version: string
+  test: Date = new Date();
+  company_name: string = 'Tiledesk'
   constructor(
     private translate: TranslateService,
     public tiledeskAuthService: TiledeskAuthService,
@@ -68,6 +72,7 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
   ) { }
 
   ngOnInit() {
+    this.version = PACKAGE.version;
     this.getCurrentChatLangAndTranslateLabels();
     this.subcribeToAuthStateChanged();
     this.listenTocurrentProjectUserUserAvailability$();
@@ -95,12 +100,12 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
   }
 
   checkIfExistPhotoProfile(imageUrl) {
-    this.verifyImageURL(imageUrl,  (imageExists) => {
+    this.verifyImageURL(imageUrl, (imageExists) => {
 
       if (imageExists === true) {
         this.USER_PHOTO_PROFILE_EXIST = true;
         this.logger.log('[SIDEBAR-USER-DETAILS] photo_profile_URL IMAGE EXIST ', imageExists)
-      
+
       } else {
         this.USER_PHOTO_PROFILE_EXIST = false;
         this.logger.log('[SIDEBAR-USER-DETAILS] photo_profile_URL IMAGE EXIST ', imageExists)
@@ -124,7 +129,7 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
       currentUser['fullname_initial'] = 'N/A'
       currentUser['fillColour'] = 'rgb(98, 100, 167)'
     }
-}
+  }
 
   verifyImageURL(image_url, callBack) {
     const img = new Image();
@@ -198,7 +203,7 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
       this.logger.log('[SIDEBAR-USER-DETAILS] chat_lang: ', this.chat_lang);
     }
 
-   
+
     if (tranlatedLanguage.includes(this.chat_lang)) {
       this.logger.log('[SIDEBAR-USER-DETAILS] tranlatedLanguage includes', this.chat_lang, ': ', tranlatedLanguage.includes(this.chat_lang))
       this.translate.use(this.chat_lang);
@@ -218,6 +223,7 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
     this.getIsBusyTranslation();
     this.getSubscriptionPaymentProblemTranslation();
     this.getThePlanHasExpiredTranslation();
+    this.getLogoutTranslation();
   }
 
 
@@ -276,6 +282,15 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
       });
   }
 
+  getLogoutTranslation() {
+    this.translate.get('LABEL_LOGOUT')
+      .subscribe((text: string) => {
+        // this.deleteContact_msg = text;
+        // console.log('[SIDEBAR-USER-DETAILS] - GET Logout label ', text)
+        this.LOGOUT_msg = text
+      });
+  }
+
   getSubscriptionPaymentProblemTranslation() {
     this.translate.get('SubscriptionPaymentProblem')
       .subscribe((text: string) => {
@@ -298,7 +313,7 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
   getCurrentStoredProject() {
     try {
       const project = localStorage.getItem('last_project')
-      if (project) {
+      if (project && project !== 'undefined') {
         const projectObjct = JSON.parse(localStorage.getItem('last_project'))
         // console.log('[SIDEBAR-USER-DETAILS] - GET STORED PROJECT ', projectObjct)
 
@@ -388,6 +403,7 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
       });
   }
 
+ 
 
 
   listenTocurrentProjectUserUserAvailability$() {

package/src/app/pages/conversation-detail/conversation-detail.module.ts

@@ -35,6 +35,9 @@ import { SharedModule } from 'src/app/shared/shared.module';
 // import { SharedConversationInfoModule } from 'src/app/shared/shared-conversation-info.module';
 import { NgxLinkifyjsModule } from 'ngx-linkifyjs';
 import { ScrollbarThemeModule } from '../../utils/scrollbar-theme.directive';
+import { PickerModule } from '@ctrl/ngx-emoji-mart';
+
+
 @NgModule({
   imports: [
     CommonModule,
@@ -43,6 +46,7 @@ import { ScrollbarThemeModule } from '../../utils/scrollbar-theme.directive';
     TooltipModule,
     ConversationDetailPageRoutingModule,
     ScrollbarThemeModule,
+    PickerModule,
     TranslateModule.forChild({
       loader: {
         provide: TranslateLoader,
@@ -58,7 +62,7 @@ import { ScrollbarThemeModule } from '../../utils/scrollbar-theme.directive';
   declarations: [
     ConversationDetailPage,
     HeaderConversationDetailComponent,
-    MessageTextAreaComponent,
+    MessageTextAreaComponent
     // BubbleDayMessageComponent,
     // BubbleSystemMessageComponent,
     // BubbleMyMessageComponent,