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

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # 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
+- changed: carousel UI if image is not available
+
 ### 5.0.70 in PROD
 
 ### 5.0.70-rc.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@chat21/chat21-web-widget",
   "author": "Tiledesk SRL",
-  "version": "5.0.70",
+  "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
@@ -748,6 +712,13 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
         this.appStorageService.setItem('recipientId', newConvId)
         this.logger.debug('[APP-COMP]  recipientId: ', this.g.recipientId);
         this.isConversationArchived = false;
+        
+        /** allow to start conversation with an hidden message (without publishing 'new_conversation' event) */
+        if(this.g.hiddenMessage){
+            this.onNewConversationWithMessage(this.g.hiddenMessage)
+            return;
+        }
+
         this.triggerNewConversationEvent(newConvId);
     }
 
@@ -781,9 +752,12 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
         if (this.g.windowContext.window.location) {
             attributes['sourcePage'] = this.g.windowContext.window.location.href;
         }
-        if(this.g.windowContext.window.document){
+        if(this.g.windowContext.window.document) {
             attributes['sourceTitle'] = this.g.windowContext.window.document.title;
         }
+        // if(this.g.windowContext.window.document && this.g.windowContext.window.document.cookie) {
+        //     attributes['cookie'] = this.g.windowContext.window.document.cookie;
+        // }
         if (projectid) {
             attributes['projectId'] = projectid;
         }
@@ -1409,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);
                 });
             };
 
@@ -1741,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
@@ -1779,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/conversation.component.ts

@@ -504,7 +504,8 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
         '',
         '',
         false,
-        'text')
+        'text',
+        false)
     }
   }
 

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.html

@@ -8,9 +8,13 @@
         <!-- <div class="card" style="width: 17px;"></div> -->
         <div class="card" *ngFor="let card of gallery; let i = index">
             <div [style.opacity]="i+1 === activeElement? 1: 0.5">
-                <div class="card-image">
+                <div class="card-image" *ngIf="card?.preview?.src !== ''">
                     <img [src]="card?.preview?.src" alt="img" draggable="false">
                 </div>
+                <div class="card-image card-image-placeholder" *ngIf="card?.preview?.src == ''">
+                    <img src="assets/images/icons/no-image.svg" alt="img" draggable="false">
+                    <span>Image not available</span>
+                </div>
                 <div class="card-content">
                     <div class="card-title">{{card?.title}}</div>
                     <div class="card-description">{{card?.description}}</div>

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

