@chat21/chat21-ionic 3.0.85 → 3.0.86-rc.1

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

@@ -1,3 +1,5 @@
+import { TYPE_GROUP, TYPE_SUPPORT_GROUP } from './../../../../chat21-core/utils/constants';
+import { TYPE_DIRECT } from 'src/chat21-core/utils/constants';
 import { Component, EventEmitter, Input, IterableDiffers, KeyValueDiffers, OnInit, Output, SimpleChange } from '@angular/core';
 import { ConversationModel } from 'src/chat21-core/models/conversation';
 import { ImageRepoService } from 'src/chat21-core/providers/abstract/image-repo.service';
@@ -14,6 +16,7 @@ import { AppConfigProvider } from 'src/app/services/app-config';
 import { DomSanitizer } from '@angular/platform-browser'
 import { TiledeskAuthService } from 'src/chat21-core/providers/tiledesk/tiledesk-auth.service';
 import { AlertController } from '@ionic/angular';
+import { CustomTranslateService } from 'src/chat21-core/providers/custom-translate.service';
 // import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
 // import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 
@@ -35,6 +38,8 @@ export class IonListConversationsComponent extends ListConversationsComponent im
   public currentYear: any;
   public browserLang: string;
 
+  public translationsMap: Map<string, string> = new Map()
+
   public PROJECT_FOR_PANEL: any;
   public archive_btn_tooltip: string;
   public resolve_btn_tooltip: string;
@@ -52,6 +57,10 @@ export class IonListConversationsComponent extends ListConversationsComponent im
     'hideDelayAfterClick': 3000,
     'hide-delay': 100
   };
