@chat21/chat21-ionic 3.0.61-rc3 → 3.0.61-rc7

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # chat21-ionic ver 3.0
 
+### 3.0.61-rc7
+- Fixes the bug: while loading the app, the conversation list changes size and becomes wider
+- Changes the style of the left sidebar
+- Display in the "user data drawer" an avatar constructed with the initials of the logged in teammate if his profile picture is not available
+
+### 3.0.61-rc6
+- Enhances the style of the sidebar tooltips
+- Fixed bug: for direct conversations opening the "info sidebar" by clicking on the teammate avatar available in the conversation detail header does not work correctly
+- Fixes the bug: not all chat strings are translated into the browser language or into the selected language
+- Fixes the bug: Email is broken on dashes in user details sidebar
+- Displays an alert when a teammate archives a conversation from a project they are no longer a part of
+- Disable the "send message" textarea when a teammate replies to a support conversation of a project he is no longer a part of
+- Adds, when an image is pasted in the "send message" text area, the text of the text area as a caption of the image preview modal window
+- Adds, when an image is uploaded, the text of the "send message" text area as a caption of the image preview modal window
+
+### 3.0.61-rc5
+- Fixes the bug: on mobile devices the chat content is shifted to the right
+- Adds the ability to open and close the "user detail sidebar" by clicking on the avatar of the logged teammate present on the sidebar
+- Fixes the bug: canned responses remain visible even if, after making a filter, the backslash is deleted
+- Prevents the "open canned responses" button from inserting a backslash if another one exists before
+- Hides the badge that displays the number of unassigned conversations if there are none
+- Improves custom scrollbar displayed in the sidebar and in user detail sidebar 
+- Adds custom scrollbars to the conversation list and to the conversation detail
+
+### 3.0.61-rc4
+- Hides the item showing unassigned conversations in the list of archived conversations
+- Adds in the list of conversations to the "archive" button the tooltip "Resolve" if the conversation is of type "support" and the tooltip "Archive" if the conversation is of type "direct" or "group"
+- Changes all occurrences of the "teammatesButton" environment variable to "writeToButton"
+- Fixes the bug: if the sidebar is visible and the window width is less than 768px, the content of the conversation detail is not completely visible
+- Moves for conversations of type "support" the "Resolve conversation" button from the dropdown menu to the header of the conversation detail
+
 ### 3.0.61-rc3
 - Replaces console.log with custom loggers 
 - Fixes the bug: the info support sidebar is no more displayed

package/config.xml

@@ -100,19 +100,19 @@
         <splash height="828" src="resources/ios/splash/Default-Landscape-1792h~iphone.png" width="1792" />
     </platform>
     <engine name="android" spec="^6.2.3" />
-    <engine name="browser" spec="5.0.4" />
+    <engine name="browser" spec="^5.0.4" />
     <engine name="ios" spec="6.1.1" />
     <plugin name="cordova-android-support-gradle-release" spec="^3.0.1">
         <variable name="ANDROID_SUPPORT_VERSION" value="27.+" />
     </plugin>
     <plugin name="cordova-plugin-chooser" spec="^1.3.2" />
-    <plugin name="cordova-plugin-device" spec="^2.0.2" />
+    <plugin name="cordova-plugin-device" spec="^2.0.3" />
     <plugin name="cordova-plugin-ionic-keyboard" spec="^2.2.0" />
     <plugin name="cordova-plugin-ionic-webview" spec="^4.2.1">
         <variable name="ANDROID_SUPPORT_ANNOTATIONS_VERSION" value="27.+" />
     </plugin>
     <plugin name="cordova-plugin-network-information" spec="^2.0.2" />
-    <plugin name="cordova-plugin-splashscreen" spec="^5.0.2" />
-    <plugin name="cordova-plugin-statusbar" spec="^2.4.2" />
-    <plugin name="cordova-plugin-whitelist" spec="^1.3.3" />
+    <plugin name="cordova-plugin-splashscreen" spec="^5.0.4" />
+    <plugin name="cordova-plugin-statusbar" spec="^2.4.3" />
+    <plugin name="cordova-plugin-whitelist" spec="^1.3.5" />
 </widget>

