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

package/CHANGELOG.md

@@ -6,6 +6,57 @@
 ### **Copyrigth**: 
 *Tiledesk SRL*
 
+# 5.1.32-rc13
+- **changed**: stream audio footer UI — stream button expands into a “Terminate” pill with animated level bars driven by mic intensity; recorder icon hidden while streaming; textarea width adjusted while streaming
+- **changed**: `StreamAudioSpectrum` — consolidated stream spectrum + stream button visuals into a single component with improved silence vs speaking handling and volume-driven bar heights
+- **changed**: conversation layout while streaming — adjusted received bubble sizing (`fullSizeMessage`) and loading spinner spacing (`fullSize`) for full-width stream mode
+- **added**: VAD speech state events (`speechStart$`, `speechEnd$`) to improve UI/state transitions around user speech
+
+
+# 5.1.32-rc12
+- **changed**: voice acquisition blocking during TTS response — pause VAD after user speech ends until the TTS response cycle completes; added safety timeout and `isAcquisitionBlocked$` to drive UI (e.g. greyed spectrum)
+- **chore**: version bump to `5.1.32-rc12`
+
+# 5.1.32-rc11
+- **added**: global TTS stop — `TtsAudioPlaybackCoordinator.stopAll()` + `stopAllPlayback$` to abort current and queued TTS playback and reveal full message text
+- **changed**: stop TTS playback when closing stream audio
+- **chore**: version bump to `5.1.32-rc11`
+
+# 5.1.32-rc10
+- **added**: TTS playback state (`isTTSPlaying$`) to coordinate voice UI and suppress mic segment emission while the bot is speaking
+- **changed**: stream spectrum theme color turns grey while TTS is playing
+
+
+# 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 stop API (`TtsAudioPlaybackCoordinator.stopAll()` + `stopAllPlayback$`) 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)
+
+# 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.
 - **added**: Stream audio UI in conversation footer — toggle, real-time volume stream and animated waveform (`volume$`); mic session lifecycle wired to upload segments on speech end.

package/deploy_amazon_beta.sh

@@ -2,8 +2,16 @@
 version=`node -e 'console.log(require("./package.json").version)'`
 echo "version $version"
 
+npm i
+
+cp src/environments/real_data/environment.pre.ts src/environments/environment.pre.ts
+
 ng build --configuration="pre" --aot=true --base-href
 
+### SET HASHING : START ###
+cp ./src/launch_template.js ./dist/browser/launch.js
+node ./src/build_launch.js
+### SET HASHING : END ###
 
 # ########## --->>>> NATIVE-MQTT folder START <<<<<------ ########## #
 
@@ -23,15 +31,17 @@ ng build --configuration="pre" --aot=true --base-href
 
 
 # ########## --->>>> FIREBASE folder START <<<<<------ ########## #
-cd dist
-aws s3 sync . s3://tiledesk-widget-pre/v5/$version/ --cache-control max-age=300
-aws s3 sync . s3://tiledesk-widget-pre/v5/ --cache-control max-age=300
-cd ..
-
-#aws  cloudfront create-invalidation --distribution-id E3EJDWEHY08CZZ --paths "/*"
-cd ..
+cd dist/browser
+aws s3 sync . s3://tiledesk-widget-pre/v5/$version/ --cache-control max-age=300 --exclude='launch.js' #7days
+aws s3 sync . s3://tiledesk-widget-pre/v5/$version/ --cache-control "no-store,no-cache,private" --exclude='*' --include='launch.js'
+aws s3 sync . s3://tiledesk-widget-pre/v5/ --cache-control max-age=300 --exclude='launch.js' #7days
+aws s3 sync . s3://tiledesk-widget-pre/v5/ --cache-control "no-store,no-cache,private" --exclude='*' --include='launch.js'
+cd ../..
 
 aws  cloudfront create-invalidation --distribution-id E2V5O0YPR61V8P --paths "/*"
+
+git restore src/environments/environment.pre.ts
+
 # echo new version deployed $NEW_VER/$NEW_BUILD/ on s3://tiledesk-widget-pre/v2
 echo new version deployed $version/ on s3://tiledesk-widget-pre/v5 and s3://tiledesk-widget-pre/v5/$version/
 echo available on https://s3.eu-west-1.amazonaws.com/tiledesk-widget-pre/v5/index.html

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-rc1",
+  "version": "5.1.32-rc13",
   "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

@@ -251,7 +251,8 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
       'EMOJI_NOT_ELLOWED',
       'ATTACHMENT',
       'EMOJI',
-      'CLOSE_CHAT'
+      'CLOSE_CHAT',
+      'CLOSE'
     ];
 
     const keysContent = [
@@ -827,6 +828,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 +1419,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,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]="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,7 +147,9 @@
 
                       <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')"
+                          [class.fullSize]="isStreamAudioActive"
                           [translationMap]="translationMap"
                           [idUserTypingNow]="idUserTypingNow"
                           [nameUserTypingNow]="nameUserTypingNow">

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

@@ -27,6 +27,10 @@
     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 +240,11 @@
                         height: fit-content;
                         width: auto;
 
+                        &.fullSizeMessage {
+                            max-width: 100%;
+                            margin: auto 0 auto 0 !important;
+                        }
+
                     }
                     
 
@@ -270,6 +279,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

@@ -13,26 +13,12 @@
     </div>
 
     <!-- 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>
-    </div>
+    <!-- <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'">
+        <chat-stream-audio-spectrum
+            [volume]="currentVolume"
+            [accentColor]="isBotSpeaking ? '#b0b0b0' : stylesMap?.get('themeColor')">
+        </chat-stream-audio-spectrum>
+    </div> -->
 
 </div>
 
