@chat21/chat21-ionic 3.0.63 → 3.0.64-rc1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # chat21-ionic ver 3.0
 
+### 3.0.64-rc1
+- Fixes the bug: in the conversation list, for the direct convesations, the name of the requester changes according to the order of arrival of the conversations
+- Displays balloon messages with a light orange background for "internal notes" type message
+- Adds the html component
+- Improves chat performance by caching conversations
+
 ### 3.0.63
 - Deploys in production
 
@@ -16,7 +22,7 @@
 - Fixes the bug: images that are not in the database cannot be downloaded
 - Adds default chat color to emojis picker tabs
 - Fixes the bug: the selected conversation is undefined
-- Fixes the bug: in the conversation list, the name of the requester changes according to the order of arrival of the conversations
+- Fixes the bug: in the conversation list, for the support convesations, the name of the requester changes according to the order of arrival of the conversations
 
 ### 3.0.62.3
 - Fixes the bug: the method setTyping fired twice after that a message is sent

package/deploy_prod.sh

@@ -27,16 +27,16 @@ cp -p config.xml platforms/browser/www/
 cd platforms/browser/www
 aws s3 sync . s3://tiledesk-console/v2/chat/
 aws s3 sync . s3://tiledesk-console/v2/chat/$version/
-cd ../../../
-# aws cloudfront create-invalidation --distribution-id E2DTAKWHWQ7C3J --paths "/*"
-
-# echo new version deployed on s3://tiledesk-dashboard/chat/$NEW_BUILD/
 echo new version deployed on s3://tiledesk-console/v2/chat/$version/
-# echo new version deployed on s3://tiledesk-console/v2/chat/
 echo available on https://console.tiledesk.com/v2/chat/$version/index.html
 echo available on https://console.tiledesk.com/v2/chat/index.html
 
 
+###### CHAT in prod under latest
+# cd platforms/browser/www
+# aws s3 sync . s3://tiledesk-console/v2/chat/latest
+# echo available on https://console.tiledesk.com/v2/chat/latest/index.html
+
 ###### CHAT-IONIC5
 # cd platforms/browser/www
 # #aws s3 sync . s3://tiledesk-dashboard/chat/

package/package.json

