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

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

@@ -1,4 +1,4 @@
-import { Component, ComponentFactoryResolver, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild, ViewContainerRef } from '@angular/core';
+import { Component, ComponentFactoryResolver, ElementRef, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, ViewChild, ViewContainerRef } from '@angular/core';
 import { error } from 'console';
 import { FILE_SIZE_LIMIT } from 'src/app/utils/constants';
 import { Globals } from 'src/app/utils/globals';
@@ -15,13 +15,16 @@ import { TYPE_MSG_FILE, TYPE_MSG_IMAGE, TYPE_MSG_TEXT } from 'src/chat21-core/ut
 import { convertColorToRGBA, isAllowedUrlInText, isEmoji } from 'src/chat21-core/utils/utils';
 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',
   templateUrl: './conversation-footer.component.html',
   styleUrls: ['./conversation-footer.component.scss']
 })
-export class ConversationFooterComponent implements OnInit, OnChanges {
+export class ConversationFooterComponent implements OnInit, OnChanges, OnDestroy {
 
   @Input() conversationWith: string;
   @Input() attributes: string;
@@ -32,8 +35,9 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
   @Input() userFullname: string;
   @Input() userEmail: string;
   @Input() showAttachmentFooterButton: boolean;
-  @Input() showEmojiFooterButton: boolean
-  @Input() showAudioRecorderFooterButton: boolean
+  @Input() showEmojiFooterButton: boolean;
+  @Input() showAudioRecorderFooterButton: boolean;
+  @Input() showAudioStreamFooterButton: boolean;
   // @Input() showContinueConversationButton: boolean;
   @Input() isConversationArchived: boolean;
   @Input() hideTextAreaContent: boolean;
@@ -42,6 +46,7 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
   @Input() isEmojiiPickerShow: boolean;
   @Input() footerMessagePlaceholder: string;
   @Input() fileUploadAccept: string;
+  @Input() closeChatInConversation: boolean;
   @Input() dropEvent: Event;
   @Input() poweredBy: string;
   @Input() stylesMap: Map<string, string>
@@ -52,6 +57,8 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
   @Output() onChangeTextArea = new EventEmitter<any>();
   @Output() onAttachmentFileButtonClicked = new EventEmitter<any>();
   @Output() onNewConversationButtonClicked = new EventEmitter();
+  @Output() onStreamAudioActiveChange = new EventEmitter<boolean>();
+  @Output() onCloseChatButtonClicked = new EventEmitter();
 
   @ViewChild('chat21_file') public chat21_file: ElementRef;
   // @ViewChild('emojii_container', {read: ViewContainerRef}) selector;
@@ -85,24 +92,41 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
 
   showAlertEmoji: boolean = false
 
+  /** Stream audio UI: icona equalizer → X; alert con onde animate sopra il footer */
+  isStreamAudioActive = false;
+  /** True while the bot's TTS audio is playing — mic segments are suppressed, spectrum turns grey. */
+  isBotSpeaking = false;
+  /** Sottoscrizione ai segmenti audio (VAD → WebM) dal {@link VoiceService}. */
+  private voiceAudioSubscription?: Subscription;
+  /** Sottoscrizione al volume audio (real-time) dal {@link VoiceService}. */
+  private voiceVolumeSubscription?: Subscription;
+  /** Sottoscrizione allo stato TTS (bot sta parlando). */
+  private botSpeakingSub?: Subscription;
+  /** Passato a {@link StreamAudioSpectrumComponent} per disegnare la linea spettro. */
+  currentVolume = 0;
+
   file_size_limit = FILE_SIZE_LIMIT;
   attachmentTooltip: string = '';
+  isErrorNetwork: boolean = false;
 
 
   convertColorToRGBA = convertColorToRGBA;
   private logger: LoggerService = LoggerInstance.getInstance()
   constructor(private chatManager: ChatManager,
               private typingService: TypingService,
-              private uploadService: UploadService) { }
+              private uploadService: UploadService,
+              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;
+      void this.stopVoice();
     }
     if(changes['hideTextReply'] && changes['hideTextReply'].currentValue !== undefined){
       this.restoreTextArea();
@@ -142,6 +166,66 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
   //   }, 500);
   // }
 
+  /**
+   * Microfono + VAD: ogni fine parlato il servizio emette su `audioSegment$` → upload.
+   */
+  async initVoice() {
+    this.voiceAudioSubscription?.unsubscribe();
+    this.voiceVolumeSubscription?.unsubscribe();
+    this.botSpeakingSub?.unsubscribe();
+
+    this.voiceAudioSubscription = this.voiceService.audioSegment$.subscribe((rec) => {
+      console.log('[CONV-FOOTER] audioSegment$', rec);
+      this.prepareAndUpload(rec.blob);
+    });
+    this.voiceVolumeSubscription = this.voiceService.volume$.subscribe((volume) => {
+      this.currentVolume = volume;
+    });
+    this.botSpeakingSub = this.voiceService.isAcquisitionBlocked$.subscribe((blocked) => {
+      this.isBotSpeaking = blocked;
+    });
+    await this.voiceService.startSession();
+  }
+
+  async stopVoice(options?: { discardInProgressSegment?: boolean }) {
+    // Stop all active TTS audio immediately and reveal all text.
+    this.ttsPlayback.stopAll();
+
+    this.voiceAudioSubscription?.unsubscribe();
+    this.voiceAudioSubscription = undefined;
+
+    this.voiceVolumeSubscription?.unsubscribe();
+    this.voiceVolumeSubscription = undefined;
+
+    this.botSpeakingSub?.unsubscribe();
+    this.botSpeakingSub = undefined;
+    this.isBotSpeaking = false;
+
+    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.
+   */
+  interruptStreamDueToPeerMessage(): void {
+    if (!this.isStreamAudioActive) {
+      return;
+    }
+    this.logger.log('[CONV-FOOTER] discard recording segment: incoming message from peer (stream stays on)');
+    try {
+      this.voiceService.discardCurrentRecordingSegment();
+    } catch (e) {
+      this.logger.error('[CONV-FOOTER] interruptStreamDueToPeerMessage', e);
+    }
+  }
+
+  ngOnDestroy() {
+    void this.stopVoice();
+  }
+
   // ========= begin:: functions send image ======= //
   // START LOAD IMAGE //
   /** load the selected image locally and open the pop up preview */
@@ -521,7 +605,7 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
     }
   }
 
-  prepareAndUpload(audioBlob: Blob) {
+  prepareAndUpload(audioBlob: Blob, text: string = '') {
 
     this.isFilePendingToUpload = true;
     
@@ -551,7 +635,7 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
     this.logger.log('[UPLOAD] metadata:', metadata);
   
     // stesso metodo che già usi
-    this.uploadSingle(metadata, file, '');
+    this.uploadSingle(metadata, file, text);
   }
 
   // Funzione per convertire Blob in Base64 usando FileReader
@@ -658,6 +742,30 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
     }
   }
 
