@chat21/chat21-ionic 2.0.14 → 3.0.5-8.1

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

@@ -0,0 +1,124 @@
+<!-- <div id='c21-app-list-conversations'>
+  <div *ngFor="let conversation of listConversations | slice:0:limit">
+    <button tabindex="1103" class="c21-item-conversation" (click)="openConversationByID(conversation)">
+      <div class="c21-body-conv">
+        <div class="c21-left-conv">
+          <div class="c21-ball" [style.background-color]="conversation?.color">
+            <span class="c21-ball-label" [innerHTML]="conversation?.avatar"></span>
+            <div *ngIf="conversation.image" #avatarImage class="c21-avatar-image" [style.background-image]="'url(' + conversation.image + ')'"></div>
+          </div>
+        </div>
+        <div class="c21-right-conv">
+          <div class="c21-last-time">{{conversation.time_last_message}}</div>
+          <div class="truncate c21-name">{{conversation.sender_fullname }}</div>
+          <div [class.not-read]="conversation.is_new" class="truncate c21-msg" [innerHTML]="conversation.last_message_text"></div>
+        </div>
+        <!- - <div *ngIf="conversation.is_new" [ngStyle] = "{ 'background-color': styleMap.get('themeColor') }" class="c21-divBudge">{{conversation.badge}}</div>
+        <div *ngIf="conversation.archived" class="c21-lablel-close">{{ translationMap.get('CLOSED') }}</div> - ->
+      </div>
+      <div class="clear"></div>
+    </button>
+    
+  </div>
+</div> -->
+
+<!-- -------------------------------------------------------------------------- -->
+<!-- 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-avatar item-start>
+    <div class="sk-fading-circle">
+      <div class="sk-circle1 sk-circle"></div>
+      <div class="sk-circle2 sk-circle"></div>
+      <div class="sk-circle3 sk-circle"></div>
+      <div class="sk-circle4 sk-circle"></div>
+      <div class="sk-circle5 sk-circle"></div>
+      <div class="sk-circle6 sk-circle"></div>
+      <div class="sk-circle7 sk-circle"></div>
+      <div class="sk-circle8 sk-circle"></div>
+      <div class="sk-circle9 sk-circle"></div>
+      <div class="sk-circle10 sk-circle"></div>
+      <div class="sk-circle11 sk-circle"></div>
+      <div class="sk-circle12 sk-circle"></div>
+    </div>
+  </ion-avatar>
+  <ion-label part="message-text" class="waiting-for-network-msg"> Waiting for network</ion-label>
+</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)">
+  <div tabindex="0"></div>
+
+  <!-- <div [class.selected]="conversation.uid === uidConvSelected"></div> -->
+  <ion-avatar item-start>
+    <!-- [style.background-color]="conversation.color"  -->
+    <div #avatarPlaceholder class="avatar-placeholder"
+      [ngStyle]="{'background':  'linear-gradient(rgb(255,255,255) -125%,' + conversation.color + ')'}"
+      [innerHTML]="conversation.avatar"></div>
+    <div *ngIf="conversation.image" #avatarImage class="avatar-profile"
+      [style.background-image]="'url(' + conversation.image + ')'"></div>
+    <!-- <div *ngIf="getImageAvatar(conversation.sender)" #avatarImage class="avatar-profile" [style.background-image]="'url(' + getImageAvatar(conversation.sender) + ')'"></div> -->
+  </ion-avatar>
+  <ion-label>
+    <div class="conversation_with truncate" [innerHTML]="conversation.conversation_with_fullname"></div>
+    <div class="conversation_message truncate-conv-msg" [ngClass]="{'truncate-on-desktop': !isApp}">
+
+      <!-- -------------------------------------------------------------------------- -->
+      <!-- if conversation type is image display the image icon before the message -->
+      <!-- -------------------------------------------------------------------------- -->
+      <!-- <div *ngIf="conversation.type === 'image'" class="icon-image-before-msg-wpr">
+        <ion-icon name="image-outline" class="icon-image-before-msg"></ion-icon>
+      </div>
+      <p [class.not-read]="conversation.is_new" class="truncate" [ngClass]="{'truncate-on-desktop': !isApp}"
+        [innerHTML]="conversation.last_message_text"></p> -->
+
+      <!-- <div *ngIf="conversation.type === 'image'" class="icon-image-before-msg-wpr"> -->
+      <ion-icon *ngIf="conversation.type === 'image' && conversation.type !== 'file' " name="image-outline"
+        class="icon-image-before-msg"></ion-icon>
+      <ion-icon *ngIf="conversation.type === 'file'  && conversation.type !== 'image'" name="attach-outline"
+        class="icon-attach-before-msg"></ion-icon>
+      <!-- </div> -->
+      <!-- [innerHTML]="conversation.last_message_text" -->
+      <span [class.not-read]="conversation.is_new">
+        {{ conversation.last_message_text }}
+      </span>
+    </div>
+  </ion-label>
+
+  <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  }"
+      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>
+    </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> - ->
+      <i class="material-icons" id="{{ 'close_button_icon' + conversation.uid }}"  item-end> history </i>
+      <!- - <div item-end *ngIf="conversation.archived">{{ translationMap.get('CLOSED') }}</div> - ->
+    </ion-button> -->
+  </ion-buttons>
+
+  <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')}}
+
+      <!-- {{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')}}
+      <!-- {{conversation.timestamp | amDateFormat:'DD MMM YYYY'}} -->
+    </span>
+    <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 }"
+    *ngIf="conversation.is_new">
+  </div>
+
+</ion-item>

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

@@ -0,0 +1,358 @@
+
+:host .conversation_message span ::ng-deep > a {
+    pointer-events: none;
+    img {
+        display: none;
+        // max-width: 36% !important;
+        // vertical-align: bottom;
+    }      
+}
+ion-item {
+    cursor: pointer;
+    height: 70px;
+    --min-height: 70px;
+    position: relative;
+    display: flex;
+    text-decoration: none;
+    // padding-left: 8px;
+    // padding-right: 8px;
+    --padding-start: 0;
+    --inner-padding-end: 0;
+    --background-hover: #000000 !important;
+    .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-color: rgb(231, 241, 255);
+    }
+    ion-avatar {
+        position: relative;
+        padding: 0;
+        margin: 0 12px 0 8px;
+        height: 50px;
+        width: 50px;
+        min-width: 50px;
+        min-height: 50px;
+        line-height: 50px;
+        .avatar-placeholder {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            border-radius: 50%;
+            text-align: center;
+            font-size: 20px;
+            color: #ffffff;
+            font-weight: 500;
+        }
+        .avatar-profile {
+            position: relative;
+            display: inline-block;
+            width: 100%;
+            height: 100%;
+            background-color: transparent;
+            background-size: cover;
+            background-position: top center;
+            border-radius: 50%;
+            border-color: #c3c3c3;
+            border-style: solid;
+            border-width: 0px;
+        }
+    }
+    ion-label {
+        flex: 1 1 0px;
+        justify-content: center;
+        min-width: 0;
+        padding: 0;
+        font-family: Helvetica, Helvetica, Arial, sans-serif;
+        line-height: 1.28;
+        text-rendering: optimizeLegibility;
+        .conversation_with {
+            color: rgba(0, 0, 0, 1);
+            font-size: 15px;
+            font-weight: 400;
+            line-height: 1.4;
+        }
+        .conversation_message {
+            p {
+                color: rgba(153, 153, 153, 1);
+                font-size: 13px;
+                font-weight: 400;
+                height: 18px;
+                vertical-align: middle;
+                &.not-read {
+                    font-weight: 600;
+                    color: #1876f2;
+                }
+            }
+
+            span {
+                color: rgba(153, 153, 153, 1);
+                font-size: 13px;
+                font-weight: 400;
+                height: 18px;
+                &.not-read {
+                    font-weight: 600;
+                    color: #1876f2;
+                }
+            }
+        }
+    }
+    ion-note {
+        position: absolute;
+        right: 8px;
+        top: 4px;
+        font-size: 10px;
+    }
+    ion-buttons {
+        margin: 0;
+        ion-button {
+            padding: 0;
+            margin: 0;
+            height: 24px;
+            width: 24px;
+            font-size: 10px;
+            --padding-start: 0px;
+            --padding-end: 0px;
+            color: rgba(153, 153, 153, 1);
+            background-color: transparent;
+            border-radius: 50%; // nk
+            &:hover {
+                background-color: rgba(0, 0, 0, 0.05);
+            }
+        }
+    }
+
+    .notification_point {
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        background-color: rgb(22, 92, 238);
+        position: absolute;
+        right: 6px;
+        bottom: 8px;
+    }
+
+    .notification_point-on-desktop {
+        bottom: 29px !important;
+    }
+}
+
+// ion-item {
+//     --background-hover: #000000 !important;
+// }
+
+.hide {
+    display: none;
+}
+
+ion-item:hover {
+    ion-buttons {
+        ion-button {
+            display: block;
+        }
+    }
+}
+
+.button-on-desktop {
+    background-color: #fff !important;
+    margin-right: 21px !important;
+    height: 35px !important;
+    width: 35px !important;
+    border: 1px solid #eee;
+    ion-icon {
+        font-size: 21px !important;
+    }
+}
+
+.truncate-on-desktop {
+    width: 88% !important
+}
+
+.achived-icon-wpr {
+    position: absolute;
+    right: 3px;
+    top: 4px;
+    font-size: 12px;
+}
+
+.icon-image-before-msg-wpr {
+    float: left;
+    margin-right: 3px;
+}
+.icon-image-before-msg {
+    vertical-align: middle;
+    color: #999999;
+    padding-right: 3px;
+}
+
+.icon-attach-before-msg {
+    transform: rotate(45deg);
+    font-size: 16px;
+    padding-right: 0px;
+    vertical-align: middle;
+    color: #999999;
+}
+
+.ion-selected {
+    --background: rgb(231, 241, 255);
+}
+
+.time-in-archived {
+    color: #666666;
+    font-size: 10px;
+    position: relative;
+    top: -4px;
+}
+
+
+.waiting-for-connection {
+    --background:  #fdd764;
+}
+
+// -------------------------------
+// Spinner
+// -------------------------------
+.sk-fading-circle {
+    // margin: 100px auto;
+    width: 40px;
+    height: 40px;
+    position: relative;
+    margin-left: 5px;
+    margin-top: 5px;
+  }
+  
+  .sk-fading-circle .sk-circle {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+  
+  .sk-fading-circle .sk-circle:before {
+    content: '';
+    display: block;
+    margin: 0 auto;
+    width: 15%;
+    height: 15%;
+    background-color: #333;
+    border-radius: 100%;
+    -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+            animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+  }
+  .sk-fading-circle .sk-circle2 {
+    -webkit-transform: rotate(30deg);
+        -ms-transform: rotate(30deg);
+            transform: rotate(30deg);
+  }
+  .sk-fading-circle .sk-circle3 {
+    -webkit-transform: rotate(60deg);
+        -ms-transform: rotate(60deg);
+            transform: rotate(60deg);
+  }
+  .sk-fading-circle .sk-circle4 {
+    -webkit-transform: rotate(90deg);
+        -ms-transform: rotate(90deg);
+            transform: rotate(90deg);
+  }
+  .sk-fading-circle .sk-circle5 {
+    -webkit-transform: rotate(120deg);
+        -ms-transform: rotate(120deg);
+            transform: rotate(120deg);
+  }
+  .sk-fading-circle .sk-circle6 {
+    -webkit-transform: rotate(150deg);
+        -ms-transform: rotate(150deg);
+            transform: rotate(150deg);
+  }
+  .sk-fading-circle .sk-circle7 {
+    -webkit-transform: rotate(180deg);
+        -ms-transform: rotate(180deg);
+            transform: rotate(180deg);
+  }
+  .sk-fading-circle .sk-circle8 {
+    -webkit-transform: rotate(210deg);
+        -ms-transform: rotate(210deg);
+            transform: rotate(210deg);
+  }
+  .sk-fading-circle .sk-circle9 {
+    -webkit-transform: rotate(240deg);
+        -ms-transform: rotate(240deg);
+            transform: rotate(240deg);
+  }
+  .sk-fading-circle .sk-circle10 {
+    -webkit-transform: rotate(270deg);
+        -ms-transform: rotate(270deg);
+            transform: rotate(270deg);
+  }
+  .sk-fading-circle .sk-circle11 {
+    -webkit-transform: rotate(300deg);
+        -ms-transform: rotate(300deg);
+            transform: rotate(300deg); 
+  }
+  .sk-fading-circle .sk-circle12 {
+    -webkit-transform: rotate(330deg);
+        -ms-transform: rotate(330deg);
+            transform: rotate(330deg); 
+  }
+  .sk-fading-circle .sk-circle2:before {
+    -webkit-animation-delay: -1.1s;
+            animation-delay: -1.1s; 
+  }
+  .sk-fading-circle .sk-circle3:before {
+    -webkit-animation-delay: -1s;
+            animation-delay: -1s; 
+  }
+  .sk-fading-circle .sk-circle4:before {
+    -webkit-animation-delay: -0.9s;
+            animation-delay: -0.9s; 
+  }
+  .sk-fading-circle .sk-circle5:before {
+    -webkit-animation-delay: -0.8s;
+            animation-delay: -0.8s; 
+  }
+  .sk-fading-circle .sk-circle6:before {
+    -webkit-animation-delay: -0.7s;
+            animation-delay: -0.7s; 
+  }
+  .sk-fading-circle .sk-circle7:before {
+    -webkit-animation-delay: -0.6s;
+            animation-delay: -0.6s; 
+  }
+  .sk-fading-circle .sk-circle8:before {
+    -webkit-animation-delay: -0.5s;
+            animation-delay: -0.5s; 
+  }
+  .sk-fading-circle .sk-circle9:before {
+    -webkit-animation-delay: -0.4s;
+            animation-delay: -0.4s;
+  }
+  .sk-fading-circle .sk-circle10:before {
+    -webkit-animation-delay: -0.3s;
+            animation-delay: -0.3s;
+  }
+  .sk-fading-circle .sk-circle11:before {
+    -webkit-animation-delay: -0.2s;
+            animation-delay: -0.2s;
+  }
+  .sk-fading-circle .sk-circle12:before {
+    -webkit-animation-delay: -0.1s;
+            animation-delay: -0.1s;
+  }
+  
+  @-webkit-keyframes sk-circleFadeDelay {
+    0%, 39%, 100% { opacity: 0; }
+    40% { opacity: 1; }
+  }
+  
+  @keyframes sk-circleFadeDelay {
+    0%, 39%, 100% { opacity: 0; }
+    40% { opacity: 1; } 
+  }

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

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { IonListConversationsComponent } from './ion-list-conversations.component';
+
+describe('ExtListConversationComponent', () => {
+  let component: IonListConversationsComponent;
+  let fixture: ComponentFixture<IonListConversationsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ IonListConversationsComponent ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(IonListConversationsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,116 @@
+import { Component, EventEmitter, Input, IterableDiffers, KeyValueDiffers, OnInit, Output } 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';
+import { ListConversationsComponent } from '../list-conversations/list-conversations.component';
+import { Platform } from '@ionic/angular';
+import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
+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 { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
+// import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
+
+@Component({
+  selector: 'ion-list-conversations',
+  templateUrl: './ion-list-conversations.component.html',
+  styleUrls: ['./ion-list-conversations.component.scss'],
+})
+export class IonListConversationsComponent extends ListConversationsComponent implements OnInit {
+
+  @Input() uidConvSelected: string;
+  @Output() onCloseConversation = new EventEmitter<ConversationModel>();
+
+  convertMessage = convertMessage;
+  isApp: boolean = false;
+  public logger: LoggerService = LoggerInstance.getInstance();
+  public currentYear: any;
+  public browserLang: string;
+  public isOnline: boolean = true;
+  public checkInternet: boolean;
+
+  /**
+   * 
+   * @param iterableDiffers 
+   * @param imageRepoService 
+   * @param platform 
+   */
+  constructor(
+    public iterableDiffers: IterableDiffers,
+    public kvDiffers: KeyValueDiffers,
+    public platform: Platform,
+    private translate: TranslateService,
+    // private events: EventsService,
+    // private tiledeskService: TiledeskService,
+    private networkService: NetworkService
+  ) {
+    super(iterableDiffers, kvDiffers)
+    this.browserLang = this.translate.getBrowserLang();
+    if (this.browserLang) {
+      if (this.browserLang === 'it') {
+        // this.translate.use('it');
+        moment.locale('it')
+
+      } else {
+        // this.translate.use('en');
+        moment.locale('en')
+      }
+    }
+
+    this.currentYear = moment().format('YYYY');
+    this.logger.log('[ION-LIST-CONVS-COMP] - currentYear ', this.currentYear)
+  }
+
+  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());
+    this.watchToConnectionStatus();
+  }
+
+
+  watchToConnectionStatus() {
+
+    this.networkService.checkInternetFunc().subscribe(isOnline => {
+      this.checkInternet = isOnline
+      this.logger.log('[ION-LIST-CONVS-COMP] - watchToConnectionStatus - isOnline', this.checkInternet)
+
+      // checking internet connection
+      if (this.checkInternet == true) {
+
+        this.isOnline = true;
+      } else {
+        this.isOnline = false;
+      }
+    });
+  }
+  // --------------------------------------------------
+  // subdsribe to event
+  // --------------------------------------------------
+  // subdcribeToWatchToConnectionStatus() {
+  //   this.logger.log('[ION-LIST-CONVS-COMP] subdcribeToWatchToConnectionStatus ');
+  //   // this.events.subscribe('uidConvSelected:changed', this.subscribeChangedConversationSelected);
+  //   this.events.subscribe('internetisonline', (internetisonline) => {
+  //     // user and time are the same arguments passed in `events.publish(user, time)`
+  //     this.logger.log('[ION-LIST-CONVS-COMP] internetisonline ',internetisonline);
+  //     if (internetisonline === true) {
+  //       this.isOnline = true;
+  //     } else {
+  //       this.isOnline = false;
+  //     }
+  //   });
+  // }
+
+
+
+  closeConversation(conversation: ConversationModel) {
+    var conversationId = conversation.uid;
+    this.logger.log('[ION-LIST-CONVS-COMP] - closeConversation - conversationId ', conversationId)
+    this.onCloseConversation.emit(conversation)
+  }
+
+
+}

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

@@ -0,0 +1,46 @@
+<div id='c21-app-list-conversations'>
+  <div *ngFor="let conversation of listConversations | slice:0:limit">
+    <button tabindex="1103" class="c21-item-conversation" (click)="openConversationByID(conversation)">
+      <div class="c21-body-conv">
+        <div class="c21-left-conv">
+          <div class="c21-ball" [style.background-color]="conversation.color">
+            <span class="c21-ball-label" [innerHTML]="conversation.avatar"></span>
+            <div *ngIf="conversation.image" #avatarImage class="c21-avatar-image" [style.background-image]="'url(' + conversation.image + ')'"></div>
+          </div>
+        </div>
+        <div class="c21-right-conv">
+          <div class="c21-last-time">{{conversation.time_last_message}}</div>
+          <div class="truncate c21-name">{{conversation.sender_fullname }}</div>
+          <div *ngIf="conversation.type ==='image'">
+            <div [class.not-read]="conversation.is_new" class="c21-msg" style="float: left; margin-right: 5px;">
+              <svg role="img" aria-labelledby="altIconTitle" xmlns="http://www.w3.org/2000/svg" fill="#000000"
+                width="20px" height="20px" viewBox="0 0 24 24">
+                <path d="M0 0h24v24H0V0z" fill="none"/>
+                <path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.86 8.86l-3 3.87L9 13.14 6 17h12l-3.86-5.14z"/>
+                <!-- <title id="altIconTitle">{{ translationMap.get('CLOSED') }}</title> -->
+              </svg>
+            </div>
+            <div [class.not-read]="conversation.is_new" class="truncate c21-msg">{{conversation.last_message_text}}</div>
+            <!-- <div [class.not-read]="conversation.is_new" class="truncate c21-msg" [innerHTML]="conversation.last_message_text"></div> -->
+          </div>
+          <div *ngIf="conversation.type !=='image'" [class.not-read]="conversation.is_new" [class.archived]="conversation.archived" class="truncate c21-msg">{{conversation.last_message_text}}</div>
+          <!-- <div *ngIf="conversation.type !=='image'" [class.not-read]="conversation.is_new" [class.archived]="conversation.archived" class="truncate c21-msg" [innerHTML]="conversation.last_message_text"></div> -->
+        </div>
+        <div *ngIf="conversation.is_new" [ngStyle] = "{ 'background-color': stylesMap.get('themeColor') }" class="c21-divBudge">{{conversation.badge}}</div>
+        <div  class="c21-icon-archived-chat" *ngIf="conversation.archived">
+          <!-- ICON ARCHIVED CHAT  -->
+          <button  tabindex="-1" class="c21-header-button c21-right c21-close c21-button-clean">
+            <svg role="img" aria-labelledby="altIconTitle" xmlns="http://www.w3.org/2000/svg" fill="#aaaaaa"
+              width="24px" height="24px" viewBox="0 0 24 24">
+              <path fill="none" d="M0 0h24v24H0z"/>
+              <path d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z"/>
+              <title id="altIconTitle">{{ translationMap.get('CLOSED') }}</title>
+            </svg>
+          </button>
+        </div>
+      </div>
+      <div class="clear"></div>
+    </button>
+  </div>
+</div>
+