package/deploy_pre.sh

@@ -24,15 +24,15 @@ sed -i -e "s/$URL_VER/g" src/utils/constants.ts
 
 # ng build --prod --base-href /$NEW_BUILD/
 #ionic cordova build browser --prod
-#ionic cordova build browser --prod --release
-# ionic cordova build --env=pre browser --prod  #--verbose
 
 ionic cordova platform add browser --save
+#ionic cordova build browser --prod --release
+# ionic cordova build --env=pre browser --prod  #--verbose
 ionic cordova build -c=pre  browser --prod
 cp -p src/firebase-messaging-sw.js platforms/browser/www/
 cp -p src/manifest.json platforms/browser/www/
 cp -p src/chat-config.json platforms/browser/www/
-cp config.xml platforms/browser/www/
+
  
 ######### chat-ionic5 - the good one - publish in pre
 cd platforms/browser/www
@@ -47,18 +47,18 @@ echo available on https://s3.eu-west-1.amazonaws.com/tiledesk-dashboard-pre/chat
 echo available on https://support-pre.tiledesk.com/chat-ionic5/$version/index.html
 echo available on https://support-pre.tiledesk.com/chat-ionic5/index.html
 
-######### chat-ionic5-test - publish in pre with the projects right panel 
+######### chat-ionic5-panel - publish in pre with the projects right panel 
 # cd platforms/browser/www
-# aws s3 sync . s3://tiledesk-dashboard-pre/chat-ionic5-test/$version/
-# aws s3 sync . s3://tiledesk-dashboard-pre/chat-ionic5-test/
+# aws s3 sync . s3://tiledesk-dashboard-pre/chat-ionic5-panel/$version/
+# aws s3 sync . s3://tiledesk-dashboard-pre/chat-ionic5-panel/
 # cd ../../../
 
 # aws cloudfront create-invalidation --distribution-id E2DTAKWHWQ7C3J --paths "/*"
 
-# echo new version deployed on s3://tiledesk-dashboard-pre/chat-ionic5-test/$version/
-# echo available on https://s3.eu-west-1.amazonaws.com/tiledesk-dashboard-pre/chat-ionic5-test/$version/index.html
-# echo available on https://support-pre.tiledesk.com/chat-ionic5-test/$version/index.html
-# echo available on https://support-pre.tiledesk.com/chat-ionic5-test/index.html
+# echo new version deployed on s3://tiledesk-dashboard-pre/chat-ionic5-panel/$version/
+# echo available on https://s3.eu-west-1.amazonaws.com/tiledesk-dashboard-pre/chat-ionic5-panel/$version/index.html
+# echo available on https://support-pre.tiledesk.com/chat-ionic5-panel/$version/index.html
+# echo available on https://support-pre.tiledesk.com/chat-ionic5-panel/index.html
 
 
 ####### chat ionic MQTT in pre da aggiungere in deploy_pre.sh

package/deploy_prod.sh

@@ -25,9 +25,13 @@ cp -p config.xml platforms/browser/www/
 
 ###### CHAT in prod
 cd platforms/browser/www
-aws s3 sync . s3://tiledesk-console/v2/chat/
+aws s3 sync . s3://tiledesk-dashboard/v2/chat/
 aws s3 sync . s3://tiledesk-console/v2/chat/$version/
 cd ../../../
+# aws cloudfront create-invalidation --distribution-id E2DTAKWHWQ7C3J --paths "/*"
+
+# echo new version deployed on s3://tiledesk-dashboard/chat/$NEW_BUILD/
+echo new version deployed on s3://tiledesk-console/v2/chat/$version/
 echo new version deployed on s3://tiledesk-console/v2/chat/
 echo available on https://console.tiledesk.com/v2/chat/$version/index.html
 echo available on https://console.tiledesk.com/v2/chat/index.html

package/env.sample

