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

package/CHANGELOG.md

@@ -6,10 +6,27 @@
 ### **Copyrigth**: 
 *Tiledesk SRL*
 
+# 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)
+
+# 5.1.32-rc7
+- **added**: `StreamAudioSpectrum` component for audio visualization in the streaming footer UI
+- **added**: TTS playback coordinator queue — ensures TTS messages play sequentially without interrupting the previous one
+- **changed**: `chat-audio-sync` — updated TTS audio handling to support streaming playback and improved autoplay/animation timing
+- **changed**: iframe loader (`launch.js`, `launch_template.js`) — streamlined loading logic and improved error handling, with fixes for localhost environments
+
+# 5.1.32-rc4
+- **added**: “Close stream” control (`.close-stream-button`) — content and sheet bottom offset in fullscreen using `--chat-footer-stream-button-height` only while the stream is listening (`isStreamAudioActive`); variables in `_variables.scss`.
+- **added**: `VoiceService.discardCurrentRecordingSegment()` — when a message arrives from another sender during streaming, the current WebM segment is discarded (no upload) without stopping mic/VAD; `interruptStreamDueToPeerMessage()` in the footer no longer clears `isStreamAudioActive`.
+- **changed**: `#streamAudioAlert` — band above the footer with a frosted-glass look (`backdrop-filter`, semi-transparent `color-mix`).
+
 # 5.1.32-rc3
+- **changed**: `nginx.conf` (Docker image) — explicit MIME types for `.mjs`, `.wasm`, `.onnx` and `default_type` at `http` level (avoids `text/plain` on ONNX/VAD modules behind containerized deploys).
+- **chore**: removed deprecated Amazon beta/prod deploy scripts from the repository.
 
 # 5.1.32-rc2
 - **bug fixed**: minor streaming icon UI fixed
+- **changed**: Refactor stream audio button UI in the conversation footer (layout / classes).
 
 # 5.1.32-rc1
 - **added**: Voice pipeline — VAD (`@ricky0123/vad-web`) with ONNX Runtime WASM served from `/assets/onnx` (`copy-onnx-wasm`), `VoiceService` with `audioSegment$` (WebM segments) and optional STT/TTS via unified OpenAI provider using `HttpClient`, transcript / error fields on segment payloads.

package/package.json

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

package/src/app/app.module.ts

@@ -16,6 +16,7 @@ import { ConversationFooterComponent } from './component/conversation-detail/con
 import { ConversationInternalFrameComponent } from './component/conversation-detail/conversation-internal-frame/conversation-internal-frame.component';
 import { ConversationPreviewComponent } from './component/conversation-detail/conversation-preview/conversation-preview.component';
 import { ConversationAudioRecorderComponent } from './component/conversation-detail/conversation-audio-recorder/conversation-audio-recorder.component';
+import { StreamAudioSpectrumComponent } from './component/conversation-detail/stream-audio-spectrum/stream-audio-spectrum.component';
 /** CONVERSATION-DETAIL COMPONENTS */
 import { BubbleMessageComponent } from './component/message/bubble-message/bubble-message.component';
 import { AvatarComponent } from './component/message/avatar/avatar.component';
@@ -294,6 +295,7 @@ export function uploadFactory(http: HttpClient, appConfig: AppConfigService, app
     ConversationPreviewComponent,
     ConversationInternalFrameComponent,
     ConversationAudioRecorderComponent,
+    StreamAudioSpectrumComponent,
     BubbleMessageComponent,
     AvatarComponent,
     FrameComponent,

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

@@ -4,7 +4,8 @@
 <div id="chat21-conversation-component" 
     #afConversationComponent
     tabindex="1500" 
-    aria-modal="true">
+    aria-modal="true"
+    [class.chat21-conversation--close-stream-active]="closeStreamButtonActiveForSheetBottom()">
 
     <!-- HEADER -->
     <chat-conversation-header

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

@@ -242,6 +242,16 @@ dialog:-internal-dialog-in-top-layer{
     ::ng-deep .chat21-sheet-content{
         bottom: calc(var(--chat-footer-logo-height) + var(--chat-footer-height) + var(--chat-footer-close-button-height) + 34px)!important;
     }
+
+    /* Con `.close-stream-button` (stream in ascolto): spazio per alert stream sopra il footer */
+    #chat21-conversation-component.chat21-conversation--close-stream-active ::ng-deep .chat21-sheet-content {
+        bottom: calc(
+            var(--chat-footer-logo-height) +
+            var(--chat-footer-height) +
+            var(--chat-footer-stream-button-height) +
+            34px
+        ) !important;
+    }
     
 }
 

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

@@ -827,6 +827,10 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
             this.showThinkingMessage = false;
           }
 
+          if (this.isStreamAudioActive && msg.sender !== this.senderId) {
+            this.conversationFooter?.interruptStreamDueToPeerMessage();
+          }
+
           that.newMessageAdded(msg);
           // Update badge based on the latest message received from the server.
           // We rely on `messages` being kept in-sync by the conversation handler.
@@ -1414,6 +1418,13 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
   }
   // =========== END: event emitter function ====== //
 
