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

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,9 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
       'CONTINUE',
       'EMOJI_NOT_ELLOWED',
       'ATTACHMENT',
-      'EMOJI'
+      'EMOJI',
+      'CLOSE_CHAT',
+      'CLOSE'
     ];
 
     const keysContent = [
@@ -501,7 +507,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 +525,9 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
       return this.isConversationArchived
     }
 
-    this.isConversationArchived = true;
-    return null;
-  }
+      this.isConversationArchived = false;
+      return null;
+    }
 
   /**
     * this.g.recipientId:
@@ -822,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.
@@ -877,6 +887,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,8 +1407,25 @@ 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 ====== //
 
+  /**
+   * 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

@@ -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" -->
@@ -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,18 +135,21 @@
                           [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">
                         </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"
+                          [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);
@@ -44,7 +48,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;
@@ -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-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,97 +12,145 @@
         <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'">
+        <chat-stream-audio-spectrum
+            [volume]="currentVolume"
+            [accentColor]="isBotSpeaking ? '#b0b0b0' : stylesMap?.get('themeColor')">
+        </chat-stream-audio-spectrum>
+    </div> -->
+
 </div>
 
-<!-- TEXTAREA + ICONS: conv active-->
-<div class="textarea-container" *ngIf="!hideTextAreaContent && !hideTextReply">
-    
-    <div *ngIf="!isStopRec" class="icons-container">
-        <!-- ICON ATTACHMENT -->
-        <label *ngIf="showAttachmentFooterButton" tabindex="1502" aria-label="allegati" for="chat21-file" class="chat21-textarea-button" [class.active]="!isFilePendingToUpload && !hideTextReply" id="chat21-start-upload-doc">
-            <span class="v-align-center">
-                <svg role="img" aria-labelledby="altIconTitle" xmlns="http://www.w3.org/2000/svg" width="24px" height="24" viewBox="0 0 24 24" fill="currentColor">
-                    <path d="M9.9,22.7c0,0-.1,0-.2,0-1.9.3-3.7-.2-5.2-1.4-3-2.3-3.6-6.4-1.4-9.5L9.5,2.5c.4-.5,1.1-.6,1.6-.3.5.4.6,1.1.3,1.6l-6.5,9.4c-1.4,2-1,4.8.9,6.3,1,.8,2.2,1.1,3.5.9,1.3-.2,2.4-.9,3.1-1.9l6-8.7c.9-1.2.6-3-.6-3.9-.6-.5-1.4-.6-2.1-.5-.8.1-1.4.5-1.9,1.1l-5.8,8.2c-.3.5-.2,1.1.2,1.5.2.2.5.3.8.2.3,0,.6-.2.7-.4l4.7-6.2c.4-.5,1.1-.6,1.6-.2.5.4.6,1.1.2,1.6l-4.7,6.2c-.5.7-1.4,1.2-2.3,1.3-.9.1-1.8-.2-2.5-.7-1.4-1.1-1.6-3.1-.6-4.6l5.8-8.2c.8-1.1,2-1.9,3.4-2.1,1.4-.2,2.7.1,3.8,1,2.2,1.7,2.7,4.8,1.1,7.1l-6,8.7c-1.1,1.5-2.6,2.5-4.4,2.8h0Z"/>
-                    <title id="altIconTitle">{{ 'MAX_ATTACHMENT' | translate: { FILE_SIZE_LIMIT: file_size_limit } }}</title>
-                </svg>
-                
-            </span>
-             <input
-                [attr.disabled] = "(isFilePendingToUpload || isConversationArchived || hideTextReply)? true : null"
-                tabindex="1503" 
-                type="file" 
-                aria-label="seleziona allegato"
-                [accept]="fileUploadAccept"
-                name="chat21-file"
-                id="chat21-file"
-                #chat21_file
-                class="inputfile" 
-                [ngStyle]="{'display': 'block', height:'1px', width:'1px', overflow: 'hidden' }"
-                (change)="detectFiles($event)"/>
-        </label>
-        <!-- ICON EMOJII -->
-        <label *ngIf="showEmojiFooterButton" tabindex="1504" aria-label="emojii" for="chat21-emojii" class="chat21-textarea-button" [class.active]="!isFilePendingToUpload && !hideTextReply" id="chat21-emoticon-picker" (click)="onEmojiiPickerClicked()">
+<div class="textarea-container-wrapper" *ngIf="!hideTextAreaContent && !hideTextReply">
+    <!-- TEXTAREA + ICONS: conv active-->
+    <div class="textarea-container">
+        
+        <div *ngIf="!isStopRec" class="icons-container">
+            <!-- ICON ATTACHMENT -->
+            <label *ngIf="showAttachmentFooterButton" tabindex="1502" aria-label="allegati" for="chat21-file" class="chat21-textarea-button" [class.active]="!isFilePendingToUpload && !hideTextReply" id="chat21-start-upload-doc">
+                <span class="v-align-center">
+                    <svg role="img" aria-labelledby="altIconTitle" xmlns="http://www.w3.org/2000/svg" width="24px" height="24" viewBox="0 0 24 24" fill="currentColor">
+                        <path d="M9.9,22.7c0,0-.1,0-.2,0-1.9.3-3.7-.2-5.2-1.4-3-2.3-3.6-6.4-1.4-9.5L9.5,2.5c.4-.5,1.1-.6,1.6-.3.5.4.6,1.1.3,1.6l-6.5,9.4c-1.4,2-1,4.8.9,6.3,1,.8,2.2,1.1,3.5.9,1.3-.2,2.4-.9,3.1-1.9l6-8.7c.9-1.2.6-3-.6-3.9-.6-.5-1.4-.6-2.1-.5-.8.1-1.4.5-1.9,1.1l-5.8,8.2c-.3.5-.2,1.1.2,1.5.2.2.5.3.8.2.3,0,.6-.2.7-.4l4.7-6.2c.4-.5,1.1-.6,1.6-.2.5.4.6,1.1.2,1.6l-4.7,6.2c-.5.7-1.4,1.2-2.3,1.3-.9.1-1.8-.2-2.5-.7-1.4-1.1-1.6-3.1-.6-4.6l5.8-8.2c.8-1.1,2-1.9,3.4-2.1,1.4-.2,2.7.1,3.8,1,2.2,1.7,2.7,4.8,1.1,7.1l-6,8.7c-1.1,1.5-2.6,2.5-4.4,2.8h0Z"/>
+                        <title id="altIconTitle">{{ 'MAX_ATTACHMENT' | translate: { FILE_SIZE_LIMIT: file_size_limit } }}</title>
+                    </svg>
+                    
+                </span>
+                <input
+                    [attr.disabled] = "(isFilePendingToUpload || isConversationArchived || hideTextReply)? true : null"
+                    tabindex="1503" 
+                    type="file" 
+                    aria-label="seleziona allegato"
+                    [accept]="fileUploadAccept"
+                    name="chat21-file"
+                    id="chat21-file"
+                    #chat21_file
+                    class="inputfile" 
+                    [ngStyle]="{'display': 'block', height:'1px', width:'1px', overflow: 'hidden' }"
+                    (change)="detectFiles($event)"/>
+            </label>
+            <!-- ICON EMOJII -->
+            <label *ngIf="showEmojiFooterButton" tabindex="1504" aria-label="emojii" for="chat21-emojii" class="chat21-textarea-button" [class.active]="!isFilePendingToUpload && !hideTextReply" id="chat21-emoticon-picker" (click)="onEmojiiPickerClicked()">
+                <span class="v-align-center">
+                    <svg role="img" aria-labelledby="altIconTitle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor">
+                        <path stroke-width=".4px" stroke="currentColor" d="M12,20.8c-5.1,0-9.3-4.2-9.3-9.3S6.9,2.2,12,2.2s9.3,4.2,9.3,9.3-4.2,9.3-9.3,9.3ZM12,3.6c-4.4,0-7.9,3.6-7.9,7.9s3.6,7.9,7.9,7.9,7.9-3.6,7.9-7.9-3.6-7.9-7.9-7.9Z"/>
+                        <path stroke-width=".4px" stroke="currentColor" d="M12,17.2c-2.7,0-4.3-1.9-4.6-2.3-.2-.3-.2-.7.1-1s.7-.2,1,.1c.1.2,1.4,1.8,3.5,1.8s2.2,0,3.5-1.8c.2-.3.7-.4,1-.1s.4.7.1,1c-1.7,2.2-4.1,2.3-4.6,2.3Z"/>
+                        <path d="M8.7,10.9c-.9,0-1.6-.7-1.6-1.6s.7-1.6,1.6-1.6,1.6.7,1.6,1.6-.7,1.6-1.6,1.6Z"/>
+                        <path d="M15.5,10.9c-.9,0-1.6-.7-1.6-1.6s.7-1.6,1.6-1.6,1.6.7,1.6,1.6-.7,1.6-1.6,1.6Z"/>
+                        <title id="altIconTitle">{{ translationMap?.get('EMOJI') }}</title>
+
+                        <!-- <path d="M0,0H20.57V20.57H0V0Z" fill="none"/>
+                        <circle cx="15.02" cy="9.86" r="1.29"/>
+                        <circle cx="9.02" cy="9.86" r="1.29"/>
+                        <path d="M12.02,15.43c-1.27,0-2.36-.69-2.96-1.71h-1.43c.69,1.76,2.39,3,4.39,3s3.7-1.24,4.39-3h-1.43c-.6,1.02-1.69,1.71-2.96,1.71Zm0-12C7.28,3.43,3.45,7.27,3.45,12s3.83,8.57,8.56,8.57,8.58-3.84,8.58-8.57S16.75,3.43,12.01,3.43Zm0,15.43c-3.79,0-6.86-3.07-6.86-6.86s3.07-6.86,6.86-6.86,6.86,3.07,6.86,6.86-3.07,6.86-6.86,6.86Z"/> -->
+                    </svg>
+                </span>
+            </label>
+        </div>
+
+
+
+
+        <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"
+            [attr.placeholder] ="(footerMessagePlaceholder)? footerMessagePlaceholder : translationMap?.get('LABEL_PLACEHOLDER')"
+            start-focus-chat21-conversation-component
+            inputTextArea
+            #textbox
+            tabindex="1501"
+            aria-labelledby="altTextArea"
+            rows="1"
+            id="chat21-main-message-context"
+            class='f21textarea c21-button-clean'
+            [(ngModel)]="textInputTextArea"
+            (ngModelChange)="onTextAreaChange()"
+            (keypress)="onkeypress($event)"
+            (keydown)="onkeydown($event)"
+            (paste)="onPaste($event)">
+        </textarea>
+        
+        </div>
+
+        <!-- ICON SEND -->
+        <div *ngIf="(textInputTextArea !== '' && !isStopRec) || !showAudioRecorderFooterButton" tabindex="-1" class="chat21-textarea-button" [class.disabled]="showAlertEmoji" [class.active]="textInputTextArea && !hideTextReply" id="chat21-button-send" (click)="onSendPressed($event)">
             <span class="v-align-center">
-                <svg role="img" aria-labelledby="altIconTitle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor">
-                    <path stroke-width=".4px" stroke="currentColor" d="M12,20.8c-5.1,0-9.3-4.2-9.3-9.3S6.9,2.2,12,2.2s9.3,4.2,9.3,9.3-4.2,9.3-9.3,9.3ZM12,3.6c-4.4,0-7.9,3.6-7.9,7.9s3.6,7.9,7.9,7.9,7.9-3.6,7.9-7.9-3.6-7.9-7.9-7.9Z"/>
-                    <path stroke-width=".4px" stroke="currentColor" d="M12,17.2c-2.7,0-4.3-1.9-4.6-2.3-.2-.3-.2-.7.1-1s.7-.2,1,.1c.1.2,1.4,1.8,3.5,1.8s2.2,0,3.5-1.8c.2-.3.7-.4,1-.1s.4.7.1,1c-1.7,2.2-4.1,2.3-4.6,2.3Z"/>
-                    <path d="M8.7,10.9c-.9,0-1.6-.7-1.6-1.6s.7-1.6,1.6-1.6,1.6.7,1.6,1.6-.7,1.6-1.6,1.6Z"/>
-                    <path d="M15.5,10.9c-.9,0-1.6-.7-1.6-1.6s.7-1.6,1.6-1.6,1.6.7,1.6,1.6-.7,1.6-1.6,1.6Z"/>
-                    <title id="altIconTitle">{{ translationMap?.get('EMOJI') }}</title>
-
-                    <!-- <path d="M0,0H20.57V20.57H0V0Z" fill="none"/>
-                    <circle cx="15.02" cy="9.86" r="1.29"/>
-                    <circle cx="9.02" cy="9.86" r="1.29"/>
-                    <path d="M12.02,15.43c-1.27,0-2.36-.69-2.96-1.71h-1.43c.69,1.76,2.39,3,4.39,3s3.7-1.24,4.39-3h-1.43c-.6,1.02-1.69,1.71-2.96,1.71Zm0-12C7.28,3.43,3.45,7.27,3.45,12s3.83,8.57,8.56,8.57,8.58-3.84,8.58-8.57S16.75,3.43,12.01,3.43Zm0,15.43c-3.79,0-6.86-3.07-6.86-6.86s3.07-6.86,6.86-6.86,6.86,3.07,6.86,6.86-3.07,6.86-6.86,6.86Z"/> -->
+                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  height="24" width="24" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve" fill="currentColor">
+                    <path d="M1.8,20.6V3.4l20.2,8.6L1.8,20.6ZM3.9,17.3l12.6-5.4L3.9,6.6v3.7l6.4,1.6-6.4,1.6v3.8ZM3.9,17.3V6.6v10.7Z"/>
                 </svg>
             </span>
-        </label>
-    </div>
-
-
+        </div>
 
+        <!-- ICON 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()"
+                (endRecordingEvent)="onEndRecording($event)"
+                (sendRecordingEvent)="onSendRecording($event)"
+                [stylesMap]="stylesMap">
+            </chat-audio-recorder>
+        </div>
 
-    <div *ngIf="!isStopRec" class="visible-text-area" [class.hasError]="showAlertEmoji" [class.disabled] = "( isConversationArchived || hideTextReply)? true : null">
-        <!-- isFilePendingToUpload || -->
-      <textarea 
-        [attr.disabled] = "(hideTextReply)? true : null"
-        [attr.placeholder] ="(footerMessagePlaceholder)? footerMessagePlaceholder : translationMap?.get('LABEL_PLACEHOLDER')"
-        start-focus-chat21-conversation-component
-        inputTextArea
-        #textbox
-        tabindex="1501"
-        aria-labelledby="altTextArea"
-        rows="1"
-        id="chat21-main-message-context"
-        class='f21textarea c21-button-clean'
-        [(ngModel)]="textInputTextArea"
-        (ngModelChange)="onTextAreaChange()"
-        (keypress)="onkeypress($event)"
-        (keydown)="onkeydown($event)"
-        (paste)="onPaste($event)">
-      </textarea>
-    
+        <!-- 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>
 
-    <!-- ICON SEND -->
-    <div *ngIf="(textInputTextArea !== '' && !isStopRec) || !showAudioRecorderFooterButton" tabindex="-1" class="chat21-textarea-button" [class.disabled]="showAlertEmoji" [class.active]="textInputTextArea && !hideTextReply" id="chat21-button-send" (click)="onSendPressed($event)">
-        <span class="v-align-center">
-            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  height="24" width="24" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve" fill="currentColor">
-                <path d="M1.8,20.6V3.4l20.2,8.6L1.8,20.6ZM3.9,17.3l12.6-5.4L3.9,6.6v3.7l6.4,1.6-6.4,1.6v3.8ZM3.9,17.3V6.6v10.7Z"/>
-            </svg>
-        </span>
-    </div>
 
-    <!-- ICON REC -->
-    <div *ngIf="showAudioRecorderFooterButton && !textInputTextArea" tabindex="-1" class="chat21-audio-button" [class.active]="isStopRec" id="chat21-button-rec">
-        <chat-audio-recorder
-            (startRecordingEvent)="onStartRecording()"
-            (deleteRecordingEvent)="onDeleteRecording()"
-            (endRecordingEvent)="onEndRecording($event)"
-            (sendRecordingEvent)="onSendRecording($event)"
-            [stylesMap]="stylesMap">
-        </chat-audio-recorder>
+    <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">
+                <!-- <svg [ngStyle]="{'fill': 'yellow' }" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
+                    <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"  [ngStyle]="{'fill': stylesMap?.get('foregroundColor')}"/>
+                </svg> -->
+                <svg [ngStyle]="{'stroke': stylesMap?.get('foregroundColor'), 'fill': stylesMap?.get('foregroundColor') }" role="img" id="archive" aria-labelledby="altIconTitle" class="icon-menu" xmlns="http://www.w3.org/2000/svg"  
+                    width="15px" height="15px" viewBox="0 0 512 512">
+                    <path d="M80 152v256a40.12 40.12 0 0040 40h272a40.12 40.12 0 0040-40V152" stroke-linecap="round" stroke-linejoin="round" stroke-width="50px" fill="none"></path>
+                    <rect x="48" y="64" width="416" height="80" rx="28" ry="28" stroke-linejoin="round" stroke-width="50px" fill="none" ></rect>
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M320 304l-64 64-64-64M256 345.89V224" stroke-width="50px" fill="none"></path>
+                    <title id="altIconTitle">{{ translationMap?.get('CLOSE_CHAT') }}</title>
+                </svg>
+            </span>
+            <span class="v-align-center c21-label-button">
+                {{translationMap?.get('CLOSE_CHAT')}}
+            </span>  
+            <div class="clear"></div>
+        </button>
     </div>
+
 </div>
 
 

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

@@ -1,23 +1,26 @@
-
+.textarea-container-wrapper{
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
 .textarea-container{
-    // padding: 8px 34px;
-    // padding-left: 70px;
-    // padding-right: 45px;
     display: flex;
-    // width: 100%;
     align-items: center;
     justify-content: space-between;
     gap: 8px;
+}
 
-    //if attachment icon OR emoji icon is not in DOM -> increment textarea width
-    &:has(:not(#chat21-start-upload-doc), :not(#chat21-emoticon-picker)) .visible-text-area {
-        width: 80%;
-    }
-    //if attachment icon AND emoji icon is not in DOM -> increment textarea width
-    &:has(:not(#chat21-start-upload-doc)):has(:not(#chat21-emoticon-picker)) .visible-text-area {
-        width: 90%;
-      }
+.close-chat-container{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
 
+    .c21-close{
+        height: 30px !important;
+        margin: 0px !important;
+    }
 }
 
 .icons-container{
@@ -40,6 +43,10 @@
     &.hasError{
         box-shadow: 0 0 0 1px var(--chat-footer-border-color-error) inset;
     }
+
+    &.stream-active {
+        width: 50%;
+    }
 }
 
 .chat21-textarea-button {
@@ -82,6 +89,50 @@
     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;
+    transition:
+        width 180ms ease,
+        border-radius 180ms ease,
+        padding 180ms ease;
+
+    .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%;
+    }
+
+    &.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,
 textarea:visited,
 textarea:focus,
@@ -364,6 +415,34 @@ textarea:active{
     }
 }
 
+#streamAudioAlert {
+    bottom: 100%;
+    width: 100%;
+    min-height: var(--chat-footer-stream-button-height);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    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);
+    }
+}
+
 #textAlert{
     bottom: 100%;
     width: 100%;
@@ -419,3 +498,28 @@ textarea:active{
     border: none;
     // margin: -2px -2px 0px;
 }
+
+
+// aggiungi un'animazione di fade in e fade out quando .star-rating-widget è visibile con transition
+.star-rating-widget {
+    transition: all 0.5s ease-in-out;
+}
+
+.star-rating-widget {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: -52px;
+    height: 100%;
+    width: 100%;
+    flex-direction: row;
+    justify-content: center;
+    background-color: rgb(255, 255, 255);
+    flex-wrap: nowrap;
+    &.active {
+        bottom: 0px;
+    }
+    &.inactive {
+        bottom: -52px;
+    }
+}