@chat21/chat21-ionic 3.0.64 → 3.0.65-rc1

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

@@ -20,7 +20,7 @@ export class BubbleMessageComponent implements OnInit, OnChanges {
   @Input() message: MessageModel;
   @Input() textColor: string;
   @Input() areVisibleCAR: boolean;
-  @Input() support_mode: boolean;
+  @Input() supportMode: boolean;
   @Output() onBeforeMessageRender = new EventEmitter();
   @Output() onAfterMessageRender = new EventEmitter();
   @Output() onImageRendered = new EventEmitter<boolean>()
@@ -89,7 +89,7 @@ export class BubbleMessageComponent implements OnInit, OnChanges {
   ngOnChanges() {
     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)
+    this.logger.log('BUBBLE-MSG ngOnChanges supportMode', this.supportMode)
     if (this.message && this.message.metadata && typeof this.message.metadata === 'object') {
       this.getMetadataSize(this.message.metadata)
     }

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

@@ -0,0 +1 @@
+<div id="htmlCode" #htmlCode [innerHTML]="htmlText | safeHtml"></div>

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

@@ -0,0 +1,79 @@
+// @import '../../../../sass/variables';
+
+:root {
+    --themeColor: #62a8ea;
+    --foregroundColor: #ffffff;
+    --buttonFontSize: 12px;
+}
+
+
+::ng-deep {
+
+    .button-html {
+        padding: 8px 16px!important;
+        position: relative;
+        max-width: 300px;
+        min-width: inherit;
+        cursor: pointer !important;
+        border: 1px solid #62a8ea;
+        border-radius: 20px;
+        margin: 3px;
+        background: transparent;
+        overflow: hidden;
+        font-family: 'Muli', sans-serif !important;
+        font-size: 12px !important;
+        -o-text-overflow: ellipsis;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        letter-spacing: -0.24px;
+        -webkit-font-smoothing: antialiased;
+        color: #62a8ea;
+        line-height: 16px;
+
+    }
+
+    .url {
+        transition: background-color .6s ease;
+        .icon-button-action {
+            position: absolute;
+            top: -1px;
+            right: 1px;
+            svg {
+                fill: #62a8ea;
+            }
+        }
+        .icon-button-action-self{
+            position: absolute;
+            right: 1px;
+            svg {
+                fill: #62a8ea;
+            }
+        }
+        &:focus,
+        &:hover {
+            color: white;
+            background:  #62a8ea;
+            .icon-button-action, .icon-button-action-self {
+                svg {
+                    fill: white;
+                }
+            }
+        }
+        &:active{
+            font-size: 20px;
+        }
+    }
+    
+    .text-html{
+        font-size: 1.4em;
+        margin: 0;
+        padding: 8px;
+        font-style: normal;
+        letter-spacing: normal;
+        font-stretch: normal;
+        font-variant: normal;
+        font-weight: 300;
+        overflow: hidden;
+    }
+
+}

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

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HtmlComponent } from './html.component';
+
+describe('HtmlComponent', () => {
+  let component: HtmlComponent;
+  let fixture: ComponentFixture<HtmlComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HtmlComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HtmlComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,33 @@
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import { Component, ElementRef, Input, OnInit, SimpleChange, SimpleChanges, ViewChild, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'chat-html',
+  templateUrl: './html.component.html',
+  styleUrls: ['./html.component.scss']
+})
+export class HtmlComponent implements OnInit {
+
+  @Input() htmlText: string;
+  @Input() fontSize: string;
+  @Input() themeColor: string;
+  @Input() foregroundColor: string;
+
+  @ViewChild('htmlCode', {static: true}) container;
+  
+  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.style.setProperty('--buttonFontSize', this.fontSize);
+    if(this.themeColor) this.elementRef.nativeElement.style.setProperty('--themeColor', this.themeColor);
+    if(this.foregroundColor) this.elementRef.nativeElement.style.setProperty('--foregroundColor', this.foregroundColor);
+  }
+
+  
+
+}

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

@@ -59,7 +59,6 @@ export class ListConversationsComponent implements OnInit {
   public openConversationByID(conversation) {
     this.logger.log('[LISTCONVERSATIONS-W] openConversationByID: ', conversation);
     if (conversation) {
-      this.logger.log(conversation.recipient_fullname)
       // this.conversationsService.updateIsNew(conversation);
       // this.conversationsService.updateConversationBadge();
       this.uidConvSelected = conversation.uid

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

@@ -32,7 +32,7 @@
       <!-- (click)="onOpenCloseInfoConversation()" -->
       <div *ngIf="conversationAvatar" class="tile-info-with" 
         [ngClass]="{ 'tile-info-with-ios': platformName === 'ios' }">
-        <span class="tile-username">{{ conversationAvatar.conversation_with_fullname }} </span>
+        <span class="tile-username">{{ conversationAvatar.conversation_with_fullname | truncate:50 }} </span>
         <!-- <span class="tile-username">{{ conversation_with_fullname }} </span> -->
 
       </div>

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

@@ -4,6 +4,25 @@ ion-header {
     border-bottom-style: solid;
     border-color: var(--light-gray);
     border-bottom-width: thin;
+    ion-toolbar{
+        height: 60px;
+        .flex-container{
+            display: flex;
+        }
+
+        .back-flex-container{
+            flex: 0 1 auto;
+            order: 0;
+        }
+        .user-info-flex-container{
+            flex: 0 1 auto;
+            order: 1;
+        }
+        .resolve-flex-container{
+            flex: 0 1 auto;
+            order: 2;
+        }
+    }
     ion-title {
         text-align: left;
         height: 40px;

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

@@ -0,0 +1,116 @@
+<ion-header no-border class="ion-no-border">
+  <ion-toolbar style="height:60px">
+    <div class="flex-container">
+      <div class="back-flex-container">
+        <ion-buttons slot="start" style="height:60px">
+          <!-- (click)="pushPage('conversations-list')" defaultHref="/conversations-list" -->
+          <ion-back-button style="display: block;" text="" *ngIf="isMobile" (click)="goBackToConversationList()">
+          </ion-back-button>
+        </ion-buttons>
+      </div>
+      <div class="user-info-flex-container">
+        <div style="display: flex;">
+          <div>1</div>
+          <div>2</div>
+        </div>
+      </div>
+
+      <div class="resolve-flex-container">
+        <ion-buttons slot="end">
+
+          <!-- <ion-button ion-button fill="clear" color="primary" size="small" (click)="presentCreateTicketModal()" [ngClass]="{'resolve-conv-margin-right': !isMobile}">
+            <ion-icon name="ticket-outline"></ion-icon>
+            <span style="text-transform: capitalize; margin-left: 5px;"> {{ 'Crea ticket' | translate}} </span>
+          </ion-button> -->
+        
+          <ion-button *ngIf="conversationUid?.startsWith('support-group') && conv_type !== 'archived'" ion-button fill="clear" color="primary" size="small" 
+          (click)="closeConversation()" [ngClass]="{'resolve-conv-margin-right': !isMobile}" [disabled]="conv_closed === true">
+            <!-- <ion-icon slot="icon-only" name="alert-circle-outline"></ion-icon> -->
+            <ion-icon name="archive-outline"></ion-icon>
+            <!-- <ion-icon slot="icon-only"  name="information-outline"></ion-icon> -->
+            <span style="text-transform: capitalize; margin-left: 5px;"> {{ 'Resolve' | translate}} </span>
+          </ion-button>
+        
+          <ion-button *ngIf="!openInfoConversation" ion-button fill="clear" (click)="onOpenCloseInfoConversation()">
+            <!-- <ion-icon slot="icon-only" name="alert-circle-outline"></ion-icon> -->
+            <ion-icon slot="icon-only" name="information-circle-outline"></ion-icon>
+            <!-- <ion-icon slot="icon-only"  name="information-outline"></ion-icon> -->
+        
+          </ion-button>
+          <ion-button *ngIf="openInfoConversation" ion-button fill="clear" (click)="onOpenCloseInfoConversation()">
+            <ion-icon slot="icon-only" name="close-circle-outline"></ion-icon>
+          </ion-button>
+        
+        </ion-buttons>
+      </div>
+
+    </div>
+  </ion-toolbar>
+</ion-header>
+
+
+
+
+<ion-title [class.info-open]="openInfoConversation || openInfoMessage">
+
+  <div *ngIf="conversationAvatar" class="avatar-and-typing-wpr" >
+    <!-- [ngStyle] = "{ 'left': platformName === 'ios' ? '55px' : ''  }" -->
+    <div *ngIf="conversationAvatar" class="avatar-container" (click)="onOpenCloseInfoConversation()" style="cursor: pointer"
+      [ngClass]="{ 'avatar-container-ios': platformName === 'ios' }">
+      <app-avatar-profile [itemAvatar]=conversationAvatar></app-avatar-profile>
+    </div>
+    <!-- [ngStyle] = "{ 'left': platformName === 'ios' ? '63px' : ''  }" -->
+    <div *ngIf="isDirect" class="user-presence" [ngClass]="{ 'user-presence-ios': platformName === 'ios' }">
+      <app-user-presence [idUser]=conversationAvatar.conversation_with [translationMap]=translationMap
+        [borderColor]=borderColor [fontColor]=fontColor>
+      </app-user-presence>
+    </div>
+
+    <div *ngIf="conversationAvatar" class="user-typing">
+      <app-user-typing [idConversation]=conversationAvatar.uid [idCurrentUser]=idLoggedUser [isDirect]=isDirect
+        [translationMap]=translationMap [color]=fontColor [membersConversation]=membersConversation>
+      </app-user-typing>
+    </div>
+
+  </div>
+  <!-- [ngClass] = "{ 'tile-info-with-ios': platformName === 'ios' ? '82px' : ''82px''  }" -->
+  <!-- (click)="onOpenCloseInfoConversation()" -->
+  <div *ngIf="conversationAvatar" class="tile-info-with" 
+    [ngClass]="{ 'tile-info-with-ios': platformName === 'ios' }">
+    <span class="tile-username">{{ conversationAvatar.conversation_with_fullname | truncate:50 }} </span>
+    <!-- <span class="tile-username">{{ conversation_with_fullname }} </span> -->
+
+  </div>
+
+  <!-- <div *ngIf="conversationWithFullname" class="tile-info-with" (click)="onOpenCloseInfoConversation()">        
+    <span class="tile-username">{{ conversationWithFullname }} </span>
+  </div> -->
+
+</ion-title>
+<!-- openInfoConversation  {{openInfoConversation}} -->
+<ion-buttons slot="end">
+
+  <!-- <ion-button ion-button fill="clear" color="primary" size="small" (click)="presentCreateTicketModal()" [ngClass]="{'resolve-conv-margin-right': !isMobile}">
+    <ion-icon name="ticket-outline"></ion-icon>
+    <span style="text-transform: capitalize; margin-left: 5px;"> {{ 'Crea ticket' | translate}} </span>
+  </ion-button> -->
+
+  <ion-button *ngIf="conversationUid?.startsWith('support-group') && conv_type !== 'archived'" ion-button fill="clear" color="primary" size="small" 
+  (click)="closeConversation()" [ngClass]="{'resolve-conv-margin-right': !isMobile}" [disabled]="conv_closed === true">
+    <!-- <ion-icon slot="icon-only" name="alert-circle-outline"></ion-icon> -->
+    <ion-icon name="archive-outline"></ion-icon>
+    <!-- <ion-icon slot="icon-only"  name="information-outline"></ion-icon> -->
+    <span style="text-transform: capitalize; margin-left: 5px;"> {{ 'Resolve' | translate}} </span>
+  </ion-button>
+
+  <ion-button *ngIf="!openInfoConversation" ion-button fill="clear" (click)="onOpenCloseInfoConversation()">
+    <!-- <ion-icon slot="icon-only" name="alert-circle-outline"></ion-icon> -->
+    <ion-icon slot="icon-only" name="information-circle-outline"></ion-icon>
+    <!-- <ion-icon slot="icon-only"  name="information-outline"></ion-icon> -->
+
+  </ion-button>
+  <ion-button *ngIf="openInfoConversation" ion-button fill="clear" (click)="onOpenCloseInfoConversation()">
+    <ion-icon slot="icon-only" name="close-circle-outline"></ion-icon>
+  </ion-button>
+
+</ion-buttons>

package/src/app/components/conversation-detail/message-text-area/message-text-area.component.html

@@ -40,7 +40,7 @@
 
       <div class="start-buttons" style="position: absolute;display: flex; top: 2px;">
 
-        <ng-container *ngIf="areVisibleCAR && support_mode === true">
+        <ng-container *ngIf="areVisibleCAR && supportMode">
           <div class="canned-responses-btn-wpr" style="margin-left: -5px;"
             tooltip="{{translationMap?.get('CANNED_RESPONSES')}}" [options]="tooltipOptions" placement="top">
             <ion-button ion-button fill="clear" class="canned-responses-btn" (click)="openCannedResponses()"
@@ -110,7 +110,7 @@
 
 
 
-      <div class="text-message" [ngClass]="{'text-message-no-cr': areVisibleCAR === false || support_mode === false}">
+      <div class="text-message" [ngClass]="{'text-message-no-cr': areVisibleCAR === false || supportMode === false}">
         <ion-textarea id="ion-textarea" #messageTextArea #message_text_area #textArea rows="1"
           [placeholder]="TEXAREA_PLACEHOLDER" autosize="false" auto-grow="true" autofocus="true" [value]=""
           [(ngModel)]="messageString" (ionChange)="ionChange($event);" [disabled]="disableTextarea"

package/src/app/components/conversation-detail/message-text-area/message-text-area.component.ts

@@ -46,7 +46,7 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
   @Input() tagsCannedFilter: any = [];
   @Input() tagsCannedCount: number;
   @Input() areVisibleCAR: boolean;
-  @Input() support_mode: boolean;
+  @Input() supportMode: boolean;
   @Input() events: Observable<void>;
   @Input() fileUploadAccept: string
   @Input() isOpenInfoConversation: boolean;
@@ -157,7 +157,7 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
     } else {
       this.IS_SUPPORT_GROUP_CONVERSATION = false
     }
-    this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] ngOnChanges support_mode ', this.support_mode)
+    this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] ngOnChanges supportMode ', this.supportMode)
     this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] ngOnChanges disableTextarea ', this.disableTextarea)
     this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] ngOnChanges DROP EVENT ", this.dropEvent);
     this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] ngOnChanges tagsCannedFilter ", this.tagsCannedFilter);

