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

package/CHANGELOG.md

@@ -6,9 +6,37 @@
 ### **Copyrigth**: 
 *Tiledesk SRL*
 
+# 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.
+- **added**: `MessageModel.isJustRecived` — set when ingesting messages (MQTT/Firebase `addCommandMessage` for `command.type === "message"`, and default for non-command messages in `addedMessage` / `addedNew`) to distinguish “new in session” vs history.
+- **added**: `chat-audio-sync` for TTS messages — karaoke-style word sync to audio, full `message` input, typography aligned with text bubbles; skips animation when `isJustRecived === false`; after playback ends sets `message.isJustRecived = false` so replays show full text without re-animating.
+- **bug fixed**: `AnalyserNode.getByteFrequencyData` TypeScript error — `Uint8Array` created from an explicit `ArrayBuffer` for correct DOM typings.
+- **bug fixed**: `isStreamAudioActive` no longer derived from per-frame mic level (`volume > 1`), which caused the stream button / active state to flash continuously while listening.
+
+# 5.1.30
+- **bug fixed**: startHidden is not working properly
+
+# 5.1.30-rc3
+- **bug fixed**: bug fix user-typing with human is not available
+
+# 5.1.30-rc2
+- **bug fixed**: bug fix disabled user-typing with human
+
 # 5.1.30-rc1
 - **bug fixed**: startHidden is not working properly
 
+# 5.1.28
+- **bug fixed**: fixed Bot/Human conversation detection by correctly classifying bot replies
+
+# 5.1.27
+- **bug fixed**: centralized fullscreen management on mobile and handled the case of the closed widget that remained fullscreen
+- **changed**: start with authentication if hasCalloutInWidgetConfig is true
+- **changed**: Force authentication if ageChangeVisibilityDesktop or PageChangeVisibilityMobile is OPEN
+- **changed**: Set the default autoStart value to false
+- **added**: Added the open widget loading spinner
+- **changed**: Load the widget without authentication and display the speech bubble
+
 # 5.1.27-rc3
 - **bug fixed**: fixed Bot/Human conversation detection by correctly classifying bot replies
 
@@ -27,42 +55,29 @@
 - **changed**: Hide the resize-widget button when on mobile
 - **added**: added "I'm thinking" when the bot responds
 
-# 5.1.26-rc4
-- **changed**: decoupled callout from signin
+# 5.1.26
+- **bug fixed**: attachment buttons text alignment
 
-# 5.1.26-rc3
-- **changed**: start with authentication if a proactive message has been set, so if a rule has been set on at one chatbot in the project
-
-# 5.1.26-rc2
-- **changed**: start with authentication if hasCalloutInWidgetConfig is true
-
-# 5.1.26-rc1
-- **bug fixed**: improved audio recording/upload flow by ignoring empty recorder chunks, preserving the recorder MIME type when creating the audio blob/file, and uploading audio directly without Base64 conversion
-
-
-# 5.1.25-rc1
+# 5.1.25
 - **bug fixed**: attachment buttons in messages now respect the container max width and wrap/break long labels instead of being clipped
 
-# 5.1.24-rc2
-- **bug fixed**: minor fix in marked pipe to avoid rendering html tags
-
-# 5.1.24-rc1
+# 5.1.24
 - **security**: hardened Markdown link rendering by blocking dangerous protocols (e.g. `javascript:`, `data:`, `vbscript:`) and preventing unsafe links from being rendered as anchors
 - **changed**: refactored `MarkedPipe` to simplify Markdown parsing, improve link rendering via a custom `marked` renderer, and streamline newline handling (`\\n` → `\n`)
 
-# 5.1.20-rc3 
+# 5.1.23
+- **changed**: API for upload a file/iamges
+
+# 5.1.22
+- **changed**: Updated Launch.js for Wix and Shopify by bypassing scrdoc
+
+# 5.1.21 
 - **bug fixed**: saved the widget's size state to local storage (in HP conversations)
 
-# 5.1.20-rc2
-- **changed**: API for upload a file/iamges
+# 5.1.20
 - **changed**: marked pipe do not render /n 
 
-# 5.1.20-rc1
-- **changed**: API for upload a file/iamges
-
 # 5.1.19 
-
-# 5.1.19-rc1 
 - **bug fixed**: show bottom scroll button and unread message badge only when I'm not at the bottom of the page
 - **changed**: allow HTML code to be inserted into messages, but do not parse the code. Ensure coexistence with Markdown.
 - **bug fixed**: after sending a multi-line message, the text area remains open on multiple lines.
