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

package/.github/workflows/docker-community-push-latest.yml

@@ -1,10 +1,10 @@
 name: Docker Image Community latest CI
 
-on:	
-  push:	 
+on:  
+  push:  
     branches: [ master ]
-  pull_request:	
-    branches: [ master ]	
+  pull_request:  
+    branches: [ master ]  
 
 jobs:
   push_to_registry:
@@ -12,12 +12,22 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-    - uses: actions/checkout@v2	     
-      name: Check out the repo
-    - uses: docker/build-push-action@v1
-      with:	    
-        username: ${{ secrets.DOCKERHUB_USERNAME }}
-        password: ${{ secrets.DOCKERHUB_TOKEN }}
-        repository: chat21/chat21-web-widget
-        push: true
-        tags: latest
+      - name: Check out the repo
+        uses: actions/checkout@v2
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+
+      - name: Log in to Docker Hub
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Build and push multiarch Docker image
+        uses: docker/build-push-action@v3
+        with:
+          context: .
+          push: true
+          platforms: linux/amd64,linux/arm64
+          tags: chat21/chat21-web-widget:latest

package/.github/workflows/docker-image-tag-community-tag-push.yml

@@ -3,20 +3,30 @@ name: Publish Docker Community image tags
 on:
   push:
     tags:
-      - '**'           # Push events to every tag including hierarchical tags like
-jobs:
+      - '**'  # Trigger su qualsiasi tag
 
+jobs:
   push_to_registry:
     name: Push Docker image to Docker Hub
     runs-on: ubuntu-latest
+
     steps:
-     - name: Check out the repo
-       uses: actions/checkout@v2
-     - name: Push to Docker Hub
-       uses: docker/build-push-action@v1
-       with:
-        username: ${{ secrets.DOCKERHUB_USERNAME }}
-        password: ${{ secrets.DOCKERHUB_TOKEN }}
-        repository: chat21/chat21-web-widget
-        push: true
-        tag_with_ref: true
+      - name: Check out the repo
+        uses: actions/checkout@v2
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+
+      - name: Log in to Docker Hub
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Build and push multiarch Docker image
+        uses: docker/build-push-action@v3
+        with:
+          context: .
+          push: true
+          platforms: linux/amd64,linux/arm64
+          tags: chat21/chat21-web-widget:${{ github.ref_name }}

package/CHANGELOG.md

@@ -6,11 +6,28 @@
 ### **Copyrigth**: 
 *Tiledesk SRL*
 
+# 5.1.32-rc2
+- **bug fixed**: minor streaming icon UI fixed
+
+# 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.28
-- **bug fixed**: header option menu is deactivated on mobile
+# 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
@@ -22,8 +39,22 @@
 - **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
+
+# 5.1.27-rc2
+- **bug fixed**: centralized fullscreen management on mobile and handled the case of the closed widget that remained fullscreen
+
+# 5.1.27-rc1
+- **added**: closeChatInConversation parameters
+- **added**: close chat button under textarea footer component
+
+# 5.1.26-rc6
 - **changed**: mobile always opens fullscreen and ignores legacy stored size”.
 - **changed**: changed user-typing 
+
+# 5.1.26-rc5
 - **changed**: Hide the resize-widget button when on mobile
 - **added**: added "I'm thinking" when the bot responds
 
@@ -85,6 +116,14 @@
 - **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/Dockerfile

@@ -1,7 +1,7 @@
 ### STAGE 1: Build ###
 
 # We label our stage as ‘builder’
-FROM node:20.12.2-alpine3.19 as builder
+FROM --platform=$BUILDPLATFORM node:20.12.2-alpine3.19 as builder
 
 COPY package.json package-lock.json ./
 
@@ -15,12 +15,11 @@ COPY . .
 
 ## Build the angular app in production mode and store the artifacts in dist folder
 
-RUN npx ng build --configuration="prod" --output-path=dist --base-href=./ --output-hashing=none
 
+RUN npx ng build --configuration="prod" --output-path=dist --base-href=./ --output-hashing=none
 
 ### STAGE 2: Setup ###
-
-FROM nginx:1.14.1-alpine
+FROM --platform=$BUILDPLATFORM nginx:1.14.1-alpine
 
 ## Copy our default nginx config
 COPY nginx.conf /etc/nginx/nginx.conf
@@ -33,4 +32,4 @@ COPY --from=builder /ng-app/dist/browser /usr/share/nginx/html
 
 RUN echo "Chat21 Web Widget Started!!"
 
-CMD ["/bin/sh",  "-c",  "envsubst < /usr/share/nginx/html/widget-config-template.json > /usr/share/nginx/html/widget-config.json && exec nginx -g 'daemon off;'"]
+CMD ["/bin/sh", "-c", "envsubst < /usr/share/nginx/html/widget-config-template.json > /usr/share/nginx/html/widget-config.json && exec nginx -g 'daemon off;'"]

package/angular.json

