@chat21/chat21-ionic 3.0.61-rc5 → 3.0.61-rc7

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

@@ -1,68 +1,72 @@
 <!-- *ngIf="project"  -->
-<div class="logo" style="background-color:#1e2129!important; padding-bottom: 5px;min-height: 60px;    width: 60px;">
-  <a class="logo-img-wpr" [ngClass]="{'small-sidebar-logo-img-wpr' : SIDEBAR_IS_SMALL === true }">
+<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>
+  </a> -->
 
-<div class="sidebar-wrapper">
-  <!-- // NK start NEW: AVATAR ON THE SIDEBAR  -->
-  <div class="user tiledesk-nav-user" [ngClass]="{'small-sidebar-tiledesk-nav-user' : SIDEBAR_IS_SMALL === true }"
-    fxlayout="column" style="flex-direction: column; box-sizing: border-box; display: flex;">
-    <div class="h3 username" style="font-size: 16px;font-weight: 400;margin-top: 15px; margin-bottom: 5px;"
-      [ngClass]="{'small-sidebar-userfullname' : SIDEBAR_IS_SMALL === true }">
 
-      {{ user?.firstname }} {{ user?.lastname }}
-    </div>
-    <div class="h5 email hint-text mt-8"
-      style="color: rgba(255,255,255,.5)!important;font-size: 13px;margin-top: 0px!important;font-weight: 400;"
-      [ngClass]="{'small-sidebar-email' : SIDEBAR_IS_SMALL === true }">
-      {{ user?.email }}
-    </div>
 
+  <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}">
 
-    <div id="sidebaravatar-img-wpr" class="avatar-container tiledesk-nav-avatar" (click)="openUserDetailSidePanel()"
-      style="cursor: pointer;" [ngClass]="{'small-sidebar-avatar' : SIDEBAR_IS_SMALL === true }">
-      
-      <img id="sidebaravatar-img" class="sidebar-avatar" [src]="photo_profile_URL" onerror="this.src='assets/images/no_image_user.png'" />
+    <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  }">
+    <!-- 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>
-    <!-- CAMERA ICONS OVER THE AVATAR -->
-    <!--  [ngClass]="{'hover-effect' : isOverAvar}"  -->
-    <!-- <i class="material-icons is-over-camera"
-      [ngClass]="{'small-sidebar-camera-icon' : SIDEBAR_IS_SMALL === true, 'is-over-camera-decrease-top':IS_BUSY === true }">
-      camera_alt
-    </i> -->
-
-
-    <!-- matTooltipClass="custom-mat-tooltip" matTooltip="{{ 'Busy' | translate }}" #tooltip="matTooltip"  matTooltipPosition='right' matTooltipHideDelay="100" -->
-    <div id="sidebaravatar-isbusy-icon-wpr" class="sidebar--isBusy-icon-wpr" *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  }" -->
-    <ul style="padding-bottom: 65px;" class="nav">
+    <!-- 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">
-        <a class="customAncor">
-          <i class="material-icons sidebar-icons">chat</i>
+        #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>
 
@@ -78,21 +82,65 @@
         </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>
+
       <!-- ------------------------------------------- -->
       <!-- REQUESTS (VISITORS)  -->
       <!-- ------------------------------------------- -->
-      <li (click)="goToConversations()"
-         matTooltipClass="custom-mat-tooltip" matTooltip="{{ conversations_lbl }}" #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100">
-        <a class="customAncor">
-          <i class="material-icons sidebar-icons">forum</i>
+      <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: 25px; margin-top: 7px;">
+       
+                <g>
+                  <rect y="0" class="realtime-icon-st0" width="24" height="24"/>
+                </g>
+              <path class="realtime-icon-st1" d="M21,10.3h-4.7l-4.2,3.3L6,7.7L3,9.8v2.5l2.8-2l6.2,6l5-4h4V10.3z"/>
+            </svg>
+          </span>
+       
         </a>
       </li>
 
+
+
       <!-- ------------------------------------------- -->
       <!-- CONTACTS (LEADS)  -->
       <!-- ------------------------------------------- -->
