@chat21/chat21-web-widget 5.1.32-rc1 → 5.1.32-rc14

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',
@@ -93,14 +94,16 @@ export class ConversationFooterComponent implements OnInit, OnChanges, OnDestroy
 
   /** Stream audio UI: icona equalizer → X; alert con onde animate sopra il footer */
   isStreamAudioActive = false;
+  /** True while the bot's TTS audio is playing — mic segments are suppressed, spectrum turns grey. */
+  isBotSpeaking = false;
   /** Sottoscrizione ai segmenti audio (VAD → WebM) dal {@link VoiceService}. */
   private voiceAudioSubscription?: Subscription;
   /** Sottoscrizione al volume audio (real-time) dal {@link VoiceService}. */
   private voiceVolumeSubscription?: Subscription;
+  /** Sottoscrizione allo stato TTS (bot sta parlando). */
+  private botSpeakingSub?: Subscription;
+  /** Passato a {@link StreamAudioSpectrumComponent} per disegnare la linea spettro. */
   currentVolume = 0;
-  wavePath1 = '';
-  wavePath2 = '';
-  wavePath3 = '';
 
   file_size_limit = FILE_SIZE_LIMIT;
   attachmentTooltip: string = '';
@@ -112,13 +115,13 @@ 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();
   }
 