+  async onStreamPressed(event: Event) {
+    this.logger.log('[CONV-FOOTER] onStreamPressed:event', event);
+    event.preventDefault();
+    if (this.showAlertEmoji) {
+      return;
+    }
+    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;
+      }
+    } else {
+      await this.stopVoice();
+      this.isStreamAudioActive = false;
+    }
+    this.onStreamAudioActiveChange.emit(this.isStreamAudioActive);
+    this.logger.log('[CONV-FOOTER] isStreamAudioActive', this.isStreamAudioActive);
+  }
+
   async onEmojiiPickerClicked(){
     // if(this.loadPickerModule){
     //   this.loadPickerModule = false;
@@ -709,6 +817,10 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
     this.onNewConversationButtonClicked.emit();
   }
 
+  onCloseChat(event){
+    this.onCloseChatButtonClicked.emit();
+  }
+
   // onContinueConversation(){
   //   this.hideTextAreaContent = false;
   //   this.onBackButton.emit(false)

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

@@ -0,0 +1,43 @@
+<ng-container [ngSwitch]="mode">
+    <!-- ALERT: spectrum line (fills streamAudioAlert width) -->
+    <div *ngSwitchCase="'alert'" 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>
+
+    <!-- BUTTON: inactive icon / expanded pill content -->
+    <ng-container *ngSwitchCase="'button'">
+        <span class="stream-audio-button__icon" *ngIf="!active" aria-hidden="true">
+            <svg role="img" xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 30 30" fill="currentColor" preserveAspectRatio="xMidYMid meet">
+                <path class="s0" d="m5.21 7.41c-1.21 0-2.21 0.99-2.21 2.21v8.14c0 1.21 0.99 2.21 2.21 2.21 1.22 0 2.21-0.99 2.21-2.21v-8.14c0-1.21-0.99-2.21-2.21-2.21z"/>
+                <path class="s0" d="m11.64 3.01c-1.22 0-2.21 0.99-2.21 2.2v16.94c0 1.21 0.99 2.2 2.21 2.2 1.22 0 2.21-0.98 2.21-2.2v-16.94c0-1.21-0.99-2.21-2.21-2.21z"/>
+                <path class="s0" d="m15.86 9.25v8.88c0 1.21 0.99 2.21 2.21 2.21 1.22 0 2.21-0.99 2.21-2.21v-8.88c0-1.22-0.99-2.21-2.21-2.21-1.22 0-2.21 0.99-2.21 2.21z"/>
+                <path class="s0" d="m24.5 8.97c-1.22 0-2.21 0.99-2.21 2.21v5.02c0 1.22 0.99 2.21 2.21 2.21 1.22 0 2.21-0.99 2.21-2.21v-5.02c0-1.21-0.99-2.21-2.21-2.21z"/>
+            </svg>
+        </span>
+
+        <span class="stream-audio-button__expanded" *ngIf="active">
+            <span class="stream-audio-button__bars" aria-hidden="true">
+                <span class="bar" [style.transform]="'scaleY(' + barScales[0] + ')'"></span>
+                <span class="bar" [style.transform]="'scaleY(' + barScales[1] + ')'"></span>
+                <span class="bar" [style.transform]="'scaleY(' + barScales[2] + ')'"></span>
+                <span class="bar" [style.transform]="'scaleY(' + barScales[3] + ')'"></span>
+            </span>
+            <span class="stream-audio-button__label">{{ translationMap.get('CLOSE') }}</span>
+        </span>
+    </ng-container>
+</ng-container>

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