@@ -11,7 +11,7 @@ FILE_UPLOAD_ACCEPT=*/*
 TENANT=tilechat
 LOG_LEVEL=INFO
 SUPPORT_MODE=false
-TEAMMATES_BUTTON=false,
+WRITE_TO_BUTTON=false,
 ARCHIVED_BUTTON=false,
 
 # For MQTT Chat Engine

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chat21/chat21-ionic",
-    "version": "3.0.61-rc3",
+    "version": "3.0.61-rc7",
     "author": "Tiledesk SRL",
     "homepage": "https://ionicframework.com/",
     "scripts": {
@@ -39,16 +39,16 @@
         "autolinker": "^3.14.2",
         "cordova-android": "^6.2.3",
         "cordova-android-support-gradle-release": "^3.0.1",
-        "cordova-browser": "5.0.4",
+        "cordova-browser": "^5.0.4",
         "cordova-ios": "6.1.1",
         "cordova-plugin-chooser": "^1.3.2",
-        "cordova-plugin-device": "^2.0.2",
+        "cordova-plugin-device": "^2.0.3",
         "cordova-plugin-ionic-keyboard": "^2.2.0",
         "cordova-plugin-ionic-webview": "^4.2.1",
         "cordova-plugin-network-information": "^2.0.2",
-        "cordova-plugin-splashscreen": "^5.0.2",
-        "cordova-plugin-statusbar": "^2.4.2",
-        "cordova-plugin-whitelist": "^1.3.3",
+        "cordova-plugin-splashscreen": "^5.0.4",
+        "cordova-plugin-statusbar": "^2.4.3",
+        "cordova-plugin-whitelist": "^1.3.5",
         "cordova-res": "^0.15.1",
         "core-js": "^2.5.4",
         "firebase": "^8.6.7",

package/src/app/app.component.html

@@ -12,15 +12,16 @@
     </div>
  
     <ion-split-pane when="md" contentId="main">
-
-      <ion-nav #sidebarNav [root]="sidebarPage" [ngClass]="{'sidebar-visible': IS_ONLINE === true && SUPPORT_MODE === true,  'sidebar-hidden': IS_ON_MOBILE_DEVICE === true || SUPPORT_MODE === false}"></ion-nav>
+      <!-- 'sidebar-visible': IS_ONLINE === true && SUPPORT_MODE === true, -->
+      <ion-nav #sidebarNav [root]="sidebarPage" [ngClass]="{'sidebar-hidden': IS_ON_MOBILE_DEVICE === true || SUPPORT_MODE === false}"></ion-nav>
       <!--  our side menu  -->
       <!-- <ion-router-outlet id="sidebar" name='sidebar' animated="false" #masterNav> -->
       <!-- <app-conversations-list></app-conversations-list> -->
       <!-- <app-details></app-details> -->
       <!-- </ion-router-outlet> -->
       <!-- the main content -->
-      <ion-router-outlet id="main" #detailNav animated="false">
+      <!--  -->
+      <ion-router-outlet id="main" #detailNav animated="false" [ngClass]="{'router-outlet-margin-left': platformIs === 'mobile' &&  SUPPORT_MODE === true && IS_ON_MOBILE_DEVICE === false}">
       </ion-router-outlet>
     </ion-split-pane>
   </div>

package/src/app/app.component.scss

@@ -1,6 +1,7 @@
 .split-pane-md.split-pane-visible > .split-pane-side {
     min-width: 312px;
     display: block; // Safari bug fix
+    margin-left: 60px;
 }
 
 .sidebar-visible {
@@ -8,13 +9,17 @@
 }
 
 .sidebar-hidden {
-    margin-left: 0px;
+    margin-left: 0px !important;
 }
 
 .hide-sidebar {
     display: none;
 }
 
+.router-outlet-margin-left {
+    left: 60px
+}
+
 // @media (min-width: 768px) {
 //     .split-pane-md.split-pane-visible > .split-pane-side {
 //         min-width: 312px;

package/src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { URL_SOUND_LIST_CONVERSATION } from './../chat21-core/utils/constants';
+import { tranlatedLanguage, URL_SOUND_LIST_CONVERSATION } from './../chat21-core/utils/constants';
 import { ArchivedConversationsHandlerService } from 'src/chat21-core/providers/abstract/archivedconversations-handler.service';
 import { AppStorageService } from 'src/chat21-core/providers/abstract/app-storage.service';
 
@@ -78,7 +78,7 @@ export class AppComponent implements OnInit {
   public sidebarPage: any;
   public notificationsEnabled: boolean;
   public zone: NgZone;
-  private platformIs: string;
+  public platformIs: string;
   private doitResize: any;
   private timeModalLogin: any;
   public tenant: string;
@@ -158,7 +158,7 @@ export class AppComponent implements OnInit {
     if (/Android|iPhone/i.test(window.navigator.userAgent)) {
       this.IS_ON_MOBILE_DEVICE = true;
     }
-    console.log('[APP-COMP] IS_ON_MOBILE_DEVICE', this.IS_ON_MOBILE_DEVICE)
+    this.logger.log('[APP-COMP] IS_ON_MOBILE_DEVICE', this.IS_ON_MOBILE_DEVICE)
     return this.IS_ON_MOBILE_DEVICE;
   }
 
@@ -549,8 +549,8 @@ export class AppComponent implements OnInit {
       currentUserId = currentUser.uid;
       this.logger.log('[APP-COMP] - setLanguage current_user uid: ', currentUserId);
     }
-    this.translate.setDefaultLang('en');
-    this.translate.use('en');
+    // this.translate.setDefaultLang('en');
+    //   this.translate.use('en');
 
     const browserLang = this.translate.getBrowserLang();
     this.logger.log('[APP-COMP] browserLang: ', browserLang);
@@ -563,8 +563,19 @@ export class AppComponent implements OnInit {
     } else if (browserLang && stored_preferred_lang) {
       chat_lang = stored_preferred_lang
     }
-
-    this.translate.use(chat_lang);
+  
+    this.logger.log('[APP-COMP] - chat_lang', chat_lang)
+  
+    if (tranlatedLanguage.includes(chat_lang)) {
+      this.logger.log('[APP-COMP] tranlatedLanguage includes',chat_lang , ': ', tranlatedLanguage.includes(chat_lang)) 
+      this.translate.setDefaultLang(chat_lang)
+      this.translate.use(chat_lang);
+    }
+    else {
+      this.logger.log('[APP-COMP] tranlatedLanguage includes',chat_lang , ': ', tranlatedLanguage.includes(chat_lang)) 
+      this.translate.setDefaultLang('en');
+      this.translate.use('en');
+    }
 
     // this.logger.debug('[APP-COMP] navigator.language: ', navigator.language);
     // let language;
@@ -894,12 +905,12 @@ export class AppComponent implements OnInit {
   }
 
   /**
- * goOnLine:
- * 1 - nascondo splashscreen
- * 2 - recupero il tiledeskToken e lo salvo in chat manager
- * 3 - carico in d
- * @param user
- */
+  * goOnLine:
+  * 1 - nascondo splashscreen
+  * 2 - recupero il tiledeskToken e lo salvo in chat manager
+  * 3 - carico in d
+  * @param user
+  */
   goOnLine = () => {
     this.logger.log('[APP-COMP]- GO-ONLINE ');
     // this.isOnline = true;

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

@@ -118,12 +118,17 @@
   <ion-note *ngIf="!conversation.archived" class="conversation_time">{{conversation.timestamp | amTimeAgo}}</ion-note>
 
   <ion-buttons slot="end">
-    <ion-button *ngIf="!conversation.archived"  tooltip="{{ archive_btn_tooltip }}" [options]="tooltipOptions" placement="bottom"
+    <ion-button *ngIf="!conversation.archived" [tooltip]="archiveTooltip"  [options]="tooltip_options" placement="bottom"  content-type="template"
       [ngClass]="{'hide': !isApp, 'button-on-desktop': !isApp, 'button-on-mobile': isApp  }"
       id="{{ 'close_conversation_button' + conversation.uid }}" class="close-conversation-button" ion-button clear
       item-end (click)="closeConversation(conversation);$event.stopPropagation();" padding>
       <ion-icon slot="icon-only" style="display:block;" id="{{ 'close_button_icon' + conversation.uid }}"
         color="close-conversation" name="archive-outline" item-end></ion-icon>
+
+        <ng-template #archiveTooltip>
+          <span *ngIf="conversation?.recipient.startsWith('support-group')"> {{ resolve_btn_tooltip}} </span>
+          <span *ngIf="!conversation?.recipient.startsWith('support-group')"> {{ archive_btn_tooltip }} </span>
+        </ng-template>
     </ion-button>
     <!-- <ion-button *ngIf="conversation.archived" class="close-conversation-button" ion-button clear item-end disabled padding>
       <!- - <ion-icon  style="display:block;" id="{{ 'close_button_icon' + conversation.uid }}" color="close-conversation" name="archive-outline" item-end></ion-icon> - ->

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

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, IterableDiffers, KeyValueDiffers, OnInit, Output } from '@angular/core';
+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';
 import { convertMessage } from 'src/chat21-core/utils/utils';
