@chat21/chat21-web-widget 5.0.60 → 5.0.62

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # chat21-web-widget ver 5.0
 
+### 5.0.62 in PROD
+- added: pending messages
+- added: disconnect from messaging handler if no interaction exist within 1 minute
+- bug-fixed: cannot able to send messages due to undefined in conversationHandlerService
+
+### 5.0.61-rc.1
+- added: 'flags' emojii category in conversatio-footer component
+- added: 'share prototype' button inside 'chatbot-panel.html' page to copy link to clipboard
+- added: forceDisconnet var to disconnet messaging client if no interaction is handled within 60s
+
 ### 5.0.60 in PROD
 
 ### 5.0.60-rc.2

package/package.json

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

package/src/app/app.component.ts

@@ -103,6 +103,7 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
   styleMapConversation: Map<string, string> = new Map();
   marginBottom: number;
   
+  forceDisconnect: boolean = false;
   private logger: LoggerService = LoggerInstance.getInstance();
   constructor(
     private el: ElementRef,
@@ -407,8 +408,12 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
                     rules.initRules(that.g.windowContext, that.g.tiledeskToken, user, that.generateNewUidConversation(), that.g.botsRules)
                 }
 
+                //if widget is closed subscribe to 'click' event and set a 60sec timer to disconnect if handler isn't fired
+                if(!this.g.isOpen){
+                    that.listenToWidgetClick()
+                }
 
