@chat21/chat21-web-widget 5.1.32-rc4 → 5.1.32-rc9

package/CHANGELOG.md

@@ -6,18 +6,35 @@
 ### **Copyrigth**: 
 *Tiledesk SRL*
 
+# 5.1.32-rc9
+- **added**: mic-triggered TTS interruption — when VAD detects user speech, stop current TTS playback, clear the queue, and reveal the full message text
+- **added**: global TTS cancel API (`TtsAudioPlaybackCoordinator.cancelAll()` + `cancelAll$`) to stop current + queued TTS playback from UI/events (e.g. close stream)
+- **changed**: `chat-audio-sync` TTS playback now streams audio via authenticated POST to `message.metadata.src`, sending `voiceSettings` + `text` and `streaming: true`
+- **changed**: stream UI spectrum — removed circular orb and stretched the spectrum line to fill the `#streamAudioAlert` width with 10px side padding
+- **changed**: conversation content layout while streaming — adjusted received bubble left margin and loading spinner margins for full-size mode
+
+
+# 5.1.32-rc8
+- **changed**: updated the dev environment defaults to align with the stage setup (remote config URL, API endpoints, logging level, storage prefix, and related settings)
+
+# 5.1.32-rc7
+- **added**: `StreamAudioSpectrum` component for audio visualization in the streaming footer UI
+- **added**: TTS playback coordinator queue — ensures TTS messages play sequentially without interrupting the previous one
+- **changed**: `chat-audio-sync` — updated TTS audio handling to support streaming playback and improved autoplay/animation timing
+- **changed**: iframe loader (`launch.js`, `launch_template.js`) — streamlined loading logic and improved error handling, with fixes for localhost environments
+
 # 5.1.32-rc4
-- **added**: Pulsante “chiudi stream” (`.close-stream-button`) — offset del contenuto e del foglio in fullscreen usando `--chat-footer-stream-button-height` solo mentre lo stream è in ascolto (`isStreamAudioActive`); variabili in `_variables.scss`.
-- **added**: `VoiceService.discardCurrentRecordingSegment()` — in arrivo un messaggio da altro mittente durante lo stream, si scarta il segmento WebM corrente (nessun upload) senza chiudere mic/VAD; `interruptStreamDueToPeerMessage()` nel footer non spegne più `isStreamAudioActive`.
-- **changed**: `#streamAudioAlert` — fascia superiore al footer con effetto vetro satinato (`backdrop-filter`, `color-mix` semi-trasparente).
+- **added**: “Close stream” control (`.close-stream-button`) — content and sheet bottom offset in fullscreen using `--chat-footer-stream-button-height` only while the stream is listening (`isStreamAudioActive`); variables in `_variables.scss`.
+- **added**: `VoiceService.discardCurrentRecordingSegment()` — when a message arrives from another sender during streaming, the current WebM segment is discarded (no upload) without stopping mic/VAD; `interruptStreamDueToPeerMessage()` in the footer no longer clears `isStreamAudioActive`.
+- **changed**: `#streamAudioAlert` — band above the footer with a frosted-glass look (`backdrop-filter`, semi-transparent `color-mix`).
 
 # 5.1.32-rc3
-- **changed**: `nginx.conf` (immagine Docker) — tipi MIME espliciti per `.mjs`, `.wasm`, `.onnx` e `default_type` a livello `http` (evita `text/plain` su moduli ONNX/VAD dietro deploy containerizzato).
-- **chore**: rimossi script di deploy Amazon beta/prod deprecati dal repository.
+- **changed**: `nginx.conf` (Docker image) — explicit MIME types for `.mjs`, `.wasm`, `.onnx` and `default_type` at `http` level (avoids `text/plain` on ONNX/VAD modules behind containerized deploys).
+- **chore**: removed deprecated Amazon beta/prod deploy scripts from the repository.
 
 # 5.1.32-rc2
 - **bug fixed**: minor streaming icon UI fixed
-- **changed**: Refactor UI pulsante stream audio nel conversation footer (layout / classi).
+- **changed**: Refactor stream audio button UI in the conversation footer (layout / classes).
 
 # 5.1.32-rc1
 - **added**: Voice pipeline — VAD (`@ricky0123/vad-web`) with ONNX Runtime WASM served from `/assets/onnx` (`copy-onnx-wasm`), `VoiceService` with `audioSegment$` (WebM segments) and optional STT/TTS via unified OpenAI provider using `HttpClient`, transcript / error fields on segment payloads.

package/package.json

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

package/src/app/app.module.ts

@@ -16,6 +16,7 @@ import { ConversationFooterComponent } from './component/conversation-detail/con
 import { ConversationInternalFrameComponent } from './component/conversation-detail/conversation-internal-frame/conversation-internal-frame.component';
 import { ConversationPreviewComponent } from './component/conversation-detail/conversation-preview/conversation-preview.component';
 import { ConversationAudioRecorderComponent } from './component/conversation-detail/conversation-audio-recorder/conversation-audio-recorder.component';
+import { StreamAudioSpectrumComponent } from './component/conversation-detail/stream-audio-spectrum/stream-audio-spectrum.component';
 /** CONVERSATION-DETAIL COMPONENTS */
 import { BubbleMessageComponent } from './component/message/bubble-message/bubble-message.component';
 import { AvatarComponent } from './component/message/avatar/avatar.component';
