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

package/CHANGELOG.md

@@ -6,6 +6,14 @@
 ### **Copyrigth**: 
 *Tiledesk SRL*
 
+# 5.1.32-rc9
+- **added**: mic-triggered TTS interruption — when VAD detects user speech, stop current TTS playback, clear the queue, and reveal the full message text
+- **added**: global TTS cancel API (`TtsAudioPlaybackCoordinator.cancelAll()` + `cancelAll$`) to stop current + queued TTS playback from UI/events (e.g. close stream)
+- **changed**: `chat-audio-sync` TTS playback now streams audio via authenticated POST to `message.metadata.src`, sending `voiceSettings` + `text` and `streaming: true`
+- **changed**: stream UI spectrum — removed circular orb and stretched the spectrum line to fill the `#streamAudioAlert` width with 10px side padding
+- **changed**: conversation content layout while streaming — adjusted received bubble left margin and loading spinner margins for full-size mode
+
+
 # 5.1.32-rc8
 - **changed**: updated the dev environment defaults to align with the stage setup (remote config URL, API endpoints, logging level, storage prefix, and related settings)
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@chat21/chat21-web-widget",
   "author": "Tiledesk SRL",
-  "version": "5.1.32-rc8",
+  "version": "5.1.32-rc9",
   "license": "MIT",
   "homepage": "https://www.tiledesk.com",
   "repository": {

package/src/app/component/conversation-detail/conversation-content/conversation-content.component.html

@@ -62,7 +62,8 @@
                               [ngClass]="{'slide-in-left': false}"
                               [class.no-background]="(isImage(message) || isFrame(message) || isCarousel(message)) && ((message?.text && message?.text.trim() === '') || !message?.text)"  
                               [class.emoticon]="isEmojii(message?.text)"
-                              [style.margin-left]="isStreamAudioActive ? '0px' : (isSameSender(message?.sender, i) ? 'calc(var(--avatar-width) + 10px)' : null)"
+                              [class.fullSizeMessage]="isStreamAudioActive"
+                              [style.margin-left]="isSameSender(message?.sender, i) ? 'calc(var(--avatar-width) + 10px)' : null"
                               [ngStyle]="{'background': stylesMap.get('bubbleReceivedBackground'), 'color': stylesMap.get('bubbleReceivedTextColor'), 'width':isFrame(message) ?'100%' : null}"
                               [isSameSender]="isSameSender(message?.sender, i)"
                               [message]="message"
@@ -134,9 +135,10 @@
                           [senderFullname]="nameUserTypingNow"
                           [baseLocation]="baseLocation">
                         </chat-avatar-image>
+                        
                         <user-typing
-                          [ngClass]="{'userTypingNowExist': !idUserTypingNow}"
                           [color]="stylesMap?.get('iconColor')"
+                          [ngClass]="{'userTypingNowExist': !idUserTypingNow}"
                           [translationMap]="translationMap"
                           [idUserTypingNow]="idUserTypingNow"
                           [nameUserTypingNow]="nameUserTypingNow">
@@ -145,6 +147,7 @@
 
                       <div *ngIf="showThinkingMessage && lastServerSenderKind === 'bot'" class="msg_container base_receive thinking_receive">
                         <user-typing class="loading thinking-dots"
+                          [class.fullSize]="isStreamAudioActive"
                           [color]="stylesMap?.get('iconColor')"
                           [translationMap]="translationMap"
                           [idUserTypingNow]="idUserTypingNow"

package/src/app/component/conversation-detail/conversation-content/conversation-content.component.scss

@@ -27,6 +27,11 @@
     margin: 25px 50px
 }
 
+
+:host .loading.fullSize ::ng-deep > div.spinner{
+    margin: 50px 0px !important;
+}
+
 // ============= CSS c21-body ================= //
 .c21-body {
     // -webkit-box-shadow: inset 0 10px 10px -10px rgba(0,0,0,0.4);
@@ -236,6 +241,11 @@
                         height: fit-content;
                         width: auto;
 
+                        &.fullSizeMessage {
+                            max-width: 100%;
+                            margin: auto 0 auto 0 !important;
+                        }
+
                     }
                     
 

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

