@chat21/chat21-web-widget 5.1.32-rc8 → 5.1.33-rc11

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

@@ -1,23 +1,158 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
+import { CustomLogger } from 'src/chat21-core/providers/logger/customLogger';
+import { NGXLogger } from 'ngx-logger';
 
 import { AudioComponent } from './audio.component';
 
-describe('AudioTrackComponent', () => {
+describe('AudioComponent', () => {
   let component: AudioComponent;
   let fixture: ComponentFixture<AudioComponent>;
+  const ngxlogger = jasmine.createSpyObj('NGXLogger', ['log', 'trace', 'debug', 'warn', 'error', 'info']);
+  const customLogger = new CustomLogger(ngxlogger);
+  const arrayBuf = new ArrayBuffer(64);
+
+  const fakeBuffer = {
+    duration: 90,
+    getChannelData: () => new Float32Array(4000),
+  } as unknown as AudioBuffer;
 
   beforeEach(async () => {
+    LoggerInstance.setInstance(customLogger);
+    spyOn(window, 'fetch').and.returnValue(
+      Promise.resolve({
+        arrayBuffer: () => Promise.resolve(arrayBuf),
+      } as Response),
+    );
+    spyOn(AudioContext.prototype, 'decodeAudioData').and.returnValue(Promise.resolve(fakeBuffer));
+
     await TestBed.configureTestingModule({
-      declarations: [ AudioComponent ]
+      declarations: [AudioComponent],
     })
-    .compileComponents();
+      .overrideComponent(AudioComponent, {
+        set: {
+          template: `
+            <div class="audio-container">
+              <div class="audio-track"></div>
+              <div class="audio-player-custom">
+                <audio #audioElement></audio>
+                <canvas #canvasElement width="120" height="32"></canvas>
+              </div>
+            </div>`,
+        },
+      })
+      .compileComponents();
 
     fixture = TestBed.createComponent(AudioComponent);
     component = fixture.componentInstance;
-    fixture.detectChanges();
+    component.stylesMap = new Map<string, string>([
+      ['bubbleSentBackground', 'rgba(10, 20, 30, 1)'],
+      ['bubbleSentTextColor', '#112233'],
+    ]);
+    component.color = '#000000';
   });
 
-  it('should create', () => {
+  it('should create', async () => {
+    const blob = new Blob([new Uint8Array(arrayBuf.byteLength)], { type: 'audio/wav' });
+    component.audioBlob = blob;
+    fixture.detectChanges();
+    await fixture.whenStable();
+    fixture.detectChanges();
     expect(component).toBeTruthy();
   });
+
+  it('formatTime should pad seconds under 10', () => {
+    expect(component.formatTime(0)).toBe('0:00');
+    expect(component.formatTime(9)).toBe('0:09');
+    expect(component.formatTime(70)).toBe('1:10');
+  });
+
+  it('extractFirstColor should parse first rgba from gradient string', () => {
+    expect(component.extractFirstColor('linear-gradient(rgba(1, 2, 3, 0.5), red)')).toBe('rgba(1, 2, 3, 0.5)');
+    expect(component.extractFirstColor('no-color')).toBeNull();
+  });
+
+  it('drawWaveform should return early when canvas context missing', () => {
+    const canvas = document.createElement('canvas');
+    spyOn(canvas, 'getContext').and.returnValue(null);
+    (component as any).waveformCanvas = { nativeElement: canvas };
+    (component as any).audioBuffer = fakeBuffer;
+    (component as any).audioDuration = 10;
+    (component as any).audioElement = {
+      nativeElement: { currentTime: 0, paused: true },
+    };
+    expect(() => component.drawWaveform(fakeBuffer)).not.toThrow();
+  });
+
+  it('drawWaveform should render bars when context exists', () => {
+    const fillRect = jasmine.createSpy('fillRect');
+    const clearRect = jasmine.createSpy('clearRect');
+    const canvas = document.createElement('canvas');
+    canvas.width = 200;
+    canvas.height = 40;
+    spyOn(canvas, 'getContext').and.returnValue({ fillRect, clearRect } as any);
+    (component as any).waveformCanvas = { nativeElement: canvas };
+    (component as any).audioElement = {
+      nativeElement: { currentTime: 0, paused: true },
+    };
+    (component as any).audioDuration = 10;
+    component.drawWaveform(fakeBuffer);
+    expect(clearRect).toHaveBeenCalled();
+    expect(fillRect).toHaveBeenCalled();
+  });
+
+  it('ngAfterViewInit with blob should wire object URL and CSS vars', async () => {
+    const blob = new Blob([new Uint8Array(128)], { type: 'audio/wav' });
+    component.audioBlob = blob;
+    spyOn(URL, 'createObjectURL').and.returnValue('blob:mock-audio');
+    fixture.detectChanges();
+    await fixture.whenStable();
+    fixture.detectChanges();
+    expect(component.rawAudioUrl).toBe('blob:mock-audio');
+    expect(URL.createObjectURL).toHaveBeenCalledWith(blob);
+  });
+
+  it('ngAfterViewInit with metadata.src should fetch and decode', async () => {
+    component.audioBlob = null;
+    component.metadata = { src: 'blob:from-meta' };
+    fixture.detectChanges();
+    await fixture.whenStable();
+    fixture.detectChanges();
+    expect(window.fetch).toHaveBeenCalled();
+    expect(component.audioDuration).toBe(90);
+  });
+
+  it('playPauseAudio should toggle play state when buffer ready', () => {
+    spyOn(window, 'requestAnimationFrame').and.stub();
+    (component as any).audioBuffer = fakeBuffer;
+    (component as any).audioDuration = 10;
+    const play = jasmine.createSpy('play').and.returnValue(Promise.resolve());
+    const pause = jasmine.createSpy('pause');
+    const canvas = document.createElement('canvas');
+    canvas.width = 120;
+    canvas.height = 32;
+    spyOn(canvas, 'getContext').and.returnValue({
+      fillRect: jasmine.createSpy(),
+      clearRect: jasmine.createSpy(),
+    } as any);
+    (component as any).waveformCanvas = { nativeElement: canvas };
+    (component as any).audioElement = {
+      nativeElement: { paused: true, currentTime: 0, play, pause, ontimeupdate: null as any, onended: null as any },
+    };
+    (component as any).audioContext = { resume: jasmine.createSpy().and.returnValue(Promise.resolve()) };
+
+    component.playPauseAudio();
+    expect(play).toHaveBeenCalled();
+    expect(component.isPlaying).toBe(true);
+
+    (component as any).audioElement.nativeElement.paused = false;
+    component.playPauseAudio();
+    expect(pause).toHaveBeenCalled();
+  });
+
+  it('getAudioDuration should set audioDuration from decoded buffer', async () => {
+    component.metadata = { src: 'blob:x' };
+    await component.getAudioDuration();
+    expect(component.audioDuration).toBe(90);
+  });
 });

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

@@ -18,6 +18,7 @@ export class AudioComponent implements AfterViewInit {
   @Input() metadata: any | null = null;
   @Input() color: string;
   @Input() stylesMap: Map<string, string>;
+  @Input() translationMap: Map<string, string>;
 
   audioUrl: SafeUrl | null = null;
   rawAudioUrl: string | null = null;

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

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

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

@@ -1,14 +1,39 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { CommonModule } from '@angular/common';
 
 import { AudioSyncComponent } from './audio-sync.component';
+import { TtsAudioPlaybackCoordinator } from 'src/app/providers/tts-audio-playback-coordinator.service';
+import { VoiceService } from 'src/app/providers/voice/voice.service';
+import { Globals } from 'src/app/utils/globals';
 
 describe('AudioSyncComponent', () => {
   let component: AudioSyncComponent;
   let fixture: ComponentFixture<AudioSyncComponent>;
+  let voiceService: { proxyTtsStreamUrl: string | null; proxyTtsUrl: string | null };
 
   beforeEach(async () => {
+    voiceService = {
+      proxyTtsStreamUrl: 'https://speech.example.com/api/tts/stream',
+      proxyTtsUrl: 'https://speech.example.com/api/tts',
+    };
+
     await TestBed.configureTestingModule({
-      imports: [AudioSyncComponent]
+      declarations: [AudioSyncComponent],
+      imports: [CommonModule],
+      providers: [
+        {
+          provide: TtsAudioPlaybackCoordinator,
+          useValue: {
+            requestStart: (_ownerId: string, start: () => void) => start(),
+            releaseIfCurrent: jasmine.createSpy('releaseIfCurrent'),
+            release: jasmine.createSpy('release'),
+            stopAllPlayback$: { subscribe: () => ({ unsubscribe: () => undefined }) },
+            preemptPlayback$: { subscribe: () => ({ unsubscribe: () => undefined }) },
+          },
+        },
+        { provide: Globals, useValue: { tiledeskToken: 'JWT test-token', jwt: '' } },
+        { provide: VoiceService, useValue: voiceService },
+      ],
     })
     .compileComponents();
 
@@ -20,4 +45,59 @@ describe('AudioSyncComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('starts TTS playback from the proxy streaming endpoint first', () => {
+    component.message = {
+      uid: 'm1',
+      type: 'tts',
+      text: 'hello',
+      metadata: {},
+      isJustRecived: true,
+    } as any;
+    const audio = document.createElement('audio');
+    const startStreaming = spyOn(component as any, 'startStreamingFromEndpoint').and.stub();
+
+    (component as any).startPlayback(audio);
+
+    expect(startStreaming).toHaveBeenCalledWith(
+      audio,
+      'https://speech.example.com/api/tts/stream',
+      'https://speech.example.com/api/tts',
+      undefined,
+    );
+  });
+
+  it('requests browser-compatible MP3 for proxy REST TTS by default', () => {
+    component.message = {
+      uid: 'm1',
+      type: 'tts',
+      text: 'hello',
+      metadata: {},
+    } as any;
+
+    const body = (component as any).buildTtsRequestBody({});
+
+    expect(body).toEqual({
+      text: 'hello',
+      streaming: true,
+      outputFormat: 'mp3_44100_128',
+    });
+  });
+
+  it('does not override an explicit TTS outputFormat from message voice settings', () => {
+    component.message = {
+      uid: 'm1',
+      type: 'tts',
+      text: 'hello',
+      metadata: {},
+    } as any;
+
+    const body = (component as any).buildTtsRequestBody({ outputFormat: 'pcm_16000' });
+
+    expect(body).toEqual({
+      text: 'hello',
+      streaming: true,
+      outputFormat: 'pcm_16000',
+    });
+  });
 });

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

@@ -9,12 +9,15 @@ 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 { VoiceService } from 'src/app/providers/voice/voice.service';
 import { Globals } from 'src/app/utils/globals';
 
 /** HAVE_METADATA: metadati già disponibili (tipico audio servito da cache). */
 const HAVE_METADATA = 1;
+const BROWSER_TTS_OUTPUT_FORMAT = 'mp3_44100_128';
 
 @Component({
   selector: 'chat-audio-sync',
@@ -50,11 +53,14 @@ export class AudioSyncComponent implements AfterViewInit, OnChanges, OnDestroy {
   private playbackStarted = false;
   private streamAbort?: AbortController;
   private mediaSourceObjectUrl?: string;
+  private stopAllSub?: Subscription;
+  private preemptSub?: 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`. */
@@ -153,12 +159,59 @@ export class AudioSyncComponent implements AfterViewInit, OnChanges, OnDestroy {
         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();
+    });
+
+    // Preempt signal: a newer message requested start while this one was playing.
+    // Only react when the emitted id matches this component's own ownerId.
+    this.preemptSub = this.ttsPlayback.preemptPlayback$.subscribe((stoppedId) => {
+      if (stoppedId !== this.playbackOwnerId) {
+        return;
+      }
+      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();
+      // No releaseIfCurrent call — the coordinator already cleared currentOwnerId before emitting.
+    });
   }
 
   ngOnDestroy(): void {
     this.destroyed = true;
     this.playbackStarted = false;
     this.cleanupStreaming();
+    this.stopAllSub?.unsubscribe();
+    this.stopAllSub = undefined;
+    this.preemptSub?.unsubscribe();
+    this.preemptSub = undefined;
 
     const audio = this.audioRef?.nativeElement;
     if (audio) {
@@ -183,8 +236,28 @@ 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) {
+    const messageSrc = (this.message as any)?.metadata?.src as string | undefined;
+
+    if (this.message?.type === 'tts') {
+      const streamEndpoint = this.voiceService.proxyTtsStreamUrl;
+      const fullFileEndpoint = this.voiceService.proxyTtsUrl;
+      if (streamEndpoint) {
+        this.startStreamingFromEndpoint(audio, streamEndpoint, fullFileEndpoint, messageSrc);
+        return;
+      }
+      if (fullFileEndpoint) {
+        this.fetchFullFileFromEndpoint(audio, fullFileEndpoint);
+        return;
+      }
+      if (messageSrc) {
+        this.playDirectUrl(audio, messageSrc);
+        return;
+      }
+      this.handlePlaybackError();
+      return;
+    }
+
+    if (!messageSrc) {
       this.playbackStarted = false;
       this.ttsPlayback.releaseIfCurrent(this.playbackOwnerId);
       this.markAllWordsPast();
@@ -195,11 +268,10 @@ export class AudioSyncComponent implements AfterViewInit, OnChanges, OnDestroy {
       return;
     }
 
-    if (this.message?.type === 'tts') {
-      this.startStreamingFromEndpoint(audio, src);
-      return;
-    }
+    this.playDirectUrl(audio, messageSrc);
+  }
 
+  private playDirectUrl(audio: HTMLAudioElement, src: string): void {
     audio.src = src;
     try {
       audio.currentTime = 0;
@@ -209,16 +281,40 @@ export class AudioSyncComponent implements AfterViewInit, OnChanges, OnDestroy {
     audio.play().catch(() => this.handlePlaybackError());
   }
 
-  private startStreamingFromEndpoint(audio: HTMLAudioElement, endpoint: string): void {
+  private startStreamingFromEndpoint(
+    audio: HTMLAudioElement,
+    endpoint: string,
+    fullFileEndpoint?: string | null,
+    directFallbackSrc?: string,
+  ): void {
     this.cleanupStreaming();
 
     const jwt = this.getJwtToken();
     const voiceSettings = this.getVoiceSettingsBody(); 
     const requestBody = this.buildTtsRequestBody(voiceSettings);
+    let fallbackUsed = false;
+    const fallback = () => {
+      if (fallbackUsed) {
+        this.handlePlaybackError();
+        return;
+      }
+      fallbackUsed = true;
+      this.cleanupStreaming();
+      if (fullFileEndpoint) {
+        this.fetchFullFileFromEndpoint(audio, fullFileEndpoint);
+        return;
+      }
+      if (directFallbackSrc) {
+        this.playDirectUrl(audio, directFallbackSrc);
+        return;
+      }
+      this.handlePlaybackError();
+    };
+
     // <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);
+      fallback();
       return;
     }
 
@@ -250,14 +346,15 @@ export class AudioSyncComponent implements AfterViewInit, OnChanges, OnDestroy {
         }
 
         const headerType = (response.headers.get('content-type') || '').split(';')[0].trim();
-        const mime = (headerType && MediaSourceCtor.isTypeSupported(headerType))
-          ? headerType
-          : 'audio/mpeg';
+        if (headerType && !MediaSourceCtor.isTypeSupported(headerType)) {
+          // Fallback: fetch completo e play via blob (no streaming).
+          fallback();
+          return;
+        }
 
+        const mime = headerType || 'audio/mpeg';
         if (!MediaSourceCtor.isTypeSupported(mime)) {
-          this.cleanupStreaming();
-          // Fallback: fetch completo e play via blob (no streaming).
-          this.fetchAsBlobAndPlay(audio, endpoint, jwt, requestBody);
+          fallback();
           return;
         }
 
@@ -298,15 +395,14 @@ export class AudioSyncComponent implements AfterViewInit, OnChanges, OnDestroy {
             ) as ArrayBuffer;
             sourceBuffer.appendBuffer(ab);
           } catch {
-            this.cleanupStreaming();
-            this.fetchAsBlobAndPlay(audio, endpoint, jwt, requestBody);
+            fallback();
           }
         };
 
         sourceBuffer.addEventListener('updateend', () => {
           if (!started && this.playbackStarted && !this.destroyed) {
             started = true;
-            audio.play().catch(() => this.handlePlaybackError());
+            audio.play().catch(() => fallback());
           }
           pump();
         });
@@ -330,7 +426,7 @@ export class AudioSyncComponent implements AfterViewInit, OnChanges, OnDestroy {
         tryEndOfStream();
       } catch {
         if (!abort.signal.aborted) {
-          this.handlePlaybackError();
+          fallback();
         }
       }
     };
@@ -402,9 +498,6 @@ export class AudioSyncComponent implements AfterViewInit, OnChanges, OnDestroy {
         'Authorization': `${jwt}`
       };
 
-      console.log('headers', headers);
-      console.log('requestBody', requestBody);
-
       const response = await fetch(endpoint, {
         method: 'POST',
         headers,
@@ -430,16 +523,33 @@ export class AudioSyncComponent implements AfterViewInit, OnChanges, OnDestroy {
     }
   }
 
-  private buildTtsRequestBody(voiceSettings: unknown): unknown {
+  private fetchFullFileFromEndpoint(audio: HTMLAudioElement, endpoint: string): void {
+    const jwt = this.getJwtToken();
+    const voiceSettings = this.getVoiceSettingsBody();
+    const requestBody = this.buildTtsRequestBody(voiceSettings, false);
+    void this.fetchAsBlobAndPlay(audio, endpoint, jwt, requestBody);
+  }
+
+  private buildTtsRequestBody(voiceSettings: unknown, streaming = true): unknown {
     const text = this.message?.text ?? '';
     if (
       voiceSettings &&
       typeof voiceSettings === 'object' &&
       !Array.isArray(voiceSettings)
     ) {
-      return { ...(voiceSettings as Record<string, unknown>), text, streaming: true };
+      return {
+        outputFormat: BROWSER_TTS_OUTPUT_FORMAT,
+        ...(voiceSettings as Record<string, unknown>),
+        text,
+        streaming,
+      };
     }
-    return { voiceSettings, text, streaming: true };
+    return {
+      voiceSettings,
+      text,
+      streaming,
+      outputFormat: BROWSER_TTS_OUTPUT_FORMAT,
+    };
   }
 
   private markAllWordsPast(): void {

package/src/app/component/message/avatar/avatar.component.html

@@ -1,9 +1,9 @@
 <div class="c21-icon-avatar">
   <div class="c21-avatar-image profile_image">
       <!-- is a BOT -->
-      <img *ngIf="senderID?.indexOf('bot_') !== -1 || senderFullname.toLowerCase().includes('bot')" [src]="url" (error)="onBotImgError($event)" (load)="onLoadedBot($event)"/>
+      <img *ngIf="senderID?.indexOf('bot_') !== -1 || senderFullname.toLowerCase().includes('bot')" [src]="url" [attr.alt]="senderFullname || 'Bot'" role="img" (error)="onBotImgError($event)" (load)="onLoadedBot($event)"/>
       <!-- is a HUMAN -->
-      <img *ngIf="senderID?.indexOf('bot_') === -1 && !senderFullname.toLowerCase().includes('bot')" [src]="url" (error)="onHumanImgError($event)" (load)="onLoadedHuman($event)"/>
+      <img *ngIf="senderID?.indexOf('bot_') === -1 && !senderFullname.toLowerCase().includes('bot')" [src]="url" [attr.alt]="senderFullname || 'User'" role="img" (error)="onHumanImgError($event)" (load)="onLoadedHuman($event)"/>
   </div> 
 </div>