@chat21/chat21-web-widget 5.1.33 → 5.1.34-rc1

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;
@@ -154,15 +155,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,65 @@
+: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;
+  // line-height: 1.4em;
+  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,103 @@
+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({
+      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();
+
+    fixture = TestBed.createComponent(AudioSyncComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  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',
+    });
+  });
+});