+  /**
+   * True quando è visibile il pulsante chiudi stream (`.close-stream-button`, `isStreamAudioActive`).
+   * Solo in quel caso il bottom del foglio include `--chat-footer-stream-button-height`.
+   */
+  closeStreamButtonActiveForSheetBottom(): boolean {
+    return !!(this.g?.showAudioStreamFooterButton && this.isStreamAudioActive);
+  }
 
   openInputFiles() {
     alert('ok');

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

@@ -49,7 +49,7 @@
                           <!-- message RECIPIENT:: -->
                           <div role="messaggio" *ngIf="messageType(MESSAGE_TYPE_OTHERS, message)" class="msg_container base_receive">
                             
-                            <chat-avatar-image *ngIf="!isSameSender(message?.sender, i)" 
+                            <chat-avatar-image *ngIf="!isSameSender(message?.sender, i) && !isStreamAudioActive" 
                               [ngClass]="{'slide-in-left': false}"    
                               [senderID]="message?.sender"
                               [senderFullname]="message?.sender_fullname"
@@ -62,7 +62,7 @@
                               [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]="isSameSender(message?.sender, i)? 'calc(var(--avatar-width) + 10px)': null"
+                              [style.margin-left]="isStreamAudioActive ? '0px' : (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"

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

@@ -270,6 +270,15 @@
     }// end c21-body-container
 }// end c21-body
 
+/* Solo con pulsante chiudi stream (stream in ascolto): altezza extra come #streamAudioAlert */
+:host-context(#chat21-conversation-component.chat21-conversation--close-stream-active) .c21-body .c21-body-container .c21-body-content .chat21-sheet-content {
+    bottom: calc(
+        var(--chat-footer-logo-height) +
+        var(--chat-footer-height) +
+        var(--chat-footer-stream-button-height)
+    );
+}
+
 @keyframes thinking-dot {
     0%, 80%, 100% {
         opacity: 0.2;

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

@@ -14,24 +14,10 @@
 
     <!-- STREAM AUDIO: cerchio con onde animate -->
     <div id="streamAudioAlert" *ngIf="!hideTextAreaContent && isStreamAudioActive" class="fade-in-bottom stream-audio-alert" [class.hideTextReply]="hideTextReply" role="status" [attr.aria-label]="translationMap?.get('STREAM_AUDIO_LISTENING') || 'Stream audio attivo'">
-        <div class="stream-audio-alert__orb" [ngStyle]="{ color: stylesMap?.get('themeColor') }">
-            <svg class="stream-audio-alert__svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
-                <circle cx="50" cy="50" r="46" fill="currentColor" opacity="0.14"/>
-                <g class="stream-audio-alert__waves" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">
-                    <g class="stream-audio-alert__wave-layer stream-audio-alert__wave-layer--1">
-                        <path [attr.d]="wavePath1"></path>
-                      </g>
-                      
-                      <g class="stream-audio-alert__wave-layer stream-audio-alert__wave-layer--2">
-                        <path [attr.d]="wavePath2"></path>
-                      </g>
-                      
-                      <g class="stream-audio-alert__wave-layer stream-audio-alert__wave-layer--3">
-                        <path [attr.d]="wavePath3"></path>
-                      </g>
-                </g>
-            </svg>
-        </div>
+        <chat-stream-audio-spectrum
+            [volume]="currentVolume"
+            [accentColor]="stylesMap?.get('themeColor')">
+        </chat-stream-audio-spectrum>
     </div>
 
 </div>

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

@@ -393,67 +393,28 @@ textarea:active{
 #streamAudioAlert {
     bottom: 100%;
     width: 100%;
-    min-height: 96px;
+    min-height: var(--chat-footer-stream-button-height);
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: var(--content-background-color);
     position: absolute;
-    padding: 10px 0;
+    padding: var(--chat-footer-stream-button-padding);
+    /* Satinato / vetro: più trasparenza, blur più marcato */
+    background-color: color-mix(in srgb, var(--content-background-color) 34%, transparent);
+    backdrop-filter: blur(20px) saturate(1.2);
+    -webkit-backdrop-filter: blur(20px) saturate(1.2);
+    box-shadow:
+        inset 0 1px 0 rgba(255, 255, 255, 0.28),
+        0 1px 0 rgba(0, 0, 0, 0.05);
 
     &.hideTextReply {
         position: unset;
         min-height: auto;
         padding: 16px 0;
         box-shadow: none;
-    }
-}
-
-.stream-audio-alert__orb {
-    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);
-}
-
-.stream-audio-alert__svg {
-    width: 72px;
-    height: 72px;
-    display: block;
-}
-
-.stream-audio-alert__wave-layer {
-    transform-origin: 50px 50px;
-    transform-box: fill-box;
-    animation: stream-wave-float 1.35s ease-in-out infinite;
-}
-
-.stream-audio-alert__wave-layer--1 {
-    animation-delay: 0s;
-}
-
-.stream-audio-alert__wave-layer--2 {
-    animation-delay: 0.18s;
-}
-
-.stream-audio-alert__wave-layer--3 {
-    animation-delay: 0.36s;
-}
-
-@keyframes stream-wave-float {
-    0%,
-    100% {
-        transform: translateY(0);
-        opacity: 0.85;
-    }
-    50% {
-        transform: translateY(-6px);
-        opacity: 1;
+        backdrop-filter: none;
+        -webkit-backdrop-filter: none;
+        background-color: var(--content-background-color);
     }
 }
 

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

@@ -97,10 +97,8 @@ export class ConversationFooterComponent implements OnInit, OnChanges, OnDestroy
   private voiceAudioSubscription?: Subscription;
   /** Sottoscrizione al volume audio (real-time) dal {@link VoiceService}. */
   private voiceVolumeSubscription?: Subscription;
+  /** Passato a {@link StreamAudioSpectrumComponent} per disegnare la linea spettro. */
   currentVolume = 0;
-  wavePath1 = '';
-  wavePath2 = '';
-  wavePath3 = '';
 
   file_size_limit = FILE_SIZE_LIMIT;
   attachmentTooltip: string = '';
@@ -118,7 +116,6 @@ export class ConversationFooterComponent implements OnInit, OnChanges, OnDestroy
     // this.updateAttachmentTooltip();
   }
 
