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

package/src/app/component/menu-options/menu-options.component.html

@@ -1,55 +1,45 @@
 <div id='c21-menu-options'>
-  <button type="button"
-      class="button-menu-options c21-button-clean"
-      [attr.aria-label]="g.OPTIONS"
-      [attr.aria-expanded]="g.isOpenMenuOptions ? 'true' : 'false'"
-      aria-haspopup="true"
-      (click)="f21_toggle_options()"
-      (mouseover)="isHover=true"
-      (mouseleave)="isHover=false">
-    <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" width="24px" viewBox="0 0 24 24" [ngStyle]="{'display': (isHover || g.isOpenMenuOptions)? 'block': 'none'}">
+  <div class="button-menu-options" (click)="f21_toggle_options()"  (mouseover)="isHover=true" (mouseleave)="isHover=false">
+    <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" width="24px" viewBox="0 0 24 24" [ngStyle]="{'display': (isHover || g.isOpenMenuOptions)? 'block': 'none'}">
       <g>
         <path d="M0,0h24v24H0V0z" fill="none"/>
         <path d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z"/>
       </g>
     </svg>
-  </button>
-  <div *ngIf="g.isOpenMenuOptions"
-      class="modal-menu-options"
-      role="group"
-      [attr.aria-label]="g.OPTIONS"
-      (keydown.escape)="$event.preventDefault(); $event.stopPropagation(); f21_toggle_options()">
+    <!-- <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Livello_1" x="0px" y="0px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" [ngStyle]="{'display': (isHover)? 'block': 'none'}" xml:space="preserve">
+      <circle class="st1" cx="6" cy="12" r="2" [ngStyle]="{'fill': g.themeColor, 'opacity': 1}"/>
+      <circle class="st2" cx="18" cy="12" r="2"[ngStyle]="{'fill': g.themeColor, 'opacity': 0.6}"/>
+      <circle class="st3" cx="12" cy="12" r="2"[ngStyle]="{'fill': g.themeColor, 'opacity': 0.4}"/>
+    </svg> -->
+  </div>
+  <div *ngIf="g.isOpenMenuOptions" class="modal-menu-options">
     <div class="">
-
-      <button type="button"
-        class="c21-button c21-button-clean"
-        [attr.aria-pressed]="g.soundEnabled ? 'true' : 'false'"
-        [attr.aria-label]="g.soundEnabled ? g.SOUND_ON : g.SOUND_OFF"
-        (click)="toggleSound()">
-        <svg *ngIf="!g.soundEnabled" aria-hidden="true" focusable="false" class="icon-menu" xmlns="http://www.w3.org/2000/svg"
+  
+      <div class="c21-button" (click)="toggleSound()">
+        <svg *ngIf="!g.soundEnabled" aria-labelledby="altIconTitle" class="icon-menu" xmlns="http://www.w3.org/2000/svg"
             width="20" height="20" viewBox="0 0 24 24">
             <path fill="none" d="M0 0h24v24H0V0z" />
             <path d="M4.34 2.93L2.93 4.34 7.29 8.7 7 9H3v6h4l5 5v-6.59l4.18 4.18c-.65.49-1.38.88-2.18 1.11v2.06c1.34-.3 2.57-.92 3.61-1.75l2.05 2.05 1.41-1.41L4.34 2.93zM10 15.17L7.83 13H5v-2h2.83l.88-.88L10 11.41v3.76zM19 12c0 .82-.15 1.61-.41 2.34l1.53 1.53c.56-1.17.88-2.48.88-3.87 0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zm-7-8l-1.88 1.88L12 7.76zm4.5 8c0-1.77-1.02-3.29-2.5-4.03v1.79l2.48 2.48c.01-.08.02-.16.02-.24z" />
+            <title id="altIconTitle">{{g.SOUND_OFF}}</title>
         </svg>
-        <svg *ngIf="g.soundEnabled" aria-hidden="true" focusable="false" class="icon-menu" xmlns="http://www.w3.org/2000/svg"
+        <svg *ngIf="g.soundEnabled" aria-labelledby="altIconTitle" class="icon-menu" xmlns="http://www.w3.org/2000/svg"
             width="20" height="20" viewBox="0 0 24 24">
             <path fill="none" d="M0 0h24v24H0V0z" />
             <path d="M3 9v6h4l5 5V4L7 9H3zm7-.17v6.34L7.83 13H5v-2h2.83L10 8.83zM16.5 12c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77 0-4.28-2.99-7.86-7-8.77z" />