@@ -9,12 +9,11 @@ import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance'
 import { TranslateService } from '@ngx-translate/core';
 
 import * as moment from 'moment';
-// import { EventsService } from 'src/app/services/events-service';
-// import { TiledeskService } from '../../../services/tiledesk/tiledesk.service';
 import { NetworkService } from '../../../services/network-service/network.service';
 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 { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
 // import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 
@@ -25,8 +24,10 @@ import { TiledeskAuthService } from 'src/chat21-core/providers/tiledesk/tiledesk
 })
 export class IonListConversationsComponent extends ListConversationsComponent implements OnInit {
 
+  @Input() archiveActionNotAllowed: boolean;
   @Input() uidConvSelected: string;
   @Output() onCloseConversation = new EventEmitter<ConversationModel>();
+  @Output() onCloseAlert = new EventEmitter();
 
   convertMessage = convertMessage;
   isApp: boolean = false;
@@ -36,15 +37,20 @@ export class IonListConversationsComponent extends ListConversationsComponent im
 
   public PROJECT_FOR_PANEL: any;
   public archive_btn_tooltip: string;
-
-  tooltipOptions = {
-    'show-delay': 1500,
+  public resolve_btn_tooltip: string;
+  public alert_lbl: string;
+  public actionNotAllowed_lbl: string;
+  public youAreNoLongerAmongTheTeammatesManagingThisConversation_lbl: string;
+public ok_lbl: string;
+
+  tooltip_options = {
+    'show-delay': 0,
     'tooltip-class': 'chat-tooltip',
     'theme': 'light',
     'shadow': false,
     'hide-delay-mobile': 0,
     'hideDelayAfterClick': 3000,
-    'hide-delay': 200
+    'hide-delay': 100
   };
   /**
    * 
@@ -57,12 +63,12 @@ export class IonListConversationsComponent extends ListConversationsComponent im
     public kvDiffers: KeyValueDiffers,
     public platform: Platform,
     private translate: TranslateService,
-    // private events: EventsService,
-    // private tiledeskService: TiledeskService,
     private networkService: NetworkService,
     private appConfigProvider: AppConfigProvider,
     private sanitizer: DomSanitizer,
-    public tiledeskAuthService: TiledeskAuthService
+    public tiledeskAuthService: TiledeskAuthService,
+    public alertController: AlertController
+
   ) {
     super(iterableDiffers, kvDiffers)
     this.setMomentLocale();
@@ -88,16 +94,59 @@ export class IonListConversationsComponent extends ListConversationsComponent im
 
     // console.log('[ION-LIST-CONVS-COMP] - DASHBOARD_BASE_URL ', DASHBOARD_BASE_URL)
     this.PROJECT_FOR_PANEL = this.sanitizer.bypassSecurityTrustResourceUrl(DASHBOARD_BASE_URL + '#/project-for-panel');
-    this.translateLbl();
+    this.translateLbls();
+
+  }
+  ngOnInit() {
+    this.isApp = this.platform.is('ios') || this.platform.is('android')
+    this.logger.log('[ION-LIST-CONVS-COMP] - ngOnInit - IS-APP ', this.isApp)
+    this.logger.log('[ION-LIST-CONVS-COMP] - ngOnInit - Platform', this.platform.platforms());
+
+  }
+
+  ngOnChanges(changes: { [property: string]: SimpleChange }) {
+    // Extract changes to the input property by its name
+    let change: SimpleChange = changes['archiveActionNotAllowed'];
+    this.logger.log('[ION-LIST-CONVS-COMP] - ngOnChanges change ', change);
+    // console.log('[ION-LIST-CONVS-COMP] - ngOnChanges change currentValue ', change.currentValue)
+    if (change && change.currentValue === true) {
+      this.pesentAlertActionNotAllowed()
+    }
+    // Whenever the data in the parent changes, this method gets triggered. You 
+    // can act on the changes here. You will have both the previous value and the 
+    // current value here.
   }
 
-  translateLbl() {
+
+  translateLbls() {
     this.translate.get('Resolve')
       .subscribe((text: string) => {
-        // this.deleteContact_msg = text;
+        this.resolve_btn_tooltip = text;
+      });
+
+    this.translate.get('Archive')
+      .subscribe((text: string) => {
         this.archive_btn_tooltip = text;
-      //  console.log('[ION-LIST-CONVS-COMP] getTranslations Resolve : ', 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;
       });
   }
 
@@ -124,10 +173,29 @@ export class IonListConversationsComponent extends ListConversationsComponent im
     moment.locale(chat_lang)
   }
 
-  ngOnInit() {
-    this.isApp = this.platform.is('ios') || this.platform.is('android')
-    this.logger.log('[ION-LIST-CONVS-COMP] - ngOnInit - IS-APP ', this.isApp)
-    this.logger.log('[ION-LIST-CONVS-COMP] - ngOnInit - Platform', this.platform.platforms());
+
+
+  async pesentAlertActionNotAllowed() {
+
+    const alert = await this.alertController.create({
+      cssClass: 'my-custom-class',
+      header: this.alert_lbl,
+      subHeader: this.actionNotAllowed_lbl,
+      message: this.youAreNoLongerAmongTheTeammatesManagingThisConversation_lbl,
+      buttons: [
+        {
+          text: this.ok_lbl,
+          handler: () => {
+            this.alertClosed();
+            // console.log('Confirm Okay');
+          },
+        },
+      ],
+    });
+
+    await alert.present();
+
+
   }
 
 
@@ -151,7 +219,9 @@ export class IonListConversationsComponent extends ListConversationsComponent im
   //   });
   // }
 
-
+  alertClosed() {
+    this.onCloseAlert.emit(true)
+  }
 
   closeConversation(conversation: ConversationModel) {
     var conversationId = conversation.uid;

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

@@ -1,49 +1,40 @@
-
 <ion-header no-border class="ion-no-border">
   <ion-toolbar style="height:60px">
     <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-back-button>
     </ion-buttons>
 
     <ion-title [class.info-open]="openInfoConversation || openInfoMessage">
 
-      <div *ngIf="conversationAvatar" class="avatar-and-typing-wpr">
+      <div *ngIf="conversationAvatar" class="avatar-and-typing-wpr" >
         <!-- [ngStyle] = "{ 'left': platformName === 'ios' ? '55px' : ''  }" -->
-        <div *ngIf="conversationAvatar" class="avatar-container" [ngClass] = "{ 'avatar-container-ios': platformName === 'ios' }">
-          <app-avatar-profile
-            [itemAvatar] = conversationAvatar
-          ></app-avatar-profile>
+        <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>
+        <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>
+          <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''  }" -->
-      <div *ngIf="conversationAvatar" class="tile-info-with" (click)="onOpenCloseInfoConversation()" 
-      [ngClass] = "{ 'tile-info-with-ios': platformName === 'ios' }">        
+      <!-- (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">{{ conversation_with_fullname }} </span>
-        
+
       </div>
 
       <!-- <div *ngIf="conversationWithFullname" class="tile-info-with" (click)="onOpenCloseInfoConversation()">        
@@ -54,15 +45,22 @@
     <!-- openInfoConversation  {{openInfoConversation}} -->
     <ion-buttons slot="end">
 
-          <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-button *ngIf="idConv.startsWith('support-group')" ion-button fill="clear" color="primary" size="small" (click)="closeConversation()" [ngClass]="{'resolve-conv-margin-right': !isMobile}" style="">
+        <!-- <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>