-      <li (click)="goToContacts()"
-      matTooltipClass="custom-mat-tooltip" matTooltip="{{ contacts_lbl }}" #tooltip="matTooltip" matTooltipPosition='right'  matTooltipHideDelay="100">
+      <li (click)="goToContacts()" matTooltipClass="custom-mat-tooltip" matTooltip="{{ contacts_lbl }}"
+        #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100">
         <a class="customAncor">
           <i class="material-icons sidebar-icons">contacts</i>
         </a>
@@ -102,10 +150,12 @@
       <!-- APPS  -->
       <!-- ------------------------------------------- -->
       <ng-container *ngIf="isVisibleAPP && USER_ROLE !== 'agent'">
-        <li (click)="goToAppStore()"
-        matTooltipClass="custom-mat-tooltip" matTooltip="{{ apps_lbl }}" #tooltip="matTooltip" matTooltipPosition='right'  matTooltipHideDelay="100" >
+        <li (click)="goToAppStore()" matTooltipClass="custom-mat-tooltip" matTooltip="{{ apps_lbl }}"
+          #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100">
           <a class="customAncor">
-            <i class="material-icons sidebar-icons">apps</i>
+            <!-- <i class="material-icons sidebar-icons">apps</i> -->
+            <i class="material-icons sidebar-icons">dashboard_customize</i>
+            
           </a>
         </li>
       </ng-container>
@@ -114,10 +164,13 @@
       <!-- ANALYTICS -->
       <!-- ------------------------------------------- -->
       <ng-container *ngIf="isVisibleANA && USER_ROLE !== 'agent'">
-        <li (click)="goToAnalytics()" 
-        matTooltipClass="custom-mat-tooltip" matTooltip="{{ analytics_lbl }}"  #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100">
+        <li (click)="goToAnalytics()" matTooltipClass="custom-mat-tooltip" matTooltip="{{ analytics_lbl }}"
+          #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100">
           <a class="customAncor">
-            <i class="material-icons sidebar-icons">trending_up</i>
+            <!-- <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>
+           
           </a>
         </li>
       </ng-container>
@@ -126,8 +179,8 @@
       <!-- 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">
+        <li *ngIf="USER_ROLE !== 'agent'" (click)="goToActivities()" matTooltipClass="custom-mat-tooltip"
+          matTooltip="{{ activities_lbl }}" #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100">
           <a class="customAncor">
             <i class="material-icons sidebar-icons">assignment</i>
           </a>
@@ -138,8 +191,8 @@
       <!-- ------------------------------------------- -->
       <!-- REQUESTS HISTORY -->
       <!-- ------------------------------------------- -->
-      <li (click)="goToHistory()" 
-        matTooltipClass="custom-mat-tooltip" matTooltip="{{ history_lbl }}"  #tooltip="matTooltip"   matTooltipPosition='right' matTooltipHideDelay="100">
+      <li (click)="goToHistory()" matTooltipClass="custom-mat-tooltip" matTooltip="{{ history_lbl }}"
+        #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100">
         <a class="customAncor">
           <i class="material-icons sidebar-icons">history</i>
         </a>
@@ -148,8 +201,8 @@
       <!-- ------------------------------------------- -->
       <!-- SETTINGS -->
       <!-- ------------------------------------------- -->
-      <li *ngIf="USER_ROLE !== 'agent'" (click)="goToSettings_CannedResponses()"
-      matTooltipClass="custom-mat-tooltip" matTooltip="{{ settings_lbl }}"  #tooltip="matTooltip"   matTooltipPosition='right' matTooltipHideDelay="100">
+      <li *ngIf="USER_ROLE !== 'agent'" (click)="goToSettings_CannedResponses()" matTooltipClass="custom-mat-tooltip"
+        matTooltip="{{ settings_lbl }}" #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100">
         <a class="customAncor">
           <i class="material-icons sidebar-icons">settings</i>
         </a>
