@chat21/chat21-ionic 3.0.80-rc.1 → 3.0.80

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

@@ -1,18 +1,11 @@
 
 ion-header {
-    border: none;
-    &.mobile{
-        --ion-background-color: #fff;
-        border-bottom-style: solid;
-        border-color: var(--light-gray);
-        border-bottom-width: thin;
-    }
-    
+    --ion-background-color: #fff;
+    border-bottom-style: solid;
+    border-color: var(--light-gray);
+    border-bottom-width: thin;
     ion-toolbar{
-        height: var(--header-height);
-        &:not(.mobile){
-            --background: var(--list-bkg-color);
-        }
+        height: 60px;
         .flex-container{
             display: flex;
         }
@@ -34,7 +27,7 @@ ion-header {
         text-align: left;
         padding-inline: unset;
         margin: 0px 10px;
-        // height: 40px;
+        height: 40px;
         width: 100%;
     }
     ion-avatar {
@@ -76,27 +69,17 @@ ion-header {
         }
     }
     .tile-info-with {
-        display: flex;
-
-        .tile-username {
-            display: inline-block;
-            font-size: 18px;
-            margin: 0;
-            padding: 0;
-    
-            color: #1f2d3d;
-            font-weight: 400; //600;
-            -webkit-font-smoothing: antialiased;
-            text-rendering: optimizeLegibility;
-            -webkit-text-size-adjust: none;
-            -moz-text-size-adjust: none;
-            -ms-text-size-adjust: none;
-            text-size-adjust: none;
-            -webkit-user-select: text;
-            -moz-user-select: text;
-            -ms-user-select: text;
-            user-select: text;
-        }
+        // position: relative;
+        // display: inline-block;
+        // vertical-align: middle;
+        // margin: -6px 0px 0 6px;
+        position: absolute;
+        margin: auto 0;
+        height: 100%;
+        top: 0;
+        left: 50px;
+        vertical-align: middle;
+        // cursor: pointer;
     }
     .tile-point {
         width: 10px;
@@ -107,7 +90,27 @@ ion-header {
         margin-right: 5px;
         vertical-align: middle;
     }
-    
+    .tile-username {
+        display: inline-block;
+        font-size: 15px;
+        color: var(--black);
+        margin: 0;
+        padding: 0;
+
+        color: #3c4858;
+        font-family: "Google Sans",sans-serif!important;
+        font-weight: 600;
+        -webkit-font-smoothing: antialiased;
+        text-rendering: optimizeLegibility;
+        -webkit-text-size-adjust: none;
+        -moz-text-size-adjust: none;
+        -ms-text-size-adjust: none;
+        text-size-adjust: none;
+        -webkit-user-select: text;
+        -moz-user-select: text;
+        -ms-user-select: text;
+        user-select: text;
+    }
 
     .tile-last-activity {
         color: var(--light-gray);
@@ -122,9 +125,6 @@ ion-header {
     }
     
     ion-buttons {
-        ion-icon , span{
-            color: var(--basic-blue)
-        }
         button {
             max-width: 30px;
             padding: 0;
@@ -133,86 +133,42 @@ ion-header {
     }
 }
 
-.avatar-and-typing-wpr{
-    display: flex;
-    &.mobile{
-        margin-left: 25px;
-    }
-}
-
 .avatar-container {
-    // background-color: #fff;
+    background-color: #fff;
     color: #fff;
     text-align: center;
-    width: 44px;
-    height: 44px;
-    // position: absolute;
-    // top: 0;
-    // left: 20px;
+    width: 40px;
+    height: 40px;
+    position: absolute;
+    top: 0;
     border-radius: 50%;
     padding: 0px;
-    // transform: translateX(-50%);
+    transform: translateX(-50%);
+    left: 20px;
 
     border-color: #fff;
     border-style: solid;
     border-width: 0px;
     line-height: 40px;
     display: inline-block;
-    cursor: pointer;
 }
-
-.avatar-container-ios {
-    left: 55px;
-    top: 10px;
-}
-
-.info-container{
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    margin-left: 12px;
-    width: 80%;
-}
-
 .user-presence {
     position: absolute;
-    bottom: 3px; //0;
+    bottom: 0;
     height: 12px;
     left: 30px;
     width: 100px;
 }
-.subtitle-info {
-    // position: absolute;
-    // left: 50px;
-    // bottom: -3px;
-    // padding: 0;
-    // margin: 0;
-    display: flex;
-    align-items: center;
-    // height: 16px;
-    // width: 140px;
-    font-size: 12px;
-    .conversation_project{
-        display: inline-flex;
-        align-items: center;
-        line-height: 1.2rem;
-        font-weight: 500;
-        color: #779bbb;
-        font-size: 10px;
-        max-width: 90%;
-        margin-right: 5px;
-        svg {
-            fill:#779bbb;
-            vertical-align: sub;
-        }
-        span{
-            padding-left: 5px
-        }
-    }
+.user-typing {
+    position: absolute;
+    left: 50px;
+    bottom: -3px;
+    padding: 0;
+    margin: 0;
+    height: 16px;
+    width: 140px;
 }
 
-
-
 .tile-info-with-ios {
     left: 82px !important;
     top: 10px!important;
@@ -222,4 +178,11 @@ ion-header {
     left: 63px;
 }
 
+.avatar-container-ios {
+    left: 55px;
+    top: 10px;
+}
 
+.resolve-conv-margin-right {
+    margin-right: 52px;
+}

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

@@ -1,4 +1,3 @@
-import { TYPE_GROUP } from './../../../../chat21-core/utils/constants';
 import {
   Component,
   OnInit,
@@ -23,7 +22,7 @@ import { ModalController } from '@ionic/angular'
 import { EventsService } from 'src/app/services/events-service'
 import { CreateTicketPage } from 'src/app/pages/create-ticket/create-ticket.page'
 import { TiledeskService } from 'src/app/services/tiledesk/tiledesk.service'
-import { TYPE_DIRECT, TYPE_SUPPORT_GROUP } from 'src/chat21-core/utils/constants'
+import { TYPE_DIRECT } from 'src/chat21-core/utils/constants'
 
 @Component({
   selector: 'app-header-conversation-detail',
@@ -35,22 +34,24 @@ export class HeaderConversationDetailComponent implements OnInit, OnChanges {
   @Input() idLoggedUser: string
   @Input() conversationUid: string
   @Input() conv_type: string
+  @Input() isOpenInfoConversation: boolean = true
   @Input() isMobile: boolean
-  @Input() translationsMap: Map<string, string>
+  @Input() translationMap: Map<string, string>
+  @Output() eventOpenCloseInfoConversation = new EventEmitter<boolean>()
   conversationWithFullname: string
   openInfoConversation = true
-  
+  openInfoMessage = true
+
   isDirect = false
+  isTyping = false
   borderColor = '#ffffff'
   fontColor = '#949494'
+  membersConversation = ['SYSTEM']
   platformName: string
   conv_closed: boolean = false;
   IS_ON_IOS_MOBILE_DEVICE: boolean
   private logger: LoggerService = LoggerInstance.getInstance()
 
-  TYPE_SUPPORT_GROUP = TYPE_SUPPORT_GROUP
-  TYPE_GROUP = TYPE_GROUP
-
   constructor(
     public imageRepoService: ImageRepoService,
     private route: ActivatedRoute,
@@ -72,6 +73,7 @@ export class HeaderConversationDetailComponent implements OnInit, OnChanges {
     this.logger.log('[CONVS-DETAIL][HEADER] - (ngOnInit) - conversationAvatar', this.conversationAvatar,)
     this.logger.log('[CONVS-DETAIL][HEADER] - (ngOnInit) -  conv_type', this.conv_type)
     this.listenToConversationHasBeenClosed()
+    this.initialize();
     // this.isOniOSMobileDevice()
   }
 
@@ -89,8 +91,8 @@ export class HeaderConversationDetailComponent implements OnInit, OnChanges {
     this.logger.log('[CONVS-DETAIL][HEADER] - (ngOnChanges) -  conversationAvatar', this.conversationAvatar)
     if (this.conversationAvatar) {
       this.conversationAvatar.imageurl = this.imageRepoService.getImagePhotoUrl(this.conversationAvatar.uid)
-      this.initialize()
-    }
+    } 
+    this.openInfoConversation = this.isOpenInfoConversation
   }
 
   // ----------------------------------------------------
@@ -100,6 +102,8 @@ export class HeaderConversationDetailComponent implements OnInit, OnChanges {
     this.getPlatformName()
     if ( this.conversationAvatar && this.conversationAvatar.channelType === TYPE_DIRECT ) {
       this.isDirect = true
+    } else if (this.idLoggedUser) {
+      this.membersConversation.push(this.idLoggedUser)
     }
   }
 
@@ -129,6 +133,18 @@ export class HeaderConversationDetailComponent implements OnInit, OnChanges {
     });
   }
 
+
+
+  onOpenCloseInfoConversation() {
+    this.openInfoMessage = false
+    this.openInfoConversation = !this.openInfoConversation
+    this.logger.log(
+      '[CONVS-DETAIL][HEADER] - onOpenCloseInfoConversation - openInfoConversation ',
+      this.openInfoConversation,
+    )
+    this.eventOpenCloseInfoConversation.emit(this.openInfoConversation)
+  }
+
   /** */
   pushPage(event) { }
 

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

@@ -40,28 +40,27 @@
 
       <div class="start-buttons" style="position: absolute;display: flex; top: 2px;">
 
-        <!-- CANNED RESPONSES -->
         <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()"
-              [disabled]="!conversationWith?.startsWith(TYPE_SUPPORT_GROUP) || disableTextarea">
+              [disabled]="!IS_SUPPORT_GROUP_CONVERSATION || disableTextarea">
               <ion-icon slot="icon-only" lazy="true" name="flash-outline" style="font-size: 24px;"></ion-icon>
             </ion-button>
           </div>
-          <div *ngIf="conversationWith?.startsWith(TYPE_SUPPORT_GROUP)  && tagsCannedCount === 0"
+          <div *ngIf="IS_SUPPORT_GROUP_CONVERSATION  && tagsCannedCount === 0"
             tooltip="{{translationMap?.get('NO_CANNED_RESPONSES')}}" [options]="tooltipOptions" placement="top"
             class="no-canned-responses-btn-badge">
             <ion-icon name="alert-sharp" style="vertical-align: middle;"></ion-icon>
           </div>
-          <div *ngIf="conversationWith?.startsWith(TYPE_SUPPORT_GROUP)  && tagsCannedCount > 0"
+          <div *ngIf="IS_SUPPORT_GROUP_CONVERSATION  && tagsCannedCount > 0"
             tooltip="{{translationMap?.get('YES_CANNED_RESPONSES')}}" [options]="tooltipOptions" placement="top"
             class="canned-responses-btn-badge">
             <ion-icon name="information-sharp" style="vertical-align: middle;"></ion-icon>
           </div>
         </ng-container>
 
-        <!-- UPLOAD ATTACHMENT -->
+
         <div class="upload-image-btn-wpr" tooltip="{{translationMap?.get('UPLOAD')}}" [options]="tooltipOptions"
           placement="top">
           <ion-button ion-button fill="clear" class="upload-image-btn" [disabled]="disableTextarea">
@@ -111,7 +110,7 @@
 
       <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]="translationMap?.get('LABEL_ENTER_MSG_SHORT')" autosize="false" auto-grow="true" autofocus="true" [value]=""
+          [placeholder]="TEXAREA_PLACEHOLDER" autosize="false" auto-grow="true" autofocus="true" [value]=""
           [(ngModel)]="messageString" (ionChange)="ionChange($event);" [disabled]="disableTextarea"
           (keydown.enter)="onKeydown($event, messageString)" (paste)="onPaste($event)">
         </ion-textarea>

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

@@ -4,10 +4,6 @@
     height: auto;
     padding: 0;
     margin: 0;
-
-    ion-icon{
-        color: var(--basic-blue);
-    }
     .buttons-left {
         position: absolute;
         left: 0;
@@ -169,6 +165,10 @@
     border-radius: 50%;
 }
 
+.send-msg-activated {
+    color: #3880ff !important;
+}
+
 .send-msg-disabled {
     cursor: default;
     opacity: 0.8;

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

@@ -9,7 +9,7 @@ import { LoaderPreviewPage } from 'src/app/pages/loader-preview/loader-preview.p
 // Services 
 import { UploadService } from 'src/chat21-core/providers/abstract/upload.service';
 // utils
-import { TYPE_MSG_TEXT, TYPE_SUPPORT_GROUP } from 'src/chat21-core/utils/constants';
+import { TYPE_MSG_TEXT } from 'src/chat21-core/utils/constants';
 // Models
 import { UploadModel } from 'src/chat21-core/models/upload';
 import { Observable } from 'rxjs';
@@ -62,12 +62,16 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
   public messageString: string;
   public HAS_PASTED: boolean = false;
   public toastMsg: string;
+  public TEXAREA_PLACEHOLDER: string;
+  public LONG_TEXAREA_PLACEHOLDER: string;
+  public SHORT_TEXAREA_PLACEHOLDER: string;
+  public SHORTER_TEXAREA_PLACEHOLDER: string;
+  public currentWindowWidth: any;
   private logger: LoggerService = LoggerInstance.getInstance();
   public countClicks: number = 0;
   public openCanned: boolean = false;
+  public IS_SUPPORT_GROUP_CONVERSATION: boolean;
   public IS_ON_MOBILE_DEVICE: boolean;
-
-  TYPE_SUPPORT_GROUP = TYPE_SUPPORT_GROUP;
   TYPE_MSG_TEXT = TYPE_MSG_TEXT;
   msg: string
 
@@ -114,8 +118,15 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
     if (this.areVisibleCAR === false) {
       this.emojiPerLine = 7
     }
+    // this.events.subscribe((cannedmessage) => {
+    //   this.logger.log("[CONVS-DETAIL] [MSG-TEXT-AREA] events.subscribe cannedmessage ", cannedmessage);
+    // })
 
+    // this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] LONG_TEXAREA_PLACEHOLDER ", this.LONG_TEXAREA_PLACEHOLDER);
+    // this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] SHORT_TEXAREA_PLACEHOLDER ", this.SHORT_TEXAREA_PLACEHOLDER);
+    // this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] SHORTER_TEXAREA_PLACEHOLDER ", this.SHORTER_TEXAREA_PLACEHOLDER);
     this.listenToNewCannedResponseCreated()
+    this.getWindowWidth();
     this.isOnMobileDevice()
   }
 
@@ -136,8 +147,15 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
       // this.SHORT_TEXAREA_PLACEHOLDER = this.translationMap.get('LABEL_ENTER_MSG_SHORT')
       // this.SHORTER_TEXAREA_PLACEHOLDER = this.translationMap.get('LABEL_ENTER_MSG_SHORTER')
 
+      this.TEXAREA_PLACEHOLDER = this.translationMap.get('LABEL_ENTER_MSG_SHORT')
+
     }
 
+    if (this.conversationWith.startsWith("support-group")) {
+      this.IS_SUPPORT_GROUP_CONVERSATION = true
+    } else {
+      this.IS_SUPPORT_GROUP_CONVERSATION = false
+    }
     // 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);
@@ -188,6 +206,36 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
     }
   }
 
+
+  getWindowWidth(): any {
+    this.currentWindowWidth = window.innerWidth;
+
+
+    // if (this.currentWindowWidth >= 844 && this.isOpenInfoConversation === false && this.conversationWith.startsWith("support-group")) {
+    //   this.TEXAREA_PLACEHOLDER = this.LONG_TEXAREA_PLACEHOLDER;
+    //   this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] currentWindowWidth', this.currentWindowWidth, ' - DISPLAY LONG_TEXAREA_PLACEHOLDER ');
+    // } else if (this.currentWindowWidth >= 844 && this.isOpenInfoConversation === true && this.conversationWith.startsWith("support-group")) {
+    //   this.TEXAREA_PLACEHOLDER = this.SHORT_TEXAREA_PLACEHOLDER;
+    // } else if (this.currentWindowWidth < 844 && this.isOpenInfoConversation === false && this.conversationWith.startsWith("support-group")) {
+    //   this.TEXAREA_PLACEHOLDER = this.SHORT_TEXAREA_PLACEHOLDER;
+    // } else if (this.currentWindowWidth < 844 && this.isOpenInfoConversation === true && this.conversationWith.startsWith("support-group")) {
+    //   this.TEXAREA_PLACEHOLDER = this.SHORTER_TEXAREA_PLACEHOLDER;
+    // } else if (!this.conversationWith.startsWith("support-group")) {
+    //   this.TEXAREA_PLACEHOLDER = this.SHORT_TEXAREA_PLACEHOLDER;
+    // }
+
+    // this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] checkPlatformIsMobile() ", checkPlatformIsMobile());
+    if (checkPlatformIsMobile() === true) {
+
+      if (this.currentWindowWidth <= 430 && this.currentWindowWidth >= 274) {
+        this.TEXAREA_PLACEHOLDER = this.SHORT_TEXAREA_PLACEHOLDER;
+
+      } else if (this.currentWindowWidth <= 273) {
+        this.TEXAREA_PLACEHOLDER = this.SHORTER_TEXAREA_PLACEHOLDER;
+      }
+    }
+  }
+
   // -------------------------------------------------------------------------------------------
   // Change the placeholder of the 'send message' textarea according to the width of the window  
   // -------------------------------------------------------------------------------------------
@@ -195,6 +243,37 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
   onResize(event) {
     // this.getIfTexareaIsEmpty('onResize')
     //  console.log("[CONVS-DETAIL][MSG-TEXT-AREA]  event.target.innerWidth; ", event.target.innerWidth);
+
+
+
+    // if (event.target.innerWidth >= 844 && this.isOpenInfoConversation === false && this.conversationWith.startsWith("support-group")) {
+    //   this.TEXAREA_PLACEHOLDER = this.LONG_TEXAREA_PLACEHOLDER;
+    // } else if (event.target.innerWidth >= 844 && this.isOpenInfoConversation === true && this.conversationWith.startsWith("support-group")) {
+    //   this.TEXAREA_PLACEHOLDER = this.SHORT_TEXAREA_PLACEHOLDER;
+    // } else if (event.target.innerWidth < 844 && this.isOpenInfoConversation === false && this.conversationWith.startsWith("support-group")) {
+    //   this.TEXAREA_PLACEHOLDER = this.SHORT_TEXAREA_PLACEHOLDER;
+    // } else if (event.target.innerWidth < 844 && this.isOpenInfoConversation === true && this.conversationWith.startsWith("support-group")) {
+    //   this.TEXAREA_PLACEHOLDER = this.SHORTER_TEXAREA_PLACEHOLDER;
+    // } else if (!this.conversationWith.startsWith("support-group")) {
+    //   this.TEXAREA_PLACEHOLDER = this.SHORT_TEXAREA_PLACEHOLDER;
+    // }
+
+    // this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] checkPlatformIsMobile() ', checkPlatformIsMobile());
+    if (checkPlatformIsMobile() === true) {
+
+      if (event.target.innerWidth <= 430 && event.target.innerWidth >= 274) {
+        this.TEXAREA_PLACEHOLDER = this.SHORT_TEXAREA_PLACEHOLDER;
+      } else if (this.currentWindowWidth <= 273) {
+        this.TEXAREA_PLACEHOLDER = this.SHORTER_TEXAREA_PLACEHOLDER;
+      }
+
+    }
+
+    // if (checkPlatformIsMobile && event.target.innerWidth <= 430) {
+    //   this.TEXAREA_PLACEHOLDER = this.SHORT_TEXAREA_PLACEHOLDER;
+    // } else if (checkPlatformIsMobile && event.target.innerWidth > 430) { 
+    //   this.TEXAREA_PLACEHOLDER = this.LONG_TEXAREA_PLACEHOLDER;
+    // }
   }
 
 
@@ -619,7 +698,7 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
 
   @HostListener('document:keydown', ['$event'])
   handleKeyboardEvent(event: KeyboardEvent) {
-    // this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] handleKeyboardEvent  event.key ", event);
+    this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] handleKeyboardEvent  event.key ", event);
     // Note: on mac keyboard "metakey" matches "cmd"
     
     if (event.key === 'Enter' && event.altKey || event.key === 'Enter' && event.ctrlKey || event.key === 'Enter' && event.metaKey) {

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

@@ -0,0 +1,13 @@
+<ion-header no-border class="ion-no-border">
+  <ion-toolbar>
+    
+    <ion-buttons slot="start">
+      <ion-button ion-button (click)="onBackButtonHandler()">
+        <ion-icon slot="icon-only" name="arrow-back-outline"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+
+    <ion-title> {{headerTitle}}</ion-title>
+
+  </ion-toolbar>
+</ion-header>

package/src/app/components/{conversations-list/header-conversations-list-archived/header-conversations-list-archived.component.spec.ts → conversation-detail/option-header/option-header.component.spec.ts}

@@ -1,19 +1,19 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { IonicModule } from '@ionic/angular';
 
-import { HeaderConversationsListArchived } from './header-conversations-list-archived.component';
+import { OptionHeaderComponent } from './option-header.component';
 
 describe('OptionHeaderComponent', () => {
-  let component: HeaderConversationsListArchived;
-  let fixture: ComponentFixture<HeaderConversationsListArchived>;
+  let component: OptionHeaderComponent;
+  let fixture: ComponentFixture<OptionHeaderComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ HeaderConversationsListArchived ],
+      declarations: [ OptionHeaderComponent ],
       imports: [IonicModule.forRoot()]
     }).compileComponents();
 
-    fixture = TestBed.createComponent(HeaderConversationsListArchived);
+    fixture = TestBed.createComponent(OptionHeaderComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   }));

package/src/app/components/{conversations-list/header-conversations-list-archived/header-conversations-list-archived.component.ts → conversation-detail/option-header/option-header.component.ts}

@@ -2,14 +2,13 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 
 
 @Component({
-  selector: 'header-conversations-list-archived',
-  templateUrl: './header-conversations-list-archived.component.html',
-  styleUrls: ['./header-conversations-list-archived.component.scss'],
+  selector: 'app-option-header',
+  templateUrl: './option-header.component.html',
+  styleUrls: ['./option-header.component.scss'],
 })
-export class HeaderConversationsListArchived implements OnInit {
+export class OptionHeaderComponent implements OnInit {
 
   @Input() headerTitle: string
-  @Input() isMobile: boolean;
   @Output() onBackButton = new EventEmitter<boolean>();
   static UserPresenceComponent: any[] | any;
 

package/src/app/components/conversation-info/info-content/info-content.component.html

@@ -7,8 +7,7 @@
   </app-info-direct>
 
   <app-info-group *ngIf="panelType === 'group-panel' && IS_GROUP_PANEL === true"
-    [groupDetail]="groupDetail"
-    [isMobile]="isMobile">
+    [groupDetail]="groupDetail">
   </app-info-group>
 
   <app-info-support-group *ngIf="panelType === 'support-group-panel'"

package/src/app/components/conversation-info/info-content/info-content.component.ts

@@ -28,12 +28,11 @@ import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance'
 
 export class InfoContentComponent implements OnInit {
   @Input() openInfoConversation: boolean;
+  @Input() translationMap: Map<string, string>;
   // @Input() member: UserModel;
   @Input() loggedUser: UserModel
   @Input() tenant: string
-  @Input() groupDetail: any;
-  @Input() isMobile: boolean;
-  @Input() translationMap: Map<string, string>;
+  @Input() groupDetail: any
 
 
   public member: UserModel;

package/src/app/components/conversation-info/info-direct/info-direct.component.html

@@ -8,7 +8,15 @@
         <div class="image-profile">
           <app-avatar-profile [itemAvatar]='member'></app-avatar-profile>
         </div>
-        
+
+        <div class="user-presence">
+          <app-user-presence 
+            [idUser]='member.uid'
+            [translationMap]='translationMap' 
+            [borderColor]='borderColor'
+            [fontColor]='fontColor'>
+          </app-user-presence>
+        </div>
         <!-- -> {{member |json}} -->
         <div class="info-profile">
           <div class="name">

package/src/app/components/conversation-info/info-direct/info-direct.component.ts

@@ -15,6 +15,8 @@ export class InfoDirectComponent implements OnInit, AfterViewInit, OnChanges {
   @Input() translationMap: Map<string, string>;
   @Input() conversationWith: string;
 
+  borderColor = '#ffffff';
+  fontColor = '#949494';
   advancedAttributes: Array<any> = [];
   private logger: LoggerService = LoggerInstance.getInstance();