@@ -294,6 +295,7 @@ export function uploadFactory(http: HttpClient, appConfig: AppConfigService, app
     ConversationPreviewComponent,
     ConversationInternalFrameComponent,
     ConversationAudioRecorderComponent,
+    StreamAudioSpectrumComponent,
     BubbleMessageComponent,
     AvatarComponent,
     FrameComponent,

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

@@ -49,7 +49,7 @@
                           <!-- message RECIPIENT:: -->
                           <div role="messaggio" *ngIf="messageType(MESSAGE_TYPE_OTHERS, message)" class="msg_container base_receive">
                             
-                            <chat-avatar-image *ngIf="!isSameSender(message?.sender, i)" 
+                            <chat-avatar-image *ngIf="!isSameSender(message?.sender, i) && !isStreamAudioActive" 
                               [ngClass]="{'slide-in-left': false}"    
                               [senderID]="message?.sender"
                               [senderFullname]="message?.sender_fullname"
@@ -62,7 +62,8 @@
                               [ngClass]="{'slide-in-left': false}"
                               [class.no-background]="(isImage(message) || isFrame(message) || isCarousel(message)) && ((message?.text && message?.text.trim() === '') || !message?.text)"  
                               [class.emoticon]="isEmojii(message?.text)"
-                              [style.margin-left]="isSameSender(message?.sender, i)? 'calc(var(--avatar-width) + 10px)': null"
+                              [class.fullSizeMessage]="isStreamAudioActive"
+                              [style.margin-left]="isSameSender(message?.sender, i) ? 'calc(var(--avatar-width) + 10px)' : null"
                               [ngStyle]="{'background': stylesMap.get('bubbleReceivedBackground'), 'color': stylesMap.get('bubbleReceivedTextColor'), 'width':isFrame(message) ?'100%' : null}"
                               [isSameSender]="isSameSender(message?.sender, i)"
                               [message]="message"
@@ -134,9 +135,10 @@
                           [senderFullname]="nameUserTypingNow"
                           [baseLocation]="baseLocation">
                         </chat-avatar-image>
+                        
                         <user-typing
-                          [ngClass]="{'userTypingNowExist': !idUserTypingNow}"
                           [color]="stylesMap?.get('iconColor')"
+                          [ngClass]="{'userTypingNowExist': !idUserTypingNow}"
                           [translationMap]="translationMap"
                           [idUserTypingNow]="idUserTypingNow"
                           [nameUserTypingNow]="nameUserTypingNow">
@@ -145,6 +147,7 @@
 
                       <div *ngIf="showThinkingMessage && lastServerSenderKind === 'bot'" class="msg_container base_receive thinking_receive">
                         <user-typing class="loading thinking-dots"
+                          [class.fullSize]="isStreamAudioActive"
                           [color]="stylesMap?.get('iconColor')"
                           [translationMap]="translationMap"
                           [idUserTypingNow]="idUserTypingNow"

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

@@ -27,6 +27,11 @@
     margin: 25px 50px
 }
 
+
+:host .loading.fullSize ::ng-deep > div.spinner{
+    margin: 50px 0px !important;
+}
+
 // ============= CSS c21-body ================= //
 .c21-body {
     // -webkit-box-shadow: inset 0 10px 10px -10px rgba(0,0,0,0.4);
@@ -236,6 +241,11 @@
                         height: fit-content;
                         width: auto;
 
+                        &.fullSizeMessage {
+                            max-width: 100%;
+                            margin: auto 0 auto 0 !important;
+                        }
+
                     }
                     
 

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

@@ -14,24 +14,10 @@
 
     <!-- STREAM AUDIO: cerchio con onde animate -->
     <div id="streamAudioAlert" *ngIf="!hideTextAreaContent && isStreamAudioActive" class="fade-in-bottom stream-audio-alert" [class.hideTextReply]="hideTextReply" role="status" [attr.aria-label]="translationMap?.get('STREAM_AUDIO_LISTENING') || 'Stream audio attivo'">
-        <div class="stream-audio-alert__orb" [ngStyle]="{ color: stylesMap?.get('themeColor') }">
-            <svg class="stream-audio-alert__svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
-                <circle cx="50" cy="50" r="46" fill="currentColor" opacity="0.14"/>
-                <g class="stream-audio-alert__waves" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">
-                    <g class="stream-audio-alert__wave-layer stream-audio-alert__wave-layer--1">
-                        <path [attr.d]="wavePath1"></path>
-                      </g>
-                      
-                      <g class="stream-audio-alert__wave-layer stream-audio-alert__wave-layer--2">
-                        <path [attr.d]="wavePath2"></path>
-                      </g>
-                      
-                      <g class="stream-audio-alert__wave-layer stream-audio-alert__wave-layer--3">
-                        <path [attr.d]="wavePath3"></path>
-                      </g>
-                </g>
-            </svg>
-        </div>
+        <chat-stream-audio-spectrum
+            [volume]="currentVolume"
+            [accentColor]="stylesMap?.get('themeColor')">
+        </chat-stream-audio-spectrum>
     </div>
 
 </div>

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

