@chat21/chat21-web-widget 5.1.34-rc1 → 5.2.1

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

@@ -265,8 +265,7 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
       'VOICE_CONNECTING',
       'VOICE_LISTENING',
       'VOICE_PROCESSING',
-      'STREAM_AUDIO',
-      'MAX_ATTACHMENT'
+      'STREAM_AUDIO'
     ];
 
     const keysContent = [
@@ -529,29 +528,25 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
       return this.isConversationArchived;
     }
 
-    // FALLBACK TO TILEDESK
-    let requests_list: { requests: any[] };
-    try {
-      requests_list = await this.tiledeskRequestService.getMyRequests();
-    } catch (err) {
+    //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;
-      return this.isConversationArchived;
-    }
-
+      this.isConversationArchived=true
+      return { requests: [] }
+    });
     if (requests_list && requests_list.requests.length > 0) {
       this.logger.debug('[CONV-COMP] getConversationDetail: request exist on Tiledesk', requests_list);
-      const conversation = requests_list.requests.find((request) => request.request_id === this.conversationId);
-      if (conversation) {
-        this.isConversationArchived = false;
-        return this.isConversationArchived;
+      let conversation = requests_list.requests.find((request)=> request.request_id === this.conversationId)
+      if(conversation){
+        this.isConversationArchived = false
+        return this.isConversationArchived
       }
       this.logger.debug('[CONV-COMP] getConversationDetail: request NOT EXIST on Tiledesk', requests_list);
-      this.isConversationArchived = true;
-      return this.isConversationArchived;
+      this.isConversationArchived = true
+      return this.isConversationArchived
     }
 
-    this.isConversationArchived = false;
+    this.isConversationArchived = true;
     return null;
   }
 
@@ -913,20 +908,6 @@ 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) {
@@ -1449,7 +1430,7 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
     this.onNewConversationButtonClicked.emit()
   }
 
-  /** CALLED BY: conv-footer streaming audio button */
+  /** CALLED BY: conv-footer component */
   onStreamAudioActiveChange(event: boolean){
     this.isStreamAudioActive = event
   }
@@ -1462,7 +1443,6 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
     this.logger.debug('[CONV-COMP] onCloseChatButtonClicked::::', event)
     this.onCloseChat()
   }
