@chat21/chat21-web-widget 5.1.33-rc9 → 5.1.34-rc1

package/CHANGELOG.md

@@ -6,6 +6,20 @@
 ### **Copyrigth**: 
 *Tiledesk SRL*
 
+
+# 5.1.34-rc1
+- **added**: onPageChangeVisibilityDesktop:'open' and 'onPageChangeVisibilityMobile: 'open' in chatbot-panel.html file
+
+# 5.1.33-rc12
+- **bug-fixed**: if last message is ulr_preview shows previous message buttons
+
+# 5.1.33-rc11
+- **changed**: **Stream audio** — updated the streaming/voice-mode footer icon.
+- **added**: **Stream audio** — tooltip on the stream button (i18n key `STREAM_AUDIO`, e.g. “Use voice mode”) via SVG `<title>` and `aria-label`.
+
+# 5.1.33-rc10
+- **bug-fixed**: fixed bug with knowledge base json sources without URLs
+
 # 5.1.33-rc9
 - **changed**: **Conversation footer** — accessibility-focused markup (ARIA roles/labels, live regions, semantic send control), stream-audio layout (wrapper + voice mode: hide attach/emoji while streaming, inline status, stream button + spectrum), optional **Close chat** action when `closeChatInConversation` is enabled; emoji restriction alert uses assertive live region semantics.
 - **bug-fixed**: **`getConversationDetail` Tiledesk fallback** — when `getMyRequests()` rejects, the conversation is treated as archived (`isConversationArchived = true`) and the handler returns immediately instead of resetting state from an empty fallback payload.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@chat21/chat21-web-widget",
   "author": "Tiledesk SRL",
-  "version": "5.1.33-rc9",
+  "version": "5.1.34-rc1",
   "license": "MIT",
   "homepage": "https://www.tiledesk.com",
   "repository": {

package/src/app/component/conversation-detail/conversation/conversation.component.ts

@@ -264,7 +264,9 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
       'CLOSE',
       'VOICE_CONNECTING',
       'VOICE_LISTENING',
-      'VOICE_PROCESSING'
+      'VOICE_PROCESSING',
+      'STREAM_AUDIO',
+      'MAX_ATTACHMENT'
     ];
 
     const keysContent = [

package/src/app/component/conversation-detail/conversation-content/conversation-content.component.spec.ts

@@ -264,11 +264,4 @@ describe('ConversationContentComponent', () => {
     });
   });
 
-  describe('ngAfterContentChecked', () => {
-    it('should trigger change detection', () => {
-      spyOn((component as any).cdref, 'detectChanges');
-      component.ngAfterContentChecked();
-      expect((component as any).cdref.detectChanges).toHaveBeenCalled();
-    });
-  });
 });

package/src/app/component/conversation-detail/conversation-content/conversation-content.component.ts

@@ -1,4 +1,5 @@
-import { ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
+import { ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, OnInit, OnDestroy, Output, SimpleChanges, ViewChild } from '@angular/core';
+import { Subscription } from 'rxjs';
 import { MAX_WIDTH_IMAGES, MSG_STATUS_RETURN_RECEIPT, MSG_STATUS_SENT, MSG_STATUS_SENT_SERVER } from 'src/app/utils/constants';
 import { MessageModel } from 'src/chat21-core/models/message';
 import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
@@ -12,7 +13,7 @@ import { isCarousel, isEmojii, isFirstMessage, isFrame, isImage, isInfo, isLastM
   templateUrl: './conversation-content.component.html',
   styleUrls: ['./conversation-content.component.scss']
 })
