@chat21/chat21-web-widget 5.0.57-rc.4 → 5.0.57

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # chat21-web-widget ver 5.0
 
+### 5.0.57 in PROD
+
+### 5.0.57-rc.5
+- changed: chat21client.js to v0.1.12.5 (window scope fixed)
+- changed: tiledesk logo in conversation and home components
+
 ### 5.0.57-rc.4
 - changed: set calloutStatus to false as default value
 

package/package.json

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

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

@@ -248,7 +248,7 @@ textarea:active{
     // position: absolute;
     bottom: 100%;
     width: 100%;
-    height: 22px;
+    // height: 22px;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -265,7 +265,7 @@ textarea:active{
         // padding: 0;
         // margin: 5px 0;
         // position: absolute;
-        color: var(--gray);
+        color: var(--dark-gray);
         // top: 0;
         // left: 20px; //60px;
         // right: 60px;
@@ -273,38 +273,39 @@ textarea:active{
         align-items: center;
         justify-content: center;
         
-        
-        
-        // background: white;
-        border-radius: 16px;
-        padding: 1px 8px;
-        
         &::ng-deep a {
             text-decoration: none;
             cursor: pointer;
             display: inline-block;
-            color: var(--gray);
-            font-size: 1.1em;
+            color: var(--dark-gray);
+            font-size: 1.2em;
             font-weight: 500;
             line-height: 22px;
 
             font-family: Mulish, sans-serif;
-            letter-spacing: -0.24px;
+            letter-spacing: 0.24px;
             -webkit-font-smoothing: antialiased;
-
+            padding: 4px 12px;
+            
+            &:hover{
+                background: rgb(245, 245, 245);
+                border-radius: 16px;
+            }
             span {
                 display: inline-block;
                 position: relative;
-                top: 2px;
+                // top: 2px;
             }
 
             img {
-                width: 60px; //60px;
+                width: 20px; //60px;
                 height: auto;
                 max-height: 40px;
                 position: relative;
                 vertical-align: middle;
                 object-fit: contain;
+                filter: brightness(0) saturate(100%) invert(39%) sepia(12%) saturate(212%) hue-rotate(173deg) brightness(92%) contrast(88%);
+                padding-right: 5px;
             }
         }
         b{

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

@@ -258,13 +258,13 @@
         }
         .c21-powered-by {
             height: 40px;
-            text-align: center;
-            padding: 0;
+            // text-align: center;
+            padding: 0 15px;
             // margin: 5px 0;
-            position: absolute;
-            color: var(--gray);
+            // position: absolute;
+            color: var(--dark-gray);
             top: 0;
-            left: 20px; //60px;
+            // left: 20px; //60px;
             // right: 60px;
             display: flex;
             align-items: center;
@@ -273,28 +273,30 @@
                 text-decoration: none;
                 cursor: pointer;
                 display: inline-block;
-                color: var(--gray);
-                font-size: 1.1em;
+                color: var(--dark-gray);
+                font-size: 1.2em;
                 font-weight: 500;
                 line-height: 22px;
 
                 font-family: Mulish, sans-serif;
-                letter-spacing: -0.24px;
+                letter-spacing: 0.24px;
                 -webkit-font-smoothing: antialiased;
     
                 span {
                     display: inline-block;
                     position: relative;
-                    top: 2px;
+                    // top: 2px;
                 }
 
                 img {
-                    width: 80px; //60px;
+                    width: 20px; //60px;
                     height: auto;
                     max-height: 40px;
                     position: relative;
                     vertical-align: middle;
                     object-fit: contain;
+                    filter: brightness(0) saturate(100%) invert(39%) sepia(12%) saturate(212%) hue-rotate(173deg) brightness(92%) contrast(88%);
+                    padding-right: 5px;
                 }
             }
             b{

package/src/app/component/message/buttons/action-button/action-button.component.scss

@@ -24,7 +24,7 @@
     font-size: var(--buttonFontSize);
     -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
-    // white-space: nowrap;
+    // // white-space: nowrap;
     word-wrap: break-word;
     letter-spacing: -0.24px;
     -webkit-font-smoothing: antialiased;

package/src/app/component/message-attachment/message-attachment.component.scss

@@ -3,7 +3,8 @@
     display: block;
     margin-right: 16px; //align attachment-buttons to bubble sent message
     height: auto;
-    width: 85%;
+    // width: 85%;
+    max-width: 95%;
     float: right;
 
     .buttons-wrapper {
@@ -17,7 +18,10 @@
     }
 
     .div-button {
-        display: inline-block;
+        // display: inline-block;
+        // overflow: hidden;
+        // text-overflow: ellipsis;
+        // min-width: inherit;
         .button-in-msg {
             padding: 8px 16px!important;
         }

package/src/app/utils/globals.ts

@@ -23,7 +23,7 @@ import { Rule } from 'src/models/rule';
 export class Globals {
 
   BASE_LOCATION = 'https://widget.tiledesk.com/v2';
-  POWERED_BY ='<a tabindex="-1" target="_blank" href="http://www.tiledesk.com/?utm_source=widget"><img src="https://support-pre.tiledesk.com/dashboard/assets/img/logos/tiledesk-logo_new_gray.svg"/></a>'
+  POWERED_BY ='<a tabindex="-1" target="_blank" href="http://www.tiledesk.com/?utm_source=widget"><img src="https://support-pre.tiledesk.com/dashboard/assets/img/logos/tiledesk-solo_logo_new_gray.svg"/><span>Powered by Tiledesk</span></a>'
   DEFAULT_LOGO_CHAT = '/assets/images/tiledesk_logo_white_small.svg';
 
   // ============ BEGIN: SET FUNCTION BY UTILS ==============//

package/src/assets/js/chat21client.js

@@ -1,9 +1,10 @@
 /*
     Chat21Client
 
-    v0.1.12.4
+    v0.1.12.5
 
     @Author Andrea Sponziello
+    @Member Gabriele Panico
     (c) Tiledesk 2020
 */
 
@@ -24,13 +25,16 @@ class Chat21Client {
         this.reconnections = 0 // just to check how many reconnections
         this.client_id = this.uuidv4();
         this.log = options.log ? true : false;
-       
+    
         if (options && options.MQTTendpoint) {
             if (options.MQTTendpoint.startsWith('/')) {
                 if (this.log) {
                     console.log("MQTTendpoint relative url");
                 }
-                var loc = window.parent.location, new_uri;
+                var loc = window.location, new_uri;
+                if(window.frameElement && window.frameElement.getAttribute('tiledesk_context') === 'parent'){
+                    loc = window.parent.location
+                }
                 if (loc.protocol === "https:") {
                     // new_uri = "wss:";
                     new_uri = "mqtt:";
@@ -42,7 +46,6 @@ class Chat21Client {
                 new_uri += "//" + loc.host;
                 // new_uri += loc.pathname + "/to/ws";
                 new_uri += options.MQTTendpoint;
-                console.log('new_uriiiiiii', new_uri, loc, document.location, window.parent)
                 this.endpoint = new_uri
             } else {
                 this.endpoint = options.MQTTendpoint

package/src/assets/twp/index-dev.html

@@ -1197,6 +1197,13 @@
             window.Tiledesk('restart')
         }
 
+        function onClickFileUploadAccept(){
+            let text = document.getElementById('fileUploadAccept').value
+            window.tiledeskSettings['fileUploadAccept'] = text
+            console.log('onClickFileUploadAccept:', window.tiledeskSettings)
+            window.Tiledesk('restart')
+        }
+
         function onClickShowAttachmentButton(){
             let status = document.querySelector('input[name="showAttachmentButton"]:checked').value
             window.tiledeskSettings['showAttachmentButton'] = stringToBoolean(status)
@@ -2193,6 +2200,15 @@
                                 <button class="btn btn-light" onclick="onClickParticipants()">Test this setting <i class="fa fa-magic" aria-hidden="true"></i></button>
                             </div>
                         </div>
+                        <div class="row">
+                            <div class="col-md-5 formElement"><span><em><strong>fileUploadAccept</strong></em> (more<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept#unique_file_type_specifiers"> here</a>)</span></div>
+                            <div class="col-md-5">
+                                <input class="form-control" type="text" id="fileUploadAccept" name="fileUploadAccept" placeholder="Set a comma separated string...">
+                            </div>
+                            <div class="col-md-2">
+                                <button class="btn btn-light" onclick="onClickFileUploadAccept()">Test this setting <i class="fa fa-magic" aria-hidden="true"></i></button>
+                            </div>
+                        </div>
                         <div class="row">
                             <div class="col-md-5 formElement"><span><em><strong>showAttachmentButton</strong></em></span></div>
                             <div class="col-md-5">