+            <title id="altIconTitle">{{g.SOUND_ON}}</title>
         </svg>
         <span *ngIf="!g.soundEnabled" class="label-menu-item"> {{g.SOUND_OFF}}</span>
         <span *ngIf="g.soundEnabled" class="label-menu-item"> {{g.SOUND_ON}}</span>
 
-      </button>
-      <button type="button"
-        class="c21-button c21-button-clean" *ngIf="g.isLogged && g.showLogoutOption"
-        [attr.aria-label]="g.LOGOUT"
-        (click)="signOut()">
-        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" aria-hidden="true" focusable="false" class="icon-menu">
+      </div>
+      <div class="c21-button" *ngIf="g.isLogged && g.showLogoutOption" (click)="signOut()">
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" aria-labelledby="altIconTitle" class="icon-menu">
           <path fill="none" d="M0 0h24v24H0V0z"/>
           <path d="M10.09 15.59L11.5 17l5-5-5-5-1.41 1.41L12.67 11H3v2h9.67l-2.58 2.59zM19 3H5c-1.11 0-2 .9-2 2v4h2V5h14v14H5v-4H3v4c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/>
+          <title id="altIconTitle">{{g.LOGOUT}}</title>
         </svg>
         <span *ngIf="g.isLogged && g.showLogoutOption" class="label-menu-item"> {{g.LOGOUT}}</span>
-      </button>
+      </div>
       <div class="c21-button build_version_menu">
         <span class="label-menu-item"> {{g.BUILD_VERSION}}</span>
       </div>

package/src/app/component/menu-options/menu-options.component.spec.ts