@@ -85,7 +71,7 @@
 
 
 
-        <div *ngIf="!isStopRec" class="visible-text-area" [class.hasError]="showAlertEmoji" [class.disabled] = "( isConversationArchived || hideTextReply)? true : null">
+        <div *ngIf="!isStopRec" class="visible-text-area" [class.stream-active]="isStreamAudioActive" [class.hasError]="showAlertEmoji" [class.disabled] = "( isConversationArchived || hideTextReply)? true : null">
             <!-- isFilePendingToUpload || -->
         <textarea 
             [attr.disabled] = "(hideTextReply)? true : null"
@@ -117,7 +103,7 @@
         </div>
 
         <!-- ICON REC -->
-        <div *ngIf="showAudioRecorderFooterButton && !textInputTextArea" tabindex="-1" class="chat21-audio-button" [class.active]="isStopRec" id="chat21-button-rec">
+        <div *ngIf="showAudioRecorderFooterButton && !textInputTextArea && !isStreamAudioActive" tabindex="-1" class="chat21-audio-button" [class.active]="isStopRec" id="chat21-button-rec">
             <chat-audio-recorder
                 (startRecordingEvent)="onStartRecording()"
                 (deleteRecordingEvent)="onDeleteRecording()"
@@ -126,8 +112,24 @@
                 [stylesMap]="stylesMap">
             </chat-audio-recorder>
         </div>
+
+        <!-- ICON STREAM / CHIUDI STREAM (cerchio, icone bianche su iconColor) -->
+        <div *ngIf="showAudioStreamFooterButton" tabindex="-1" id="chat21-button-stream"
+            class="chat21-textarea-button chat21-stream-button"
+            [class.active]="isStreamAudioActive || (!textInputTextArea && !hideTextReply)"
+            [class.chat21-stream-button--expanded]="isStreamAudioActive"
+            (click)="onStreamPressed($event)" [attr.aria-label]="isStreamAudioActive ? (translationMap?.get('CLOSE') || 'Chiudi stream') : (translationMap?.get('STREAM_AUDIO') || 'Stream audio')"
+            [ngStyle]="{ 'background-color': stylesMap?.get('iconColor') || stylesMap?.get('themeColor') }">
+            <chat-stream-audio-spectrum
+                mode="button"
+                [active]="isStreamAudioActive"
+                [volume]="currentVolume"
+                [translationMap]="translationMap">
+            </chat-stream-audio-spectrum>
+        </div>
     </div>
 
+
     <div class="close-chat-container" *ngIf="closeChatInConversation">
         <button tabindex="1040" aflistconv #aflistconv  class="c21-button-primary c21-close" (click)="onCloseChat($event)" [ngStyle]="{'background-color': stylesMap.get('themeColor'), 'border-color': stylesMap.get('themeColor'), 'color': stylesMap?.get('foregroundColor')}">
             <span class="v-align-center">
@@ -149,25 +151,6 @@
         </button>
     </div>
 
-    <!-- ICON STREAM / CHIUDI STREAM (cerchio, icone bianche su iconColor) -->
-    <div *ngIf="showAudioStreamFooterButton" tabindex="-1" id="chat21-button-stream"
-        class="chat21-textarea-button chat21-stream-button" [class.active]="isStreamAudioActive || (!textInputTextArea && !hideTextReply)"
-        (click)="onStreamPressed($event)" [attr.aria-label]="isStreamAudioActive ? (translationMap?.get('CLOSE') || 'Chiudi stream') : (translationMap?.get('STREAM_AUDIO') || 'Stream audio')"
-        [ngStyle]="{ 'background-color': stylesMap?.get('iconColor') || stylesMap?.get('themeColor') }">
-        <span class="v-align-center chat21-stream-button__icon" *ngIf="!isStreamAudioActive">
-            <svg role="img" xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 30 30" fill="#ffffff" aria-hidden="true" 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="v-align-center chat21-stream-button__icon" *ngIf="isStreamAudioActive">
-            <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#ffffff" aria-hidden="true">
-                <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/>
-            </svg>
-        </span>
-    </div>
 </div>
 
 

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

@@ -9,6 +9,7 @@
     justify-content: space-between;
     gap: 8px;
 }
+
 .close-chat-container{
     display: flex;
     flex-direction: column;
@@ -42,6 +43,10 @@
     &.hasError{
         box-shadow: 0 0 0 1px var(--chat-footer-border-color-error) inset;
     }
+
+    &.stream-active {
+        width: 50%;
+    }
 }
 
 .chat21-textarea-button {
@@ -93,6 +98,10 @@
     box-sizing: border-box;
     flex-shrink: 0;
     color: #ffffff;
+    transition:
+        width 180ms ease,
+        border-radius 180ms ease,
+        padding 180ms ease;
 
     .chat21-stream-button__icon svg {
         width: 20px;
@@ -106,6 +115,22 @@
         background: rgba(255, 255, 255, 0.2) !important;
         border-radius: 50%;
     }
+
+    &.chat21-stream-button--expanded {
+        width: auto;
+        // min-width: 150px;
+        max-width: 100%;
+        border-radius: 999px;
+        padding: 0 14px;
+        gap: 12px;
+        justify-content: center;
+
+        // stop the circle-hover background from looking odd on pill
+        &.chat21-textarea-button span svg:hover {
+            background: transparent !important;
+            border-radius: 0;
+        }
+    }
 }
 
 textarea,
@@ -393,67 +418,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);
     }
 }