+
+  TYPE_DIRECT = TYPE_DIRECT;
+  TYPE_GROUP = TYPE_GROUP;
+  TYPE_SUPPORT_GROUP = TYPE_SUPPORT_GROUP;
   /**
    * 
    * @param iterableDiffers 
@@ -63,6 +72,7 @@ export class IonListConversationsComponent extends ListConversationsComponent im
     public kvDiffers: KeyValueDiffers,
     public platform: Platform,
     private translate: TranslateService,
+    private translateService: CustomTranslateService,
     private networkService: NetworkService,
     private appConfigProvider: AppConfigProvider,
     private sanitizer: DomSanitizer,
@@ -73,7 +83,6 @@ export class IonListConversationsComponent extends ListConversationsComponent im
     super(iterableDiffers, kvDiffers)
     this.setMomentLocale();
 
-
     // if (this.browserLang) {
 
     //   moment.locale(this.browserLang)
@@ -123,16 +132,11 @@ export class IonListConversationsComponent extends ListConversationsComponent im
       'ALERT_TITLE',
       'ActionNotAllowed',
       'CLOSE_ALERT_CONFIRM_LABEL',
-      'YouAreNoLongerAmongTheTeammatesManagingThisConversation'
+      'YouAreNoLongerAmongTheTeammatesManagingThisConversation',
+      'GROUP_CHAT',
+      'DIRECT_CHAT'
     ]
-    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']
-    });
+    this.translationsMap = this.translateService.translateLanguage(translationKeys)
   }
 
   setMomentLocale() {

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

@@ -5,8 +5,8 @@
       *ngFor="let canned of tagsCannedFilter; let i = index;"
       (click)="onClickCannedFN(canned, $event)">
       <div class="cannedContent">
-        <ion-input [(ngModel)]="canned.title" class="title" id="{{'titleCanned_'+canned._id}}" [class.readonly]="canned?.disabled" [readonly]="canned?.disabled"></ion-input>
-        <ion-input [(ngModel)]="canned.text" *ngIf="canned.text" class="text truncate" [class.readonly]="canned?.disabled" [readonly]="canned?.disabled"></ion-input>
+        <ion-input [class.readonly]="canned?.disabled" [readonly]="canned?.disabled" type="text" [(ngModel)]="canned.title" class="title" id="{{'titleCanned_'+canned._id}}" #title></ion-input>
+        <ion-input [class.readonly]="canned?.disabled" [readonly]="canned?.disabled" type="text" [(ngModel)]="canned.text"  class="text truncate"></ion-input>
       </div>
       <ion-icon class="canned-item-icon"  name="checkmark-sharp" slot=end *ngIf="canned.createdBy === loggedUser.uid && !canned.disabled" (click)="onConfirmEditCanned(canned, $event)"></ion-icon>
       <ion-icon class="canned-item-icon"  name="pencil-sharp" slot=end *ngIf="canned.createdBy === loggedUser.uid && canned.disabled" (click)="onEditCanned(canned, $event)"></ion-icon>
@@ -18,16 +18,16 @@
      <label class="add-canned-response-label" >{{translationMap?.get('AddNewCannedResponse')}}</label> 
     </ion-item>
   </div>
-    <!-- LOADER -->
-    <div class="loader" *ngIf="tagsCannedFilter.length === 0">
+  <!-- LOADER -->
+  <div class="loader" *ngIf="tagsCannedFilter.length === 0">
     <div class="box">
       <!-- <div class="container">
-        <span class="circle"></span>
-        <span class="circle"></span>
-        <span class="circle"></span>
-        <span class="circle"></span>
+        <span class="circle" [ngStyle]="{'background-color': stylesMap?.get('themeColor')}"></span>
+        <span class="circle" [ngStyle]="{'background-color': stylesMap?.get('themeColor')}"></span>
+        <span class="circle" [ngStyle]="{'background-color': stylesMap?.get('themeColor')}"></span>
+        <span class="circle" [ngStyle]="{'background-color': stylesMap?.get('themeColor')}"></span>
       </div> -->
-      <div class="spinner"></div>
+      <div class="spinner" [ngStyle]="{'border-top-color': stylesMap?.get('themeColor')}"></div>
       <div class="label">{{translationMap.get('LABEL_LOADING')}}</div>
     </div>
   </div>

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

@@ -94,23 +94,30 @@
         width: 100%;
     }
 
-    ion-input {
+    ion-input, ion-textarea {
         --padding-bottom: 0px;
         --padding-top: 0px;
         &.text{
             font-style: italic;
+            margin-top: 2px;
         }
         &.title {
             font-weight: 500;
         }
+
         &.readonly{
             cursor: pointer;
             pointer-events: none;
         }
     }
-    .native-input[disabled] {
-        opacity: 10 !important;
-    }
+    // .native-input[disabled] {
+    //     opacity: 10 !important;
+    //     cursor: pointer;
+    // }
+    // .native-textarea[disabled] {
+    //     opacity: 10 !important;
+    //     cursor: pointer;
+    // }
     ion-icon {
         zoom: 0.7;
     }
@@ -183,7 +190,7 @@ ion-item {
             width: 15px;
             height: 15px;
             border-radius: 50%;
-            background-color: #1877f2;
+            background-color: var(--basic-blue);
             animation: move 500ms linear 0ms infinite;
             margin-right: 30px;
             
@@ -202,13 +209,14 @@ ion-item {
             animation: grow 500ms linear 0s infinite reverse;
             }
         }
+
     }
 
     .spinner {
         margin: auto;
         border: 8px solid #EAF0F6;
         border-radius: 50%;
-        border-top: 8px solid #1877f2;
+        border-top: 8px solid var(--basic-blue);
         width: 50px;
         height: 50px;
         animation: spinner 1s linear infinite;
@@ -219,7 +227,6 @@ ion-item {
         100% { transform: rotate(360deg); }
     }
 
-
     .label{
         text-align: center;
         margin-top: 10px;

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

@@ -1,6 +1,6 @@
 import { AppStorageService } from 'src/chat21-core/providers/abstract/app-storage.service';
 import { Component, Input, OnInit, SimpleChange, ElementRef, Output, EventEmitter, HostListener } from '@angular/core';
-import { CreateCannedResponsePage } from 'src/app/pages/create-canned-response/create-canned-response.page';
+import { CreateCannedResponsePage } from 'src/app/modals/create-canned-response/create-canned-response.page';
 import { CannedResponsesService } from 'src/app/services/canned-responses/canned-responses.service';
 import { TiledeskService } from 'src/app/services/tiledesk/tiledesk.service';
 import { UserModel } from 'src/chat21-core/models/user';
@@ -20,6 +20,7 @@ export class CannedResponseComponent implements OnInit {
   @Input() conversationWith: string;
   @Input() conversationWithFullname: string;
   @Input() currentString: string;
+  @Input() stylesMap: Map<string, string>;
   @Input() translationMap: Map<string, string>;
   @Output() onLoadedCannedResponses = new EventEmitter<[any]>();
   @Output() onClickCanned = new EventEmitter<any>();
@@ -194,7 +195,6 @@ export class CannedResponseComponent implements OnInit {
     // this.logger.log('[CANNED] filterItems tagsCannedClone ', items, ' searchTerm: ', searchTerm)
     //this.logger.log("filterItems::: ",searchTerm);
     return items.filter((item) => {
-      //this.logger.log("filterItems::: ", item.title.toString().toLowerCase());
       // this.logger.log('[CANNED] filtered tagsCannedClone item ', item)
       return item.title.toString().toLowerCase().indexOf(searchTerm.toString().toLowerCase()) > -1
     })
@@ -268,7 +268,7 @@ export class CannedResponseComponent implements OnInit {
 
   @HostListener('document:keydown', ['$event'])
   handleKeyboardEvent(event: KeyboardEvent) {
-    this.logger.log("CONVERSATION-DETAIL handleKeyboardEvent  event.key ", event);
+    // this.logger.log("CONVERSATION-DETAIL handleKeyboardEvent  event.key ", event);
 
     if (this.tagsCannedFilter.length > 0) {
       if (event.key === 'ArrowDown') {
@@ -288,7 +288,8 @@ export class CannedResponseComponent implements OnInit {
 
       // set the focus on current canned 
       setTimeout(() => {
-        this.el.nativeElement.querySelector('.canned-list').scrollTop = this.arrowkeyLocation * 59 //59 is the height of the single element
+        this.el.nativeElement.querySelector('.canned-list').scrollTop = this.arrowkeyLocation * 59 // 59px is the height of the single element
+        // this.el.nativeElement.querySelector('#canned-item_'+this.arrowkeyLocation).scrollIntoView({ behavior: 'smooth' })
       }, 0);
 
       if (event.key === 'Enter') {

package/src/app/components/contacts-directory/contacts-directory.component.html

@@ -1,28 +1,24 @@
 
-<ion-content padding>
-  <ion-searchbar id="contacts-searchbar" debounce="500" (ionInput)="onSearchInput($event)"></ion-searchbar>
-  <ion-list>
-    
-    <ion-item button="true" lines="none" class="ion-no-padding" *ngFor="let user of contacts" (click)="goToChat(user)">
-      <div tabindex="0"></div>
-      <!-- <div [class.selected]="user.uid === uidUserSelected"></div> [style.background-color]="user.color"-->
-      <ion-avatar slot="start">
-        <div #avatarPlaceholder class="avatar-placeholder" [ngStyle]="{'background':  'linear-gradient(rgb(255,255,255) -125%,' + user.color + ')'}" [innerHTML]="user.avatar"></div>
-        <div *ngIf="user.imageurl" #avatarImage class="avatar-profile" [style.background-image]="'url(' + user.imageurl + ')'"></div>
-        <!-- <div *ngIf="getImageAvatar(conversation.sender)" #avatarImage class="avatar-profile" [style.background-image]="'url(' + getImageAvatar(conversation.sender) + ')'"></div> -->
-        <div class="user-presence">
-          <app-presence
-          [isOnline]="user.online">
-          </app-presence>
-        </div>
-      </ion-avatar>
-      
-      <ion-label>
-        <h2>{{ user.fullname }}</h2>
-        <!-- <p>{{ user.uid }}</p> -->
-      </ion-label>
-      
-    </ion-item>
+<ion-searchbar id="contacts-searchbar" debounce="500" (ionInput)="onSearchInput($event)"></ion-searchbar>
+
+<ion-item button="true" lines="none" class="ion-no-padding" *ngFor="let user of contacts" (click)="goToChat(user)">
+  <div tabindex="0"></div>
+  <!-- <div [class.selected]="user.uid === uidUserSelected"></div> [style.background-color]="user.color"-->
+  <ion-avatar slot="start">
+    <div #avatarPlaceholder class="avatar-placeholder" [ngStyle]="{'background':  'linear-gradient(rgb(255,255,255) -125%,' + user.color + ')'}" [innerHTML]="user.avatar"></div>
+    <div *ngIf="user.imageurl" #avatarImage class="avatar-profile" [style.background-image]="'url(' + user.imageurl + ')'"></div>
+    <!-- <div *ngIf="getImageAvatar(conversation.sender)" #avatarImage class="avatar-profile" [style.background-image]="'url(' + getImageAvatar(conversation.sender) + ')'"></div> -->
+    <div class="user-presence">
+      <app-presence
+      [isOnline]="user.online">
+      </app-presence>
+    </div>
+  </ion-avatar>
+  
+  <ion-label>
+    <h2>{{ user.fullname }}</h2>
+    <!-- <p>{{ user.uid }}</p> -->
+  </ion-label>
+  
+</ion-item>
 
-  </ion-list>
-</ion-content>

package/src/app/components/contacts-directory/contacts-directory.component.scss

@@ -1,22 +1,24 @@
 ion-item {
     cursor: pointer;
     height: 64px;
+    --min-height: 64px;
     position: relative;
     display: flex;
     text-decoration: none;
-    padding-left: 8px;
-    padding-right: 8px;
+    margin: 4px 5px;
     --padding-start: 0;
     --inner-padding-end: 0;
+    --background: transparent;
+    --background-hover: #000000 !important;
+    border-radius: var(--border-radius-item);
+    
     .selected {
-        border-radius: 10px;
-        padding-left: 8px;
-        padding-right: 8px;
         position: absolute;
         width: 100%;
         height: 100%;
         z-index:-1;
-        background-color: rgba(0, 0, 0, .05);
+        background: var(--list-bkg-color-selected);
+        border-right: 4px solid var(--basic-blue);
     }
     ion-avatar {
         position: relative;

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

@@ -1,51 +1,73 @@
-<ion-header no-border class="ion-no-border">
-  <ion-toolbar>
+<ion-header no-border class="ion-no-border" [class.mobile]="isMobile">
+  <ion-toolbar [class.mobile]="isMobile">
     <ion-buttons slot="start" style="height:60px" *ngIf="isMobile">
       <!-- (click)="pushPage('conversations-list')" defaultHref="/conversations-list" -->
       <ion-back-button style="display: block;" text=""  (click)="goBackToConversationList()">
       </ion-back-button>
     </ion-buttons>
 
-    <ion-title [class.info-open]="openInfoConversation || openInfoMessage">
+    <ion-title>
 
-      <div *ngIf="conversationAvatar" class="avatar-and-typing-wpr" >
+      <div *ngIf="conversationAvatar" class="avatar-and-typing-wpr" [ngClass]="{'mobile': isMobile}">
         <!-- [ngStyle] = "{ 'left': platformName === 'ios' ? '55px' : ''  }" -->
-        <div *ngIf="conversationAvatar" class="avatar-container" (click)="onOpenCloseInfoConversation()" style="cursor: pointer"
-          [ngClass]="{ 'avatar-container-ios': platformName === 'ios' }">
+        <div class="avatar-container" [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 class="info-container">
+
+          <!-- [ngClass] = "{ 'tile-info-with-ios': platformName === 'ios' ? '82px' : ''82px''  }" -->
+          <!-- (click)="onOpenCloseInfoConversation()" -->
+          <div class="tile-info-with" 
+            [ngClass]="{ 'tile-info-with-ios': platformName === 'ios' }">
+            <span class="tile-username truncate">{{ conversationAvatar.conversation_with_fullname}} </span>
+            <!-- <span class="tile-username">{{ conversation_with_fullname }} </span> -->
+          </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]=translationsMap
+              [borderColor]=borderColor 
+              [fontColor]=fontColor>
+            </app-user-presence>
+          </div> -->
+
+          <div class="subtitle-info">
+            <div class="conversation_project">
+              <!-- DIRECT CONV -->
+              <div *ngIf="isDirect">
+                <app-user-presence 
+                  [idUser]="conversationAvatar.conversation_with"
+                  [isMobile]="isMobile"
+                  [translationMap]="translationsMap">
+                </app-user-presence>
+                <!-- <svg xmlns="http://www.w3.org/2000/svg" height="15"  width="15" viewBox="0 0 24 24" fill="#000000"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
+                <span  class="truncate">{{translationsMap.get('DIRECT_CHAT')}}</span> -->
+              </div>
+              <!-- GROUP CONV -->
+              <div *ngIf="conversationUid?.startsWith(TYPE_GROUP)">
+                <svg xmlns="http://www.w3.org/2000/svg" height="15"  width="15" viewBox="0 0 24 24" fill="#000000"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>
+                <span  class="truncate">{{translationsMap.get('GROUP_CHAT')}}</span>
+              </div>
+              <!-- SUPPORT-GROUP CONV -->
+              <div  *ngIf="conversationUid?.startsWith(TYPE_SUPPORT_GROUP)">
+                <svg xmlns="http://www.w3.org/2000/svg" data-v-78d18411="" width="15" height="15" fill="none" viewBox="0 0 24 24" class="inbox-icon"><path d="M22.002 12C22.002 6.477 17.524 2 12 2 6.476 1.999 2 6.477 2 12.001c0 5.186 3.947 9.45 9.001 9.952V20.11c-.778-.612-1.478-1.905-1.939-3.61h1.94V15H8.737a18.969 18.969 0 0 1-.135-5h6.794c.068.64.105 1.31.105 2h1.5c0-.684-.033-1.353-.095-2h3.358c.154.64.237 1.31.237 2h1.5ZM4.786 16.5h2.722l.102.396c.317 1.17.748 2.195 1.27 3.015a8.532 8.532 0 0 1-4.094-3.41ZM3.736 10h3.358a20.847 20.847 0 0 0-.095 2c0 1.043.075 2.051.217 3H4.043a8.483 8.483 0 0 1-.544-3c0-.682.08-1.347.232-1.983L3.736 10Zm5.122-5.902.023-.008C8.16 5.222 7.611 6.748 7.298 8.5H4.25c.905-2 2.56-3.587 4.608-4.402Zm3.026-.594L12 3.5l.126.006c1.262.126 2.48 2.125 3.045 4.995H8.83c.568-2.878 1.79-4.88 3.055-4.996Zm3.343.76-.107-.174.291.121a8.533 8.533 0 0 1 4.339 4.29h-3.048c-.298-1.665-.806-3.125-1.475-4.237Z M12 19a1 1 0 0 0 1 1h3v2h-.5a.5.5 0 1 0 0 1h4a.5.5 0 0 0 0-1H19v-2h3a1 1 0 0 0 1-1v-5a1 1 0 0 0-1-1h-9a1 1 0 0 0-1 1v5Z" fill="currentColor"/></svg>
+                <span *ngIf="conversationAvatar?.project_name" class="truncate">{{conversationAvatar?.project_name}}</span>
+                <span *ngIf="!conversationAvatar?.project_name" class="truncate">{{conversationAvatar?.projectId}}</span>
+              </div>
+            </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>
+        
 
-      </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>
@@ -53,32 +75,27 @@
 
     </ion-title>
     <!-- openInfoConversation  {{openInfoConversation}} -->
-    <ion-buttons slot="end">
+    <!-- <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-button *ngIf="conversationUid?.startsWith('support-group') && conv_type !== 'archived'" ion-button fill="clear" size="small" 
+        (click)="closeConversation()" [disabled]="conv_closed === true">
         <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> -->
+        <span style="text-transform: capitalize; margin-left: 5px;"> {{translationsMap?.get('Resolve')}} </span>
+      </ion-button> -->
 
-      </ion-button>
-      <ion-button *ngIf="openInfoConversation" ion-button fill="clear" (click)="onOpenCloseInfoConversation()">
+      <!-- <ion-button *ngIf="!openInfoConversation" ion-button fill="clear" (click)="onOpenCloseInfoConversation()">
+       <ion-icon slot="icon-only" name="information-circle-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-button> -->
 
-    </ion-buttons>
+    <!-- </ion-buttons> -->
 
   </ion-toolbar>
 </ion-header>