@@ -17,6 +17,7 @@ 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',
@@ -110,7 +111,8 @@ export class ConversationFooterComponent implements OnInit, OnChanges, OnDestroy
   constructor(private chatManager: ChatManager,
               private typingService: TypingService,
               private uploadService: UploadService,
-              private voiceService: VoiceService) { }
+              private voiceService: VoiceService,
+              private ttsPlayback: TtsAudioPlaybackCoordinator) { }
 
   ngOnInit() {
     // this.updateAttachmentTooltip();
@@ -120,6 +122,7 @@ export class ConversationFooterComponent implements OnInit, OnChanges, OnDestroy
     if(changes['conversationWith'] && changes['conversationWith'].currentValue !== undefined){
       this.conversationHandlerService = this.chatManager.getConversationHandlerByConversationId(this.conversationWith);
       this.isStreamAudioActive = false;
+      this.ttsPlayback.cancelAll();
       void this.stopVoice();
     }
     if(changes['hideTextReply'] && changes['hideTextReply'].currentValue !== undefined){
@@ -740,10 +743,13 @@ export class ConversationFooterComponent implements OnInit, OnChanges, OnDestroy
       } catch (e) {
         this.logger.error('[CONV-FOOTER] onStreamPressed: initVoice failed', e);
         this.isStreamAudioActive = false;
+        this.ttsPlayback.cancelAll();
       }
     } else {
       await this.stopVoice();
       this.isStreamAudioActive = false;
+      // Close-stream-button clicked: stop any playing/queued TTS audio.
+      this.ttsPlayback.cancelAll();
     }
     this.onStreamAudioActiveChange.emit(this.isStreamAudioActive);
     this.logger.log('[CONV-FOOTER] isStreamAudioActive', this.isStreamAudioActive);

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

@@ -1,13 +1,12 @@
-<div class="stream-audio-spectrum__orb" [ngStyle]="accentColor ? { color: accentColor } : null">
-    <svg class="stream-audio-spectrum__svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+<div 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="12" y1="50" x2="88" y2="50" gradientUnits="userSpaceOnUse">
+            <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>
-        <circle cx="50" cy="50" r="46" fill="currentColor" opacity="0.14"/>
         <path class="stream-audio-spectrum__line"
             [attr.d]="spectrumLinePath"
             fill="none"

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

@@ -1,22 +1,21 @@
 :host {
   display: block;
+  width: 100%;
+  flex: 1 1 auto;
 }
 
-.stream-audio-spectrum__orb {
+.stream-audio-spectrum {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 88px;
-  height: 88px;
-  border-radius: 50%;
-  border: 2px solid currentColor;
-  background: var(--content-background-color);
-  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.04);
+  width: 100%;
+  padding: 0 10px;
+  box-sizing: border-box;
 }
 
 .stream-audio-spectrum__svg {
-  width: 72px;
-  height: 72px;
+  width: 100%;
+  height: 32px;
   display: block;
 }
 

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

