@chat21/chat21-web-widget 5.1.0-rc9 → 5.1.0

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

@@ -1,5 +1,3 @@
-@import 'src/app/sass/variables';
-
 :host {
     --backgroundColor: #{var(--blue)};
     --textColor: #{var(--bck-msg-sent)};
@@ -7,12 +5,14 @@
     --hoverTextColor: #{var(--blue)};
     --buttonFontSize: #{var(--button-in-msg-font-size)};
     --max-width: #{var(--button-in-msg-max-width)};
+    --padding: #{var(--button-in-msg-padding)};
+    --fontFamily: #{var(--button-in-msg-font-family)};
 }
 
 .button-in-msg {
-    padding: 8px 16px!important;
-    position: relative;
-    max-width: var(--max-width);
+    padding: var(--padding);
+    // position: relative;
+    // max-width: var(--max-width);
     min-width: inherit;
     cursor: pointer;
     border: 1px solid var(--textColor);
@@ -20,7 +20,7 @@
     margin: 3px;
     background: var(--backgroundColor);
     overflow: hidden;
-    font-family: 'Muli', sans-serif;
+    font-family: var(--fontFamily);
     font-size: var(--buttonFontSize);
     -o-text-overflow: ellipsis;
     text-overflow: ellipsis;

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

@@ -1,5 +1,3 @@
-// @import 'src/app/sass/variables';
-
 :host {
     --backgroundColor: #{var(--blue)};
     --textColor: #{var(--bck-msg-sent)};
@@ -7,12 +5,14 @@
     --hoverTextColor: #{var(--blue)};
     --buttonFontSize: #{var(--button-in-msg-font-size)};
     --max-width: #{var(--button-in-msg-max-width)};
+    --padding: #{var(--button-in-msg-padding)};
+    --font-family: #{var(--button-in-msg-font-family)};
 }
 
 .button-in-msg {
-    padding: 8px 16px!important;
+    padding: var(--padding);
     position: relative;
-    max-width: var(--max-width);
+    // max-width: var(--max-width);
     min-width: inherit;
     cursor: pointer;
     border: 1px solid var(--textColor);
@@ -20,7 +20,7 @@
     margin: 3px;
     background: var(--backgroundColor);
     overflow: hidden;
-    font-family: 'Muli', sans-serif;
+    font-family: var(--font-family);
     font-size: var(--buttonFontSize);
     -o-text-overflow: ellipsis;
     text-overflow: ellipsis;

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

@@ -1,5 +1,3 @@
-// @import 'src/app/sass/variables';
-
 :host {
     --backgroundColor: #{var(--blue)};
     --textColor: #{var(--bck-msg-sent)};
@@ -7,14 +5,15 @@
     --hoverTextColor: #{var(--blue)};
     --buttonFontSize: #{var(--button-in-msg-font-size)};
     --max-width: #{var(--button-in-msg-max-width)};
+    --padding: #{var(--button-in-msg-padding)};
+    --font-family: #{var(--button-in-msg-font-family)};
 }
 
 
 .button-in-msg {
-
-    padding: 8px 16px!important;
+    padding: var(--padding);
     position: relative;
-    max-width: var(--max-width);
+    // max-width: var(--max-width);
     min-width: inherit;
     cursor: pointer;
     border: 1px solid var(--textColor); //$blue
@@ -22,7 +21,7 @@
     margin: 3px;
     background: var(--backgroundColor);
     overflow: hidden;
-    font-family: 'Muli', sans-serif;
+    font-family: var(--font-family);
     font-size: var(--buttonFontSize);
     -o-text-overflow: ellipsis;
     text-overflow: ellipsis;

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

@@ -1,5 +1,3 @@
-@import 'src/app/sass/variables';
-
 :host {
     --backgroundColor: #{var(--blue)};
     --textColor: #{var(--bck-msg-sent)};
@@ -7,6 +5,7 @@
     --hoverTextColor: #{var(--blue)};
     --buttonFontSize: #{var(--button-in-msg-font-size)};
     --max-width: #{var(--button-in-msg-max-width)};
+    --fontFamily: #{var(--font-family)};
 
     --cardWidth: 220px;
 }
@@ -203,7 +202,7 @@
         transition: all .3s;
 
         background: var(--backgroundColor);
-        font-family: 'Muli', sans-serif;
+        font-family: var(--fontFamily);
         font-size: var(--buttonFontSize);
         -o-text-overflow: ellipsis;
         text-overflow: ellipsis;

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

@@ -1,5 +1,3 @@
-// @import 'src/app/sass/variables';
-
 :host{
     // --borderRadius: #{$border-radius-bubble-message};
     --borderRadius: 8px;

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

@@ -1,5 +1,3 @@
-// @import 'src/app/sass/variables';
-
 :root {
     --themeColor: #{var(--blue)};
     --foregroundColor: #{var(--col-msg-sent)};
@@ -20,7 +18,7 @@
         margin: 3px;
         background: transparent;
         overflow: hidden;
-        font-family: 'Muli', sans-serif !important;
+        font-family: var(--font-family) !important;
         font-size: var(--buttonFontSize) !important;
         -o-text-overflow: ellipsis;
         text-overflow: ellipsis;

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

@@ -1,5 +1,3 @@
-// @import 'src/app/sass/variables';
-
 :host{
     // --borderRadius: #{$border-radius-bubble-message};
     --borderRadius: 8px;

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

@@ -1,5 +1,3 @@
-// @import 'src/app/sass/variables';
-
 .info-container{
     display: flex;
     align-content: center;

package/src/app/component/message/like-unlike/like-unlike.component.scss

@@ -1,5 +1,3 @@
-// @import 'src/app/sass/variables';
-
 :host{
     // --borderRadius: #{$border-radius-bubble-message};
     --borderRadius: 25px;

package/src/app/component/message/text/text.component.html

@@ -1,4 +1,6 @@
 <p  #messageEl class="message_innerhtml marked" 
-    [innerHTML]="printMessage(text, messageEl, this) | htmlEntitiesEncode | marked" 
-    [style.color]="color"
-    [style.font-size]="fontSize"></p>
+    [innerHTML]="printMessage(text, messageEl, this) | marked" 
+    [style.color]="color"></p>
+<!-- [style.font-size]="fontSize"></p> -->
+<!-- [innerHTML]="printMessage(text, messageEl, this) | htmlEntitiesEncode | marked"  -->
+

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

@@ -1,10 +1,8 @@
-// @import 'src/app/sass/variables';
-
 .message_innerhtml {
     margin: 0px;
     // padding: 0px 14px;
     &.marked{
-        padding:8px;
+        padding: 12px 16px;
         margin-block-start: 0em!important;
         margin-block-end: 0em!important;
     }
@@ -15,7 +13,7 @@
 }
 
 p {
-    font-size: 1.4em;
+    font-size: var(--font-size-bubble-message);
     margin: 0;
     padding: 14px;
     line-height: 1.4em;

package/src/app/component/message/text/text.component.ts

@@ -10,8 +10,6 @@ export class TextComponent implements OnInit {
   @Input() text: string;
   @Input() htmlEnabled: boolean = false;
   @Input() color: string;
-  @Input() fontSize: string;
-  @Input() fontFamily: string;
   @Output() onBeforeMessageRender = new EventEmitter();
   @Output() onAfterMessageRender = new EventEmitter();
 

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

@@ -12,7 +12,8 @@
         display: flex;
         flex-wrap: wrap;
         -webkit-box-pack: end;
-        justify-content: flex-end;
+        // justify-content: flex-end;
+        justify-content: flex-start;
         width: 100%;
         border: none;
     }

package/src/app/component/selection-department/selection-department.component.scss

@@ -1,7 +1,3 @@
-// @import 'src/app/sass/variables';
-// @import '../../../sass/normalize.css';
-
-
 #chat21-selection-department {
 
     --backgroundColor: #{var(--light-white)};
@@ -16,7 +12,7 @@
     .c21-header {
         overflow: hidden;
         width: 100%;
-        height: 52px;
+        height: var(--chat-header-height);
         .c21-header-button {
             .c21-close-button.c21-small {
                 width: 31px;

package/src/app/component/star-rating-widget/star-rating-widget.component.scss

@@ -1,7 +1,5 @@
 // @import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
 // @import url(https://use.fontawesome.com/releases/v5.5.0/css/all.css);
-// @import 'src/app/sass/variables';
-
 #chat21-star-rating-widget {
   background-color: #ffffff;
   width: 100%;
@@ -82,11 +80,6 @@
     .c21-body-content  {
       padding: 10px 0px;
       /* star-rating */
-      .default-title {
-        font-size: 2em;
-        font-family:'Roboto';
-        color:var(--black);
-      }
       .default-text {
         font-size: 1.4em;
         font-family:'Roboto';

package/src/app/pipe/marked.pipe.ts

@@ -9,12 +9,15 @@ import { marked } from 'marked';
 export class MarkedPipe implements PipeTransform {
   transform(value: any): any {
     const renderer = new marked.Renderer();
-    renderer.link = function(href, title, text) {
+    renderer.link = function({ href, title, tokens }) {
+        const text = tokens.map(token => token.raw).join('');
         const link = marked.Renderer.prototype.link.call(this, href, title, text);
         return link.replace('<a', '<a target="_blank" ');
     };
     marked.setOptions({
-        renderer: renderer
+        renderer: renderer,
+        gfm: true,
+        breaks: true
     });
     if (value && value.length > 0) {
       const text = marked(value);

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

@@ -10,7 +10,7 @@ import { TemplateBindingParseResult } from '@angular/compiler';
 import { AppStorageService } from '../../chat21-core/providers/abstract/app-storage.service';
 import { LoggerService } from '../../chat21-core/providers/abstract/logger.service';
 import { LoggerInstance } from '../../chat21-core/providers/logger/loggerInstance';
-import { invertColor, isJsonArray } from '../../chat21-core/utils/utils';
+import { invertColor, isAllowedUrlInText, isJsonArray } from '../../chat21-core/utils/utils';
 import { AppConfigService } from './app-config.service';
 
 
@@ -331,6 +331,8 @@ export class GlobalSettingsService {
         this.globals.setColorWithGradient();
         /** set css iframe from parameters */
         this.setCssIframe();
+        /** set main style */
+        this.setStyle();
 
         this.logger.debug('[GLOBAL-SET] ***** END SET PARAMETERS *****');
         this.obsSettingsService.next(true);
@@ -373,8 +375,36 @@ export class GlobalSettingsService {
             divTiledeskiframe.style.height = '100%';
             divTiledeskiframe.style.maxHeight = 'none';
             divTiledeskiframe.style.maxWidth = 'none';
+            // divTiledeskiframe.classList.add('fullscreen')
+            divTiledeskiframe.classList.remove('min-size')
+            divTiledeskiframe.classList.remove('max-size')
+            divTiledeskiframe.classList.remove('top-size')
+
+        }
+    }
+
+    setStyle(){
+
+        /** load custom FONT */
+        if(this.globals.fontFamily && this.globals.fontFamilySource){
+            this.loadFont(this.globals.fontFamily, this.globals.fontFamilySource)
         }
     }
+    loadFont(family: string, href: string,) {
+        const mainFont = family.split(",")[0].replace(/['"]/g, "").trim(); // es. "Montserrat"
+
+        if (document.querySelector(`link[data-font='${mainFont}']`)) {
+            return;
+        }
+
+        const link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.href = href;
+        link.setAttribute('data-font', mainFont); // marker pulito
+        document.head.appendChild(link);
+
+        document.documentElement.style.setProperty('--font-family', family);
+    }
     /**
      * A: setVariablesFromService
      */
@@ -516,6 +546,15 @@ export class GlobalSettingsService {
                     if (variables.hasOwnProperty('showAudioRecorderFooterButton')) {
                         globals['showAudioRecorderFooterButton'] = variables['showAudioRecorderFooterButton'];
                     }
+                    if (variables.hasOwnProperty('allowedOnSpecificUrl')) {
+                        globals['allowedOnSpecificUrl'] = variables['allowedOnSpecificUrl'];
+                    }
+                    if (variables.hasOwnProperty('allowedOnSpecificUrlList')) {
+                        globals['allowedOnSpecificUrlList'] = variables['allowedOnSpecificUrlList'];
+                    }
+                    if (variables.hasOwnProperty('allowedUploadExtentions')) {
+                        globals['fileUploadAccept'] = variables['allowedUploadExtentions'];
+                    }
                     
                 }
             }
@@ -728,13 +767,19 @@ export class GlobalSettingsService {
         TEMP = tiledeskSettings['fullscreenMode'];
         // this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > fullscreenMode:: ', TEMP);
         if (TEMP !== undefined) {
-            globals.fullscreenMode = TEMP;
+            globals.fullscreenMode = (TEMP === true) ? true : false;
             // globals.setParameter('fullscreenMode', TEMP);
         }
         TEMP = tiledeskSettings['hideHeaderCloseButton'];
         // this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > hideHeaderCloseButton:: ', TEMP);
         if (TEMP !== undefined) {
-            globals.hideHeaderCloseButton = TEMP;
+            globals.hideHeaderCloseButton = (TEMP === true) ? true : false;
+            // globals.setParameter('hideHeaderCloseButton', TEMP);
+        }
+        TEMP = tiledeskSettings['hideHeaderConversation'];
+        // this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > hideHeaderCloseButton:: ', TEMP);
+        if (TEMP !== undefined) {
+            globals.hideHeaderConversation = (TEMP === true) ? true : false;
             // globals.setParameter('hideHeaderCloseButton', TEMP);
         }
         TEMP = tiledeskSettings['themeColor'];
@@ -877,7 +922,7 @@ export class GlobalSettingsService {
             globals.hideSettings = (TEMP === true) ? true : false;;
         }
         TEMP = tiledeskSettings['isLogEnabled'];
-        // this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > logLevel:: ', TEMP]);
+        // this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > isLogEnabled:: ', TEMP]);
         if (TEMP !== undefined) {
             globals.isLogEnabled = TEMP;
         }
@@ -923,7 +968,12 @@ export class GlobalSettingsService {
         TEMP = tiledeskSettings['fontFamily'];
         // this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > fontFamily:: ', TEMP]);
         if (TEMP !== undefined) {
-            globals.fontFamily = TEMP;
+            globals.fontFamily = TEMP + ',' + globals.fontFamily;
+        }
+        TEMP = tiledeskSettings['fontFamilySource'];
+        // this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > fontFamilySource:: ', TEMP]);
+        if (TEMP !== undefined) {
+            globals.fontFamilySource = TEMP;
         }
         TEMP = tiledeskSettings['buttonFontSize'];
         // this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > buttonFontSize:: ', TEMP]);
@@ -970,7 +1020,7 @@ export class GlobalSettingsService {
             globals.nativeRating = (TEMP === true) ? true : false;
         }
         TEMP = tiledeskSettings['showInfoMessage'];
-        // this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > showBubbleInfoMessage:: ', TEMP]);
+        // this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > showInfoMessage:: ', TEMP]);
         if (TEMP !== undefined) {
             globals.showInfoMessage = TEMP.split(',').map(key => { return key.trim()});
         }
@@ -1013,7 +1063,7 @@ export class GlobalSettingsService {
             globals.telegramUsername = TEMP;
         }
         TEMP = tiledeskSettings['fileUploadAccept'];
-        // this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > telegramUsername:: ', TEMP]);
+        // this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > fileUploadAccept:: ', TEMP]);
         if (TEMP !== undefined) {
             globals.fileUploadAccept = TEMP;
         } 
@@ -1053,9 +1103,14 @@ export class GlobalSettingsService {
             globals.showEmojiFooterButton = (TEMP === true) ? true : false;
         } 
         TEMP = tiledeskSettings['showAudioRecorderFooterButton'];
-        // this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > showEmojiFooterButton:: ', TEMP]);
+        // this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > showAudioRecorderFooterButton:: ', TEMP]);
         if (TEMP !== undefined) {
             globals.showAudioRecorderFooterButton = (TEMP === true) ? true : false;
+        }
+        TEMP = tiledeskSettings['size'];
+        // this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > size:: ', TEMP]);
+        if (TEMP !== undefined) {
+            globals.size = TEMP;
         } 
     }
 
@@ -1254,7 +1309,11 @@ export class GlobalSettingsService {
         }
         TEMP = el.nativeElement.getAttribute('fontFamily');
         if (TEMP !== null) {
-            this.globals.fontFamily = TEMP;
+            this.globals.fontFamily = TEMP + ',' + this.globals.fontFamily;
+        }
+        TEMP = el.nativeElement.getAttribute('fontFamilySource');
+        if (TEMP !== null) {
+            this.globals.fontFamilySource = TEMP;
         }
         TEMP = el.nativeElement.getAttribute('buttonFontSize');
         if (TEMP !== null) {
@@ -1469,6 +1528,11 @@ export class GlobalSettingsService {
             globals.hideHeaderCloseButton = stringToBoolean(TEMP);
         }
 
+        TEMP = getParameterByName(windowContext, 'tiledesk_hideHeaderConversation');
+        if (TEMP) {
+            globals.hideHeaderConversation = stringToBoolean(TEMP);
+        }
+
         TEMP = getParameterByName(windowContext, 'tiledesk_themeColor');
         if (TEMP) {
             const themecolor = stringToBoolean(TEMP);
@@ -1789,6 +1853,11 @@ export class GlobalSettingsService {
         if (TEMP) {
             globals.showEmojiFooterButton = stringToBoolean(TEMP);
         }
+
+        TEMP = getParameterByName(windowContext, 'tiledesk_size');
+        if (TEMP) {
+            globals.size = TEMP;
+        }
         
     }
 
@@ -1970,4 +2039,34 @@ export class GlobalSettingsService {
         }
     }
 
+    manageLoadingDomains(): boolean {
+        const { allowedOnSpecificUrl, allowedOnSpecificUrlList } = this.globals;
+        
+        if(!allowedOnSpecificUrl){
+            return true
+        }
+
+        if (!Array.isArray(allowedOnSpecificUrlList) || allowedOnSpecificUrlList.length === 0) {
+            console.log('allowedOnSpecificUrl is true and allowedOnSpecificUrlList is empty or not set');
+            return true
+        }
+
+        function wildcardToRegex(pattern: string): RegExp {
+            // Escape caratteri speciali della regex, tranne * che poi sostituiremo
+            const escaped = pattern.replace(/[-/\\^+?.()|[\]{}]/g, '\\$&');
+            // Sostituisci * con .*
+            const regexPattern = '^' + escaped.replace(/\*/g, '.*') + '$';
+            return new RegExp(regexPattern);
+        }
+        
+        const currentUrl = this.globals.windowContext.location.href;
+        const shouldShow = allowedOnSpecificUrlList.some(pattern => {
+            const regex = wildcardToRegex(pattern);
+            return regex.test(currentUrl);
+        });
+        
+        // let isAllowedToLoad = !isAllowedUrlInText(this.globals.windowContext.location.origin, this.globals.hideOnSpecificDomainList)
+        return shouldShow
+    }
+
 }

package/src/app/sass/_variables.scss

@@ -20,13 +20,17 @@
 
     --border-radius-bubble-message: 20px;
     --button-in-msg-font-size: 15px;
+    --button-in-msg-font-family: 'Roboto','Google Sans', Helvetica, Arial, sans-serif;
     --button-in-msg-max-width: 280px;
+    --button-in-msg-padding: 8px 16px;
 
     --max-width-images: 230px; //change also MAX_WIDTH_IMAGES in constants.ts
 
     --bkg-color-info-message: rgba(24, 119, 242, 0.1);
 
-    --chat-footer-height: 56px;
+    --chat-header-height: 52px;
+    
+    --chat-footer-height: 64px;
     --chat-footer-logo-height: 30px;
     --chat-footer-border-radius: 16px;
     --chat-footer-background-color: #f6f7fb;
@@ -35,9 +39,19 @@
 
     --icon-fill-color: #5f6368;
 
-
     --content-background-color: #fff;
     --content-text-color: var(--black);
+
+    --avatar-height: 40px;
+    --avatar-width: 40px;
+
+
+    --font-family: 'Roboto','Google Sans', Helvetica, Arial, sans-serif; //Mulish, sans-serif;
+    --font-family-bubble-message: 'Roboto','Google Sans', Helvetica, Arial, sans-serif;
+    --font-family-callout: 'Helvetica Neue', 'Apple Color Emoji', Helvetica, Arial, sans-serif; 
+    --font-family-powered-by: Mulish, sans-serif;
+
+    --font-size-bubble-message: 1.4em;
 }
 
 $trasp-black:rgba(0,0,0,0.8);

package/src/app/utils/constants.ts

@@ -73,6 +73,7 @@ export const HEADER_MENU_OPTION = {
     DETAIL      :   'detail',
     RESTART     :   'restart',
     MAXIMIZE    :   'maximize',
-    MINIMIZE    :   'minimize'
+    MINIMIZE    :   'minimize',
+    TOP  :          'top'
 }