@@ -1,8 +1,13 @@
 {
     "name": "@chat21/chat21-ionic",
-    "version": "3.0.63",
     "author": "Tiledesk SRL",
+    "version": "3.0.64-rc1",
+    "license": "AGPL-3.0",
     "homepage": "https://tiledesk.com/",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/Tiledesk/chat21-ionic"
+    },
     "scripts": {
         "ng": "ng",
         "start": "ng serve",

package/src/app/app.component.ts

@@ -90,6 +90,7 @@ export class AppComponent implements OnInit {
   private setTimeoutSound: any;
   private isTabVisible: boolean = true;
   private tabTitle: string;
+  private setTimeoutConversationsEvent: any;
   private logger: LoggerService = LoggerInstance.getInstance();
   public toastMsgErrorWhileUnsubscribingFromNotifications: string;
   public toastMsgCloseToast: string;
@@ -341,8 +342,6 @@ export class AppComponent implements OnInit {
 
       if (event && event.data && event.data.action && event.data.parameter) {
         if (event.data.action === 'openJoinConversationModal') {
-          // console.log("[APP-COMP] message event action ", event.data.action);
-          // console.log("[APP-COMP] message event parameter ", event.data.parameter);
           this.presentAlertConfirmJoinRequest(event.data.parameter, event.data.calledBy)
         }
       }
@@ -377,7 +376,6 @@ export class AppComponent implements OnInit {
 
   async presentAlertConfirmJoinRequest(requestid, calledby) {
     var iframeWin = <HTMLIFrameElement>document.getElementById("unassigned-convs-iframe")
-    // console.log("[APP-COMP] message event iframeWin ", iframeWin);
 
     const isIFrame = (input: HTMLElement | null): input is HTMLIFrameElement =>
       input !== null && input.tagName === 'IFRAME';
@@ -395,12 +393,10 @@ export class AppComponent implements OnInit {
           role: 'cancel',
           cssClass: 'secondary',
           handler: (blah) => {
-            // console.log('Confirm Cancel: blah', blah);
           }
         }, {
           text: 'Ok',
           handler: () => {
-            // console.log('Confirm Okay');
 
             if (isIFrame(iframeWin) && iframeWin.contentWindow) {
               const msg = { action: "joinConversation", parameter: requestid, calledBy: calledby }
@@ -420,14 +416,12 @@ export class AppComponent implements OnInit {
   signInWithCustomToken(token) {
     // this.isOnline = false;
     this.logger.log('[APP-COMP] SIGNINWITHCUSTOMTOKEN  token', token)
-    this.tiledeskAuthService.signInWithCustomToken(token)
-      .then((user: any) => {
+    this.tiledeskAuthService.signInWithCustomToken(token).then((user: any) => {
         this.logger.log('[APP-COMP] SIGNINWITHCUSTOMTOKEN AUTLOGIN user', user)
         this.messagingAuthService.createCustomToken(token)
-      })
-      .catch(error => {
+    }).catch(error => {
         this.logger.error('[APP-COMP] SIGNINWITHCUSTOMTOKEN error::', error)
-      })
+    })
   }
 
   /** */
@@ -577,16 +571,6 @@ export class AppComponent implements OnInit {
       this.translate.use('en');
     }
 
-    // this.logger.debug('[APP-COMP] navigator.language: ', navigator.language);
-    // let language;
-    // if (navigator.language.indexOf('-') !== -1) {
-    //   language = navigator.language.substring(0, navigator.language.indexOf('-'));
-    // } else if (navigator.language.indexOf('_') !== -1) {
-    //   language = navigator.language.substring(0, navigator.language.indexOf('_'));
-    // } else {
-    //   language = navigator.language;
-    // }
-    // this.translate.use(language);
   }
 
 
@@ -661,7 +645,6 @@ export class AppComponent implements OnInit {
   updateStoredCurrentUser() {
     const storedCurrentUser = this.appStorageService.getItem('currentUser')
     const storedDshbrdUser = localStorage.getItem('user')
-
     this.logger.log('[APP-COMP] updateStoredCurrentUser - stored currentUser', storedCurrentUser)
     this.logger.log('[APP-COMP] updateStoredCurrentUser - stored dshbrdUser', storedDshbrdUser)
     if ((storedCurrentUser && storedCurrentUser !== 'undefined') && (storedDshbrdUser && storedDshbrdUser !== 'undefined')) {
@@ -678,7 +661,6 @@ export class AppComponent implements OnInit {
           this.logger.log('[APP-COMP] updateStoredCurrentUser - currentUser.color ', currentUser.color)
           this.logger.log('[APP-COMP] updateStoredCurrentUser - dshbrdUser.fillColour ', dshbrdUser.fillColour)
         }
-
         if (currentUser.firstname !== dshbrdUser.firstname) {
           this.logger.log('[APP-COMP] updateStoredCurrentUser - currentUser.firstname !== dshbrdUser.firstname')
           this.logger.log('[APP-COMP] updateStoredCurrentUser - currentUser.firstname ', currentUser.firstname)
@@ -689,7 +671,6 @@ export class AppComponent implements OnInit {
           this.logger.log('[APP-COMP] updateStoredCurrentUser - currentUser.firstname ', currentUser.firstname)
           this.logger.log('[APP-COMP] updateStoredCurrentUser - dshbrdUser.firstname ', dshbrdUser.firstname)
         }
-
         if (currentUser.lastname !== dshbrdUser.lastname) {
           this.logger.log('[APP-COMP] updateStoredCurrentUser - currentUser.lastname !== dshbrdUser.lastname')
           this.logger.log('[APP-COMP] updateStoredCurrentUser - currentUser.lastname ', currentUser.lastname)
@@ -700,7 +681,6 @@ export class AppComponent implements OnInit {
           this.logger.log('[APP-COMP] updateStoredCurrentUser - currentUser.lastname ', currentUser.lastname)
           this.logger.log('[APP-COMP] updateStoredCurrentUser - dshbrdUser.lastname ', dshbrdUser.lastname)
         }
-
         if (currentUser.avatar !== dshbrdUser.fullname_initial) {
           this.logger.log('[APP-COMP] updateStoredCurrentUser - currentUser.avatar !== dshbrdUser.fullname_initial')
           this.logger.log('[APP-COMP] updateStoredCurrentUser - currentUser.avatar ', currentUser.avatar)
@@ -711,7 +691,6 @@ export class AppComponent implements OnInit {
           this.logger.log('[APP-COMP] updateStoredCurrentUser - currentUser.avatar ', currentUser.avatar)
           this.logger.log('[APP-COMP] updateStoredCurrentUser - dshbrdUser.fullname_initial ', dshbrdUser.fullname_initial)
         }
-
         let fullname = ""
         if (dshbrdUser.firstname && !dshbrdUser.lastname) {
           fullname = dshbrdUser.firstname
@@ -719,7 +698,6 @@ export class AppComponent implements OnInit {
           fullname = dshbrdUser.firstname + ' ' + dshbrdUser.lastname
           this.logger.log('[APP-COMP] updateStoredCurrentUser - fullname ', fullname)
         }
-
         if (fullname !== currentUser.fullname) {
           this.logger.log('[APP-COMP] updateStoredCurrentUser - currentUser.fullname !== dshbrdUser.fullname ')
           this.logger.log('[APP-COMP] updateStoredCurrentUser - currentUser.fullname  ', fullname)
@@ -730,7 +708,6 @@ export class AppComponent implements OnInit {
           this.logger.log('[APP-COMP] updateStoredCurrentUser - currentUser.fullname  ', fullname)
           this.logger.log('[APP-COMP] updateStoredCurrentUser - dshbrdUser.fullname ', currentUser.fullname)
         }
-
         this.appStorageService.setItem('currentUser', JSON.stringify(currentUser));
         this.tiledeskAuthService.setCurrentUser(currentUser);
       }
@@ -846,13 +823,10 @@ export class AppComponent implements OnInit {
   }
 
   private initAudio() {
-    // console.log('HERE IS initAudio ')
     // SET AUDIO
     const href = window.location.href;
     const hrefArray = href.split('/#/');
     const chatBaseUrl = hrefArray[0]
-    // console.log('initAudio href', href)
-    // console.log('initAudio chatBaseUrl', chatBaseUrl)
 
     this.audio = new Audio();
     this.audio.src = chatBaseUrl + URL_SOUND_LIST_CONVERSATION;
@@ -862,7 +836,6 @@ export class AppComponent implements OnInit {
   private manageTabNotification() {
     if (!this.isTabVisible) {
       // TAB IS HIDDEN --> manage title and SOUND
-      // console.log('HERE IS manageTabNotification ')
       let badgeNewConverstionNumber = this.conversationsHandlerService.countIsNew()
       badgeNewConverstionNumber > 0 ? badgeNewConverstionNumber : badgeNewConverstionNumber = 1
       document.title = "(" + badgeNewConverstionNumber + ") " + this.tabTitle
@@ -881,7 +854,6 @@ export class AppComponent implements OnInit {
   }
 
   soundMessage() {
-    // console.log('HERE IS soundMessage ')
     const that = this;
     // this.audio = new Audio();
     // // this.audio.src = '/assets/sounds/pling.mp3';
@@ -917,11 +889,7 @@ export class AppComponent implements OnInit {
       return;
     }
 
-    this.BSAuthStateChangedSubscriptionRef = this.messagingAuthService.BSAuthStateChanged
-
-      // .pipe(takeUntil(this.unsubscribe$))
-      .pipe(filter((state) => state !== null))
-      .subscribe((state: any) => {
+    this.BSAuthStateChangedSubscriptionRef = this.messagingAuthService.BSAuthStateChanged.pipe(filter((state) => state !== null)).subscribe((state: any) => {
         this.logger.log('initialize FROM [APP-COMP] - [APP-COMP] ***** BSAuthStateChanged  state', state);
 
         if (state && state === AUTH_STATE_ONLINE) {
@@ -950,30 +918,24 @@ export class AppComponent implements OnInit {
 
 
     this.conversationsHandlerService.conversationAdded.subscribe((conversation: ConversationModel) => {
-      // this.logger.log('[APP-COMP] ***** conversationsAdded *****', conversation);
+      this.logger.log('[APP-COMP] ***** conversationsAdded *****', conversation);
       // that.conversationsChanged(conversations);
       if (conversation && conversation.is_new === true) {
         this.manageTabNotification()
+        this.updateConversationsOnStorage()
       }
     });
 
     this.conversationsHandlerService.conversationChanged.subscribe((conversation: ConversationModel) => {
-
       // console.log('[APP-COMP] ***** subscribeConversationChanged conversation: ', conversation);
-      let currentUser = null
-      const storedCurrentUser = this.appStorageService.getItem('currentUser')
-      if (storedCurrentUser && storedCurrentUser !== 'undefined') {
-        currentUser = JSON.parse(storedCurrentUser);
+      if(conversation)  this.updateConversationsOnStorage();
+      const currentUser = this.tiledeskAuthService.getCurrentUser()
+      if (currentUser && currentUser !== null) {
         this.logger.log('[APP-COMP] ***** subscribeConversationChanged currentUser: ', currentUser);
-
-        if (currentUser) {
-          this.logger.log('[APP-COMP] ***** subscribeConversationChanged current_user uid: ', currentUser.uid);
-          if (conversation && conversation.sender !== currentUser.uid) {
-            this.manageTabNotification();
-          }
+        if (conversation && conversation.sender !== currentUser.uid) {
+          this.manageTabNotification();
         }
-      } else {
-        this.logger.error('[APP-COMP] ***** subscribeConversationChanged currentUser nor found in storage  ');
+
       }
     });
   }
@@ -1036,9 +998,8 @@ export class AppComponent implements OnInit {
 
   goOffLine = () => {
     this.logger.log('[APP-COMP] - GO-OFFLINE');
-    const supportmode = this.appConfigProvider.getConfig().supportMode;
-    this.logger.log('[APP-COMP] - GO-OFFINE - supportmode ', supportmode);
-    if (supportmode === true) {
+    this.logger.log('[APP-COMP] - GO-OFFINE - supportmode ', this.SUPPORT_MODE);
+    if (this.SUPPORT_MODE === true) {
       this.webSocketClose()
     }
     // this.isOnline = false;
@@ -1121,6 +1082,7 @@ export class AppComponent implements OnInit {
 
 
     if (hasClickedLogout === true) {
+      this.appStorageService.removeItem('conversations')
       // ----------------------------------------------
       // PUSH NOTIFICATIONS
       // ----------------------------------------------
@@ -1227,14 +1189,13 @@ export class AppComponent implements OnInit {
     this.logger.log('[APP-COMP] initConversationsHandler ------------->', userId, this.tenant);
     // 1 - init chatConversationsHandler and  archviedConversationsHandler
     this.conversationsHandlerService.initialize(this.tenant, userId, translationMap);
-
     // this.subscribeToConvs()
-    this.conversationsHandlerService.subscribeToConversations(() => {
-      this.logger.log('[APP-COMP] - CONVS - INIT CONV')
-
+    const lastTimestamp = this.manageStoredConversations()
+    this.logger.log('[APP-COMP] initConversationsHandler: get lastTimestamp', lastTimestamp)
+    this.conversationsHandlerService.subscribeToConversations(lastTimestamp, () => {
+      // this.logger.log('[APP-COMP] - CONVS - INIT CONV')
       const conversations = this.conversationsHandlerService.conversations;
       this.logger.info('initialize FROM [APP-COMP] - [APP-COMP]-CONVS - INIT CONV CONVS', conversations)
-
       // this.logger.printDebug('SubscribeToConversations (convs-list-page) - conversations')
       if (!conversations || conversations.length === 0) {
         // that.showPlaceholder = true;
@@ -1245,6 +1206,31 @@ export class AppComponent implements OnInit {
 
   }
 
+  // START: manage conversations on firebase upon last timestamp from stored conversations
+  private manageStoredConversations(): number {
+    let timestamp = 0
+    if(this.appStorageService.getItem('conversations')){
+      const conversationsStored = JSON.parse(this.appStorageService.getItem('conversations'))
+      if(conversationsStored && conversationsStored.length > 0) {
+        this.conversationsHandlerService.conversations = conversationsStored
+        timestamp = conversationsStored[0].timestamp
+        this.events.publish('appcompSubscribeToConvs:loadingIsActive', false);
+      }
+    }
+    return timestamp
+  }
+
+  private updateConversationsOnStorage(){
+    const that = this
+    //reset timer and save conversation on storage after 2s
+    clearTimeout(this.setTimeoutConversationsEvent);
+    this.setTimeoutConversationsEvent = setTimeout(() => {
+      this.logger.debug('[APP-COMP] updateConversationsOnStorage: reset timer and save conversations -> ', this.conversationsHandlerService.conversations.length)
+      that.appStorageService.setItem('conversations', JSON.stringify(this.conversationsHandlerService.conversations))
+    }, 2000);
+  }
+  // END: manage conversations on firebase upon last timestamp from stored conversations
+
   private initArchivedConversationsHandler(userId: string) {
     const keys = ['YOU'];
 

package/src/app/app.module.ts

@@ -278,6 +278,7 @@ const appInitializerFn = (appConfig: AppConfigProvider, logger: NGXLogger) => {
       serverLogLevel: NgxLoggerLevel.ERROR,
       timestampFormat: 'HH:mm:ss.SSS',
       enableSourceMaps: false,
+      disableFileDetails: true,
       colorScheme: ['purple', 'yellow', 'gray', 'gray', 'red', 'red', 'red'],
       serverLoggingUrl: 'https://tiledesk-server-pre.herokuapp.com/logs'
     }),

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

@@ -86,7 +86,7 @@
         [textColor]="'col-msg-sent'"
         [addAsCannedResponseTooltipText]="addAsCannedResponseTooltipText" 
         [areVisibleCAR]="areVisibleCAR"
-        [support_mode]="support_mode"
+        [supportMode]="supportMode"
         (onBeforeMessageRender)="returnOnBeforeMessageRender($event)"
         (onAfterMessageRender)="returnOnAfterMessageRender($event)" 
         (onImageRendered)="onImageRenderedFN($event)">
@@ -125,7 +125,7 @@
         [textColor]="'black'"
         [addAsCannedResponseTooltipText]="addAsCannedResponseTooltipText" 
         [areVisibleCAR]="areVisibleCAR"
-        [support_mode]="support_mode"
+        [supportMode]="supportMode"
         (onBeforeMessageRender)="returnOnBeforeMessageRender($event)"
         (onAfterMessageRender)="returnOnAfterMessageRender($event)" 
         (onImageRendered)="onImageRenderedFN($event)"

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

@@ -97,7 +97,6 @@ ion-item {
             background-color: var(--bubble-privateMsg);
             color: var(--bubble-privateMsgColor)
         }
-
     }
     .emoticon {
         background: unset !important;

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/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"