@@ -418,54 +418,6 @@ textarea:active{
     }
 }
 
-.stream-audio-alert__orb {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 88px;
-    height: 88px;
-    border-radius: 50%;
-    border: 2px solid currentColor;
-    background: var(--content-background-color);
-    box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.04);
-}
-
-.stream-audio-alert__svg {
-    width: 72px;
-    height: 72px;
-    display: block;
-}
-
-.stream-audio-alert__wave-layer {
-    transform-origin: 50px 50px;
-    transform-box: fill-box;
-    animation: stream-wave-float 1.35s ease-in-out infinite;
-}
-
-.stream-audio-alert__wave-layer--1 {
-    animation-delay: 0s;
-}
-
-.stream-audio-alert__wave-layer--2 {
-    animation-delay: 0.18s;
-}
-
-.stream-audio-alert__wave-layer--3 {
-    animation-delay: 0.36s;
-}
-
-@keyframes stream-wave-float {
-    0%,
-    100% {
-        transform: translateY(0);
-        opacity: 0.85;
-    }
-    50% {
-        transform: translateY(-6px);
-        opacity: 1;
-    }
-}
-
 #textAlert{
     bottom: 100%;
     width: 100%;

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

@@ -17,6 +17,7 @@ import { findAndRemoveEmoji, isImage } from 'src/chat21-core/utils/utils-message
 import { ProjectModel } from 'src/models/project';
 import { Subscription } from 'rxjs';
 import { VoiceService } from 'src/app/providers/voice/voice.service';
+import { TtsAudioPlaybackCoordinator } from 'src/app/providers/tts-audio-playback-coordinator.service';
 
 @Component({
   selector: 'chat-conversation-footer',
@@ -97,10 +98,8 @@ export class ConversationFooterComponent implements OnInit, OnChanges, OnDestroy
   private voiceAudioSubscription?: Subscription;
   /** Sottoscrizione al volume audio (real-time) dal {@link VoiceService}. */
   private voiceVolumeSubscription?: Subscription;
+  /** Passato a {@link StreamAudioSpectrumComponent} per disegnare la linea spettro. */
   currentVolume = 0;
-  wavePath1 = '';
-  wavePath2 = '';
-  wavePath3 = '';
 
   file_size_limit = FILE_SIZE_LIMIT;
   attachmentTooltip: string = '';
@@ -112,17 +111,18 @@ export class ConversationFooterComponent implements OnInit, OnChanges, OnDestroy
   constructor(private chatManager: ChatManager,
               private typingService: TypingService,
               private uploadService: UploadService,
-              private voiceService: VoiceService) { }
+              private voiceService: VoiceService,
+              private ttsPlayback: TtsAudioPlaybackCoordinator) { }
 
   ngOnInit() {
     // this.updateAttachmentTooltip();
   }
 
-
   ngOnChanges(changes: SimpleChanges){
     if(changes['conversationWith'] && changes['conversationWith'].currentValue !== undefined){
       this.conversationHandlerService = this.chatManager.getConversationHandlerByConversationId(this.conversationWith);
       this.isStreamAudioActive = false;
+      this.ttsPlayback.cancelAll();
       void this.stopVoice();
     }
     if(changes['hideTextReply'] && changes['hideTextReply'].currentValue !== undefined){
@@ -176,7 +176,6 @@ export class ConversationFooterComponent implements OnInit, OnChanges, OnDestroy
     });
     this.voiceVolumeSubscription = this.voiceService.volume$.subscribe((volume) => {
       this.currentVolume = volume;
-      this.updateWave(volume);
     });
     await this.voiceService.startSession();
   }
@@ -189,9 +188,11 @@ export class ConversationFooterComponent implements OnInit, OnChanges, OnDestroy
     this.voiceVolumeSubscription = undefined;
 
     await this.voiceService.stopSession(options);
+    this.currentVolume = 0;
   }
 
   /**
+   * CHIAMATO DA: conversation.component.ts
    * Messaggio in arrivo da un altro mittente mentre lo stream è attivo: scarta solo il segmento
    * registrato in quel momento (nessun upload); mic + VAD restano attivi, `isStreamAudioActive` true.
    */
@@ -207,27 +208,6 @@ export class ConversationFooterComponent implements OnInit, OnChanges, OnDestroy
     }
   }
 
-  updateWave(volume: number) {
-    const intensity = Math.min(volume / 80, 1); // più sensibile
-  
-    const amp1 = 4 + intensity * 22;
-    const amp2 = 2 + intensity * 16;
-    const amp3 = 1 + intensity * 12;
-  
-    this.wavePath1 = this.buildWave(42, amp1);
-    this.wavePath2 = this.buildWave(50, amp2);
-    this.wavePath3 = this.buildWave(58, amp3);
-  }
-
-  buildWave(y: number, amp: number): string {
-    return `
-      M6 ${y}
-      Q24 ${y - amp} 42 ${y}
-      T78 ${y}
-      T98 ${y}
-    `;
-  }
-
   ngOnDestroy() {
     void this.stopVoice();
   }