@@ -18,7 +18,7 @@ export class StreamAudioSpectrumComponent implements OnInit, OnChanges {
   /** Colore tema (stroke / gradient); opzionale. */
   @Input() accentColor?: string;
 
-  spectrumLinePath = 'M12,50 L88,50';
+  spectrumLinePath = 'M0,16 L100,16';
 
   ngOnInit(): void {
     this.refreshPath();
@@ -37,11 +37,11 @@ export class StreamAudioSpectrumComponent implements OnInit, OnChanges {
   }
 
   private buildSpectrumLinePath(intensity: number, t: number): string {
-    const x0 = 12;
-    const x1 = 88;
-    const cy = 50;
-    const segments = 80;
-    const amp = 1.2 + intensity * 16;
+    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;
@@ -54,7 +54,7 @@ export class StreamAudioSpectrumComponent implements OnInit, OnChanges {
         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(68, Math.max(32, y));
+      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('');

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

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

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

@@ -9,9 +9,11 @@ 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 { Globals } from 'src/app/utils/globals';
+import { VoiceService } from 'src/app/providers/voice/voice.service';
 
 /** HAVE_METADATA: metadati già disponibili (tipico audio servito da cache). */
 const HAVE_METADATA = 1;
@@ -48,13 +50,17 @@ 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;
 
   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`. */
@@ -87,6 +93,28 @@ 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();
@@ -138,12 +166,19 @@ export class AudioSyncComponent implements AfterViewInit, OnChanges, OnDestroy {
     this.cdr.detectChanges();
 
     setTimeout(() => {
-      if (this.playbackRequested || this.destroyed) {
+      if (this.playbackRequested || this.destroyed || this.micInterrupted) {
+        if (this.micInterrupted) {
+          this.markAllWordsPast();
+          if (this.message) {
+            this.message.isJustRecived = false;
+          }
+          this.cdr.detectChanges();
+        }
         return;
       }
       this.playbackRequested = true;
       this.ttsPlayback.requestStart(this.playbackOwnerId, () => {
-        if (this.destroyed) {
+        if (this.destroyed || this.micInterrupted) {
           this.ttsPlayback.releaseIfCurrent(this.playbackOwnerId);
           return;
         }
@@ -159,6 +194,8 @@ export class AudioSyncComponent implements AfterViewInit, OnChanges, OnDestroy {
     this.destroyed = true;
     this.playbackStarted = false;
     this.cleanupStreaming();
+    this.cancelAllSub?.unsubscribe();
+    this.micSpeechSub?.unsubscribe();
 
     const audio = this.audioRef?.nativeElement;
     if (audio) {
@@ -182,6 +219,31 @@ export class AudioSyncComponent implements AfterViewInit, OnChanges, OnDestroy {
     }
   }
 
+  private interruptPlaybackAndRevealText(): void {
+    this.playbackStarted = false;
+    this.cleanupStreaming();
+
+    const audio = this.audioRef?.nativeElement;
+    if (audio) {
+      try {
+        audio.pause();
+        audio.currentTime = 0;
+      } catch {
+        /* ignore */
+      }
+    }
+
+    // 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) {
@@ -236,8 +298,10 @@ 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',
@@ -399,11 +463,10 @@ export class AudioSyncComponent implements AfterViewInit, OnChanges, OnDestroy {
     try {
       const headers: Record<string, string> = {
         'Content-Type': 'application/json',
-        'Authorization': `${jwt}`
       };
-
-      console.log('headers', headers);
-      console.log('requestBody', requestBody);
+      if (jwt) {
+        headers['Authorization'] = jwt;
+      }
 
       const response = await fetch(endpoint, {
         method: 'POST',

package/src/app/providers/tts-audio-playback-coordinator.service.ts

@@ -1,4 +1,5 @@
 import { Injectable } from '@angular/core';
+import { Observable, Subject } from 'rxjs';
 
 /**
  * Garantisce un solo messaggio TTS in riproduzione alla volta.
@@ -9,6 +10,10 @@ export class TtsAudioPlaybackCoordinator {
   private currentOwnerId: string | null = null;
   private readonly queue: Array<{ ownerId: string; start: () => void }> = [];
 
+  private readonly cancelAllSource = new Subject<void>();
+  /** Emesso quando la riproduzione TTS va interrotta globalmente (es. l’utente parla al microfono). */
+  readonly cancelAll$: Observable<void> = this.cancelAllSource.asObservable();
+
   /**
    * Richiede l'avvio della riproduzione TTS per `ownerId`.
    * Se non c'è nessun TTS attivo, parte subito; altrimenti viene messo in coda.
@@ -68,4 +73,14 @@ export class TtsAudioPlaybackCoordinator {
   release(ownerId: string): void {
     this.releaseIfCurrent(ownerId);
   }
+
+  /**
+   * Interrompe TUTTA la riproduzione TTS (corrente + coda) e notifica i componenti.
+   * I componenti devono fermare l’audio e mostrare il testo per intero.
+   */
+  cancelAll(): void {
+    this.queue.splice(0, this.queue.length);
+    this.currentOwnerId = null;
+    this.cancelAllSource.next();
+  }
 }

package/src/app/providers/voice/voice.service.ts

@@ -33,6 +33,10 @@ export class VoiceService {
   /** Emesso a ogni fine segmento parlato: audio WebM + opzionalmente `transcript` / `transcriptionError`. */
   readonly audioSegment$: Observable<VoiceSegmentPayload> = this.audioSegmentSubject.asObservable();
 
+  private readonly speechStartSubject = new Subject<void>();
+  /** Emesso quando il microfono intercetta parlato (VAD speech start). */
+  readonly speechStart$: Observable<void> = this.speechStartSubject.asObservable();
+
   // 🔊 REALTIME VOLUME STREAM
   private readonly volumeSubject = new BehaviorSubject<number>(0);
   readonly volume$: Observable<number> = this.volumeSubject.asObservable();
@@ -83,6 +87,7 @@ export class VoiceService {
       },
       onSpeechStart: () => {
         this.logger.log('[VoiceService] speech start');
+        this.speechStartSubject.next();
         this.startMediaRecorderSegment();
       },
       onSpeechEnd: () => {

package/src/app/sass/_variables.scss

@@ -38,7 +38,7 @@
     --chat-footer-logo-height: 30px;
     --chat-footer-close-button-height: 30px;
     --chat-footer-border-radius: 16px;
-    --chat-footer-stream-button-height: 96px;
+    --chat-footer-stream-button-height: 50px;
     --chat-footer-stream-button-padding: 10px 0;
     --chat-footer-background-color: #f6f7fb;
     --chat-footer-color: #1a1a1a;