@chat21/chat21-ionic 3.4.27-rc3 → 3.4.27-rc5

package/CHANGELOG.md

@@ -8,6 +8,14 @@
 ### **Copyrigth**: 
 *Tiledesk SRL*
 
+# 3.4.27-rc5
+- **added**: managed roles in sidebar e navbar
+- **bug-fixed**: projectId and supportMode url is not saved in localstorage
+
+# 3.4.27-rc4
+- **bug-fixed**: extractUrls function is not able to detect url start with www or without https/http
+- **bug-fixed**: if message is sent with keydown, error on domain check is not showed
+
 # 3.4.27-rc3
 - **bug-fixed**: cannot set user availability if supportMode is enabled and tiledesk_projectID url params is set
 

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@chat21/chat21-ionic",
     "author": "Tiledesk SRL",
-    "version": "3.4.27-rc3",
+    "version": "3.4.27-rc5",
     "license": "MIT License",
     "homepage": "https://tiledesk.com/",
     "repository": {

package/src/app/app.component.ts

@@ -300,6 +300,7 @@ export class AppComponent implements OnInit {
         this.zone = new NgZone({}); // a cosa serve?
 
         this.SUPPORT_MODE = this.g.supportMode
+        this.logger.info('[APP-COMP] this.SUPPORT_MODE', this.SUPPORT_MODE)
       }
 
     });
@@ -868,7 +869,8 @@ export class AppComponent implements OnInit {
       // console.log('[APP-COMP] PLATFORM', PLATFORM_MOBILE, 'route.snapshot', this.route.snapshot);
       if (!IDConv) {
         this.logger.log('[APP-COMP]  navigateByUrl -- conversations-list');
-        this.router.navigateByUrl('conversations-list')
+        const queryString = window.location.search; // restituisce ad es. "?jwt=...&tiledesk_supportMode=false"
+        this.router.navigateByUrl('conversations-list' + queryString);
       }
       // this.router.navigateByUrl(pageUrl);
       // this.navService.setRoot(ConversationListPage, {});
@@ -892,6 +894,11 @@ export class AppComponent implements OnInit {
       if (IDConv && FullNameConv) {
         pageUrl += IDConv + '/' + FullNameConv + '/' + Convtype
       }
+
+      const queryParams = this.route.snapshot.queryParams;
+      const queryString = new URLSearchParams(queryParams).toString();
+      pageUrl += queryString ? `?${queryString}` : '';
+
       // replace(/\(/g, '%28').replace(/\)/g, '%29') -> used for the encoder of any round brackets
       this.router.navigateByUrl(pageUrl.replace(/\(/g, '%28').replace(/\)/g, '%29').replace( /#/g, "%23" ));
 

package/src/app/components/canned-response/canned-response.component.scss

@@ -278,7 +278,5 @@ ion-item {
         display: flex;
         justify-content: center;
         flex-direction: column;
-        align-items: center;
-
     }
 }

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

@@ -566,8 +566,10 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
       if (!text.includes("/")) {
         this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] onKeydown - SEND MESSAGE 1 message: ', message);
         this.logger.log("[CONVS-DETAIL] replaceTagInMessage onKeydown in msg-texarea  SEND MESSAGE 1 message: ", message);
-        this.messageString = '';
+        
         this.sendMessage(text);
+        // this.messageString = '';
+
         this.countClicks = 0
       } else if (text.includes("/") && pos === 0 && this.countClicks > 1 && this.tagsCannedFilter.length > 0) {
         this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] onKeydown - tagsCannedFilter.length 2: ', this.tagsCannedFilter.length);
@@ -579,9 +581,10 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
         this.logger.log("[CONVS-DETAIL] replaceTagInMessage onKeydown in msg-texarea SEND MESSAGE 2 this.countClicks: ", this.countClicks);
         this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] onKeydown in msg-texarea SEND MESSAGE 2 this.countClicks: ", this.countClicks);
         this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] onKeydown - SEND MESSAGE 2 message: ', message);
-        this.messageString = '';
-
+        
         this.sendMessage(text);
+        // this.messageString = '';
+
         this.countClicks = 0
       } else if (text.includes("/") && pos > 0 && this.countClicks > 1 && this.tagsCannedFilter.length > 0 && text.substr(-1) !== '/') {
         this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] onKeydown - tagsCannedFilter.length 3: ', this.tagsCannedFilter.length);
@@ -593,17 +596,19 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
         this.logger.log("[CONVS-DETAIL] replaceTagInMessage onKeydown in msg-texarea SEND MESSAGE 2 this.countClicks: ", this.countClicks);
         this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] onKeydown in msg-texarea SEND MESSAGE 2 this.countClicks: ", this.countClicks);
         this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] onKeydown - SEND MESSAGE 2 message: ', message);
-        this.messageString = '';
-
+        
         this.sendMessage(text);
+        // this.messageString = '';
+
         this.countClicks = 0
       } else if (text.includes("/") && this.tagsCannedFilter.length === 0) {
         this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] onKeydown - tagsCannedFilter.length 3: ', this.tagsCannedFilter.length);
         this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] onKeydown - SEND MESSAGE 3 message: ', message);
         this.logger.log("[CONVS-DETAIL] replaceTagInMessage onKeydown in msg-texarea SEND MESSAGE 3 message: ", message);
-        this.messageString = '';
-
+        
         this.sendMessage(text);
+        // this.messageString = '';
+
         this.countClicks = 0
 
       }

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

@@ -5,7 +5,7 @@
       </div>
       <div class="navbar-right">
         <!-- test site -->
-        <ng-container *ngIf="project">
+        <ng-container *ngIf="project && roles?.[PERMISSIONS.SIMULATE_CONV]">
           <button class="btn simulate-visitor-btn" (click)="testWidgetPage()">
             <i class="material-icons">play_arrow</i>
             <!-- {{translationsMap?.get('NAVBAR.SIMULATE_VISITOR')}} -->
@@ -23,7 +23,7 @@
         </ng-container>
 
         <!--  ------ PROJECTS  DROPDOWN ------ -->
-        <ng-container *ngIf="project">
+        <ng-container *ngIf="project && roles?.[PERMISSIONS.CHANGE_PROJECT]">
             <li>
               <button class="btn dropdown-toggle project-dropdown" (click)="openDropdownProjects = !openDropdownProjects">
                 <span class="project-dropdown" style="text-transform: none"> {{ project?.id_project?.name }} </span>
@@ -49,7 +49,7 @@
                 </li>
   
                 <!--  ADD PROJECT -->
-                <li id="navbar_create_prjct" *ngIf="MT === true" (click)="onClickDropdownOption('addProject')" class="add-project">
+                <li id="navbar_create_prjct" *ngIf="isVisibleMT" (click)="onClickDropdownOption('addProject')" class="add-project">
                   <a>
                     <i class="material-icons">add_circle_outline </i>
                     {{translationsMap?.get('NAVBAR.ADD_PROJECT')}}

package/src/app/components/navbar/navbar.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 { Project } from 'src/chat21-core/models/projects';
 import { CustomTranslateService } from 'src/chat21-core/providers/custom-translate.service';
