@chat21/chat21-ionic 3.0.80 → 3.0.81-rc.2

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

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

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

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

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

@@ -12,7 +12,9 @@ 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,55 +80,92 @@
   <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">{{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-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>
-      <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>
+      <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>
+      </div>
+    </ion-label>
+  </div>
 
-  <ion-note *ngIf="!conversation.archived" class="conversation_time">{{conversation.timestamp | amTimeAgo}}</ion-note>
+  <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>
 
   <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 }}"
-        color="close-conversation" name="archive-outline" item-end></ion-icon>
+      <ion-icon slot="icon-only" style="display:block;" id="{{ 'close_button_icon' + conversation.uid }}" 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>
+      <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>
     </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> - ->
@@ -137,18 +174,7 @@
     </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"

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

@@ -9,8 +9,8 @@
 }
 ion-item {
     cursor: pointer;
-    height: 70px;
-    --min-height: 70px;
+    height: 90px; //70px;
+    --min-height: 90px; //70px;
     position: relative;
     display: flex;
     text-decoration: none;
@@ -19,6 +19,14 @@ ion-item {
     --padding-start: 0;
     --inner-padding-end: 0;
     --background-hover: #000000 !important;
+    --background: transparent;
+    border-radius: var(--border-radius-item);
+    margin: 4px 5px;
+    .conv-container{
+        width: 84%;
+        height: 100%;
+        padding: 12px 0;
+    }
     .selected {
         // border-radius: 10px;
         // padding-left: 8px;
@@ -33,12 +41,13 @@ ion-item {
     ion-avatar {
         position: relative;
         padding: 0;
-        margin: 0 12px 0 8px;
-        height: 50px;
-        width: 50px;
-        min-width: 50px;
-        min-height: 50px;
-        line-height: 50px;
+        margin: 20px 8px 0px 8px;//0 12px 0 8px;
+        height: 40px; //50px;
+        width: 40px; //50px;
+        min-width: 40px; //50px;
+        min-height: 40px; //50px;
+        line-height: 40px; //50px;
+        align-self: end;
         .avatar-placeholder {
             position: absolute;
             top: 0;
@@ -47,7 +56,7 @@ ion-item {
             height: 100%;
             border-radius: 50%;
             text-align: center;
-            font-size: 20px;
+            font-size: 15px; //20px;
             color: #ffffff;
             font-weight: 500;
         }
@@ -70,22 +79,47 @@ ion-item {
         justify-content: center;
         min-width: 0;
         padding: 0;
+        margin: 0;
         font-family: Helvetica, Helvetica, Arial, sans-serif;
         line-height: 1.28;
         text-rendering: optimizeLegibility;
+        .conversation_project{
+            display: inline-flex;
+            align-items: center;
+            line-height: 1.2rem;
+            font-weight: 500;
+            color: #779bbb;
+            font-size: 10px;
+            max-width: 90%;
+            svg {
+                fill:#779bbb;
+                vertical-align: sub;
+            }
+            span{
+                padding-left: 5px
+            }
+        }
         .conversation_with {
             color: rgba(0, 0, 0, 1);
             font-size: 15px;
             font-weight: 400;
             line-height: 1.4;
+            width: 70% !important;
+            &.not-read {
+                font-weight: 600;
+                color: #3c4858; //#1876f2;
+            }
         }
+        
         .conversation_message {
+            margin: 5px 0px;
             p {
-                color: rgba(153, 153, 153, 1);
-                font-size: 13px;
+                color: #6e6f73; //#3c4858;
+                font-size: 15px;
                 font-weight: 400;
                 height: 18px;
                 vertical-align: middle;
+                align-self: center;
                 &.not-read {
                     font-weight: 600;
                     color: #1876f2;
@@ -93,13 +127,13 @@ ion-item {
             }
 
             span {
-                color: rgba(153, 153, 153, 1);
-                font-size: 13px;
+                color: rgb(60, 72, 88);
+                font-size: 12px;
                 font-weight: 400;
                 height: 18px;
                 &.not-read {
                     font-weight: 600;
-                    color: #1876f2;
+                    color: #3c4858; //#1876f2;
                 }
             }
         }
@@ -107,8 +141,15 @@ ion-item {
     ion-note {
         position: absolute;
         right: 8px;
-        top: 4px;
+        top: 40px;
         font-size: 10px;
+        display: flex;
+        flex-direction: column;
+        color: #6e6f73;
+
+        &.is-on-mobile{
+            top: 10px;
+        }
     }
     ion-buttons {
         margin: 0;
@@ -120,7 +161,7 @@ ion-item {
             font-size: 10px;
             --padding-start: 0px;
             --padding-end: 0px;
-            color: rgba(153, 153, 153, 1);
+            color: var(--basic-blue);//rgba(153, 153, 153, 1);
             background-color: transparent;
             border-radius: 50%; // nk
             &:hover {
@@ -133,17 +174,17 @@ ion-item {
         width: 10px;
         height: 10px;
         border-radius: 50%;
-        background-color: rgb(22, 92, 238);
+        background-color: var(--basic-blue);
         position: absolute;
         right: 6px;
         bottom: 8px;
     }
 
     .notification_point-on-desktop {
-        bottom: 29px !important;
+        bottom: 22px !important;
     }
     .notification_point-on-mobile {
-        bottom: 29px !important;
+        bottom: 22px !important;
         right: 8px;
     }
 }
@@ -209,7 +250,8 @@ ion-item:hover {
 }
 
 .ion-selected {
-    --background: rgb(231, 241, 255);
+    background: var(--list-bkg-color-selected);
+    border-right: 4px solid var(--basic-blue);
 }
 
 .time-in-archived {

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

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

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

@@ -18,15 +18,16 @@
      <label class="add-canned-response-label" >{{translationMap?.get('AddNewCannedResponse')}}</label> 
     </ion-item>
   </div>
-  <!--  -->
-  <div  class="loader" *ngIf="tagsCannedFilter.length === 0">
+  <!-- LOADER -->
+  <div class="loader" *ngIf="tagsCannedFilter.length === 0">
     <div class="box">
-      <div class="container">
-        <span class="circle"></span>
-        <span class="circle"></span>
-        <span class="circle"></span>
-        <span class="circle"></span>
-      </div>
+      <!-- <div class="container">
+        <span class="circle" [ngStyle]="{'background-color': stylesMap?.get('themeColor')}"></span>
+        <span class="circle" [ngStyle]="{'background-color': stylesMap?.get('themeColor')}"></span>
+        <span class="circle" [ngStyle]="{'background-color': stylesMap?.get('themeColor')}"></span>
+        <span class="circle" [ngStyle]="{'background-color': stylesMap?.get('themeColor')}"></span>
+      </div> -->
+      <div class="spinner" [ngStyle]="{'border-top-color': stylesMap?.get('themeColor')}"></div>
       <div class="label">{{translationMap.get('LABEL_LOADING')}}</div>
     </div>
   </div>

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

@@ -94,11 +94,12 @@
         width: 100%;
     }
 
-    ion-input {
+    ion-input, ion-textarea {
         --padding-bottom: 0px;
         --padding-top: 0px;
         &.text{
             font-style: italic;
+            margin-top: 2px;
         }
         &.title {
             font-weight: 500;
@@ -106,6 +107,11 @@
     }
     .native-input[disabled] {
         opacity: 10 !important;
+        cursor: pointer;
+    }
+    .native-textarea[disabled] {
+        opacity: 10 !important;
+        cursor: pointer;
     }
     ion-icon {
         zoom: 0.7;
@@ -179,7 +185,7 @@ ion-item {
             width: 15px;
             height: 15px;
             border-radius: 50%;
-            background-color: #1877f2;
+            background-color: var(--basic-blue);
             animation: move 500ms linear 0ms infinite;
             margin-right: 30px;
             
@@ -198,6 +204,22 @@ ion-item {
             animation: grow 500ms linear 0s infinite reverse;
             }
         }
+
+    }
+
+    .spinner {
+        margin: auto;
+        border: 8px solid #EAF0F6;
+        border-radius: 50%;
+        border-top: 8px solid var(--basic-blue);
+        width: 50px;
+        height: 50px;
+        animation: spinner 1s linear infinite;
+    }
+    
+    @keyframes spinner {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
     }
 
     .label{

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

@@ -20,6 +20,7 @@ export class CannedResponseComponent implements OnInit {
   @Input() conversationWith: string;
   @Input() conversationWithFullname: string;
   @Input() currentString: string;
+  @Input() stylesMap: Map<string, string>;
   @Input() translationMap: Map<string, string>;
   @Output() onLoadedCannedResponses = new EventEmitter<[any]>();
   @Output() onClickCanned = new EventEmitter<any>();
@@ -162,7 +163,7 @@ export class CannedResponseComponent implements OnInit {
       canned.text = this.replacePlaceholderInCanned(canned.text);
       canned.disabled = true
     });
-    if (this.tagsCannedCount === 0) {
+    if (this.tagsCannedFilter && this.tagsCannedFilter.length === 0) {
       // const button = this.renderer.createElement('button');
       // const buttonText = this.renderer.createText('Click me');
       // this.renderer.appendChild(button, buttonText);
@@ -191,17 +192,16 @@ export class CannedResponseComponent implements OnInit {
   }
 
   filterItems(items, searchTerm) {
-    this.logger.log('[CANNED] filterItems tagsCannedClone ', items, ' searchTerm: ', searchTerm)
+    // this.logger.log('[CANNED] filterItems tagsCannedClone ', items, ' searchTerm: ', searchTerm)
     //this.logger.log("filterItems::: ",searchTerm);
     return items.filter((item) => {
-      //this.logger.log("filterItems::: ", item.title.toString().toLowerCase());
-      this.logger.log('[CANNED] filtered tagsCannedClone item ', item)
+      // this.logger.log('[CANNED] filtered tagsCannedClone item ', item)
       return item.title.toString().toLowerCase().indexOf(searchTerm.toString().toLowerCase()) > -1
     })
   }
 
   replacePlaceholderInCanned(str) {
-    this.logger.log('[CANNED] - replacePlaceholderInCanned str ', str)
+    // this.logger.log('[CANNED] - replacePlaceholderInCanned str ', str)
     str = str.replace('$recipient_name', this.conversationWithFullname)
     if (this.loggedUser && this.loggedUser.fullname) {
       str = str.replace('$agent_name', this.loggedUser.fullname)

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

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