@chat21/chat21-web-widget 5.1.32-rc2 → 5.1.32-rc4

package/CHANGELOG.md

@@ -6,8 +6,18 @@
 ### **Copyrigth**: 
 *Tiledesk SRL*
 
+# 5.1.32-rc4
+- **added**: Pulsante “chiudi stream” (`.close-stream-button`) — offset del contenuto e del foglio in fullscreen usando `--chat-footer-stream-button-height` solo mentre lo stream è in ascolto (`isStreamAudioActive`); variabili in `_variables.scss`.
+- **added**: `VoiceService.discardCurrentRecordingSegment()` — in arrivo un messaggio da altro mittente durante lo stream, si scarta il segmento WebM corrente (nessun upload) senza chiudere mic/VAD; `interruptStreamDueToPeerMessage()` nel footer non spegne più `isStreamAudioActive`.
+- **changed**: `#streamAudioAlert` — fascia superiore al footer con effetto vetro satinato (`backdrop-filter`, `color-mix` semi-trasparente).
+
+# 5.1.32-rc3
+- **changed**: `nginx.conf` (immagine Docker) — tipi MIME espliciti per `.mjs`, `.wasm`, `.onnx` e `default_type` a livello `http` (evita `text/plain` su moduli ONNX/VAD dietro deploy containerizzato).
+- **chore**: rimossi script di deploy Amazon beta/prod deprecati dal repository.
+
 # 5.1.32-rc2
 - **bug fixed**: minor streaming icon UI fixed
+- **changed**: Refactor UI pulsante stream audio nel conversation footer (layout / classi).
 
 # 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/nginx.conf

@@ -5,18 +5,38 @@ events {
 }
 
 http {
+    include /etc/nginx/mime.types;
+    default_type application/octet-stream;
+
     server {
         listen 80;
         server_name  localhost;
 
         root   /usr/share/nginx/html;
         index  index.html index.htm;
-        include /etc/nginx/mime.types;
 
         gzip on;
         gzip_min_length 1000;
         gzip_proxied expired no-cache no-store private auth;
-        gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
+        gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript application/wasm;
+
+        # ONNX Runtime (.mjs), WASM e modelli VAD: il browser rifiuta moduli ES con Content-Type: text/plain
+        location ~* \.mjs$ {
+            root /usr/share/nginx/html;
+            default_type application/javascript;
+            charset utf-8;
+            add_header Cache-Control "public, max-age=31536000, immutable";
+        }
+        location ~* \.wasm$ {
+            root /usr/share/nginx/html;
+            default_type application/wasm;
+            add_header Cache-Control "public, max-age=31536000, immutable";
+        }
+        location ~* \.onnx$ {
+            root /usr/share/nginx/html;
+            default_type application/octet-stream;
+            add_header Cache-Control "public, max-age=31536000, immutable";
+        }
 
         location / {
             try_files $uri $uri/ /index.html;

package/package.json

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

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.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.scss

@@ -393,19 +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;
+        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

@@ -181,14 +181,30 @@ export class ConversationFooterComponent implements OnInit, OnChanges, OnDestroy
     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();
+    await this.voiceService.stopSession(options);
+  }
+
+  /**
+   * 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);
+    }
   }
 
   updateWave(volume: number) {

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/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