@chat21/chat21-ionic 3.4.32-rc6 → 3.4.32-rc8

package/CHANGELOG.md

@@ -8,6 +8,19 @@
 ### **Copyrigth**: 
 *Tiledesk SRL*
 
+# 3.4.32-rc8
+- **bug-fixed**: sidebar-user-details — status dropdown not visible when clicking first/last project; moved outside #user-details container to avoid overflow clipping.
+- **bug-fixed**: sidebar-user-details — replaced `transform` on #user-details with `left` animation to fix `position: fixed` containing block (dropdown positioning).
+- **changed**: sidebar-user-details — projects_dropdown_container and status-dropdown now use same colors as ng-select teammate-status-in-drawer.
+- **changed**: sidebar-user-details — projects-dropdown-wrapper styled to match ng-select container.
+- **added**: sidebar-user-details — MPA feature flag in featuresToken: if MPA is true show projects_dropdown_container, else show availability_dropdown_container.
+- **bug-fixed**: RouterModule.forRoot() called twice when clicking conversation — SharedModule now imports RouterModule.forChild([]) instead of AppRoutingModule.
+- **changed**: FindPipe and FilterPipe moved from AppModule to SharedModule for app-wide availability.
+- **added**: conversations-list — postMessage to hosting app on conversation selection (event: `onConversationChanged`, data: full conversation object).
+
+# 3.4.32-rc7
+- **addded**: ability to change availability status for each project the logged-in user in sidebar-user-detail 
+
 # 3.4.32-rc6
 - **bug-fixed**: convertRequestToConversation timestamp wrong unit 
 

package/package.json

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

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

@@ -71,7 +71,8 @@
             </span>
         </mat-slide-toggle> -->
 
-        <ng-select style="text-align: left;" 
+        <ng-container *ngIf="!isVisibleMPA" id="availability_dropdown_container">
+            <ng-select style="text-align: left;" 
             (change)="changeAvailabilityStateInUserDetailsSidebar(selectedStatus)" 
             [(ngModel)]="selectedStatus" 
             class="teammate-status-in-drawer sidebar" 
@@ -79,15 +80,42 @@
             bindLabel="name" bindValue="id"
             [clearable]="false"
             [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 | 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 | translate}} </span>
-            </ng-template>
-        </ng-select>
+                <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 | 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 | translate}} </span>
+                </ng-template>
+            </ng-select>
+        </ng-container>
+
+        <ng-container *ngIf="isVisibleMPA && projects?.length > 0" id="projects_dropdown_container">
+            <div class="projects-dropdown-wrapper">
+                <button class="btn projects-dropdown-toggle" (click)="toggleProjectsDropdown()">
+                    <span class="projects-dropdown-toggle-label">
+                        {{ project?.name || 'Progetti' }}
+                        <img style="width: 15px; height: 15px; position: relative; top: 1px; cursor: pointer;" height="15" width="15" [src]="project?.teammateStatus?.avatar" />
+                    </span>
+                    <i class="material-icons" style="margin-left: 4px; font-size: 18px;">arrow_drop_down</i>
+                </button>
+                <div class="ripple-container"></div>
+                <div id="projects_dropdown" class="dropdown-menu" [ngClass]="{'open': openDropdownProjects}">
+                    <li *ngFor="let prjct of projects?.slice() | slice:0:5; let i=index" style="cursor: pointer">
+                        <a [ngClass]="{'li-selected' : prjct?.id_project?._id === project?.id_project?.id }"
+                          class="project-item-row">
+                          <span class="project-item-name">{{ prjct?.id_project?.name }}</span>
+                          <span class="project-item-status project-item-status-wrapper"
+                            [attr.title]="translationsMap?.get(prjct?.teammateStatus?.label) || prjct?.teammateStatus?.name"
+                            (click)="toggleStatusDropdown($event, prjct)">
+                            <img style="width: 15px; height: 15px; position: relative; top: 1px; cursor: pointer;" height="15" width="15" [src]="prjct?.teammateStatus?.avatar" />
+                          </span>
+                        </a>
+                      </li>
+                </div>
+            </div>
+        </ng-container>
     </section>
 
     <hr class="first-divider">
@@ -140,4 +168,14 @@
         <div class="chat-version"> ver {{version}}</div>
     </section>
 