-  // =========== END: event emitter function ====== //
 
   /**
    * True quando è visibile il pulsante chiudi stream (`.close-stream-button`, `isStreamAudioActive`).
@@ -1471,6 +1451,8 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
   closeStreamButtonActiveForSheetBottom(): boolean {
     return !!(this.g?.showAudioStreamFooterButton && (this.isStreamAudioActive || this.isStreamAudioConnecting));
   }
+  // =========== END: event emitter function ====== //
+
 
   openInputFiles() {
     alert('ok');

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

@@ -27,7 +27,7 @@
                       <div *ngFor="let message of messages; let first = first; let last = last; let i = index" class="rowMsg">
 
                           <!-- message SENDER:: -->
-                           <div role="article" *ngIf="messageType(MESSAGE_TYPE_MINE, message) && !message.isJustRecived" class="msg_container base_sent">
+                          <div role="article" *ngIf="messageType(MESSAGE_TYPE_MINE, message) && !message.isJustRecived" class="msg_container base_sent">
                           
                             <!--backgroundColor non viene ancora usato -->
                             <!-- class="messages msg_sent slide-in-right" -->
@@ -55,7 +55,7 @@
                           <!-- message RECIPIENT:: -->
                           <div role="article" *ngIf="messageType(MESSAGE_TYPE_OTHERS, message)" class="msg_container base_receive">
                             
-                            <chat-avatar-image *ngIf="!isSameSender(message?.sender, i) && !isStreamAudioActive" 
+                            <chat-avatar-image *ngIf="!isSameSender(message?.sender, i) && !isStreamAudioActive"
                               [ngClass]="{'slide-in-left': false}"    
                               [senderID]="message?.sender"
                               [senderFullname]="message?.sender_fullname"
@@ -69,7 +69,7 @@
                               [class.no-background]="(isImage(message) || isFrame(message) || isCarousel(message)) && ((message?.text && message?.text.trim() === '') || !message?.text)"
                               [class.emoticon]="isEmojii(message?.text)"
                               [class.fullSizeMessage]="isStreamAudioActive"
-                              [style.margin-left]="isSameSender(message?.sender, i) ? 'calc(var(--avatar-width) + 10px)' : null"
+                              [style.margin-left]="isSameSender(message?.sender, i) && !isStreamAudioActive ? '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"

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

@@ -28,7 +28,7 @@
 }
 
 :host .loading.fullSize ::ng-deep > div.spinner{
-    margin: 15px 0px !important;
+    margin: 50px 0px !important;
 }
 
 // ============= CSS c21-body ================= //
@@ -48,7 +48,7 @@
                 top: 0;
                 right: 0;
                 left: 0;
-                bottom: calc(var(--chat-footer-logo-height) + var(--chat-footer-height) + var(--chat-footer-close-button-height));
+                bottom: calc(var(--chat-footer-logo-height) + var(--chat-footer-height));
                 overflow: hidden;
                 .time{
                     margin-bottom: 20px;

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

@@ -263,5 +263,4 @@ describe('ConversationContentComponent', () => {
       expect(spy).not.toHaveBeenCalled();
     });
   });
-
 });

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

@@ -5,11 +5,11 @@
     </div>
 
     <!-- ALERT EMOJI -->
-    <div id="textAlert" 
-        *ngIf="!hideTextAreaContent && showAlertEmoji" 
-        role="alert" 
-        aria-live="assertive" 
-        class="fade-in-bottom" 
+    <div id="textAlert"
+        *ngIf="!hideTextAreaContent && showAlertEmoji"
+        role="alert"
+        aria-live="assertive"
+        class="fade-in-bottom"
         [class.hideTextReply]="hideTextReply">
         <svg aria-hidden="true" focusable="false" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" version="1.1" viewBox="0 0 110 135">
             <path d="M55,25.8c-23,0-41.7,18.7-41.7,41.7s18.7,41.7,41.7,41.7,41.7-18.7,41.7-41.7-18.7-41.7-41.7-41.7ZM55,91.5c-3.4,0-6.2-2.8-6.2-6.2s2.8-6.2,6.2-6.2,6.2,2.8,6.2,6.2-2.8,6.2-6.2,6.2ZM60.3,70.1c-.2,2.8-2.5,4.9-5.3,4.9s-5.1-2.2-5.3-4.9l-1.6-22.3c-.3-4,2.9-7.4,6.9-7.4s7.2,3.4,6.9,7.4l-1.6,22.3Z"/>
@@ -42,42 +42,40 @@
 <div class="textarea-container-wrapper" *ngIf="!hideTextAreaContent && !hideTextReply">
     <!-- TEXTAREA + ICONS: conv active-->
     <div class="textarea-container" [class.voice-mode]="isStreamAudioActive || isStreamAudioConnecting">
-        
+
         <div *ngIf="!isStopRec && !(isStreamAudioActive || isStreamAudioConnecting)" class="icons-container">
             <!-- ICON ATTACHMENT -->
-            <label *ngIf="showAttachmentFooterButton"     
-                for="chat21-file" 
+            <label *ngIf="showAttachmentFooterButton"
+                for="chat21-file"
                 role="button"
                 tabindex="0"
                 [attr.aria-label]="translationMap?.get('BUTTON_ATTACH_FILE')"
                 [attr.title]="'MAX_ATTACHMENT' | translate: { FILE_SIZE_LIMIT: file_size_limit }"
-                class="chat21-textarea-button" 
-                [class.active]="!isFilePendingToUpload && !hideTextReply" 
+                class="chat21-textarea-button"
+                [class.active]="!isFilePendingToUpload && !hideTextReply"
                 id="chat21-start-upload-doc"
                 (keydown.enter)="$event.preventDefault(); chat21_file.click()"
                 (keydown.space)="$event.preventDefault(); chat21_file.click()">
                 <span class="v-align-center">
                     <svg aria-hidden="true" focusable="false" 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">{{ maxAttachmentLabel }}</title>
                     </svg>
-                    
                 </span>
                 <input
-                    [attr.disabled]="(isFilePendingToUpload || isConversationArchived || hideTextReply)? true : null"
+                    [attr.disabled] = "(isFilePendingToUpload || isConversationArchived || hideTextReply)? true : null"
                     tabindex="-1"
-                    type="file" 
+                    type="file"
                     [attr.aria-label]="translationMap?.get('BUTTON_ATTACH_FILE')"
                     [accept]="fileUploadAccept"
                     name="chat21-file"
                     id="chat21-file"
                     #chat21_file
-                    class="inputfile" 
+                    class="inputfile"
                     [ngStyle]="{'display': 'block', height:'1px', width:'1px', overflow: 'hidden' }"
                     (change)="detectFiles($event)"/>
             </label>
             <!-- ICON EMOJII -->
-            <label *ngIf="showEmojiFooterButton" 
+            <label *ngIf="showEmojiFooterButton"
                 for="chat21-emojii"
                 role="button"
                 tabindex="0"
@@ -90,7 +88,7 @@
                 (keydown.enter)="$event.preventDefault(); onEmojiiPickerClicked()"
                 (keydown.space)="$event.preventDefault(); 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">
+                    <svg aria-hidden="true" focusable="false" 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"/>
@@ -107,7 +105,7 @@
             class="visible-text-area" 
             [class.stream-active]="isStreamAudioActive || isStreamAudioConnecting" 
             [class.hasError]="showAlertEmoji" 
-            [class.disabled]="(isConversationArchived || hideTextReply)? true : null">
+            [class.disabled] = "( isConversationArchived || hideTextReply)? true : null">
             <!-- Voice mode: inline status chip -->
             <div class="voice-inline-status" *ngIf="isStreamAudioActive || isStreamAudioConnecting" role="status" aria-live="polite">
                 <span class="voice-inline-dot"
@@ -117,10 +115,10 @@
                 <span class="voice-inline-label">{{ voiceStatusLabel }}</span>
             </div>
             <!-- Normal mode: textarea -->
-        <textarea 
+        <textarea
             *ngIf="!(isStreamAudioActive || isStreamAudioConnecting)"
-            [attr.disabled]="(hideTextReply)? true : null"
-            [attr.placeholder]="(footerMessagePlaceholder)? footerMessagePlaceholder : translationMap?.get('LABEL_PLACEHOLDER')"
+            [attr.disabled] = "(hideTextReply)? true : null"
+            [attr.placeholder] ="(footerMessagePlaceholder)? footerMessagePlaceholder : translationMap?.get('LABEL_PLACEHOLDER')"
             [attr.aria-label]="(footerMessagePlaceholder)? footerMessagePlaceholder : translationMap?.get('LABEL_PLACEHOLDER')"
             [attr.aria-multiline]="true"
             [attr.aria-invalid]="showAlertEmoji ? 'true' : 'false'"
@@ -135,7 +133,7 @@
             (keydown)="onkeydown($event)"
             (paste)="onPaste($event)">
         </textarea>
-        
+
         </div>
 
         <!-- ICON SEND -->
@@ -156,12 +154,8 @@
         </button>
 
         <!-- ICON REC -->
-        <div *ngIf="showAudioRecorderFooterButton && !textInputTextArea"
-            class="chat21-audio-button"
-            [class.active]="isStopRec"
-            id="chat21-button-rec">
+        <div *ngIf="showAudioRecorderFooterButton && !textInputTextArea && !isStreamAudioActive && !isStreamAudioConnecting" tabindex="-1" class="chat21-audio-button" [class.active]="isStopRec" id="chat21-button-rec">
             <chat-audio-recorder
-                [translationMap]="translationMap"
                 (startRecordingEvent)="onStartRecording()"
                 (deleteRecordingEvent)="onDeleteRecording()"
                 (endRecordingEvent)="onEndRecording($event)"
@@ -183,30 +177,26 @@
                 [translationMap]="translationMap">
             </chat-stream-audio-spectrum>
         </div>
-    </div>
 
+        <div class="close-chat-container" *ngIf="closeChatInConversation">
+            <button type="button" 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]="{'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 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>
 
 
@@ -218,23 +208,22 @@
     [attr.aria-hidden]="!isEmojiiPickerShow"
     [attr.aria-label]="translationMap?.get('EMOJI')"
     #emoji_mart_container>
-    <!-- <ng-container #emojii_container></ng-container> -->
-    <emoji-mart id="emoji-mart"
-        *ngIf="showEmojiPicker"
-        class="emoji-mart"
-        [showPreview]="emojiiOptions?.showPreview"
-        [color]="stylesMap?.get('themeColor')" 
-        [perLine]="emojiiOptions?.emojiPerLine"
-        [totalFrequentLines]="emojiiOptions?.totalFrequentLines"
-        [enableSearch]="emojiiOptions?.enableSearch"
-        [darkMode]="emojiiOptions?.darkMode"
-        [include]="emojiiOptions?.include"
-        (emojiSelect)="addEmoji($event)">
-    </emoji-mart>
+        <emoji-mart id="emoji-mart"
+            *ngIf="showEmojiPicker"
+            class="emoji-mart"
+            [showPreview]="emojiiOptions?.showPreview"
+            [color]="stylesMap?.get('themeColor')"
+            [perLine]="emojiiOptions?.emojiPerLine"
+            [totalFrequentLines]="emojiiOptions?.totalFrequentLines"
+            [enableSearch]="emojiiOptions?.enableSearch"
+            [darkMode]="emojiiOptions?.darkMode"
+            [include]="emojiiOptions?.include"
+            (emojiSelect)="addEmoji($event)">
+        </emoji-mart>
 </div>
 
 <!-- NEW CONV & CONTINE buttons: conv archived-->
-<div id="floating-container" *ngIf="hideTextAreaContent" class="fade-in-bottom" start-focus-chat21-conversation-component> 
+<div id="floating-container" *ngIf="hideTextAreaContent" class="fade-in-bottom" start-focus-chat21-conversation-component>
     <button type="button" aflistconv #aflistconv class="c21-button-primary" (click)="openNewConversation()" [ngStyle]="{'background-color': stylesMap.get('themeColor'), 'border-color': stylesMap.get('themeColor'), 'color': stylesMap?.get('foregroundColor')}">
         <span class="v-align-center">
           <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
@@ -243,7 +232,7 @@
         </span>
         <span class="v-align-center c21-label-button">
           {{translationMap?.get('LABEL_START_NW_CONV')}}
-        </span>  
+        </span>
         <div class="clear"></div>
     </button>
 </div>

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

@@ -1,10 +1,10 @@
-.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;
@@ -17,6 +17,7 @@
     &:has(:not(#chat21-start-upload-doc)):has(:not(#chat21-emoticon-picker)) .visible-text-area {
         width: 90%;
     }
+
 }
 
 .close-chat-container{
@@ -25,11 +26,6 @@
     align-items: center;
     justify-content: center;
     gap: 8px;
-
-    .c21-close{
-        height: 30px !important;
-        margin: 0px !important;
-    }
 }
 
 .icons-container{
@@ -62,6 +58,15 @@
         display: flex;
         align-items: center;
     }
+
+    //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%;
+    }
 }
 
 .chat21-textarea-button {
@@ -429,7 +434,8 @@ textarea:active{
     position: absolute;
     // padding: 8px 16px;
     overflow: hidden;
-    background-color: color-mix(in srgb, var(--content-background-color) 34%, transparent);
+    background-color: var(--content-background-color);
+    // 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:

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

@@ -16,14 +16,12 @@ import { ConversationHandlerService } from 'src/chat21-core/providers/abstract/c
 import { VoiceService } from 'src/app/providers/voice/voice.service';
 import { TtsAudioPlaybackCoordinator } from 'src/app/providers/tts-audio-playback-coordinator.service';
 import { TiledeskAuthService } from 'src/chat21-core/providers/tiledesk/tiledesk-auth.service';
+import { Globals } from 'src/app/utils/globals';
 
 describe('ConversationFooterComponent', () => {
   let component: ConversationFooterComponent;
   let fixture: ComponentFixture<ConversationFooterComponent>;
 
-  const ngxlogger = jasmine.createSpyObj('NGXLogger', ['log', 'trace', 'debug', 'warn', 'error', 'info']);
-  const customLogger = new CustomLogger(ngxlogger);
-
   const voiceServiceMock = {
     startSession: () => Promise.resolve(),
     stopSession: () => Promise.resolve({ voiceIngressResultUrl: null as string | null }),
@@ -32,7 +30,14 @@ describe('ConversationFooterComponent', () => {
     volume$: { subscribe: () => ({ unsubscribe: () => undefined }) },
     isAcquisitionBlocked$: { subscribe: () => ({ unsubscribe: () => undefined }) },
   };
-  const ttsMock = { stopAll: () => undefined, isTTSPlaying$: { subscribe: () => ({ unsubscribe: () => undefined }) } };
+  const ttsMock = {
+    cancelAll: () => undefined,
+    stopAll: () => undefined,
+    isTTSPlaying$: { subscribe: () => ({ unsubscribe: () => undefined }) },
+  };
+
+  const ngxlogger = jasmine.createSpyObj('NGXLogger', ['log', 'trace', 'debug', 'warn', 'error', 'info']);
+  const customLogger = new CustomLogger(ngxlogger);
 
   const conversationHandlerStub = {
     sendMessage: jasmine.createSpy('sendMessage').and.returnValue({ uid: 'm1' }),
@@ -60,6 +65,7 @@ describe('ConversationFooterComponent', () => {
       imports: [FormsModule, ReactiveFormsModule],
       providers: [
         FormBuilder,
+        Globals,
         { provide: ChatManager, useValue: chatManagerStub },
         { provide: TypingService, useValue: typingStub },
         { provide: UploadService, useValue: uploadServiceStub as unknown as UploadService },

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

@@ -41,6 +41,7 @@ export class ConversationFooterComponent implements OnInit, OnChanges, OnDestroy
   @Input() showAudioRecorderFooterButton: boolean;
   @Input() showAudioStreamFooterButton: boolean;
   // @Input() showContinueConversationButton: boolean;
+  @Input() closeChatInConversation: boolean;
   @Input() isConversationArchived: boolean;
   @Input() hideTextAreaContent: boolean;
   @Input() hideTextReply: boolean;
@@ -48,7 +49,6 @@ export class ConversationFooterComponent implements OnInit, OnChanges, OnDestroy
   @Input() isEmojiiPickerShow: boolean;
   @Input() footerMessagePlaceholder: string;
   @Input() fileUploadAccept: string;
-  @Input() closeChatInConversation: boolean;
   @Input() dropEvent: Event;
   @Input() poweredBy: string;
   @Input() stylesMap: Map<string, string>
@@ -124,15 +124,8 @@ export class ConversationFooterComponent implements OnInit, OnChanges, OnDestroy
     return this.translationMap?.get('VOICE_LISTENING') || 'Listening...';
   }
 
-  get maxAttachmentLabel(): string {
-    const template = this.translationMap?.get('MAX_ATTACHMENT')
-      || `Max allowed size {{FILE_SIZE_LIMIT}}Mb`;
-    return template.replace(/\{\{FILE_SIZE_LIMIT\}\}/g, String(this.file_size_limit));
-  }
-
   file_size_limit = FILE_SIZE_LIMIT;
   attachmentTooltip: string = '';
-  isErrorNetwork: boolean = false;
 
 
   convertColorToRGBA = convertColorToRGBA;
@@ -155,6 +148,7 @@ export class ConversationFooterComponent implements OnInit, OnChanges, OnDestroy
     if(changes['conversationWith'] && changes['conversationWith'].currentValue !== undefined){
       this.conversationHandlerService = this.chatManager.getConversationHandlerByConversationId(this.conversationWith);
       this.isStreamAudioActive = false;
+      this.ttsPlayback.cancelAll();
       void this.stopVoice();
     }
     if(changes['hideTextReply'] && changes['hideTextReply'].currentValue !== undefined){
@@ -857,6 +851,7 @@ export class ConversationFooterComponent implements OnInit, OnChanges, OnDestroy
       } catch (e) {
         this.logger.error('[CONV-FOOTER] onStreamPressed: initVoice failed', e);
         this.isStreamAudioActive = false;
+        this.ttsPlayback.cancelAll();
       } finally {
         this.isStreamAudioConnecting = false;
         this.onStreamAudioConnectingChange.emit(false);
@@ -864,6 +859,8 @@ export class ConversationFooterComponent implements OnInit, OnChanges, OnDestroy
     } else {
       await this.stopVoice();
       this.isStreamAudioActive = false;
+      // Close-stream-button clicked: stop any playing/queued TTS audio.
+      this.ttsPlayback.cancelAll();
       this.isStreamAudioConnecting = false;
       this.onStreamAudioConnectingChange.emit(false);
     }

package/src/app/component/form/inputs/form-text/form-text.component.ts

@@ -20,7 +20,6 @@ export class FormTextComponent implements OnInit, OnDestroy {
   @ViewChild('div_input') input: ElementRef;
   form: FormGroup<any>;
   inputType: string = 'text'
-  private valueChangesSub?: Subscription;
 
   get fieldBaseId(): string {
     const raw = this.element?.name || this.controlName || 'field';
@@ -46,6 +45,7 @@ export class FormTextComponent implements OnInit, OnDestroy {
     }
     return this.form.controls[name].invalid ? 'true' : 'false';
   }
+  private valueChangesSub?: Subscription;
 
   constructor(private rootFormGroup: FormGroupDirective,
               private elementRef: ElementRef) { }

package/src/app/component/last-message/last-message.component.ts

@@ -12,7 +12,7 @@ import { MIN_WIDTH_IMAGES } from 'src/app/utils/constants';
 import { ConversationModel } from 'src/chat21-core/models/conversation';
 import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
-import { commandToMessage, conversationToMessage, isEmojii, isFrame, isImage, isMine, isSameSender, isSender } from 'src/chat21-core/utils/utils-message';
+import { commandToMessage, conversationToMessage, isEmojii, isFrame, isImage, isSameSender } from 'src/chat21-core/utils/utils-message';
 
 
 @Component({
@@ -59,9 +59,6 @@ export class LastMessageComponent implements OnInit, AfterViewInit, OnDestroy {
   ngOnChanges(changes: SimpleChanges) {
     this.logger.debug('[LASTMESSAGE] onChanges', changes)
     if(this.conversation){
-      
-      /** if the message is sent by the logged user, do not add it to the messages array */
-      if(isSender(this.conversation.sender, this.g.senderId)) return;
 
       if(this.conversation.attributes && this.conversation.attributes.commands){
         this.addCommandMessage(this.conversation)

package/src/app/component/message/audio-sync/audio-sync.component.spec.ts

@@ -1,5 +1,6 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { CommonModule } from '@angular/common';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { Subject } from 'rxjs';
 
 import { AudioSyncComponent } from './audio-sync.component';
 import { TtsAudioPlaybackCoordinator } from 'src/app/providers/tts-audio-playback-coordinator.service';
@@ -9,12 +10,22 @@ import { Globals } from 'src/app/utils/globals';
 describe('AudioSyncComponent', () => {
   let component: AudioSyncComponent;
   let fixture: ComponentFixture<AudioSyncComponent>;
-  let voiceService: { proxyTtsStreamUrl: string | null; proxyTtsUrl: string | null };
+  let voiceService: {
+    proxyTtsStreamUrl: string | null;
+    proxyTtsUrl: string | null;
+    speechStart$: ReturnType<Subject<void>['asObservable']>;
+  };
 
   beforeEach(async () => {
+    const speechStartSource = new Subject<void>();
+    const cancelAllSource = new Subject<void>();
+    const stopAllSource = new Subject<void>();
+    const preemptSource = new Subject<string>();
+
     voiceService = {
       proxyTtsStreamUrl: 'https://speech.example.com/api/tts/stream',
       proxyTtsUrl: 'https://speech.example.com/api/tts',
+      speechStart$: speechStartSource.asObservable(),
     };
 
     await TestBed.configureTestingModule({
@@ -27,15 +38,15 @@ describe('AudioSyncComponent', () => {
             requestStart: (_ownerId: string, start: () => void) => start(),
             releaseIfCurrent: jasmine.createSpy('releaseIfCurrent'),
             release: jasmine.createSpy('release'),
-            stopAllPlayback$: { subscribe: () => ({ unsubscribe: () => undefined }) },
-            preemptPlayback$: { subscribe: () => ({ unsubscribe: () => undefined }) },
+            stopAllPlayback$: stopAllSource.asObservable(),
+            preemptPlayback$: preemptSource.asObservable(),
+            cancelAll$: cancelAllSource.asObservable(),
           },
         },
         { provide: Globals, useValue: { tiledeskToken: 'JWT test-token', jwt: '' } },
         { provide: VoiceService, useValue: voiceService },
       ],
-    })
-    .compileComponents();
+    }).compileComponents();
 
     fixture = TestBed.createComponent(AudioSyncComponent);
     component = fixture.componentInstance;
@@ -79,7 +90,6 @@ describe('AudioSyncComponent', () => {
 
     expect(body).toEqual({
       text: 'hello',
-      streaming: true,
       outputFormat: 'mp3_44100_128',
     });
   });
@@ -96,7 +106,6 @@ describe('AudioSyncComponent', () => {
 
     expect(body).toEqual({
       text: 'hello',
-      streaming: true,
       outputFormat: 'pcm_16000',
     });
   });