@chat21/chat21-ionic 3.0.64 → 3.0.65-rc1

package/CHANGELOG.md

@@ -1,8 +1,22 @@
 # chat21-ionic ver 3.0
 
-### 3.0.64
+### 3.0.65-rc.1 - LATEST
+- added: improves chat performance by caching conversations
+- added: Displays balloon messages with a light orange background for "internal notes" type message
+- added: the html component
+- bug-fixed: if archive conversation and do a refresh, url not change from active to archived
+- bug-fixed: truncate sender_fullname in conversation-list and conversation-detail header components
+- bug-fixed: on conversation removed, update local conversations on storage	
+
+### 3.0.64 IN PROD
 - 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
 
+### 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
 
@@ -19,7 +33,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_amazon_prod.sh

@@ -15,8 +15,9 @@ cp -p src/manifest.json platforms/browser/www/
 cp -p src/chat-config.json platforms/browser/www/
 
 cd platforms/browser/www
-aws s3 sync . s3://tiledesk-console/v2/chat/
+# aws s3 sync . s3://tiledesk-console/v2/chat/
 # aws s3 sync . s3://tiledesk-console/v2/chat/$version/
+aws s3 sync . s3://tiledesk-console/v2/chat/latest/
 cd ../../../
 # aws cloudfront create-invalidation --distribution-id E36UIP90GOSFPM --paths "/*"
 

package/deploy_pre.sh

@@ -1,11 +1,44 @@
+# environment=$(< src/utils/constants.ts)
+# start="CURR_VER_PROD = '0."
+# end="'"
+# one=${environment#*$start}
+# build=${one%%$end*} #two=${one%,*} -> %% prendo la prima istanza; % prendo la seconda
+# NEW_BUILD=$(($build + 1))
+# sed -i -e "s/$start$build/$start$NEW_BUILD/g" src/utils/constants.ts
+
 #npm version prerelease --preid=beta
 version=`node -e 'console.log(require("./package.json").version)'`
 echo "version $version"
 