@@ -0,0 +1,79 @@
+:host {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
+
+.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));
+}
+
+/* ===========================
+ * BUTTON (pill content)
+ * =========================== */
+.stream-audio-button__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
+
+.stream-audio-button__icon svg {
+  width: 20px;
+  height: 20px;
+  display: block;
+}
+
+.stream-audio-button__expanded {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  width: 100%;
+  user-select: none;
+}
+
+.stream-audio-button__label {
+  font-size: 14px;
+  line-height: 1;
+  font-weight: 500;
+  letter-spacing: 0.2px;
+  white-space: nowrap;
+}
+
+.stream-audio-button__bars {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 3px;
+  width: 26px;
+  height: 18px;
+  transform-origin: center;
+  margin: 0;
+  line-height: 0;
+}
+
+.stream-audio-button__bars .bar {
+  width: 3px;
+  height: 100%;
+  border-radius: 2px;
+  background: rgba(255, 255, 255, 0.92);
+  transform-origin: center;
+}

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

@@ -0,0 +1,192 @@
+import { Component, Input, OnChanges, OnDestroy, OnInit, Optional, SimpleChanges } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { VoiceService } from 'src/app/providers/voice/voice.service';
+
+export type StreamAudioSpectrumMode = 'alert' | 'button';
+
+/**
+ * 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;
+
+  /** UI variant. `alert` = spectrum line (in #streamAudioAlert). `button` = icon / pill with bars + label. */
+  @Input() mode: StreamAudioSpectrumMode = 'alert';
+  /** For `mode="button"`: whether the stream is active (expanded pill). */
+  @Input() active = false;
+  /** For `mode="button"`: VAD speech flag; if omitted, we fall back to a volume threshold heuristic. */
+  @Input() isUserSpeaking?: boolean;
+  /** For `mode="button"`: label on the pill. */
+  @Input() translationMap: Map< string, string>;
+
+  // ALERT (spectrum line)
+  spectrumLinePath = 'M0,16 L100,16';
+
+  // BUTTON (bars)
+  barScales: [number, number, number, number] = [0.65, 0.65, 0.65, 0.65];
+  private rafId: number | null = null;
+  private lastSpeaking = false;
+  private voiceSpeechStartSub?: Subscription;
+  private voiceSpeechEndSub?: Subscription;
+  private internalIsUserSpeaking = false;
+
+  constructor(@Optional() private readonly voiceService: VoiceService | null) {}
+
+  ngOnInit(): void {
+    // Optional: use VAD speech events to improve idle/speaking detection.
+    if (this.voiceService) {
+      this.voiceSpeechStartSub = this.voiceService.speechStart$?.subscribe(() => {
+        this.internalIsUserSpeaking = true;
+      });
+      this.voiceSpeechEndSub = this.voiceService.speechEnd$?.subscribe(() => {
+        this.internalIsUserSpeaking = false;
+      });
+    }
+    this.refreshAll();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['volume'] || changes['mode'] || changes['active'] || changes['isUserSpeaking']) {
+      this.refreshAll();
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.stopRaf();
+    this.voiceSpeechStartSub?.unsubscribe();
+    this.voiceSpeechEndSub?.unsubscribe();
+  }
+
+  private refreshAll(): void {
+    if (this.mode === 'alert') {
+      this.refreshSpectrumPath();
+      this.stopRaf();
+      return;
+    }
+    this.refreshBars();
+  }
+
+  private refreshSpectrumPath(): 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('');
+  }
+
+  private refreshBars(): void {
+    if (!this.active) {
+      this.stopRaf();
+      return;
+    }
+
+    const speaking = this.computeSpeaking();
+    if (!speaking) {
+      this.stopRaf();
+      this.barScales = [0.65, 0.65, 0.65, 0.65];
+      this.lastSpeaking = false;
+      return;
+    }
+
+    // speaking: animate bars with volume-driven intensity
+    if (!this.lastSpeaking) {
+      this.lastSpeaking = true;
+    }
+    this.startRaf();
+  }
+
+  private computeSpeaking(): boolean {
+    if (typeof this.isUserSpeaking === 'boolean') {
+      return this.isUserSpeaking;
+    }
+    if (this.voiceService) {
+      return this.internalIsUserSpeaking;
+    }
+    // Fallback heuristic: treat as speaking when volume crosses a low threshold.
+    return (this.volume || 0) >= 4;
+  }
+
+  private startRaf(): void {
+    if (this.rafId !== null) {
+      return;
+    }
+    const tick = () => {
+      if (!this.active) {
+        this.stopRaf();
+        return;
+      }
+      const speaking = this.computeSpeaking();
+      if (!speaking) {
+        this.stopRaf();
+        this.barScales = [0.65, 0.65, 0.65, 0.65];
+        return;
+      }
+
+      const intensity = Math.min((this.volume || 0) / 80, 1);
+      const t = performance.now() / 220;
+      const targets: [number, number, number, number] = [0.35, 0.35, 0.35, 0.35];
+
+      for (let i = 0; i < 4; i++) {
+        const phase = i * 0.9;
+        const w1 = (Math.sin(t * 1.35 + phase) + 1) / 2;
+        const w2 = (Math.sin(t * 2.05 + phase * 1.7) + 1) / 2;
+        const mix = w1 * 0.62 + w2 * 0.38;
+        const s = 0.25 + intensity * (0.25 + 0.95 * mix);
+        targets[i as 0 | 1 | 2 | 3] = Math.max(0.35, Math.min(1.2, s));
+      }
+
+      // Smooth toward targets to avoid jitter on rapid volume changes.
+      const lerp = (a: number, b: number, k: number) => a + (b - a) * k;
+      this.barScales = [
+        lerp(this.barScales[0], targets[0], 0.35),
+        lerp(this.barScales[1], targets[1], 0.35),
+        lerp(this.barScales[2], targets[2], 0.35),
+        lerp(this.barScales[3], targets[3], 0.35),
+      ];
+
+      this.rafId = requestAnimationFrame(tick);
+    };
+    this.rafId = requestAnimationFrame(tick);
+  }
+
+  private stopRaf(): void {
+    if (this.rafId !== null) {
+      cancelAnimationFrame(this.rafId);
+      this.rafId = null;
+    }
+  }
+}

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