@@ -1,143 +1,27 @@
-import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { convertColorToRGBA } from 'src/chat21-core/utils/utils';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { Globals } from '../../utils/globals';
+
 import { MenuOptionsComponent } from './menu-options.component';
 
 describe('MenuOptionsComponent', () => {
-  let fixture: ComponentFixture<MenuOptionsComponent>;
   let component: MenuOptionsComponent;
-  let globals: Globals;
+  let fixture: ComponentFixture<MenuOptionsComponent>;
 
-  beforeEach(waitForAsync(() => {
+  beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [MenuOptionsComponent],
-      providers: [Globals],
-      schemas: [NO_ERRORS_SCHEMA],
-    }).compileComponents();
+      declarations: [ MenuOptionsComponent ],
+      providers: [ Globals ]
+    })
+    .compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(MenuOptionsComponent);
     component = fixture.componentInstance;
-    globals = TestBed.inject(Globals);
-    globals.initDefafultParameters();
-    globals.OPTIONS = 'Opzioni';
-    globals.SOUND_ON = 'Suono on';
-    globals.SOUND_OFF = 'Suono off';
-    globals.LOGOUT = 'Esci';
-    globals.BUILD_VERSION = 'v9.9.9-test';
-    globals.themeColor = '#2a6ac1';
-    globals.soundEnabled = true;
-    globals.isOpenMenuOptions = false;
-    globals.isLogged = false;
-    globals.showLogoutOption = true;
+    fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
-
-  it('ngOnInit calcola themeColor50 da themeColor', () => {
-    fixture.detectChanges();
-    expect(component.themeColor50).toBe(convertColorToRGBA(globals.themeColor, 50));
-  });
-
-  it('f21_toggle_options apre e chiude il menu', () => {
-    fixture.detectChanges();
-    const toggle = fixture.debugElement.query(By.css('.button-menu-options'));
-    toggle.triggerEventHandler('click', null);
-    expect(globals.isOpenMenuOptions).toBe(true);
-    fixture.detectChanges();
-    expect(fixture.debugElement.query(By.css('.modal-menu-options'))).toBeTruthy();
-    component.f21_toggle_options();
-    expect(globals.isOpenMenuOptions).toBe(false);
-  });
-
-  it('toggleSound inverte soundEnabled e chiude il menu', () => {
-    globals.soundEnabled = false;
-    globals.isOpenMenuOptions = true;
-    fixture.detectChanges();
-    component.toggleSound();
-    expect(globals.soundEnabled).toBe(true);
-    expect(globals.isOpenMenuOptions).toBe(false);
-  });
-
-  it('signOut emette onSignOut e chiude il menu', () => {
-    spyOn(component.onSignOut, 'emit');
-    globals.isOpenMenuOptions = true;
-    component.signOut();
-    expect(globals.isOpenMenuOptions).toBe(false);
-    expect(component.onSignOut.emit).toHaveBeenCalled();
-  });
-
-  it('menu aperto: etichette suono e versione visibili', () => {
-    globals.isOpenMenuOptions = true;
-    globals.soundEnabled = true;
-    fixture.detectChanges();
-    const root = fixture.nativeElement as HTMLElement;
-    expect(root.textContent).toContain('Suono on');
-    expect(root.textContent).toContain('v9.9.9-test');
-  });
-
-  it('logout visibile solo con isLogged e showLogoutOption', () => {
-    globals.isOpenMenuOptions = true;
-    globals.isLogged = false;
-    globals.showLogoutOption = true;
-    fixture.detectChanges();
-    let logoutBtn = fixture.debugElement.queryAll(By.css('.modal-menu-options button')).find((d) =>
-      (d.nativeElement as HTMLElement).getAttribute('aria-label')?.includes('Esci'),
-    );
-    expect(logoutBtn).toBeFalsy();
-
-    globals.isLogged = true;
-    fixture.detectChanges();
-    logoutBtn = fixture.debugElement.queryAll(By.css('.modal-menu-options button')).find((d) =>
-      (d.nativeElement as HTMLElement).getAttribute('aria-label') === 'Esci',
-    );
-    expect(logoutBtn).toBeTruthy();
-  });
-
-  it('isHover espone l’icona ingranaggio (mouseover / mouseleave)', () => {
-    fixture.detectChanges();
-    const toggle = fixture.debugElement.query(By.css('.button-menu-options'));
-    expect(component.isHover).toBe(false);
-    toggle.triggerEventHandler('mouseover', null);
-    expect(component.isHover).toBe(true);
-    toggle.triggerEventHandler('mouseleave', null);
-    expect(component.isHover).toBe(false);
-  });
-
-  it('aria-expanded del toggle riflette isOpenMenuOptions', () => {
-    globals.isOpenMenuOptions = true;
-    fixture.detectChanges();
-    const btn = fixture.debugElement.query(By.css('.button-menu-options')).nativeElement as HTMLButtonElement;
-    expect(btn.getAttribute('aria-expanded')).toBe('true');
-  });
-
-  it('keydown escape sul pannello opzioni chiude il menu', () => {
-    globals.isOpenMenuOptions = true;
-    fixture.detectChanges();
-    const modal = fixture.debugElement.query(By.css('.modal-menu-options'));
-    const ev = new KeyboardEvent('keydown', { key: 'Escape' });
-    spyOn(ev, 'preventDefault');
-    spyOn(ev, 'stopPropagation');
-    modal.triggerEventHandler('keydown.escape', ev);
-    expect(globals.isOpenMenuOptions).toBe(false);
-  });
-
-  it('pulsante suono espone aria-pressed e aria-label in base a soundEnabled', () => {
-    globals.isOpenMenuOptions = true;
-    globals.soundEnabled = false;
-    fixture.detectChanges();
-    const soundBtn = fixture.debugElement.query(By.css('button[aria-label="Suono off"]'))
-      .nativeElement as HTMLButtonElement;
-    expect(soundBtn.getAttribute('aria-pressed')).toBe('false');
-    globals.soundEnabled = true;
-    fixture.detectChanges();
-    const soundOn = fixture.debugElement.query(By.css('button[aria-label="Suono on"]'))
-      .nativeElement as HTMLButtonElement;
-    expect(soundOn.getAttribute('aria-pressed')).toBe('true');
-  });
 });

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

@@ -1,21 +1,23 @@
-<div class="audio-container">
 
