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

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

@@ -12,11 +12,12 @@ import {
 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';
 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 +51,10 @@ export class AudioSyncComponent implements AfterViewInit, OnChanges, OnDestroy {
   private destroyed = false;
   private playbackRequested = false;
   private playbackStarted = false;
-  private micInterrupted = false;
   private streamAbort?: AbortController;
   private mediaSourceObjectUrl?: string;
-  private cancelAllSub?: Subscription;
-  private micSpeechSub?: Subscription;
+  private stopAllSub?: Subscription;
+  private preemptSub?: Subscription;
 
   constructor(
     private readonly cdr: ChangeDetectorRef,
@@ -93,28 +93,6 @@ export class AudioSyncComponent implements AfterViewInit, OnChanges, OnDestroy {
       (this.message?.uid && String(this.message.uid).trim()) ||
       `tts-${Date.now()}-${Math.random().toString(36).slice(2, 11)}`;
 
-    // Se l’utente parla al microfono mentre sta ascoltando, interrompi TUTTO (corrente + coda).
-    this.micSpeechSub = this.voiceService.speechStart$.subscribe(() => {
-      if (this.destroyed) {
-        return;
-      }
-      // interrompi solo se questo messaggio era in riproduzione o in attesa
-      if (this.playbackStarted || this.playbackRequested) {
-        this.micInterrupted = true;
-        this.ttsPlayback.cancelAll();
-        this.interruptPlaybackAndRevealText();
-      }
-    });
-
-    // Stop globale (es. mic) notificato dal coordinatore: ogni istanza deve fermarsi e mostrare testo intero.
-    this.cancelAllSub = this.ttsPlayback.cancelAll$.subscribe(() => {
-      if (this.destroyed) {
-        return;
-      }
-      this.micInterrupted = true;
-      this.interruptPlaybackAndRevealText();
-    });
-
     this.onPlaybackEnded = () => {
       this.playbackStarted = false;
       this.cleanupStreaming();
@@ -166,19 +144,12 @@ export class AudioSyncComponent implements AfterViewInit, OnChanges, OnDestroy {
     this.cdr.detectChanges();
 
     setTimeout(() => {
-      if (this.playbackRequested || this.destroyed || this.micInterrupted) {
-        if (this.micInterrupted) {
-          this.markAllWordsPast();
-          if (this.message) {
-            this.message.isJustRecived = false;
-          }
-          this.cdr.detectChanges();
-        }
+      if (this.playbackRequested || this.destroyed) {
         return;
       }
       this.playbackRequested = true;
       this.ttsPlayback.requestStart(this.playbackOwnerId, () => {
-        if (this.destroyed || this.micInterrupted) {
+        if (this.destroyed) {
           this.ttsPlayback.releaseIfCurrent(this.playbackOwnerId);
           return;
         }
@@ -188,14 +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.cancelAllSub?.unsubscribe();
-    this.micSpeechSub?.unsubscribe();
+    this.stopAllSub?.unsubscribe();
+    this.stopAllSub = undefined;
+    this.preemptSub?.unsubscribe();
+    this.preemptSub = undefined;
 
     const audio = this.audioRef?.nativeElement;
     if (audio) {
@@ -219,34 +235,29 @@ export class AudioSyncComponent implements AfterViewInit, OnChanges, OnDestroy {
     }
   }
 
-  private interruptPlaybackAndRevealText(): void {
-    this.playbackStarted = false;
-    this.cleanupStreaming();
+  private startPlayback(audio: HTMLAudioElement): void {
+    const messageSrc = (this.message as any)?.metadata?.src as string | undefined;
 
-    const audio = this.audioRef?.nativeElement;
-    if (audio) {
-      try {
-        audio.pause();
-        audio.currentTime = 0;
-      } catch {
-        /* ignore */
+    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;
     }
 
-    // Rimuove se era in coda (o rilascia se era corrente).
-    this.ttsPlayback.releaseIfCurrent(this.playbackOwnerId);
-
-    // Mostra tutto il testo (niente "future" invisibili).
-    this.markAllWordsPast();
-    if (this.message) {
-      this.message.isJustRecived = false;
-    }
-    this.cdr.detectChanges();
-  }
-
-  private startPlayback(audio: HTMLAudioElement): void {
-    const src = (this.message as any)?.metadata?.src as string | undefined;
-    if (!src) {
+    if (!messageSrc) {
       this.playbackStarted = false;
       this.ttsPlayback.releaseIfCurrent(this.playbackOwnerId);
       this.markAllWordsPast();
@@ -257,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;
@@ -271,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;
     }
 
@@ -298,10 +332,8 @@ export class AudioSyncComponent implements AfterViewInit, OnChanges, OnDestroy {
       try {
         const headers: Record<string, string> = {
           'Content-Type': 'application/json',
+          'Authorization': `${jwt}`
         };
-        if (jwt) {
-          headers['Authorization'] = jwt;
-        }
         
         const response = await fetch(endpoint, {
           method: 'POST',
@@ -314,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;
         }
 
@@ -362,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();
         });
@@ -394,7 +426,7 @@ export class AudioSyncComponent implements AfterViewInit, OnChanges, OnDestroy {
         tryEndOfStream();
       } catch {
         if (!abort.signal.aborted) {
-          this.handlePlaybackError();
+          fallback();
         }
       }
     };
@@ -463,10 +495,8 @@ export class AudioSyncComponent implements AfterViewInit, OnChanges, OnDestroy {
     try {
       const headers: Record<string, string> = {
         'Content-Type': 'application/json',
+        'Authorization': `${jwt}`
       };
-      if (jwt) {
-        headers['Authorization'] = jwt;
-      }
 
       const response = await fetch(endpoint, {
         method: 'POST',
@@ -493,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>
 

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

@@ -1,27 +1,119 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { Injectable } from '@angular/core';
+import { ComponentFixture, TestBed, waitForAsync } 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(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ AvatarComponent ],
-      providers: [ ImageRepoService ]
-    })
-    .compileComponents();
+      declarations: [AvatarComponent],
+      providers: [{ provide: ImageRepoService, useClass: ImageRepoStub }],
+    }).compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(AvatarComponent);
     component = fixture.componentInstance;
-    fixture.detectChanges();
+    component.baseLocation = 'https://app.test';
   });
 
   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');
+  });
 });

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

@@ -1,26 +1,4 @@
-<!-- [ngClass]="{'button-in-msg' : message.metadata && message.metadata.button}" -->
-<!-- ngStyle]="{'padding': (isImage(message) || isFrame(message))?'1px':'0 8px'}" -->
-<!-- 'width': (isImage(message) || isFrame(message))? sizeImage?.width + 'px': null  -->
-
-
-    
-<!-- <div id="bubble-message" *ngIf="isAudio(message)" [ngStyle]="{'padding': '0'}" class="messages primary-color">
-  <div>
-    <chat-audio-track  *ngIf="isAudio(message)"
-      [metadata]="message.metadata" 
-    ></chat-audio-track>
-  </div>
-</div> 
-
-
-[ngStyle]="{'padding': (isImage(message) || isFrame(message) || isAudio(message))?'0 0px':'0 8px'}"
--->
-
-
-
-
-
-<div id="bubble-message"  class="messages primary-color">
+<div class="bubble-message messages primary-color">
     <div>
 
       <div *ngIf="messageType(MESSAGE_TYPE_OTHERS, message) && !isSameSender"
@@ -28,17 +6,7 @@
         [ngStyle]="{'margin': (isImage(message) || isFrame(message))? '12px 16px 8px 16px': '12px 16px 0px 16px'}" class="message_sender_fullname">
         {{message?.sender_fullname}}
       </div>
-      <!-- message type:: image -->
-      <!-- <div *ngIf="message.type == 'image' && message.metadata"  [ngStyle] = "{ 'max-width': getSizeImg(message).width, 'max-height': getSizeImg(message).height }">
-          <img class="message-contentX message-content-imageX" [src]="message.metadata.src" />
-      </div> -->
-  
-      <!-- <img *ngIf="message.type == 'image' && message.metadata" class="message-contentX message-content-imageX"
-      [src]="message.metadata.src" [width]="getSizeImg(message).width"
-      [height]="getSizeImg(message).height" /> -->
 
-      <!-- [width]="getMetadataSize(message.metadata).width"
-      [height]="getMetadataSize(message.metadata).height" -->
       <chat-image *ngIf="isImage(message)"
         [metadata]="message.metadata"
         [width]="sizeImage?.width"
@@ -53,22 +21,42 @@
         (onElementRendered)="onElementRenderedFN($event)">
       </chat-frame>
 
-      <!-- <chat-audio *ngIf="isAudio(message)"
-        [metadata]="message.metadata" 
-        (onElementRendered)="onElementRenderedFN($event)">
-      </chat-audio> -->
 
-      <chat-audio  *ngIf="isAudio(message)"
+      <chat-audio *ngIf="isAudio(message)"
         [metadata]="message.metadata"
         [color]="fontColor"
-        [stylesMap]="stylesMap">
+        [stylesMap]="stylesMap"
+        [translationMap]="translationMap">
       </chat-audio>
-
-      <chat-audio-sync *ngIf="isAudioTTS(message)"
+      
+      <!-- Json sources -->
+      <chat-json-sources *ngIf="jsonSources !== null && jsonSources.length > 0"
+        [items]="jsonSources"
+        (onElementRendered)="onElementRenderedFN($event)">
+      </chat-json-sources> 
+      <!-- TTS player: only when voice proxy is NOT active (avoids double playback)
+           and the message was not already played by the proxy (avoids replay on session end) -->
+      <chat-audio-sync *ngIf="isAudioTTS(message) && !(voiceService.isWssVoiceActive$ | async) && !voiceService.wasProxyHandled(message?.uid)"
         [message]="message"
         [color]="fontColor">
       </chat-audio-sync>
 
+      <!-- Karaoke display for TTS messages while a WSS voice session is active -->
+      <p *ngIf="isAudioTTS(message) && (voiceService.isWssVoiceActive$ | async) && _wssKaraokeWords$"
+         class="wss-karaoke"
+         [style.color]="fontColor">
+        <span *ngFor="let w of (_wssKaraokeWords$ | async); trackBy: trackKaraokeWord"
+              class="wss-word"
+              [class.future]="w.state === 'future'"
+              [class.active]="w.state === 'active'"
+              [class.past]="w.state === 'past'">{{ w.text }}&nbsp;</span>
+      </p>
+
+      <!-- Text fallback for TTS messages after the voice proxy session ended -->
+      <chat-text *ngIf="isAudioTTS(message) && !(voiceService.isWssVoiceActive$ | async) && voiceService.wasProxyHandled(message?.uid) && message?.text"
+        [text]="message?.text"
+        [color]="fontColor">
+      </chat-text>
 
       <!-- <chat-frame *ngIf="message.metadata && message.metadata.type && message.metadata.type.includes('video')"
         [metadata]="message.metadata"
@@ -80,7 +68,14 @@
       <!-- <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) && !isAudioTTS(message))" >
+      <div *ngIf="message?.text && (!isAudio(message) && !isAudioTTS(message)) && !isJsonSources(message)" >
+
+        <!-- Word-by-word streaming reveal during an active voice session -->
+        <p *ngIf="_isStreaming" class="streaming-text" [style.color]="fontColor">
+          <span *ngFor="let w of _streamingWords; trackBy: trackWord"
+                class="stream-word"
+                [style.animation-delay]="(w.index * 80) + 'ms'">{{w.word}} </span>
+        </p>
 
         <!-- [htmlEnabled]="(message?.type==='html')? true : false" -->
         <chat-text *ngIf="message?.type !=='html'"
@@ -90,7 +85,7 @@
           (onAfterMessageRender)="onAfterMessageRenderFN($event)">
         </chat-text>
 
-        <chat-html *ngIf="message?.type==='html'"
+        <chat-html *ngIf="jsonSources === null && message?.type==='html'"
           [htmlText]="message?.text"
           [fontSize]="stylesMap.get('buttonFontSize')"
           [themeColor]="stylesMap.get('themeColor')"
@@ -98,13 +93,5 @@
         </chat-html>
 
       </div>
-  
     </div>
-  
-  </div>
-
-
-  
-
-
-
+</div>