@chat21/chat21-ionic 3.0.63 → 3.0.65-rc1

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

@@ -22,12 +22,12 @@ export class IonConversationDetailComponent extends ConversationContentComponent
 
   @Input() senderId: string;
   @Input() channelType: string;
+  @Input() areVisibleCAR: boolean;
+  @Input() supportMode: boolean;
   @Output() onImageRendered = new EventEmitter<boolean>()
   @Output() onAddUploadingBubble = new EventEmitter<boolean>();
 
   public public_Key: any
-  public areVisibleCAR: boolean
-  public support_mode: boolean
   public uploadProgress: number = 100
   public fileType: any
   public browserLang: string;
@@ -64,48 +64,11 @@ export class IonConversationDetailComponent extends ConversationContentComponent
   }
 
   ngOnInit() {
-    this.getOSCODE()
     this.listenToUploadFileProgress();
     this.setMomentLocaleAndGetTranslation();
   }
 
-  getOSCODE() {
-    this.support_mode = null
-    if( this.appConfigProvider.getConfig().supportMode === true ||  this.appConfigProvider.getConfig().supportMode === 'true') {
-      this.support_mode = true
-    } else if ( this.appConfigProvider.getConfig().supportMode === false  ||  this.appConfigProvider.getConfig().supportMode === 'false') {
-      this.support_mode = false
-    } else if ( !this.appConfigProvider.getConfig().supportMode ) {
-      this.support_mode = false
-    }
-    this.public_Key = this.appConfigProvider.getConfig().t2y12PruGU9wUtEGzBJfolMIgK
-    this.logger.log('[CONVS-DETAIL][ION-CONVS-DETAIL] AppConfigService getAppConfig public_Key', this.public_Key)
-
-    if (this.public_Key) {
-      let keys = this.public_Key.split('-')
-      this.logger.log('[CONVS-DETAIL][ION-CONVS-DETAIL] PUBLIC-KEY - public_Key keys', keys)
-
-      keys.forEach((key) => {
-        if (key.includes('CAR')) {
-          let car = key.split(':')
-          if (car[1] === 'F') {
-            this.areVisibleCAR = false
-            this.logger.log('[CONVS-DETAIL][ION-CONVS-DETAIL] PUBLIC-KEY - areVisibleCAR', this.areVisibleCAR)
-          } else {
-            this.areVisibleCAR = true
-            this.logger.log('[CONVS-DETAIL][ION-CONVS-DETAIL] PUBLIC-KEY - areVisibleCAR', this.areVisibleCAR)
-          }
-        }
-      })
 
-      if (!this.public_Key.includes('CAR')) {
-        this.areVisibleCAR = false
-        // console.log('[CONVS-DETAIL][ION-CONVS-DETAIL] PUBLIC-KEY - areVisibleCAR', this.areVisibleCAR)
-      }
-    } else {
-      this.areVisibleCAR = false
-    }
-  }
 
   setMomentLocaleAndGetTranslation() {
     this.browserLang = this.translate.getBrowserLang();

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

@@ -18,13 +18,18 @@
 
     <!-- [width]="getMetadataSize(message.metadata).width" 
     [height]="getMetadataSize(message.metadata).height" -->
-    <chat-image *ngIf="isImage(message)" [metadata]="message.metadata" [width]="message.metadata.width"
-      [height]="message.metadata.height" (onImageRendered)="onImageRenderedFN($event)">
+    <chat-image *ngIf="isImage(message)" 
+      [metadata]="message.metadata" 
+      [width]="message.metadata.width"
+      [height]="message.metadata.height" 
+      (onImageRendered)="onImageRenderedFN($event)">
     </chat-image>
 
     <!-- [width]="getMetadataSize(message.metadata).width"  -->
     <!-- [height]="getMetadataSize(message.metadata).height"> -->
-    <chat-frame *ngIf="isFrame(message)" [metadata]="message.metadata" [width]="message.metadata.width"
+    <chat-frame *ngIf="isFrame(message)" 
+      [metadata]="message.metadata" 
+      [width]="message.metadata.width"
       [height]="message.metadata.height">
     </chat-frame>
 
@@ -42,13 +47,20 @@
         <span> {{message.timestamp | amCalendar }} </span>
       </ng-template> -->
 
-      <chat-text [text]="message?.text" [color]="textColor" [message]="message"
-      [class.chat-text-emoticon]="message?.emoticon"
+      <chat-text *ngIf="message?.type !=='html'"
+        [text]="message?.text" 
+        [color]="textColor" 
+        [message]="message"
+        [class.chat-text-emoticon]="message?.emoticon"
         (onBeforeMessageRender)="returnOnBeforeMessageRender($event)"
         (onAfterMessageRender)="returnOnAfterMessageRender($event)">
       </chat-text>
 
-      <ng-container *ngIf="areVisibleCAR && support_mode === true">
+      <chat-html *ngIf="message?.type==='html'"
+        [htmlText]="message?.text">
+      </chat-html>
+
+      <ng-container *ngIf="areVisibleCAR && supportMode">
         <ion-button shape="round" size="small" class="btn-add-msg-as-canned-response" ion-button fill="clear"
           (click)="presentCreateCannedResponseModal()" tooltip="{{addAsCannedResponseTooltipText}}"
           [options]="tooltipOptions" placement="bottom">

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/ion-list-conversations/ion-list-conversations.component.html

@@ -90,7 +90,7 @@
     <!-- <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_with truncate">{{conversation.conversation_with_fullname}}</div>
     <div class="conversation_message truncate-conv-msg" [ngClass]="{'truncate-on-desktop': !isApp}">
 
       <!-- -------------------------------------------------------------------------- -->

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"