package/src/app/directives/safe-html.pipe.ts

@@ -8,8 +8,8 @@ export class SafeHtmlPipe implements PipeTransform {
   
   transform(html) {
     // console.log('SafeHtmlPipe html ', html)
-    // return this.sanitizer.bypassSecurityTrustHtml(html);
-    return this.sanitizer.bypassSecurityTrustResourceUrl(html);
+    // return this.sanitizer.bypassSecurityTrustResourceUrl(html);
+    return this.sanitizer.bypassSecurityTrustHtml(html);
   
   }
 

package/src/app/directives/truncate.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { TruncatePipe } from './truncate.pipe';
+
+describe('TruncatePipe', () => {
+  it('create an instance', () => {
+    const pipe = new TruncatePipe();
+    expect(pipe).toBeTruthy();
+  });
+});

package/src/app/directives/truncate.pipe.ts

@@ -0,0 +1,16 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'truncate'
+})
+export class TruncatePipe implements PipeTransform {
+
+  transform(value: string, character: number): any {
+    console.log('stringggg', value, character)
+    if(value && value.length > character) 
+      return value.substring(0, character) + ' ...'
+    else 
+      return value;
+  }
+
+}

package/src/app/pages/conversation-detail/conversation-detail.module.ts

@@ -1,3 +1,4 @@
+import { TruncatePipe } from './../../directives/truncate.pipe';
 import { IonConversationDetailComponent } from '../../chatlib/conversation-detail/ion-conversation-detail/ion-conversation-detail.component';
 import { TooltipModule } from 'ng2-tooltip-directive';
 import { NgModule } from '@angular/core';