@@ -757,15 +737,19 @@ export class ConversationFooterComponent implements OnInit, OnChanges, OnDestroy
     const turningOn = !this.isStreamAudioActive;
     if (turningOn) {
       try {
+        this.currentVolume = 0;
         await this.initVoice();
         this.isStreamAudioActive = true;
       } catch (e) {
         this.logger.error('[CONV-FOOTER] onStreamPressed: initVoice failed', e);
         this.isStreamAudioActive = false;
+        this.ttsPlayback.cancelAll();
       }
     } else {
       await this.stopVoice();
       this.isStreamAudioActive = false;
+      // Close-stream-button clicked: stop any playing/queued TTS audio.
+      this.ttsPlayback.cancelAll();
     }
     this.onStreamAudioActiveChange.emit(this.isStreamAudioActive);
     this.logger.log('[CONV-FOOTER] isStreamAudioActive', this.isStreamAudioActive);

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

@@ -0,0 +1,18 @@
+<div class="stream-audio-spectrum" [ngStyle]="accentColor ? { color: accentColor } : null">
+    <svg class="stream-audio-spectrum__svg" viewBox="0 0 100 32" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+        <defs>
+            <linearGradient [attr.id]="gradientId" x1="0" y1="16" x2="100" y2="16" gradientUnits="userSpaceOnUse">
+                <stop offset="0%" stop-color="currentColor" stop-opacity="0.45"/>
+                <stop offset="50%" stop-color="currentColor" stop-opacity="1"/>
+                <stop offset="100%" stop-color="currentColor" stop-opacity="0.45"/>
+            </linearGradient>
+        </defs>
+        <path class="stream-audio-spectrum__line"
+            [attr.d]="spectrumLinePath"
+            fill="none"
+            [attr.stroke]="'url(#' + gradientId + ')'"
+            stroke-width="2.4"
+            stroke-linecap="round"
+            stroke-linejoin="round"/>
+    </svg>
+</div>

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

@@ -0,0 +1,25 @@
+:host {
+  display: block;
+  width: 100%;
+  flex: 1 1 auto;
+}
+
+.stream-audio-spectrum {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding: 0 10px;
+  box-sizing: border-box;
+}
+
+.stream-audio-spectrum__svg {
+  width: 100%;
+  height: 32px;
+  display: block;
+}
+
+.stream-audio-spectrum__line {
+  pointer-events: none;
+  filter: drop-shadow(0 0 1px color-mix(in srgb, currentColor 35%, transparent));
+}

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

@@ -0,0 +1,62 @@
+import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+
+/**
+ * Icona stream: cerchio con linea orizzontale tipo spettro, reattiva al volume del microfono.
+ * Il parent (es. conversation-footer) aggiorna solo {@link volume} da VoiceService.
+ */
+@Component({
+  selector: 'chat-stream-audio-spectrum',
+  templateUrl: './stream-audio-spectrum.component.html',
+  styleUrl: './stream-audio-spectrum.component.scss',
+})
+export class StreamAudioSpectrumComponent implements OnInit, OnChanges {
+  private static gradSeq = 0;
+  readonly gradientId = `streamSpectrumGrad-${++StreamAudioSpectrumComponent.gradSeq}`;
+
+  /** Volume normalizzato come emesso da VoiceService (stessa scala del footer). */
+  @Input() volume = 0;
+  /** Colore tema (stroke / gradient); opzionale. */
+  @Input() accentColor?: string;
+
+  spectrumLinePath = 'M0,16 L100,16';
+
+  ngOnInit(): void {
+    this.refreshPath();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['volume']) {
+      this.refreshPath();
+    }
+  }
+
+  private refreshPath(): void {
+    const intensity = Math.min(this.volume / 80, 1);
+    const t = Date.now() / 175;
+    this.spectrumLinePath = this.buildSpectrumLinePath(intensity, t);
+  }
+
+  private buildSpectrumLinePath(intensity: number, t: number): string {
+    const x0 = 0;
+    const x1 = 100;
+    const cy = 16;
+    const segments = 100;
+    const amp = 0.8 + intensity * 6.5;
+    const parts: string[] = [];
+    for (let i = 0; i <= segments; i++) {
+      const p = i / segments;
+      const x = x0 + p * (x1 - x0);
+      const u = p * Math.PI * 6;
+      const wobble =
+        Math.sin(u + t) * 0.34 +
+        Math.sin(u * 2.35 + t * 1.12) * 0.24 +
+        Math.sin(u * 4.2 + t * 0.72) * 0.18 +
+        Math.sin(u * 6.8 + t * 1.05) * 0.14 +
+        Math.sin(u * 9.1 + t * 0.88) * 0.1;
+      const y = cy + amp * wobble;
+      const yClamped = Math.min(30, Math.max(2, y));
+      parts.push(i === 0 ? `M${x.toFixed(2)},${yClamped.toFixed(2)}` : `L${x.toFixed(2)},${yClamped.toFixed(2)}`);
+    }
+    return parts.join('');
+  }
+}

package/src/app/component/message/audio-sync/audio-sync.component.html

@@ -2,7 +2,6 @@
 
     <audio
       #audioPlayer
-      [src]="message?.metadata?.src"
       (timeupdate)="onTimeUpdate()"
       style="display:none">
     </audio>

package/src/app/component/message/audio-sync/audio-sync.component.scss