@@ -72,7 +87,6 @@
 - **changed**: saved the widget's size state to local storage. The parameter flow is (default → storage → settings → URL)
 
 # 5.1.18
-# 5.1.15-rc3
 - **added**: Implemented Shadow DOM in the text component to isolate HTML and Markdown rendering in a safe and protected context
 - **changed**: Adapted text component styles to support Shadow DOM (removed ::ng-deep, added styles for common markdown elements)
 - **security**: HTML/Markdown content is now rendered in an isolated Shadow DOM, improving security and preventing interference with the rest of the application
@@ -83,12 +97,6 @@
 # 5.1.16
 - **changed**: "close chat" header conversation menu button enabled in chatbot-panel.html 
 
-# 5.1.15-rc2
-- **bug-fixed**: Bug fix for ifame message width
- 
-# 5.1.15-rc1
-- **changed**: Load local translations before remote ones
-
 # 5.1.15 
 - **changed**: Load local translations before remote ones
 
@@ -97,57 +105,22 @@
 
 # 5.1.13 
 - **bug-fixed**: set default widget size
-
-# 5.1.7-rc16
-- **bug-fixed**: set default widget size
-
-# 5.1.7-rc15
-- **bug-fixed**: set the color of the buttons with visibility control to the font color
-
-# 5.1.7-rc14
-- **bug-fixed**: departmentId and departmentName is incorrect in attributes
-
-# 5.1.7-rc13
-- **changed**: Force authentication if ageChangeVisibilityDesktop or PageChangeVisibilityMobile is OPEN
-
-# 5.1.7-rc12
-- **changed**: Force authentication if ageChangeVisibilityDesktop or PageChangeVisibilityMobile is OPEN
-- **changed**: Set the default autoStart value to false
-- **added**: Added the open widget loading spinner
-- **changed**: Load the widget without authentication and display the speech bubble
-
-# 5.1.7-rc11
-- **changed**: set default value autoStart false
-- **added**:added loading spinner
-
-# 5.1.7-rc10
-- **changed**: load widget without authentication and display the balloon
-
-# 5.1.7-rc9
-- **removed**: 'DOMAIN_NOT_ALLOWED' in textarea footer component
-
-# 5.1.7-rc8
-# changes in the branch 
-- **changed**: Load local translations before remote ones
-- **bug-fixed**: set default widget size
 - **changed**: Updated the translations of the tooltips in the footer-component
 - **changed**: Refactored the network-offline component and made it generic for displaying errors (now error-alert.component)
-
-# 5.1.7-rc7
-- **bug-fixed**: button new_conversation always appear. added subscription to conversationAdded
-
-# 5.1.7-rc6
-- **added**: Added MAX_ATTACHMENT_ERROR error message when uploading a file larger than 10 MB
+- **bug-fixed**: set the color of the buttons with visibility control to the font color (setButtonColors function)
 
 # 5.1.12
 - **bug-fixed**: check showEmojiFooterButton to enable/disable emojii
 - **bug-fixed**: markdown is fired as an emojii and blocked by isEmojii check fn
 
+<<<<<<< HEAD
+=======
 # 5.1.7-rc7
 - **bug-fixed**: button new_conversation always appear. added subscription to conversationAdded
 
 # 5.1.7-rc6
 - **added**: Added MAX_ATTACHMENT_ERROR error message when uploading a file larger than 10 MB
+>>>>>>> master-pre
 
 # 5.1.7-rc5
 - **bug-fixed**: bug fixed BUTTON STYLES

package/angular.json

@@ -60,7 +60,9 @@
               "idb",
               "accept-language-parser",
               "file-saver",
-              "dayjs"
+              "dayjs",
+              "onnxruntime-web",
+              "@ricky0123/vad-web"
             ],
             "sourceMap": true,
             "optimization": false,

package/deploy_amazon_beta.sh

@@ -2,16 +2,8 @@
 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 <<<<<------ ########## #
 
@@ -31,17 +23,15 @@ node ./src/build_launch.js
 
 
 # ########## --->>>> FIREBASE folder START <<<<<------ ########## #
-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 ../..
+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 E2V5O0YPR61V8P --paths "/*"
-
-git restore src/environments/environment.pre.ts
+#aws  cloudfront create-invalidation --distribution-id E3EJDWEHY08CZZ --paths "/*"
+cd ..
 
+aws  cloudfront create-invalidation --distribution-id E2V5O0YPR61V8P --paths "/*"
 # 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/deploy_amazon_prod.sh