@@ -32,7 +33,6 @@ import { InfoGroupComponent } from 'src/app/components/conversation-info/info-gr
 
 
 import { SharedModule } from 'src/app/shared/shared.module';
-// import { SharedConversationInfoModule } from 'src/app/shared/shared-conversation-info.module';
 import { NgxLinkifyjsModule } from 'ngx-linkifyjs';
 import { ScrollbarThemeModule } from '../../utils/scrollbar-theme.directive';
 import { PickerModule } from '@ctrl/ngx-emoji-mart';
@@ -62,7 +62,7 @@ import { PickerModule } from '@ctrl/ngx-emoji-mart';
   declarations: [
     ConversationDetailPage,
     HeaderConversationDetailComponent,
-    MessageTextAreaComponent
+    MessageTextAreaComponent,
     // BubbleDayMessageComponent,
     // BubbleSystemMessageComponent,
     // BubbleMyMessageComponent,
@@ -71,6 +71,7 @@ import { PickerModule } from '@ctrl/ngx-emoji-mart';
     // InfoSupportGroupComponent,
     // InfoDirectComponent,
     // InfoGroupComponent,
+    TruncatePipe
   ]
 })
 export class ConversationDetailPageModule {}

package/src/app/pages/conversation-detail/conversation-detail.page.html