+import { ProjectUsersService } from 'src/app/services/project_users/project-users.service';
+import { ProjectUser } from 'src/chat21-core/models/projectUsers';
+import { PERMISSIONS } from 'src/app/utils/permissions.constants';
+import { getOSCode, hasRole } from 'src/app/utils/utils';
 
 @Component({
   selector: 'app-navbar',
@@ -30,10 +34,14 @@ export class NavbarComponent implements OnInit {
   public openDropdownProjects: boolean = false
   private public_Key: string;
   public isVisible: boolean;
-  public MT: boolean;
+  public isVisibleMT: boolean;
 
+  public projectUser: ProjectUser;
+  public roles: { [key: string]: boolean }
+  PERMISSIONS = PERMISSIONS;
   constructor(
     private projectService: ProjectService,
+    public projectUsersService: ProjectUsersService,
     private tiledeskAuthService: TiledeskAuthService,
     private appConfigProvider: AppConfigProvider,
     private translateService: CustomTranslateService, 
@@ -96,11 +104,14 @@ export class NavbarComponent implements OnInit {
   }
 
   getStoredProjectAndUserRole() {
-    this.events.subscribe('storage:last_project',project =>{
+    this.events.subscribe('storage:last_project',async (project) =>{
       this.logger.log('[NAVBAR] stored_project ', project)
       if (project && project !== 'undefined') {
         this.project = project;
         this.USER_ROLE = project.role;
+        this.projectUser = await this.projectUsersService.getProjectUserByProjectId(project.id_project.id)
+        this.roles = this.checkRoles()
+        console.log('[SIDEBAR] roles ', this.roles)
       }
     })
   }
@@ -108,44 +119,24 @@ export class NavbarComponent implements OnInit {
   getOSCODE() {
     this.public_Key = this.appConfigProvider.getConfig().t2y12PruGU9wUtEGzBJfolMIgK;
     this.logger.log('[NAVBAR] AppConfigService getAppConfig public_Key', this.public_Key)
-    this.logger.log('[NAVBAR] public_Key', this.public_Key)
-
-    let keys = this.public_Key.split("-");
-    // this.logger.log('PUBLIC-KEY (Navbar) - public_Key keys', keys)
-
-    keys.forEach(key => {
-        // this.logger.log('NavbarComponent public_Key key', key)
-        if (key.includes("PAY")) {
-            // this.logger.log('PUBLIC-KEY (Navbar) - key', key);
-            let pay = key.split(":");
-            // this.logger.log('PUBLIC-KEY (Navbar) - pay key&value', pay);
-            if (pay[1] === "F") {
-                this.isVisible = false;
-                // this.logger.log('PUBLIC-KEY (Navbar) - pay isVisible', this.isVisible);
-            } else {
-                this.isVisible = true;
-                // this.logger.log('PUBLIC-KEY (Navbar) - pay isVisible', this.isVisible);
-            }
-        }
-
-        if (key.includes("MTT")) {
-            // this.logger.log('PUBLIC-KEY (Navbar) - key', key);
-            let mt = key.split(":");
-            // this.logger.log('PUBLIC-KEY (Navbar) - mt key&value', mt);
-            if (mt[1] === "F") {
-                this.MT = false;
-                // this.logger.log('PUBLIC-KEY (Navbar) - mt is', this.MT);
-            } else {
-                this.MT = true;
-                // this.logger.log('PUBLIC-KEY (Navbar) - mt is', this.MT);
-            }
-        }
-    });
+    
+    this.isVisibleMT = getOSCode("MTT", this.public_Key);
+
+  }
+
+  checkRoles(): { [key: string]: boolean } {
+    const permissionKeys = [
+      'CHANGE_PROJECT',
+      'SIMULATE_CONV',
+    ] as const;
 
-    if (!this.public_Key.includes("MTT")) {
-        this.MT = false;
-        // this.logger.log('PUBLIC-KEY (Navbar) - mt is', this.MT);
+    const roles: { [key: string]: boolean } = {};
+    for (const key of permissionKeys) {
+      const permission = PERMISSIONS[key];
+      roles[permission] = hasRole(this.projectUser, permission);
     }
+    
+    return roles;
 
   }
 

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

@@ -57,25 +57,27 @@
       <!-- ------------------------------------------- -->
       <!-- HOME   (click)="goToHome()"" -->
       <!-- ------------------------------------------- -->
-      <div  matTooltip="Home" #tooltip="matTooltip" matTooltipPosition='right'
-        matTooltipHideDelay="100" matTooltipClass="custom-mat-tooltip">
-        <a target="_self" href="{{ dashboard_home_url }}" class="customAncor">
-          <span>
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" width="24px" height="24px" fill="none">
-              <path d="M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z" />
-            </svg>
-          </span>
-        </a>
-      </div>
+      <ng-container *ngIf="roles?.[PERMISSIONS.HOME_READ]"> 
+        <div  matTooltip="Home" #tooltip="matTooltip" matTooltipPosition='right'
+          matTooltipHideDelay="100" matTooltipClass="custom-mat-tooltip">
+          <a target="_self" href="{{ URLS.HOME }}" class="customAncor">
+            <span>
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" width="24px" height="24px" fill="none">
+                <path d="M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z" />
+              </svg>
+            </span>
+          </a>
+        </div>
+      </ng-container>
 
       <!-- -------------------------------------------------------- -->
       <!--  @ Knowledge Bases  -->
       <!-- -------------------------------------------------------- -->
-      <ng-container *ngIf="USER_ROLE !== 'agent' && isVisibleKNB">
+      <ng-container *ngIf="USER_ROLE !== 'agent' && isVisibleKNB && roles?.[PERMISSIONS.KB_READ]">
         <div id="bot-anchor-wpr" matTooltipClass="custom-mat-tooltip"
-          matTooltip="Knowledge Bases" #tooltip="matTooltip" matTooltipPosition='right'
+          matTooltip="{{translationsMap?.get('Knowledgebases')}}" #tooltip="matTooltip" matTooltipPosition='right'
           matTooltipHideDelay="100" routerLinkActive="item-active">
-          <a target="_self" href="{{ dashboard_knb_url }}" class="customAncor">
+          <a target="_self" href="{{ URLS.KNOWLEDGEBASE }}" class="customAncor">
             <span>
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" width="24px" height="24px" fill="none">
                 <path d="M390-120q-51 0-88-35.5T260-241q-60-8-100-53t-40-106q0-21 5.5-41.5T142-480q-11-18-16.5-38t-5.5-42q0-61 40-105.5t99-52.5q3-51 41-86.5t90-35.5q26 0 48.5 10t41.5 27q18-17 41-27t49-10q52 0 89.5 35t40.5 86q59 8 99.5 53T840-560q0 22-5.5 42T818-480q11 18 16.5 38.5T840-400q0 62-40.5 106.5T699-241q-5 50-41.5 85.5T570-120q-25 0-48.5-9.5T480-156q-19 17-42 26.5t-48 9.5Zm130-590v460q0 21 14.5 35.5T570-200q20 0 34.5-16t15.5-36q-21-8-38.5-21.5T550-306q-10-14-7.5-30t16.5-26q14-10 30-7.5t26 16.5q11 16 28 24.5t37 8.5q33 0 56.5-23.5T760-400q0-5-.5-10t-2.5-10q-17 10-36.5 15t-40.5 5q-17 0-28.5-11.5T640-440q0-17 11.5-28.5T680-480q33 0 56.5-23.5T760-560q0-33-23.5-56T680-640q-11 18-28.5 31.5T613-587q-16 6-31-1t-20-23q-5-16 1.5-31t22.5-20q15-5 24.5-18t9.5-30q0-21-14.5-35.5T570-760q-21 0-35.5 14.5T520-710Zm-80 460v-460q0-21-14.5-35.5T390-760q-21 0-35.5 14.5T340-710q0 16 9 29.5t24 18.5q16 5 23 20t2 31q-6 16-21 23t-31 1q-21-8-38.5-21.5T279-640q-32 1-55.5 24.5T200-560q0 33 23.5 56.5T280-480q17 0 28.5 11.5T320-440q0 17-11.5 28.5T280-400q-21 0-40.5-5T203-420q-2 5-2.5 10t-.5 10q0 33 23.5 56.5T280-320q20 0 37-8.5t28-24.5q10-14 26-16.5t30 7.5q14 10 16.5 26t-7.5 30q-14 19-32 33t-39 22q1 20 16 35.5t35 15.5q21 0 35.5-14.5T440-250Zm40-230Z" />
@@ -89,10 +91,10 @@
       <!-- ---------------------------------- -->
       <!-- Bot  (click)="goToBots()"  -->
       <!-- ---------------------------------- -->
-      <ng-container *ngIf="USER_ROLE !== 'agent'">
-        <div  id="bot-anchor-wpr" matTooltipClass="custom-mat-tooltip" matTooltip="Bots"
+      <ng-container *ngIf="USER_ROLE !== 'agent' && roles?.[PERMISSIONS.FLOWS_READ]">
+        <div  id="bot-anchor-wpr" matTooltipClass="custom-mat-tooltip" matTooltip="{{translationsMap?.get('Flows')}}"
           #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100">
-          <a target="_self" href="{{ dashboard_bots_url }}" id="bot-anchor" #botbtn class="customAncor">
+          <a target="_self" href="{{ URLS.BOTS }}" id="bot-anchor" #botbtn class="customAncor">
             <span class="bot-icon-wpr">
               <svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"width="24px" height="24px" fill="none">
                 <path  d="M12,21.9c-1,0-1.8-0.3-2.5-1c-0.7-0.7-1-1.5-1-2.5c0-0.8,0.3-1.6,0.8-2.2c0.5-0.6,1.2-1,1.9-1.2v-2.3H5.5V9H3 V2.5h6.4V9H7v2.3h10V8.9c-0.8-0.2-1.4-0.6-1.9-1.2c-0.5-0.6-0.8-1.3-0.8-2.2c0-1,0.3-1.8,1-2.5c0.7-0.7,1.5-1,2.5-1 c1,0,1.8,0.3,2.5,1c0.7,0.7,1,1.5,1,2.5c0,0.8-0.3,1.6-0.8,2.2c-0.5,0.6-1.2,1-1.9,1.2v3.9h-5.7v2.3c0.8,0.2,1.4,0.6,1.9,1.2 c0.5,0.6,0.8,1.3,0.8,2.2c0,1-0.3,1.8-1,2.5C13.8,21.6,13,21.9,12,21.9z M17.8,7.5c0.5,0,1-0.2,1.4-0.6c0.4-0.4,0.6-0.8,0.6-1.4 c0-0.5-0.2-1-0.6-1.4c-0.4-0.4-0.8-0.6-1.4-0.6c-0.5,0-1,0.2-1.4,0.6C16,4.5,15.8,5,15.8,5.5c0,0.5,0.2,1,0.6,1.4S17.2,7.5,17.8,7.5 z M4.5,7.5H8V4H4.5C4.5,4,4.5,7.5,4.5,7.5z M12,20.4c0.5,0,1-0.2,1.4-0.6S14,19,14,18.5s-0.2-1-0.6-1.4c-0.4-0.4-0.8-0.6-1.4-0.6 c-0.5,0-1,0.2-1.4,0.6S10,17.9,10,18.5s0.2,1,0.6,1.4C11,20.2,11.5,20.4,12,20.4z" />
@@ -105,10 +107,10 @@
       <!-- ------------------------------------------- -->
       <!-- Conversations (MONITOR) (click)="goToConversations()" -->
       <!-- ------------------------------------------- -->
-      <ng-container *ngIf="isVisibleMON">
-        <div  matTooltipClass="custom-mat-tooltip" matTooltip="Monitor"
+      <ng-container *ngIf="isVisibleMON && roles?.[PERMISSIONS.INBOX_READ]">
+        <div  matTooltipClass="custom-mat-tooltip" matTooltip="{{translationsMap?.get('Monitor')}}"
           #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100">
-          <a target="_self" href="{{ dashboard_convs_url }}" class="customAncor">
+          <a target="_self" href="{{ URLS.MONITOR }}" class="customAncor">
             <!-- <i class="material-icons sidebar-icons">forum</i> -->
             <span>
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" width="24px" height="24px" fill="none">
@@ -123,13 +125,27 @@
 
     <div class="nav-custom sidebar-bottom">
 
+      <!-- ----------------------------- -->
+      <!-- WA broadcasts  -->
+      <!-- ----------------------------- --> 
+      <ng-container *ngIf="USER_ROLE !== 'agent' && roles?.[PERMISSIONS.AUTOMATIONSLOG_READ]">
+        <div matTooltipClass="custom-mat-tooltip" matTooltip="{{translationsMap?.get('WhatsAppBroadcasts')}}"
+          #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100">
+          <a target="_self" href="{{ URLS.WHATSAPP }}" class="customAncor">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 48 48" height="24" width="24">
+                <path fill="none" fill-rule="evenodd" d="M40.6666 7.3156c-2.1744 -2.1755 -4.7577 -3.8995 -7.6012 -5.0726C30.222 1.0699 27.1745 0.4708 24.0986 0.4801 11.1899 0.4801 0.6816 10.936 0.6763 23.79c-0.0057 4.093 1.0733 8.1145 3.1269 11.655L0.48 47.52l12.4163 -3.2413c3.4367 1.8619 7.2841 2.8363 11.193 2.835h0.0094c12.9076 0 23.415 -10.4569 23.4212 -23.31 0.0078 -3.0653 -0.594 -6.1017 -1.7706 -8.9324 -1.1766 -2.8306 -2.9043 -5.399 -5.0827 -7.5557ZM24.0987 43.1794h-0.0084c-3.4845 0.001 -6.9057 -0.9315 -9.9078 -2.7007l-0.7109 -0.42 -7.3678 1.9236 1.9666 -7.1494 -0.463 -0.735C5.659 31.0132 4.6267 27.4386 4.6306 23.79c0 -10.6815 8.7371 -19.3724 19.4754 -19.3724 5.1513 -0.0092 10.0953 2.0281 13.7446 5.6638 3.6493 3.6357 5.705 8.572 5.715 13.7233 -0.0041 10.6827 -8.737 19.3747 -19.4669 19.3747Zm10.6774 -14.51c-0.5849 -0.2919 -3.465 -1.701 -3.9984 -1.8952 -0.5334 -0.1943 -0.9271 -0.292 -1.3167 0.2919 -0.3895 0.5837 -1.512 1.89 -1.8532 2.2837 -0.3413 0.3938 -0.6826 0.4368 -1.2675 0.1449 -0.5847 -0.2918 -2.4716 -0.9062 -4.707 -2.8906 -1.7399 -1.5446 -2.9137 -3.4513 -3.255 -4.0341 -0.3413 -0.5828 -0.0368 -0.8988 0.2561 -1.1886 0.2636 -0.2614 0.5849 -0.6804 0.8779 -1.0206 0.2929 -0.3403 0.3906 -0.5839 0.5848 -0.9723 0.1943 -0.3885 0.0976 -0.7288 -0.0483 -1.0195 -0.1459 -0.2909 -1.3167 -3.1585 -1.8039 -4.325 -0.4757 -1.1361 -0.9576 -0.9818 -1.3167 -0.9996 -0.3413 -0.0168 -0.7349 -0.021 -1.1225 -0.021 -0.2961 0.0077 -0.5875 0.0765 -0.856 0.2018 -0.2685 0.1253 -0.5081 0.3048 -0.7043 0.5269 -0.5364 0.5838 -2.0485 1.995 -2.0485 4.8594s2.1001 5.6364 2.3898 6.0248c0.2899 0.3886 4.1265 6.2717 9.997 8.7948 1.0901 0.4669 2.204 0.8763 3.337 1.2264 1.4017 0.4431 2.6775 0.3812 3.6854 0.2311 1.1246 -0.167 3.4651 -1.4092 3.9512 -2.7699 0.4862 -1.3608 0.4872 -2.5263 0.3413 -2.7689 -0.146 -0.2426 -0.5366 -0.3895 -1.1225 -0.6804Z" clip-rule="evenodd" stroke-width="1"></path>
+            </svg>
+          </a>
+        </div>
+      </ng-container>
+
       <!-- ------------------------------------------- -->
       <!-- CONTACTS (LEADS)  (click)="goToContacts()" -->
       <!-- ------------------------------------------- -->
-      <ng-container *ngIf="isVisibleCNT">
-        <div  matTooltipClass="custom-mat-tooltip" matTooltip="{{ contacts_lbl }}"
+      <ng-container *ngIf="isVisibleCNT && roles?.[PERMISSIONS.LEADS_READ]">
+        <div  matTooltipClass="custom-mat-tooltip" matTooltip="{{translationsMap?.get('LABEL_CONTACTS')}}"
           #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100">
-          <a target="_self" href="{{ dashboard_contacts_url }}" class="customAncor">
+          <a target="_self" href="{{ URLS.CONTACTS }}" class="customAncor">
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" width="24px" height="24px" fill="none">
               <path d="M160-40v-80h640v80H160Zm0-800v-80h640v80H160Zm320 400q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35ZM160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm70-80q45-56 109-88t141-32q77 0 141 32t109 88h70v-480H160v480h70Zm118 0h264q-29-20-62.5-30T480-280q-36 0-69.5 10T348-240Zm132-280q-17 0-28.5-11.5T440-560q0-17 11.5-28.5T480-600q17 0 28.5 11.5T520-560q0 17-11.5 28.5T480-520Zm0 40Z" />
             </svg>
@@ -141,10 +157,10 @@
       <!-- ------------------------------------------- -->
       <!-- ANALYTICS (click)="goToAnalytics()" -->
       <!-- ------------------------------------------- -->
-      <ng-container *ngIf="isVisibleANA && USER_ROLE !== 'agent'">
-        <div  matTooltipClass="custom-mat-tooltip" matTooltip="{{ analytics_lbl }}"
+      <ng-container *ngIf="USER_ROLE !== 'agent' && isVisibleANA && roles?.[PERMISSIONS.ANALYTICS_READ]">
+        <div  matTooltipClass="custom-mat-tooltip" matTooltip="{{translationsMap?.get('Analytics')}}"
           #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100" >
-          <a target="_self" href="{{ dashboard_analytics_url }}" class="customAncor">
+          <a target="_self" href="{{ URLS.ANALYTICS }}" class="customAncor">
             <!-- <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> -->
@@ -160,10 +176,10 @@
       <!-- ------------------------------------------- -->
       <!-- ACTIVITIES (click)="goToActivities()" -->
       <!-- ------------------------------------------- -->
-      <ng-container *ngIf="isVisibleACT">
+      <ng-container *ngIf="isVisibleACT && roles?.[PERMISSIONS.ACTIVITIES_READ]">
         <div *ngIf="USER_ROLE !== 'agent'"  matTooltipClass="custom-mat-tooltip"
-          matTooltip="{{ activities_lbl }}" #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100">
-          <a target="_self" href="{{ dashboard_activities_url }}" class="customAncor">
+          matTooltip="{{translationsMap?.get('Activities')}}" #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100">
+          <a target="_self" href="{{ URLS.ACTIVITIES }}" class="customAncor">
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" width="24px" height="24px" fill="none">
               <path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h168q13-36 43.5-58t68.5-22q38 0 68.5 22t43.5 58h168q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm80-80h280v-80H280v80Zm0-160h400v-80H280v80Zm0-160h400v-80H280v80Zm200-190q13 0 21.5-8.5T510-820q0-13-8.5-21.5T480-850q-13 0-21.5 8.5T450-820q0 13 8.5 21.5T480-790ZM200-200v-560 560Z" />
             </svg>
@@ -174,26 +190,30 @@
       <!-- ------------------------------------------- -->
       <!-- REQUESTS HISTORY (click)="goToHistory()" -->
       <!-- ------------------------------------------- -->
-      <div  matTooltipClass="custom-mat-tooltip" matTooltip="{{ history_lbl }}"
-        #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100">
-        <a target="_self" href="{{ dashboard_history_url }}" class="customAncor">
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" width="24px" height="24px" fill="none">
-            <path d="M480-120q-138 0-240.5-91.5T122-440h82q14 104 92.5 172T480-200q117 0 198.5-81.5T760-480q0-117-81.5-198.5T480-760q-69 0-129 32t-101 88h110v80H120v-240h80v94q51-64 124.5-99T480-840q75 0 140.5 28.5t114 77q48.5 48.5 77 114T840-480q0 75-28.5 140.5t-77 114q-48.5 48.5-114 77T480-120Zm112-192L440-464v-216h80v184l128 128-56 56Z" />
-          </svg>
-        </a>
-      </div>
+      <ng-container *ngIf="roles?.[PERMISSIONS.HISTORY_READ]">
+        <div  matTooltipClass="custom-mat-tooltip" matTooltip="{{translationsMap?.get('History')}}"
+          #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100">
+          <a target="_self" href="{{URLS.HISTORY}}" class="customAncor">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" width="24px" height="24px" fill="none">
+              <path d="M480-120q-138 0-240.5-91.5T122-440h82q14 104 92.5 172T480-200q117 0 198.5-81.5T760-480q0-117-81.5-198.5T480-760q-69 0-129 32t-101 88h110v80H120v-240h80v94q51-64 124.5-99T480-840q75 0 140.5 28.5t114 77q48.5 48.5 77 114T840-480q0 75-28.5 140.5t-77 114q-48.5 48.5-114 77T480-120Zm112-192L440-464v-216h80v184l128 128-56 56Z" />
+            </svg>
+          </a>
+        </div>
+      </ng-container>
 
       <!-- ----------------------------------------------------------------------------------- -->
       <!-- SETTINGS // old: goToSettings_CannedResponses()  *ngIf="USER_ROLE !== 'agent'" (click)="goToWidgetSetUpOrToCannedResponses()" -->
       <!-- ----------------------------------------------------------------------------------- -->
-      <div *ngIf="USER_ROLE !== 'agent'"  matTooltipClass="custom-mat-tooltip"
-        matTooltip="{{ settings_lbl }}" #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100">
-        <a target="_self" href="{{ dashboard_settings_url }}" class="customAncor">
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" width="24px" height="24px" fill="none">
-            <path d="m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12L590-80H370Zm70-80h79l14-106q31-8 57.5-23.5T639-327l99 41 39-68-86-65q5-14 7-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99 42q-22-23-48.5-38.5T533-694l-13-106h-79l-14 106q-31 8-57.5 23.5T321-633l-99-41-39 68 86 64q-5 15-7 30t-2 32q0 16 2 31t7 30l-86 65 39 68 99-42q22 23 48.5 38.5T427-266l13 106Zm42-180q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Zm-2-140Z" />
-          </svg>
-        </a>
-      </div>
+      <ng-container *ngIf="roles?.[PERMISSIONS.SETTINGS_READ]">
+        <div *ngIf="USER_ROLE !== 'agent'"  matTooltipClass="custom-mat-tooltip"
+          matTooltip="{{translationsMap?.get('Settings')}}" #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100">
+          <a target="_self" href="{{URLS.SETTINGS}}" class="customAncor">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" width="24px" height="24px" fill="none">
+              <path d="m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12L590-80H370Zm70-80h79l14-106q31-8 57.5-23.5T639-327l99 41 39-68-86-65q5-14 7-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99 42q-22-23-48.5-38.5T533-694l-13-106h-79l-14 106q-31 8-57.5 23.5T321-633l-99-41-39 68 86 64q-5 15-7 30t-2 32q0 16 2 31t7 30l-86 65 39 68 99-42q22 23 48.5 38.5T427-266l13 106Zm42-180q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Zm-2-140Z" />
+            </svg>
+          </a>
+        </div>
+      </ng-container>
 
       <div class="sidebar-separator">
         <!-- <i class="material-symbols-outlined sidebar-icons">
@@ -210,7 +230,7 @@
         <!-- ------------------------------------------- -->
         <!-- LOGO BRAND  (click)="goToOfficialSite()" -->
         <!-- ------------------------------------------- -->
-        <a target="_blank" href="{{ tiledesk_url }}" class="customAncor">
+        <a target="_blank" href="{{ URLS.TILEDESK }}" class="customAncor">
           <img [src]="LOGOS_ITEMS['COMPANY_LOGO_NO_TEXT'].icon">
         </a>
       </div>

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

@@ -15,7 +15,10 @@ import { tranlatedLanguage } from '../../../chat21-core/utils/constants';
 // utils
 import { avatarPlaceholder, getColorBck } from 'src/chat21-core/utils/utils-user';
 import { BRAND_BASE_INFO, LOGOS_ITEMS } from 'src/app/utils/utils-resources';
-import { getOSCode } from 'src/app/utils/utils';
+import { getOSCode, hasRole } from 'src/app/utils/utils';
+import { PERMISSIONS } from 'src/app/utils/permissions.constants';
+import { ProjectUser } from 'src/chat21-core/models/projectUsers';
+import { ProjectUsersService } from 'src/app/services/project_users/project-users.service';
 
 @Component({
   selector: 'app-sidebar',
@@ -31,7 +34,7 @@ export class SidebarComponent implements OnInit {
   IS_AVAILABLE: boolean = false;
   IS_INACTIVE: boolean = true;
   IS_BUSY: boolean; 
-  isVisibleAPP: boolean;
+  // isVisibleAPP: boolean;
   isVisibleANA: boolean;
   isVisibleACT: boolean;
   isVisibleMON: boolean;
@@ -41,9 +44,10 @@ export class SidebarComponent implements OnInit {
   project_id: string;
   DASHBOARD_URL: string;
   // HAS_CLICKED_OPEN_USER_DETAIL: boolean = false
-  public translationMap: Map<string, string>;
+  public translationsMap: Map<string, string>;
   public_Key: any;
   conversations_lbl: string;
+  whatsappbroadcast_lbl: string;
   contacts_lbl: string;
   apps_lbl: string;
   analytics_lbl: string;
@@ -53,19 +57,14 @@ export class SidebarComponent implements OnInit {
   countClickOnOpenUserDetailSidebar: number = 0
   USER_PHOTO_PROFILE_EXIST: boolean;
   currentUser: any;
-  dashboard_home_url: string;
-  dashboard_knb_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;
-  tiledesk_url: string;
+  URLS: { [key: string]: string} = {};
+
+  public projectUser: ProjectUser;
+  public roles: { [key: string]: boolean }
+
   LOGOS_ITEMS = LOGOS_ITEMS;
   BRAND_BASE_INFO = BRAND_BASE_INFO;
+  PERMISSIONS = PERMISSIONS;
   constructor(
     public imageRepoService: ImageRepoService,
     public appStorageService: AppStorageService,
@@ -75,12 +74,13 @@ export class SidebarComponent implements OnInit {
     public wsService: WebsocketService,
     public appConfigProvider: AppConfigProvider,
     private translate: TranslateService,
+    public projectUsersService: ProjectUsersService,
     public events: EventsService,
 
   ) { }
 
   ngOnInit() {
-    this.tiledesk_url = BRAND_BASE_INFO['COMPANY_SITE_URL'] as string
+    this.URLS.TILEDESK = BRAND_BASE_INFO['COMPANY_SITE_URL'] as string
     
     this.DASHBOARD_URL = this.appConfig.getConfig().dashboardUrl + '#/project/';
     this.getStoredProjectAndUserRole()
@@ -92,33 +92,36 @@ export class SidebarComponent implements OnInit {
 
 
   getStoredProjectAndUserRole() {
-    this.events.subscribe('storage:last_project',project =>{
+    this.events.subscribe('storage:last_project',async (project) =>{
       this.logger.log('[SIDEBAR] stored_project ', project)
       if (project && project !== 'undefined') {
         this.project_id = project.id_project.id
         this.USER_ROLE = project.role;
         this.buildURLs(this.USER_ROLE)
+        this.projectUser = await this.projectUsersService.getProjectUserByProjectId(project.id_project.id)
+        this.roles = this.checkRoles()
+        this.logger.log('[SIDEBAR] roles ', this.roles)
       }
     })
   }
 
   buildURLs(USER_ROLE) {
-    this.dashboard_home_url = this.DASHBOARD_URL + this.project_id + '/home'
-    this.dashboard_knb_url = this.DASHBOARD_URL + this.project_id + '/knowledge-bases'
-    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'
-    }
-    this.tiledesk_url = 'https://www.tiledesk.com'
+    const base = this.DASHBOARD_URL + this.project_id;
+
+    this.URLS = {
+      HOME: `${base}/home`,
+      KNOWLEDGEBASE: `${base}/knowledge-bases`,
+      BOTS: `${base}/bots`,
+      MONITOR: `${base}/wsrequests`,
+      WHATSAPP: `${base}/automations`,
+      CONTACTS: `${base}/contacts`,
+      APPSTORE: `${base}/app-store`,
+      ANALYTICS: `${base}/analytics`,
+      ACTIVITIES: `${base}/activities`,
+      HISTORY: `${base}/history`,
+      SETTINGS: USER_ROLE !== 'agent' ? `${base}/widget-set-up` : `${base}/cannedresponses`,
+      TILEDESK: 'https://www.tiledesk.com'
+    };
 
   }
 
@@ -240,6 +243,7 @@ export class SidebarComponent implements OnInit {
       this.logger.error('[SIDEBAR] - ngOnInit - currentUser not found in storage ')
     }
     this.translateLabels()
+    this.translations()
   }
 
 
@@ -256,6 +260,7 @@ export class SidebarComponent implements OnInit {
 
     this.translate.get(keys).subscribe((text: string) => {
       this.conversations_lbl = text['Conversations'];
+      this.whatsappbroadcast_lbl = text['WhatsAppBroadcasts']
       this.contacts_lbl = text['LABEL_CONTACTS']
       this.apps_lbl = text['Apps']
       this.analytics_lbl = text['Analytics']
@@ -271,13 +276,55 @@ export class SidebarComponent implements OnInit {
     
     this.isVisibleANA = getOSCode("ANA", this.public_Key);
     this.isVisibleACT = getOSCode("ACT", this.public_Key);
-    this.isVisibleAPP = getOSCode("APP", this.public_Key);
     this.isVisibleMON = getOSCode("MON", this.public_Key);
     this.isVisibleCNT = getOSCode("CNT", this.public_Key);
     this.isVisibleKNB = getOSCode("KNB", this.public_Key);
-    
+
   }
 
+
+  checkRoles(): { [key: string]: boolean } {
+      const permissionKeys = [
+        'HOME_READ',
+        'KB_READ',
+        'FLOWS_READ',
+        'INBOX_READ',
+        'AUTOMATIONSLOG_READ',
+        'LEADS_READ',
+        'ANALYTICS_READ',
+        'ACTIVITIES_READ',
+        'HISTORY_READ',
+        'PROJECTSETTINGS_GENERAL_READ',
+        'PROJECTSETTINGS_DEVELOPER_READ',
+        'PROJECTSETTINGS_SMARTASSIGNMENT_READ',
+        'PROJECTSETTINGS_NOTIFICATION_READ',
+        'PROJECTSETTINGS_SECURITY_READ',
+        'PROJECTSETTINGS_BANNED_READ',
+        'PROJECTSETTINGS_ADVANCED_READ'
+      ] as const;
+  
+      const roles: { [key: string]: boolean } = {};
+      for (const key of permissionKeys) {
+        const permission = PERMISSIONS[key];
+        roles[permission] = hasRole(this.projectUser, permission);
+      }
+
+
+      let settingRoleKEys = [
+        'PROJECTSETTINGS_GENERAL_READ',
+        'PROJECTSETTINGS_DEVELOPER_READ',
+        'PROJECTSETTINGS_SMARTASSIGNMENT_READ',
+        'PROJECTSETTINGS_NOTIFICATION_READ',
+        'PROJECTSETTINGS_SECURITY_READ',
+        'PROJECTSETTINGS_BANNED_READ',
+        'PROJECTSETTINGS_ADVANCED_READ'
+      ] as const;
+      roles[PERMISSIONS.SETTINGS_READ] = settingRoleKEys.some(settingKey => roles[PERMISSIONS[settingKey]]);
+  
+      return roles;
+  
+    }
+
   listenTocurrentProjectUserUserAvailability$() {
     this.wsService.currentProjectUserAvailability$.subscribe((data) => {
       this.logger.log('[SIDEBAR] - $UBSC TO WS USER AVAILABILITY & BUSY STATUS RES ', data);
@@ -327,92 +374,20 @@ export class SidebarComponent implements OnInit {
     }
   }
 
-  goToHome() {
-    let url = this.DASHBOARD_URL + this.project_id + '/home'
-    this.dashboard_home_url = url;
-    const myWindow = window.open(url, '_self');
-    myWindow.focus();
-  }
-
-  goToBots() {
-    let url = this.DASHBOARD_URL + this.project_id + '/bots/my-chatbots/all'
-    const myWindow = window.open(url, '_self');
-    myWindow.focus();
-  }
-
-  goToConversations() {
-    let url = this.DASHBOARD_URL + this.project_id + '/wsrequests'
-    const myWindow = window.open(url, '_self');
-    myWindow.focus();
-  }
-
-  goToContacts() {
-    let url = this.DASHBOARD_URL + this.project_id + '/contacts'
-    const myWindow = window.open(url, '_self');
-    myWindow.focus();
-  }
-
-  goToAppStore() {
-    let url = this.DASHBOARD_URL + this.project_id + '/app-store'
-    const myWindow = window.open(url, '_self');
-    myWindow.focus();
-  }
-
-  goToAnalytics() {
-    let url = this.DASHBOARD_URL + this.project_id + '/analytics'
-    const myWindow = window.open(url, '_self');
-    myWindow.focus();
-  }
-
-  goToActivities() {
-    let url = this.DASHBOARD_URL + this.project_id + '/activities'
-    const myWindow = window.open(url, '_self');
-    myWindow.focus();
-  }
-
-  goToHistory() {
-    let url = this.DASHBOARD_URL + this.project_id + '/history'
-    const myWindow = window.open(url, '_self');
-    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 = [
-      'LABEL_AVAILABLE',
-      'LABEL_NOT_AVAILABLE',
-      'LABEL_BUSY',
-      'VIEW_ALL_CONVERSATIONS',
-      'CONVERSATIONS_IN_QUEUE',
-      'CONVERSATION_IN_QUEUE',
-      'NO_CONVERSATION_IN_QUEUE',
-      'PINNED_PROJECT',
-      'CHANGE_PINNED_PROJECT',
-      "CHANGE_TO_YOUR_STATUS_TO_AVAILABLE",
-      "CHANGE_TO_YOUR_STATUS_TO_UNAVAILABLE"
+      'Monitor',
+      'Flows',
+      'Knowledgebases',
+      'WhatsAppBroadcasts',
+      'LABEL_CONTACTS',
+      'Apps',
+      'Analytics',
+      'Activities',
+      'History',
+      'Settings'
     ];
-    this.translationMap = this.translateService.translateLanguage(keys);
+    this.translationsMap = this.translateService.translateLanguage(keys);
   }
 
 

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

@@ -81,11 +81,11 @@
             [searchable]="false">
             <ng-template ng-label-tmp let-item="item">
                 <img style="width: 15px;height: 15px;position: relative; top: 1px;" height="15" width="15" [src]="item?.avatar" />
-                <span id="sidebaravatar_{{item.name}}" style="text-transform: capitalize; margin-left:8px">  {{item.label}} </span>
+                <span id="sidebaravatar_{{item.name}}" style="text-transform: capitalize; margin-left:8px">  {{item.label | translate}} </span>
             </ng-template>
             <ng-template ng-option-tmp let-item="item" let-index="index">
                 <img style="width: 15px;height: 15px;position: relative; top: 1px;" height="15" width="15" [src]="item?.avatar" />
-                <span id="sidebaravatar_{{item.name}}" style="text-transform: capitalize; margin-left:8px">  {{item.label}} </span>
+                <span id="sidebaravatar_{{item.name}}" style="text-transform: capitalize; margin-left:8px">  {{item.label | translate}} </span>
             </ng-template>
         </ng-select>
     </section>

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

@@ -242,9 +242,9 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
                           .set('SubscriptionPaymentProblem', text['SubscriptionPaymentProblem'])
                           .set('ThePlanHasExpired', text['ThePlanHasExpired'])
 
-      this.teammateStatus.forEach(element => {
-        element.label = this.translationsMap.get(element.label)
-      });
+      // this.teammateStatus.forEach(element => {
+      //   element.label = this.translationsMap.get(element.label)
+      // });
       
     });
   }
@@ -261,7 +261,7 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
   listenToCurrentStoredProject() {
     this.events.subscribe('storage:last_project', projectObjct => {
       if (projectObjct && projectObjct !== 'undefined') {
-        // this.logger.log('[SIDEBAR-USER-DETAILS] - GET STORED PROJECT ', projectObjct)
+        this.logger.log('[SIDEBAR-USER-DETAILS] - GET STORED PROJECT ', projectObjct)
 
         //TODO: recuperare info da root e non da id_project
         this.project = {
@@ -331,14 +331,14 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
             // this.logger.log('teammateStatus ', this.teammateStatus) 
             this.selectedStatus = this.teammateStatus[2].id;
             this.logger.debug('[SIDEBAR-USER-DETAILS] - PROFILE_STATUS selected option', this.teammateStatus[2].name);
-            this.teammateStatus = this.teammateStatus.slice(0)
+            // this.teammateStatus = this.teammateStatus.slice(0)
           } else if (projectUser['user_available'] === false && (projectUser['profileStatus'] === '' || !projectUser['profileStatus'])) {
             this.selectedStatus = this.teammateStatus[1].id;
             this.logger.debug('[SIDEBAR-USER-DETAILS] - PROFILE_STATUS selected option', this.teammateStatus[1].name);
-            this.teammateStatus = this.teammateStatus.slice(0)
+            // this.teammateStatus = this.teammateStatus.slice(0)
           } else if (projectUser['user_available'] === true && (projectUser['profileStatus'] === '' || !projectUser['profileStatus'])) {
             this.selectedStatus = this.teammateStatus[0].id
-            this.teammateStatus = this.teammateStatus.slice(0)
+            // this.teammateStatus = this.teammateStatus.slice(0)
             this.logger.debug('[SIDEBAR-USER-DETAILS] - PROFILE_STATUS selected option', this.teammateStatus[0].name);
           }
           this.IS_BUSY = projectUser['isBusy']

package/src/app/services/global-settings/global-settings.service.ts

@@ -88,8 +88,8 @@ export class GlobalSettingsService {
     this.logger.debug('[GLOBAL-SET] setVariableFromStorage :::::::: SET VARIABLE ---------->', Object.keys(globals));
     for (const key of Object.keys(globals)) {
         const val = this.appStorageService.getItem(key);
-        // this.logger.debug('[GLOBAL-SET] setVariableFromStorage SET globals KEY ---------->', key);
-        // this.logger.debug('[GLOBAL-SET] setVariableFromStorage SET globals VAL ---------->', val);
+        this.logger.debug('[GLOBAL-SET] setVariableFromStorage SET globals KEY ---------->', key);
+        this.logger.debug('[GLOBAL-SET] setVariableFromStorage SET globals VAL ---------->', val);
         if (val && val !== null) {
             // globals.setParameter(key, val);
             globals[key] = stringToBoolean(val);
@@ -111,8 +111,10 @@ export class GlobalSettingsService {
     }
 
     TEMP = getParameterByName(windowContext, 'tiledesk_supportMode');
+    console.log('TEMP supportMode', TEMP);
     if (TEMP) {
         globals.supportMode = stringToBoolean(TEMP);
+        this.appStorageService.setItem('supportMode', String(globals.supportMode))
     }
 
     TEMP = getParameterByName(windowContext, 'tiledesk_lang');
@@ -138,6 +140,7 @@ export class GlobalSettingsService {
     TEMP = getParameterByName(windowContext, 'tiledesk_projectID');
     if (TEMP) {
         globals.projectID = TEMP;
+        this.appStorageService.setItem('projectID', TEMP)
     }
 
 }

package/src/app/shared/shared.module.ts

@@ -22,6 +22,9 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { SafeHtmlPipe } from '../directives/safe-html.pipe';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { createTranslateLoader } from 'src/chat21-core/utils/utils';
+import { HttpClient } from '@angular/common/http';
 
 // import { MessageTextAreaComponent } from '../components/conversation-detail/message-text-area/message-text-area.component'; // MessageTextAreaComponent is part of the declarations ConversationDetailPageModule
 
@@ -140,6 +143,14 @@ import { SafeHtmlPipe } from '../directives/safe-html.pipe';
     NgSelectModule,
     FormsModule,
 
+    TranslateModule.forChild({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: (createTranslateLoader),
+        deps: [HttpClient]
+      }
+    })
+
   ],
   schemas: [
     CUSTOM_ELEMENTS_SCHEMA,

package/src/app/utils/permissions.constants.ts

@@ -4,6 +4,8 @@ export const PERMISSIONS = {
   REQUEST_READ_GROUP: 'request_read_group',
   REQUEST_READ_MY: 'request_read_my',
  
+  HOME_READ: 'home_read',
+
   INBOX_READ: 'inbox_read',
   REQUEST_UPDATE: 'request_update',
   REQUEST_SEND: 'request_send',
@@ -25,6 +27,8 @@ export const PERMISSIONS = {
 
   HISTORY_READ: 'history_read',
 
+  RATING_READ:'rating_read',
+
   AUTOMATIONSLOG_READ: "automationslog_read",
   AUTOMATIONSLOG_CREATE: "automationslog_create",
 
@@ -70,18 +74,21 @@ export const PERMISSIONS = {
   WIDGETSETUP_READ: 'widgetsetup_read',
   INSTALLATION_READ: 'installation_read',
   TRANSLATIONS_READ: 'translations_read',
+  WIDGETSETUP_UPDATE: 'widgetsetup_update',
+
+  
 
   DEPARTMENTS_LIST_READ: 'department_list_read',
   DEPARTMENT_DETAIL_READ: 'department_detail_read',
   DEPARTMENT_CREATE_READ: 'department_create_read',
 
   TEAMMATES_READ: 'teammates_read',
-  TEAMMATES_DETAILS_READ: 'teammates_detail_read',
+  TEAMMATE_UPDATE: 'teammate_update',
   TEAMMATES_CREATE: 'teammates_create',
   ROLES_READ: 'roles_read',
   GROUPS_READ: 'groups_read',
 
-  TEAMMATE_STATUS_UPDATE: 'teammate_status_update',
+
 
   EMAIL_TICKETING_READ:'email_ticketing_read',
   EMAIL_TICKETING_UPDATE:'email_ticketing_update',
@@ -107,29 +114,25 @@ export const PERMISSIONS = {
   APPS_READ:'apps_read',
   APPS_UPDATE:'apps_update',
 
+  SETTINGS_READ: 'settings_read',
   PROJECTSETTINGS_GENERAL_READ: 'projectsettings_general_read',
   PROJECTSETTINGS_GENERAL_UPDATE: 'projectsettings_general_update',
-
   PROJECTSETTINGS_SUBSCRIPTION_READ: 'projectsettings_subscription_read',
-
   PROJECTSETTINGS_DEVELOPER_READ: 'projectsettings_developer_read',
   PROJECTSETTINGS_DEVELOPER_UPDATE: 'projectsettings_developer_update',
-
   PROJECTSETTINGS_SMARTASSIGNMENT_READ: 'projectsettings_smartassignment_read',
   PROJECTSETTINGS_SMARTASSIGNMENT_UPDATE: 'projectsettings_smartassignment_update',
-
   PROJECTSETTINGS_NOTIFICATION_READ: 'projectsettings_notification_read',
-
   PROJECTSETTINGS_SECURITY_READ: 'projectsettings_security_read',
-
   PROJECTSETTINGS_BANNED_READ: 'projectsettings_banned_read',
-
   PROJECTSETTINGS_ADVANCED_READ: 'projectsettings_advanced_read',
   
-
   ACCESS_LISTS: 'accessLists',
   PROFILE_PAGES: 'profilePages',
   LEAD_DATA: 'leadData',
   IMPORT_DATA: 'importData',
-  MANAGE_TAGS: 'manageTags'
+  MANAGE_TAGS: 'manageTags',
+
+  CHANGE_PROJECT:'change_project',
+  SIMULATE_CONV:'simulate_conv',
 };

package/src/assets/i18n/ar.json

@@ -225,6 +225,10 @@
   "admin": "مدير",
   "agent": "وكيل",
   "Conversations": "المحادثات",
+  "Monitor": "شاشة",
+  "Flows": "التدفّقات",
+  "Knowledgebases": "قواعد المعرفة",
+  "Whatsappbroadcasts": "نشرات WhatsApp",
   "Apps": "تطبيقات",
   "Analytics": "تحليلات",
   "Activities": "أنشطة",

package/src/assets/i18n/az.json

@@ -225,6 +225,10 @@
   "admin": "Administrator",
   "agent": "Agent",
   "Conversations": "Söhbətlər",
+  "Monitor": "Monitor",
+  "Flows": "Axınlar",
+  "Knowledgebases": "Bilik bazaları",
+  "Whatsappbroadcasts": "WhatsApp Yayınları",
   "Apps": "Proqramlar",
   "Analytics": "Analitika",
   "Activities": "Fəaliyyətlər",

package/src/assets/i18n/de.json

@@ -225,6 +225,10 @@
   "admin": "Administrator",
   "agent": "Agent",
   "Conversations": "Gespräche",
+  "Monitor": "Monitor",
+  "Flows": "Flows",
+  "Knowledgebases": "Wissensdatenbanken",
+  "Whatsappbroadcasts": "WhatsApp-Broadcasts",
   "Apps": "Anwendungen",
   "Analytics": "Analytik",
   "Activities": "Aktivitäten",

package/src/assets/i18n/en.json

@@ -225,6 +225,10 @@
   "admin": "Administrator",
   "agent": "Agent",
   "Conversations": "Conversations",
+  "Monitor":"Monitor",
+  "Flows": "Flows",
+  "Knowledgebases": "Knowledge Bases",
+  "Whatsappbroadcasts": "WhatsApp Broadcasts",
   "Apps": "Apps",
   "Analytics": "Analytics",
   "Activities": "Activities",

package/src/assets/i18n/es.json

@@ -225,6 +225,10 @@
   "admin": "Administrador",
   "agent": "Agente",
   "Conversations": "Conversaciones",
+  "Monitor": "Monitor",
+  "Flows": "Flujos",
+  "Knowledgebases": "Bases de Conocimiento",
+  "Whatsappbroadcasts": "Difusiones de WhatsApp",
   "Apps":"Aplicaciones",
   "Analytics":"Analíticas",
   "Activities": "Actividades",

package/src/assets/i18n/fr.json

@@ -225,6 +225,10 @@
   "admin": "Administrateur",
   "agent": "Agent",
   "Conversations": "Conversations",
+  "Monitor": "Moniteur",
+  "Flows": "Flux",
+  "Knowledgebases": "Bases de Connaissances",
+  "Whatsappbroadcasts": "Diffusions WhatsApp",
   "Apps":"Applications",
   "Analytics":"Analytique",
   "Activities": "Activités",

package/src/assets/i18n/it.json

@@ -225,6 +225,10 @@
     "admin": "Amministratore",
     "agent": "Agente",
     "Conversations": "Conversazioni",
+    "Monitor": "Monitor",
+    "Flows": "Flussi",
+    "Knowledgebases": "Basi di Conoscenza",
+    "Whatsappbroadcasts": "Trasmissioni WhatsApp",
     "Apps":"App",
     "Analytics":"Analitica",
     "Activities": "Attività",

package/src/assets/i18n/kk.json

@@ -225,6 +225,10 @@
   "admin": "Әкімші",
   "agent": "Агент",
   "Conversations": "Әңгімелер",
+  "Monitor": "Монитор",
+  "Flows": "Ағындар",
+  "Knowledgebases": "Білім базалары",
+  "Whatsappbroadcasts": "WhatsApp хабарламалары",
   "Apps": "Қолданбалар",
   "Analytics": "Аналитика",
   "Activities": "Іс-шаралар",

package/src/assets/i18n/pt.json

@@ -225,6 +225,10 @@
   "admin": "Administrador",
   "agent": "Agente",
   "Conversations": "Conversas",
+  "Monitor": "Monitor",
+  "Flows": "Fluxos",
+  "Knowledgebases": "Bases de Conhecimento",
+  "Whatsappbroadcasts": "Transmissões do WhatsApp",
   "Apps":"Aplicativos",
   "Analytics":"Análise",
   "Activities": "Atividades",

package/src/assets/i18n/ru.json

@@ -225,6 +225,10 @@
   "admin": "Администратор",
   "agent": "Агент",
   "Conversations": "Разговоры",
+  "Monitor": "Монитор",
+  "Flows": "Потоки",
+  "Knowledgebases": "Базы знаний",
+  "Whatsappbroadcasts": "WhatsApp-рассылки",
   "Apps":"Приложения",
   "Analytics":"Аналитика",
   "Activities": "Виды деятельности",

package/src/assets/i18n/sr.json

@@ -225,6 +225,10 @@
   "admin": "Aдминистратор",
   "agent": "Агент",
   "Conversations": "Разговори",
+  "Monitor": "Монитор",
+  "Flows": "Токови",
+  "Knowledgebases": "Baze znanja",
+  "Whatsappbroadcasts": "WhatsApp emitovanja",
   "Apps":"Аппс",
   "Analytics":"Аналитика",
   "Activities": "Активности",

package/src/assets/i18n/sv.json

@@ -225,6 +225,10 @@
   "admin": "Administratör",
   "agent": "Ombud",
   "Conversations": "Samtal",
+  "Monitor": "Monitor",
+  "Flows": "Flöden",
+  "Knowledgebases": "Kunskapsbaser",
+  "Whatsappbroadcasts": "WhatsApp-sändningar",
   "Apps": "Appar",
   "Analytics": "Analytics",
   "Activities": "Aktiviteter",

package/src/assets/i18n/tr.json

@@ -225,6 +225,10 @@
   "admin": "Yönetici",
   "agent": "Ajan",
   "Conversations": "Konuşmalar",
+  "Monitor": "Monitör",
+  "Flows": "Akışlar",
+  "Knowledgebases": "Bilgi Tabanları",
+  "Whatsappbroadcasts": "WhatsApp Yayınları",
   "Apps":"Uygulamalar",
   "Analytics":"Analitik",
   "Activities": "Faaliyetler",

package/src/assets/i18n/uk.json

@@ -225,6 +225,10 @@
   "admin": "Адміністратор",
   "agent": "Агент",
   "Conversations": "Бесіди",
+   "Monitor": "Монітор",
+  "Flows": "Потоки",
+  "Knowledgebases": "Бази знань",
+  "Whatsappbroadcasts": "WhatsApp-розсилки",
   "Apps": "Програми",
   "Analytics": "Аналітика",
   "Activities": "Діяльність",

package/src/assets/i18n/uz.json

@@ -225,6 +225,10 @@
   "admin": "Administrator",
   "agent": "Agent",
   "Conversations": "Suhbatlar",
+  "Monitor": "Monitor",
+  "Flows": "Oqimlar",
+  "Knowledgebases": "Bilim bazalari",
+  "Whatsappbroadcasts": "WhatsApp efirlarini yuborish",
   "Apps": "Ilovalar",
   "Analytics": "Analitika",
   "Activities": "Faoliyatlar",

package/src/chat21-core/providers/tiledesk/tiledesk-auth.service.ts

@@ -177,6 +177,7 @@ export class TiledeskAuthService {
       this.currentUser = member;
       this.logger.log('[TILEDESK-AUTH] - createCompleteUser member ', member);
       this.appStorage.setItem('currentUser', JSON.stringify(this.currentUser));
+      localStorage.setItem('user', JSON.stringify(this.currentUser));
 
     } catch (err) {
       this.logger.error('[TILEDESK-AUTH]- createCompleteUser ERR ', err)

package/src/chat21-core/utils/utils.ts

@@ -1018,6 +1018,14 @@ export function isAllowedUrlInText(text: string, allowedUrls: string[]) {
 }
 
 function extractUrls(text: string): string[] {
-  const urlRegex = /https?:\/\/[^\s]+/g;
-  return text.match(urlRegex) || [];
+  // Rileva URL con o senza protocollo (http/https)
+  const urlRegex = /\b((https?:\/\/)?(www\.)?[a-z0-9.-]+\.[a-z]{2,})(\/[^\s]*)?/gi;
+  const matches = text.match(urlRegex) || [];
+  // Normalizza: aggiunge https:// se manca, così il parsing con new URL() funziona
+  return matches.map((url) => {
+    if (!/^https?:\/\//i.test(url)) {
+      return 'https://' + url;
+    }
+    return url;
+  });
 }