@chat21/chat21-ionic 3.0.5-8.1 → 3.0.6-2.1

package/src/app/chatlib/conversation-detail/ion-conversation-detail/ion-conversation-detail.component.ts

@@ -1,29 +1,40 @@
 import { ConversationContentComponent } from '../conversation-content/conversation-content.component';
-import { ChangeDetectorRef, Component, Input, OnInit, Output, EventEmitter} from '@angular/core';
+import { ChangeDetectorRef, Component, Input, OnInit, Output, EventEmitter } from '@angular/core';
 
 
 import { MESSAGE_TYPE_INFO, MESSAGE_TYPE_MINE, MESSAGE_TYPE_OTHERS } from 'src/chat21-core/utils/constants';
 import { isChannelTypeGroup, isFirstMessage, isInfo, isMine, messageType } from 'src/chat21-core/utils/utils-message';
 import { UploadService } from 'src/chat21-core/providers/abstract/upload.service';
+import { isFile, isFrame, isImage } from 'src/chat21-core/utils/utils-message';
 
 import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
-
+import { TiledeskAuthService } from 'src/chat21-core/providers/tiledesk/tiledesk-auth.service';
+import { TranslateService } from '@ngx-translate/core';
+import * as moment from 'moment';
+import { AppConfigProvider } from 'src/app/services/app-config';
 @Component({
   selector: 'ion-conversation-detail',
   templateUrl: './ion-conversation-detail.component.html',
   styleUrls: ['./ion-conversation-detail.component.scss'],
 })
 export class IonConversationDetailComponent extends ConversationContentComponent implements OnInit {
- 
+
   @Input() senderId: string;
   @Input() channelType: string;
-  @Output() onImageRendered = new EventEmitter<boolean>() 
+  @Output() onImageRendered = new EventEmitter<boolean>()
   @Output() onAddUploadingBubble = new EventEmitter<boolean>();
- 
 
+  public public_Key: any
+  public areVisibleCAR: boolean
+  public support_mode: boolean
   public uploadProgress: number = 100
   public fileType: any
+  public browserLang: string;
+  public addAsCannedResponseTooltipText: string;
+  isImage = isImage;
+  isFile = isFile;
+  isFrame = isFrame;
 
   isMine = isMine;
   isInfo = isInfo;
@@ -34,7 +45,7 @@ export class IonConversationDetailComponent extends ConversationContentComponent
   MESSAGE_TYPE_INFO = MESSAGE_TYPE_INFO;
   MESSAGE_TYPE_MINE = MESSAGE_TYPE_MINE;
   MESSAGE_TYPE_OTHERS = MESSAGE_TYPE_OTHERS;
-
+  logger: LoggerService = LoggerInstance.getInstance()
   /**
    * Constructor
    * @param cdref 
@@ -42,38 +53,112 @@ export class IonConversationDetailComponent extends ConversationContentComponent
    */
   constructor(
     public cdref: ChangeDetectorRef,
-    public uploadService: UploadService
+    public uploadService: UploadService,
+    public tiledeskAuthService: TiledeskAuthService,
+    private translate: TranslateService,
+    public appConfigProvider: AppConfigProvider,
   ) {
     super(cdref, uploadService)
-   
+
   }
 
-  ngOnInit() { 
-  this.listenToUploadFileProgress()
+  ngOnInit() {
+    this.getOSCODE()
+    this.listenToUploadFileProgress();
+    this.setMomentLocaleAndGetTranslation();
+  }
+
+  getOSCODE() {
+    this.support_mode = null
+    if( this.appConfigProvider.getConfig().supportMode === true ||  this.appConfigProvider.getConfig().supportMode === 'true') {
+      this.support_mode = true
+    } else if ( this.appConfigProvider.getConfig().supportMode === false  ||  this.appConfigProvider.getConfig().supportMode === 'false') {
+      this.support_mode = false
+    } else if ( !this.appConfigProvider.getConfig().supportMode ) {
+      this.support_mode = false
+    }
+    this.public_Key = this.appConfigProvider.getConfig().t2y12PruGU9wUtEGzBJfolMIgK
+    this.logger.log('[CONVS-DETAIL][ION-CONVS-DETAIL] AppConfigService getAppConfig public_Key', this.public_Key)
+
+    if (this.public_Key) {
+      let keys = this.public_Key.split('-')
+      this.logger.log('[CONVS-DETAIL][ION-CONVS-DETAIL] PUBLIC-KEY - public_Key keys', keys)
+
+      keys.forEach((key) => {
+        if (key.includes('CAR')) {
+          let car = key.split(':')
+          if (car[1] === 'F') {
+            this.areVisibleCAR = false
+            this.logger.log('[CONVS-DETAIL][ION-CONVS-DETAIL] PUBLIC-KEY - areVisibleCAR', this.areVisibleCAR)
+          } else {
+            this.areVisibleCAR = true
+            this.logger.log('[CONVS-DETAIL][ION-CONVS-DETAIL] PUBLIC-KEY - areVisibleCAR', this.areVisibleCAR)
+          }
+        }
+      })
+
+      if (!this.public_Key.includes('CAR')) {
+        this.areVisibleCAR = false
+        // console.log('[CONVS-DETAIL][ION-CONVS-DETAIL] PUBLIC-KEY - areVisibleCAR', this.areVisibleCAR)
+      }
+    } else {
+      this.areVisibleCAR = false
+    }
+  }
+
+  setMomentLocaleAndGetTranslation() {
+    this.browserLang = this.translate.getBrowserLang();
+    const currentUser = this.tiledeskAuthService.getCurrentUser();
+    this.logger.log('[CONVS-DETAIL][ION-CONVS-DETAIL] - ngOnInit - currentUser ', currentUser)
+    let currentUserId = ''
+    if (currentUser) {
+      currentUserId = currentUser.uid
+      this.logger.log('[CONVS-DETAIL][ION-CONVS-DETAIL]] - ngOnInit - currentUserId ', currentUserId)
+    }
+
+    const stored_preferred_lang = localStorage.getItem(currentUserId + '_lang');
+    this.logger.log('[CONVS-DETAIL][ION-CONVS-DETAIL] stored_preferred_lang: ', stored_preferred_lang);
+
+
+    let chat_lang = ''
+    if (this.browserLang && !stored_preferred_lang) {
+      chat_lang = this.browserLang
+    } else if (this.browserLang && stored_preferred_lang) {
+      chat_lang = stored_preferred_lang
+    }
+    moment.locale(chat_lang)
+    // this.translate.getTranslation(chat_lang).subscribe((labels: string) => {
+    //   console.log('[CONVS-DETAIL] translations: ', labels);
+    // });
+    this.translate.get('AddAsCannedResponse')
+      .subscribe((text: string) => {
+        // console.log('[CONVS-DETAIL] AddAsCannedResponse translated: ', text);
+        this.addAsCannedResponseTooltipText = text
+      })
   }
 
   listenToUploadFileProgress() {
     this.logger.log('[CONVS-DETAIL][ION-CONVS-DETAIL] FIREBASE-UPLOAD - calling BSStateUpload ');
     this.uploadService.BSStateUpload.subscribe((data: any) => {
       this.logger.log('[CONVS-DETAIL][ION-CONVS-DETAIL] FIREBASE-UPLOAD - BSStateUpload data', data);
-     
+
       if (data) {
         this.logger.log('[CONVS-DETAIL][ION-CONVS-DETAIL] FIREBASE-UPLOAD - BSStateUpload data.upload', data.upload);
         this.logger.log('[CONVS-DETAIL][ION-CONVS-DETAIL] FIREBASE-UPLOAD - BSStateUpload data.upload typeof', typeof data.upload);
         this.uploadProgress = data.upload
 
-        if (isNaN(data.upload))  {
+        if (isNaN(data.upload)) {
           this.logger.log('[CONVS-DETAIL][ION-CONVS-DETAIL] FIREBASE-UPLOAD - BSStateUpload data.upload IS NaN (e.g. file size is 0)');
           this.uploadProgress = 100
         }
         // if (data.type.startsWith("application")) {
         // if (!data.type.startsWith("image")) {
-         
-          // this.fileType = 'file'
 
-          this.addUploadingBubblePlaceholder(true)
+        // this.fileType = 'file'
+
+        this.addUploadingBubblePlaceholder(true)
 
-          // this.logger.log('[CONVS-DETAIL][ION-CONVS-DETAIL] FIREBASE-UPLOAD - BSStateUpload this.fileType', this.fileType);
+        // this.logger.log('[CONVS-DETAIL][ION-CONVS-DETAIL] FIREBASE-UPLOAD - BSStateUpload this.fileType', this.fileType);
         // }
       }
     });
@@ -83,10 +168,20 @@ export class IonConversationDetailComponent extends ConversationContentComponent
     this.onAddUploadingBubble.emit(value);
   }
 
-  onImageRenderedFN(event){
+  onImageRenderedFN(event) {
     this.logger.log('[CONVS-DETAIL][ION-CONVS-DETAIL] - onImageRenderedFN:::ionic', event)
     this.onImageRendered.emit(event)
   }
 
-
+  /**
+   * Track by function for ngFor loops
+   *
+   * @param index
+   * @param item
+   */
+  trackByFn(index: number, item: any): any {
+    // console.log('[CONVS-DETAIL][ION-CONVS-DETAIL] - trackByFn index', index)
+    // console.log('[CONVS-DETAIL][ION-CONVS-DETAIL] - trackByFn item', item)
+    return item.uid || index;
+  }
 }

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

@@ -1,9 +1,9 @@
 <!-- [ngClass]="{'button-in-msg' : message.metadata && message.metadata.button}" -->
 <!-- [ngStyle]="{'padding': (isImage(message) || isFrame(message))?'0px':'0 8px'}" -->
 <!-- isImage >{{isImage(message) }}    message.metadata.width {{message?.metadata?.width }}  -->
-<div  [ngStyle]="{'padding': (isImage(message) || isFrame(message))?'0px':'0 8px', 'width': (isImage(message) || isFrame(message))? message?.metadata?.width + 'px' : null }"
-   class="messages primary-color"
-  [class.emoticon]="message?.emoticon">
+<div id="bubble-message"
+  [ngStyle]="{'padding': (isImage(message) || isFrame(message))?'0px':'0 8px', 'width': (isImage(message) || isFrame(message))? message?.metadata?.width + 'px' : null }"
+  class="messages primary-color" [class.emoticon]="message?.emoticon">
 
 
   <div>
@@ -18,19 +18,13 @@
 
     <!-- [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>
 
@@ -40,31 +34,27 @@
       [height]="message.metadata.height">
     </chat-frame> -->
 
-    <!-- message type:: text -->
-    <!-- <div *ngIf="message.type == 'text'">  -->
-    <div *ngIf="message?.text" [tooltip]="timeTooltipLeft" [options]="tooltipOptions" placement="left"
-      content-type="template" (click)="handleTooltipEvents($event)">
-      <ng-template #timeTooltipLeft>
-        <span>{{message.timestamp | amTimeAgo}}</span>
-      </ng-template>
 
-      <chat-text 
-        [text]="message?.text" 
-        [color]="textColor" 
-        [message]="message"
+    <!-- [tooltip]="timeTooltipLeft" [options]="tooltipOptions" placement="left" content-type="template" (click)="handleTooltipEvents($event)" -->
+    <div *ngIf="message?.text">
+      <span class="message-date"> {{message.timestamp | date:'HH:mm' }} </span>
+      <!-- <ng-template #timeTooltipLeft>
+        <span> {{message.timestamp | amCalendar }} </span>
+      </ng-template> -->
+
+      <chat-text [text]="message?.text" [color]="textColor" [message]="message"
+      [class.chat-text-emoticon]="message?.emoticon"
         (onBeforeMessageRender)="returnOnBeforeMessageRender($event)"
         (onAfterMessageRender)="returnOnAfterMessageRender($event)">
       </chat-text>
-      <!-- <p #messageEl class="message_innerhtml marked" [innerHTML]="printMessage(message, messageEl, this) | marked"></p> -->
-      <!-- <div *ngIf="isPopupUrl(message.text); then contentPopup else contentNewTab">here
-            is ignored</div>
-        <ng-template #contentPopup>
-            <p style="text-decoration: underline; padding:8px; cursor: pointer;"
-                (click)="popupUrl(g.windowContext, message.text,'windowName')">{{strip_tags(message.text)}}</p>
-        </ng-template>
-        <ng-template #contentNewTab>
-            <p #messageEl [innerHTML]="printMessage(message, messageEl, this) | linky"></p>
-        </ng-template> -->
+
+      <ng-container *ngIf="areVisibleCAR && support_mode === true">
+        <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">
+          <ion-icon slot="icon-only" name="flash-outline" style="font-size: 1em;"> </ion-icon>
+        </ion-button>
+      </ng-container>
     </div>
   </div>
 

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

@@ -21,7 +21,6 @@
         font-variant: normal;
         font-weight: 300;
         overflow: hidden;
-        
     }
     img {
         border-radius: 8px;
@@ -32,20 +31,33 @@
         height: auto;
         object-fit: cover;
     }
+
     .message_innerhtml {
         margin: 0px;
         // padding: 0px 14px;
-        &.marked{
-            padding:8px;
-            margin-block-start: -1em!important;
-            margin-block-end: -1em!important;
+        &.marked {
+            padding: 8px;
+            margin-block-start: -1em !important;
+            margin-block-end: -1em !important;
         }
-        
+
         .text-message {
             padding-top: 14px;
         }
     }
-    
 }
+// > .button-native
+.btn-add-msg-as-canned-response {
+    // padding-left: 5px ;
+    // padding-right: 5px ;
+    border-radius: 50%;
+    --padding-end: 7px;
+    --padding-start: 7px;
+    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 6%);
+}
+
+// .emoticon {
+//     padding: 35px 0px !important;
+// }
 
 

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

@@ -5,6 +5,11 @@ import { MAX_WIDTH_IMAGES } from 'src/chat21-core/utils/constants';
 import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
 import { isFile, isFrame, isImage } from 'src/chat21-core/utils/utils-message';
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
+import { TranslateService } from '@ngx-translate/core';
+import { TiledeskAuthService } from 'src/chat21-core/providers/tiledesk/tiledesk-auth.service';
+import * as moment from 'moment';
+import { CreateCannedResponsePage } from 'src/app/pages/create-canned-response/create-canned-response.page'
+import { ModalController } from '@ionic/angular';
 @Component({
   selector: 'chat-bubble-message',
   templateUrl: './bubble-message.component.html',
@@ -14,12 +19,16 @@ export class BubbleMessageComponent implements OnInit, OnChanges {
 
   @Input() message: MessageModel;
   @Input() textColor: string;
+  @Input() areVisibleCAR: boolean;
+  @Input() support_mode: boolean;
   @Output() onBeforeMessageRender = new EventEmitter();
   @Output() onAfterMessageRender = new EventEmitter();
   @Output() onImageRendered = new EventEmitter<boolean>()
   isImage = isImage;
   isFile = isFile;
   isFrame = isFrame;
+  @Input() addAsCannedResponseTooltipText : string;
+  public browserLang: string;
 
   tooltipOptions = {
     'show-delay': 500,
@@ -32,21 +41,58 @@ export class BubbleMessageComponent implements OnInit, OnChanges {
   };
 
   private logger: LoggerService = LoggerInstance.getInstance()
-  constructor(public sanitizer: DomSanitizer) {
+ 
+  constructor(
+    public sanitizer: DomSanitizer,
+    private translate: TranslateService,
+    public tiledeskAuthService: TiledeskAuthService,
+    public modalController: ModalController,
+    ) {
     // console.log('BUBBLE-MSG Hello !!!!')
   }
 
   ngOnInit() {
+    this.setMomentLocale()
+  }
+
+
+  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) {
+      chat_lang = this.browserLang
+    } else if (this.browserLang && stored_preferred_lang) {
+      chat_lang = stored_preferred_lang
+    }
+    moment.locale(chat_lang , {
+      calendar: {
+        sameElse: 'LLLL'
+      }
+    });
+    // this.translate.getTranslation(chat_lang).subscribe((labels: string) => {
+    //   console.log('[BUBBLE-MESSAGE] translations: ', labels);
+    // });
   }
 
   ngOnChanges() {
-    // console.log('BUBBLE-MSG Hello !!!! this.message ',  this.message)
-    if (this.message && this.message.metadata) {
+    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)
-      // console.log('BUBBLE-MSG ngOnChanges message > metadata', this.message.metadata)
     }
-
   }
 
 
@@ -113,11 +159,11 @@ export class BubbleMessageComponent implements OnInit, OnChanges {
         const domRepresentation = document.getElementsByClassName('chat-tooltip');
         if (domRepresentation) {
           const item = domRepresentation[0] as HTMLInputElement;
-          if (!item.classList.contains('tooltip-show')) {
+          if (item && !item.classList.contains('tooltip-show')) {
             item.classList.add('tooltip-show');
           }
           setTimeout(function () {
-            if (item.classList.contains('tooltip-show')) {
+            if (item && item.classList.contains('tooltip-show')) {
               item.classList.remove('tooltip-show');
             }
           }, that.tooltipOptions['hideDelayAfterClick']);
@@ -153,6 +199,26 @@ export class BubbleMessageComponent implements OnInit, OnChanges {
     this.onImageRendered.emit(event)
   }
 
+  async presentCreateCannedResponseModal(): Promise<any> {
+    this.logger.log('[BUBBLE-MESSAGE] PRESENT CREATE CANNED RESPONSE MODAL ')
+    const attributes = {
+       message: this.message,
+    }
+    const modal: HTMLIonModalElement = await this.modalController.create({
+      component: CreateCannedResponsePage,
+      componentProps: attributes,
+      swipeToClose: false,
+      backdropDismiss: false,
+    })
+    modal.onDidDismiss().then((dataReturned: any) => {
+      // 
+      this.logger.log('[BUBBLE-MESSAGE] ', dataReturned.data)
+    })
+
+    return await modal.present()
+  }
+
+
   // printMessage(message, messageEl, component) {
   //   const messageOBJ = { message: message, sanitizer: this.sanitizer, messageEl: messageEl, component: component}
   //   this.onBeforeMessageRender.emit(messageOBJ)

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

@@ -1,9 +1,10 @@
 <div [ngStyle]="{ 'max-width': width +'px', 'max-height': height +'px' }" style="position: relative; ">
   <div *ngIf="loading" class="loader" [ngStyle]="{ 'width': width +'px', 'height': height +'px' }"></div>
-  <img [ngStyle]="{ 'width': width +'px', 'height': height +'px' }" style="cursor:pointer" [tooltip]="timeTooltipRight" [options]="tooltipOptions" placement="bottom"
-    content-type="template" class="message-contentX message-content-imageX" [ngClass]="{'isLoadingImage': loading}"
-    [src]="metadata.src" (load)="onLoaded($event)" (click)="downloadImage(metadata.src, metadata.name)" />
-  <ng-template #timeTooltipRight>
+  <!-- [tooltip]="timeTooltipRight" [options]="tooltipOptions" placement="bottom" content-type="template"  -->
+  <img id="myImg" [ngStyle]="{ 'width': width +'px', 'height': height +'px' }" style="cursor:pointer" 
+    class="message-contentX message-content-imageX" [ngClass]="{'isLoadingImage': loading}"
+    [src]="metadata.src" (load)="onLoaded($event)" (click)="openImageViewerModal(metadata.src, metadata.name)" />
+  <!-- <ng-template #timeTooltipRight>
     <span>{{ tooltipMessage }}</span>
-  </ng-template>
-</div>
+  </ng-template> -->
+</div>

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

@@ -14,6 +14,8 @@ export class ImageComponent implements OnInit {
 
   loading: boolean = true
   tooltipMessage: string;
+  modal: any
+  span: any
 
   tooltipOptions = {
     'show-delay': 0,
@@ -45,7 +47,7 @@ export class ImageComponent implements OnInit {
     this.onImageRendered.emit(true)
   }
 
-  downloadImage(url: string, fileName: string) {
+  _downloadImage(url: string, fileName: string) {
     // console.log('Image COMP - IMAGE URL ', url) 
     // console.log('Image COMP - IMAGE FILENAME ', fileName) 
     const a: any = document.createElement('a');
@@ -56,4 +58,21 @@ export class ImageComponent implements OnInit {
     a.click();
     a.remove();
   }
+
+  openImageViewerModal(url: string, fileName: string) {
+    this.modal = document.getElementById("image-viewer-modal");
+    // console.log('has clicked open image-viewer modal ',  this.modal)
+    this.modal.style.display = "block";
+    var modalImg = <HTMLImageElement>document.getElementById("image-viewer-img");
+    var captionText = document.getElementById("caption");
+    modalImg.src = url
+    captionText.innerHTML = fileName;
+   
+  }
+
+ 
+
+
 }
+
+

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

@@ -4,7 +4,7 @@
     margin-top: -6px;
     margin-bottom: 5px;
     height: auto;
-
+    padding-left: 8px;
 
     .div-button {
         display: inline-block;

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

@@ -25,7 +25,8 @@
 <!-- -------------------------------------------------------------------------- -->
 <!-- New   <ion-spinner class="spinner-middle" style="margin-left: 19px;"></ion-spinner> -->
 <!-- -------------------------------------------------------------------------- -->
-<ion-item *ngIf="isOnline === false" button="true" lines="none" class="ion-no-padding waiting-for-connection">
+<!-- <ion-item *ngIf="isOnline === false" button="true" lines="none" class="ion-no-padding waiting-for-connection">
+  <div tabindex="0"></div>
   <ion-avatar item-start>
     <div class="sk-fading-circle">
       <div class="sk-circle1 sk-circle"></div>
@@ -43,10 +44,39 @@
     </div>
   </ion-avatar>
   <ion-label part="message-text" class="waiting-for-network-msg"> Waiting for network</ion-label>
-</ion-item>
+</ion-item> -->
 
-<ion-item button="true" lines="none" class="ion-no-padding" [class.ion-selected]="conversation.uid === uidConvSelected"
-  *ngFor="let conversation of listConversations" (click)="openConversationByID(conversation)">
+<!-- <ion-item>
+  <div tabindex="0"></div>
+  <iframe loading="lazy" width="100%" height="70px" style="border: unset;" [src]="PROJECT_FOR_PANEL"></iframe>
+</ion-item>  -->
+<!-- <ion-item button="true" (click)="openUnsevedConversationIframe()">
+  <app-project-item
+  (projectIdEvent)="getLastProjectId($event)"></app-project-item>
+</ion-item> -->
+
+
+<!-- <ion-item-sliding disabled>
+  <ion-item>
+    <ion-label>
+      Sliding Item, Icons Start
+    </ion-label>
+  </ion-item>
+  <ion-item-options>
+    <ion-item-option color="primary">
+      <ion-icon slot="start" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+      More
+    </ion-item-option>
+    <ion-item-option color="secondary">
+      <ion-icon slot="start" name="archive"></ion-icon>
+      Archive
+    </ion-item-option>
+  </ion-item-options>
+</ion-item-sliding> -->
+
+
+<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>
   <div tabindex="0"></div>
 
   <!-- <div [class.selected]="conversation.uid === uidConvSelected"></div> -->
@@ -88,11 +118,17 @@
   <ion-note *ngIf="!conversation.archived" class="conversation_time">{{conversation.timestamp | amTimeAgo}}</ion-note>
 
   <ion-buttons slot="end">
-    <ion-button *ngIf="!conversation.archived" [ngClass]="{'hide': !isApp, 'button-on-desktop': !isApp  }"
+    <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> - ->
@@ -103,21 +139,20 @@
 
   <div item-end *ngIf="conversation?.archived" class="achived-icon-wpr">
     <span *ngIf="(conversation.timestamp | amDateFormat:'YYYY') === currentYear" class="time-in-archived">
-      {{browserLang === 'it' ? (conversation.timestamp| amDateFormat:'DD MMM') : (conversation.timestamp |
-      amDateFormat:'MMM DD')}}
+      {{browserLang === 'en' ? (conversation.timestamp | amDateFormat:'MMM DD') : (conversation.timestamp| amDateFormat:'DD MMM')}}
 
       <!-- {{conversation.timestamp | amDateFormat:'DD MMM'}} -->
     </span>
     <span *ngIf="(conversation.timestamp | amDateFormat:'YYYY') !== currentYear" class="time-in-archived">
-      {{browserLang === 'it' ? (conversation.timestamp| amDateFormat:'DD MMM') : (conversation.timestamp |
-      amDateFormat:'MMM DD YYYY')}}
+      {{browserLang === 'en' ? (conversation.timestamp | amDateFormat:'MMM DD YYYY') : (conversation.timestamp| amDateFormat:'DD MMM YYYY') }}
       <!-- {{conversation.timestamp | amDateFormat:'DD MMM YYYY'}} -->
     </span>
-    <i class="material-icons" item-end style="font-size: 15px;font-weight: 400;color: #666666;"> history </i>
+    <!-- <i class="material-icons" item-end style="font-size: 15px;font-weight: 400;color: #666666;"> history </i> -->
   </div>
 
   <!-- && !conversation?.archived -->
-  <div item-end class="notification_point" [ngClass]="{'notification_point-on-desktop': !isApp }"
+  <div item-end class="notification_point"
+    [ngClass]="{'notification_point-on-desktop': !isApp, 'notification_point-on-mobile': isApp }"
     *ngIf="conversation.is_new">
   </div>