@@ -161,12 +214,12 @@
   [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;"  -->
+      <!-- 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    
+      <!-- <app-sidebar-user-details    
   (onCloseUserDetailsSidebar)='onCloseUserDetailsSidebar($event)'>
 </app-sidebar-user-details> -->
 

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

@@ -1,15 +1,53 @@
 ::ng-deep .custom-mat-tooltip {
-  background-color: #2d323e;
-  font-size: 12px;
+  background-color: #2d323e  !important;
+  font-size: 12px  !important;
+  border-radius: 2px !important;
+  font-family: 'Poppins' !important;
 }
 
 .sidebar-is-busy-icon {
-  font-size: 14px;
+  font-size: 12px;
   color: #feb92c;
   background-color: #2d323e;
   border-radius: 50%;
 }
 
+.chat-bot-icon-st0 {
+  // fill: #a9afbb;
+  fill: #647491
+}
+.chat-bot-icon-st1 {
+  fill: none;
+}
+
+.realtime-icon-st0{
+  fill:none;
+}
+
+.realtime-icon-st1{
+  fill:#647491;
+}
+
+#bot-anchor-wpr:hover > #bot-anchor > .bot-icon-wpr > svg > g > g > .chat-bot-icon-st0 {
+  fill: #a9afbb ;
+}
+
+li:hover > a > .realtime-icon-wpr > svg  > path {
+  fill: #a9afbb;
+}
+
+#sidebaravatar-altenative-user-avatar {
+  // line-height: 2.9;
+  font-weight: 400;
+  font-family: "Poppins";
+  left: 50%;
+  top: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+  position: absolute;
+  font-size:14px
+}
+
 // #sidebar_wrapper::-webkit-scrollbar {
 //   width: 6px;
 // }

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

