@chat21/chat21-web-widget 5.1.32-rc1 → 5.1.32-rc13

package/src/app/providers/voice/voice.service.ts

@@ -1,7 +1,7 @@
 import { Inject, Injectable, Optional } from '@angular/core';
 import type { MicVAD } from '@ricky0123/vad-web';
 import { getDefaultRealTimeVADOptions } from '@ricky0123/vad-web';
-import { BehaviorSubject, Observable, Subject } from 'rxjs';
+import { BehaviorSubject, Observable, Subject, Subscription } from 'rxjs';
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
 
@@ -12,6 +12,7 @@ import {
 } from './audio.types';
 import { SpeechToTextProvider } from './STT&TTS/speech-provider.abstract';
 import { VadService } from './vad.service';
+import { TtsAudioPlaybackCoordinator } from '../tts-audio-playback-coordinator.service';
 
 const VOICE_RECORDING_MIME = 'audio/webm';
 
@@ -33,10 +34,29 @@ export class VoiceService {
   /** Emesso a ogni fine segmento parlato: audio WebM + opzionalmente `transcript` / `transcriptionError`. */
   readonly audioSegment$: Observable<VoiceSegmentPayload> = this.audioSegmentSubject.asObservable();
 
+  private readonly speechStartSubject = new Subject<void>();
+  /** Emesso quando il microfono intercetta parlato (VAD speech start). */
+  readonly speechStart$: Observable<void> = this.speechStartSubject.asObservable();
+
+  private readonly speechEndSubject = new Subject<void>();
+  /** Emesso quando il parlato termina (VAD speech end). */
+  readonly speechEnd$: Observable<void> = this.speechEndSubject.asObservable();
+
   // 🔊 REALTIME VOLUME STREAM
   private readonly volumeSubject = new BehaviorSubject<number>(0);
   readonly volume$: Observable<number> = this.volumeSubject.asObservable();
 
+  // 🎙️ TTS GATE — suppresses segment emission while TTS is playing
+  private isTTSActive = false;
+  private ttsGateSub?: Subscription;
+
+  // 🚫 ACQUISITION GATE — pauses VAD from speech-end until TTS response cycle completes
+  private isWaitingForResponse = false;
+  private responseTimeoutId?: ReturnType<typeof setTimeout>;
+  private readonly _isAcquisitionBlocked$ = new BehaviorSubject<boolean>(false);
+  /** Emits `true` from user speech-end until VAD resumes after TTS finishes; drives the grey orb. */
+  readonly isAcquisitionBlocked$: Observable<boolean> = this._isAcquisitionBlocked$.asObservable();
+
   // 🎧 AUDIO ANALYSER
   private audioContext?: AudioContext;
   private analyser?: AnalyserNode;
@@ -47,6 +67,7 @@ export class VoiceService {
 
   constructor(
     private readonly vadService: VadService,
+    private readonly ttsPlayback: TtsAudioPlaybackCoordinator,
     @Optional() @Inject(SpeechToTextProvider) private readonly speechToText: SpeechToTextProvider | null,
   ) {}
 
@@ -83,11 +104,18 @@ export class VoiceService {
       },
       onSpeechStart: () => {
         this.logger.log('[VoiceService] speech start');
+        this.speechStartSubject.next();
         this.startMediaRecorderSegment();
       },
       onSpeechEnd: () => {
         this.logger.log('[VoiceService] speech end');
+        this.speechEndSubject.next();
         this.stopMediaRecorderSegment();
+        // Pause VAD immediately — new recordings are blocked until the TTS response cycle completes.
+        this.isWaitingForResponse = true;
+        this._isAcquisitionBlocked$.next(true);
+        this.setResponseSafetyTimeout();
+        void this.vad?.pause();
       },
       minSpeechMs: 480,
       redemptionMs: 1920,
@@ -98,11 +126,31 @@ export class VoiceService {
 
     // 🔁 start volume loop
     this.startVolumeLoop();
+
+    // 🎙️ gate segments while TTS is playing; resume VAD when TTS cycle completes
+    this.ttsGateSub = this.ttsPlayback.isTTSPlaying$.subscribe((playing) => {
+      this.isTTSActive = playing;
+      this.logger.log('[VoiceService] TTS gate', playing ? 'closed (bot speaking)' : 'open (listening)');
+      if (!playing && this.isWaitingForResponse) {
+        this.resumeVadAfterResponse();
+      }
+    });
   }
 
-  async stopSession(): Promise<void> {
-    if (this.mediaRecorder?.state === 'recording') {
-      this.mediaRecorder.stop();
+  /**
+   * @param options.discardInProgressSegment — non inviare STT/upload per il segmento WebM corrente (es. interruzione da messaggio in arrivo).
+   */
+  async stopSession(options?: { discardInProgressSegment?: boolean }): Promise<void> {
+    const discard = options?.discardInProgressSegment === true;
+
+    if (this.mediaRecorder) {
+      if (discard) {
+        this.mediaRecorder.onstop = null;
+        this.mediaRecorder.ondataavailable = null;
+      }
+      if (this.mediaRecorder.state === 'recording') {
+        this.mediaRecorder.stop();
+      }
     }
 
     this.mediaRecorder = undefined;
@@ -132,6 +180,63 @@ export class VoiceService {
     this.volumeSubject.next(0);
 
     this.onRecordingComplete = undefined;
+
+    // 🎙️ release TTS gate subscription
+    this.ttsGateSub?.unsubscribe();
+    this.ttsGateSub = undefined;
+    this.isTTSActive = false;
+
+    // 🚫 clear acquisition gate
+    clearTimeout(this.responseTimeoutId);
+    this.responseTimeoutId = undefined;
+    this.isWaitingForResponse = false;
+    this._isAcquisitionBlocked$.next(false);
+  }
+
+  /**
+   * Scarta il segmento WebM in corso (nessun upload/STT) senza chiudere VAD, mic o sessione.
+   * Lo stream resta in ascolto per il prossimo `onSpeechStart`.
+   */
+  discardCurrentRecordingSegment(): void {
+    if (this.mediaRecorder) {
+      this.mediaRecorder.onstop = null;
+      this.mediaRecorder.ondataavailable = null;
+      if (this.mediaRecorder.state === 'recording') {
+        this.mediaRecorder.stop();
+      }
+    }
+    this.mediaRecorder = undefined;
+    this.audioChunks = [];
+    this.logger.log('[VoiceService] discarded in-progress segment; VAD session unchanged');
+  }
+
+  /**
+   * 🔄 RESUME VAD AFTER RESPONSE
+   * Called when isTTSPlaying$ goes false while isWaitingForResponse is true,
+   * or by the safety timeout if no TTS response arrives within 30 s.
+   */
+  private resumeVadAfterResponse(): void {
+    this.isWaitingForResponse = false;
+    clearTimeout(this.responseTimeoutId);
+    this.responseTimeoutId = undefined;
+    this._isAcquisitionBlocked$.next(false);
+    if (this.vad) {
+      this.vad.start().catch((e) =>
+        this.logger.log('[VoiceService] VAD resume error', e),
+      );
+    }
+  }
+
+  /**
+   * ⏱️ SAFETY TIMEOUT
+   * Forces VAD re-enable after 30 s in case no TTS response ever arrives.
+   */
+  private setResponseSafetyTimeout(): void {
+    clearTimeout(this.responseTimeoutId);
+    this.responseTimeoutId = setTimeout(() => {
+      this.logger.log('[VoiceService] safety timeout: re-enabling VAD acquisition');
+      this.resumeVadAfterResponse();
+    }, 30_000);
   }
 
   /**
@@ -161,7 +266,9 @@ export class VoiceService {
         return;
       }
 
-      this.analyser.getByteFrequencyData(this.dataArray);
+      this.analyser.getByteFrequencyData(
+        this.dataArray as Parameters<AnalyserNode['getByteFrequencyData']>[0],
+      );
 
       let sum = 0;
       for (let i = 0; i < this.dataArray.length; i++) {
@@ -255,6 +362,11 @@ export class VoiceService {
    * 📡 EMIT RESULT
    */
   private emitSegmentPayload(payload: VoiceSegmentPayload): void {
+    if (this.isTTSActive) {
+      this.logger.log('[VoiceService] segment suppressed — TTS is playing');
+      return;
+    }
+
     this.logger.log( '[VoiceService] segment ready', payload.transcript ?? payload.transcriptionError ?? payload.blob.size);
 
     this.audioSegmentSubject.next(payload);

package/src/app/sass/_variables.scss

@@ -38,6 +38,8 @@
     --chat-footer-logo-height: 30px;
     --chat-footer-close-button-height: 30px;
     --chat-footer-border-radius: 16px;
+    --chat-footer-stream-button-height: 0px; //96px;
+    --chat-footer-stream-button-padding: 10px 0;
     --chat-footer-background-color: #f6f7fb;
     --chat-footer-color: #1a1a1a;
     --chat-footer-border-color-error: #aa0404;

package/src/launch.js

@@ -218,67 +218,76 @@ function loadIframe(tiledeskScriptBaseLocation) {
     iDiv.appendChild(ifrm);
 
     // Funzione helper per caricare iframe con fallback per compatibilità CSP (Wix, etc.)
-    // Usa Blob URL come metodo principale (più compatibile con CSP) con fallback a srcdoc e document.write
-    function loadIframeContent(iframe, htmlContent, baseLocation) {
-        var isLocalhost = baseLocation.includes('localhost');
+    // Priorità: document.write / srcdoc prima della Blob URL. Le Blob URL spesso danno origine opaca
+    // (blob:null): l'iframe non può leggere window.parent.tiledeskSettings → projectid mancante.
+    function loadIframeContent(iframe, htmlContent) {
         var blobUrl = null;
-        
-        // Metodo 1: Blob URL (più compatibile con CSP di Wix e altre piattaforme)
-        // Usa Blob URL come metodo principale perché è meno spesso bloccato da CSP rispetto a srcdoc
+
+        // 1) document.write: iframe stessa origine della pagina host → tiledeskSettings sul parent accessibile
+        try {
+            var cw = iframe.contentWindow;
+            if (cw && cw.document) {
+                cw.document.open();
+                cw.document.write(htmlContent);
+                cw.document.close();
+                return;
+            }
+        } catch (e) {
+            console.warn('[Tiledesk] iframe document.write failed, trying srcdoc/blob:', e);
+        }
+
+        // 2) srcdoc: stessa origine del parent (HTML5); utile se document.write è bloccato
+        if ('srcdoc' in iframe) {
+            try {
+                iframe.srcdoc = htmlContent;
+                return;
+            } catch (e) {
+                console.warn('[Tiledesk] iframe srcdoc failed, trying blob:', e);
+            }
+        }
+
+        // 3) Blob URL (spesso permesso da CSP dove srcdoc/write no; può rompere lettura parent.tiledeskSettings)
         if (typeof Blob !== 'undefined' && typeof URL !== 'undefined' && URL.createObjectURL) {
             try {
                 var blob = new Blob([htmlContent], { type: 'text/html;charset=utf-8' });
                 blobUrl = URL.createObjectURL(blob);
                 iframe.src = blobUrl;
-                
-                // Cleanup del blob URL dopo il caricamento per liberare memoria
+
                 var originalOnload = iframe.onload;
                 iframe.onload = function() {
-                    // Revoca il blob URL dopo un delay per assicurarsi che tutto sia caricato
                     setTimeout(function() {
                         if (blobUrl) {
                             try {
                                 URL.revokeObjectURL(blobUrl);
                                 blobUrl = null;
-                            } catch(e) {
-                                console.warn('Error revoking blob URL:', e);
+                            } catch (err) {
+                                console.warn('Error revoking blob URL:', err);
                             }
                         }
                     }, 1000);
                     if (originalOnload) originalOnload.call(this);
                 };
-                return; // Blob URL impostato con successo
-            } catch(e) {
-                console.warn('Blob URL not available, trying srcdoc:', e);
+                return;
+            } catch (e) {
+                console.warn('Blob URL not available:', e);
             }
         }
-        
-        // Metodo 2: srcdoc (fallback se Blob URL non disponibile)
-        // Skip per localhost (usa document.write per compatibilità sviluppo)
-        if (!isLocalhost && 'srcdoc' in iframe) {
-            try {
-                iframe.srcdoc = htmlContent;
-                return; // srcdoc impostato
-            } catch(e) {
-                console.warn('srcdoc not allowed, trying document.write:', e);
-            }
-        }
-        
-        // Metodo 3: document.write (fallback finale, funziona su localhost e browser vecchi)
-        if (isLocalhost || (iframe.contentWindow && iframe.contentWindow.document)) {
+
+        // 4) Ultimo tentativo document.write (iframe magari non pronto al primo passo)
+        if (iframe.contentWindow && iframe.contentWindow.document) {
             try {
                 iframe.contentWindow.document.open();
                 iframe.contentWindow.document.write(htmlContent);
                 iframe.contentWindow.document.close();
-                return; // document.write completato
-            } catch(e) {
-                console.error('All iframe loading methods failed:', e);
+                return;
+            } catch (e) {
+                console.error('[Tiledesk] All iframe loading methods failed:', e);
             }
         }
     }
     
     // Carica il contenuto dell'iframe con fallback automatico
-    loadIframeContent(ifrm, srcTileDesk, tiledeskScriptBaseLocation);
+    loadIframeContent(ifrm, srcTileDesk);
 
 
 }

package/src/launch_template.js

@@ -219,67 +219,76 @@ function loadIframe(tiledeskScriptBaseLocation) {
     iDiv.appendChild(ifrm);
 
     // Funzione helper per caricare iframe con fallback per compatibilità CSP (Wix, etc.)
-    // Usa Blob URL come metodo principale (più compatibile con CSP) con fallback a srcdoc e document.write
-    function loadIframeContent(iframe, htmlContent, baseLocation) {
-        var isLocalhost = baseLocation.includes('localhost');
+    // Priorità: document.write / srcdoc prima della Blob URL. Le Blob URL spesso danno origine opaca
+    // (blob:null): l'iframe non può leggere window.parent.tiledeskSettings → projectid mancante.
+    function loadIframeContent(iframe, htmlContent) {
         var blobUrl = null;
-        
-        // Metodo 1: Blob URL (più compatibile con CSP di Wix e altre piattaforme)
-        // Usa Blob URL come metodo principale perché è meno spesso bloccato da CSP rispetto a srcdoc
+
+        // 1) document.write: iframe stessa origine della pagina host → tiledeskSettings sul parent accessibile
+        try {
+            var cw = iframe.contentWindow;
+            if (cw && cw.document) {
+                cw.document.open();
+                cw.document.write(htmlContent);
+                cw.document.close();
+                return;
+            }
+        } catch (e) {
+            console.warn('[Tiledesk] iframe document.write failed, trying srcdoc/blob:', e);
+        }
+
+        // 2) srcdoc: stessa origine del parent (HTML5); utile se document.write è bloccato
+        if ('srcdoc' in iframe) {
+            try {
+                iframe.srcdoc = htmlContent;
+                return;
+            } catch (e) {
+                console.warn('[Tiledesk] iframe srcdoc failed, trying blob:', e);
+            }
+        }
+
+        // 3) Blob URL (spesso permesso da CSP dove srcdoc/write no; può rompere lettura parent.tiledeskSettings)
         if (typeof Blob !== 'undefined' && typeof URL !== 'undefined' && URL.createObjectURL) {
             try {
                 var blob = new Blob([htmlContent], { type: 'text/html;charset=utf-8' });
                 blobUrl = URL.createObjectURL(blob);
                 iframe.src = blobUrl;
-                
-                // Cleanup del blob URL dopo il caricamento per liberare memoria
+
                 var originalOnload = iframe.onload;
                 iframe.onload = function() {
-                    // Revoca il blob URL dopo un delay per assicurarsi che tutto sia caricato
                     setTimeout(function() {
                         if (blobUrl) {
                             try {
                                 URL.revokeObjectURL(blobUrl);
                                 blobUrl = null;
-                            } catch(e) {
-                                console.warn('Error revoking blob URL:', e);
+                            } catch (err) {
+                                console.warn('Error revoking blob URL:', err);
                             }
                         }
                     }, 1000);
                     if (originalOnload) originalOnload.call(this);
                 };
-                return; // Blob URL impostato con successo
-            } catch(e) {
-                console.warn('Blob URL not available, trying srcdoc:', e);
-            }
-        }
-        
-        // Metodo 2: srcdoc (fallback se Blob URL non disponibile)
-        // Skip per localhost (usa document.write per compatibilità sviluppo)
-        if (!isLocalhost && 'srcdoc' in iframe) {
-            try {
-                iframe.srcdoc = htmlContent;
-                return; // srcdoc impostato
-            } catch(e) {
-                console.warn('srcdoc not allowed, trying document.write:', e);
+                return;
+            } catch (e) {
+                console.warn('Blob URL not available:', e);
             }
         }
-        
-        // Metodo 3: document.write (fallback finale, funziona su localhost e browser vecchi)
-        if (isLocalhost || (iframe.contentWindow && iframe.contentWindow.document)) {
+
+        // 4) Ultimo tentativo document.write (iframe magari non pronto al primo passo)
+        if (iframe.contentWindow && iframe.contentWindow.document) {
             try {
                 iframe.contentWindow.document.open();
                 iframe.contentWindow.document.write(htmlContent);
                 iframe.contentWindow.document.close();
-                return; // document.write completato
-            } catch(e) {
-                console.error('All iframe loading methods failed:', e);
+                return;
+            } catch (e) {
+                console.error('[Tiledesk] All iframe loading methods failed:', e);
             }
         }
     }
     
     // Carica il contenuto dell'iframe con fallback automatico
-    loadIframeContent(ifrm, srcTileDesk, tiledeskScriptBaseLocation);
+    loadIframeContent(ifrm, srcTileDesk);
 
 
 }

package/deploy_amazon_prod.sh

@@ -1,41 +0,0 @@
-# npm version patch
-version=`node -e 'console.log(require("./package.json").version)'`
-echo "version $version"
-
-npm i
-
-cp src/environments/real_data/environment.prod.ts src/environments/environment.prod.ts
-
-# --build-optimizer=false if localstorage is disabled (webview) appears https://github.com/firebase/angularfire/issues/970
-ng build --configuration="prod" --aot=true
-##--base-href='./v5/' --output-hashing none
-
-### SET HASHING : START ###
-cp ./src/launch_template.js ./dist/browser/launch.js
-node ./src/build_launch.js
-### SET HASHING : END ###
-
-#### FIREBASE #####
-# cd dist
-# # aws s3 sync . s3://tiledesk-widget/v5/latest/
-# aws s3 sync . s3://tiledesk-widget/v5/$version/ --cache-control max-age=300
-# aws s3 sync . s3://tiledesk-widget/v5/ --cache-control max-age=300
-# cd ..
-
-# #### MQTT #####
-cd dist/browser
-# aws s3 sync . s3://tiledesk-widget/v5/latest/
-aws s3 sync . s3://tiledesk-widget/v6/$version/ --cache-control max-age=86400 --exclude='launch.js' #8days
-aws s3 sync . s3://tiledesk-widget/v6/$version/ --cache-control "no-store,no-cache,private" --exclude='*' --include='launch.js'
-aws s3 sync . s3://tiledesk-widget/v6/ --cache-control max-age=86400 --exclude='launch.js' #8days
-aws s3 sync . s3://tiledesk-widget/v6/ --cache-control "no-store,no-cache,private" --exclude='*' --include='launch.js'
-cd ../..
-
-aws  cloudfront create-invalidation --distribution-id E3EJDWEHY08CZZ --paths "/*"
-
-git restore src/environments/environment.prod.ts
-
-echo new version deployed $version on s3://tiledesk-widget/v6
-echo available on https://s3.eu-west-1.amazonaws.com/tiledesk-widget/v6/index.html
-echo https://widget.tiledesk.com/v6/index.html
-echo https://widget.tiledesk.com/v6/$version/index.html