@@ -17,7 +17,6 @@
 .lyrics {
   font-size: inherit;
   margin: 0;
-  line-height: 1.4em;
   font-style: normal;
   letter-spacing: normal;
   font-stretch: normal;

package/src/app/component/message/audio-sync/audio-sync.component.ts

@@ -9,7 +9,11 @@ import {
   SimpleChanges,
   ViewChild,
 } from '@angular/core';
+import { Subscription } from 'rxjs';
 import { MessageModel } from 'src/chat21-core/models/message';
+import { TtsAudioPlaybackCoordinator } from 'src/app/providers/tts-audio-playback-coordinator.service';
+import { Globals } from 'src/app/utils/globals';
+import { VoiceService } from 'src/app/providers/voice/voice.service';
 
 /** HAVE_METADATA: metadati già disponibili (tipico audio servito da cache). */
 const HAVE_METADATA = 1;
@@ -41,7 +45,23 @@ export class AudioSyncComponent implements AfterViewInit, OnChanges, OnDestroy {
   private onMetadataLoaded: () => void;
   private onPlaybackEnded: () => void;
 
-  constructor(private readonly cdr: ChangeDetectorRef) {}
+  /** Id univoco per il coordinatore (di solito `message.uid`). */
+  private playbackOwnerId = '';
+  private destroyed = false;
+  private playbackRequested = false;
+  private playbackStarted = false;
+  private micInterrupted = false;
+  private streamAbort?: AbortController;
+  private mediaSourceObjectUrl?: string;
+  private cancelAllSub?: Subscription;
+  private micSpeechSub?: Subscription;
+
+  constructor(
+    private readonly cdr: ChangeDetectorRef,
+    private readonly ttsPlayback: TtsAudioPlaybackCoordinator,
+    private readonly globals: Globals,
+    private readonly voiceService: VoiceService,
+  ) {}
 
   /** `false` = messaggio già in storico: niente autoplay / karaoke. Da `message.isJustRecived`. */
   private get skipSyncAnimation(): boolean {
@@ -53,11 +73,14 @@ export class AudioSyncComponent implements AfterViewInit, OnChanges, OnDestroy {
       return;
     }
     if (this.audioRef?.nativeElement && this.timingReady) {
-      this.duration = this.audioRef.nativeElement.duration || 1;
+      const d = this.audioRef.nativeElement.duration;
+      if (Number.isFinite(d) && d > 0) {
+        this.duration = d;
+      }
       this.buildFakeTiming();
       if (this.skipSyncAnimation) {
         this.markAllWordsPast();
-      } else {
+      } else if (this.playbackStarted) {
         this.syncStatesFromCurrentTime();
       }
     }
@@ -66,7 +89,36 @@ export class AudioSyncComponent implements AfterViewInit, OnChanges, OnDestroy {
   ngAfterViewInit(): void {
     const audio = this.audioRef.nativeElement;
 
+    this.playbackOwnerId =
+      (this.message?.uid && String(this.message.uid).trim()) ||
+      `tts-${Date.now()}-${Math.random().toString(36).slice(2, 11)}`;
+
+    // Se l’utente parla al microfono mentre sta ascoltando, interrompi TUTTO (corrente + coda).
+    this.micSpeechSub = this.voiceService.speechStart$.subscribe(() => {
+      if (this.destroyed) {
+        return;
+      }
+      // interrompi solo se questo messaggio era in riproduzione o in attesa
+      if (this.playbackStarted || this.playbackRequested) {
+        this.micInterrupted = true;
+        this.ttsPlayback.cancelAll();
+        this.interruptPlaybackAndRevealText();
+      }
+    });
+
+    // Stop globale (es. mic) notificato dal coordinatore: ogni istanza deve fermarsi e mostrare testo intero.
+    this.cancelAllSub = this.ttsPlayback.cancelAll$.subscribe(() => {
+      if (this.destroyed) {
+        return;
+      }
+      this.micInterrupted = true;
+      this.interruptPlaybackAndRevealText();
+    });
+
     this.onPlaybackEnded = () => {
+      this.playbackStarted = false;
+      this.cleanupStreaming();
+      this.ttsPlayback.releaseIfCurrent(this.playbackOwnerId);
       if (this.skipSyncAnimation) {
         return;
       }
@@ -78,38 +130,84 @@ export class AudioSyncComponent implements AfterViewInit, OnChanges, OnDestroy {
     };
 
     this.onMetadataLoaded = () => {
-      if (this.timingReady) {
-        return;
+      // La durata potrebbe arrivare tardi (specie con streaming).
+      const d = audio.duration;
+      if (Number.isFinite(d) && d > 0) {
+        this.duration = d;
+      } else if (!this.timingReady) {
+        this.duration = this.estimateDurationSecondsFromText();
       }
+
       this.timingReady = true;
-      this.duration = audio.duration || 1;
       this.buildFakeTiming();
       if (this.skipSyncAnimation) {
         this.markAllWordsPast();
         this.cdr.detectChanges();
         return;
       }
-      this.syncStatesFromCurrentTime();
+      if (this.playbackStarted) {
+        this.syncStatesFromCurrentTime();
+      }
       this.cdr.detectChanges();
-
-      setTimeout(() => {
-        audio.play().catch(() => {
-          this.syncStatesFromCurrentTime();
-          this.cdr.detectChanges();
-        });
-      }, 200);
     };
 
     audio.addEventListener('loadedmetadata', this.onMetadataLoaded);
     audio.addEventListener('ended', this.onPlaybackEnded);
 
-    if (audio.readyState >= HAVE_METADATA) {
-      this.onMetadataLoaded();
+    // Prepara subito le parole (durata stimata) e poi aggiorna quando arriva la metadata reale.
+    this.duration = this.estimateDurationSecondsFromText();
+    this.timingReady = true;
+    this.buildFakeTiming();
+    if (this.skipSyncAnimation) {
+      this.markAllWordsPast();
+      this.cdr.detectChanges();
+      return;
     }
+    this.cdr.detectChanges();
+
+    setTimeout(() => {
+      if (this.playbackRequested || this.destroyed || this.micInterrupted) {
+        if (this.micInterrupted) {
+          this.markAllWordsPast();
+          if (this.message) {
+            this.message.isJustRecived = false;
+          }
+          this.cdr.detectChanges();
+        }
+        return;
+      }
+      this.playbackRequested = true;
+      this.ttsPlayback.requestStart(this.playbackOwnerId, () => {
+        if (this.destroyed || this.micInterrupted) {
+          this.ttsPlayback.releaseIfCurrent(this.playbackOwnerId);
+          return;
+        }
+        this.playbackStarted = true;
+        this.syncStatesFromCurrentTime();
+        this.cdr.detectChanges();
+        this.startPlayback(audio);
+      });
+    }, 200);
   }
 
   ngOnDestroy(): void {
+    this.destroyed = true;
+    this.playbackStarted = false;
+    this.cleanupStreaming();
+    this.cancelAllSub?.unsubscribe();
+    this.micSpeechSub?.unsubscribe();
+
     const audio = this.audioRef?.nativeElement;
+    if (audio) {
+      try {
+        audio.pause();
+        audio.currentTime = 0;
+      } catch {
+        /* ignore */
+      }
+    }
+    this.ttsPlayback.release(this.playbackOwnerId);
+
     if (!audio) {
       return;
     }
@@ -121,6 +219,292 @@ export class AudioSyncComponent implements AfterViewInit, OnChanges, OnDestroy {
     }
   }
 
+  private interruptPlaybackAndRevealText(): void {
+    this.playbackStarted = false;
+    this.cleanupStreaming();
+
+    const audio = this.audioRef?.nativeElement;
+    if (audio) {
+      try {
+        audio.pause();
+        audio.currentTime = 0;
+      } catch {
+        /* ignore */
+      }
+    }
+
+    // Rimuove se era in coda (o rilascia se era corrente).
+    this.ttsPlayback.releaseIfCurrent(this.playbackOwnerId);
+
+    // Mostra tutto il testo (niente "future" invisibili).
+    this.markAllWordsPast();
+    if (this.message) {
+      this.message.isJustRecived = false;
+    }
+    this.cdr.detectChanges();
+  }
+
+  private startPlayback(audio: HTMLAudioElement): void {
+    const src = (this.message as any)?.metadata?.src as string | undefined;
+    if (!src) {
+      this.playbackStarted = false;
+      this.ttsPlayback.releaseIfCurrent(this.playbackOwnerId);
+      this.markAllWordsPast();
+      if (this.message) {
+        this.message.isJustRecived = false;
+      }
+      this.cdr.detectChanges();
+      return;
+    }
+
+    if (this.message?.type === 'tts') {
+      this.startStreamingFromEndpoint(audio, src);
+      return;
+    }
+
+    audio.src = src;
+    try {
+      audio.currentTime = 0;
+    } catch {
+      /* ignore */
+    }
+    audio.play().catch(() => this.handlePlaybackError());
+  }
+
+  private startStreamingFromEndpoint(audio: HTMLAudioElement, endpoint: string): void {
+    this.cleanupStreaming();
+
+    const jwt = this.getJwtToken();
+    const voiceSettings = this.getVoiceSettingsBody(); 
+    const requestBody = this.buildTtsRequestBody(voiceSettings);
+    // <audio src="..."> non può inviare header/body: serve fetch().
+    const hasMse = typeof (window as any).MediaSource !== 'undefined';
+    if (!hasMse) {
+      this.fetchAsBlobAndPlay(audio, endpoint, jwt, requestBody);
+      return;
+    }
+
+    const MediaSourceCtor = (window as any).MediaSource as typeof MediaSource;
+    const mediaSource = new MediaSourceCtor();
+    const objectUrl = URL.createObjectURL(mediaSource);
+    this.mediaSourceObjectUrl = objectUrl;
+    audio.src = objectUrl;
+
+    const abort = new AbortController();
+    this.streamAbort = abort;
+
+    const onSourceOpen = async () => {
+      mediaSource.removeEventListener('sourceopen', onSourceOpen);
+      try {
+        const headers: Record<string, string> = {
+          'Content-Type': 'application/json',
+        };
+        if (jwt) {
+          headers['Authorization'] = jwt;
+        }
+        
+        const response = await fetch(endpoint, {
+          method: 'POST',
+          headers,
+          body: JSON.stringify(requestBody),
+          signal: abort.signal,
+        });
+        if (!response.ok || !response.body) {
+          throw new Error(`TTS stream request failed (${response.status})`);
+        }
+
+        const headerType = (response.headers.get('content-type') || '').split(';')[0].trim();
+        const mime = (headerType && MediaSourceCtor.isTypeSupported(headerType))
+          ? headerType
+          : 'audio/mpeg';
+
+        if (!MediaSourceCtor.isTypeSupported(mime)) {
+          this.cleanupStreaming();
+          // Fallback: fetch completo e play via blob (no streaming).
+          this.fetchAsBlobAndPlay(audio, endpoint, jwt, requestBody);
+          return;
+        }
+
+        const sourceBuffer = mediaSource.addSourceBuffer(mime);
+        sourceBuffer.mode = 'sequence';
+
+        const reader = response.body.getReader();
+        const queue: Uint8Array[] = [];
+        let doneReading = false;
+        let started = false;
+
+        const tryEndOfStream = () => {
+          if (doneReading && queue.length === 0 && !sourceBuffer.updating) {
+            try {
+              mediaSource.endOfStream();
+            } catch {
+              /* ignore */
+            }
+          }
+        };
+
+        const pump = () => {
+          if (abort.signal.aborted) {
+            return;
+          }
+          if (sourceBuffer.updating) {
+            return;
+          }
+          const chunk = queue.shift();
+          if (!chunk) {
+            tryEndOfStream();
+            return;
+          }
+          try {
+            const ab = chunk.buffer.slice(
+              chunk.byteOffset,
+              chunk.byteOffset + chunk.byteLength,
+            ) as ArrayBuffer;
+            sourceBuffer.appendBuffer(ab);
+          } catch {
+            this.cleanupStreaming();
+            this.fetchAsBlobAndPlay(audio, endpoint, jwt, requestBody);
+          }
+        };
+
+        sourceBuffer.addEventListener('updateend', () => {
+          if (!started && this.playbackStarted && !this.destroyed) {
+            started = true;
+            audio.play().catch(() => this.handlePlaybackError());
+          }
+          pump();
+        });
+
+        // Primo pump (se arrivano subito chunk)
+        pump();
+
+        while (!abort.signal.aborted) {
+          const { value, done } = await reader.read();
+          if (done) {
+            doneReading = true;
+            break;
+          }
+          if (value && value.byteLength > 0) {
+            queue.push(value);
+            pump();
+          }
+        }
+
+        doneReading = true;
+        tryEndOfStream();
+      } catch {
+        if (!abort.signal.aborted) {
+          this.handlePlaybackError();
+        }
+      }
+    };
+
+    mediaSource.addEventListener('sourceopen', onSourceOpen);
+  }
+
+  private handlePlaybackError(): void {
+    this.playbackStarted = false;
+    this.cleanupStreaming();
+    this.ttsPlayback.releaseIfCurrent(this.playbackOwnerId);
+    this.markAllWordsPast();
+    if (this.message) {
+      this.message.isJustRecived = false;
+    }
+    this.cdr.detectChanges();
+  }
+
+  private cleanupStreaming(): void {
+    try {
+      this.streamAbort?.abort();
+    } catch {
+      /* ignore */
+    }
+    this.streamAbort = undefined;
+
+    if (this.mediaSourceObjectUrl) {
+      try {
+        URL.revokeObjectURL(this.mediaSourceObjectUrl);
+      } catch {
+        /* ignore */
+      }
+      this.mediaSourceObjectUrl = undefined;
+    }
+  }
+
+  private getJwtToken(): string | null {
+    const token = (this.globals?.tiledeskToken || this.globals?.jwt || '').trim();
+    return token.length > 0 ? token : null;
+  }
+
+  private getVoiceSettingsBody(): unknown {
+    const raw = (this.message as any)?.metadata?.voiceSettings;
+    if (raw === null || raw === undefined) {
+      return {};
+    }
+    if (typeof raw === 'string') {
+      const s = raw.trim();
+      if (!s) return {};
+      try {
+        return JSON.parse(s);
+      } catch {
+        // se non è JSON valido, invialo come stringa (il backend può gestirlo)
+        return { voiceSettings: raw };
+      }
+    }
+    return raw;
+  }
+
+  private async fetchAsBlobAndPlay(
+    audio: HTMLAudioElement,
+    endpoint: string,
+    jwt: string | null,
+    requestBody: unknown,
+  ): Promise<void> {
+    try {
+      const headers: Record<string, string> = {
+        'Content-Type': 'application/json',
+      };
+      if (jwt) {
+        headers['Authorization'] = jwt;
+      }
+
+      const response = await fetch(endpoint, {
+        method: 'POST',
+        headers,
+        body: JSON.stringify(requestBody ?? {}),
+        signal: this.streamAbort?.signal,
+      });
+
+      if (!response.ok) {
+        throw new Error(`TTS request failed (${response.status})`);
+      }
+
+      const blob = await response.blob();
+      if (this.destroyed) {
+        return;
+      }
+
+      const objectUrl = URL.createObjectURL(blob);
+      this.mediaSourceObjectUrl = objectUrl;
+      audio.src = objectUrl;
+      audio.play().catch(() => this.handlePlaybackError());
+    } catch {
+      this.handlePlaybackError();
+    }
+  }
+
+  private buildTtsRequestBody(voiceSettings: unknown): unknown {
+    const text = this.message?.text ?? '';
+    if (
+      voiceSettings &&
+      typeof voiceSettings === 'object' &&
+      !Array.isArray(voiceSettings)
+    ) {
+      return { ...(voiceSettings as Record<string, unknown>), text, streaming: true };
+    }
+    return { voiceSettings, text, streaming: true };
+  }
+
   private markAllWordsPast(): void {
     this.words.forEach((w) => {
       w.state = 'past';
@@ -128,6 +512,18 @@ export class AudioSyncComponent implements AfterViewInit, OnChanges, OnDestroy {
     this.activeIndex = -1;
   }
 
+  private estimateDurationSecondsFromText(): number {
+    const rawWords = (this.message?.text || '')
+      .trim()
+      .split(/\s+/)
+      .filter((w) => w.length > 0);
+    if (rawWords.length === 0) {
+      return 1;
+    }
+    // ~140 WPM → ~0.43s/word
+    return Math.max(1, rawWords.length * 0.43);
+  }
+
   buildFakeTiming(): void {
     const rawWords = (this.message?.text || '')
       .trim()
@@ -176,6 +572,9 @@ export class AudioSyncComponent implements AfterViewInit, OnChanges, OnDestroy {
   }
 
   onTimeUpdate(): void {
+    if (!this.playbackStarted) {
+      return;
+    }
     this.syncStatesFromCurrentTime();
   }
 

package/src/app/providers/tts-audio-playback-coordinator.service.ts

@@ -0,0 +1,86 @@
+import { Injectable } from '@angular/core';
+import { Observable, Subject } from 'rxjs';
+
+/**
+ * Garantisce un solo messaggio TTS in riproduzione alla volta.
+ * Se arrivano più messaggi TTS, vengono riprodotti in coda (FIFO) senza interrompere quello corrente.
+ */
+@Injectable({ providedIn: 'root' })
+export class TtsAudioPlaybackCoordinator {
+  private currentOwnerId: string | null = null;
+  private readonly queue: Array<{ ownerId: string; start: () => void }> = [];
+
+  private readonly cancelAllSource = new Subject<void>();
+  /** Emesso quando la riproduzione TTS va interrotta globalmente (es. l’utente parla al microfono). */
+  readonly cancelAll$: Observable<void> = this.cancelAllSource.asObservable();
+
+  /**
+   * Richiede l'avvio della riproduzione TTS per `ownerId`.
+   * Se non c'è nessun TTS attivo, parte subito; altrimenti viene messo in coda.
+   */
+  requestStart(ownerId: string, start: () => void): void {
+    const id = (ownerId || '').trim();
+    if (!id) {
+      return;
+    }
+    if (this.currentOwnerId === id) {
+      return;
+    }
+    if (this.queue.some((j) => j.ownerId === id)) {
+      return;
+    }
+    if (this.currentOwnerId) {
+      this.queue.push({ ownerId: id, start });
+      return;
+    }
+    this.currentOwnerId = id;
+    try {
+      start();
+    } catch {
+      this.releaseIfCurrent(id);
+    }
+  }
+
+  /** Chiamare a fine riproduzione naturale (`ended`) se questo messaggio era ancora “attivo”. */
+  releaseIfCurrent(ownerId: string): void {
+    const id = (ownerId || '').trim();
+    if (!id) {
+      return;
+    }
+    if (this.currentOwnerId !== id) {
+      // Se era in coda, rimuovilo.
+      const idx = this.queue.findIndex((j) => j.ownerId === id);
+      if (idx !== -1) {
+        this.queue.splice(idx, 1);
+      }
+      return;
+    }
+
+    this.currentOwnerId = null;
+    const next = this.queue.shift();
+    if (!next) {
+      return;
+    }
+    this.currentOwnerId = next.ownerId;
+    try {
+      next.start();
+    } catch {
+      this.releaseIfCurrent(next.ownerId);
+    }
+  }
+
+  /** Distruzione componente o stop esplicito. */
+  release(ownerId: string): void {
+    this.releaseIfCurrent(ownerId);
+  }
+
+  /**
+   * Interrompe TUTTA la riproduzione TTS (corrente + coda) e notifica i componenti.
+   * I componenti devono fermare l’audio e mostrare il testo per intero.
+   */
+  cancelAll(): void {
+    this.queue.splice(0, this.queue.length);
+    this.currentOwnerId = null;
+    this.cancelAllSource.next();
+  }
+}

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

@@ -33,6 +33,10 @@ 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();
+
   // 🔊 REALTIME VOLUME STREAM
   private readonly volumeSubject = new BehaviorSubject<number>(0);
   readonly volume$: Observable<number> = this.volumeSubject.asObservable();
@@ -83,6 +87,7 @@ export class VoiceService {
       },
       onSpeechStart: () => {
         this.logger.log('[VoiceService] speech start');
+        this.speechStartSubject.next();
         this.startMediaRecorderSegment();
       },
       onSpeechEnd: () => {

package/src/app/sass/_variables.scss

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

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);
 
 
 }