@chat21/chat21-web-widget 5.0.60-rc.2 → 5.0.61-rc.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # chat21-web-widget ver 5.0
 
+### 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
 - bug-fixed: callout not showed in index.html and index-dev.html pages
 

package/angular.json

@@ -33,6 +33,7 @@
               "src/iframe-style.css",
               "src/widget-config-template.json",
               "src/widget-config.json",
+              "src/environments/real_data/segment_script-dev.js",
               "src/environments/real_data/widget-config-firebase.json",
               "src/environments/real_data/widget-config-mqtt.json",
               "src/environments/real_data/widget-config-docker.json",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@chat21/chat21-web-widget",
   "author": "Tiledesk SRL",
-  "version": "5.0.60-rc.2",
+  "version": "5.0.61-rc.1",
   "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;
@@ -2075,6 +2087,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()
+        }, 10*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;

package/src/assets/js/chat21client.js

@@ -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/mqtt/mqtt-conversations-handler.ts

@@ -148,7 +148,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
-            this.logger.log("onConversationAdded completed:",conversation);
+            this.logger.log("[MQTTConversationsHandler] onConversationAdded completed:",conversation);
             const index = this.searchIndexInArrayForConversationWith(this.conversations, conversation.conversation_with);
             if (index > -1) {
                 this.logger.log('[MQTTConversationsHandler] Added conv -> Changed!')