-            } else if (state && state === AUTH_STATE_OFFLINE) {
+            } else if (state && state === AUTH_STATE_OFFLINE && !this.forceDisconnect) {
                 /** non sono loggato */
                 that.logger.info('[APP-COMP] OFFLINE - NO CURRENT USER AUTENTICATE: ');
                 that.g.setParameter('isLogged', false);
@@ -427,7 +432,8 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
 
         const subUserLogOut = this.messagingAuthService.BSSignOut.subscribe((state) => {
             // that.ngZone.run(() => {
-            if (state === true) { //state = true -> user has logged out
+            console.log('[FORCE] messagingAuthService BSSignOut', state, this.forceDisconnect)
+            if (state === true && !this.forceDisconnect) { //state = true -> user has logged out
                 /** ho effettuato il logout: nascondo il widget */
                 that.logger.debug('[APP-COMP] sono nel caso logout -1');
                 // that.g.wdLog(['obsLoggedUser', obsLoggedUser);
@@ -1580,6 +1586,12 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
         this.g.setParameter('recipientId', recipientId);
         this.logger.debug('[APP-COMP] openCloseWidget', recipientId, this.g.isOpen, this.g.startFromHome);
         if (this.g.isOpen === false) {
+            if(this.forceDisconnect){
+                console.log('[FORCE] onOpenCloseWidget --> reconnect', this.forceDisconnect)
+                this.messagingAuthService.createCustomToken(this.g.tiledeskToken)
+                this.forceDisconnect = false;
+            }
+
             if (!recipientId) {
                 if(this.g.singleConversation){
                     this.isOpenHome = false;
@@ -1715,6 +1727,12 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
     public onSelectedConversation($event: ConversationModel) {
         if ($event) {
             if (this.g.isOpen === false) {
+
+                if(this.forceDisconnect){
+                    console.log('[FORCE] onSelectedConversation --> reconnect', this.forceDisconnect)
+                    this.messagingAuthService.createCustomToken(this.g.tiledeskToken)
+                    this.forceDisconnect = false;
+                }
                 //this.f21_open();
                 this._f21_open()
             }
@@ -2075,6 +2093,20 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
         }
     }
 
+
+    private listenToWidgetClick(){
+        let clickTimeout = setTimeout(() => {
+            console.log('[FORCE] --> NO INTERACTION: disconnection... <--- ')
+            //disconnect 
+            this.forceDisconnect = true
+            this.messagingAuthService.logout()
+        }, 60*1000);
+        window.addEventListener("click", function(){
+            console.log('[FORCE] <<INTERACTION>> within 1 minute')
+            clearTimeout(clickTimeout)
+        })
+    }
+
     // ========= begin:: DESTROY ALL SUBSCRIPTIONS ============//
     /** elimino tutte le sottoscrizioni */
     ngOnDestroy() {

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

@@ -68,7 +68,7 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
     showPreview: false,
     darkMode: false,
     enableSearch: false,
-    include: [ 'recent', 'people', 'nature', 'activity']
+    include: [ 'recent', 'people', 'nature', 'activity', 'flags']
   }
 
   convertColorToRGBA = convertColorToRGBA;
@@ -342,6 +342,7 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
           channelType: channelType
         })
         
+        this.conversationHandlerService = this.chatManager.getConversationHandlerByConversationId(this.conversationWith);
         const messageSent = this.conversationHandlerService.sendMessage(
           msg,
           type,

package/src/app/component/home-conversations/home-conversations.component.scss

@@ -239,9 +239,9 @@
         box-shadow: none;
         vertical-align: top;
 
-        // button.c21-button-primary{
-        //     margin: 5px 0px;
-        // }
+        button.c21-button-primary{
+            margin: 20px 0px;
+        }
     }
 
     .c21-footer{

package/src/assets/js/chat21client.js

@@ -979,12 +979,12 @@ class Chat21Client {
             // clean: true,
             reconnectPeriod: 1000,
             // connectTimeout: 30 * 1000,
-            will: {
-                topic: this.presence_topic,
-                payload: '{"disconnected":true}',
-                qos: 1,
-                retain: true
-            },
+            // will: {
+            //     topic: this.presence_topic,
+            //     payload: '{"disconnected":true}',
+            //     qos: 1,
+            //     retain: true
+            // },
             clientId: this.client_id,
             username: 'JWT',
             password: jwt,
@@ -992,7 +992,6 @@ class Chat21Client {
         }
         if (this.log) {console.log("starting mqtt connection with LWT on:", this.presence_topic, this.endpoint)}
         // client = mqtt.connect('mqtt://127.0.0.1:15675/ws',options)
-        console.log("starting mqtt connection with LWT on:", this.presence_topic, this.endpoint)
         this.client = mqtt.connect(this.endpoint,options)
         
         this.client.on('connect', // TODO if token is wrong it must reply with an error!

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

@@ -158,6 +158,31 @@
             text-align: center;
         }
 
+        header#header{
+            z-index: 2;
+            position: absolute;
+            cursor: pointer;
+        }
+
+        .share-btn{
+            transition: color 0.15s ease 0s, opacity 0.15s ease 0s, box-shadow 0.15s ease 0s, background-color 0.15s ease 0s;
+            height: 41px;
+            box-sizing: border-box;
+            color: rgb(19, 33, 68);
+            font-weight: 600;
+            line-height: 22px;
+            background-size: 1px 41px;
+            padding: 10px 19px;
+            border-radius: 10px;
+            border: 1px solid rgb(255, 255, 255);
+            background-color: rgb(231, 240, 242);
+            box-shadow: rgb(204, 211, 228) 0px 0px 0px 1px;
+        }
+
+        .share-btn:hover{
+            opacity: 0.8;
+        }
+
         footer#footer {
             background-color: white;
             text-align: center;
@@ -190,7 +215,53 @@
             height: 24px;
             /* margin-left: 20px; */
         }
-        
+
+        /* The snackbar - position it at the bottom and in the middle of the screen */
+        #snackbar {
+            visibility: hidden; /* Hidden by default. Visible on click */
+            min-width: 250px; /* Set a default minimum width */
+            margin-left: -125px; /* Divide value of min-width by 2 */
+            background-color: #504a4a; /* Black background color */
+            color: #fff; /* White text color */
+            text-align: center; /* Centered text */
+            border-radius: 10px; /* Rounded borders */
+            padding: 16px; /* Padding */
+            position: fixed; /* Sit on top of the screen */
+            z-index: 1; /* Add a z-index if needed */
+            left: 50%; /* Center the snackbar */
+            bottom: 30px; /* 30px from the bottom */
+            font-size: medium;
+        }
+
+        /* Show the snackbar when clicking on a button (class added with JavaScript) */
+        #snackbar.show {
+            visibility: visible; /* Show the snackbar */
+            /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
+            However, delay the fade out process for 2.5 seconds */
+            -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
+            animation: fadein 0.5s, fadeout 0.5s 2.5s;
+        }
+
+        /* Animations to fade the snackbar in and out */
+        @-webkit-keyframes fadein {
+            from {bottom: 0; opacity: 0;}
+            to {bottom: 30px; opacity: 1;}
+        }
+
+        @keyframes fadein {
+            from {bottom: 0; opacity: 0;}
+            to {bottom: 30px; opacity: 1;}
+        }
+
+        @-webkit-keyframes fadeout {
+            from {bottom: 30px; opacity: 1;}
+            to {bottom: 0; opacity: 0;}
+        }
+
+        @keyframes fadeout {
+            from {bottom: 30px; opacity: 1;}
+            to {bottom: 0; opacity: 0;}
+        }
 
     </style>
 
@@ -367,15 +438,28 @@
             }
             return(false);
         }
+
+        
+
     </script>
     
 </head>
 
 <body class="website white" >
+
+
     <div id="preloader">
         <div class="logo"></div>
     </div>
 
+    <header id="header">
+        <ul class="nav navbar-nav navbar-left">
+            <li class="sign-up"><button class="share-btn" onclick="copyLink()">SHARE THIS PROTOTYPE</button></li>
+        </ul>
+    </header>
+    <!-- The actual snackbar -->
+    <div id="snackbar">Copied to clipboard...</div>
+
     <div id="wrapper" class="mockup">
     </div>
 
@@ -389,24 +473,38 @@
     </footer>
 
 
-<!-- <script>
+<script>
     // non-blocking CSS delivery
-    var loadDeferredStyles = function() {
-        var addStylesNode = document.getElementById("deferred-styles");
-        console.log('addStylesNode ', addStylesNode)
-        var replacement = document.createElement("div");
-        replacement.innerHTML = addStylesNode.textContent;
-        document.body.appendChild(replacement);
-        addStylesNode.parentElement.removeChild(addStylesNode);
-    };
-    var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
-            window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
-    if (raf) {
-        raf(function() { window.setTimeout(loadDeferredStyles, 0); });
-    } else {
-        window.addEventListener('load', loadDeferredStyles);
+    // var loadDeferredStyles = function() {
+    //     var addStylesNode = document.getElementById("deferred-styles");
+    //     console.log('addStylesNode ', addStylesNode)
+    //     var replacement = document.createElement("div");
+    //     replacement.innerHTML = addStylesNode.textContent;
+    //     document.body.appendChild(replacement);
+    //     addStylesNode.parentElement.removeChild(addStylesNode);
+    // };
+    // var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
+    //         window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
+    // if (raf) {
+    //     raf(function() { window.setTimeout(loadDeferredStyles, 0); });
+    // } else {
+    //     window.addEventListener('load', loadDeferredStyles);
+    // }
+    function copyLink(){
+        let url = window.location.href
+        navigator.clipboard.writeText(url)
+
+        // Get the snackbar DIV
+        var toast = document.getElementById("snackbar");
+
+        // Add the "show" class to DIV
+        toast.className = "show";
+
+        // After 3 seconds, remove the show class from DIV
+        setTimeout(function(){ toast.className = toast.className.replace("show", ""); }, 3000);
+
     }
-</script> -->
+</script>
 
 <!-- Google Analytics -->
 

package/src/chat21-core/providers/chat-manager.ts

@@ -184,7 +184,6 @@ export class ChatManager {
   getConversationHandlerByConversationId(conversationId): any {
     let handler = null;
     this.handlers.forEach(conv => {
-      this.logger.log('[CHAT MANAGER]forEach ***', conversationId, this.handlers, conv);
       if (conv.conversationWith === conversationId) {
         handler = conv;
         return;

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

@@ -127,13 +127,19 @@ export class MQTTConversationHandler extends ConversationHandlerService {
             this.conversationWith, (message, topic) => {
                 this.logger.log('[MQTTConversationHandlerSERVICE] message added:', message, 'on topic:', topic, this.messages);
                 // this.addedMessage(msg);
-                const msg: MessageModel = message;        
-                msg.uid = message.message_id;
+                const msg: MessageModel = message;
 
-                //escape command message is already is in list checking by parendUid 
-                if(this.messages.filter(message => message.attributes['parentUid'] === msg.uid).length > 0){
-                    return;
+                //allow to replace message in unknown status (pending status: '0')
+                if(message.attributes && message.attributes.tempUID){
+                    msg.uid = message.attributes.tempUID;
+                }else{
+                    msg.uid = message.message_id
                 }
+
+                //escape command message is already is in list checking by parendUid 
+                // if(this.messages.filter(message => message.attributes['parentUid'] === msg.uid).length > 0){
+                //     return;
+                // }
                 
                 if (msg.attributes && msg.attributes.commands) {
                     this.logger.debug('[MQTTConversationHandlerSERVICE] splitted message::::', msg)
@@ -191,6 +197,7 @@ export class MQTTConversationHandler extends ConversationHandlerService {
         const recipientFullname = conversationWithFullname;
         const recipientId = conversationWith;
         attributes.lang = language;
+        attributes.tempUID = uuidv4(); //allow to show message in a pending status
         this.chat21Service.chatClient.sendMessage(
             msg,
             typeMsg,
@@ -210,6 +217,25 @@ export class MQTTConversationHandler extends ConversationHandlerService {
                 }
             }
         );
+        
+        const message = new MessageModel(
+            attributes.tempUID, //allow to show message in a pending status 
+            language,
+            conversationWith,
+            recipientFullname,
+            sender,
+            senderFullname,
+            0,
+            metadataMsg,
+            msg,
+            Date.now(),
+            typeMsg,
+            attributes,
+            channelType,
+            false
+        );
+        this.addedMessage(message) //allow to show message in a pending status: add pending message in array of messages
+
         return new MessageModel(
             '',
             language,
@@ -410,7 +436,7 @@ export class MQTTConversationHandler extends ConversationHandlerService {
      */
     private updateMessageStatusReceived(msg) {
         this.logger.log('[MQTTConversationHandlerSERVICE] updateMessageStatusReceived', msg);
-        if (msg['status'] < MSG_STATUS_RECEIVED) {
+        if (msg['status'] < MSG_STATUS_RECEIVED && msg['status'] > 0) {
             this.logger.log('[MQTTConversationHandlerSERVICE] status ', msg['status'], ' < (RECEIVED:200)', MSG_STATUS_RECEIVED);
             let uid = msg.uid
             msg.attributes.commands? uid = msg.attributes.parentUid: null 

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

@@ -72,9 +72,9 @@ export class MQTTPresenceService extends PresenceService {
 
   public imHere(): void {
     this.logger.debug('[MQTT-PRESENCE] imHere', this.tenant);
-    setTimeout(() => {
-      this.chat21Service.chatClient.ImHere()
-    }, 2000);
+    // setTimeout(() => {
+    //   this.chat21Service.chatClient.ImHere()
+    // }, 2000);
   }
 
   /**