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

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

@@ -0,0 +1,558 @@
+import {
+  AfterViewInit,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  Input,
+  OnChanges,
+  OnDestroy,
+  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;
+
+@Component({
+  selector: 'chat-audio-sync',
+  templateUrl: './audio-sync.component.html',
+  styleUrl: './audio-sync.component.scss',
+})
+export class AudioSyncComponent implements AfterViewInit, OnChanges, OnDestroy {
+  @Input() message: MessageModel | null = null;
+  @Input() color?: string;
+
+  @ViewChild('audioPlayer') audioRef!: ElementRef<HTMLAudioElement>;
+  @ViewChild('transcriptBox') transcriptBox!: ElementRef<HTMLElement>;
+
+  words: {
+    text: string;
+    start: number;
+    end: number;
+    state: 'future' | 'active' | 'past';
+  }[] = [];
+
+  currentTime = 0;
+  duration = 1;
+  activeIndex = -1;
+
+  private timingReady = false;
+  private onMetadataLoaded: () => void;
+  private onPlaybackEnded: () => void;
+
+  /** 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 {
+    return this.message?.isJustRecived === false;
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (!changes['message']) {
+      return;
+    }
+    if (this.audioRef?.nativeElement && this.timingReady) {
+      const d = this.audioRef.nativeElement.duration;
+      if (Number.isFinite(d) && d > 0) {
+        this.duration = d;
+      }
+      this.buildFakeTiming();
+      if (this.skipSyncAnimation) {
+        this.markAllWordsPast();
+      } else if (this.playbackStarted) {
+        this.syncStatesFromCurrentTime();
+      }
+    }
+  }
+
+  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;
+      }
+      this.markAllWordsPast();
+      if (this.message) {
+        this.message.isJustRecived = false;
+      }
+      this.cdr.detectChanges();
+    };
+
+    this.onMetadataLoaded = () => {
+      // 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.buildFakeTiming();
+      if (this.skipSyncAnimation) {
+        this.markAllWordsPast();
+        this.cdr.detectChanges();
+        return;
+      }
+      if (this.playbackStarted) {
+        this.syncStatesFromCurrentTime();
+      }
+      this.cdr.detectChanges();
+    };
+
+    audio.addEventListener('loadedmetadata', this.onMetadataLoaded);
+    audio.addEventListener('ended', this.onPlaybackEnded);
+
+    // 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;
+    }
+    if (this.onMetadataLoaded) {
+      audio.removeEventListener('loadedmetadata', this.onMetadataLoaded);
+    }
+    if (this.onPlaybackEnded) {
+      audio.removeEventListener('ended', this.onPlaybackEnded);
+    }
+  }
+
+  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';
+    });
+    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()
+      .split(/\s+/)
+      .filter((w) => w.length > 0);
+    if (rawWords.length === 0) {
+      this.words = [];
+      return;
+    }
+    const step = this.duration / rawWords.length;
+
+    this.words = rawWords.map((w, i) => ({
+      text: w,
+      start: i * step,
+      end: (i + 1) * step,
+      state: 'future' as const,
+    }));
+  }
+
+  syncStatesFromCurrentTime(): void {
+    if (this.skipSyncAnimation) {
+      return;
+    }
+    const audio = this.audioRef?.nativeElement;
+    if (!audio || this.words.length === 0) {
+      return;
+    }
+    this.currentTime = audio.currentTime;
+    let newActiveIndex = -1;
+
+    this.words.forEach((w, i) => {
+      if (this.currentTime >= w.end) {
+        w.state = 'past';
+      } else if (this.currentTime >= w.start && this.currentTime < w.end) {
+        w.state = 'active';
+        newActiveIndex = i;
+      } else {
+        w.state = 'future';
+      }
+    });
+
+    if (newActiveIndex !== this.activeIndex) {
+      this.activeIndex = newActiveIndex;
+      this.scrollToActive();
+    }
+  }
+
+  onTimeUpdate(): void {
+    if (!this.playbackStarted) {
+      return;
+    }
+    this.syncStatesFromCurrentTime();
+  }
+
+  scrollToActive(): void {
+    const container = this.transcriptBox?.nativeElement;
+    const active = container?.querySelector('.active') as HTMLElement;
+
+    if (active) {
+      active.scrollIntoView({
+        behavior: 'smooth',
+        block: 'center',
+      });
+    }
+  }
+
+  trackByIndex(index: number): number {
+    return index;
+  }
+}

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

@@ -64,6 +64,11 @@
         [stylesMap]="stylesMap">
       </chat-audio>
 
+      <chat-audio-sync *ngIf="isAudioTTS(message)"
+        [message]="message"
+        [color]="fontColor">
+      </chat-audio-sync>
+
 
       <!-- <chat-frame *ngIf="message.metadata && message.metadata.type && message.metadata.type.includes('video')"
         [metadata]="message.metadata"
@@ -75,7 +80,7 @@
       <!-- <div *ngIf="message.type == 'text'"> -->     
 
       <!-- tooltip="{{message.timestamp | dateAgo}} ({{message.timestamp | date:'shortDate'}} {{message.timestamp | date:'HH:mm:ss'}})" placement="bottom" -->
-      <div *ngIf="message?.text && !isAudio(message)" >
+      <div *ngIf="message?.text && (!isAudio(message) && !isAudioTTS(message))" >
 
         <!-- [htmlEnabled]="(message?.type==='html')? true : false" -->
         <chat-text *ngIf="message?.type !=='html'"

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

@@ -5,7 +5,7 @@ import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 import { MAX_WIDTH_IMAGES, MESSAGE_TYPE_MINE, MESSAGE_TYPE_OTHERS, MIN_WIDTH_IMAGES } from 'src/chat21-core/utils/constants';
 import { convertColorToRGBA } from 'src/chat21-core/utils/utils';
-import { isAudio, isFile, isFrame, isImage, messageType } from 'src/chat21-core/utils/utils-message';
+import { isAudio, isAudioTTS, isFile, isFrame, isImage, messageType } from 'src/chat21-core/utils/utils-message';
 import { getColorBck } from 'src/chat21-core/utils/utils-user';
 
 @Component({
@@ -26,6 +26,7 @@ export class BubbleMessageComponent implements OnInit {
   isFile = isFile;
   isFrame = isFrame;
   isAudio = isAudio;
+  isAudioTTS=isAudioTTS;
   convertColorToRGBA = convertColorToRGBA
 
  // ========== begin:: check message type functions ======= //

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

@@ -1125,11 +1125,22 @@ export class GlobalSettingsService {
         if (TEMP !== undefined) {
             globals.showAudioRecorderFooterButton = (TEMP === true) ? true : false;
         }
+        TEMP = tiledeskSettings['showAudioStreamFooterButton'];
+        // this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > showAudioStreamFooterButton:: ', TEMP]);
+        if (TEMP !== undefined) {
+            globals.showAudioStreamFooterButton = (TEMP === true) ? true : false;
+        }
         TEMP = tiledeskSettings['size'];
         // this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > size:: ', TEMP]);
         if (TEMP !== undefined) {
             globals.size = TEMP;
         } 
+
+        TEMP = tiledeskSettings['closeChatInConversation'];
+        // this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > closeChatInConversation:: ', TEMP]);
+        if (TEMP !== undefined) {
+            globals.closeChatInConversation = (TEMP === true) ? true : false;
+        }
     }
 
     /**
@@ -1867,6 +1878,11 @@ export class GlobalSettingsService {
             globals.showAttachmentFooterButton = stringToBoolean(TEMP);
         }
 
+        TEMP = getParameterByName(windowContext, 'tiledesk_showAudioStreamFooterButton');
+        if (TEMP) {
+            globals.showAudioStreamFooterButton = stringToBoolean(TEMP);
+        }
+
         TEMP = getParameterByName(windowContext, 'tiledesk_showEmojiFooterButton');
         if (TEMP) {
             globals.showEmojiFooterButton = stringToBoolean(TEMP);
@@ -1876,6 +1892,11 @@ export class GlobalSettingsService {
         if (TEMP) {
             globals.size = TEMP;
         }
+
+        TEMP = getParameterByName(windowContext, 'tiledesk_closeChatInConversation');
+        if (TEMP) {
+            globals.closeChatInConversation = stringToBoolean(TEMP);
+        }
         
     }
 

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

@@ -302,6 +302,7 @@ export class TranslatorService {
       'CLOSED',
       'LABEL_PREVIEW',
       'MAX_ATTACHMENT',
+      'MAX_ATTACHMENT_ERROR',
       'EMOJI'
     ];
 
@@ -358,6 +359,7 @@ export class TranslatorService {
       globals.LABEL_PREVIEW = res['LABEL_PREVIEW']
       globals.LABEL_ERROR_FIELD_REQUIRED= res['LABEL_ERROR_FIELD_REQUIRED']
       globals.MAX_ATTACHMENT = res['MAX_ATTACHMENT']
+      globals.MAX_ATTACHMENT_ERROR = res['MAX_ATTACHMENT_ERROR']
       globals.EMOJI = res['EMOJI']