@@ -10,6 +10,10 @@ import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 import { TranslateService } from '@ngx-translate/core';
 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';
 
 @Component({
   selector: 'app-sidebar',
@@ -43,6 +47,8 @@ export class SidebarComponent implements OnInit {
   history_lbl: string;
   settings_lbl: string;
   countClickOnOpenUserDetailSidebar: number = 0
+  USER_PHOTO_PROFILE_EXIST: boolean;
+  currentUser: any;
   constructor(
     public imageRepoService: ImageRepoService,
     public appStorageService: AppStorageService,
@@ -52,7 +58,8 @@ export class SidebarComponent implements OnInit {
     public wsService: WebsocketService,
     public appConfigProvider: AppConfigProvider,
     private translate: TranslateService,
-    public events: EventsService
+    public events: EventsService,
+   
   ) { }
 
   ngOnInit() {
@@ -63,6 +70,81 @@ export class SidebarComponent implements OnInit {
     this.listenTocurrentProjectUserUserAvailability$()
     this.getOSCODE();
     this.getCurrentChatLangAndTranslateLabels();
+
+    // this.loggedUser = this.chatManager.getCurrentUser();
+    // if (this.loggedUser) {
+    //   this.itemAvatar = {
+    //     imageurl: this.imageRepoService.getImagePhotoUrl(this.loggedUser.uid),
+    //     avatar: this.loggedUser.avatar,
+    //     color: this.loggedUser.color,
+    //     online: this.loggedUser.online,
+    //     lastConnection: this.loggedUser.lastConnection,
+    //     status: '',
+    //     width: '35px',
+    //     height: '35px'
+    //   };
+    // }
+  }
+
+
+  subcribeToAuthStateChanged() {
+    this.messagingAuthService.BSAuthStateChanged.subscribe((state) => {
+      this.logger.log('[SIDEBAR] BSAuthStateChanged ', state)
+
+      if (state === 'online') {
+        this.currentUser = JSON.parse(this.appStorageService.getItem('currentUser'));
+        this.logger.log('[SIDEBAR] currentUser ', this.currentUser)
+        if (this.currentUser) {
+          this.createUserAvatar(this.currentUser)
+          this.photo_profile_URL = this.imageRepoService.getImagePhotoUrl(this.currentUser.uid)
+          this.logger.log('[SIDEBAR] photo_profile_URL ', this.photo_profile_URL)
+          this.checkIfExistPhotoProfile(this.photo_profile_URL)
+        }
+
+      }
+    })
+  }
+
+  checkIfExistPhotoProfile(imageUrl) {
+    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)
+      }
+    })
+  }
+
+  createUserAvatar(currentUser) {
+    this.logger.log('[SIDEBAR] - createProjectUserAvatar ', currentUser)
+    let fullname = ''
+    if (currentUser && currentUser.firstname && currentUser.lastname) {
+      fullname = currentUser.firstname + ' ' + currentUser.lastname
+      currentUser['fullname_initial'] = avatarPlaceholder(fullname)
+      currentUser['fillColour'] = getColorBck(fullname)
+    } else if (currentUser && currentUser.firstname) {
+      fullname = currentUser.firstname
+      currentUser['fullname_initial'] = avatarPlaceholder(fullname)
+      currentUser['fillColour'] = getColorBck(fullname)
+    } else {
+      currentUser['fullname_initial'] = 'N/A'
+      currentUser['fillColour'] = 'rgb(98, 100, 167)'
+    }
+}
+
+  verifyImageURL(image_url, callBack) {
+    const img = new Image();
+    img.src = image_url;
+    img.onload = function () {
+      callBack(true);
+    };
+    img.onerror = function () {
+      callBack(false);
+    };
   }
 
   getCurrentChatLangAndTranslateLabels() {
@@ -85,11 +167,15 @@ export class SidebarComponent implements OnInit {
       this.logger.log('[SIDEBAR] chat_lang: ', chat_lang);
     } else if (browserLang && stored_preferred_lang) {
       chat_lang = stored_preferred_lang
-
       this.logger.log('[SIDEBAR] chat_lang: ', chat_lang);
     }
-
-    this.translate.use(chat_lang);
+    if (tranlatedLanguage.includes(chat_lang)) {
+      this.logger.log('[SIDEBAR] tranlatedLanguage includes', chat_lang, ': ', tranlatedLanguage.includes(chat_lang))
+      this.translate.use(chat_lang);
+    } else {
+      this.logger.log('[SIDEBAR] tranlatedLanguage includes', chat_lang, ': ', tranlatedLanguage.includes(chat_lang))
+      this.translate.use('en');
+    }
     this.translateLabels()
   }
 
@@ -277,36 +363,22 @@ export class SidebarComponent implements OnInit {
   }
 
   // onCloseUserDetailsSidebar($event) {
-    // this.logger.log('[SIDEBAR-CHAT] HAS_CLICKED_CLOSE_USER_DETAIL ', $event)
-    // this.HAS_CLICKED_OPEN_USER_DETAIL = $event
-    // const elemNavbar = <HTMLElement>document.querySelector('.navbar-absolute');
-    // this.logger.log('[SIDEBAR] elemNavBar ', elemNavbar)
-    // if (elemNavbar) {
-    //   elemNavbar.classList.remove("navbar-absolute-custom-class")
-    // }
-
-    // const elemNavbarBrand = <HTMLElement>document.querySelector('.navbar-brand');
-    // this.logger.log('[SIDEBAR] elemNavbarBrand ', elemNavbarBrand)
-    // if (elemNavbarBrand) {
-    //   elemNavbarBrand.classList.remove("navbar-brand-z-index-zero")
-    // }
+  // this.logger.log('[SIDEBAR-CHAT] HAS_CLICKED_CLOSE_USER_DETAIL ', $event)
+  // this.HAS_CLICKED_OPEN_USER_DETAIL = $event
+  // const elemNavbar = <HTMLElement>document.querySelector('.navbar-absolute');
+  // this.logger.log('[SIDEBAR] elemNavBar ', elemNavbar)
+  // if (elemNavbar) {
+  //   elemNavbar.classList.remove("navbar-absolute-custom-class")
   // }
 
-  subcribeToAuthStateChanged() {
-    this.messagingAuthService.BSAuthStateChanged.subscribe((state) => {
-      this.logger.log('[SIDEBAR] BSAuthStateChanged ', state)
+  // const elemNavbarBrand = <HTMLElement>document.querySelector('.navbar-brand');
+  // this.logger.log('[SIDEBAR] elemNavbarBrand ', elemNavbarBrand)
+  // if (elemNavbarBrand) {
+  //   elemNavbarBrand.classList.remove("navbar-brand-z-index-zero")
+  // }
+  // }
 
-      if (state === 'online') {
-        const currentUser = JSON.parse(this.appStorageService.getItem('currentUser'));
-        this.logger.log('[SIDEBAR] currentUser ', currentUser)
-        if (currentUser) {
-          this.photo_profile_URL = this.imageRepoService.getImagePhotoUrl(currentUser.uid)
-          this.logger.log('[SIDEBAR] photo_profile_URL ', this.photo_profile_URL)
-        }
 
-      }
-    })
-  }
 
 
   getStoredProjectAndDashboardBaseUrl() {
@@ -336,6 +408,12 @@ export class SidebarComponent implements OnInit {
     myWindow.focus();
   }
 
+  goToBots() {
+    let url = this.DASHBOARD_URL + this.project_id + '/bots'
+    const myWindow = window.open(url, '_self');
+    myWindow.focus();
+  }
+
   goToContacts() {
     let url = this.DASHBOARD_URL + this.project_id + '/contacts'
     const myWindow = window.open(url, '_self');

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

@@ -21,8 +21,16 @@
 
     <!-- (click)="goToUserProfile()" -->
     <div role="button" class="user-details-avatar">
-        <img 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 + ')'}">
+            <span id="sidebaravatar-altenative-user-avatar" class="sidebar-user-details-altenative-user-avatar">
+                {{ user?.fullname_initial }}
+            </span>
+        </div>
+
     </div>
 
     <div class="user-details-user-isbusy" *ngIf="IS_BUSY === true" style="cursor:pointer"

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

@@ -14,7 +14,7 @@
     // transform: translate(60px);
     transition: transform 0.5s;
     width: 305px;
-    left: -245px
+    left: -245px;
     //    z-index: 1029;
     // transform: translateX(-100%);
     // -webkit-transform: translateX(-100%);
@@ -90,14 +90,15 @@ button.user-details-btn-close {
 }
 
 .user-details-dshbrd-lang-code {
-    text-transform: uppercase;color: #647491;
+    text-transform: uppercase;
+    color: #647491;
     font-family: "Roboto", sans-serif !important;
     font-size: 14px;
 }
 
 .user-details-avatar {
     text-align: center;
-    cursor: pointer;
+    // cursor: pointer;
     position: absolute;
     top: 82px;
     border-radius: 50%;
@@ -139,10 +140,9 @@ button.user-details-btn-close {
     text-align: center;
     margin-bottom: 5px;
     font-size: 16px;
-    font-family: 'Poppins';
+    font-family: "Poppins";
     font-weight: 500;
     line-height: 24px;
-   
 }
 
 .user-details-email {
@@ -157,10 +157,10 @@ button.user-details-btn-close {
     font-size: 14px;
     text-align: center;
     margin-top: 5px;
-    font-family: 'Poppins';
+    font-family: "Poppins";
     font-weight: 400;
     line-height: 1px;
-   
+    white-space: nowrap;
 }
 
 .user-details-role {
@@ -178,8 +178,7 @@ button.user-details-btn-close {
     text-transform: uppercase;
     color: #a9afbb;
     font-weight: 500;
-    font-family: 'Roboto', sans-serif !important;
-   
+    font-family: "Roboto", sans-serif !important;
 }
 
 .availability-section {
@@ -199,7 +198,7 @@ button.user-details-btn-close {
 .first-divider {
     margin-top: 355px;
     border: 0;
-    border-top: 1px solid rgba(255, 255,255, 0.2);
+    border-top: 1px solid rgba(255, 255, 255, 0.2);
     margin-bottom: 20px;
 }
 
@@ -226,17 +225,17 @@ button.user-details-btn-close {
     background-color: #2d323e;
     border-radius: 50%;
     position: absolute;
-    top: 92px;
-    width: 24px;
-    height: 24px;
+    top: 96px;
+    width: 21px;
+    height: 21px;
     left: 101px;
 }
 
 .user-details-user-isbusy-icon {
     font-size: 18px !important;
     position: relative;
-    top: 3px;
-    left: 3px;
+    top: 2px;
+    left: 2px;
 }
 
 .user-details-plan-info {
@@ -305,6 +304,15 @@ button.user-details-btn-close {
 }
 
 ::ng-deep .custom-mat-tooltip {
-    background-color: #2d323e;
-    font-size: 12px;
+    background-color: #2d323e !important;
+    font-size: 12px !important;
+    border-radius: 2px !important;
+    font-family: "Poppins" !important;
 }
+
+.sidebar-user-details-altenative-user-avatar {
+    line-height: 3.2;
+    font-weight: 400;
+    font-family: "Poppins";
+    font-size: 32px;
+}