@@ -0,0 +1,41 @@
+# 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

package/docs/changelog/this-branch.md

@@ -1,3 +1,50 @@
+# Questo branch: UX bot/umano + disaccoppiamento callout
+
+## Contesto
+
+Questo branch migliora il feedback in conversazione e rende il comportamento del callout indipendente dal sign-in del widget.
+
+## Modifiche incluse
+
+- Aggiunto un **badge Bot/Umano** nella vista conversazione.
+  - All'apertura della conversazione analizza **l'ultimo messaggio ricevuto dal server** (escludendo quelli inviati dal client).
+  - Classifica il mittente come `Bot` o `Umano`.
+  - Regola speciale: se l'ultimo evento di sistema rilevante e' `MEMBER_JOINED_GROUP` (handoff verso operatore), la conversazione viene classificata come **Umano**.
+
+- Aggiunto il feedback temporaneo **"sto pensando..."** dopo l'invio del messaggio da parte del client.
+  - Mostrato solo quando la conversazione e' classificata come **Bot**.
+  - Nascosto alla prima risposta server, con durata minima visibile di 5 secondi.
+
+- Rimossa l'implementazione temporanea del toast "ciao" nel footer e relativo wiring.
+
+- Abilitato il percorso di avvio widget per i casi guidati da bot quando sono presenti `botsRules`.
+
+## Disaccoppiamento callout (step completati)
+
+- **Step 1**: rimossa la dipendenza da `g.senderId` nel rendering del componente callout in `app.component.html`.
+  - Prima: render solo con `g.senderId && !g.isOpenNewMessage`
+  - Dopo: render con `!g.isOpenNewMessage`
+
+- **Step 2**: scheduling del callout al caricamento delle impostazioni widget in `AppComponent`.
+  - Aggiunto `scheduleCalloutFromSettings()` basato su `g.calloutTimer`.
+  - Invocato subito dopo la disponibilita' delle settings (non legato al login).
+  - Aggiunta la pulizia del timeout in `ngOnDestroy()`.
+
+- **Step 3**: introdotte precedenze UI e rimossa la duplicazione dello scheduling callout.
+  - Aggiunta guardia `canShowCalloutNow()` in `AppComponent`:
+    - widget chiuso
+    - nessuna preview nuovo messaggio attiva
+    - stato callout abilitato
+    - callout presente nella configurazione widget
+  - Aggiornato `showCallout()` per aprire il callout solo quando le guardie passano e il componente esiste.
+  - Rimosso il timer interno (`openIfCallOutTimer`) da `EyeeyeCatcherCardComponent` per evitare doppi trigger.
+
+## Comportamento atteso dopo questo branch
+
+- Il callout puo' essere innescato da configurazione anche senza sign-in.
+- Il callout non compare quando il widget e' aperto o quando la preview nuovo messaggio e' attiva.
+- La UI della conversazione indica chiaramente se l'ultimo responder e' bot o umano.
+- "Sto pensando..." compare solo nelle conversazioni bot e ha un comportamento prevedibile.
 # This branch: identificazione bot o umano
 
 ## Obiettivo

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@chat21/chat21-web-widget",
   "author": "Tiledesk SRL",
