@chat21/chat21-web-widget 5.1.1-rc1 → 5.1.4

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

@@ -3,33 +3,38 @@
     --textColor: #{var(--bck-msg-sent)};
     --hoverBackgroundColor: #{var(--bck-msg-sent)};
     --hoverTextColor: #{var(--blue)};
-    --buttonFontSize: #{var(--button-in-msg-font-size)};
+    --buttonFontSize2: #{var(--button-font-size)};
     --max-width: #{var(--button-in-msg-max-width)};
     --padding: #{var(--button-in-msg-padding)};
-    --fontFamily: #{var(--button-in-msg-font-family)};
+    --font-family: #{var(--button-in-msg-font-family)};
+    --buttonBorderColor: #{var(--button-border-color)};
+    --buttonColor: #{var(--button-color)};
+    --buttonBackgroundColor: #ffffff; //#{var(--button-background-color)};
 }
 
 .button-in-msg {
     padding: var(--padding);
-    // position: relative;
-    // max-width: var(--max-width);
+    position: relative;
     min-width: inherit;
     cursor: pointer;
-    border: 1px solid var(--textColor);
-    border-radius: 20px;
-    margin: 3px;
-    background: var(--backgroundColor);
+    border: 1px solid var(--buttonBorderColor);
+    background: var(--buttonBackgroundColor);
+    font-family: var(--font-family);
+    font-size: var(--buttonFontSize2);
+    color: var(--textColor);
     overflow: hidden;
-    font-family: var(--fontFamily);
-    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;
-    color: var(--textColor);
     line-height: 16px;
+    font-weight: 500;
+    border-radius: 12px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
+    padding: 10px 16px;
+    margin: 3px;
+    transition: background-color .2s ease;
 }
 
 .action {
@@ -39,7 +44,7 @@
     &:hover {
         color: var(--hoverTextColor);
         background:  var(--hoverBackgroundColor);
-        transform: scale(1.05);
+        // transform: scale(1.05);
         .icon-button-action {
             svg {
                 fill: var(--hoverTextColor);

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

@@ -3,32 +3,39 @@
     --textColor: #{var(--bck-msg-sent)};
     --hoverBackgroundColor: #{var(--bck-msg-sent)};
     --hoverTextColor: #{var(--blue)};
-    --buttonFontSize: #{var(--button-in-msg-font-size)};
+    --buttonFontSize2: #{var(--button-font-size)};
     --max-width: #{var(--button-in-msg-max-width)};
     --padding: #{var(--button-in-msg-padding)};
     --font-family: #{var(--button-in-msg-font-family)};
+    --buttonBorderColor: #{var(--button-border-color)};
+    --buttonColor: #{var(--button-color)};
+    --buttonBackgroundColor: #ffffff; //#{var(--button-background-color)};
 }
 
+
 .button-in-msg {
     padding: var(--padding);
     position: relative;
-    // max-width: var(--max-width);
     min-width: inherit;
     cursor: pointer;
-    border: 1px solid var(--textColor);
-    border-radius: 20px;
-    margin: 3px;
-    background: var(--backgroundColor);
-    overflow: hidden;
+    border: 1px solid var(--buttonBorderColor);
+    background: var(--buttonBackgroundColor);
     font-family: var(--font-family);
-    font-size: var(--buttonFontSize);
+    font-size: var(--buttonFontSize2);
+    color: var(--textColor);
+    overflow: hidden;
     -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
     white-space: nowrap;
-    letter-spacing: -0.24px;
+    word-wrap: break-word;
     -webkit-font-smoothing: antialiased;
-    color: var(--textColor);
     line-height: 16px;
+    font-weight: 500;
+    border-radius: 12px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
+    padding: 10px 16px;
+    margin: 3px;
+    transition: background-color .2s ease;
 }
 
 .url {
@@ -52,7 +59,7 @@
     &:hover {
         color: var(--hoverTextColor);
         background:  var(--hoverBackgroundColor);
-        transform: scale(1.05);
+        // transform: scale(1.05);
         .icon-button-action, .icon-button-action-self {
             svg {
                 fill: var(--hoverTextColor);

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

@@ -3,34 +3,43 @@
     --textColor: #{var(--bck-msg-sent)};
     --hoverBackgroundColor: #{var(--bck-msg-sent)};
     --hoverTextColor: #{var(--blue)};
-    --buttonFontSize: #{var(--button-in-msg-font-size)};
+    --buttonFontSize2: #{var(--button-font-size)};
     --max-width: #{var(--button-in-msg-max-width)};
     --padding: #{var(--button-in-msg-padding)};
     --font-family: #{var(--button-in-msg-font-family)};
+    --buttonBorderColor: #{var(--button-border-color)};
+    // --buttonColor: #{var(--buttonColor)};
+    --buttonBackgroundColor: #ffffff; //#{var(--button-background-color)};
+    --buttonColor: #{var(--button-color)};
 }
 
 
 .button-in-msg {
     padding: var(--padding);
     position: relative;
-    // max-width: var(--max-width);
     min-width: inherit;
     cursor: pointer;
-    border: 1px solid var(--textColor); //$blue
-    border-radius: 20px;
-    margin: 3px;
-    background: var(--backgroundColor);
-    overflow: hidden;
+    border: 1px solid var(--buttonBorderColor);
+    background: var(--buttonBackgroundColor);
+    // background: var(--backgroundColor);
     font-family: var(--font-family);
-    font-size: var(--buttonFontSize);
+    font-size: var(--buttonFontSize2);
+    // color: var(--buttonColor);
+    color: var(--textColor);
+    overflow: hidden;
     -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
     // white-space: nowrap;
     word-wrap: break-word;
-    letter-spacing: -0.24px;
+    // letter-spacing: -0.24px;
     -webkit-font-smoothing: antialiased;
-    color: var(--textColor); //$blue
     line-height: 16px;
+    font-weight: 500;
+    border-radius: 12px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
+    padding: 10px 16px;
+    margin: 3px;
+    transition: background-color .2s ease;
 }
 
 .text {
@@ -40,7 +49,7 @@
     &:hover {
         color: var(--hoverTextColor);
         background: var(--hoverBackgroundColor);
-        transform: scale(1.05);
+        // transform: scale(1.05);
         .icon-button-action {
             svg {
                 fill: var(--black);

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

@@ -3,7 +3,7 @@
     --textColor: #{var(--bck-msg-sent)};
     --hoverBackgroundColor: #{var(--bck-msg-sent)};
     --hoverTextColor: #{var(--blue)};
-    --buttonFontSize: #{var(--button-in-msg-font-size)};
+    --buttonFontSize: #{var(--button-font-size)};
     --max-width: #{var(--button-in-msg-max-width)};
     --fontFamily: #{var(--font-family)};
 
@@ -85,16 +85,15 @@
     align-items: center;
 }
 .carousel .card { 
-    // padding: 0px 5px;
     scroll-snap-align: start;
     width: var(--cardWidth);
     background: rgb(255, 255, 255);
     list-style: none;
     cursor: pointer;
-    // padding-bottom: 15px;
     flex-direction: column;
     border-radius: 8px;
-    box-shadow: 0 3px 6px rgba(0,0,0,0.23);
+    border: 1px solid rgba(0, 0, 0, 0.05);
+    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.04);
 }
 .carousel .card .card-image {
     height: 150px;
@@ -143,24 +142,33 @@
     display: flex;
     -ms-flex-direction: column;
     flex-direction: column;
-    padding: 0 20px 30px;
-
+    padding: 20px 20px;
     .card-title{
+        // word-wrap: break-word;
+        // font-size: 13px;
+        // font-weight: 600;
+        // line-height: 20px;
+        // // margin-top: 12px;
+        // white-space: pre-wrap;
+        // width: 100%;
         word-wrap: break-word;
-        font-size: 16px;
-        font-weight: 600;
-        line-height: 20px;
-        margin-top: 12px;
-        white-space: pre-wrap;
-        width: 100%;
+        font-size: 1.1em;
+        font-weight: 500;
+        font-family: var(--font-family);
+        color: #333;
     }
 
     .card-description{
+        // word-wrap: break-word;
+        // font-size: 16px;
+        // line-height: 20px;
+        // margin-top: 12px;
+        // white-space: pre-wrap;
         word-wrap: break-word;
-        font-size: 16px;
-        line-height: 20px;
-        margin-top: 12px;
+        font-size: 1.0em;
+        margin-top: 6px;
         white-space: pre-wrap;
+        font-weight: 300;
     }
 
 }
@@ -190,7 +198,7 @@
         -ms-flex-align: center;
         align-items: center;
         justify-content: center;
-        border-top: 1px solid var(--textColor);
+        border-top: 1px dashed rgba(0, 0, 0, 0.08);
         cursor: pointer;
         display: -webkit-box;
         display: -ms-flexbox;
@@ -218,7 +226,7 @@
         &:hover {
             color: var(--hoverTextColor);
             background:  var(--hoverBackgroundColor);
-            // transform: scale(1.05);
+            transform: scale(1.05);
             .icon-button-action {
                 svg {
                     fill: var(--hoverTextColor);

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

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

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

@@ -3,11 +3,15 @@
 
     <span *ngFor="let button of buttons | slice:0:limit" class="div-button">
       
+      <!-- 
+      // bubbleReceivedBackground
+      // buttonBackgroundColor 
+      -->
       <chat-text-button-attachment *ngIf="button.type === 'text' && isLastMessage === true" class="div-button"
         [button]="button"
         [isConversationArchived]="isConversationArchived"
         [fontSize]="stylesMap.get('buttonFontSize')"
-        [backgroundColor]="stylesMap.get('buttonBackgroundColor')"
+        [backgroundColor]="stylesMap.get('bubbleReceivedBackground')"
         [textColor]="stylesMap.get('buttonTextColor')"
         [hoverBackgroundColor]="stylesMap.get('buttonHoverBackgroundColor')"
         [hoverTextColor]="stylesMap.get('buttonHoverTextColor')"
@@ -17,7 +21,7 @@
       <chat-link-button-attachment *ngIf="button.type === 'url'" class="div-button"
         [button]="button"
         [fontSize]="stylesMap.get('buttonFontSize')"
-        [backgroundColor]="stylesMap.get('buttonBackgroundColor')"
+        [backgroundColor]="stylesMap.get('bubbleReceivedBackground')"
         [textColor]="stylesMap.get('buttonTextColor')"
         [hoverBackgroundColor]="stylesMap.get('buttonHoverBackgroundColor')"
         [hoverTextColor]="stylesMap.get('buttonHoverTextColor')"
@@ -28,7 +32,7 @@
         [button]="button"
         [isConversationArchived]="isConversationArchived"
         [fontSize]="stylesMap.get('buttonFontSize')"
-        [backgroundColor]="stylesMap.get('buttonBackgroundColor')"
+        [backgroundColor]="stylesMap.get('bubbleReceivedBackground')"
         [textColor]="stylesMap.get('buttonTextColor')"
         [hoverBackgroundColor]="stylesMap.get('buttonHoverBackgroundColor')"
         [hoverTextColor]="stylesMap.get('buttonHoverTextColor')"

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

@@ -1,11 +1,12 @@
 #buttons-in-message {
     text-align: right;
     display: block;
-    margin-right: 16px; //align attachment-buttons to bubble sent message
+    // margin-right: 16px; //align attachment-buttons to bubble sent message
     height: auto;
     // width: 85%;
     max-width: 95%;
-    float: right;
+    float: left;
+    padding-left: calc(var(--avatar-width) + 10px);
 
     .buttons-wrapper {
         margin-top: 0px;

package/src/app/component/send-button/send-button.component.html

@@ -2,7 +2,7 @@
 
 <button aflauncherbutton #aflauncherbutton id="c21-launcher-button" class="c21-button-clean scale-in-center c21-align-right" 
     *ngIf="g.isLogged == true" 
-    [ngStyle]="{ 'background-color': g.themeColor, 'bottom': g.marginY+'px!important', 'left':(g.align==='left')?g.marginX+'px!important':'', 'right':(g.align==='right')?g.marginX+'px!important':'', 'width': g.launcherWidth, 'height': g.launcherHeight, 'border-radius': g.baloonShape}"
+    [style]="{ 'background-color': g.themeColor, 'bottom': g.marginY+'px!important', 'left':(g.align==='left')?g.marginX+'px!important':'', 'right':(g.align==='right')?g.marginX+'px!important':'', 'width': g.launcherWidth, 'height': g.launcherHeight, 'border-radius': g.baloonShape}"
     (click)="onSendPressed($event)"
     tabindex="1000" 
     aria-label="    apri chat"
@@ -12,7 +12,7 @@
     <!-- [@enterBubbleAnimation] -->
     <div class="launcher-button rotate-center" >
         <!-- <img *ngIf="g.baloonImage !== '' " [src]="g.baloonImage" [ngStyle]="{'width': '100%', 'height': '100%', 'margin': 'auto'}"> -->
-        <svg role="img" [ngStyle]="{'fill': g.themeForegroundColor, 'display': (g.baloonImage==='')?'':'none' }" xmlns="http://www.w3.org/2000/svg" width="100%"
+        <svg role="img" [style]="{'fill': g.themeForegroundColor, 'display': (g.baloonImage==='')?'':'none' }" xmlns="http://www.w3.org/2000/svg" width="100%"
             height="100%" viewBox="0 0 90 90">
             <!-- <path fill="none" d="M0 0h24v24H0V0z" />
             <path d="M33.57,31A4.58,4.58,0,0,0,29,35.57V58.3a1.94,1.94,0,0,0,3.32,1.38l3-3a.29.29,0,0,1,.21-.09H56.43A4.58,4.58,0,0,0,61,52V35.57A4.58,4.58,0,0,0,56.43,31Z" /> -->

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

@@ -1,5 +1,6 @@
 import { Pipe, PipeTransform } from '@angular/core';
 import { marked } from 'marked';
+import { BLOCKED_DOMAINS } from '../utils/utils';
 
 
 @Pipe({
@@ -10,6 +11,55 @@ export class MarkedPipe implements PipeTransform {
   transform(value: any): any {
     const renderer = new marked.Renderer();
     renderer.link = function({ href, title, tokens }) {
+      // Normalizza l'href per evitare falsi negativi
+      const normalized = (href || '').trim().toLowerCase();
+      // Pattern pericolosi da cercare nell'intero URL (non solo all'inizio)
+      const dangerousPatterns = [
+        /javascript:/i,           // javascript: protocol
+        /data:/i,                // data: protocol  
+        /vbscript:/i,            // vbscript: protocol
+        /on\w+\s*=/i,           // event handlers (onclick, onload, etc.)
+        /alert\s*\(/i,          // alert() function
+        /eval\s*\(/i,           // eval() function
+        /document\./i,          // document object access
+        /window\./i,            // window object access
+        /\.appendChild\s*\(/i,  // DOM manipulation
+        /\.createElement\s*\(/i, // DOM creation
+        /<script/i,             // script tags
+        /<\/script>/i,          // closing script tags
+        /function\s*\(/i,       // function definitions
+        /\(function/i,          // IIFE patterns
+        /setTimeout\s*\(/i,     // setTimeout
+        /setInterval\s*\(/i,    // setInterval
+        /location\./i,          // location object manipulation
+        /history\./i,           // history object manipulation
+        /localStorage\./i,      // localStorage access
+        /sessionStorage\./i,    // sessionStorage access
+        /cookie/i,              // cookie manipulation
+        /fetch\s*\(/i,          // fetch API
+        /XMLHttpRequest/i,      // XHR
+        /FormData/i,            // FormData
+        /Blob\s*\(/i,           // Blob constructor
+        /FileReader/i,          // FileReader
+        /crypto\./i,            // crypto object
+        /btoa\s*\(/i,           // base64 encoding
+        /atob\s*\(/i,           // base64 decoding
+        /decodeURI/i,           // URI decoding
+        /encodeURI/i,           // URI encoding
+        /String\.fromCharCode/i, // character code conversion
+        /unescape\s*\(/i,       // unescape function
+        /escape\s*\(/i          // escape function
+      ];
+
+      // Controlla se l'URL contiene pattern pericolosi
+      const isDangerous = dangerousPatterns.some(pattern => pattern.test(normalized));
+      if (isDangerous) {
+        // Ritorna solo il testo come stringa, niente <a>
+        return tokens ? tokens.map(token => token.raw).join('') : href || '';
+      }
+
+      // tokens = this.cleanInput(href);
+
       const text = tokens
         ? tokens.map(token => token.raw).join('')
         : href; // fallback se tokens non c'è
@@ -17,7 +67,7 @@ export class MarkedPipe implements PipeTransform {
 
       return `<a href="${href}" target="_blank" rel="noopener noreferrer">${text}</a>`;
     };
-
+    
     marked.setOptions({
       renderer,
       gfm: true,
@@ -35,4 +85,73 @@ export class MarkedPipe implements PipeTransform {
     return value;
   }
 
+
+  private cleanInput(input: string): string {
+    if (!input) return '';
+    let cleaned = (input || '').trim().toLowerCase();
+
+    BLOCKED_DOMAINS.forEach(domain => {
+    const escapedDomain = domain.replace(/\./g, '\\.');
+    // Pattern che copre TUTTI i casi
+    const comprehensivePattern = new RegExp(
+      `(\\[([^\\]]*)\\]\\([^)]*(?:https?://)?(?:www\\.)?${escapedDomain}(?:/[^)]*)?\\))|((?:https?://)?(?:www\\.)?${escapedDomain}(?:/\\S*)?)`,
+      'gi'
+    );
+    
+    cleaned = cleaned.replace(comprehensivePattern, (match, p1, p2, p3) => {
+      // Se è un link markdown [text](url), mantieni il testo
+      if (p2) return `${p2} 🔒`;
+      // Se è un URL diretto, sostituisci con dominio + 🔒
+      if (p3) return `${domain} 🔒`;
+      return match;
+      });
+   
+    });
+
+
+    // Pattern che sostituisce i link pericolosi con solo il testo
+    const dangerousLinkPatterns = [
+      // Sostituisce [text](javascript:...) con "text"
+      /\[([^\]]*)\]\(javascript:[^)]*\)/gi,
+      /\[([^\]]*)\]\(data:[^)]*\)/gi,
+      /\[([^\]]*)\]\(vbscript:[^)]*\)/gi,
+      /\[([^\]]*)\]\([^)]*alert\([^)]*\)/gi
+    ];
+
+    dangerousLinkPatterns.forEach(pattern => {
+      cleaned = cleaned.replace(pattern, '$1'); // $1 = il testo del link
+    });
+
+    // Pattern generali per sicurezza (rimuovono completamente)
+    const generalPatterns = [
+      /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi,
+      /<script[^>]*>[\s\S]*?<\/script>/gi, // Script multi-linea
+      /<script[^>]*>.*?<\/script>/gi, // Script single-line
+      /<script[^>]*>/gi, // Solo tag di apertura
+      /<\/script>/gi, // Solo tag di chiusura
+      /javascript:/gi,
+      /vbscript:/gi,
+      /data:/gi,
+      /on\w+\s*=/gi,
+      /alert\(/gi,
+      /eval\(/gi,
+      /document\./gi,
+      /window\./gi,
+      /\(function\s*\(\)\s*\{/gi,
+      /\.appendChild\(/gi,
+      /\.createElement\(/gi,
+      /\.getElementsByTagName\(/gi,
+    
+      // ✅ PATTERN PER FUNZIONI IIFE (Immediately Invoked Function Expression):
+      /\(function\s*\(\s*\)\s*\{[\s\S]*?\}\)\(\s*\)\s*;/gi,
+      /\(function\s*\(\)\s*\{/gi
+    ];
+
+    generalPatterns.forEach(pattern => {
+      cleaned = cleaned.replace(pattern, '');
+    });
+
+    return cleaned;
+  }
+
 }

package/src/app/sass/_variables.scss

@@ -19,10 +19,14 @@
     --col-msg-sent: #ffffff;
 
     --border-radius-bubble-message: 20px;
-    --button-in-msg-font-size: 15px;
+    --button-in-msg-font-size: 13px;
     --button-in-msg-font-family: 'Roboto','Google Sans', Helvetica, Arial, sans-serif;
     --button-in-msg-max-width: 280px;
     --button-in-msg-padding: 8px 16px;
+    --button-color: #5c6c73;
+    --button-background-color: #f5f5f5; // #f9fcff;
+    --button-border-color: #0000000f; //#e4ebf2; 
+    --button-font-size: 13px;
 
     --max-width-images: 230px; //change also MAX_WIDTH_IMAGES in constants.ts
 
@@ -42,15 +46,16 @@
     --content-background-color: #fff;
     --content-text-color: var(--black);
 
+    --avatar-height: 20px;
+    --avatar-width: 20px;
+
+
     --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;
-
-    --avatar-height: 40px;
-    --avatar-width: 40px;
 }
 
 $trasp-black:rgba(0,0,0,0.8);

package/src/app/utils/globals.ts

@@ -294,6 +294,9 @@ export class Globals {
     * false the WAITING_TIME_NOT_FOUND will always be displayed) 
     * is set to true for backward compatibility with old projects */
     this.dynamicWaitTimeReply = true;  
+    /** Hide the close button in the widget header. Permitted values: true,
+    false. The default value is false. */
+    this.hideHeaderCloseButton = false;
 
     /** if it is true, the chat window is open in fullscreen mode. Permitted
     values: true, false. Default value : false */
@@ -335,13 +338,15 @@ export class Globals {
     /** set launcher balon widget shape: can set corner by corner   */
     this.baloonShape = '50%';
     // this.parameters['isLogEnabled'] = false;
-    this.isLogEnabled = false;
+    this.openExternalLinkButton = true;
     /** Hide the header conversation Permitted values: true,
     false. The default value is false. */
     this.hideHeaderConversation= false;
     /** Hide the close button in the widget header. Permitted values: true,
     false. The default value is false. */
     this.hideHeaderCloseButton = false;
+    /** set global log. Permitted values: true, false. The default value is false.   */
+    this.isLogEnabled = false;
     /** enable to hide/show upper-right header conversation options menu */
     this.openExternalLinkButton = true;
     /** enable to close a conversation from upper-right header menu  */
@@ -361,7 +366,7 @@ export class Globals {
     /** set the text color of bubble sent message */
     this.bubbleSentTextColor = convertColorToRGBA('#ffffff', 100); //'#ffffff'
     /** set the background of bubble received message */
-    this.bubbleReceivedBackground= convertColorToRGBA('#f0f2f7', 100); //#f7f7f7;
+    this.bubbleReceivedBackground= convertColorToRGBA('#f5f5f5', 100); //#f7f7f7; //#f0f2f7 //#f5f5f5
     /** set the text color of bubble received message */
     this.bubbleReceivedTextColor = convertColorToRGBA('#06132b', 100); //#1a1a1a
     /** set the text size of bubble messages */
@@ -401,7 +406,7 @@ export class Globals {
     /**enable user to set a telegram number to chat with */
     this.telegramUsername = ''
     /**enable auto disconnect from messaging after a defined amount of time (s)*/
-    this.fileUploadAccept = "image/*,.pdf,.txt,.mp3"
+    this.fileUploadAccept = '';//image/*,.pdf,.txt,.mp3,.xls,.xlsx"
     this.disconnetTime = 0
 
     this.showWaitTime = true;