@@ -12,7 +12,7 @@ import { MIN_WIDTH_IMAGES } from 'src/app/utils/constants';
 import { ConversationModel } from 'src/chat21-core/models/conversation';
 import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
-import { commandToMessage, conversationToMessage, isEmojii, isFrame, isImage, isSameSender } from 'src/chat21-core/utils/utils-message';
+import { commandToMessage, conversationToMessage, isEmojii, isFrame, isImage, isMine, isSameSender, isSender } from 'src/chat21-core/utils/utils-message';
 
 
 @Component({
@@ -59,6 +59,9 @@ export class LastMessageComponent implements OnInit, AfterViewInit, OnDestroy {
   ngOnChanges(changes: SimpleChanges) {
     this.logger.debug('[LASTMESSAGE] onChanges', changes)
     if(this.conversation){
+      
+      /** if the message is sent by the logged user, do not add it to the messages array */
+      if(isSender(this.conversation.sender, this.g.senderId)) return;
 
       if(this.conversation.attributes && this.conversation.attributes.commands){
         this.addCommandMessage(this.conversation)

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

@@ -154,15 +154,10 @@ export class AudioComponent implements AfterViewInit {
     // });
 
     const response = await fetch(this.rawAudioUrl!);
-    this.logger.debug('getAudioDuration: response ---> ', response)
     const arrayBuffer = await response.arrayBuffer();
-    this.logger.debug('getAudioDuration: arrayBuffer ---> ', arrayBuffer)
     const audioContext = new (window.AudioContext || (window as any).webkitAudioContext)();
-    this.logger.debug('getAudioDuration: audioContext ---> ', audioContext)
     const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
-    this.logger.debug('getAudioDuration: audioBuffer ---> ', audioBuffer)
     this.audioDuration = audioBuffer.duration;
-    this.logger.debug('getAudioDuration: audioDuration ---> ', this.audioDuration)
 
   }
 

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

@@ -0,0 +1,18 @@
+<div class="lyrics-container">
+
+    <audio
+      #audioPlayer
+      (timeupdate)="onTimeUpdate()"
+      style="display:none">
+    </audio>
+  
+    <p class="lyrics message_innerhtml marked" #transcriptBox [style.color]="color">
+      <span
+        *ngFor="let w of words; let i = index; trackBy: trackByIndex"
+        class="word"
+        [ngClass]="w.state">
+        {{ w.text }}
+      </span>
+    </p>
+  
+</div>

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

@@ -0,0 +1,64 @@
+:host {
+  display: block;
+  font-size: var(--font-size-bubble-message, 14px);
+}
+
+/* Allineato a text.component.scss (.message_innerhtml, p) */
+.message_innerhtml {
+  margin: 0;
+
+  &.marked {
+    padding: 12px 16px;
+    margin-block-start: 0em !important;
+    margin-block-end: 0em !important;
+  }
+}
+
+.lyrics {
+  font-size: inherit;
+  margin: 0;
+  font-style: normal;
+  letter-spacing: normal;
+  font-stretch: normal;
+  font-variant: normal;
+  font-weight: 300;
+  overflow: hidden;
+
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  /* Colore bubble: da [style.color] / @Input() color — ereditato dalle .word */
+}
+
+/* base word */
+.word {
+  transition:
+    transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
+    color 0.3s ease,
+    opacity 0.3s ease,
+    filter 0.3s ease;
+
+  will-change: transform;
+}
+
+/* FUTURE */
+.word.future {
+  opacity: 0;
+  transform: scale(0.98);
+}
+
+/* PAST: stesso colore del testo bubble (@Input color sul <p>) */
+.word.past {
+  opacity: 1;
+  color: inherit;
+  transform: scale(1);
+}
+
+/* ACTIVE (solo momentaneo, tipo “karaoke flash”) */
+.word.active {
+  opacity: 1;
+  color: #00c3ff;
+  font-weight: 700;
+  transform: scale(1.18);
+  text-shadow: 0 0 10px rgba(0, 195, 255, 0.35);
+}

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AudioSyncComponent } from './audio-sync.component';
+
+describe('AudioSyncComponent', () => {
+  let component: AudioSyncComponent;
+  let fixture: ComponentFixture<AudioSyncComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AudioSyncComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AudioSyncComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});