-  "version": "5.1.30-rc1",
+  "version": "5.1.32-rc1",
   "license": "MIT",
   "homepage": "https://www.tiledesk.com",
   "repository": {
@@ -10,6 +10,7 @@
   },
   "scripts": {
     "ng": "ng",
+    "copy-onnx-wasm": "mkdir -p src/assets/onnx && cp node_modules/onnxruntime-web/dist/ort-wasm-simd-threaded.mjs node_modules/onnxruntime-web/dist/ort-wasm-simd-threaded.wasm src/assets/onnx/",
     "start": "ng serve",
     "build": "ng build",
     "test": "ng test",
@@ -32,6 +33,7 @@
     "@ctrl/ngx-emoji-mart": "^9.2.0",
     "@ngx-translate/core": "^16.0.4",
     "@ngx-translate/http-loader": "^16.0.1",
+    "@ricky0123/vad-web": "^0.0.30",
     "accept-language-parser": "^1.5.0",
     "bootstrap": "^5.1.3",
     "dayjs": "^1.11.7",
@@ -40,6 +42,7 @@
     "humanize-duration-ts": "^2.1.1",
     "marked": "^16.3.0",
     "ngx-logger": "^5.0.11",
+    "onnxruntime-web": "^1.24.3",
     "replace": "^1.2.2",
     "rxjs": "^7.8.2",
     "source-map-explorer": "^2.5.3",

package/src/app/app.component.ts

@@ -116,7 +116,7 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
   errorMessage: string = '';
   errorKeyMessage: string = null;
   errorParams: Record<string, any> = {};
-
+  
   private logger: LoggerService = LoggerInstance.getInstance();
   constructor(
     private el: ElementRef,
@@ -526,7 +526,6 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
                     this.g.onPageChangeVisibilityMobile === 'open' ||
                     (Array.isArray(this.g.botsRules) && this.g.botsRules.length > 0)
                     // || this.g.hasCalloutInWidgetConfig;
-                console.log('[APP-COMP] shouldAutoAuthenticate', shouldAutoAuthenticate, startHidden)
                 if (shouldAutoAuthenticate) {
                     that.authenticate();
                     if(startHidden){ that.hideWidget(); }

package/src/app/app.module.ts

@@ -25,6 +25,7 @@ import { InfoMessageComponent } from './component/message/info-message/info-mess
 import { HtmlComponent } from './component/message/html/html.component';
 import { FrameComponent } from './component/message/frame/frame.component';
 import { AudioComponent } from './component/message/audio/audio.component';
+import { AudioSyncComponent } from './component/message/audio-sync/audio-sync.component';
 import { UserTypingComponent } from './../chat21-core/utils/user-typing/user-typing.component';
 /** MESSAGE ATTACHMENTS COMPONENTS */
 import { MessageAttachmentComponent } from './component/message-attachment/message-attachment.component';
@@ -136,6 +137,11 @@ import { Rules } from './utils/rules';
 import { ScriptService } from 'src/chat21-core/providers/scripts/script.service';
 import { CarouselComponent } from './component/message/carousel/carousel.component';
 import { BrandService } from './providers/brand.service';
+import { OpenAiVoiceProviderService } from './providers/voice/STT&TTS/openai-voice.provider';
+import {
+  SpeechToTextProvider,
+  TextToSpeechProvider,
+} from './providers/voice/STT&TTS/speech-provider.abstract';
 import { ErrorAlertComponent } from './component/error-alert/error-alert.component';
 import { ConfirmCloseComponent } from './modals/confirm-close/confirm-close.component';
 
@@ -300,6 +306,7 @@ export function uploadFactory(http: HttpClient, appConfig: AppConfigService, app
     LinkButtonComponent,
     TextButtonComponent,
     AudioComponent,
+    AudioSyncComponent,
     UserTypingComponent,
     /**DIRECTIVES */
     HtmlEntitiesEncodePipe,
@@ -405,6 +412,8 @@ export function uploadFactory(http: HttpClient, appConfig: AppConfigService, app
     WaitingService,
     ScriptService,
     BrandService,
+    { provide: SpeechToTextProvider, useExisting: OpenAiVoiceProviderService },
+    { provide: TextToSpeechProvider, useExisting: OpenAiVoiceProviderService },
     provideHttpClient(withInterceptorsFromDi())
   ],
   bootstrap: [AppComponent]

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

@@ -64,7 +64,9 @@
         [nameUserTypingNow]="nameUserTypingNow"
         [typingLocation]="g?.typingLocation"
         [showThinkingMessage]="showThinkingMessage"
+        [lastServerSenderKind]="lastServerSenderKind"
         [fullscreenMode]="g?.fullscreenMode"
+        [isStreamAudioActive]="isStreamAudioActive"
         [translationMap]="translationMapContent"
         [stylesMap]="stylesMap"
         (onBeforeMessageRender)="onBeforeMessageRenderFN($event)"
@@ -131,6 +133,7 @@
             [showAttachmentFooterButton]="g?.showAttachmentFooterButton"
             [showEmojiFooterButton]="g?.showEmojiFooterButton"
             [showAudioRecorderFooterButton]="g?.showAudioRecorderFooterButton"
+            [showAudioStreamFooterButton]="g?.showAudioStreamFooterButton"
             [hideTextAreaContent]="(g?.singleConversation && hideTextAreaContent) || (isConversationArchived && !g?.allowReopen)"
             [isConversationArchived]="isConversationArchived"
             [hideTextReply]="hideFooterTextReply"
@@ -149,6 +152,7 @@
             (onChangeTextArea)="onChangeTextArea($event)"
             (onAttachmentFileButtonClicked)="onAttachmentFileButtonClicked($event)"
             (onNewConversationButtonClicked)="onNewConversationButtonClickedFN($event)"
+            (onStreamAudioActiveChange)="onStreamAudioActiveChange($event)"
             (onCloseChatButtonClicked)="onCloseChatButtonClickedFN($event)">
         </chat-conversation-footer>
 

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

@@ -161,6 +161,10 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
   membersConversation = ['SYSTEM'];
   // ========== end:: typying =======
 
+  // ========== begin:: stream audio ======= //
+  public isStreamAudioActive = false;
+  // ========== end:: stream audio ======= //
+
   @ViewChild(ConversationFooterComponent) conversationFooter: ConversationFooterComponent
   @ViewChild(ConversationContentComponent) conversationContent: ConversationContentComponent
   conversationHandlerService: ConversationHandlerService
@@ -1399,6 +1403,10 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
     this.onNewConversationButtonClicked.emit()
   }
 
+  /** CALLED BY: conv-footer streaming audio button */
+  onStreamAudioActiveChange(event: boolean){
+    this.isStreamAudioActive = event
+  }
   /** CALLED BY: conv-footer component */
   onCloseChatButtonClickedFN(event){
     this.logger.debug('[CONV-COMP] onCloseChatButtonClicked::::', event)

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

@@ -22,7 +22,7 @@
                       <div *ngFor="let message of messages; let first = first; let last = last; let i = index" tabindex="1521" class="rowMsg">
     
                           <!-- message SENDER:: -->
-                          <div role="messaggio" *ngIf="messageType(MESSAGE_TYPE_MINE, message)" class="msg_container base_sent">
+                          <div role="messaggio" *ngIf="messageType(MESSAGE_TYPE_MINE, message) && (!isStreamAudioActive && !message.isJustRecived)" class="msg_container base_sent">
                           
                             <!--backgroundColor non viene ancora usato -->
                             <!-- class="messages msg_sent slide-in-right" -->
@@ -143,7 +143,7 @@
                         </user-typing>
                       </div>
 
-                      <div *ngIf="showThinkingMessage" class="msg_container base_receive thinking_receive">
+                      <div *ngIf="showThinkingMessage && lastServerSenderKind === 'bot'" class="msg_container base_receive thinking_receive">
                         <user-typing class="loading thinking-dots"
                           [color]="stylesMap?.get('iconColor')"
                           [translationMap]="translationMap"

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

@@ -24,7 +24,9 @@ export class ConversationContentComponent implements OnInit {
   @Input() nameUserTypingNow: string;
   @Input() typingLocation: string;
   @Input() showThinkingMessage: boolean;
+  @Input() lastServerSenderKind: 'bot' | 'human' | null;
   @Input() fullscreenMode: boolean;
+  @Input() isStreamAudioActive: boolean;
   @Input() translationMap: Map< string, string>;
   @Input() stylesMap: Map<string, string>;
   @Output() onBeforeMessageRender = new EventEmitter();

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

@@ -12,6 +12,28 @@
         <div tabindex="-1" class="alertText">{{translationMap.get('EMOJI_NOT_ELLOWED')}}</div>
     </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>
 
 <div class="textarea-container-wrapper" *ngIf="!hideTextAreaContent && !hideTextReply">
@@ -126,6 +148,26 @@
             <div class="clear"></div>
         </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

@@ -84,6 +84,30 @@
     border-radius: 50%;
 }
 
+/** Stream audio: cerchio pieno, glyph bianco su sfondo iconColor (stylesMap) */
+.chat21-stream-button.chat21-textarea-button {
+    width: 36px;
+    height: 36px;
+    min-width: 36px;
+    border-radius: 50%;
+    box-sizing: border-box;
+    flex-shrink: 0;
+    color: #ffffff;
+
+    .chat21-stream-button__icon svg {
+        width: 20px;
+        height: 20px;
+        path {
+            fill: #ffffff;
+        }
+    }
+
+    &.chat21-textarea-button span svg:hover {
+        background: rgba(255, 255, 255, 0.2) !important;
+        border-radius: 50%;
+    }
+}
+
 textarea,
 textarea:visited,
 textarea:focus,
@@ -366,6 +390,73 @@ textarea:active{
     }
 }
 
+#streamAudioAlert {
+    bottom: 100%;
+    width: 100%;
+    min-height: 96px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--content-background-color);
+    position: absolute;
+    padding: 10px 0;
+
+    &.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;
+    }
+}
+
 #textAlert{
     bottom: 100%;
     width: 100%;