-
   ngOnChanges(changes: SimpleChanges){
     if(changes['conversationWith'] && changes['conversationWith'].currentValue !== undefined){
       this.conversationHandlerService = this.chatManager.getConversationHandlerByConversationId(this.conversationWith);
@@ -169,6 +172,7 @@ export class ConversationFooterComponent implements OnInit, OnChanges, OnDestroy
   async initVoice() {
     this.voiceAudioSubscription?.unsubscribe();
     this.voiceVolumeSubscription?.unsubscribe();
+    this.botSpeakingSub?.unsubscribe();
 
     this.voiceAudioSubscription = this.voiceService.audioSegment$.subscribe((rec) => {
       console.log('[CONV-FOOTER] audioSegment$', rec);
@@ -176,40 +180,46 @@ export class ConversationFooterComponent implements OnInit, OnChanges, OnDestroy
     });
     this.voiceVolumeSubscription = this.voiceService.volume$.subscribe((volume) => {
       this.currentVolume = volume;
-      this.updateWave(volume);
+    });
+    this.botSpeakingSub = this.voiceService.isAcquisitionBlocked$.subscribe((blocked) => {
+      this.isBotSpeaking = blocked;
     });
     await this.voiceService.startSession();
   }
 
-  async stopVoice() {
+  async stopVoice(options?: { discardInProgressSegment?: boolean }) {
+    // Stop all active TTS audio immediately and reveal all text.
+    this.ttsPlayback.stopAll();
+
     this.voiceAudioSubscription?.unsubscribe();
     this.voiceAudioSubscription = undefined;
 
     this.voiceVolumeSubscription?.unsubscribe();
     this.voiceVolumeSubscription = undefined;
 
-    await this.voiceService.stopSession();
-  }
+    this.botSpeakingSub?.unsubscribe();
+    this.botSpeakingSub = undefined;
+    this.isBotSpeaking = false;
 
-  updateWave(volume: number) {
-    const intensity = Math.min(volume / 80, 1); // più sensibile
-  
-    const amp1 = 4 + intensity * 22;
-    const amp2 = 2 + intensity * 16;
-    const amp3 = 1 + intensity * 12;
-  
-    this.wavePath1 = this.buildWave(42, amp1);
-    this.wavePath2 = this.buildWave(50, amp2);
-    this.wavePath3 = this.buildWave(58, amp3);
+    await this.voiceService.stopSession(options);
+    this.currentVolume = 0;
   }
 
-  buildWave(y: number, amp: number): string {
-    return `
-      M6 ${y}
-      Q24 ${y - amp} 42 ${y}
-      T78 ${y}
-      T98 ${y}
-    `;
+  /**
+   * CHIAMATO DA: conversation.component.ts
+   * Messaggio in arrivo da un altro mittente mentre lo stream è attivo: scarta solo il segmento
+   * registrato in quel momento (nessun upload); mic + VAD restano attivi, `isStreamAudioActive` true.
+   */
+  interruptStreamDueToPeerMessage(): void {
+    if (!this.isStreamAudioActive) {
+      return;
+    }
+    this.logger.log('[CONV-FOOTER] discard recording segment: incoming message from peer (stream stays on)');
+    try {
+      this.voiceService.discardCurrentRecordingSegment();
+    } catch (e) {
+      this.logger.error('[CONV-FOOTER] interruptStreamDueToPeerMessage', e);
+    }
   }
 
   ngOnDestroy() {
@@ -741,6 +751,7 @@ export class ConversationFooterComponent implements OnInit, OnChanges, OnDestroy
     const turningOn = !this.isStreamAudioActive;
     if (turningOn) {
       try {
+        this.currentVolume = 0;
         await this.initVoice();
         this.isStreamAudioActive = true;
       } catch (e) {

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

@@ -0,0 +1,43 @@
+<ng-container [ngSwitch]="mode">
+    <!-- ALERT: spectrum line (fills streamAudioAlert width) -->
+    <div *ngSwitchCase="'alert'" 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="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>
+            <path class="stream-audio-spectrum__line"
+                [attr.d]="spectrumLinePath"
+                fill="none"
+                [attr.stroke]="'url(#' + gradientId + ')'"
+                stroke-width="2.4"
+                stroke-linecap="round"
+                stroke-linejoin="round"/>
+        </svg>
+    </div>
+
+    <!-- BUTTON: inactive icon / expanded pill content -->
+    <ng-container *ngSwitchCase="'button'">
+        <span class="stream-audio-button__icon" *ngIf="!active" aria-hidden="true">
+            <svg role="img" xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 30 30" fill="currentColor" preserveAspectRatio="xMidYMid meet">
+                <path class="s0" d="m5.21 7.41c-1.21 0-2.21 0.99-2.21 2.21v8.14c0 1.21 0.99 2.21 2.21 2.21 1.22 0 2.21-0.99 2.21-2.21v-8.14c0-1.21-0.99-2.21-2.21-2.21z"/>
+                <path class="s0" d="m11.64 3.01c-1.22 0-2.21 0.99-2.21 2.2v16.94c0 1.21 0.99 2.2 2.21 2.2 1.22 0 2.21-0.98 2.21-2.2v-16.94c0-1.21-0.99-2.21-2.21-2.21z"/>
+                <path class="s0" d="m15.86 9.25v8.88c0 1.21 0.99 2.21 2.21 2.21 1.22 0 2.21-0.99 2.21-2.21v-8.88c0-1.22-0.99-2.21-2.21-2.21-1.22 0-2.21 0.99-2.21 2.21z"/>
+                <path class="s0" d="m24.5 8.97c-1.22 0-2.21 0.99-2.21 2.21v5.02c0 1.22 0.99 2.21 2.21 2.21 1.22 0 2.21-0.99 2.21-2.21v-5.02c0-1.21-0.99-2.21-2.21-2.21z"/>
+            </svg>
+        </span>
+
+        <span class="stream-audio-button__expanded" *ngIf="active">
+            <span class="stream-audio-button__bars" aria-hidden="true">
+                <span class="bar" [style.transform]="'scaleY(' + barScales[0] + ')'"></span>
+                <span class="bar" [style.transform]="'scaleY(' + barScales[1] + ')'"></span>
+                <span class="bar" [style.transform]="'scaleY(' + barScales[2] + ')'"></span>
+                <span class="bar" [style.transform]="'scaleY(' + barScales[3] + ')'"></span>
+            </span>
+            <span class="stream-audio-button__label">{{ translationMap.get('CLOSE') }}</span>
+        </span>
+    </ng-container>
+</ng-container>

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

@@ -0,0 +1,79 @@
+:host {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
+
+.stream-audio-spectrum {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding: 0 10px;
+  box-sizing: border-box;
+}
+
+.stream-audio-spectrum__svg {
+  width: 100%;
+  height: 32px;
+  display: block;
+}
+
+.stream-audio-spectrum__line {
+  pointer-events: none;
+  filter: drop-shadow(0 0 1px color-mix(in srgb, currentColor 35%, transparent));
+}
+
+/* ===========================
+ * BUTTON (pill content)
+ * =========================== */
+.stream-audio-button__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
+
+.stream-audio-button__icon svg {
+  width: 20px;
+  height: 20px;
+  display: block;
+}
+
+.stream-audio-button__expanded {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  width: 100%;
+  user-select: none;
+}
+
+.stream-audio-button__label {
+  font-size: 14px;
+  line-height: 1;
+  font-weight: 500;
+  letter-spacing: 0.2px;
+  white-space: nowrap;
+}
+
+.stream-audio-button__bars {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 3px;
+  width: 26px;
+  height: 18px;
+  transform-origin: center;
+  margin: 0;
+  line-height: 0;
+}
+
+.stream-audio-button__bars .bar {
+  width: 3px;
+  height: 100%;
+  border-radius: 2px;
+  background: rgba(255, 255, 255, 0.92);
+  transform-origin: center;
+}

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

@@ -0,0 +1,192 @@
+import { Component, Input, OnChanges, OnDestroy, OnInit, Optional, SimpleChanges } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { VoiceService } from 'src/app/providers/voice/voice.service';
+
+export type StreamAudioSpectrumMode = 'alert' | 'button';
+
+/**
+ * Icona stream: cerchio con linea orizzontale tipo spettro, reattiva al volume del microfono.
+ * Il parent (es. conversation-footer) aggiorna solo {@link volume} da VoiceService.
+ */
+@Component({
+  selector: 'chat-stream-audio-spectrum',
+  templateUrl: './stream-audio-spectrum.component.html',
+  styleUrl: './stream-audio-spectrum.component.scss',
+})
+export class StreamAudioSpectrumComponent implements OnInit, OnChanges {
+  private static gradSeq = 0;
+  readonly gradientId = `streamSpectrumGrad-${++StreamAudioSpectrumComponent.gradSeq}`;
+
+  /** Volume normalizzato come emesso da VoiceService (stessa scala del footer). */
+  @Input() volume = 0;
+  /** Colore tema (stroke / gradient); opzionale. */
+  @Input() accentColor?: string;
+
+  /** UI variant. `alert` = spectrum line (in #streamAudioAlert). `button` = icon / pill with bars + label. */
+  @Input() mode: StreamAudioSpectrumMode = 'alert';
+  /** For `mode="button"`: whether the stream is active (expanded pill). */
+  @Input() active = false;
+  /** For `mode="button"`: VAD speech flag; if omitted, we fall back to a volume threshold heuristic. */
+  @Input() isUserSpeaking?: boolean;
+  /** For `mode="button"`: label on the pill. */
+  @Input() translationMap: Map< string, string>;
+
+  // ALERT (spectrum line)
+  spectrumLinePath = 'M0,16 L100,16';
+
+  // BUTTON (bars)
+  barScales: [number, number, number, number] = [0.65, 0.65, 0.65, 0.65];
+  private rafId: number | null = null;
+  private lastSpeaking = false;
+  private voiceSpeechStartSub?: Subscription;
+  private voiceSpeechEndSub?: Subscription;
+  private internalIsUserSpeaking = false;
+
+  constructor(@Optional() private readonly voiceService: VoiceService | null) {}
+
+  ngOnInit(): void {
+    // Optional: use VAD speech events to improve idle/speaking detection.
+    if (this.voiceService) {
+      this.voiceSpeechStartSub = this.voiceService.speechStart$?.subscribe(() => {
+        this.internalIsUserSpeaking = true;
+      });
+      this.voiceSpeechEndSub = this.voiceService.speechEnd$?.subscribe(() => {
+        this.internalIsUserSpeaking = false;
+      });
+    }
+    this.refreshAll();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['volume'] || changes['mode'] || changes['active'] || changes['isUserSpeaking']) {
+      this.refreshAll();
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.stopRaf();
+    this.voiceSpeechStartSub?.unsubscribe();
+    this.voiceSpeechEndSub?.unsubscribe();
+  }
+
+  private refreshAll(): void {
+    if (this.mode === 'alert') {
+      this.refreshSpectrumPath();
+      this.stopRaf();
+      return;
+    }
+    this.refreshBars();
+  }
+
+  private refreshSpectrumPath(): void {
+    const intensity = Math.min(this.volume / 80, 1);
+    const t = Date.now() / 175;
+    this.spectrumLinePath = this.buildSpectrumLinePath(intensity, t);
+  }
+
+  private buildSpectrumLinePath(intensity: number, t: number): string {
+    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;
+      const x = x0 + p * (x1 - x0);
+      const u = p * Math.PI * 6;
+      const wobble =
+        Math.sin(u + t) * 0.34 +
+        Math.sin(u * 2.35 + t * 1.12) * 0.24 +
+        Math.sin(u * 4.2 + t * 0.72) * 0.18 +
+        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(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('');
+  }
+
+  private refreshBars(): void {
+    if (!this.active) {
+      this.stopRaf();
+      return;
+    }
+
+    const speaking = this.computeSpeaking();
+    if (!speaking) {
+      this.stopRaf();
+      this.barScales = [0.65, 0.65, 0.65, 0.65];
+      this.lastSpeaking = false;
+      return;
+    }
+
+    // speaking: animate bars with volume-driven intensity
+    if (!this.lastSpeaking) {
+      this.lastSpeaking = true;
+    }
+    this.startRaf();
+  }
+
+  private computeSpeaking(): boolean {
+    if (typeof this.isUserSpeaking === 'boolean') {
+      return this.isUserSpeaking;
+    }
+    if (this.voiceService) {
+      return this.internalIsUserSpeaking;
+    }
+    // Fallback heuristic: treat as speaking when volume crosses a low threshold.
+    return (this.volume || 0) >= 4;
+  }
+
+  private startRaf(): void {
+    if (this.rafId !== null) {
+      return;
+    }
+    const tick = () => {
+      if (!this.active) {
+        this.stopRaf();
+        return;
+      }
+      const speaking = this.computeSpeaking();
+      if (!speaking) {
+        this.stopRaf();
+        this.barScales = [0.65, 0.65, 0.65, 0.65];
+        return;
+      }
+
+      const intensity = Math.min((this.volume || 0) / 80, 1);
+      const t = performance.now() / 220;
+      const targets: [number, number, number, number] = [0.35, 0.35, 0.35, 0.35];
+
+      for (let i = 0; i < 4; i++) {
+        const phase = i * 0.9;
+        const w1 = (Math.sin(t * 1.35 + phase) + 1) / 2;
+        const w2 = (Math.sin(t * 2.05 + phase * 1.7) + 1) / 2;
+        const mix = w1 * 0.62 + w2 * 0.38;
+        const s = 0.25 + intensity * (0.25 + 0.95 * mix);
+        targets[i as 0 | 1 | 2 | 3] = Math.max(0.35, Math.min(1.2, s));
+      }
+
+      // Smooth toward targets to avoid jitter on rapid volume changes.
+      const lerp = (a: number, b: number, k: number) => a + (b - a) * k;
+      this.barScales = [
+        lerp(this.barScales[0], targets[0], 0.35),
+        lerp(this.barScales[1], targets[1], 0.35),
+        lerp(this.barScales[2], targets[2], 0.35),
+        lerp(this.barScales[3], targets[3], 0.35),
+      ];
+
+      this.rafId = requestAnimationFrame(tick);
+    };
+    this.rafId = requestAnimationFrame(tick);
+  }
+
+  private stopRaf(): void {
+    if (this.rafId !== null) {
+      cancelAnimationFrame(this.rafId);
+      this.rafId = null;
+    }
+  }
+}

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

@@ -2,7 +2,6 @@
 
     <audio
       #audioPlayer
-      [src]="message?.metadata?.src"
       (timeupdate)="onTimeUpdate()"
       style="display:none">
     </audio>

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;