+<!-- <audio *ngIf="metadata" controls>
+    <source [src]="metadata.src" type="audio/mpeg">
+</audio>  *ngIf="!metadata"-->
+<div class="audio-container">
+  
     <div class="audio-track">
-        <button type="button"
-            class="play-pause"
-            [attr.aria-label]="isPlaying
-                ? (translationMap?.get('BUTTON_PAUSE_AUDIO') || 'Pause audio')
-                : (translationMap?.get('BUTTON_PLAY_AUDIO') || 'Play audio')"
-            [attr.aria-pressed]="isPlaying ? 'true' : 'false'"
-            (click)="playPauseAudio()">
-            <svg *ngIf="!isPlaying" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" aria-hidden="true" focusable="false">
+        <button *ngIf="!isPlaying" class="play-pause" (click)="playPauseAudio()">
+            <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px">
                 <path d="M320-200v-560l440 280-440 280Z"/>
             </svg>
-            <svg *ngIf="isPlaying" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" aria-hidden="true" focusable="false">
+            <!-- <i class="material-icons">play_arrow</i> -->
+        </button>
+        <button *ngIf="isPlaying" class="play-pause" (click)="playPauseAudio()">
+            <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" >
                 <path d="M560-200v-560h160v560H560Zm-320 0v-560h160v560H240Z"/>
             </svg>
+            <!-- <i class="material-icons">pause</i> -->
         </button>
-        <div class="duration" [style.color]="color" aria-live="off">
+        <div class="duration" [style.color]="color">
             <span *ngIf="!isPlaying">{{ audioDuration ? formatTime(audioDuration) : '00:00' }}</span>
             <span *ngIf="isPlaying">{{ formatTime(currentTime) }}</span>
         </div>
@@ -24,7 +26,7 @@
 
     <div class="audio-player-custom">
         <audio #audioElement [src]="audioUrl"></audio>
-        <canvas #canvasElement class="waveformCanvas" aria-hidden="true"></canvas>
+        <canvas #canvasElement class="waveformCanvas"></canvas> 
     </div>
 
-</div>
+</div>

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

@@ -1,158 +1,23 @@
 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('AudioComponent', () => {
+describe('AudioTrackComponent', () => {
   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 ]
     })
-      .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();
+    .compileComponents();
 
     fixture = TestBed.createComponent(AudioComponent);
     component = fixture.componentInstance;
-    component.stylesMap = new Map<string, string>([
-      ['bubbleSentBackground', 'rgba(10, 20, 30, 1)'],
-      ['bubbleSentTextColor', '#112233'],
-    ]);
-    component.color = '#000000';
-  });
-
-  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);
+  it('should create', () => {
+    expect(component).toBeTruthy();
   });
 });

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

@@ -18,7 +18,6 @@ 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;
@@ -155,10 +154,15 @@ 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/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" [attr.alt]="senderFullname || 'Bot'" role="img" (error)="onBotImgError($event)" (load)="onLoadedBot($event)"/>
+      <img *ngIf="senderID?.indexOf('bot_') !== -1 || senderFullname.toLowerCase().includes('bot')" [src]="url" (error)="onBotImgError($event)" (load)="onLoadedBot($event)"/>
       <!-- is a HUMAN -->
-      <img *ngIf="senderID?.indexOf('bot_') === -1 && !senderFullname.toLowerCase().includes('bot')" [src]="url" [attr.alt]="senderFullname || 'User'" role="img" (error)="onHumanImgError($event)" (load)="onLoadedHuman($event)"/>
+      <img *ngIf="senderID?.indexOf('bot_') === -1 && !senderFullname.toLowerCase().includes('bot')" [src]="url" (error)="onHumanImgError($event)" (load)="onLoadedHuman($event)"/>
   </div> 
 </div>
 

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

@@ -1,119 +1,27 @@
-import { Injectable } from '@angular/core';
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { ImageRepoService } from '../../../../chat21-core/providers/abstract/image-repo.service';
 
 import { AvatarComponent } from './avatar.component';
 
