@chat21/chat21-web-widget 5.0.46-rc.2 → 5.0.46-rc.4

package/package.json

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

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

@@ -55,12 +55,12 @@
         position: fixed;
         top: var(--margin-top);
 
-        -webkit-box-shadow: 0 3px 5px -3px rgba(0, 0, 0, 0.4);
-        -moz-box-shadow: 0 3px 5px -3pxrgba(0, 0, 0, 0.4);
-        box-shadow: 0 3px 5px -3px rgba(0, 0, 0, 0.4);
+        // -webkit-box-shadow: 0 3px 5px -3px rgba(0, 0, 0, 0.4);
+        // -moz-box-shadow: 0 3px 5px -3pxrgba(0, 0, 0, 0.4);
+        // box-shadow: 0 3px 5px -3px rgba(0, 0, 0, 0.4);
         .c21-header-container{
             // height: var(--header-height);
-            
+            height: calc( var(--header-height));
             // margin: inherit;
             
             .c21-header-content {
@@ -88,6 +88,7 @@
                 }
 
                 .c21-header-button{
+                    margin: 6px;
                     width: 30px;
                     height: 30px;
                 }
@@ -104,6 +105,9 @@
         width: var(--modal-width);
         height: var(--content-height);
 
+        display: flex;
+        justify-content: center;
+        align-items: center;
         // img {
         //     border-radius: 8px;
         //     //padding: 3px;
@@ -134,6 +138,7 @@
             position: absolute;
             top: 0;
             right: 0;
+
         }
         #scroll-me-preview:hover {
             &::-webkit-scrollbar-thumb {
@@ -151,10 +156,10 @@
 
         #img-preview-file-extension {
             text-align: center;
-            position: relative;
+            position: absolute;//relative;
             text-transform: uppercase;
             color: #fff;
-            top: -25px;
+            bottom: 30px; //-25px;
             font-weight: 500;
         }
     }
@@ -171,7 +176,7 @@
         
         display: flex;
         gap: 5px;
-        padding: var(--paddingTopBottom) 5px;
+        padding: var(--paddingTopBottom) 10px;
         -webkit-box-sizing: border-box;
         box-sizing: border-box;
 
@@ -244,7 +249,7 @@
             border-radius: 10px;
             background-color: $chat-footer-background-color;
             -webkit-box-flex: 1;