@@ -100,6 +100,26 @@
 .carousel .card .card-image {
     height: 150px;
     width: var(--cardWidth);
+    border-radius: 8px 8px 0px 0px;
+}
+
+.carousel .card .card-image-placeholder{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 10px;
+    background: #c1b9b952;
+    align-items: center;
+
+    img{
+        width: 30px;
+        height: 30px;
+        filter: brightness(0) saturate(100%) invert(44%) sepia(8%) saturate(449%) hue-rotate(190deg) brightness(94%) contrast(93%);
+    }
+
+    span{
+        font-size: 0.8rem;
+    }
 }
 .card .card-image img {
     height: 100%;
@@ -109,7 +129,9 @@
     background: transparent!important;
     display: block;
     max-width: 100% !important;
+    width: 100%;
     border-radius: 8px 8px 0px 0px;
+    
 }
 .carousel .card .card-content {
     // font-weight: 500;

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')
@@ -76,7 +77,7 @@ export class CarouselComponent implements OnInit{
   ngOnChanges(changes: SimpleChanges){
     if(this.message && this.message.attributes && this.message.attributes?.attachment && this.message.attributes?.attachment?.gallery){
       this.gallery = this.message.attributes.attachment.gallery
-      console.log('carrrrrrrrr', this.wrapper, this.elementRef.nativeElement.querySelector(".card"))
+      // console.log('carrrrrrrrr', this.wrapper, this.elementRef.nativeElement.querySelector(".card"))
       // this.firstCardWidth = (this.elementRef.nativeElement.querySelector(".card") as HTMLElement).offsetWidth
     }
 
@@ -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/images/icons/no-image.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
+    <g>
+        <rect fill="none" height="24" width="24"/>
+        <path d="M21.9,21.9l-8.49-8.49l0,0L3.59,3.59l0,0L2.1,2.1L0.69,3.51L3,5.83V19c0,1.1,0.9,2,2,2h13.17l2.31,2.31L21.9,21.9z M5,18 l3.5-4.5l2.5,3.01L12.17,15l3,3H5z M21,18.17L5.83,3H19c1.1,0,2,0.9,2,2V18.17z"/>
+    </g>
+</svg>

package/src/assets/js/chat21client.js

@@ -1,7 +1,7 @@
 /*
     Chat21Client
 
-    v0.1.12.6
+    v0.1.12.7
 
     @Author Andrea Sponziello
     @Member Gabriele Panico
@@ -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(() => {
@@ -1000,7 +1000,10 @@ class Chat21Client {
         
         this.client.on('connect', // TODO if token is wrong it must reply with an error!
             () => {
-                if (this.log) {console.log("Chat client connected. User:" + user_id)}
+                if (this.log) {
+                    console.log("Chat client connected. User:" + user_id)
+                    console.log("Chat client connected. this.connected:" + this.connected)
+                }
                 if (!this.connected) {
                     if (this.log) {console.log("Chat client first connection for:" + user_id)}
                     this.connected = true
@@ -1027,6 +1030,7 @@ class Chat21Client {
         );
         this.client.on('close',
             () => {
+                this.connected = false
                 if (this.log) {console.log("Chat client close event");}
             }
         );

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

@@ -377,11 +377,12 @@
                 }
             }, 1000);
 
+            //open widget after 3s if is closed
             setTimeout(() => {
                 if(event_data && event_data.detail && event_data.detail.global && !event_data.detail.global.isOpen){
                     window.Tiledesk('open')
                 }
-            }, 3000);
+            }, 1000);
             
         });
         
@@ -391,11 +392,11 @@
             //     document.getElementById("preloader").style.display = "none";
             // }, 1000);
             //open widget after 3s if is closed
-            setTimeout(() => {
-                if(event_data && event_data.detail && event_data.detail.global && !event_data.detail.global.isOpen){
-                    window.Tiledesk('open')
-                }
-            }, 3000);
+            // setTimeout(() => {
+            //     if(event_data && event_data.detail && event_data.detail.global && !event_data.detail.global.isOpen){
+            //         window.Tiledesk('open')
+            //     }
+            // }, 3000);
         });
 
         window.Tiledesk('onAuthStateChanged', function(event_data) {
@@ -405,6 +406,22 @@
             // 	window.Tiledesk('show')
             // }
         });
+
+        window.Tiledesk('onMessageCreated', function(event_data) {
+        	console.log("onMessageCreated!", event_data);
+            window.parent.postMessage(event_data.detail, '*')
+       		// if(event_data.detail.isLogged){
+            // 	console.log("isLogged!!!!", event_data);
+            // 	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">
@@ -453,14 +470,14 @@
     </div>
 
     <header id="header">
-        <ul class="nav navbar-nav navbar-left">
+        <!-- <ul class="nav navbar-nav navbar-left">
             <li class="sign-up"><button class="share-btn" onclick="copyLink()">SHARE THIS PROTOTYPE</button></li>
-        </ul>
+        </ul> -->
     </header>
     <!-- The actual snackbar -->
     <div id="snackbar">Copied to clipboard...</div>
 
-    <div id="wrapper" class="mockup">
+    <!-- <div id="wrapper" class="mockup"> -->
     </div>
 
     <footer id="footer">

package/src/chat21-core/models/conversation.ts

@@ -20,6 +20,7 @@ export class ConversationModel {
     public color: string,
     public avatar: string,
     public archived: boolean,
-    public type: string
+    public type: string,
+    public sound: boolean
   ) { }
 } 

package/src/chat21-core/providers/mqtt/mqtt-conversations-handler.ts

@@ -150,6 +150,7 @@ export class MQTTConversationsHandler extends ConversationsHandlerService {
         this.logger.debug('[MQTTConversationsHandler] connecting MQTT conversations handler');
         this.chat21Service.chatClient.onConversationAdded( (conv) => {
             let conversation = this.completeConversation(conv); // needed to get the "conversation_with", and find the conv in the conv-history
+            conversation.sound = true
             this.logger.log("[MQTTConversationsHandler] onConversationAdded completed:",conversation);
             const index = this.searchIndexInArrayForConversationWith(this.conversations, conversation.conversation_with);
             if (index > -1) {
@@ -162,6 +163,7 @@ export class MQTTConversationsHandler extends ConversationsHandlerService {
             }
         });
         this.chat21Service.chatClient.onConversationUpdated( (conv, topic) => {
+            conv.sound = true;
             this.logger.debug('[MQTTConversationsHandler] conversation updated:', JSON.stringify(conv));
             this.changed(conv);
         });
@@ -184,6 +186,7 @@ export class MQTTConversationsHandler extends ConversationsHandlerService {
             this.logger.debug('[MQTTConversationsHandler] Last conversations', conversations, 'err', err);
             if (!err) {
                 conversations.forEach(conv => {
+                    conv.sound = false;
                     this.added(conv);
                 });
                 loaded();

package/src/chat21-core/providers/mqtt/mqtt-presence.service.ts

@@ -49,7 +49,7 @@ export class MQTTPresenceService extends PresenceService {
     const that = this;
     let local_BSIsOnline = new BehaviorSubject<any>(null);
     this.webSocketService.wsRequesterStatus$.subscribe((data: any) => {
-    this.logger.log('[NATIVEPresenceSERVICE] $subs to wsService - data ', data, userid);
+    // this.logger.log('[NATIVEPresenceSERVICE] $subs to wsService - data ', data, userid);
     if (data && data.presence && data.presence.status === 'online' ) {
         that.BSIsOnline.next({ uid: data.uuid_user, isOnline: true });
         local_BSIsOnline.next({ uid: data.uuid_user, isOnline: true });

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) {