@chat21/chat21-ionic 3.0.64 → 3.0.65

package/src/app/chatlib/conversation-detail/message/bubble-message/bubble-message.component.html

@@ -18,13 +18,18 @@
 
     <!-- [width]="getMetadataSize(message.metadata).width" 
     [height]="getMetadataSize(message.metadata).height" -->
-    <chat-image *ngIf="isImage(message)" [metadata]="message.metadata" [width]="message.metadata.width"
-      [height]="message.metadata.height" (onImageRendered)="onImageRenderedFN($event)">
+    <chat-image *ngIf="isImage(message)" 
+      [metadata]="message.metadata" 
+      [width]="message.metadata.width"
+      [height]="message.metadata.height" 
+      (onImageRendered)="onImageRenderedFN($event)">
     </chat-image>
 
     <!-- [width]="getMetadataSize(message.metadata).width"  -->
     <!-- [height]="getMetadataSize(message.metadata).height"> -->
-    <chat-frame *ngIf="isFrame(message)" [metadata]="message.metadata" [width]="message.metadata.width"
+    <chat-frame *ngIf="isFrame(message)" 
+      [metadata]="message.metadata" 
+      [width]="message.metadata.width"
       [height]="message.metadata.height">
     </chat-frame>
 
@@ -42,13 +47,20 @@
         <span> {{message.timestamp | amCalendar }} </span>
       </ng-template> -->
 
-      <chat-text [text]="message?.text" [color]="textColor" [message]="message"
-      [class.chat-text-emoticon]="message?.emoticon"
+      <chat-text *ngIf="message?.type !=='html'"
+        [text]="message?.text" 
+        [color]="textColor" 
+        [message]="message"
+        [class.chat-text-emoticon]="message?.emoticon"
         (onBeforeMessageRender)="returnOnBeforeMessageRender($event)"
         (onAfterMessageRender)="returnOnAfterMessageRender($event)">
       </chat-text>
 
-      <ng-container *ngIf="areVisibleCAR && support_mode === true">
+      <chat-html *ngIf="message?.type==='html'"
+        [htmlText]="message?.text">
+      </chat-html>
+
+      <ng-container *ngIf="areVisibleCAR && supportMode">
         <ion-button shape="round" size="small" class="btn-add-msg-as-canned-response" ion-button fill="clear"
           (click)="presentCreateCannedResponseModal()" tooltip="{{addAsCannedResponseTooltipText}}"
           [options]="tooltipOptions" placement="bottom">

package/src/app/chatlib/conversation-detail/message/bubble-message/bubble-message.component.ts