@@ -122,7 +122,9 @@
                   [channelType]="channelType" 
                   [messages]="messages" 
                   [senderId]="loggedUser.uid"
-                  [baseLocation]="window?.location?.origin" 
+                  [baseLocation]="window?.location?.origin"
+                  [areVisibleCAR]="areVisibleCAR" 
+                  [supportMode]= "supportMode" 
                   [stylesMap]="styleMap"
                   (onBeforeMessageRender)="returnOnBeforeMessageRender($event)"
                   (onAfterMessageRender)="returnOnAfterMessageRender($event)"
@@ -176,7 +178,7 @@
             <app-message-text-area *ngIf="(openInfoConversation === false && isMobile === true) || (openInfoConversation === true && isMobile === false) || (openInfoConversation === false && isMobile === false)"
               [tagsCannedCount]="tagsCannedCount" 
               [areVisibleCAR]="areVisibleCAR" 
-              [support_mode]="support_mode"
+              [supportMode]="supportMode"
               [loggedUser]="loggedUser" 
               [conversationWith]="conversationWith" 
               [tagsCannedFilter]="tagsCannedFilter"

package/src/app/pages/conversation-detail/conversation-detail.page.ts

@@ -143,7 +143,7 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
   arrowkeyLocation = -1
   public_Key: any;
   areVisibleCAR: boolean;