-if [ "$version" != "" ]; then
-    git tag -a "v$version" -m "`git log -1 --format=%s`"
-    echo "Created a new tag, v$version"
-    git push --tags
-    npm publish
-fi
+URL_VER=${version//[.]//}
+echo 'URL_VER: ---->'$URL_VER
+
+# if [ "$version" != "" ]; then
+#     git tag -a "v$version" -m "`git log -1 --format=%s`"
+#     echo "Created a new tag, v$version"
+#     git push --tags
+#     npm publish
+# fi
+
+sed -i -e "s/$URL_VER/g" src/utils/constants.ts
+
+# ng build --prod --base-href /$NEW_BUILD/
+#ionic cordova build browser --prod
+
+ionic cordova platform add browser --save
+#ionic cordova build browser --prod --release
+ionic cordova build --env=pre browser #--prod  --verbose
+
+cp -p src/firebase-messaging-sw.js platforms/browser/www/
+cp -p src/manifest.json platforms/browser/www/
+cp -p src/chat-config.json platforms/browser/www/
+
+cd platforms/browser/www
+aws s3 sync . s3://tiledesk-dashboard-pre/chat-ionic5/$version/
+aws s3 sync . s3://tiledesk-dashboard-pre/chat-ionic5/
+cd ../../../
+
+#aws cloudfront create-invalidation --distribution-id E2DTAKWHWQ7C3J --paths "/*"
 
+echo new version deployed on s3://tiledesk-dashboard-pre/chat-ionic5/$version/
+echo available on https://s3.eu-west-1.amazonaws.com/tiledesk-dashboard-pre/chat-ionic5/$version/index.html

package/deploy_prod.sh

@@ -2,6 +2,9 @@
 version=`node -e 'console.log(require("./package.json").version)'`
 echo "version $version"
 
+URL_VER=${version//[.]//}
+echo 'URL_VER: ---->'$URL_VER
+
 if [ "$version" != "" ]; then
     git tag -a "$version" -m "`git log -1 --format=%s`"
     echo "Created a new tag, $version"

package/package.json

@@ -1,8 +1,13 @@
 {
     "name": "@chat21/chat21-ionic",
-    "version": "3.0.64",
     "author": "Tiledesk SRL",
+    "version": "3.0.65-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/publiccode.yml

@@ -0,0 +1,110 @@
+# This repository adheres to the publiccode.yml standard by including this 
+# metadata file that makes public software easily discoverable.
+# More info at https://github.com/italia/publiccode.yml
+
+publiccodeYmlVersion: '0.2'
+categories:
+  - customer-service-and-support
+  - communications
+  - marketing
+  - mobile-marketing
+description:
+  it:
+    apiDocumentation: 'https://developer.tiledesk.com/apis/rest-api'
+    documentation: 'https://gethelp.tiledesk.com'
+    features:
+      - live chat widget
+      - chatbot
+      - 'integration with DialogFlow, Rasa and all major AI solutions'
+      - ticketing
+      - multi-project management
+      - SLAs setting
+      - 'smart assignment of the queues '
+      - seamless conversation
+      - dashboard
+      - knowledge base
+      - mobile apps
+    genericName: Live chat with integrated chatbots
+    longDescription: |
+      To have fully satisfied customers is complex. Conversation’s actors
+      (chatbots and humans) should handoff to each other many times during a
+      chat to address customers needs. 
+
+
+      Tiledesk provides a solution **orchestrating instant, asynchronous and
+      multichannel communication among all stakeholders of a typical
+      conversational architecture**: chatbots, support operators, end users,
+      colleagues, applications, etc.  
+
+
+      **Main Features**: 
+
+
+      - Live Chat Widget with full multichannel experience on Web and Mobile; 
+
+      - Resolution Bot to automate customer support; 
+
+      - Easy Integration with all major AI-platforms, cloud and Open source,
+      from DialogFlow to RASA; 
+
+      - Ticketing Management system fully integrated into the platform and
+      instant conversation flow; 
+
+      - Team Organization with multi-project management, SLAs setting, smart
+      assignment of the 
+       queues, departments organization and much more; 
+      - Seamless conversation to “jump” between different channels in a
+      transparent way for end 
+       customers and agents; 
+      - Chat Tools like typing indicator, off-line access, delivery receipts,
+      contact list and much more; 
+
+      - Dashboard with real time analytics; 
+
+      - Knowledge base.
+
+           
+
+      Tiledesk is an **open source **project, made with passion in Salento
+      (Southern Italy).
+    shortDescription: |-
+      Tiledesk delivers scalable customer service to your mobile apps and your
+      website. It is a conversational platform that connects chatbots and
+      humans 
+developmentStatus: stable
+it:
+  conforme:
+    gdpr: false
+    lineeGuidaDesign: false
+    misureMinimeSicurezza: false
+    modelloInteroperabilita: false
+  countryExtensionVersion: '0.2'
+  piattaforme:
+    anpr: false
+    cie: false
+    pagopa: false
+    spid: false
+landingURL: 'https://tiledesk.com/install'
+legal:
+  license: AGPL-3.0-only
+localisation:
+  availableLanguages:
+    - it
+    - en
+    - es
+    - fr
+    - pt
+    - de
+    - ru
+    - tr
+  localisationReady: true
+maintenance:
+  contacts:
+    - name: Andrea Sponziello
+  type: internal
+name: Tiledesk
+platforms:
+  - web
+releaseDate: '2022-06-15'
+softwareType: standalone/web
+url: 'https://github.com/Tiledesk/tiledesk-deployment'

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,9 +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) {
@@ -948,32 +918,31 @@ 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  ');
       }
     });
+
+    this.conversationsHandlerService.conversationRemoved.subscribe((conversation: ConversationModel) => {
+      this.logger.log('[APP-COMP] ***** conversationRemoved *****', conversation);
+      // that.conversationsChanged(conversations);
+      if(conversation)  this.updateConversationsOnStorage();
+    });
   }
 
   /**
@@ -1034,9 +1003,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;
@@ -1119,6 +1087,7 @@ export class AppComponent implements OnInit {
 
 
     if (hasClickedLogout === true) {
+      this.appStorageService.removeItem('conversations')
       // ----------------------------------------------
       // PUSH NOTIFICATIONS
       // ----------------------------------------------
@@ -1225,14 +1194,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;
@@ -1243,6 +1211,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">