@chat21/chat21-web-widget 5.0.71-rc.1 → 5.0.71-rc.2

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # chat21-web-widget ver 5.0
 
+### 5.0.71-rc.2
+- added: hiddenMessage tiledesk property to start a conversation with an hidden info message
+- added: ability to listen from parent message and start a new Conversation with an hidden intentName info message
+- changed: minor UI fix carousel component
+
 ### 5.0.71-rc.1
 - added: ability to start conversation from an intent hiddenMessage name
 - added: postMessage to notice parent the current message

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@chat21/chat21-web-widget",
   "author": "Tiledesk SRL",
-  "version": "5.0.71-rc.1",
+  "version": "5.0.71-rc.2",
   "license": "MIT",
   "homepage": "https://www.tiledesk.com",
   "repository": {

package/src/app/app.component.ts

@@ -690,42 +690,6 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
     }
     // ========= end:: START UI ============//
 
-    // private openNewConversation() {
-    //     this.logger.debug('[APP-COMP] openNewConversation in APP COMPONENT');
-    //     this.g.newConversationStart = true;
-    //     // controllo i dipartimenti se sono 1 o 2 seleziono dipartimento e nascondo modale dipartimento
-    //     // altrimenti mostro modale dipartimenti
-    //     const preChatForm = this.g.preChatForm;
-    //     const attributes = this.g.attributes;
-    //     const departments = this.g.departments;
-    //     // that.g.wdLog(['departments: ', departments, departments.length);
-    //     if (preChatForm && (!attributes || !attributes.userFullname || !attributes.userEmail)) {
-    //         // if (preChatForm && (!attributes.userFullname || !attributes.userEmail)) {
-    //         this.isOpenConversation = false;
-    //         this.g.setParameter('isOpenPrechatForm', true);
-    //         // this.settingsSaverService.setVariable('isOpenPrechatForm', true);
-    //         this.isOpenSelectionDepartment = false;
-    //         if (departments && departments.length > 1 && this.g.departmentID == null) {
-    //             this.isOpenSelectionDepartment = true;
-    //         }
-    //     } else {
-    //         // this.g.isOpenPrechatForm = false;
-    //         this.g.setParameter('isOpenPrechatForm', false);
-    //         // this.settingsSaverService.setVariable('isOpenPrechatForm', false);
-    //         this.isOpenConversation = false;
-    //         this.isOpenSelectionDepartment = false;
-    //         if (departments && departments.length > 1 && this.g.departmentID == null) {
-    //             this.isOpenSelectionDepartment = true;
-    //         } else {
-    //             this.isOpenConversation = true;
-    //         }
-    //     }
-
-    //     this.logger.debug('[APP-COMP] isOpenPrechatForm', this.g.isOpenPrechatForm, ' isOpenSelectionDepartment:', this.isOpenSelectionDepartment);
-    //     if (this.g.isOpenPrechatForm === false && this.isOpenSelectionDepartment === false) {
-    //         this.startNewConversation();
-    //     }
-    // }
 
     /**
      * genero un nuovo conversationWith
@@ -749,21 +713,9 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
         this.logger.debug('[APP-COMP]  recipientId: ', this.g.recipientId);
         this.isConversationArchived = false;
         
-        if(window.location.search && window.location.search.substring(1).split('&').find((param => param.includes('tiledesk_hiddenMessage')))){
-            let hiddenMessage = window.location.search.substring(1).split('&').find((param => param.includes('tiledesk_hiddenMessage'))).split('=')[1]
-            let participant = window.location.search.substring(1).split('&').find((param => param.includes('tiledesk_participants'))).split('=')[1]
-            this.logger.debug('[APP-COMP] startNewConversation ', window.location.search.substring(1).split('&').find((param => param.includes('tiledesk_hiddenMessage'))))
-            let message: any = {}
-            message.attributes = { subtype: 'info', ...this.g.attributes}
-            message.userAgent = this.g.attributes['client']
-            message.request_id = newConvId
-            message.sourcePage = this.g.attributes['sourcePage']
-            message.language = this.g.lang
-            message.text = '/'+ hiddenMessage
-            message.participants = [ participant ]
-            message.departmentid = this.g.attributes.departmentId
-            // this.sendMessage(message)
-            this.tiledeskRequestsService.sendMessageToRequest(newConvId, this.g.tiledeskToken, message)
+        /** allow to start conversation with an hidden message (without publishing 'new_conversation' event) */
+        if(this.g.hiddenMessage){
+            this.onNewConversationWithMessage(this.g.hiddenMessage)
             return;
         }
 
@@ -1431,9 +1383,9 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
             };
 
             /** set state reinit */