-export class ConversationContentComponent implements OnInit {
+export class ConversationContentComponent implements OnInit, OnDestroy {
   @ViewChild('scrollMe') public scrollMe: ElementRef;
   
   @Input() messages: MessageModel[]
@@ -73,6 +74,7 @@ export class ConversationContentComponent implements OnInit {
   showUploadProgress: boolean = false;
   fileType: string;
   private logger: LoggerService = LoggerInstance.getInstance();
+  private uploadSub?: Subscription;
 
   constructor(private cdref: ChangeDetectorRef,
               private elementRef: ElementRef,
@@ -82,8 +84,8 @@ export class ConversationContentComponent implements OnInit {
     this.listenToUploadFileProgress();
   }
 
-  ngAfterContentChecked() {
-    this.cdref.detectChanges();
+  ngOnDestroy() {
+    this.uploadSub?.unsubscribe();
   }
 
   ngOnChanges(changes: SimpleChanges){
@@ -121,7 +123,7 @@ export class ConversationContentComponent implements OnInit {
 
   // ENABLE HTML SECTION 'FILE PENDING UPLOAD'
   listenToUploadFileProgress() {
-    this.uploadService.BSStateUpload.subscribe((data: any) => {
+    this.uploadSub = this.uploadService.BSStateUpload.subscribe((data: any) => {
       this.logger.debug('[CONV-CONTENT] BSStateUpload', data);
       // && data.type.startsWith("application")
       if (data) { 

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

@@ -59,7 +59,9 @@
                 <span class="v-align-center">
                     <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24px" height="24" viewBox="0 0 24 24" fill="currentColor">
                         <path d="M9.9,22.7c0,0-.1,0-.2,0-1.9.3-3.7-.2-5.2-1.4-3-2.3-3.6-6.4-1.4-9.5L9.5,2.5c.4-.5,1.1-.6,1.6-.3.5.4.6,1.1.3,1.6l-6.5,9.4c-1.4,2-1,4.8.9,6.3,1,.8,2.2,1.1,3.5.9,1.3-.2,2.4-.9,3.1-1.9l6-8.7c.9-1.2.6-3-.6-3.9-.6-.5-1.4-.6-2.1-.5-.8.1-1.4.5-1.9,1.1l-5.8,8.2c-.3.5-.2,1.1.2,1.5.2.2.5.3.8.2.3,0,.6-.2.7-.4l4.7-6.2c.4-.5,1.1-.6,1.6-.2.5.4.6,1.1.2,1.6l-4.7,6.2c-.5.7-1.4,1.2-2.3,1.3-.9.1-1.8-.2-2.5-.7-1.4-1.1-1.6-3.1-.6-4.6l5.8-8.2c.8-1.1,2-1.9,3.4-2.1,1.4-.2,2.7.1,3.8,1,2.2,1.7,2.7,4.8,1.1,7.1l-6,8.7c-1.1,1.5-2.6,2.5-4.4,2.8h0Z"/>
-                    </svg> 
+                        <title id="altIconTitle">{{ maxAttachmentLabel }}</title>
+                    </svg>
+                    
                 </span>
                 <input
                     [attr.disabled]="(isFilePendingToUpload || isConversationArchived || hideTextReply)? true : null"
@@ -173,8 +175,7 @@
             class="chat21-textarea-button chat21-stream-button"
             [class.active]="isStreamAudioActive || isStreamAudioConnecting || (!textInputTextArea && !hideTextReply)"
             [class.chat21-stream-button--expanded]="isStreamAudioActive || isStreamAudioConnecting"
-            (click)="onStreamPressed($event)" [attr.aria-label]="(isStreamAudioActive || isStreamAudioConnecting) ? (translationMap?.get('CLOSE') || 'Chiudi stream') : (translationMap?.get('STREAM_AUDIO') || 'Stream audio')"
-            [ngStyle]="{ 'background-color': stylesMap?.get('iconColor') || stylesMap?.get('themeColor') }">
+            (click)="onStreamPressed($event)" [attr.aria-label]="(isStreamAudioActive || isStreamAudioConnecting) ? (translationMap?.get('CLOSE') || 'Chiudi stream') : (translationMap?.get('STREAM_AUDIO') || 'Stream audio')">
             <chat-stream-audio-spectrum
                 mode="button"
                 [active]="isStreamAudioActive || isStreamAudioConnecting"

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

@@ -8,6 +8,15 @@
     align-items: center;
     justify-content: space-between;
     gap: 8px;
+
+    //if attachment icon OR emoji icon is not in DOM -> increment textarea width
+    &:has(:not(#chat21-start-upload-doc), :not(#chat21-emoticon-picker)) .visible-text-area {
+        width: 80%;
+    }
+    //if attachment icon AND emoji icon is not in DOM -> increment textarea width
+    &:has(:not(#chat21-start-upload-doc)):has(:not(#chat21-emoticon-picker)) .visible-text-area {
+        width: 90%;
+    }
 }
 
 .close-chat-container{
@@ -105,28 +114,19 @@
     box-sizing: border-box;
     flex-shrink: 0;
     color: #ffffff;
-    transition:
-        min-width 220ms ease,
-        border-radius 180ms ease,
-        padding 180ms ease;
-
-    .chat21-stream-button__icon svg {
-        width: 20px;
-        height: 20px;
-        path {
-            fill: #ffffff;
-        }
-    }
+    transition: min-width 220ms ease, border-radius 180ms ease, padding 180ms ease;
 
-    &.chat21-textarea-button span svg:hover {
-        background: rgba(255, 255, 255, 0.2) !important;
-        border-radius: 50%;
+    &:hover{
+        background: rgba(240, 240, 240, 0.4) !important;
+        transition: all 0.45s ease-in-out 0s !important;
+        -moz-transition: all 0.45s ease-in-out 0s !important;
+        -webkit-transition: all 0.45s ease-in-out 0s !important;
     }
 
     &.chat21-stream-button--expanded {
-        min-width: 120px;
+        min-width: 110px;
         border-radius: 999px;
-        padding: 0 14px;
+        // padding: 0 14px;
         justify-content: center;
 
         // stop the circle-hover background from looking odd on pill
@@ -427,7 +427,7 @@ textarea:active{
     flex-direction: column;
     justify-content: center;
     position: absolute;
-    padding: 8px 16px;
+    // padding: 8px 16px;
     overflow: hidden;
     background-color: color-mix(in srgb, var(--content-background-color) 34%, transparent);
     backdrop-filter: blur(20px) saturate(1.2);

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

@@ -124,6 +124,12 @@ export class ConversationFooterComponent implements OnInit, OnChanges, OnDestroy
     return this.translationMap?.get('VOICE_LISTENING') || 'Listening...';
   }
 
+  get maxAttachmentLabel(): string {
+    const template = this.translationMap?.get('MAX_ATTACHMENT')
+      || `Max allowed size {{FILE_SIZE_LIMIT}}Mb`;
+    return template.replace(/\{\{FILE_SIZE_LIMIT\}\}/g, String(this.file_size_limit));
+  }
+
   file_size_limit = FILE_SIZE_LIMIT;
   attachmentTooltip: string = '';
   isErrorNetwork: boolean = false;

package/src/app/component/conversation-detail/stream-audio-spectrum/stream-audio-spectrum.component.html

@@ -22,11 +22,14 @@
     <!-- BUTTON: inactive icon / expanded pill content -->
     <ng-container *ngSwitchCase="'button'">
         <span class="stream-audio-button__icon" *ngIf="!active" aria-hidden="true">
-            <svg role="img" xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 30 30" fill="currentColor" preserveAspectRatio="xMidYMid meet">
-                <path class="s0" d="m5.21 7.41c-1.21 0-2.21 0.99-2.21 2.21v8.14c0 1.21 0.99 2.21 2.21 2.21 1.22 0 2.21-0.99 2.21-2.21v-8.14c0-1.21-0.99-2.21-2.21-2.21z"/>
-                <path class="s0" d="m11.64 3.01c-1.22 0-2.21 0.99-2.21 2.2v16.94c0 1.21 0.99 2.2 2.21 2.2 1.22 0 2.21-0.98 2.21-2.2v-16.94c0-1.21-0.99-2.21-2.21-2.21z"/>
-                <path class="s0" d="m15.86 9.25v8.88c0 1.21 0.99 2.21 2.21 2.21 1.22 0 2.21-0.99 2.21-2.21v-8.88c0-1.22-0.99-2.21-2.21-2.21-1.22 0-2.21 0.99-2.21 2.21z"/>
-                <path class="s0" d="m24.5 8.97c-1.22 0-2.21 0.99-2.21 2.21v5.02c0 1.22 0.99 2.21 2.21 2.21 1.22 0 2.21-0.99 2.21-2.21v-5.02c0-1.21-0.99-2.21-2.21-2.21z"/>
+            <svg role="img" xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 23 23" aria-labelledby="altIconTitle">
+                <rect x="0" y="7.5" height="6px" fill-opacity="1" width="2px" rx="0.75" ry="0.75"></rect>
+                <rect x="4" y="5.5" height="10px" fill-opacity="1" width="2px" rx="0.75" ry="0.75"></rect>
+                <rect x="8" y="2.5" height="16px" fill-opacity="1" width="2px" rx="0.75" ry="0.75"></rect>
+                <rect x="12" y="5.5" height="10px" fill-opacity="1" width="2px" rx="0.75" ry="0.75"></rect>
+                <rect x="16" y="2.5" height="16px" fill-opacity="1" width="2px" rx="0.75" ry="0.75"></rect>
+                <rect x="20" y="7.5" height="6px" fill-opacity="1" width="2px" rx="0.75" ry="0.75"></rect>
+                <title id="altIconTitle">{{ translationMap.get('STREAM_AUDIO') }}</title>
             </svg>
         </span>
 

package/src/app/component/conversation-detail/stream-audio-spectrum/stream-audio-spectrum.component.scss

@@ -39,6 +39,9 @@
   width: 20px;
   height: 20px;
   display: block;
+  rect {
+    fill: var(--icon-fill-color);
+  }
 }
 
 .stream-audio-button__expanded {
@@ -48,6 +51,7 @@
   gap: 12px;
   width: 100%;
   user-select: none;
+  color: var(--icon-fill-color);
 }
 
 .stream-audio-button__label {
@@ -74,6 +78,6 @@
   width: 3px;
   height: 100%;
   border-radius: 2px;
-  background: rgba(255, 255, 255, 0.92);
+  background: var(--icon-fill-color);
   transform-origin: center;
 }

package/src/app/component/form/inputs/form-text/form-text.component.ts

@@ -1,5 +1,6 @@
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output, SimpleChange, ViewChild } from '@angular/core';
+import { Component, ElementRef, EventEmitter, Input, OnInit, OnDestroy, Output, SimpleChange, ViewChild } from '@angular/core';
 import { FormGroup, FormGroupDirective } from '@angular/forms';
+import { Subscription } from 'rxjs';
 import { FormArray } from '../../../../../chat21-core/models/formArray';
 
 @Component({
@@ -7,7 +8,7 @@ import { FormArray } from '../../../../../chat21-core/models/formArray';
   templateUrl: './form-text.component.html',
   styleUrls: ['./form-text.component.scss']
 })
-export class FormTextComponent implements OnInit {
+export class FormTextComponent implements OnInit, OnDestroy {
 
   @Input() element: FormArray;
   @Input() controlName: string;
@@ -19,6 +20,7 @@ export class FormTextComponent implements OnInit {
   @ViewChild('div_input') input: ElementRef;
   form: FormGroup<any>;
   inputType: string = 'text'
+  private valueChangesSub?: Subscription;
 
   get fieldBaseId(): string {
     const raw = this.element?.name || this.controlName || 'field';
@@ -51,13 +53,17 @@ export class FormTextComponent implements OnInit {
   ngOnInit() {
     this.form = this.rootFormGroup.control as FormGroup<any>;
     if(this.form && this.form.controls && this.form.controls[this.controlName]){
-      this.form.controls[this.controlName].valueChanges.subscribe((value) => {
+      this.valueChangesSub = this.form.controls[this.controlName].valueChanges.subscribe((value) => {
         this.hasSubmitted= false;
         this.setFormStyle();
       })
     }
   }
 
+  ngOnDestroy() {
+    this.valueChangesSub?.unsubscribe();
+  }
+
   ngOnChanges(changes: SimpleChange){
     if(this.controlName && (this.controlName.toLowerCase().includes('email') || this.controlName.toLowerCase().includes('e-mail')) ){
       this.inputType = 'email';

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

@@ -1,5 +1,10 @@
 /* ====== SET MESSAGES ====== */
 
+:host(.hidden-bubble) {
+    display: none !important;
+}
+
+
 .messages {
     border-radius: var(--border-radius-bubble-message);
     padding: 0;

package/src/app/component/message/bubble-message/bubble-message.component.ts

@@ -40,6 +40,18 @@ export class BubbleMessageComponent implements OnInit, OnDestroy {
 
   @HostBinding('class.no-background') get hostNoBackground() { return this.jsonSources !== null && this.jsonSources.length > 0; }
   @HostBinding('class.json-resources') get hostIsJsonResources() { return this.jsonSources !== null && this.jsonSources.length > 0; }
+  @HostBinding('class.hidden-bubble') get hostHiddenBubble() { return !this.hasRenderableContent(); }
+
+  hasRenderableContent(): boolean {
+    const msg = this.message;
+    if (!msg) return false;
+    if (isImage(msg) || isFile(msg) || isFrame(msg) || isAudio(msg)) return true;
+    if (this.jsonSources && this.jsonSources.length > 0) return true;
+    // For url_preview messages, `text` may carry the raw JSON payload (not display text):
+    // if sources parsing yielded nothing, the bubble must stay hidden.
+    if (this.isUrlPreviewMessage) return false;
+    return !!(msg.text && String(msg.text).trim().length > 0);
+  }
 
   readonly isImage = isImage;
   readonly isFile = isFile;
@@ -55,6 +67,7 @@ export class BubbleMessageComponent implements OnInit, OnDestroy {
   sizeImage: { width: number; height: number } = { width: 0, height: 0 };
   fullnameColor: string = '';
   jsonSources: JsonSourceItem[] | null = null;
+  isUrlPreviewMessage = false;
 
   private urlPreviewReqId = 0;
 
@@ -139,6 +152,7 @@ export class BubbleMessageComponent implements OnInit, OnDestroy {
       this.message?.type === TYPE_MSG_URL_PREVIEW
       || this.message?.metadata?.type === TYPE_MSG_URL_PREVIEW
       || this.message?.attributes?.type === TYPE_MSG_URL_PREVIEW;
+    this.isUrlPreviewMessage = !!urlPreviewLike;
     if (urlPreviewLike) this.loadJsonSourcesFromUrlPreviewMessage();
   }
 

package/src/app/component/message/json-sources/json-sources.component.scss

@@ -1,5 +1,5 @@
 :host {
-  --panel-bck: #f7f8fa;
+  --panel-bck: #ffffff; // #f7f8fa;
   --row-sep: rgba(66, 133, 244, 0.18);
   --text: rgba(0, 0, 0, 0.90);
   --muted: rgba(0, 0, 0, 0.62);
@@ -22,7 +22,7 @@
 }
 
 .sources-header {
-  display: flex;
+  display: none;
   align-items: center;
   gap: 8px;
   padding: 2px 4px 8px 4px;
@@ -56,7 +56,7 @@
 .sources-panel {
   display: flex;
   flex-direction: column;
-  padding: 12px 12px 10px 12px;
+  padding: 18px 12px 10px 12px;
   background: var(--panel-bck);
   border-radius: 18px;
   font-size: 14px;
@@ -79,6 +79,10 @@
   width: 100%;
   box-sizing: border-box;
 
+  border-bottom: 1px solid var(--row-sep);
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+
   &:hover {
     background: rgba(255, 255, 255, 0.55);
     .source-row__title {
@@ -86,11 +90,11 @@
     }
   }
 
-  & + & {
-    border-top: 1px solid var(--row-sep);
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-  }
+  // & + & {
+  //   border-top: 1px solid var(--row-sep);
+  //   border-top-left-radius: 0;
+  //   border-top-right-radius: 0;
+  // }
 
   .source-row__left {
     min-width: 0;

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

@@ -5,61 +5,71 @@ import { marked, Tokens } from 'marked';
   name: 'marked'
 })
 export class MarkedPipe implements PipeTransform {
+  private static renderer: any = null;
 
-  transform(value: any): string {
+  private static getRenderer(): any {
+    if (!MarkedPipe.renderer) {
+      const renderer = new marked.Renderer();
 
-    const input =
-      typeof value === 'string'
-        ? value
-        : (value === null || value === undefined) ? '' : String(value);
+      /* --------------------------------------------------
+         🔐 1. NON renderizzare HTML raw
+      -------------------------------------------------- */
+      renderer.html = function(token: Tokens.HTML | Tokens.Tag): string {
+        const html = 'text' in token ? token.text : '';
 
-    const inputWithNewlines = input.replace(/\\n/g, '\n');
+        return html
+          .replace(/&/g, '&')
+          .replace(/</g, '&lt;')
+          .replace(/>/g, '&gt;');
+      };
+
+      /* --------------------------------------------------
+         🔐 2. Link sicuri
+      -------------------------------------------------- */
+      const originalLinkRenderer = renderer.link.bind(renderer);
+
+      const dangerousProtocols = [
+        /^javascript:/i,
+        /^data:/i,
+        /^vbscript:/i
+      ];
 
-    const renderer = new marked.Renderer();
+      renderer.link = function({ href, title, tokens }: any) {
 
-    /* --------------------------------------------------
-       🔐 1. NON renderizzare HTML raw
-    -------------------------------------------------- */
-    renderer.html = function(token: Tokens.HTML | Tokens.Tag): string {
-      const html = 'text' in token ? token.text : '';
+        const normalized = (href || '').trim();
 
-      return html
-        .replace(/&/g, '&amp;')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;');
-    };
+        const isDangerous = dangerousProtocols.some(pattern =>
+          pattern.test(normalized)
+        );
 
-    /* --------------------------------------------------
-       🔐 2. Link sicuri
-    -------------------------------------------------- */
-    const originalLinkRenderer = renderer.link.bind(renderer);
+        if (isDangerous) {
+          return tokens ? tokens.map((t: any) => t.raw).join('') : href || '';
+        }
 
-    const dangerousProtocols = [
-      /^javascript:/i,
-      /^data:/i,
-      /^vbscript:/i
-    ];
+        const html = originalLinkRenderer({ href, title, tokens });
 
-    renderer.link = function({ href, title, tokens }) {
+        // aggiunge sicurezza ai link
+        return html.replace(
+          '<a ',
+          '<a target="_blank" rel="noopener noreferrer" '
+        );
+      };
 
-      const normalized = (href || '').trim();
+      MarkedPipe.renderer = renderer;
+    }
+    return MarkedPipe.renderer;
+  }
 
-      const isDangerous = dangerousProtocols.some(pattern =>
-        pattern.test(normalized)
-      );
+  transform(value: any): string {
 
-      if (isDangerous) {
-        return tokens ? tokens.map(t => t.raw).join('') : href || '';
-      }
+    const input =
+      typeof value === 'string'
+        ? value
+        : (value === null || value === undefined) ? '' : String(value);
 
-      const html = originalLinkRenderer({ href, title, tokens });
+    const inputWithNewlines = input.replace(/\\n/g, '\n');
 
-      // aggiunge sicurezza ai link
-      return html.replace(
-        '<a ',
-        '<a target="_blank" rel="noopener noreferrer" '
-      );
-    };
+    const renderer = MarkedPipe.getRenderer();
 
     marked.setOptions({
       renderer,

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

@@ -66,6 +66,8 @@ export class GlobalSettingsService {
         this.globals.logLevel = this.appConfigService.getConfig().logLevel
         /**SET PERSISTENCE parameter */
         this.globals.persistence = this.appConfigService.getConfig().authPersistence
+        /**SET CLOSE CHAT IN CONVERSATION parameter */
+        this.globals.closeChatInConversation = this.appConfigService.getConfig().closeChatInConversation;
 
         // ------------------------------- //
         /** LOAD PARAMETERS FROM SERVER
@@ -596,6 +598,9 @@ export class GlobalSettingsService {
                     if (variables.hasOwnProperty('allowedUploadExtentions')) {
                         globals['fileUploadAccept'] = variables['allowedUploadExtentions'];
                     }
+                    if(variables.hasOwnProperty('showAudioStreamFooterButton')) {
+                        globals['showAudioStreamFooterButton'] = variables['showAudioStreamFooterButton'];
+                    }
                     
                 }
             }
@@ -947,6 +952,14 @@ export class GlobalSettingsService {
         if (TEMP !== undefined) {
             globals.soundEnabled = TEMP;
         }
+        TEMP = tiledeskSettings['keyboardSoundVolume'];
+        if (TEMP !== undefined) {
+            globals.keyboardSoundVolume = +TEMP;
+        }
+        TEMP = tiledeskSettings['keyboardSoundFile'];
+        if (TEMP !== undefined) {
+            globals.keyboardSoundFile = TEMP;
+        }
         TEMP = tiledeskSettings['openExternalLinkButton'];
         // this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > openExternalLinkButton:: ', TEMP]);
         if (TEMP !== undefined) {
@@ -1336,6 +1349,14 @@ export class GlobalSettingsService {
         if (TEMP !== null) {
             this.globals.soundEnabled = TEMP;
         }
+        TEMP = el.nativeElement.getAttribute('keyboardSoundVolume');
+        if (TEMP !== null) {
+            this.globals.keyboardSoundVolume = +TEMP;
+        }
+        TEMP = el.nativeElement.getAttribute('keyboardSoundFile');
+        if (TEMP !== null) {
+            this.globals.keyboardSoundFile = TEMP;
+        }
         TEMP = el.nativeElement.getAttribute('openExternalLinkButton');
         if (TEMP !== null) {
             this.globals.openExternalLinkButton = TEMP;
@@ -1735,6 +1756,16 @@ export class GlobalSettingsService {
             globals.soundEnabled = stringToBoolean(TEMP); 
         }
 
+        TEMP = getParameterByName(windowContext, 'tiledesk_keyboardSoundVolume');
+        if (TEMP) {
+            globals.keyboardSoundVolume = +TEMP;
+        }
+
+        TEMP = getParameterByName(windowContext, 'tiledesk_keyboardSoundFile');
+        if (TEMP) {
+            globals.keyboardSoundFile = TEMP;
+        }
+
         TEMP = getParameterByName(windowContext, 'tiledesk_openExternalLinkButton');
         if (TEMP) {
             globals.openExternalLinkButton = stringToBoolean(TEMP);