@@ -20,7 +20,7 @@ export class BubbleMessageComponent implements OnInit, OnChanges {
   @Input() message: MessageModel;
   @Input() textColor: string;
   @Input() areVisibleCAR: boolean;
-  @Input() support_mode: boolean;
+  @Input() supportMode: boolean;
   @Output() onBeforeMessageRender = new EventEmitter();
   @Output() onAfterMessageRender = new EventEmitter();
   @Output() onImageRendered = new EventEmitter<boolean>()
@@ -59,16 +59,12 @@ export class BubbleMessageComponent implements OnInit, OnChanges {
   setMomentLocale() {
     this.browserLang = this.translate.getBrowserLang();
     const currentUser = this.tiledeskAuthService.getCurrentUser();
-    this.logger.log('[BUBBLE-MESSAGE] - ngOnInit - currentUser ', currentUser)
     let currentUserId = ''
     if (currentUser) {
       currentUserId = currentUser.uid
-      this.logger.log('[BUBBLE-MESSAGE] - ngOnInit - currentUserId ', currentUserId)
     }
 
     const stored_preferred_lang = localStorage.getItem(currentUserId + '_lang');
-    this.logger.log('[BUBBLE-MESSAGE] stored_preferred_lang: ', stored_preferred_lang);
-
 
     let chat_lang = ''
     if (this.browserLang && !stored_preferred_lang) {
@@ -81,15 +77,9 @@ export class BubbleMessageComponent implements OnInit, OnChanges {
         sameElse: 'LLLL'
       }
     });
-    // this.translate.getTranslation(chat_lang).subscribe((labels: string) => {
-    //   console.log('[BUBBLE-MESSAGE] translations: ', labels);
-    // });
   }
 
   ngOnChanges() {
-    this.logger.log('BUBBLE-MSG Hello !!!! this.message ',  this.message)
-    this.logger.log('BUBBLE-MSG ngOnChanges areVisibleCAR', this.areVisibleCAR)
-    this.logger.log('BUBBLE-MSG ngOnChanges support_mode', this.support_mode)
     if (this.message && this.message.metadata && typeof this.message.metadata === 'object') {
       this.getMetadataSize(this.message.metadata)
     }

package/src/app/chatlib/conversation-detail/message/html/html.component.html

@@ -0,0 +1 @@
+<div id="htmlCode" #htmlCode [innerHTML]="htmlText | safeHtml"></div>

package/src/app/chatlib/conversation-detail/message/html/html.component.scss

@@ -0,0 +1,79 @@
+// @import '../../../../sass/variables';
+
+:root {
+    --themeColor: #62a8ea;
+    --foregroundColor: #ffffff;
+    --buttonFontSize: 12px;
+}
+
+
+::ng-deep {
+
+    .button-html {
+        padding: 8px 16px!important;
+        position: relative;
+        max-width: 300px;
+        min-width: inherit;
+        cursor: pointer !important;
+        border: 1px solid #62a8ea;
+        border-radius: 20px;
+        margin: 3px;
+        background: transparent;
+        overflow: hidden;
+        font-family: 'Muli', sans-serif !important;
+        font-size: 12px !important;
+        -o-text-overflow: ellipsis;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        letter-spacing: -0.24px;
+        -webkit-font-smoothing: antialiased;
+        color: #62a8ea;
+        line-height: 16px;
+
+    }
+
+    .url {
+        transition: background-color .6s ease;
+        .icon-button-action {
+            position: absolute;
+            top: -1px;
+            right: 1px;
+            svg {
+                fill: #62a8ea;
+            }
+        }
+        .icon-button-action-self{
+            position: absolute;
+            right: 1px;
+            svg {
+                fill: #62a8ea;
+            }
+        }
+        &:focus,
+        &:hover {
+            color: white;
+            background:  #62a8ea;
+            .icon-button-action, .icon-button-action-self {
+                svg {
+                    fill: white;
+                }
+            }
+        }
+        &:active{
+            font-size: 20px;
+        }
+    }
+    
+    .text-html{
+        font-size: 1.4em;
+        margin: 0;
+        padding: 8px;
+        font-style: normal;
+        letter-spacing: normal;
+        font-stretch: normal;
+        font-variant: normal;
+        font-weight: 300;
+        overflow: hidden;
+    }
+
+}

package/src/app/chatlib/conversation-detail/message/html/html.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HtmlComponent } from './html.component';
+
+describe('HtmlComponent', () => {
+  let component: HtmlComponent;
+  let fixture: ComponentFixture<HtmlComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HtmlComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HtmlComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/app/chatlib/conversation-detail/message/html/html.component.ts

@@ -0,0 +1,33 @@
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import { Component, ElementRef, Input, OnInit, SimpleChange, SimpleChanges, ViewChild, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'chat-html',
+  templateUrl: './html.component.html',
+  styleUrls: ['./html.component.scss']
+})
+export class HtmlComponent implements OnInit {
+
+  @Input() htmlText: string;
+  @Input() fontSize: string;
+  @Input() themeColor: string;
+  @Input() foregroundColor: string;
+
+  @ViewChild('htmlCode', {static: true}) container;
+  
+  constructor(private elementRef: ElementRef) { }
+
+  ngOnInit(){
+
+  }
+
+  ngOnChanges(changes: SimpleChanges){
+    //decomment if element should have same color of themeColor and fregroundColor
+    if(this.fontSize) this.elementRef.nativeElement.style.setProperty('--buttonFontSize', this.fontSize);
+    if(this.themeColor) this.elementRef.nativeElement.style.setProperty('--themeColor', this.themeColor);
+    if(this.foregroundColor) this.elementRef.nativeElement.style.setProperty('--foregroundColor', this.foregroundColor);
+  }
+
+  
+
+}

package/src/app/chatlib/list-conversations-component/ion-list-conversations/ion-list-conversations.component.html

@@ -76,7 +76,7 @@
 
 
 <ion-item button="true" lines="none" class="ion-no-padding" [class.ion-selected]="conversation?.uid === uidConvSelected"
-  *ngFor="let conversation of listConversations" (click)="openConversationByID(conversation)" detail=false>
+  *ngFor="let conversation of listConversations; let index= index" (click)="openConversationByID(conversation)" detail=false>
   <div tabindex="0"></div>
 
   <!-- <div [class.selected]="conversation.uid === uidConvSelected"></div> -->

package/src/app/chatlib/list-conversations-component/ion-list-conversations/ion-list-conversations.component.ts

@@ -41,7 +41,7 @@ export class IonListConversationsComponent extends ListConversationsComponent im
   public alert_lbl: string;
   public actionNotAllowed_lbl: string;
   public youAreNoLongerAmongTheTeammatesManagingThisConversation_lbl: string;
-public ok_lbl: string;
+  public ok_lbl: string;
 
   tooltip_options = {
     'show-delay': 0,
@@ -119,35 +119,22 @@ public ok_lbl: string;
 
 
   translateLbls() {
-    this.translate.get('Resolve')
-      .subscribe((text: string) => {
-        this.resolve_btn_tooltip = text;
-      });
-
-    this.translate.get('Archive')
-      .subscribe((text: string) => {
-        this.archive_btn_tooltip = text;
-      });
-
-    this.translate.get('ALERT_TITLE')
-      .subscribe((text: string) => {
-        this.alert_lbl = text;
-      });
-
-      this.translate.get('ActionNotAllowed')
-      .subscribe((text: string) => {
-        this.actionNotAllowed_lbl = text;
-      });
-
-      this.translate.get('YouAreNoLongerAmongTheTeammatesManagingThisConversation')
-      .subscribe((text: string) => {
-        this.youAreNoLongerAmongTheTeammatesManagingThisConversation_lbl = text;
-      });
-
-      this.translate.get('CLOSE_ALERT_CONFIRM_LABEL')
-      .subscribe((text: string) => {
-        this.ok_lbl = text;
-      });
+    const translationKeys = [
+      'Resolve',
+      'Archive',
+      'ALERT_TITLE',
+      'ActionNotAllowed',
+      'CLOSE_ALERT_CONFIRM_LABEL',
+      'YouAreNoLongerAmongTheTeammatesManagingThisConversation'
+    ]
+    this.translate.get(['Resolve', 'Archive', 'ALERT_TITLE']).subscribe((translations: string) => {
+        this.resolve_btn_tooltip = translations['Resolve'];
+        this.archive_btn_tooltip = translations['Archive'];
+        this.alert_lbl = translations['ALERT_TITLE']
+        this.actionNotAllowed_lbl = translations['ActionNotAllowed']
+        this.ok_lbl = translations['CLOSE_ALERT_CONFIRM_LABEL']
+        this.youAreNoLongerAmongTheTeammatesManagingThisConversation_lbl = translations['YouAreNoLongerAmongTheTeammatesManagingThisConversation']
+    });
   }
 
   setMomentLocale() {
@@ -227,6 +214,7 @@ public ok_lbl: string;
     var conversationId = conversation.uid;
     this.logger.log('[ION-LIST-CONVS-COMP] - closeConversation - conversationId ', conversationId)
     this.onCloseConversation.emit(conversation)
+    let currentIndex = this.listConversations.findIndex(conv => conv.uid === conversation.uid)
   }
 
 

package/src/app/chatlib/list-conversations-component/list-conversations/list-conversations.component.ts

@@ -59,7 +59,6 @@ export class ListConversationsComponent implements OnInit {
   public openConversationByID(conversation) {
     this.logger.log('[LISTCONVERSATIONS-W] openConversationByID: ', conversation);
     if (conversation) {
-      this.logger.log(conversation.recipient_fullname)
       // this.conversationsService.updateIsNew(conversation);
       // this.conversationsService.updateConversationBadge();
       this.uidConvSelected = conversation.uid

package/src/app/components/conversation-detail/header-conversation-detail/header-conversation-detail.component.html

@@ -1,8 +1,8 @@
 <ion-header no-border class="ion-no-border">
-  <ion-toolbar style="height:60px">
-    <ion-buttons slot="start" style="height:60px">
+  <ion-toolbar>
+    <ion-buttons slot="start" style="height:60px" *ngIf="isMobile">
       <!-- (click)="pushPage('conversations-list')" defaultHref="/conversations-list" -->
-      <ion-back-button style="display: block;" text="" *ngIf="isMobile" (click)="goBackToConversationList()">
+      <ion-back-button style="display: block;" text=""  (click)="goBackToConversationList()">
       </ion-back-button>
     </ion-buttons>
 
@@ -12,7 +12,9 @@
         <!-- [ngStyle] = "{ 'left': platformName === 'ios' ? '55px' : ''  }" -->
         <div *ngIf="conversationAvatar" class="avatar-container" (click)="onOpenCloseInfoConversation()" style="cursor: pointer"
           [ngClass]="{ 'avatar-container-ios': platformName === 'ios' }">
-          <app-avatar-profile [itemAvatar]=conversationAvatar></app-avatar-profile>
+          <app-avatar-profile 
+            [itemAvatar]=conversationAvatar>
+          </app-avatar-profile>
         </div>
         <!-- [ngStyle] = "{ 'left': platformName === 'ios' ? '63px' : ''  }" -->
         <div *ngIf="isDirect" class="user-presence" [ngClass]="{ 'user-presence-ios': platformName === 'ios' }">
@@ -32,7 +34,7 @@
       <!-- (click)="onOpenCloseInfoConversation()" -->
       <div *ngIf="conversationAvatar" class="tile-info-with" 
         [ngClass]="{ 'tile-info-with-ios': platformName === 'ios' }">
-        <span class="tile-username">{{ conversationAvatar.conversation_with_fullname }} </span>
+        <span class="tile-username">{{ conversationAvatar.conversation_with_fullname | truncate:50 }} </span>
         <!-- <span class="tile-username">{{ conversation_with_fullname }} </span> -->
 
       </div>

package/src/app/components/conversation-detail/header-conversation-detail/header-conversation-detail.component.scss

@@ -4,8 +4,29 @@ ion-header {
     border-bottom-style: solid;
     border-color: var(--light-gray);
     border-bottom-width: thin;
+    ion-toolbar{
+        height: 60px;
+        .flex-container{
+            display: flex;
+        }
+
+        .back-flex-container{
+            flex: 0 1 auto;
+            order: 0;
+        }
+        .user-info-flex-container{
+            flex: 0 1 auto;
+            order: 1;
+        }
+        .resolve-flex-container{
+            flex: 0 1 auto;
+            order: 2;
+        }
+    }
     ion-title {
         text-align: left;
+        padding-inline: unset;
+        margin: 0px 10px;
         height: 40px;
         width: 100%;
     }

package/src/app/components/conversation-detail/header-conversation-detail/header-conversation-detail.component_2.html

@@ -0,0 +1,116 @@
+<ion-header no-border class="ion-no-border">
+  <ion-toolbar style="height:60px">
+    <div class="flex-container">
+      <div class="back-flex-container">
+        <ion-buttons slot="start" style="height:60px">
+          <!-- (click)="pushPage('conversations-list')" defaultHref="/conversations-list" -->
+          <ion-back-button style="display: block;" text="" *ngIf="isMobile" (click)="goBackToConversationList()">
+          </ion-back-button>
+        </ion-buttons>
+      </div>
+      <div class="user-info-flex-container">
+        <div style="display: flex;">
+          <div>1</div>
+          <div>2</div>
+        </div>
+      </div>
+
+      <div class="resolve-flex-container">
+        <ion-buttons slot="end">
+
+          <!-- <ion-button ion-button fill="clear" color="primary" size="small" (click)="presentCreateTicketModal()" [ngClass]="{'resolve-conv-margin-right': !isMobile}">
+            <ion-icon name="ticket-outline"></ion-icon>
+            <span style="text-transform: capitalize; margin-left: 5px;"> {{ 'Crea ticket' | translate}} </span>
+          </ion-button> -->
+        
+          <ion-button *ngIf="conversationUid?.startsWith('support-group') && conv_type !== 'archived'" ion-button fill="clear" color="primary" size="small" 
+          (click)="closeConversation()" [ngClass]="{'resolve-conv-margin-right': !isMobile}" [disabled]="conv_closed === true">
+            <!-- <ion-icon slot="icon-only" name="alert-circle-outline"></ion-icon> -->
+            <ion-icon name="archive-outline"></ion-icon>
+            <!-- <ion-icon slot="icon-only"  name="information-outline"></ion-icon> -->
+            <span style="text-transform: capitalize; margin-left: 5px;"> {{ 'Resolve' | translate}} </span>
+          </ion-button>
+        
+          <ion-button *ngIf="!openInfoConversation" ion-button fill="clear" (click)="onOpenCloseInfoConversation()">
+            <!-- <ion-icon slot="icon-only" name="alert-circle-outline"></ion-icon> -->
+            <ion-icon slot="icon-only" name="information-circle-outline"></ion-icon>
+            <!-- <ion-icon slot="icon-only"  name="information-outline"></ion-icon> -->
+        
+          </ion-button>
+          <ion-button *ngIf="openInfoConversation" ion-button fill="clear" (click)="onOpenCloseInfoConversation()">
+            <ion-icon slot="icon-only" name="close-circle-outline"></ion-icon>
+          </ion-button>
+        
+        </ion-buttons>
+      </div>
+
+    </div>
+  </ion-toolbar>
+</ion-header>
+
+
+
+
+<ion-title [class.info-open]="openInfoConversation || openInfoMessage">
+
+  <div *ngIf="conversationAvatar" class="avatar-and-typing-wpr" >
+    <!-- [ngStyle] = "{ 'left': platformName === 'ios' ? '55px' : ''  }" -->
+    <div *ngIf="conversationAvatar" class="avatar-container" (click)="onOpenCloseInfoConversation()" style="cursor: pointer"
+      [ngClass]="{ 'avatar-container-ios': platformName === 'ios' }">
+      <app-avatar-profile [itemAvatar]=conversationAvatar></app-avatar-profile>
+    </div>
+    <!-- [ngStyle] = "{ 'left': platformName === 'ios' ? '63px' : ''  }" -->
+    <div *ngIf="isDirect" class="user-presence" [ngClass]="{ 'user-presence-ios': platformName === 'ios' }">
+      <app-user-presence [idUser]=conversationAvatar.conversation_with [translationMap]=translationMap
+        [borderColor]=borderColor [fontColor]=fontColor>
+      </app-user-presence>
+    </div>
+
+    <div *ngIf="conversationAvatar" class="user-typing">
+      <app-user-typing [idConversation]=conversationAvatar.uid [idCurrentUser]=idLoggedUser [isDirect]=isDirect
+        [translationMap]=translationMap [color]=fontColor [membersConversation]=membersConversation>
+      </app-user-typing>
+    </div>
+
+  </div>
+  <!-- [ngClass] = "{ 'tile-info-with-ios': platformName === 'ios' ? '82px' : ''82px''  }" -->
+  <!-- (click)="onOpenCloseInfoConversation()" -->
+  <div *ngIf="conversationAvatar" class="tile-info-with" 
+    [ngClass]="{ 'tile-info-with-ios': platformName === 'ios' }">
+    <span class="tile-username">{{ conversationAvatar.conversation_with_fullname | truncate:50 }} </span>
+    <!-- <span class="tile-username">{{ conversation_with_fullname }} </span> -->
+
+  </div>
+
+  <!-- <div *ngIf="conversationWithFullname" class="tile-info-with" (click)="onOpenCloseInfoConversation()">        
+    <span class="tile-username">{{ conversationWithFullname }} </span>
+  </div> -->
+
+</ion-title>
+<!-- openInfoConversation  {{openInfoConversation}} -->
+<ion-buttons slot="end">
+
+  <!-- <ion-button ion-button fill="clear" color="primary" size="small" (click)="presentCreateTicketModal()" [ngClass]="{'resolve-conv-margin-right': !isMobile}">
+    <ion-icon name="ticket-outline"></ion-icon>
+    <span style="text-transform: capitalize; margin-left: 5px;"> {{ 'Crea ticket' | translate}} </span>
+  </ion-button> -->
+
+  <ion-button *ngIf="conversationUid?.startsWith('support-group') && conv_type !== 'archived'" ion-button fill="clear" color="primary" size="small" 
+  (click)="closeConversation()" [ngClass]="{'resolve-conv-margin-right': !isMobile}" [disabled]="conv_closed === true">
+    <!-- <ion-icon slot="icon-only" name="alert-circle-outline"></ion-icon> -->
+    <ion-icon name="archive-outline"></ion-icon>
+    <!-- <ion-icon slot="icon-only"  name="information-outline"></ion-icon> -->
+    <span style="text-transform: capitalize; margin-left: 5px;"> {{ 'Resolve' | translate}} </span>
+  </ion-button>
+
+  <ion-button *ngIf="!openInfoConversation" ion-button fill="clear" (click)="onOpenCloseInfoConversation()">
+    <!-- <ion-icon slot="icon-only" name="alert-circle-outline"></ion-icon> -->
+    <ion-icon slot="icon-only" name="information-circle-outline"></ion-icon>
+    <!-- <ion-icon slot="icon-only"  name="information-outline"></ion-icon> -->
+
+  </ion-button>
+  <ion-button *ngIf="openInfoConversation" ion-button fill="clear" (click)="onOpenCloseInfoConversation()">
+    <ion-icon slot="icon-only" name="close-circle-outline"></ion-icon>
+  </ion-button>
+
+</ion-buttons>

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

@@ -40,7 +40,7 @@
 
       <div class="start-buttons" style="position: absolute;display: flex; top: 2px;">
 
-        <ng-container *ngIf="areVisibleCAR && support_mode === true">
+        <ng-container *ngIf="areVisibleCAR && supportMode">
           <div class="canned-responses-btn-wpr" style="margin-left: -5px;"
             tooltip="{{translationMap?.get('CANNED_RESPONSES')}}" [options]="tooltipOptions" placement="top">
             <ion-button ion-button fill="clear" class="canned-responses-btn" (click)="openCannedResponses()"
@@ -110,7 +110,7 @@
 
 
 
-      <div class="text-message" [ngClass]="{'text-message-no-cr': areVisibleCAR === false || support_mode === false}">
+      <div class="text-message" [ngClass]="{'text-message-no-cr': areVisibleCAR === false || supportMode === false}">
         <ion-textarea id="ion-textarea" #messageTextArea #message_text_area #textArea rows="1"
           [placeholder]="TEXAREA_PLACEHOLDER" autosize="false" auto-grow="true" autofocus="true" [value]=""
           [(ngModel)]="messageString" (ionChange)="ionChange($event);" [disabled]="disableTextarea"

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

@@ -46,7 +46,7 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
   @Input() tagsCannedFilter: any = [];
   @Input() tagsCannedCount: number;
   @Input() areVisibleCAR: boolean;
-  @Input() support_mode: boolean;
+  @Input() supportMode: boolean;
   @Input() events: Observable<void>;
   @Input() fileUploadAccept: string
   @Input() isOpenInfoConversation: boolean;
@@ -157,7 +157,7 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
     } else {
       this.IS_SUPPORT_GROUP_CONVERSATION = false
     }
-    this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] ngOnChanges support_mode ', this.support_mode)
+    this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] ngOnChanges supportMode ', this.supportMode)
     this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] ngOnChanges disableTextarea ', this.disableTextarea)
     this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] ngOnChanges DROP EVENT ", this.dropEvent);
     this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] ngOnChanges tagsCannedFilter ", this.tagsCannedFilter);

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

@@ -1,3 +1,4 @@
+import { EventsService } from './../../services/events-service';
 import { Component, EventEmitter, HostListener, OnInit, Output } from '@angular/core';
 import { WebsocketService } from 'src/app/services/websocket/websocket.service';
 import { Subject } from 'rxjs';
@@ -53,6 +54,7 @@ export class ProjectItemComponent implements OnInit {
     public tiledeskService: TiledeskService,
     public webSocketJs: WebSocketJs,
     private appConfigProvider: AppConfigProvider,
+    public events: EventsService
   ) { }
 
   ngOnInit() {
@@ -209,10 +211,13 @@ export class ProjectItemComponent implements OnInit {
       this.logger.log('[PROJECT-ITEM] - LAST PROJECT PARSED ', this.project)
     }
 
+    
+
 
   }
 
   doProjectSubscriptions(project) {
+    this.events.publish('storage:last_project', project)
     this.logger.log('[PROJECT-ITEM] doProjectSubscriptions project ', project)
     if (project) {
       const user_role = this.project.role

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

@@ -83,21 +83,14 @@ export class SidebarComponent implements OnInit {
 
 
   getStoredProjectAndUserRole() {
-    const stored_project = localStorage.getItem('last_project')
-    this.logger.log('[SIDEBAR] stored_project ', stored_project)
-    if (stored_project && stored_project !== 'undefined') {
-      const project = JSON.parse(stored_project)
-      this.logger.log('[SIDEBAR] project ', project)
-
-      this.project_id = project.id_project.id
-      this.logger.log('[SIDEBAR] project_id ', this.project_id)
-
-      this.USER_ROLE = project.role;
-      this.logger.log('[SIDEBAR] USER_ROLE ', this.USER_ROLE)
-      this.buildURLs(this.USER_ROLE)
-    } else {
-      this.logger.error('[SIDEBAR] stored_project not found in storage', stored_project)
-    }
+    this.events.subscribe('storage:last_project',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)
+      }
+    })
   }
 
   buildURLs(USER_ROLE) {