-
   ngOnChanges(changes: SimpleChanges){
     if(changes['conversationWith'] && changes['conversationWith'].currentValue !== undefined){
       this.conversationHandlerService = this.chatManager.getConversationHandlerByConversationId(this.conversationWith);
@@ -176,40 +173,36 @@ export class ConversationFooterComponent implements OnInit, OnChanges, OnDestroy
     });
     this.voiceVolumeSubscription = this.voiceService.volume$.subscribe((volume) => {
       this.currentVolume = volume;
-      this.updateWave(volume);
     });
     await this.voiceService.startSession();
   }
 
-  async stopVoice() {
+  async stopVoice(options?: { discardInProgressSegment?: boolean }) {
     this.voiceAudioSubscription?.unsubscribe();
     this.voiceAudioSubscription = undefined;
 
     this.voiceVolumeSubscription?.unsubscribe();
     this.voiceVolumeSubscription = undefined;
 
-    await this.voiceService.stopSession();
-  }
-
-  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 +734,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,19 @@
+<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">
+        <defs>
+            <linearGradient [attr.id]="gradientId" x1="12" y1="50" x2="88" y2="50" 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"
+            [attr.stroke]="'url(#' + gradientId + ')'"
+            stroke-width="2.4"
+            stroke-linecap="round"
+            stroke-linejoin="round"/>
+    </svg>
+</div>

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

@@ -0,0 +1,26 @@
+:host {
+  display: block;
+}
+
+.stream-audio-spectrum__orb {
+  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);
+}
+
+.stream-audio-spectrum__svg {
+  width: 72px;
+  height: 72px;
+  display: block;
+}
+
+.stream-audio-spectrum__line {
+  pointer-events: none;
+  filter: drop-shadow(0 0 1px color-mix(in srgb, currentColor 35%, transparent));
+}

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

@@ -0,0 +1,62 @@
+import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+
+/**
+ * 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;
+
+  spectrumLinePath = 'M12,50 L88,50';
+
+  ngOnInit(): void {
+    this.refreshPath();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['volume']) {
+      this.refreshPath();
+    }
+  }
+
+  private refreshPath(): 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 = 12;
+    const x1 = 88;
+    const cy = 50;
+    const segments = 80;
+    const amp = 1.2 + intensity * 16;
+    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(68, Math.max(32, 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.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.ts

@@ -10,6 +10,8 @@ import {
   ViewChild,
 } from '@angular/core';
 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';
 
 /** HAVE_METADATA: metadati già disponibili (tipico audio servito da cache). */
 const HAVE_METADATA = 1;