+</div>
+
+<!-- Status dropdown fuori da #user-details per evitare clipping da overflow -->
+<div class="status-dropdown status-dropdown-fixed status-dropdown-outside" *ngIf="openStatusDropdownProjectId && selectedProjectForStatus" (click)="$event.stopPropagation()"
+  [style.top.px]="statusDropdownPosition.top" [style.right.px]="statusDropdownPosition.right">
+  <div class="status-dropdown-option" *ngFor="let status of TEAMMATE_STATUS"
+    (click)="$event.stopPropagation(); onChangeProjectStatus(selectedProjectForStatus, status.id)">
+    <img style="width: 15px; height: 15px; margin-right: 6px;" [src]="status.avatar" />
+    <span>{{ translationsMap?.get(status.label) || status.name }}</span>
+  </div>
 </div>

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

@@ -2,23 +2,13 @@
 #user-details {
     background-color: var(--sidebar-background-color);
     color: var(--sidebar-color);
-    // height: calc(100% - 60px);
     height: 100%;
     overflow-y: auto;
     padding: 16px 12px 32px;
     position: absolute;
-    // left: -60px;
-    // top: 60px;
-    // top: 0px;
-    // transform: translate(305px);
-    // transform: translate(60px);
-    transition: transform 0.5s;
+    transition: left 0.5s;
     width: 305px;
     left: -245px;
-    //    z-index: 1029;
-    // transform: translateX(-100%);
-    // -webkit-transform: translateX(-100%);
-    // display: none;
 }
 
 // #user-details::-webkit-scrollbar {
@@ -33,11 +23,8 @@
 // }
 
 #user-details.active {
-    // transform: translate(0);
-    transform: translate(60px);
     display: block;