-  support_mode: boolean;
+  supportMode: boolean;
   //SOUND
   setTimeoutSound: any;
   audio: any;
@@ -313,7 +313,6 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
       const conversations = this.conversationsHandlerService.conversations
       // console.log('[CONVS-DETAIL] conversations', conversations);
       this.conversation_count = conversations.length
-      this.logger.log('[CONVS-DETAIL] conversation_count', this.conversation_count)
     })
 
     this.conversationsHandlerService.conversationChanged.subscribe((conv) => {
@@ -321,7 +320,6 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
       const conversations = this.conversationsHandlerService.conversations
       // console.log('[CONVS-DETAIL] conversations', conversations);
       this.conversation_count = conversations.length
-      this.logger.log('[CONVS-DETAIL] conversation_count', this.conversation_count)
       if (conv && conv.sender !== this.loggedUser.uid) {
         this.logger.log('[CONVS-DETAIL] subscribe to BSConversationsChange data sender ', conv.sender)
         this.logger.log('[CONVS-DETAIL] subscribe to BSConversationsChange this.loggedUser.uid ', this.loggedUser.uid)
@@ -333,8 +331,8 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
           // ARE AT THE END
           this.updateConversationBadge()
         }
-        if (conv.uid === this.conversationWith) {
-          this.conversationAvatar = setConversationAvatar(conv.conversation_with, conv.conversation_with_fullname, conv.channel_type)
+        if(conv.uid && conv.uid === this.conversationWith){
+          this.conversationAvatar = setConversationAvatar(conv.conversation_with,conv.conversation_with_fullname,conv.channel_type)
         }
 
       }
@@ -354,15 +352,15 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
   }
 
   getOSCODE() {
-    this.support_mode = null
+    this.supportMode = null
     if (this.appConfigProvider.getConfig().supportMode === true || this.appConfigProvider.getConfig().supportMode === 'true') {
-      this.support_mode = true
+      this.supportMode = true
     } else if (this.appConfigProvider.getConfig().supportMode === false || this.appConfigProvider.getConfig().supportMode === 'false') {
-      this.support_mode = false
+      this.supportMode = false
     } else if (!this.appConfigProvider.getConfig().supportMode) {
-      this.support_mode = false
+      this.supportMode = false
     }
-    this.logger.log('[CONVS-DETAIL] AppConfigService getAppConfig support_mode', this.support_mode)
+    this.logger.log('[CONVS-DETAIL] AppConfigService getAppConfig supportMode', this.supportMode)
     this.public_Key = this.appConfigProvider.getConfig().t2y12PruGU9wUtEGzBJfolMIgK
     this.logger.log('[CONVS-DETAIL] AppConfigService getAppConfig public_Key', this.public_Key)
 
@@ -375,26 +373,17 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
           let car = key.split(':')
           if (car[1] === 'F') {
             this.areVisibleCAR = false
-            this.logger.log(
-              '[CONVS-DETAIL] PUBLIC-KEY - areVisibleCAR',
-              this.areVisibleCAR,
-            )
+            this.logger.log('[CONVS-DETAIL] PUBLIC-KEY - areVisibleCAR',this.areVisibleCAR)
           } else {
             this.areVisibleCAR = true
-            this.logger.log(
-              '[CONVS-DETAIL] PUBLIC-KEY - areVisibleCAR',
-              this.areVisibleCAR,
-            )
+            this.logger.log('[CONVS-DETAIL] PUBLIC-KEY - areVisibleCAR',this.areVisibleCAR)
           }
         }
       })
 
       if (!this.public_Key.includes('CAR')) {
         this.areVisibleCAR = false
-        this.logger.log(
-          '[CONVS-DETAIL] PUBLIC-KEY - areVisibleCAR',
-          this.areVisibleCAR,
-        )
+        this.logger.log('[CONVS-DETAIL] PUBLIC-KEY - areVisibleCAR',this.areVisibleCAR)
       }
     } else {
       this.areVisibleCAR = false
@@ -1127,7 +1116,7 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
       // ----------------------------------------------------------
       // DISPLAY CANNED RESPONSES if message.lastIndexOf("/")
       // ----------------------------------------------------------
-      if (this.areVisibleCAR && this.support_mode === true) {
+      if (this.areVisibleCAR && this.supportMode === true) {
         setTimeout(() => {
           if (this.conversationWith.startsWith('support-group')) {
             const pos = message.lastIndexOf('/')

package/src/app/pages/conversations-list/conversations-list.page.html

@@ -43,16 +43,17 @@
           <ion-label part="message-text" class="waiting-for-network-msg"> Waiting for network</ion-label>
         </ion-item>
         <!-- supportMode && -->
-        <ion-item  *ngIf="displayNewConvsItem && conversationType !=='archived'" class="ion-no-padding open-iframe-item">
+        <ion-item  *ngIf="displayNewConvsItem && conversationType !=='archived' && supportMode" class="ion-no-padding open-iframe-item">
           <div tabindex="0"></div>
           <!-- <ion-note class="pinned-project">
             {{ 'PINNED_PROJECT' | translate }}
           </ion-note> -->
      
-          <app-project-item style="width: 100%;" 
-          (openUnsevedConvsEvent)="openUnsevedConversationIframe($event)"  
-          (projectIdEvent)="getLastProjectId($event)">
-        </app-project-item>
+          <app-project-item
+            style="width: 100%;" 
+            (openUnsevedConvsEvent)="openUnsevedConversationIframe($event)"
+            (projectIdEvent)="getLastProjectId($event)">
+          </app-project-item>
         </ion-item>
 
       <span
@@ -66,10 +67,15 @@
         <!-- ---------------------------------- -->
         <!-- ACTIVE CONVERSATION LIST -->
         <!-- ---------------------------------- -->
-        <ion-list-conversations *ngIf="conversationType ==='active'" [uidConvSelected]="uidConvSelected"
-          [listConversations]="conversations" [stylesMap]="stylesMap" [translationMap]="translationMapConversation"
-          (onConversationSelected)=onConversationSelected($event) (onImageLoaded)="onImageLoaded($event)"
-          (onConversationLoaded)="onConversationLoaded($event)" (onCloseConversation)="onCloseConversation($event)" 
+        <ion-list-conversations *ngIf="conversationType ==='active'" 
+          [uidConvSelected]="uidConvSelected"
+          [listConversations]="conversations" 
+          [stylesMap]="stylesMap" 
+          [translationMap]="translationMapConversation"
+          (onConversationSelected)=onConversationSelected($event) 
+          (onImageLoaded)="onImageLoaded($event)"
+          (onConversationLoaded)="onConversationLoaded($event)" 
+          (onCloseConversation)="onCloseConversation($event)" 
           [archiveActionNotAllowed]="archiveActionNotAllowed"
           (onCloseAlert)="onCloseAlert($event)">
         </ion-list-conversations>
@@ -77,9 +83,12 @@
         <!-- ---------------------------------- -->
         <!-- ARCHIVED CONVERSATION LIST -->
         <!-- ---------------------------------- -->
-        <ion-list-conversations *ngIf="conversationType ==='archived'" [listConversations]="archivedConversations"
-          [stylesMap]="stylesMap" [translationMap]="translationMapConversation"
-          (onConversationSelected)=onConversationSelected($event) (onImageLoaded)="onImageLoaded($event)"
+        <ion-list-conversations *ngIf="conversationType ==='archived'" 
+          [listConversations]="archivedConversations"
+          [stylesMap]="stylesMap" 
+          [translationMap]="translationMapConversation"
+          (onConversationSelected)=onConversationSelected($event) 
+          (onImageLoaded)="onImageLoaded($event)"
           (onConversationLoaded)="onConversationLoaded($event)">
         </ion-list-conversations>
       </ng-template>