-@Injectable()
-class ImageRepoStub extends ImageRepoService {
-  getImagePhotoUrl(uid: string): string {
-    return `https://cdn.test/photo/${uid}`;
-  }
-  checkImageExists(_uid: string, _cb: (exist: boolean) => void): void {}
-}
-
 describe('AvatarComponent', () => {
   let component: AvatarComponent;
   let fixture: ComponentFixture<AvatarComponent>;
 
-  beforeEach(waitForAsync(() => {
+  beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [AvatarComponent],
-      providers: [{ provide: ImageRepoService, useClass: ImageRepoStub }],
-    }).compileComponents();
+      declarations: [ AvatarComponent ],
+      providers: [ ImageRepoService ]
+    })
+    .compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(AvatarComponent);
     component = fixture.componentInstance;
-    component.baseLocation = 'https://app.test';
+    fixture.detectChanges();
   });
 
   it('should create', () => {
-    component.senderID = 'user_1';
-    component.senderFullname = 'Alice';
-    fixture.detectChanges();
     expect(component).toBeTruthy();
   });
-
-  it('ngOnInit should prefer remote photo when checkImageExists returns true', () => {
-    const remote = 'https://cdn.test/photo/bot_1';
-    spyOn(AvatarComponent.prototype as any, 'checkImageExists').and.callFake((_url: string, cb: (b: boolean) => void) => {
-      cb(true);
-    });
-    component.senderID = 'bot_1';
-    component.senderFullname = 'Support Bot';
-    component.ngOnInit();
-    expect(component.url).toBe(remote);
-  });
-
-  it('ngOnInit should keep default bot asset when remote image missing', () => {
-    spyOn(AvatarComponent.prototype as any, 'checkImageExists').and.callFake((_url: string, cb: (b: boolean) => void) => {
-      cb(false);
-    });
-    component.senderID = 'bot_1';
-    component.senderFullname = 'Bot';
-    component.ngOnInit();
-    expect(component.url).toBe(component.baseLocation + '/assets/images/tommy_bot_tiledesk.svg');
-  });
-
-  it('ngOnInit should use human default when not bot and photo missing', () => {
-    spyOn(AvatarComponent.prototype as any, 'checkImageExists').and.callFake((_url: string, cb: (b: boolean) => void) => {
-      cb(false);
-    });
-    component.senderID = 'user_99';
-    component.senderFullname = 'Bob';
-    component.ngOnInit();
-    expect(component.url).toBe(component.baseLocation + '/assets/images/chat_human_avatar.svg');
-  });
-
-  it('checkImageExists should invoke callback on image load', (done) => {
-    const imgCtor = window.Image;
-    (window as any).Image = function MockImage(this: any) {
-      setTimeout(() => this.onload && this.onload(), 0);
-      return this;
-    } as any;
-    component.checkImageExists('https://x', (ok) => {
-      (window as any).Image = imgCtor;
-      expect(ok).toBe(true);
-      done();
-    });
-  });
-
-  it('checkImageExists should invoke callback false on error', (done) => {
-    const imgCtor = window.Image;
-    (window as any).Image = function MockImage(this: any) {
-      setTimeout(() => this.onerror && this.onerror(), 0);
-      return this;
-    } as any;
-    component.checkImageExists('https://bad', (ok) => {
-      (window as any).Image = imgCtor;
-      expect(ok).toBe(false);
-      done();
-    });
-  });
-
-  it('onBotImgError should swap to local bot svg', () => {
-    const target = { src: 'bad' } as any;
-    component.baseLocation = 'https://host';
-    component.onBotImgError({ target });
-    expect(target.src).toContain('tommy_bot_tiledesk.svg');
-  });
-
-  it('onHumanImgError should swap to local human svg', () => {
-    const target = { src: 'bad' } as any;
-    component.baseLocation = 'https://host';
-    component.onHumanImgError({ target });
-    expect(target.src).toContain('chat_human_avatar.svg');
-  });
-
-  it('template should expose accessible name on avatar image (bot)', () => {
-    spyOn(AvatarComponent.prototype as any, 'checkImageExists').and.stub();
-    component.senderID = 'bot_x';
-    component.senderFullname = 'Helper Bot';
-    fixture.detectChanges();
-    const img = (fixture.nativeElement as HTMLElement).querySelector('img');
-    expect(img?.getAttribute('alt')).toBeTruthy();
-    expect(img?.getAttribute('role')).toBe('img');
-  });
 });