-    // left: 0px;
-    left: 10px;
+    left: 70px; /* 10px + 60px (equivalente a transform: translate(60px)) - evita containing block per position: fixed */
 }
 
 .user-details-btn-close {
@@ -175,15 +162,305 @@
 .availability-section {
     top: 320px;
     text-align: center;
-    background-color: var(--user-detail-select-background);
+    background-color: var(--sidebar-user-detail-select-background);
     padding: 4px 0px;
-    width: 192px;
     border-radius: 4px;
     -webkit-transform: translateX(-50%);
     transform: translateX(-50%);
     left: 50%;
     margin: auto;
     position: absolute;
+    z-index: 2;
+
+
+
+    .btn{
+        display: flex;
+        position: relative;
+        flex-flow: row nowrap;
+        align-items: center;
+        justify-content: center;
+    
+        border: 1px solid transparent;
+        transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out
+    }
+
+    .dropdown-toggle{
+        background-color: transparent;
+        color: inherit;
+        padding: 0px 15px;
+    }
+    
+    .project-dropdown,
+    .projects-dropdown-toggle {
+        // max-width: 180px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        font-family: var(--header-font-family);
+    
+        .material-icons{
+            font-size: 20px;
+        }
+    }
+    
+    button.btn.project-dropdown,
+    button.btn.projects-dropdown-toggle {
+        padding-top: 4px;
+        padding-bottom: 4px;
+        background-color: var(--sidebar-user-detail-select-background);
+        color: var(--sidebar-user-detail-select-color);
+        border: 1px solid var(--sidebar-user-detail-select-background);
+    }
+
+    .teammate-status-in-drawer {
+        width: 190px;
+    }
+
+    /* projects-dropdown-wrapper - stile come ng-select .ng-select-container (teammate-status-in-drawer) */
+    .projects-dropdown-wrapper {
+        position: relative;
+        min-height: 36px;
+        padding: 6px 12px;
+        background-color: var(--sidebar-user-detail-select-background);
+        color: var(--sidebar-user-detail-select-color);
+        border: 1px solid var(--sidebar-user-detail-select-background);
+        border-radius: 4px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        text-align: left;
+        font-size: 14px;
+        line-height: 1.4;
+        width: 250px;
+
+        .projects-dropdown-toggle {
+            background-color: transparent !important;
+            border: none !important;
+            padding: 0 !important;
+            min-height: auto;
+            flex: 1;
+            justify-content: flex-start;
+            color: inherit;
+            font-size: inherit;
+        }
+
+        .projects-dropdown-toggle-label {
+            text-transform: capitalize;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .dropdown-menu {
+            left: 0;
+            right: 0;
+            min-width: 100%;
+        }
+    }
+
+    li{
+        position: relative;
+        display: block
+    }
+
+    /* projects_dropdown - stessi colori ng-select (.ng-dropdown-panel) */
+    .dropdown-menu {
+        border-radius: 4px;
+        border: 1px solid var(--sidebar-user-detail-select-background);
+        box-shadow: 0 2px 5px 0 rgb(0, 0, 0, 0.26);
+    
+        position: absolute;
+        top: 100%;
+        right: 0;
+        left: auto;
+        z-index: 1000;
+        display: none;
+        float: left;
+        min-width: 160px;
+        padding: 5px 0;
+        margin: 8px 0 0;
+        font-size: 14px;
+        text-align: left;
+        list-style: none;
+        background-color: var(--sidebar-user-detail-select-background);
+        -webkit-background-clip: padding-box;
+        background-clip: padding-box;
+        color: var(--sidebar-user-detail-select-color);
+        max-height: 240px;
+        overflow-y: auto;
+    }
+    
+    .dropdown-menu:not(.open){
+        margin-top: -20px;
+        opacity: 0;
+        visibility: hidden;
+        display: block;
+    }
+    
+    .dropdown-menu.open{
+        margin-top: 12px; //0;
+        opacity: 1;
+        visibility: visible;
+        display: block;
+        transition: all 150ms linear;
+    }
+
+    .dropdown-menu li {
+        position: relative;
+    
+        .li-selected{
+            color: var(--sidebar-user-detail-select-color);
+            background-color: var(--sidebar-user-detail-select-hover-background);
+        }
+    
+        &.all-projects,
+        &.add-project{
+            color: var(--sidebar-user-detail-select-color);
+            i{
+                padding-right: 5px; 
+                margin-bottom: 2px; 
+                font-size: 20px
+            }
+        }
+    
+        &.section-title{
+            padding-left: 24px;
+            font-size: 12px; 
+            color: var(--sidebar-user-detail-color);
+            font-weight: 400
+        }
+    }
+    
+    .dropdown-menu .divider{
+        background-color: rgba(255, 255, 255, 0.2);
+        margin: 5px 0;
+    
+        height: 1px;
+        overflow: hidden;
+    }
+    
+    .dropdown-menu li>a{
+        font-size: 13px;
+        padding: 10px 20px;
+        border-radius: 2px;
+        transition: all 150ms linear;
+    
+        display: block;
+        clear: both;
+        font-weight: 400;
+        line-height: 1.42857143;
+        color: var(--sidebar-user-detail-select-color);
+        white-space: nowrap;
+        text-decoration: none;
+        cursor: pointer;
+    
+        .material-icons {
+            vertical-align: middle;
+        }
+    
+        &:hover{
+            background-color: var(--sidebar-user-detail-select-hover-background);
+            color: var(--sidebar-user-detail-select-color);
+            box-shadow: none;
+        }
+    
+        &.project-item-row {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 8px;
+    
+            .project-item-name {
+                flex: 1;
+                min-width: 0;
+                text-align: left;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+    
+            .project-item-status {
+                flex: 0 0 10%;
+                display: flex;
+                justify-content: flex-end;
+                align-items: center;
+    
+                &.project-item-status-wrapper {
+                    position: relative;
+                }
+    
+                .status-dropdown {
+                    position: absolute;
+                    right: 100%;
+                    top: 50%;
+                    transform: translateY(-50%);
+                    margin-right: 4px;
+                    min-width: 140px;
+                    padding: 4px 0;
+                    background-color: var(--sidebar-user-detail-select-background);
+                    border: 1px solid var(--sidebar-user-detail-select-background);
+                    border-radius: 4px;
+                    box-shadow: 0 2px 5px 0 rgb(0, 0, 0, 0.26);
+                    z-index: 1001;
+                    list-style: none;
+    
+                    &.status-dropdown-fixed {
+                        right: auto;
+                        left: auto;
+                        margin-right: 0;
+                        transform: translateY(-50%);
+                    }
+    
+                    .status-dropdown-option {
+                        display: flex;
+                        align-items: center;
+                        padding: 8px 16px;
+                        font-size: 13px;
+                        color: var(--sidebar-user-detail-select-color);
+                        cursor: pointer;
+                        white-space: nowrap;
+    
+                        &:hover {
+                            background-color: var(--sidebar-user-detail-select-hover-background);
+                            color: var(--sidebar-user-detail-select-color);
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+/* Status dropdown fuori da #user-details - stessi colori ng-select */
+.status-dropdown-outside {
+    position: fixed !important;
+    transform: translateY(-50%);
+    z-index: 1100;
+    min-width: 140px;
+    padding: 4px 0;
+    background-color: var(--sidebar-user-detail-select-background);
+    border: 1px solid var(--sidebar-user-detail-select-background);
+    border-radius: 4px;
+    box-shadow: 0 2px 5px 0 rgb(0, 0, 0, 0.26);
+    list-style: none;
+
+    .status-dropdown-option {
+        display: flex;
+        align-items: center;
+        padding: 8px 16px;
+        font-size: 13px;
+        color: var(--sidebar-user-detail-select-color);
+        cursor: pointer;
+        white-space: nowrap;
+
+        &:hover {
+            background-color: var(--sidebar-user-detail-select-hover-background);
+            color: var(--sidebar-user-detail-select-color);
+        }
+    }
 }
 
 .first-divider {

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

@@ -17,6 +17,8 @@ import { Project } from 'src/chat21-core/models/projects';
 import { BRAND_BASE_INFO } from 'src/app/utils/utils-resources';
 import { getOSCode } from 'src/app/utils/utils';
 import { getUserStatusFromProjectUser } from 'src/chat21-core/utils/utils';
+import { ProjectService } from 'src/app/services/projects/project.service';
+import { ProjectUser } from 'src/chat21-core/models/project_user';
 @Component({
   selector: 'app-sidebar-user-details',
   templateUrl: './sidebar-user-details.component.html',
@@ -55,6 +57,13 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
   selectedStatus: any;
   TEAMMATE_STATUS = TEAMMATE_STATUS;
 
+  projects: ProjectUser[] = [];
+  selectedProjectForStatus: ProjectUser | null = null;
+  public openDropdownProjects: boolean = false
+  public openStatusDropdownProjectId: string | null = null
+  statusDropdownPosition = { top: 0, right: 0 };
+  isVisibleMT = false;
+  isVisibleMPA = false;
 
   translationsMap: Map<string, string> = new Map();
   
@@ -71,7 +80,7 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
     public appConfigProvider: AppConfigProvider,
     public events: EventsService,
     private eRef: ElementRef,
-
+    private projectService: ProjectService,
   ) { }
 
   ngOnInit() {
@@ -80,6 +89,7 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
     this.subcribeToAuthStateChanged();
     this.listenTocurrentProjectUserUserAvailability$();
     this.listenToCurrentStoredProject();
+    this.listenToUserGoOnline();
     this.getOSCODE();
   }
 
@@ -240,6 +250,8 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
                           .set('LABEL_LOGOUT', text['LABEL_LOGOUT'])
                           .set('SubscriptionPaymentProblem', text['SubscriptionPaymentProblem'])
                           .set('ThePlanHasExpired', text['ThePlanHasExpired'])
+                          .set('NAVBAR.RECENT_PROJECTS', text['NAVBAR.RECENT_PROJECTS'])
+                          .set('NAVBAR.OTHER_PROJECTS', text['NAVBAR.OTHER_PROJECTS'])
 
       this.TEAMMATE_STATUS.forEach(element => {
         element.label = this.translationsMap.get(element.label)
@@ -255,6 +267,36 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
     this.logger.log('[SIDEBAR-USER-DETAILS] AppConfigService getAppConfig', this.appConfigProvider.getConfig());
     
     this.isVisiblePAY = getOSCode("PAY", this.public_Key);
+    this.isVisibleMT = getOSCode("MTT", this.public_Key);
+    this.isVisibleMPA = getOSCode("MPA", this.public_Key);
+  }
+
+  listenToUserGoOnline() {
+    this.events.subscribe('go:online', (isOnline: boolean) => {
+      this.logger.log('[SIDEBAR-USER-DETAILS] listen to go:online --> ', isOnline);
+      if (isOnline) {
+        this.tiledeskToken = this.tiledeskAuthService.getTiledeskToken();
+        this.getProjects();
+      }
+    });
+  }
+
+  getProjects() {
+    this.logger.log('[SIDEBAR-USER-DETAILS] calling getProjects ... ');
+    this.projectService.getProjects().subscribe((projects: ProjectUser[]) => {
+      this.logger.log('[SIDEBAR-USER-DETAILS] getProjects PROJECTS ', projects);
+      if (projects) {
+        this.projects = projects.filter((prj: ProjectUser) => prj?.id_project?.status === 100);
+        this.projects.forEach((prj: ProjectUser) => {
+          prj.teammateStatus = getUserStatusFromProjectUser(prj as any);
+        });
+        this.logger.log('[SIDEBAR-USER-DETAILS] getProjects this.projects ', this.projects);
+      }
+    }, (error) => {
+      this.logger.error('[SIDEBAR-USER-DETAILS] getProjects - ERROR ', error);
+    }, () => {
+      this.logger.log('[SIDEBAR-USER-DETAILS] getProjects - COMPLETE');
+    });
   }
 
   listenToCurrentStoredProject() {
@@ -268,9 +310,9 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
           name: projectObjct['id_project']['name'],
           profile: projectObjct['id_project']['profile'],
           isActiveSubscription: projectObjct['id_project']['isActiveSubscription'],
-          trialExpired: projectObjct['id_project']['trialExpired']
+          trialExpired: projectObjct['id_project']['trialExpired'],
+          teammateStatus: getUserStatusFromProjectUser(projectObjct as any)
         }
-      
         if (this.project.profile.type === 'free') {
 
           if (this.project.trialExpired === false) {
@@ -285,11 +327,17 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
         }
 
         this.wsService.subscriptionToWsCurrentProjectUserAvailability(this.project._id, projectObjct._id);
+        if (this.tiledeskToken) {
+          this.getProjects();
+        }
       }
     })
 
     try {
       this.tiledeskToken = this.appStorageService.getItem('tiledeskToken');
+      if (this.tiledeskToken) {
+        this.getProjects();
+      }
       // this.logger.log('[SIDEBAR-USER-DETAILS] - GET STORED TOKEN ', this.tiledeskToken)
     } catch (err) {
       this.logger.error('[SIDEBAR-USER-DETAILS] - GET STORED TOKEN ', err)
@@ -350,6 +398,109 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
     });
   }
 
+  getCurrentStatusAvatar(): string {
+    const status = this.TEAMMATE_STATUS?.find(s => s.id === this.selectedStatus);
+    return status?.avatar || 'assets/img/teammate-status/avaible.svg';
+  }
+
+  getCurrentStatusLabel(): string {
+    const status = this.TEAMMATE_STATUS?.find(s => s.id === this.selectedStatus);
+    return status?.label || status?.name || '';
+  }
+
+  toggleProjectsDropdown() {
+    this.openDropdownProjects = !this.openDropdownProjects;
+    if (!this.openDropdownProjects) {
+      this.openStatusDropdownProjectId = null;
+      this.selectedProjectForStatus = null;
+    }
+  }
+
+  toggleStatusDropdown(event: Event, prjct: any) {
+    event.stopPropagation()
+    event.preventDefault()
+    const projectId = prjct?.id_project?._id
+    const isOpening = this.openStatusDropdownProjectId !== projectId
+    if (isOpening) {
+      const el = event.currentTarget as HTMLElement
+      const rect = el.getBoundingClientRect()
+      this.statusDropdownPosition = {
+        top: rect.top + rect.height / 2,
+        right: window.innerWidth - rect.left + 4
+      }
+      this.selectedProjectForStatus = prjct
+    } else {
+      this.selectedProjectForStatus = null
+    }
+    this.openStatusDropdownProjectId = this.openStatusDropdownProjectId === projectId ? null : projectId
+  }
+
+  onChangeProjectStatus(projectUser: ProjectUser, selectedStatusID: any) {
+    this.logger.log('[SIDEBAR-USER-DETAILS] onChangeProjectStatus', projectUser, selectedStatusID)
+    this.openStatusDropdownProjectId = null
+    this.selectedProjectForStatus = null
+
+    let IS_AVAILABLE = null
+    let profilestatus = ''
+    if (selectedStatusID === 1) {
+      IS_AVAILABLE = true
+    } else if (selectedStatusID === 2) {
+      IS_AVAILABLE = false
+    } else if (selectedStatusID === 3) {
+      IS_AVAILABLE = false
+      profilestatus = 'inactive'
+    }
+
+    this.wsService.updateCurrentUserAvailability(this.tiledeskToken, projectUser.id_project._id, IS_AVAILABLE, profilestatus).subscribe((projectUserUpdated: any) => {
+
+        this.logger.log('[NAVBAR] - PROJECT-USER UPDATED ', projectUser)
+        this.projects.find(p => p.id_project._id === projectUser.id_project._id).teammateStatus = getUserStatusFromProjectUser(projectUserUpdated as any);
+
+        if(projectUser.id_project._id === this.project._id) {
+          this.project.teammateStatus = getUserStatusFromProjectUser(projectUserUpdated as any);
+        }
+      }, (error) => {
+        this.logger.error('[NAVBAR] - PROJECT-USER UPDATED - ERROR  ', error);
+
+      }, () => {
+        this.logger.log('[NAVBAR] - PROJECT-USER UPDATED  * COMPLETE *');
+
+      });
+  }
+
+  onStatusDropdownOptionClick(status: { id: number; name: string; avatar: string; label: string }, projectUser: ProjectUser | null) {
+    if (!projectUser) return;
+    this.changeProjectStatus(projectUser, status.id);
+    this.openStatusDropdownProjectId = null;
+    this.selectedProjectForStatus = null;
+    if (projectUser?.id_project?._id === this.project?._id) {
+      this.selectedStatus = status.id;
+    }
+  }
+
+  changeProjectStatus(projectUser: ProjectUser, selectedStatusID: number) {
+    this.logger.log('[SIDEBAR-USER-DETAILS] changeProjectStatus projectid', projectUser?.id_project?._id, ' status: ', selectedStatusID);
+    let IS_AVAILABLE: boolean | null = null;
+    let profilestatus = '';
+    if (selectedStatusID === 1) {
+      IS_AVAILABLE = true;
+    } else if (selectedStatusID === 2) {
+      IS_AVAILABLE = false;
+    } else if (selectedStatusID === 3) {
+      IS_AVAILABLE = false;
+      profilestatus = 'inactive';
+    }
+    this.wsService.updateCurrentUserAvailability(this.tiledeskToken, projectUser.id_project._id, IS_AVAILABLE, profilestatus).subscribe((updated: any) => {
+      this.logger.log('[SIDEBAR-USER-DETAILS] - PROJECT-USER UPDATED ', updated);
+      const p = this.projects.find(prj => prj?.id_project?._id === projectUser?.id_project?._id);
+      if (p) {
+        p.teammateStatus = getUserStatusFromProjectUser(updated as any);
+      }
+    }, (error) => {
+      this.logger.error('[SIDEBAR-USER-DETAILS] - PROJECT-USER UPDATED - ERROR ', error);
+    });
+  }
+
   changeAvailabilityStateInUserDetailsSidebar(selectedStatusID) {
     this.logger.log('[SIDEBAR-USER-DETAILS] - changeAvailabilityState projectid', this.project._id, ' available 1: ', selectedStatusID);
     

package/src/app/pages/conversations-list/conversations-list.page.ts

@@ -147,6 +147,7 @@ export class ConversationListPage implements OnInit {
     public wsService: WebsocketService,
     public g: Globals,
     public appStorageService: AppStorageService,
+    private triggerEvents: TriggerEvents,
   ) {
     this.checkPlatform();
     this.translations();
@@ -837,6 +838,7 @@ export class ConversationListPage implements OnInit {
       this.logger.log('[CONVS-LIST-PAGE] onConversationSelected active conversation.uid ', conversation.uid)
       this.events.publish('convList:onConversationSelected', conversation)
     }
+    this.triggerEvents.triggerOnConversationChanged(conversation)
   }
 
   onImageLoaded(conversation: any) {

package/src/app/pipe/filter.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { FilterPipe } from './filter.pipe';
+
+describe('FilterPipe', () => {
+  it('create an instance', () => {
+    const pipe = new FilterPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

package/src/app/pipe/filter.pipe.ts

@@ -0,0 +1,15 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'filter'
+})
+export class FilterPipe implements PipeTransform {
+
+  transform(items: any[], filter: Object): any {
+    if (!items || !filter) {
+      return items;
+    }
+    return items.filter(item => item[filter['key']] ===  filter['value']);
+  }
+
+}

package/src/app/pipe/find.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { FindPipe } from './find.pipe';
+
+describe('FindPipe', () => {
+  it('create an instance', () => {
+    const pipe = new FindPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

package/src/app/pipe/find.pipe.ts

@@ -0,0 +1,15 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'find'
+})
+export class FindPipe implements PipeTransform {
+
+  transform(items: any[], filter: Object): any {
+    if (!items || !filter) {
+      return items;
+    }
+    return items.find(item => item[filter['key']] ===  filter['value']);
+  }
+
+}

package/src/app/services/triggerEvents/triggerEvents.ts

@@ -131,4 +131,16 @@ export class TriggerEvents {
     }
 
     
+    public triggerOnConversationChanged(conversation: ConversationModel) {
+        this.logger.debug(' ---------------- triggerOnConversationChanged ---------------- ', conversation);
+        try {
+            const windowContext = this.windowContext;
+            if (windowContext) {
+                windowContext.postMessage({ type: 'onConversationChanged', data: conversation }, '*');
+            }
+        } catch (e) {
+            this.logger.error('[TRIGGER-HANDLER] > Error triggerOnConversationChanged:' + e);
+        }
+    }
+
 }

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

@@ -25,6 +25,9 @@ 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 { RouterModule } from '@angular/router';
+import { FindPipe } from '../pipe/find.pipe';
+import { FilterPipe } from '../pipe/filter.pipe';
 
 @NgModule({
   declarations: [
@@ -67,12 +70,13 @@ import { HttpClient } from '@angular/common/http';
      SidebarUserDetailsComponent,
     
      //DIRECTIVES
-     AutofocusDirective,
-     TooltipDirective,
-     MarkedPipe,
-     HtmlEntitiesEncodePipe,
-     SafeHtmlPipe,
- 
+    AutofocusDirective,
+    TooltipDirective,
+    MarkedPipe,
+    HtmlEntitiesEncodePipe,
+    SafeHtmlPipe,
+    FindPipe,
+    FilterPipe,
 
 
      AvatarProfileComponent,
@@ -123,6 +127,10 @@ import { HttpClient } from '@angular/common/http';
     MarkedPipe,
     HtmlEntitiesEncodePipe,
     SafeHtmlPipe,
+    FindPipe,
+    FilterPipe,
+
+    RouterModule,
 
     //COMMON COMPONENTS
     AvatarProfileComponent,
@@ -140,16 +148,15 @@ import { HttpClient } from '@angular/common/http';
     MomentModule,
     NgSelectModule,
     FormsModule,
-
     TranslateModule.forChild({
-      loader: {
-        provide: TranslateLoader,
-        useFactory: (createTranslateLoader),
-        deps: [HttpClient]
-      }
-    })
-
-  ],
+        loader: {
+            provide: TranslateLoader,
+            useFactory: (createTranslateLoader),
+            deps: [HttpClient]
+        }
+    }),
+    RouterModule.forChild([])
+],
   schemas: [
     CUSTOM_ELEMENTS_SCHEMA,
     NO_ERRORS_SCHEMA

package/src/chat21-core/models/projects.ts

@@ -20,6 +20,7 @@ export interface Project {
     isActiveSubscription?: boolean;
     profile?: any;
     offlineMsgEmail?: boolean;
+    teammateStatus?: any;
     // subscription_end_date?: any;
     // subscription_id?: any;
     // subscription_creation_date?: any;

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

@@ -153,6 +153,6 @@ export const TEAMMATE_STATUS = [
     { id: 1, name: 'Available', avatar: 'assets/img/teammate-status/avaible.svg', label: "LABEL_AVAILABLE" },
     { id: 2, name: 'Unavailable', avatar: 'assets/img/teammate-status/unavaible.svg', label: "LABEL_NOT_AVAILABLE" },
     { id: 3, name: 'Inactive', avatar: 'assets/img/teammate-status/inactive.svg', label: "LABEL_INACTIVE" },
-  ];
+];