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

package/src/app/chatlib/conversation-detail/message/buttons/action-button/action-button.component.ts

@@ -1,4 +1,4 @@
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output, SimpleChanges } from '@angular/core';
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
 
 @Component({
   selector: 'chat-action-button-attachment',
@@ -8,36 +8,16 @@ import { Component, ElementRef, EventEmitter, Input, OnInit, Output, SimpleChang
 export class ActionButtonComponent implements OnInit {
 
   @Input() button: any;
-  @Input() fontSize: string;
-  @Input() backgroundColor: string;
-  @Input() textColor: string;
-  @Input() hoverBackgroundColor: string;
-  @Input() hoverTextColor: string;
+  @Input() themeColor: string;
+  @Input() foregroundColor: string;
   @Output() onButtonClicked = new EventEmitter();
-
   public type: string = "action"
   constructor(private elementRef: ElementRef) { }
 
   ngOnInit() {
-  }
-
-  ngOnChanges(changes: SimpleChanges){
     //decomment if element should have same color of themeColor and fregroundColor
-    if(this.fontSize) this.elementRef.nativeElement.querySelector('.action').style.setProperty('--buttonFontSize', this.fontSize);
-    if(this.backgroundColor) this.elementRef.nativeElement.querySelector('.action').style.setProperty('--backgroundColor', this.backgroundColor);
-    if(this.textColor) this.elementRef.nativeElement.querySelector('.action').style.setProperty('--textColor', this.textColor);
-    if(this.hoverBackgroundColor) this.elementRef.nativeElement.querySelector('.action').style.setProperty('--hoverBackgroundColor', this.hoverBackgroundColor);
-    if(this.hoverTextColor) this.elementRef.nativeElement.querySelector('.action').style.setProperty('--hoverTextColor', this.hoverTextColor);
-  }
-
-  onMouseOver(event){
-    // if(this.themeColor) this.elementRef.nativeElement.querySelector('.action').style.background = this.themeColor
-    // if(this.foregroundColor) this.elementRef.nativeElement.querySelector('.action').style.color = this.foregroundColor
-  }
-
-  onMouseOut(event){
-    // this.elementRef.nativeElement.querySelector('.action').style.color = '';
-    // this.elementRef.nativeElement.querySelector('.action').style.background = ''
+    // this.elementRef.nativeElement.style.setProperty('--themeColor', this.themeColor);
+    // this.elementRef.nativeElement.style.setProperty('--foregroundColor', this.foregroundColor);
   }
 
   actionButtonAction(){

package/src/app/chatlib/conversation-detail/message/buttons/link-button/link-button.component.html

@@ -1,5 +1,4 @@
-<div class="button-in-msg url" (click)="actionButtonUrl()" title="{{button?.value}}"
-(mouseover)="onMouseOver($event)" (mouseout)="onMouseOut($event)"> 
+<div class="button-in-msg url" (click)="actionButtonUrl()" title="{{button?.value}}"> 
   <span *ngIf="button?.target !== 'self'" class="icon-button-action">
     <!-- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="12px" height="12px">
       <path d="M0 0h24v24H0z" fill="none"/>

package/src/app/chatlib/conversation-detail/message/buttons/link-button/link-button.component.scss

@@ -1,11 +1,12 @@
 // @import '../../../../../sass/variables';
 
 div {
-    --backgroundColor: --basic-blue;
-    --textColor: --bck-msg-sent;
-    --hoverBackgroundColor: --bck-msg-sent;
-    --hoverTextColor: --basic-blue;
-    --buttonFontSize: --button-in-msg-font-size;
+    --bck-msg-sent: #62a8ea;
+    --col-msg-sent:#ffffff;
+    --light-white: #f7f7f7;
+    --black: #1a1a1a;
+    --gray: #aaaaaa;
+    --blue: rgb(42, 106, 193);
 }
 
 .button-in-msg {
@@ -14,19 +15,19 @@ div {
     max-width: 300px;
     min-width: inherit;
     cursor: pointer;
-    border: 1px solid var(--textColor);
+    border: 1px solid var(--blue);
     border-radius: 20px;
     margin: 3px;
-    background: var(--backgroundColor);
+    background: transparent;
     overflow: hidden;
     font-family: 'Muli', sans-serif;
-    font-size: var(--buttonFontSize);
+    font-size: 15px;
     -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
     white-space: nowrap;
     letter-spacing: -0.24px;
     -webkit-font-smoothing: antialiased;
-    color: var(--textColor);
+    color: var(--blue);
     line-height: 16px;
 }
 
@@ -37,23 +38,23 @@ div {
         top: -1px;
         right: 1px;
         svg {
-            fill: var(--textColor);
+            fill: var(--blue);
         }
     }
     .icon-button-action-self{
         position: absolute;
         right: 1px;
         svg {
-            fill: var(--textColor);
+            fill: var(--blue);
         }
     }
     &:focus,
     &:hover {
-        color: var(--hoverTextColor);
-        background:  var(--hoverBackgroundColor);
+        color: white;
+        background:  var(--blue);
         .icon-button-action, .icon-button-action-self {
             svg {
-                fill: var(--hoverTextColor);
+                fill: white;
             }
         }
     }

package/src/app/chatlib/conversation-detail/message/buttons/link-button/link-button.component.ts

@@ -1,4 +1,4 @@
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output, SimpleChanges } from '@angular/core';
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
 
 @Component({
   selector: 'chat-link-button-attachment',
@@ -8,35 +8,16 @@ import { Component, ElementRef, EventEmitter, Input, OnInit, Output, SimpleChang
 export class LinkButtonComponent implements OnInit {
 
   @Input() button: any;
-  @Input() fontSize: string;
-  @Input() backgroundColor: string;
-  @Input() textColor: string;
-  @Input() hoverBackgroundColor: string;
-  @Input() hoverTextColor: string;
+  @Input() themeColor: string;
+  @Input() foregroundColor: string;
   @Output() onButtonClicked = new EventEmitter();
   public type: string = "url"
   constructor(private elementRef: ElementRef) { }
 
   ngOnInit() {
-  }
-
-  ngOnChanges(changes: SimpleChanges){
     //decomment if element should have same color of themeColor and fregroundColor
-    if(this.fontSize) this.elementRef.nativeElement.querySelector('.url').style.setProperty('--buttonFontSize', this.fontSize);
-    if(this.backgroundColor) this.elementRef.nativeElement.querySelector('.url').style.setProperty('--backgroundColor', this.backgroundColor);
-    if(this.textColor) this.elementRef.nativeElement.querySelector('.url').style.setProperty('--textColor', this.textColor);
-    if(this.hoverBackgroundColor) this.elementRef.nativeElement.querySelector('.url').style.setProperty('--hoverBackgroundColor', this.hoverBackgroundColor);
-    if(this.hoverTextColor) this.elementRef.nativeElement.querySelector('.url').style.setProperty('--hoverTextColor', this.hoverTextColor);
-  }
-
-  onMouseOver(event){
-    // if(this.themeColor) this.elementRef.nativeElement.querySelector('.url').style.background = this.themeColor
-    // if(this.foregroundColor) this.elementRef.nativeElement.querySelector('.url').style.color = this.foregroundColor
-  }
-
-  onMouseOut(event){
-    // this.elementRef.nativeElement.querySelector('.url').style.color = '';
-    // this.elementRef.nativeElement.querySelector('.url').style.background = ''
+    // this.elementRef.nativeElement.style.setProperty('--themeColor', this.themeColor);
+    // this.elementRef.nativeElement.style.setProperty('--foregroundColor', this.foregroundColor);
   }
 
   actionButtonUrl(){

package/src/app/chatlib/conversation-detail/message/buttons/text-button/text-button.component.html

@@ -1,8 +1,3 @@
-<div class="button-in-msg text" 
-[ngClass]="{'disabled': isConversationArchived}"
-title="{{button?.value}}"
-(click)="actionButtonText()" 
-(mouseover)="onMouseOver($event)" 
-(mouseout)="onMouseOut($event)">
+<div class="button-in-msg text" (click)="actionButtonText()" title="{{button?.value}}">
   {{button?.value}}
 </div>

package/src/app/chatlib/conversation-detail/message/buttons/text-button/text-button.component.scss

@@ -1,10 +1,11 @@
 // @import '../../../../../sass/variables';
 div {
-    --backgroundColor: --basic-blue;
-    --textColor: --bck-msg-sent;
-    --hoverBackgroundColor: --bck-msg-sent;
-    --hoverTextColor: --basic-blue;
-    --buttonFontSize: --button-in-msg-font-size;
+    --bck-msg-sent: #62a8ea;
+    --col-msg-sent:#ffffff;
+    --light-white: #f7f7f7;
+    --black: #1a1a1a;
+    --gray: #aaaaaa;
+    --blue: rgb(42, 106, 193);
 }
 
 
@@ -14,19 +15,19 @@ div {
     max-width: 300px;
     min-width: inherit;
     cursor: pointer;
-    border: 1px solid var(--textColor); //$blue
+    border: 1px solid var(--blue);
     border-radius: 20px;
     margin: 3px;
-    background: var(--backgroundColor);
+    background: transparent;
     overflow: hidden;
     font-family: 'Muli', sans-serif;
-    font-size: var(--buttonFontSize);
+    font-size: 15px;
     -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
     white-space: nowrap;
     letter-spacing: -0.24px;
     -webkit-font-smoothing: antialiased;
-    color: var(--textColor); //$blue
+    color: var(--blue);
     line-height: 16px;
 }
 
@@ -35,11 +36,11 @@ div {
     transition: background-color .6s ease;
     &:focus,
     &:hover {
-        color: var(--hoverTextColor);
-        background: var(--hoverBackgroundColor);
+        color: white;
+        background: var(--blue);
         .icon-button-action {
             svg {
-                fill: --black;
+                fill: var(--black);
             }
         }
     }

package/src/app/chatlib/conversation-detail/message/buttons/text-button/text-button.component.ts

@@ -1,4 +1,4 @@
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output, SimpleChanges } from '@angular/core';
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
 
 
 @Component({
@@ -9,37 +9,16 @@ import { Component, ElementRef, EventEmitter, Input, OnInit, Output, SimpleChang
 export class TextButtonComponent implements OnInit {
 
   @Input() button: any;
-  @Input() isConversationArchived: boolean;
-  @Input() fontSize: string;
-  @Input() backgroundColor: string;
-  @Input() textColor: string;
-  @Input() hoverBackgroundColor: string;
-  @Input() hoverTextColor: string;
+  @Input() themeColor: string;
+  @Input() foregroundColor: string;
   @Output() onButtonClicked = new EventEmitter();
-
   public type: string = "text"
   constructor(private elementRef: ElementRef) { }
 
   ngOnInit() {
-  }
-
-  ngOnChanges(changes: SimpleChanges){
     //decomment if element should have same color of themeColor and fregroundColor
-    if(this.fontSize) this.elementRef.nativeElement.querySelector('.text').style.setProperty('--buttonFontSize', this.fontSize);
-    if(this.backgroundColor) this.elementRef.nativeElement.querySelector('.text').style.setProperty('--backgroundColor', this.backgroundColor);
-    if(this.textColor) this.elementRef.nativeElement.querySelector('.text').style.setProperty('--textColor', this.textColor);
-    if(this.hoverBackgroundColor) this.elementRef.nativeElement.querySelector('.text').style.setProperty('--hoverBackgroundColor', this.hoverBackgroundColor);
-    if(this.hoverTextColor) this.elementRef.nativeElement.querySelector('.text').style.setProperty('--hoverTextColor', this.hoverTextColor);
-  }
-
-  onMouseOver(event){
-    // if(this.backgroundColor) this.elementRef.nativeElement.querySelector('.text').style.background = this.textColor
-    // if(this.textColor) this.elementRef.nativeElement.querySelector('.text').style.color = this.backgroundColor
-  }
-
-  onMouseOut(event){
-    // this.elementRef.nativeElement.querySelector('.text').style.color = '';
-    // this.elementRef.nativeElement.querySelector('.text').style.background = ''
+    // this.elementRef.nativeElement.style.setProperty('--themeColor', this.themeColor);
+    // this.elementRef.nativeElement.style.setProperty('--foregroundColor', this.foregroundColor);
   }
 
   actionButtonText(){

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

@@ -1,3 +1,4 @@
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 import { Component, ElementRef, Input, OnInit, SimpleChange, SimpleChanges, ViewChild, ViewEncapsulation } from '@angular/core';
 
 @Component({

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

@@ -6,12 +6,12 @@
 
 .base_info {
     border-radius: 14px;
-    // border: 1px solid rgba(24, 119, 242, 0.1);
+    border: 1px solid #C9E4F6;
     padding-left: 4px;
     padding-right: 4px;
     padding: 6px 10px;
     display: inline-block;
-    background: rgba(24, 119, 242, 0.1);
+    background: #C9E4F6;
     font-size: 0.70em;
     color: var(--basic-gray);
     margin-left: 5px; //32px;

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

@@ -4,32 +4,22 @@
       
       <chat-text-button-attachment *ngIf="button.type === 'text' && isLastMessage === true" class="div-button"
         [button]="button"
-        [isConversationArchived]="isConversationArchived"
-        [fontSize]="stylesMap.get('buttonFontSize')"
-        [backgroundColor]="stylesMap.get('buttonBackgroundColor')"
-        [textColor]="stylesMap.get('buttonTextColor')"
-        [hoverBackgroundColor]="stylesMap.get('buttonHoverBackgroundColor')"
-        [hoverTextColor]="stylesMap.get('buttonHoverTextColor')"
+        [themeColor]="stylesMap.get('themeColor')"
+        [foregroundColor]="stylesMap.get('foregroundColor')"
         (onButtonClicked)="returnOnAttachmentButtonClicked($event)">
       </chat-text-button-attachment>
 
       <chat-link-button-attachment *ngIf="button.type === 'url'" class="div-button"
         [button]="button"
-        [fontSize]="stylesMap.get('buttonFontSize')"
-        [backgroundColor]="stylesMap.get('buttonBackgroundColor')"
-        [textColor]="stylesMap.get('buttonTextColor')"
-        [hoverBackgroundColor]="stylesMap.get('buttonHoverBackgroundColor')"
-        [hoverTextColor]="stylesMap.get('buttonHoverTextColor')"
+        [themeColor]="stylesMap.get('themeColor')"
+        [foregroundColor]="stylesMap.get('foregroundColor')"
         (onButtonClicked)="returnOnAttachmentButtonClicked($event)">
       </chat-link-button-attachment>
 
       <chat-action-button-attachment *ngIf="button.type === 'action' && isLastMessage === true" class="div-button"
         [button]="button"
-        [fontSize]="stylesMap.get('buttonFontSize')"
-        [backgroundColor]="stylesMap.get('buttonBackgroundColor')"
-        [textColor]="stylesMap.get('buttonTextColor')"
-        [hoverBackgroundColor]="stylesMap.get('buttonHoverBackgroundColor')"
-        [hoverTextColor]="stylesMap.get('buttonHoverTextColor')"
+        [themeColor]="stylesMap.get('themeColor')"
+        [foregroundColor]="stylesMap.get('foregroundColor')"
         (onButtonClicked)="returnOnAttachmentButtonClicked($event)">
       </chat-action-button-attachment>
 

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

@@ -1,8 +1,10 @@
 #buttons-in-message {
     text-align: left;
     display: block; 
+    margin-top: -6px;
+    margin-bottom: 5px;
     height: auto;
-    margin: 0px 20px 5px 10px;
+    padding-left: 8px;
 
     .div-button {
         display: inline-block;

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

@@ -12,9 +12,7 @@ export class MessageAttachmentComponent implements OnInit {
 
   // ========= begin:: Input/Output values ============//
   @Input() message: MessageModel;
-  @Input() isConversationArchived: boolean;
   @Input() isLastMessage: boolean;
-  @Input() fullscreenMode: boolean;
   @Input() stylesMap: Map<string, string>;
   @Output() onAttachmentButtonClicked = new EventEmitter<any>();
   @Output() onElementRendered = new EventEmitter<{element: string, status: boolean}>()

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

@@ -80,92 +80,55 @@
   <div tabindex="0"></div>
 
   <!-- <div [class.selected]="conversation.uid === uidConvSelected"></div> -->
-  <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>
-  </div>
-  <div class="conv-container">
-    <ion-label>
-      <div class="conversation_project truncate">
-        <!-- DIRECT CONV -->
-        <div *ngIf="conversation.channel_type === TYPE_DIRECT">
-          <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="conversation.uid.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="conversation.uid.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="conversation?.attributes?.project_name" class="truncate">{{conversation?.attributes?.project_name}}</span>
-          <span *ngIf="!conversation?.attributes?.project_name" class="truncate">{{conversation?.attributes?.projectId}}</span>
-        </div>
-      </div>
-      <div style="display: flex;">
-        <span class="conversation_with truncate" [class.not-read]="conversation.is_new">
-          {{conversation.conversation_with_fullname}}
-        </span>
-      </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>
+  <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">{{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>
-    </ion-label>
-  </div>
+      <p [class.not-read]="conversation.is_new" class="truncate" [ngClass]="{'truncate-on-desktop': !isApp}"
+        [innerHTML]="conversation.last_message_text"></p> -->
 
-  <ion-note *ngIf="!conversation.archived" class="conversation_time" [ngClass]="{'is-on-mobile': isApp}">
-    {{conversation.timestamp | amTimeAgo}}
-  </ion-note>
-  <ion-note item-end *ngIf="conversation?.archived" class="conversation_time">
-    <span *ngIf="(conversation.timestamp | amDateFormat:'YYYY') === currentYear">
-      {{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">
-      {{browserLang === 'en' ? (conversation.timestamp | amDateFormat:'MMM DD YYYY') : (conversation.timestamp| amDateFormat:'DD MMM YYYY') }}
-      <!-- {{conversation.timestamp | amDateFormat:'DD MMM YYYY'}} -->
-    </span>
-  </ion-note>
+      <!-- <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" [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 }}" name="archive-outline" item-end></ion-icon>
+      <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')"> {{ translationsMap?.get('Resolve')}} </span>
-        <span *ngIf="!conversation?.recipient.startsWith('support-group')"> {{ translationsMap?.get('Archive') }} </span>
-      </ng-template>
+        <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> - ->
@@ -174,7 +137,18 @@
     </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 === '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 === '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> -->
+  </div>
 
   <!-- && !conversation?.archived -->
   <div item-end class="notification_point"