-            windowContext['tiledesk'].startConversation = function () {
+            windowContext['tiledesk'].startConversation = function (text: string) {
                 ngZone.run(() => {
-                    windowContext['tiledesk']['angularcomponent'].component.onNewConversation();
+                    windowContext['tiledesk']['angularcomponent'].component.onNewConversation(text);
                 });
             };
 
@@ -1763,8 +1715,9 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
      * carico conversazione - stack 1
      * home - stack 0
      */
-    onNewConversation() {
+    onNewConversation(text?: string) {
         this.logger.debug('[APP-COMP] returnNewConversation in APP COMPONENT');
+        if(text) this.g.setParameter('hiddenMessage', text);
         this.g.newConversationStart = true;
         // controllo i dipartimenti se sono 1 o 2 seleziono dipartimento e nascondo modale dipartimento
         // altrimenti mostro modale dipartimenti
@@ -1801,6 +1754,28 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
         }
     }
 
+
+    onNewConversationWithMessage(text: string, subType: string = 'info'){
+        this.logger.log('[APP-COMP] onNewConversationWithMessage in APP COMPONENT', text);
+
+        const newConvId = this.generateNewUidConversation();
+        this.g.setParameter('recipientId', newConvId);
+        this.appStorageService.setItem('recipientId', newConvId)
+
+        let message: any = {}
+        message.attributes = { subtype: subType, ...this.g.attributes}
+        message.userAgent = this.g.attributes['client']
+        message.request_id = newConvId
+        message.sourcePage = this.g.attributes['sourcePage']
+        message.language = this.g.lang
+        message.text = '/'+ text
+        message.participants = this.g.participants
+        message.departmentid = this.g.attributes.departmentId
+        // this.sendMessage(message)
+        this.tiledeskRequestsService.sendMessageToRequest(newConvId, this.g.tiledeskToken, message)
+        return;
+    }
+
     /**
      * MODAL HOME:
      * open all-conversation

package/src/app/component/conversation-detail/conversation-content/conversation-content.component.html

@@ -63,7 +63,7 @@
                             <!-- [ngClass]="{'slide-in-left': !isFirstMessage(message?.sender, i)}"  -->
                             <chat-bubble-message class="messages msg_receive"
                               [ngClass]="{'slide-in-left': false}"
-                              [class.no-background]="(isImage(message) || isFrame(message)) && ((message?.text && message?.text.trim() === '') || !message?.text)"  
+                              [class.no-background]="(isImage(message) || isFrame(message) || isCarousel(message)) && ((message?.text && message?.text.trim() === '') || !message?.text)"  
                               [class.emoticon]="isEmojii(message?.text)"
                               [style.margin-left]="isSameSender(message?.sender, i)? '50px': null"
                               [ngStyle]="{'background': stylesMap.get('bubbleReceivedBackground'), 'color': stylesMap.get('bubbleReceivedTextColor')}"
@@ -109,8 +109,7 @@
                           </div>
 
                           <!-- carousel -->
-                          <div *ngIf="message?.attributes && message?.attributes?.attachment 
-                                        && message?.attributes?.attachment?.gallery" [ngClass]="{'slide-in-left': false}" class="carousel_container">
+                          <div *ngIf="isCarousel(message)" [ngClass]="{'slide-in-left': false}" class="carousel_container">
                             <chat-carousel class="carousel_container"
                               [message]="message"
                               [isConversationArchived]="isConversationArchived"

package/src/app/component/conversation-detail/conversation-content/conversation-content.component.ts

@@ -6,7 +6,7 @@ import { UploadService } from 'src/chat21-core/providers/abstract/upload.service
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 import { MESSAGE_TYPE_INFO, MESSAGE_TYPE_MINE, MESSAGE_TYPE_OTHERS } from 'src/chat21-core/utils/constants';
 import { isPopupUrl, popupUrl } from 'src/chat21-core/utils/utils';
-import { isEmojii, isFirstMessage, isFrame, isImage, isInfo, isLastMessage, isMine, isSameSender, messageType } from 'src/chat21-core/utils/utils-message';
+import { isCarousel, isEmojii, isFirstMessage, isFrame, isImage, isInfo, isLastMessage, isMine, isSameSender, messageType } from 'src/chat21-core/utils/utils-message';
 
 @Component({
   selector: 'chat-conversation-content',
@@ -45,6 +45,7 @@ export class ConversationContentComponent implements OnInit {
   // ========= begin:: dichiarazione funzioni ======= //
   isPopupUrl = isPopupUrl;
   popupUrl = popupUrl;
+  isCarousel = isCarousel;
   // ========= end:: dichiarazione funzioni ======= //
 
   // ========== begin:: set icon status message ======= //

package/src/app/component/message/carousel/carousel.component.scss

@@ -129,6 +129,7 @@
     background: transparent!important;
     display: block;
     max-width: 100% !important;
+    width: 100%;
     border-radius: 8px 8px 0px 0px;
     
 }

package/src/app/component/message/carousel/carousel.component.ts

@@ -1,5 +1,6 @@
 import { Component, ElementRef, EventEmitter, Input, OnInit, Output, SimpleChange, SimpleChanges, ViewChildren } from '@angular/core';
 import { MessageModel } from 'src/chat21-core/models/message';
+import { isCarousel } from 'src/chat21-core/utils/utils-message';
 
 @Component({
   selector: 'chat-carousel',
@@ -34,7 +35,7 @@ export class CarouselComponent implements OnInit{
   constructor(private elementRef: ElementRef) { }
 
   ngOnInit() {
-    console.log('[CAROUSEL-MESSAGE] hello', this.message)
+    console.log('[CAROUSEL-MESSAGE] hello', this.message, isCarousel(this.message))
 
     
     this.wrapper = this.elementRef.nativeElement.querySelector('.wrapper')
@@ -95,7 +96,7 @@ export class CarouselComponent implements OnInit{
     let gap = 17
     let cardPerView = Math.round(this.carousel.offsetWidth / width);
 
-    console.log('go to -->', direction, width, this.firstCardWidth, cardPerView, this.carousel.offsetWidth)
+    // console.log('go to -->', direction, width, this.firstCardWidth, cardPerView, this.carousel.offsetWidth)
 
     // this.carousel.scrollLeft += direction == "previous" ? -(width+gap) : width+gap;
     this.carousel.scrollLeft += direction == "previous" ? -width : width;
@@ -110,7 +111,6 @@ export class CarouselComponent implements OnInit{
   actionButtonClick(ev, button, index){
     this.button = button
     this.type = button.type
-    console.log('buttonnnnnnn', ev, button)
     if ( button && ((button.action && button.action !== '') || (button.link && button.link !== '') || button.text !== '' )) {
       
       //set clicked button as the active one

package/src/app/providers/global-settings.service.ts

@@ -1774,6 +1774,11 @@ export class GlobalSettingsService {
         if (TEMP) {
             globals.disconnetTime = stringToNumber(TEMP);
         }
+
+        TEMP = getParameterByName(windowContext, 'tiledesk_hiddenMessage');
+        if (TEMP) {
+            globals.hiddenMessage = TEMP;
+        }
         
     }
 

package/src/app/utils/globals.ts

@@ -218,6 +218,8 @@ export class Globals {
    onPageChangeVisibilityDesktop: 'open' | 'close' | 'last'; // *******  new ********
    displayOnMobile: boolean; // *******  new ********
    displayOnDesktop: boolean; // *******  new ********
+
+   hiddenMessage: string; // *******  new ********
   constructor(
   ) { }
 
@@ -414,6 +416,8 @@ export class Globals {
     this.displayOnMobile = true
     this.onPageChangeVisibilityMobile = 'close'
 
+    /**set an hidden message to show when conversation starts */
+    this.hiddenMessage = null
 
     // ============ END: SET EXTERNAL PARAMETERS ==============//
 

package/src/assets/js/chat21client.js

@@ -546,7 +546,7 @@ class Chat21Client {
             if (this.log) {
                 console.log("this.on_message_handler already subscribed. Reconnected num", this.reconnections)
             }
-            callbsubscribedCallbackack();
+            subscribedCallback();
             return
         }
         this.subscribeToMyConversations(() => {

package/src/assets/twp/chatbot-panel.html

@@ -415,6 +415,13 @@
             // 	window.Tiledesk('show')
             // }
         });
+
+        window.addEventListener('message', (event_data)=> {
+            if(event_data && event_data.data && event_data.data.action === 'restart'){
+                window.Tiledesk('startConversation', event_data.data.intentName)
+            }
+        })
+
     </script>
 
     <script type="application/javascript">

package/src/chat21-core/utils/utils-message.ts

@@ -10,6 +10,14 @@ import {
     TYPE_SUPPORT_GROUP
 } from './constants';
 
+/** */
+export function isCarousel(message: any) {
+  if (message && message.type && message.type === 'gallery' && message?.attributes && message?.attributes?.attachment && message?.attributes?.attachment?.gallery ) {
+    return true;
+  }
+  return false;
+}
+
 /** */
 export function isImage(message: any) {
   if (message && message.type && message.type === 'image' && message.metadata && message.metadata.src) {