@@ -41,7 +43,19 @@ export class AudioSyncComponent implements AfterViewInit, OnChanges, OnDestroy {
   private onMetadataLoaded: () => void;
   private onPlaybackEnded: () => void;
 
-  constructor(private readonly cdr: ChangeDetectorRef) {}
+  /** Id univoco per il coordinatore (di solito `message.uid`). */
+  private playbackOwnerId = '';
+  private destroyed = false;
+  private playbackRequested = false;
+  private playbackStarted = false;
+  private streamAbort?: AbortController;
+  private mediaSourceObjectUrl?: string;
+
+  constructor(
+    private readonly cdr: ChangeDetectorRef,
+    private readonly ttsPlayback: TtsAudioPlaybackCoordinator,
+    private readonly globals: Globals,
+  ) {}
 
   /** `false` = messaggio già in storico: niente autoplay / karaoke. Da `message.isJustRecived`. */
   private get skipSyncAnimation(): boolean {
@@ -53,11 +67,14 @@ export class AudioSyncComponent implements AfterViewInit, OnChanges, OnDestroy {
       return;
     }
     if (this.audioRef?.nativeElement && this.timingReady) {
-      this.duration = this.audioRef.nativeElement.duration || 1;
+      const d = this.audioRef.nativeElement.duration;
+      if (Number.isFinite(d) && d > 0) {
+        this.duration = d;
+      }
       this.buildFakeTiming();
       if (this.skipSyncAnimation) {
         this.markAllWordsPast();
-      } else {
+      } else if (this.playbackStarted) {
         this.syncStatesFromCurrentTime();
       }
     }
@@ -66,7 +83,14 @@ export class AudioSyncComponent implements AfterViewInit, OnChanges, OnDestroy {
   ngAfterViewInit(): void {
     const audio = this.audioRef.nativeElement;
 
+    this.playbackOwnerId =
+      (this.message?.uid && String(this.message.uid).trim()) ||
+      `tts-${Date.now()}-${Math.random().toString(36).slice(2, 11)}`;
+
     this.onPlaybackEnded = () => {
+      this.playbackStarted = false;
+      this.cleanupStreaming();
+      this.ttsPlayback.releaseIfCurrent(this.playbackOwnerId);
       if (this.skipSyncAnimation) {
         return;
       }
@@ -78,38 +102,75 @@ export class AudioSyncComponent implements AfterViewInit, OnChanges, OnDestroy {
     };
 
     this.onMetadataLoaded = () => {
-      if (this.timingReady) {
-        return;
+      // La durata potrebbe arrivare tardi (specie con streaming).
+      const d = audio.duration;
+      if (Number.isFinite(d) && d > 0) {
+        this.duration = d;
+      } else if (!this.timingReady) {
+        this.duration = this.estimateDurationSecondsFromText();
       }
+
       this.timingReady = true;
-      this.duration = audio.duration || 1;
       this.buildFakeTiming();
       if (this.skipSyncAnimation) {
         this.markAllWordsPast();
         this.cdr.detectChanges();
         return;
       }
-      this.syncStatesFromCurrentTime();
+      if (this.playbackStarted) {
+        this.syncStatesFromCurrentTime();
+      }
       this.cdr.detectChanges();
-
-      setTimeout(() => {
-        audio.play().catch(() => {
-          this.syncStatesFromCurrentTime();
-          this.cdr.detectChanges();
-        });
-      }, 200);
     };
 
     audio.addEventListener('loadedmetadata', this.onMetadataLoaded);
     audio.addEventListener('ended', this.onPlaybackEnded);
 
-    if (audio.readyState >= HAVE_METADATA) {
-      this.onMetadataLoaded();
+    // Prepara subito le parole (durata stimata) e poi aggiorna quando arriva la metadata reale.
+    this.duration = this.estimateDurationSecondsFromText();
+    this.timingReady = true;
+    this.buildFakeTiming();
+    if (this.skipSyncAnimation) {
+      this.markAllWordsPast();
+      this.cdr.detectChanges();
+      return;
     }
+    this.cdr.detectChanges();
+
+    setTimeout(() => {
+      if (this.playbackRequested || this.destroyed) {
+        return;
+      }
+      this.playbackRequested = true;
+      this.ttsPlayback.requestStart(this.playbackOwnerId, () => {
+        if (this.destroyed) {
+          this.ttsPlayback.releaseIfCurrent(this.playbackOwnerId);
+          return;
+        }
+        this.playbackStarted = true;
+        this.syncStatesFromCurrentTime();
+        this.cdr.detectChanges();
+        this.startPlayback(audio);
+      });
+    }, 200);
   }
 
   ngOnDestroy(): void {
+    this.destroyed = true;
+    this.playbackStarted = false;
+    this.cleanupStreaming();
+
     const audio = this.audioRef?.nativeElement;
+    if (audio) {
+      try {
+        audio.pause();
+        audio.currentTime = 0;
+      } catch {
+        /* ignore */
+      }
+    }
+    this.ttsPlayback.release(this.playbackOwnerId);
+
     if (!audio) {
       return;
     }
@@ -121,6 +182,266 @@ export class AudioSyncComponent implements AfterViewInit, OnChanges, OnDestroy {
     }
   }
 
+  private startPlayback(audio: HTMLAudioElement): void {
+    const src = (this.message as any)?.metadata?.src as string | undefined;
+    if (!src) {
+      this.playbackStarted = false;
+      this.ttsPlayback.releaseIfCurrent(this.playbackOwnerId);
+      this.markAllWordsPast();
+      if (this.message) {
+        this.message.isJustRecived = false;
+      }
+      this.cdr.detectChanges();
+      return;
+    }
+
+    if (this.message?.type === 'tts') {
+      this.startStreamingFromEndpoint(audio, src);
+      return;
+    }
+
+    audio.src = src;
+    try {
+      audio.currentTime = 0;
+    } catch {
+      /* ignore */
+    }
+    audio.play().catch(() => this.handlePlaybackError());
+  }
+
+  private startStreamingFromEndpoint(audio: HTMLAudioElement, endpoint: string): void {
+    this.cleanupStreaming();
+
+    const jwt = this.getJwtToken();
+    const voiceSettings = this.getVoiceSettingsBody(); 
+    const requestBody = this.buildTtsRequestBody(voiceSettings);
+    // <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);
+      return;
+    }
+
+    const MediaSourceCtor = (window as any).MediaSource as typeof MediaSource;
+    const mediaSource = new MediaSourceCtor();
+    const objectUrl = URL.createObjectURL(mediaSource);
+    this.mediaSourceObjectUrl = objectUrl;
+    audio.src = objectUrl;
+
+    const abort = new AbortController();
+    this.streamAbort = abort;
+
+    const onSourceOpen = async () => {
+      mediaSource.removeEventListener('sourceopen', onSourceOpen);
+      try {
+        const headers: Record<string, string> = {
+          'Content-Type': 'application/json',
+          'Authorization': `${jwt}`
+        };
+        
+        const response = await fetch(endpoint, {
+          method: 'POST',
+          headers,
+          body: JSON.stringify(requestBody),
+          signal: abort.signal,
+        });
+        if (!response.ok || !response.body) {
+          throw new Error(`TTS stream request failed (${response.status})`);
+        }
+
+        const headerType = (response.headers.get('content-type') || '').split(';')[0].trim();
+        const mime = (headerType && MediaSourceCtor.isTypeSupported(headerType))
+          ? headerType
+          : 'audio/mpeg';
+
+        if (!MediaSourceCtor.isTypeSupported(mime)) {
+          this.cleanupStreaming();
+          // Fallback: fetch completo e play via blob (no streaming).
+          this.fetchAsBlobAndPlay(audio, endpoint, jwt, requestBody);
+          return;
+        }
+
+        const sourceBuffer = mediaSource.addSourceBuffer(mime);
+        sourceBuffer.mode = 'sequence';
+
+        const reader = response.body.getReader();
+        const queue: Uint8Array[] = [];
+        let doneReading = false;
+        let started = false;
+
+        const tryEndOfStream = () => {
+          if (doneReading && queue.length === 0 && !sourceBuffer.updating) {
+            try {
+              mediaSource.endOfStream();
+            } catch {
+              /* ignore */
+            }
+          }
+        };
+
+        const pump = () => {
+          if (abort.signal.aborted) {
+            return;
+          }
+          if (sourceBuffer.updating) {
+            return;
+          }
+          const chunk = queue.shift();
+          if (!chunk) {
+            tryEndOfStream();
+            return;
+          }
+          try {
+            const ab = chunk.buffer.slice(
+              chunk.byteOffset,
+              chunk.byteOffset + chunk.byteLength,
+            ) as ArrayBuffer;
+            sourceBuffer.appendBuffer(ab);
+          } catch {
+            this.cleanupStreaming();
+            this.fetchAsBlobAndPlay(audio, endpoint, jwt, requestBody);
+          }
+        };
+
+        sourceBuffer.addEventListener('updateend', () => {
+          if (!started && this.playbackStarted && !this.destroyed) {
+            started = true;
+            audio.play().catch(() => this.handlePlaybackError());
+          }
+          pump();
+        });
+
+        // Primo pump (se arrivano subito chunk)
+        pump();
+
+        while (!abort.signal.aborted) {
+          const { value, done } = await reader.read();
+          if (done) {
+            doneReading = true;
+            break;
+          }
+          if (value && value.byteLength > 0) {
+            queue.push(value);
+            pump();
+          }
+        }
+
+        doneReading = true;
+        tryEndOfStream();
+      } catch {
+        if (!abort.signal.aborted) {
+          this.handlePlaybackError();
+        }
+      }
+    };
+
+    mediaSource.addEventListener('sourceopen', onSourceOpen);
+  }
+
+  private handlePlaybackError(): void {
+    this.playbackStarted = false;
+    this.cleanupStreaming();
+    this.ttsPlayback.releaseIfCurrent(this.playbackOwnerId);
+    this.markAllWordsPast();
+    if (this.message) {
+      this.message.isJustRecived = false;
+    }
+    this.cdr.detectChanges();
+  }
+
+  private cleanupStreaming(): void {
+    try {
+      this.streamAbort?.abort();
+    } catch {
+      /* ignore */
+    }
+    this.streamAbort = undefined;
+
+    if (this.mediaSourceObjectUrl) {
+      try {
+        URL.revokeObjectURL(this.mediaSourceObjectUrl);
+      } catch {
+        /* ignore */
+      }
+      this.mediaSourceObjectUrl = undefined;
+    }
+  }
+
+  private getJwtToken(): string | null {
+    const token = (this.globals?.tiledeskToken || this.globals?.jwt || '').trim();
+    return token.length > 0 ? token : null;
+  }
+
+  private getVoiceSettingsBody(): unknown {
+    const raw = (this.message as any)?.metadata?.voiceSettings;
+    if (raw === null || raw === undefined) {
+      return {};
+    }
+    if (typeof raw === 'string') {
+      const s = raw.trim();
+      if (!s) return {};
+      try {
+        return JSON.parse(s);
+      } catch {
+        // se non è JSON valido, invialo come stringa (il backend può gestirlo)
+        return { voiceSettings: raw };
+      }
+    }
+    return raw;
+  }
+
+  private async fetchAsBlobAndPlay(
+    audio: HTMLAudioElement,
+    endpoint: string,
+    jwt: string | null,
+    requestBody: unknown,
+  ): Promise<void> {
+    try {
+      const headers: Record<string, string> = {
+        'Content-Type': 'application/json',
+        'Authorization': `${jwt}`
+      };
+
+      console.log('headers', headers);
+      console.log('requestBody', requestBody);
+
+      const response = await fetch(endpoint, {
+        method: 'POST',
+        headers,
+        body: JSON.stringify(requestBody ?? {}),
+        signal: this.streamAbort?.signal,
+      });
+
+      if (!response.ok) {
+        throw new Error(`TTS request failed (${response.status})`);
+      }
+
+      const blob = await response.blob();
+      if (this.destroyed) {
+        return;
+      }
+
+      const objectUrl = URL.createObjectURL(blob);
+      this.mediaSourceObjectUrl = objectUrl;
+      audio.src = objectUrl;
+      audio.play().catch(() => this.handlePlaybackError());
+    } catch {
+      this.handlePlaybackError();
+    }
+  }
+
+  private buildTtsRequestBody(voiceSettings: unknown): unknown {
+    const text = this.message?.text ?? '';
+    if (
+      voiceSettings &&
+      typeof voiceSettings === 'object' &&
+      !Array.isArray(voiceSettings)
+    ) {
+      return { ...(voiceSettings as Record<string, unknown>), text, streaming: true };
+    }
+    return { voiceSettings, text, streaming: true };
+  }
+
   private markAllWordsPast(): void {
     this.words.forEach((w) => {
       w.state = 'past';
@@ -128,6 +449,18 @@ export class AudioSyncComponent implements AfterViewInit, OnChanges, OnDestroy {
     this.activeIndex = -1;
   }
 
+  private estimateDurationSecondsFromText(): number {
+    const rawWords = (this.message?.text || '')
+      .trim()
+      .split(/\s+/)
+      .filter((w) => w.length > 0);
+    if (rawWords.length === 0) {
+      return 1;
+    }
+    // ~140 WPM → ~0.43s/word
+    return Math.max(1, rawWords.length * 0.43);
+  }
+
   buildFakeTiming(): void {
     const rawWords = (this.message?.text || '')
       .trim()
@@ -176,6 +509,9 @@ export class AudioSyncComponent implements AfterViewInit, OnChanges, OnDestroy {
   }
 
   onTimeUpdate(): void {
+    if (!this.playbackStarted) {
+      return;
+    }
     this.syncStatesFromCurrentTime();
   }
 

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

@@ -0,0 +1,71 @@
+import { Injectable } from '@angular/core';
+
+/**
+ * Garantisce un solo messaggio TTS in riproduzione alla volta.
+ * Se arrivano più messaggi TTS, vengono riprodotti in coda (FIFO) senza interrompere quello corrente.
+ */
+@Injectable({ providedIn: 'root' })
+export class TtsAudioPlaybackCoordinator {
+  private currentOwnerId: string | null = null;
+  private readonly queue: Array<{ ownerId: string; start: () => void }> = [];
+
+  /**
+   * Richiede l'avvio della riproduzione TTS per `ownerId`.
+   * Se non c'è nessun TTS attivo, parte subito; altrimenti viene messo in coda.
+   */
+  requestStart(ownerId: string, start: () => void): void {
+    const id = (ownerId || '').trim();
+    if (!id) {
+      return;
+    }
+    if (this.currentOwnerId === id) {
+      return;
+    }
+    if (this.queue.some((j) => j.ownerId === id)) {
+      return;
+    }
+    if (this.currentOwnerId) {
+      this.queue.push({ ownerId: id, start });
+      return;
+    }
+    this.currentOwnerId = id;
+    try {
+      start();
+    } catch {
+      this.releaseIfCurrent(id);
+    }
+  }
+
+  /** Chiamare a fine riproduzione naturale (`ended`) se questo messaggio era ancora “attivo”. */
+  releaseIfCurrent(ownerId: string): void {
+    const id = (ownerId || '').trim();
+    if (!id) {
+      return;
+    }
+    if (this.currentOwnerId !== id) {
+      // Se era in coda, rimuovilo.
+      const idx = this.queue.findIndex((j) => j.ownerId === id);
+      if (idx !== -1) {
+        this.queue.splice(idx, 1);
+      }
+      return;
+    }
+
+    this.currentOwnerId = null;
+    const next = this.queue.shift();
+    if (!next) {
+      return;
+    }
+    this.currentOwnerId = next.ownerId;
+    try {
+      next.start();
+    } catch {
+      this.releaseIfCurrent(next.ownerId);
+    }
+  }
+
+  /** Distruzione componente o stop esplicito. */
+  release(ownerId: string): void {
+    this.releaseIfCurrent(ownerId);
+  }
+}

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

@@ -100,9 +100,20 @@ export class VoiceService {
     this.startVolumeLoop();
   }
 
-  async stopSession(): Promise<void> {
-    if (this.mediaRecorder?.state === 'recording') {
-      this.mediaRecorder.stop();
+  /**
+   * @param options.discardInProgressSegment — non inviare STT/upload per il segmento WebM corrente (es. interruzione da messaggio in arrivo).
+   */
+  async stopSession(options?: { discardInProgressSegment?: boolean }): Promise<void> {
+    const discard = options?.discardInProgressSegment === true;
+
+    if (this.mediaRecorder) {
+      if (discard) {
+        this.mediaRecorder.onstop = null;
+        this.mediaRecorder.ondataavailable = null;
+      }
+      if (this.mediaRecorder.state === 'recording') {
+        this.mediaRecorder.stop();
+      }
     }
 
     this.mediaRecorder = undefined;
@@ -134,6 +145,23 @@ export class VoiceService {
     this.onRecordingComplete = undefined;
   }
 
+  /**
+   * Scarta il segmento WebM in corso (nessun upload/STT) senza chiudere VAD, mic o sessione.
+   * Lo stream resta in ascolto per il prossimo `onSpeechStart`.
+   */
+  discardCurrentRecordingSegment(): void {
+    if (this.mediaRecorder) {
+      this.mediaRecorder.onstop = null;
+      this.mediaRecorder.ondataavailable = null;
+      if (this.mediaRecorder.state === 'recording') {
+        this.mediaRecorder.stop();
+      }
+    }
+    this.mediaRecorder = undefined;
+    this.audioChunks = [];
+    this.logger.log('[VoiceService] discarded in-progress segment; VAD session unchanged');
+  }
+
   /**
    * 🎧 AUDIO ANALYSER INIT
    */
@@ -161,7 +189,9 @@ export class VoiceService {
         return;
       }
 
-      this.analyser.getByteFrequencyData(this.dataArray);
+      this.analyser.getByteFrequencyData(
+        this.dataArray as Parameters<AnalyserNode['getByteFrequencyData']>[0],
+      );
 
       let sum = 0;
       for (let i = 0; i < this.dataArray.length; i++) {

package/src/app/sass/_variables.scss

@@ -38,6 +38,8 @@
     --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-padding: 10px 0;
     --chat-footer-background-color: #f6f7fb;
     --chat-footer-color: #1a1a1a;
     --chat-footer-border-color-error: #aa0404;

package/src/launch.js

@@ -218,67 +218,76 @@ function loadIframe(tiledeskScriptBaseLocation) {
     iDiv.appendChild(ifrm);
 
     // Funzione helper per caricare iframe con fallback per compatibilità CSP (Wix, etc.)
-    // Usa Blob URL come metodo principale (più compatibile con CSP) con fallback a srcdoc e document.write
-    function loadIframeContent(iframe, htmlContent, baseLocation) {
-        var isLocalhost = baseLocation.includes('localhost');
+    // Priorità: document.write / srcdoc prima della Blob URL. Le Blob URL spesso danno origine opaca
+    // (blob:null): l'iframe non può leggere window.parent.tiledeskSettings → projectid mancante.
+    function loadIframeContent(iframe, htmlContent) {
         var blobUrl = null;
-        
-        // Metodo 1: Blob URL (più compatibile con CSP di Wix e altre piattaforme)
-        // Usa Blob URL come metodo principale perché è meno spesso bloccato da CSP rispetto a srcdoc
+
+        // 1) document.write: iframe stessa origine della pagina host → tiledeskSettings sul parent accessibile
+        try {
+            var cw = iframe.contentWindow;
+            if (cw && cw.document) {
+                cw.document.open();
+                cw.document.write(htmlContent);
+                cw.document.close();
+                return;
+            }
+        } catch (e) {
+            console.warn('[Tiledesk] iframe document.write failed, trying srcdoc/blob:', e);
+        }
+
+        // 2) srcdoc: stessa origine del parent (HTML5); utile se document.write è bloccato
+        if ('srcdoc' in iframe) {
+            try {
+                iframe.srcdoc = htmlContent;
+                return;
+            } catch (e) {
+                console.warn('[Tiledesk] iframe srcdoc failed, trying blob:', e);
+            }
+        }
+
+        // 3) Blob URL (spesso permesso da CSP dove srcdoc/write no; può rompere lettura parent.tiledeskSettings)
         if (typeof Blob !== 'undefined' && typeof URL !== 'undefined' && URL.createObjectURL) {
             try {
                 var blob = new Blob([htmlContent], { type: 'text/html;charset=utf-8' });
                 blobUrl = URL.createObjectURL(blob);
                 iframe.src = blobUrl;
-                
-                // Cleanup del blob URL dopo il caricamento per liberare memoria
+
                 var originalOnload = iframe.onload;
                 iframe.onload = function() {
-                    // Revoca il blob URL dopo un delay per assicurarsi che tutto sia caricato
                     setTimeout(function() {
                         if (blobUrl) {
                             try {
                                 URL.revokeObjectURL(blobUrl);
                                 blobUrl = null;
-                            } catch(e) {
-                                console.warn('Error revoking blob URL:', e);
+                            } catch (err) {
+                                console.warn('Error revoking blob URL:', err);
                             }
                         }
                     }, 1000);
                     if (originalOnload) originalOnload.call(this);
                 };
-                return; // Blob URL impostato con successo
-            } catch(e) {
-                console.warn('Blob URL not available, trying srcdoc:', e);
+                return;
+            } catch (e) {
+                console.warn('Blob URL not available:', e);
             }
         }
-        
-        // Metodo 2: srcdoc (fallback se Blob URL non disponibile)
-        // Skip per localhost (usa document.write per compatibilità sviluppo)
-        if (!isLocalhost && 'srcdoc' in iframe) {
-            try {
-                iframe.srcdoc = htmlContent;
-                return; // srcdoc impostato
-            } catch(e) {
-                console.warn('srcdoc not allowed, trying document.write:', e);
-            }
-        }
-        
-        // Metodo 3: document.write (fallback finale, funziona su localhost e browser vecchi)
-        if (isLocalhost || (iframe.contentWindow && iframe.contentWindow.document)) {
+
+        // 4) Ultimo tentativo document.write (iframe magari non pronto al primo passo)
+        if (iframe.contentWindow && iframe.contentWindow.document) {
             try {
                 iframe.contentWindow.document.open();
                 iframe.contentWindow.document.write(htmlContent);
                 iframe.contentWindow.document.close();
-                return; // document.write completato
-            } catch(e) {
-                console.error('All iframe loading methods failed:', e);
+                return;
+            } catch (e) {
+                console.error('[Tiledesk] All iframe loading methods failed:', e);
             }
         }
     }
     
     // Carica il contenuto dell'iframe con fallback automatico
-    loadIframeContent(ifrm, srcTileDesk, tiledeskScriptBaseLocation);
+    loadIframeContent(ifrm, srcTileDesk);
 
 
 }

package/src/launch_template.js

@@ -219,67 +219,76 @@ function loadIframe(tiledeskScriptBaseLocation) {
     iDiv.appendChild(ifrm);
 
     // Funzione helper per caricare iframe con fallback per compatibilità CSP (Wix, etc.)
-    // Usa Blob URL come metodo principale (più compatibile con CSP) con fallback a srcdoc e document.write
-    function loadIframeContent(iframe, htmlContent, baseLocation) {
-        var isLocalhost = baseLocation.includes('localhost');
+    // Priorità: document.write / srcdoc prima della Blob URL. Le Blob URL spesso danno origine opaca
+    // (blob:null): l'iframe non può leggere window.parent.tiledeskSettings → projectid mancante.
+    function loadIframeContent(iframe, htmlContent) {
         var blobUrl = null;
-        
-        // Metodo 1: Blob URL (più compatibile con CSP di Wix e altre piattaforme)
-        // Usa Blob URL come metodo principale perché è meno spesso bloccato da CSP rispetto a srcdoc
+
+        // 1) document.write: iframe stessa origine della pagina host → tiledeskSettings sul parent accessibile
+        try {
+            var cw = iframe.contentWindow;
+            if (cw && cw.document) {
+                cw.document.open();
+                cw.document.write(htmlContent);
+                cw.document.close();
+                return;
+            }
+        } catch (e) {
+            console.warn('[Tiledesk] iframe document.write failed, trying srcdoc/blob:', e);
+        }
+
+        // 2) srcdoc: stessa origine del parent (HTML5); utile se document.write è bloccato
+        if ('srcdoc' in iframe) {
+            try {
+                iframe.srcdoc = htmlContent;
+                return;
+            } catch (e) {
+                console.warn('[Tiledesk] iframe srcdoc failed, trying blob:', e);
+            }
+        }
+
+        // 3) Blob URL (spesso permesso da CSP dove srcdoc/write no; può rompere lettura parent.tiledeskSettings)
         if (typeof Blob !== 'undefined' && typeof URL !== 'undefined' && URL.createObjectURL) {
             try {
                 var blob = new Blob([htmlContent], { type: 'text/html;charset=utf-8' });
                 blobUrl = URL.createObjectURL(blob);
                 iframe.src = blobUrl;
-                
-                // Cleanup del blob URL dopo il caricamento per liberare memoria
+
                 var originalOnload = iframe.onload;
                 iframe.onload = function() {
-                    // Revoca il blob URL dopo un delay per assicurarsi che tutto sia caricato
                     setTimeout(function() {
                         if (blobUrl) {
                             try {
                                 URL.revokeObjectURL(blobUrl);
                                 blobUrl = null;
-                            } catch(e) {
-                                console.warn('Error revoking blob URL:', e);
+                            } catch (err) {
+                                console.warn('Error revoking blob URL:', err);
                             }
                         }
                     }, 1000);
                     if (originalOnload) originalOnload.call(this);
                 };
-                return; // Blob URL impostato con successo
-            } catch(e) {
-                console.warn('Blob URL not available, trying srcdoc:', e);
-            }
-        }
-        
-        // Metodo 2: srcdoc (fallback se Blob URL non disponibile)
-        // Skip per localhost (usa document.write per compatibilità sviluppo)
-        if (!isLocalhost && 'srcdoc' in iframe) {
-            try {
-                iframe.srcdoc = htmlContent;
-                return; // srcdoc impostato
-            } catch(e) {
-                console.warn('srcdoc not allowed, trying document.write:', e);
+                return;
+            } catch (e) {
+                console.warn('Blob URL not available:', e);
             }
         }
-        
-        // Metodo 3: document.write (fallback finale, funziona su localhost e browser vecchi)
-        if (isLocalhost || (iframe.contentWindow && iframe.contentWindow.document)) {
+
+        // 4) Ultimo tentativo document.write (iframe magari non pronto al primo passo)
+        if (iframe.contentWindow && iframe.contentWindow.document) {
             try {
                 iframe.contentWindow.document.open();
                 iframe.contentWindow.document.write(htmlContent);
                 iframe.contentWindow.document.close();
-                return; // document.write completato
-            } catch(e) {
-                console.error('All iframe loading methods failed:', e);
+                return;
+            } catch (e) {
+                console.error('[Tiledesk] All iframe loading methods failed:', e);
             }
         }
     }
     
     // Carica il contenuto dell'iframe con fallback automatico
-    loadIframeContent(ifrm, srcTileDesk, tiledeskScriptBaseLocation);
+    loadIframeContent(ifrm, srcTileDesk);
 
 
 }

package/deploy_amazon_prod.sh

@@ -1,41 +0,0 @@
-# npm version patch
-version=`node -e 'console.log(require("./package.json").version)'`
-echo "version $version"
-
-npm i
-
-cp src/environments/real_data/environment.prod.ts src/environments/environment.prod.ts
-
-# --build-optimizer=false if localstorage is disabled (webview) appears https://github.com/firebase/angularfire/issues/970
-ng build --configuration="prod" --aot=true
-##--base-href='./v5/' --output-hashing none
-
-### SET HASHING : START ###
-cp ./src/launch_template.js ./dist/browser/launch.js
-node ./src/build_launch.js
-### SET HASHING : END ###
-
-#### FIREBASE #####
-# cd dist
-# # aws s3 sync . s3://tiledesk-widget/v5/latest/
-# aws s3 sync . s3://tiledesk-widget/v5/$version/ --cache-control max-age=300
-# aws s3 sync . s3://tiledesk-widget/v5/ --cache-control max-age=300
-# cd ..
-
-# #### MQTT #####
-cd dist/browser
-# aws s3 sync . s3://tiledesk-widget/v5/latest/
-aws s3 sync . s3://tiledesk-widget/v6/$version/ --cache-control max-age=86400 --exclude='launch.js' #8days
-aws s3 sync . s3://tiledesk-widget/v6/$version/ --cache-control "no-store,no-cache,private" --exclude='*' --include='launch.js'
-aws s3 sync . s3://tiledesk-widget/v6/ --cache-control max-age=86400 --exclude='launch.js' #8days
-aws s3 sync . s3://tiledesk-widget/v6/ --cache-control "no-store,no-cache,private" --exclude='*' --include='launch.js'
-cd ../..
-
-aws  cloudfront create-invalidation --distribution-id E3EJDWEHY08CZZ --paths "/*"
-
-git restore src/environments/environment.prod.ts
-
-echo new version deployed $version on s3://tiledesk-widget/v6
-echo available on https://s3.eu-west-1.amazonaws.com/tiledesk-widget/v6/index.html
-echo https://widget.tiledesk.com/v6/index.html
-echo https://widget.tiledesk.com/v6/$version/index.html