-            width: 85%;
+            width: 88%;
         }
         
         .chat21-textarea-button {

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

@@ -989,6 +989,11 @@ export class GlobalSettingsService {
         // this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > continueConversationBeforeTime:: ', TEMP]);
         if (TEMP !== undefined) {
             globals.continueConversationBeforeTime = +TEMP;
+        }
+        TEMP = tiledeskSettings['participants'];
+        // this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > participants:: ', TEMP]);
+        if (TEMP !== undefined) {
+            globals.participants = TEMP.split(',').map(key => { return key.trim()});;
         }      
     }
 
@@ -1244,6 +1249,10 @@ export class GlobalSettingsService {
         if (TEMP !== null) {
             this.globals.continueConversationBeforeTime = +TEMP;
         }
+        TEMP = el.nativeElement.getAttribute('participants');
+        if (TEMP !== null) {
+            this.globals.participants = TEMP.split(',').map(key => { return key.trim()});
+        }
         
     }
 
@@ -1671,6 +1680,11 @@ export class GlobalSettingsService {
         if (TEMP) {
             globals.continueConversationBeforeTime = +TEMP;
         }
+
+        TEMP = getParameterByName(windowContext, 'tiledesk_participants');
+        if (TEMP) {
+            globals.participants = TEMP.split(',').map(key => { return key.trim()});
+        }
     }
 
     /**

package/src/app/utils/globals.ts

@@ -215,6 +215,7 @@ export class Globals {
    typingLocation: string; // *******  new ********
    allowReopen: boolean; // *******  new ********
    continueConversationBeforeTime: number; // *******  new ********
+   participants: Array<string>; // *******  new ********
   constructor(
   ) {
     // console.log(' ---------------- 1: initDefafultParameters ---------------- ');
@@ -386,6 +387,8 @@ export class Globals {
     /** enable the user to reopen a closed conversation */
     this.continueConversationBeforeTime = 48;
     /** enable user to continue archived confersation before the value time from last timeout message */
+    this.participants = [];
+     /** enable user to talk with specific chat-bots/humans */
 
     this.showWaitTime = true;
 
@@ -499,34 +502,55 @@ export class Globals {
    */
   createDefaultSettingsObject() {
     this.default_settings = {
-      'tenant': this.tenant, 'recipientId': this.recipientId,
-      'projectid': this.projectid, 'widgetTitle': this.widgetTitle,
-      'poweredBy': this.poweredBy, 'userEmail': this.userEmail, //'userId': this.userId, 
-      'userFullname': this.userFullname, 'preChatForm': this.preChatForm, 'preChatFormJson': this.preChatFormJson,
-      'isOpen': this.isOpen, 'channelType': this.channelType,
-      'lang': this.lang, 'calloutTimer': this.calloutTimer, 'calloutStaus': this.calloutStaus,
-      'align': this.align,'welcomeMsg': this.welcomeMsg, 'calloutTitle': this.calloutTitle,
-      'calloutMsg': this.calloutMsg, 'fullscreenMode': this.fullscreenMode, 'hideHeaderCloseButton': this.hideHeaderCloseButton,
-      'themeColor': this.themeColor, 'themeColorOpacity': this.themeColorOpacity, 'themeForegroundColor': this.themeForegroundColor,
-      'allowTranscriptDownload': this.allowTranscriptDownload, //'userToken': this.userToken,
-      'autoStart': this.autoStart, 'startHidden': this.startHidden, 'isShown': this.isShown,
-      'startFromHome': this.startFromHome, 'logoChat': this.logoChat,
-      'welcomeTitle': this.welcomeTitle, 'marginX': this.marginX,
-      'marginY': this.marginY, 'lancherWidth': this.launcherWidth, 'lancherHeight': this.launcherHeight,
-      'baloonImage': this.baloonImage, 'baloonShape': this.baloonShape, 'isLogEnabled': this.isLogEnabled,
-      'openExternalLinkButton': this.openExternalLinkButton, 'hideHeaderConversationOptionsMenu': this.hideHeaderConversationOptionsMenu,
-      'hideCloseConversationOptionMenu': this.hideCloseConversationOptionMenu, 'hideRestartConversationOptionsMenu': this.hideRestartConversationOptionsMenu,
-      'showInfoMessage': this.showInfoMessage, 'typingLocation': this.typingLocation, 'allowReopen': this.allowReopen,
-      'hideSettings': this.hideSettings,'filterByRequester': this.filterByRequester, 
-      'persistence': this.persistence,'showWaitTime': this.showWaitTime, 'showAvailableAgents': this.showAvailableAgents,
-      'showLogoutOption': this.showLogoutOption, 'showAttachmentButton': this.showAttachmentButton,
-      'showAllConversations': this.showAllConversations, 'jwt': this.jwt,
-      'dynamicWaitTimeReply': this.dynamicWaitTimeReply, 'soundEnabled': this.soundEnabled, 'logLevel': this.logLevel,
+      'align': this.align,
+      'allowReopen': this.allowReopen,
+      'allowTranscriptDownload': this.allowTranscriptDownload,
+      'autoStart': this.autoStart,
+      'baloonShape': this.baloonShape, 'baloonImage': this.baloonImage,
       'bubbleSentBackground' : this.bubbleSentBackground, 'bubbleSentTextColor': this.bubbleSentTextColor,   
       'bubbleReceivedBackground': this.bubbleReceivedBackground, 'bubbleReceivedTextColor': this.bubbleReceivedTextColor,
-      'fontSize': this.fontSize, 'fontFamily': this.fontFamily, 'buttonFontSize': this.buttonFontSize,
-      'buttonBackgroundColor': this.buttonBackgroundColor, 'buttonTextColor': this.buttonTextColor,
-      'buttonHoverBackgroundColor': this.buttonHoverBackgroundColor, 'buttonHoverTextColor': this.buttonHoverTextColor
+      'buttonBackgroundColor': this.buttonBackgroundColor, 'buttonTextColor': this.buttonTextColor, 'buttonFontSize': this.buttonFontSize,
+      'buttonHoverBackgroundColor': this.buttonHoverBackgroundColor, 'buttonHoverTextColor': this.buttonHoverTextColor,
+      'calloutTitle': this.calloutTitle, 'calloutMsg': this.calloutMsg,
+      'calloutTimer': this.calloutTimer, 'calloutStaus': this.calloutStaus,
+      'channelType': this.channelType,
+      'dynamicWaitTimeReply': this.dynamicWaitTimeReply,
+      'fontSize': this.fontSize, 'fontFamily': this.fontFamily, 
+      'fullscreenMode': this.fullscreenMode,
+      'filterByRequester': this.filterByRequester,
+      'hideHeaderConversationOptionsMenu': this.hideHeaderConversationOptionsMenu, 'hideHeaderCloseButton': this.hideHeaderCloseButton,
+      'hideCloseConversationOptionMenu': this.hideCloseConversationOptionMenu, 'hideRestartConversationOptionsMenu': this.hideRestartConversationOptionsMenu,
+      'hideSettings': this.hideSettings,
+      'isLogEnabled': this.isLogEnabled,
+      'isOpen': this.isOpen, 'isShown': this.isShown,
+      'jwt': this.jwt,
+      'logLevel': this.logLevel,
+      'logoChat': this.logoChat,
+      'lang': this.lang, 
+      'lancherWidth': this.launcherWidth, 'lancherHeight': this.launcherHeight,
+      'marginX': this.marginX, 'marginY': this.marginY,
+      'mobileMarginX': this.mobileMarginX, 'mobileMarginY': this.mobileMarginY,
+      'nativeRating': this.nativeRating,
+      'openExternalLinkButton': this.openExternalLinkButton, 
+      'participants':this.participants,
+      'persistence': this.persistence,
+      'poweredBy': this.poweredBy,
+      'preChatForm': this.preChatForm, 'preChatFormJson': this.preChatFormJson,
+      'projectid': this.projectid,
+      'recipientId': this.recipientId,
+      'singleConversation': this.singleConversation,
+      'showInfoMessage': this.showInfoMessage, 'showAllConversations': this.showAllConversations, 
+      'showWaitTime': this.showWaitTime, 'showAvailableAgents': this.showAvailableAgents,
+      'showLogoutOption': this.showLogoutOption, 'showAttachmentButton': this.showAttachmentButton,
+      'soundEnabled': this.soundEnabled, 
+      'startHidden': this.startHidden, 'startFromHome': this.startFromHome, 
+      'tenant': this.tenant, 
+      'themeColor': this.themeColor, 'themeColorOpacity': this.themeColorOpacity, 'themeForegroundColor': this.themeForegroundColor,
+      'typingLocation': this.typingLocation, 
+      'userEmail': this.userEmail, 'userFullname': this.userFullname, 
+      'widgetTitle': this.widgetTitle,
+      'welcomeMsg': this.welcomeMsg, 'welcomeTitle': this.welcomeTitle, 
+
     };
   }
 

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

@@ -1142,6 +1142,13 @@
             window.Tiledesk('restart')
         }
 
+        function onClickParticipants(){
+            let text = document.getElementById('participants').value
+            window.tiledeskSettings['participants'] = text
+            console.log('onClickParticipants:', window.tiledeskSettings)
+            window.Tiledesk('restart')
+        }
+
         function onClickShowAttachmentButton(){
             let status = document.querySelector('input[name="showAttachmentButton"]:checked').value
             window.tiledeskSettings['showAttachmentButton'] = stringToBoolean(status)
@@ -2067,6 +2074,15 @@
                                 <button class="btn btn-light" onclick="onClickShowInfoMessage()">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>participants</strong></em></span></div>
+                            <div class="col-md-5">
+                                <textarea class="form-control" id="participants" placeholder="Set a comma separated string..." rows="6" cols="30"></textarea>
+                            </div>
+                            <div class="col-md-2">
+                                <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>showAttachmentButton</strong></em></span></div>
                             <div class="col-md-5">

package/src/launch.js

@@ -124,7 +124,7 @@ function loadIframe(tiledeskScriptBaseLocation) {
           var httpRequest = createCORSRequest('POST', event_data.detail.appConfigs.apiUrl+event_data.detail.default_settings.projectid+'/events',true); //set async to false because loadParams must return when the get is complete
           httpRequest.setRequestHeader('Content-type', 'application/json');
           httpRequest.setRequestHeader('Authorization',tiledeskToken);
-          httpRequest.send(JSON.stringify({"name":"new_conversation","attributes": {"request_id":event_data.detail.newConvId, "department": event_data.detail.global.departmentSelected.id, "language": event_data.detail.global.lang, "subtype":"info", "fullname":event_data.detail.global.attributes.userFullname, "email":event_data.detail.global.attributes.userEmail, "attributes":event_data.detail.global.attributes}}));
+          httpRequest.send(JSON.stringify({"name":"new_conversation","attributes": {"request_id":event_data.detail.newConvId, "department": event_data.detail.global.departmentSelected.id, "participants": event_data.detail.global.participants, "language": event_data.detail.global.lang, "subtype":"info", "fullname":event_data.detail.global.attributes.userFullname, "email":event_data.detail.global.attributes.userEmail, "attributes":event_data.detail.global.attributes}}));
         }
     });