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

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

@@ -9,7 +9,10 @@ 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';
 
 /** HAVE_METADATA: metadati già disponibili (tipico audio servito da cache). */
 const HAVE_METADATA = 1;
@@ -41,7 +44,20 @@ 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 streamAbort?: AbortController;
+  private mediaSourceObjectUrl?: string;
+  private stopAllSub?: Subscription;
+
+  constructor(
+    private readonly cdr: ChangeDetectorRef,
+    private readonly ttsPlayback: TtsAudioPlaybackCoordinator,
+    private readonly globals: Globals,
+  ) {}
 
   /** `false` = messaggio già in storico: niente autoplay / karaoke. Da `message.isJustRecived`. */
   private get skipSyncAnimation(): boolean {
@@ -53,11 +69,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 +85,14 @@ 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)}`;
+
     this.onPlaybackEnded = () => {
+      this.playbackStarted = false;
+      this.cleanupStreaming();
+      this.ttsPlayback.releaseIfCurrent(this.playbackOwnerId);
       if (this.skipSyncAnimation) {
         return;
       }
@@ -78,38 +104,98 @@ 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) {
+        return;
+      }
+      this.playbackRequested = true;
+      this.ttsPlayback.requestStart(this.playbackOwnerId, () => {
+        if (this.destroyed) {
+          this.ttsPlayback.releaseIfCurrent(this.playbackOwnerId);
+          return;
+        }
+        this.playbackStarted = true;
+        this.syncStatesFromCurrentTime();
+        this.cdr.detectChanges();
+        this.startPlayback(audio);
+      });
+    }, 200);
+
+    // Stop signal: user pressed X while this TTS was playing or queued.
+    this.stopAllSub = this.ttsPlayback.stopAllPlayback$.subscribe(() => {
+      if (!this.playbackRequested && !this.playbackStarted) {
+        return;
+      }
+      this.destroyed = true;
+      this.playbackStarted = false;
+      this.cleanupStreaming();
+      try {
+        audio.pause();
+        audio.currentTime = 0;
+      } catch {
+        /* ignore */
+      }
+      this.markAllWordsPast();
+      if (this.message) {
+        this.message.isJustRecived = false;
+      }
+      this.cdr.detectChanges();
+    });
   }
 
   ngOnDestroy(): void {
+    this.destroyed = true;
+    this.playbackStarted = false;
+    this.cleanupStreaming();
+    this.stopAllSub?.unsubscribe();
+    this.stopAllSub = undefined;
+
     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 +207,266 @@ export class AudioSyncComponent implements AfterViewInit, OnChanges, OnDestroy {
     }
   }
 
+  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',
+          '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',
+        'Authorization': `${jwt}`
+      };
+
+      console.log('headers', headers);
+      console.log('requestBody', requestBody);
+
+      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 +474,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 +534,9 @@ export class AudioSyncComponent implements AfterViewInit, OnChanges, OnDestroy {
   }
 
   onTimeUpdate(): void {
+    if (!this.playbackStarted) {
+      return;
+    }
     this.syncStatesFromCurrentTime();
   }
 
@@ -194,4 +555,4 @@ export class AudioSyncComponent implements AfterViewInit, OnChanges, OnDestroy {
   trackByIndex(index: number): number {
     return index;
   }
-}
+}

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

@@ -0,0 +1,93 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, 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 }> = [];
+
+  /** Emits true while any TTS is playing or queued; false when the queue is fully drained. */
+  private readonly _isTTSPlaying$ = new BehaviorSubject<boolean>(false);
+  readonly isTTSPlaying$ = this._isTTSPlaying$.asObservable();
+
+  /** Emits once when stopAll() is called — signals every AudioSyncComponent to abort immediately. */
+  private readonly _stopAll$ = new Subject<void>();
+  readonly stopAllPlayback$: Observable<void> = this._stopAll$.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;
+    this._isTTSPlaying$.next(true);
+    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) {
+      this._isTTSPlaying$.next(false);
+      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);
+  }
+
+  /**
+   * Stops all TTS playback immediately and clears the queue.
+   * Broadcasts on stopAllPlayback$ so every AudioSyncComponent can abort its stream and reveal all text.
+   */
+  stopAll(): void {
+    this.queue.length = 0;
+    this.currentOwnerId = null;
+    this._isTTSPlaying$.next(false);
+    this._stopAll$.next();
+  }
+}