@@ -44,7 +44,8 @@
               "src/environments/real_data/widget-config-docker.json",
               "src/environments/real_data/widget-config-native-mqtt.json",
               "src/environments/real_data/widget-config-native-prod.json",
-              "src/environments/real_data/widget-config-aws-stage.json"
+              "src/environments/real_data/widget-config-aws-stage.json",
+              "src/environments/real_data/widget-config-aws-aruba.json"
             ],
             "styles": [
               "src/app/sass/styles.scss"
@@ -59,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,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/docs/changelog/this-branch.md

@@ -45,3 +45,39 @@ Questo branch migliora il feedback in conversazione e rende il comportamento del
 - 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
+
+In questo branch e' stata introdotta una logica esplicita per capire, all'apertura della conversazione, se l'ultimo responder lato server e' un **bot** oppure un **umano**.
+
+## Come viene fatta l'identificazione
+
+- La valutazione parte dai messaggi gia' caricati in conversazione.
+- Viene cercato l'**ultimo messaggio ricevuto dal server** (non inviato dal client corrente).
+- Quel messaggio viene classificato con una funzione dedicata (`classifyMessageSenderKind`) che usa piu' segnali:
+  - `attributes.flowAttributes.chatbot_id` (quando presente indica bot)
+  - pattern del mittente (es. `senderId` con prefisso bot, quando applicabile)
+  - informazioni del mittente (`sender_fullname` e metadati associati)
+
+## Regola speciale per messaggi di sistema
+
+Se l'ultimo messaggio utile e' di tipo `system`, viene fatto un controllo aggiuntivo:
+
+- se in `attributes` e' presente un evento con `messagelabel.key = MEMBER_JOINED_GROUP`
+- e rappresenta il passaggio della conversazione a un operatore
+
+allora la conversazione viene forzata a **Umano** anche se altri indizi potrebbero suggerire bot.
+
+## Risultato in UI
+
+- In apertura conversazione viene mostrato un badge con stato:
+  - `Bot`
+  - `Umano`
+- Questo stato viene ricalcolato al variare dei messaggi ricevuti.
+
+## Effetto sui feedback utente
+
+- Il messaggio temporaneo `"sto pensando..."` viene mostrato solo quando la conversazione risulta di tipo **Bot**.
+- Alla ricezione della prima risposta dal server, `"sto pensando..."` viene nascosto **immediatamente**.
+- Non e' previsto alcun tempo minimo di visualizzazione del messaggio.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@chat21/chat21-web-widget",
   "author": "Tiledesk SRL",
-  "version": "5.1.30",
+  "version": "5.1.32-rc2",
   "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

@@ -106,17 +106,16 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
   
   forceDisconnect: boolean = false;
 
+  //network status
+  isOnline: boolean = true;
+  loading: boolean = false;
+  private calloutScheduleTimeout: any = null;
+  
   // alert error message 
   isShowErrorMessage: boolean = false;
   errorMessage: string = '';
   errorKeyMessage: string = null;
   errorParams: Record<string, any> = {};
-
-  //network status
-  isOnline: boolean = true;
-
-  loading: boolean = false;
-  private calloutScheduleTimeout: any = null;
   
   private logger: LoggerService = LoggerInstance.getInstance();
   constructor(
@@ -170,13 +169,13 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
                     if (conversation.attributes && conversation.attributes['subtype'] === 'info') {
                         return;
                     }
-                    if (conversation.is_new && this.isInitialized) {
+                    if (conversation.is_new && that.isInitialized) {
                         that.manageTabNotification(false, 'conv-added')
                         // this.soundMessage(); 
                     }
-                    if(this.g.isOpen === false){
-                        that.lastConversation = conversation;
+                    if(this.g.isOpen === false && conversation.sender !== this.g.senderId && !isInfo(conversation)){
                         that.g.isOpenNewMessage = true;
+                        that.lastConversation = conversation;
                     }
                 } else {
                     //widget closed
@@ -224,6 +223,7 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
                             that.lastConversation = conversation;
                             that.g.isOpenNewMessage = true;
                             that.logger.debug('[APP-COMP] lastconversationnn', that.lastConversation)
+                            that.logger.debug('[APP-COMP] lastconversationnn message' + JSON.stringify(that.lastConversation?.attributes?.commands))
                         }
                         let badgeNewConverstionNumber = that.conversationsHandlerService.countIsNew()
                         that.g.setParameter('conversationsBadge', badgeNewConverstionNumber);
@@ -2319,6 +2319,7 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
         this.el.nativeElement.style.setProperty('--chat-header-height', this.g.hideHeaderConversation? '0px': null)
         this.el.nativeElement.style.setProperty('--font-size-bubble-message', this.g.fontSize)
         this.el.nativeElement.style.setProperty('--font-family-bubble-message', this.g.fontFamily)
+        this.el.nativeElement.style.setProperty('--chat-footer-close-button-height', this.g.closeChatInConversation? '30px': '0px')
 
     }
 

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,12 +133,14 @@
             [showAttachmentFooterButton]="g?.showAttachmentFooterButton"
             [showEmojiFooterButton]="g?.showEmojiFooterButton"
             [showAudioRecorderFooterButton]="g?.showAudioRecorderFooterButton"
+            [showAudioStreamFooterButton]="g?.showAudioStreamFooterButton"
             [hideTextAreaContent]="(g?.singleConversation && hideTextAreaContent) || (isConversationArchived && !g?.allowReopen)"
             [isConversationArchived]="isConversationArchived"
             [hideTextReply]="hideFooterTextReply"
             [isMobile]="g?.isMobile"
             [isEmojiiPickerShow]="isEmojiiPickerShow"
             [footerMessagePlaceholder]="footerMessagePlaceholder"
+            [closeChatInConversation]="g?.closeChatInConversation"
             [fileUploadAccept]="g?.fileUploadAccept"
             [dropEvent]="dropEvent"
             [poweredBy]="g?.poweredBy"
@@ -147,7 +151,9 @@
             (onAfterSendMessage)="onAfterSendMessageFN($event)"
             (onChangeTextArea)="onChangeTextArea($event)"
             (onAttachmentFileButtonClicked)="onAttachmentFileButtonClicked($event)"
-            (onNewConversationButtonClicked)="onNewConversationButtonClickedFN($event)">
+            (onNewConversationButtonClicked)="onNewConversationButtonClickedFN($event)"
+            (onStreamAudioActiveChange)="onStreamAudioActiveChange($event)"
+            (onCloseChatButtonClicked)="onCloseChatButtonClickedFN($event)">
         </chat-conversation-footer>
 
     </div>

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

@@ -137,7 +137,7 @@
 #dropZone_container{
     position: absolute;
     top: 52px;
-    bottom: calc(var(--chat-footer-logo-height) + var(--chat-footer-height));
+    bottom: calc(var(--chat-footer-logo-height) + var(--chat-footer-height) + var(--chat-footer-close-button-height));
     left: 0;
     right: 0;
     background-color: rgba(240,248,255,0.6);
@@ -240,7 +240,7 @@ dialog:-internal-dialog-in-top-layer{
 
 
     ::ng-deep .chat21-sheet-content{
-        bottom: calc(var(--chat-footer-logo-height) + var(--chat-footer-height) + 34px)!important;
+        bottom: calc(var(--chat-footer-logo-height) + var(--chat-footer-height) + var(--chat-footer-close-button-height) + 34px)!important;
     }
     
 }

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
@@ -246,7 +250,8 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
       'CONTINUE',
       'EMOJI_NOT_ELLOWED',
       'ATTACHMENT',
-      'EMOJI'
+      'EMOJI',
+      'CLOSE_CHAT'
     ];
 
     const keysContent = [
@@ -501,7 +506,7 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
       return this.isConversationArchived;
     }
 
-    //FALLBACK TO TILEDESK
+    //   //FALLBACK TO TILEDESK
     const requests_list = await this.tiledeskRequestService.getMyRequests().catch(err => {
       this.logger.error('[CONV-COMP] getConversationDetail: error getting request from Tiledesk', err);
       this.isConversationArchived=true
@@ -519,9 +524,9 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
       return this.isConversationArchived
     }
 
-    this.isConversationArchived = true;
-    return null;
-  }
+      this.isConversationArchived = false;
+      return null;
+    }
 
   /**
     * this.g.recipientId:
@@ -877,6 +882,20 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
       this.subscriptions.push(subscribe);
     }
 
+    subscribtionKey = 'conversationsAdded';
+    subscribtion = this.subscriptions.find(item => item.key === subscribtionKey);
+    if(!subscribtion){
+
+      subscribtion = this.chatManager.conversationsHandlerService.conversationChanged.pipe(takeUntil(this.unsubscribe$)).subscribe((conversation) => {
+        this.logger.debug('[CONV-COMP] ***** DATAIL conversationsChanged *****', conversation, this.conversationWith, this.isConversationArchived);
+        if(conversation && conversation.recipient === this.conversationId){
+          this.isConversationArchived = false
+        }
+      });
+      const subscribe = {key: subscribtionKey, value: subscribtion };
+      this.subscriptions.push(subscribe);
+    }
+
     subscribtionKey = 'messageWait';
     subscribtion = this.subscriptions.find(item => item.key === subscribtionKey);
     if (!subscribtion) {
@@ -1383,6 +1402,16 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
     this.logger.debug('[CONV-COMP] floating onNewConversationButtonClicked')
     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)
+    this.onCloseChat()
+  }
   // =========== END: event emitter function ====== //
 
 

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

@@ -44,7 +44,7 @@
                 top: 0;
                 right: 0;
                 left: 0;
-                bottom: calc(var(--chat-footer-logo-height) + var(--chat-footer-height));
+                bottom: calc(var(--chat-footer-logo-height) + var(--chat-footer-height) + var(--chat-footer-close-button-height));
                 overflow: hidden;
                 .time{
                     margin-bottom: 20px;

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();