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

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

@@ -38,19 +38,32 @@ export class ConversationAudioRecorderComponent {
     this.startTime = Date.now();
     navigator.mediaDevices.getUserMedia({ audio: true })
       .then(stream => {
+
+        this.audioChunks = [];
+
         this.mediaRecorder = new MediaRecorder(stream);
         this.mediaRecorder.start();
         this.isRecording = true;
         this.startRecordingEvent.emit();
         this.mediaRecorder.addEventListener('dataavailable', (event) => {
-          this.audioChunks.push(event.data);
+          if (event.data && event.data.size > 0) {
+            this.audioChunks.push(event.data);
+          }
         });
 
         this.mediaRecorder.addEventListener('stop', () => {
-          this.audioBlob = new Blob(this.audioChunks, { type: 'audio/mpeg' });
+          // ✅ MIME REALE del recorder
+          const mimeType = this.mediaRecorder.mimeType;
+          this.audioBlob = new Blob(this.audioChunks, {
+            type: mimeType
+          });
+
+          // ⭐ chiude microfono
+          stream.getTracks().forEach(track => track.stop());
+
+          this.audioChunks = [];
           this.rawAudioUrl = URL.createObjectURL(this.audioBlob);
           this.audioUrl = this.sanitizer.bypassSecurityTrustUrl(this.rawAudioUrl);
-          this.audioChunks = []; 
           this.endRecordingEvent.emit(this.audioBlob);
         });
       })

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

@@ -13,7 +13,6 @@
           [nameUserTypingNow]="nameUserTypingNow">
         </user-typing>
       </span>
-      
     
       <div id="chat21-sheet-content" class="chat21-sheet-content">
           <div class="chat21-conversation-parts-container">
@@ -120,25 +119,21 @@
 
                       <!-- FILE PENDING UPLOAD -->
                       <!--  -->
-                      <div *ngIf="showUploadProgress" class="msg_container base_sent" >
+                      <div *ngIf="showUploadProgress && !showThinkingMessage" class="msg_container base_sent" >
                         <div class="chat21-spinner active" id="chat21-spinner" style="margin: 0px 6px 0px;">
                           <div class="chat21-bounce1" [ngStyle]="{'background-color': stylesMap.get('iconColor')}"></div>
                           <div class="chat21-bounce2" [ngStyle]="{'background-color': stylesMap.get('iconColor'), 'opacity': 0.4}"></div>
                           <div class="chat21-bounce3" [ngStyle]="{'background-color': stylesMap.get('iconColor'), 'opacity': 0.6}"></div>
                         </div>
-
-                        
                       </div>
 
 
-                      <div *ngIf="isTypings && typingLocation==='content' " class="msg_container base_receive">
-                        <!-- !isSameSender(idUserTypingNow, i) -->
+                      <div *ngIf="isTypings && !showThinkingMessage && typingLocation==='content'" class="msg_container base_receive">
                         <chat-avatar-image *ngIf="idUserTypingNow " class="slide-in-left"  
                           [senderID]="idUserTypingNow"
                           [senderFullname]="nameUserTypingNow"
                           [baseLocation]="baseLocation">
                         </chat-avatar-image>
-
                         <user-typing
                           [ngClass]="{'userTypingNowExist': !idUserTypingNow}"
                           [color]="stylesMap?.get('iconColor')"
@@ -147,7 +142,16 @@
                           [nameUserTypingNow]="nameUserTypingNow">
                         </user-typing>
                       </div>
-                      
+
+                      <div *ngIf="showThinkingMessage" class="msg_container base_receive thinking_receive">
+                        <user-typing class="loading thinking-dots"
+                          [color]="stylesMap?.get('iconColor')"
+                          [translationMap]="translationMap"
+                          [idUserTypingNow]="idUserTypingNow"
+                          [nameUserTypingNow]="nameUserTypingNow">
+                        </user-typing>
+                      </div>
+   
                   </div>
               </div>
           </div>
@@ -155,7 +159,6 @@
       </div>
     </div>  
   </div>
-
 </div>
 
 

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;
@@ -122,6 +122,11 @@
                     text-align: center;
                     padding: 0px 0px 6px 0px
                 }
+                .thinking_receive {
+                    .thinking-dots ::ng-deep > div.spinner{
+                        margin: 25px 30px;
+                    }
+                }
                 /* ====== SET MESSAGES ====== */
                 .messages {
                     border-radius: var(--border-radius-bubble-message);
@@ -265,6 +270,15 @@
     }// end c21-body-container
 }// end c21-body
 
+@keyframes thinking-dot {
+    0%, 80%, 100% {
+        opacity: 0.2;
+    }
+    40% {
+        opacity: 1;
+    }
+}
+
 /* LOADING */
 /*http://tobiasahlin.com/spinkit/*/
 #chat21-spinner {

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

@@ -23,6 +23,7 @@ export class ConversationContentComponent implements OnInit {
   @Input() idUserTypingNow: string;
   @Input() nameUserTypingNow: string;
   @Input() typingLocation: string;
+  @Input() showThinkingMessage: boolean;
   @Input() fullscreenMode: boolean;
   @Input() translationMap: Map< string, string>;
   @Input() stylesMap: Map<string, string>;
@@ -224,7 +225,6 @@ export class ConversationContentComponent implements OnInit {
     // return false;
   }
 
-
   hideOutsideElements(){
     this.onMenuOptionShow.emit(false)
     this.onEmojiiPickerShow.emit(false)

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

@@ -14,94 +14,117 @@
 
 </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()">
-            <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>
+<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>
+                        <!-- <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.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>
+        <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>
+        
+        </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>
+        <!-- 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>
     </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,25 @@
-
+.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;
+}
+.close-chat-container{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    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%;
+    .c21-close{
+        height: 30px !important;
+        margin: 0px !important;
     }
-    //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%;
-      }
-
 }
 
 .icons-container{
@@ -419,3 +421,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;
+    }
+}

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

@@ -42,6 +42,7 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
   @Input() isEmojiiPickerShow: boolean;
   @Input() footerMessagePlaceholder: string;
   @Input() fileUploadAccept: string;
+  @Input() closeChatInConversation: boolean;
   @Input() dropEvent: Event;
   @Input() poweredBy: string;
   @Input() stylesMap: Map<string, string>
@@ -52,6 +53,7 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
   @Output() onChangeTextArea = new EventEmitter<any>();
   @Output() onAttachmentFileButtonClicked = new EventEmitter<any>();
   @Output() onNewConversationButtonClicked = new EventEmitter();
+  @Output() onCloseChatButtonClicked = new EventEmitter();
 
   @ViewChild('chat21_file') public chat21_file: ElementRef;
   // @ViewChild('emojii_container', {read: ViewContainerRef}) selector;
@@ -87,6 +89,7 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
 
   file_size_limit = FILE_SIZE_LIMIT;
   attachmentTooltip: string = '';
+  isErrorNetwork: boolean = false;
 
 
   convertColorToRGBA = convertColorToRGBA;
@@ -513,14 +516,46 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
   onSendRecording(audioBlob: Blob | null) {
     this.isStartRec = false;
     if (audioBlob) {
-      this.convertBlobToBase64(audioBlob);
+      this.prepareAndUpload(audioBlob);
+      // this.convertBlobToBase64(audioBlob);
       this.isStopRec = false;
     } else {
       this.isStopRec = false;
     }
   }
 
+  prepareAndUpload(audioBlob: Blob) {
 
+    this.isFilePendingToUpload = true;
+    
+    // ⭐ NON modificare il MIME
+    const mimeType = audioBlob.type;
+
+    const size = audioBlob.size;
+    const uid = Date.now().toString(36);
+
+    // estensione coerente col MIME REALE
+    let ext = 'mp3';
+    const fileName = `audio-${uid}.${ext}`;
+  
+    const file = new File([audioBlob], fileName, {
+      type: mimeType,
+      lastModified: Date.now()
+    });
+  
+    // ✅ metadata SENZA base64
+    const metadata = {
+      name: fileName,
+      type: 'audio/mp3',
+      uid: uid,
+      size: size
+    };
+    
+    this.logger.log('[UPLOAD] metadata:', metadata);
+  
+    // stesso metodo che già usi
+    this.uploadSingle(metadata, file, '');
+  }
 
   // Funzione per convertire Blob in Base64 usando FileReader
   async convertBlobToBase64(audioBlob: Blob) {
@@ -677,6 +712,10 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
     this.onNewConversationButtonClicked.emit();
   }
 
+  onCloseChat(event){
+    this.onCloseChatButtonClicked.emit();
+  }
+
   // onContinueConversation(){
   //   this.hideTextAreaContent = false;
   //   this.onBackButton.emit(false)

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

@@ -27,7 +27,7 @@
 
 
     <!-- ICON MAXIMIZE -->
-    <button *ngIf="size === 'min' && !fullscreenMode" [attr.disabled]="(isButtonsDisabled)?true:null" tabindex="-1" class="c21-header-button c21-right c21-button-clean" [ngStyle]="{'display': (hideHeaderConversationOptionsMenu)?'none':'flex'}" (click)="onChangeSize('max')" >
+    <button *ngIf="size === 'min' && !fullscreenMode && !isMobile" [attr.disabled]="(isButtonsDisabled)?true:null" tabindex="-1" class="c21-header-button c21-right c21-button-clean" [ngStyle]="{'display': (hideHeaderConversationOptionsMenu)?'none':'flex'}" (click)="onChangeSize('max')" >
         <svg role="img" aria-labelledby="altIconTitle" [ngStyle]="{'fill': stylesMap?.get('foregroundColor') }" xmlns="http://www.w3.org/2000/svg" transform="matrix(-1,0,0,1,0,0)"
             width="17" height="17" viewBox="0 0 17 17">
             <path d="M6.49001 8.30999L3.69 11.11V9.40999C3.69 8.93999 3.31 8.55999 2.84 8.55999C2.37 8.55999 1.99001 8.93999 1.99001 9.40999V14.01H6.59C7.06 14.01 7.44 13.63 7.44 13.16C7.44 12.69 7.06 12.31 6.59 12.31H4.89L7.69 9.50999L6.49001 8.30999ZM9.41 1.98999C8.94 1.98999 8.56001 2.36999 8.56001 2.83999C8.56001 3.30999 8.94 3.68999 9.41 3.68999H11.11L8.31001 6.48999L9.51 7.68999L12.31 4.88999V6.58999C12.31 7.05999 12.69 7.43999 13.16 7.43999C13.63 7.43999 14.01 7.05999 14.01 6.58999V1.98999H9.41Z"></path>
@@ -36,7 +36,7 @@
     </button>
 
      <!-- ICON MINIMIZE -->
-    <button *ngIf="size==='top' && !fullscreenMode" [attr.disabled]="(isButtonsDisabled)?true:null" tabindex="-1" class="c21-header-button c21-right c21-button-clean" [ngStyle]="{'display': (hideHeaderConversationOptionsMenu)?'none':'flex'}" (click)="onChangeSize('min')" >
+    <button *ngIf="size==='top' && !fullscreenMode && !isMobile" [attr.disabled]="(isButtonsDisabled)?true:null" tabindex="-1" class="c21-header-button c21-right c21-button-clean" [ngStyle]="{'display': (hideHeaderConversationOptionsMenu)?'none':'flex'}" (click)="onChangeSize('min')" >
         <svg role="img" aria-labelledby="altIconTitle" class="icon-menu" [ngStyle]="{'fill': stylesMap?.get('foregroundColor')}" xmlns="http://www.w3.org/2000/svg" transform="matrix(-1,0,0,1,0,0)"
             width="17" height="17" viewBox="0 0 17 17">
             <path d="M13.59 5.31h-1.7l3.3-3.3-1.2-1.2-3.3 3.3v-1.7a.85.85 0 1 0-1.7 0v4.6h4.6a.85.85 0 1 0 0-1.7M1.57 9.84c0 .47.38.85.85.85h1.7l-3.3 3.3 1.2 1.2 3.3-3.3v1.7a.85.85 0 1 0 1.7 0v-4.6h-4.6a.85.85 0 0 0-.85.85"></path>
@@ -45,7 +45,7 @@
     </button>
 
     <!-- ICON TOP -->
-    <button *ngIf="size==='max' && !fullscreenMode" [attr.disabled]="(isButtonsDisabled)?true:null" tabindex="-1" class="c21-header-button c21-right c21-button-clean" [ngStyle]="{'display': (hideHeaderConversationOptionsMenu)?'none':'flex'}" (click)="onChangeSize('top')" >
+    <button *ngIf="size==='max' && !fullscreenMode && !isMobile" [attr.disabled]="(isButtonsDisabled)?true:null" tabindex="-1" class="c21-header-button c21-right c21-button-clean" [ngStyle]="{'display': (hideHeaderConversationOptionsMenu)?'none':'flex'}" (click)="onChangeSize('top')" >
         <svg  role="img" aria-labelledby="altIconTitle" [ngStyle]="{'fill': stylesMap?.get('foregroundColor')}" xmlns="http://www.w3.org/2000/svg" transform="matrix(-1,0,0,1,0,0)"
             width="17" height="17" viewBox="0 0 17 17">
             <path d="M3.7,7.6L2.5,6.4C2.2,6,2.2,5.5,2.5,5.2s0.9-0.4,1.2-0.1L7,8.4l-3.3,3.3c-0.4,0.4-0.8,0.3-1.1,0s-0.4-0.9-0.1-1.2l1.2-1.2 H1.5l0-1.7H3.7z"/>

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

@@ -21,6 +21,7 @@ export class ConversationHeaderComponent implements OnInit, OnChanges {
   @Input() isTypings: boolean;
   @Input() nameUserTypingNow: string;
   @Input() typingLocation: string;
+  @Input() isMobile: boolean;
   @Input() isTrascriptDownloadEnabled: boolean;
   @Input() fullscreenMode: boolean;
   @Input() size: 'min' | 'max' | 'top';

package/src/app/component/eyeeye-catcher-card/eyeeye-catcher-card.component.ts

@@ -50,24 +50,6 @@ export class EyeeyeCatcherCardComponent implements OnInit {
     this.displayEyeCatcherCardCloseBtnWrapper = 'none';
     this.displayEyeCatcherCardCloseBtnIsMobileWrapper = 'none';
     this.displayEyeCatcherCardCloseBtn = 'none';
-    /* EYE-CATCHER CLOSE BUTTON SWITCH */
-    this.openIfCallOutTimer();
-  }
-
-
-  /**
-   * OPEN THE EYE-CATCHER CARD
-   * if calloutTimer >= 0
-   */
-  private openIfCallOutTimer() {
-    const that = this;
-    const calloutTimer = this.g.calloutTimer;
-    if (calloutTimer >= 0) {
-        const waitingTime = calloutTimer * 1000;
-        setTimeout(function () {
-            that.openEyeCatcher();
-        }, waitingTime);
-    }
   }
 
   /**

package/src/app/component/home/home.component.html

@@ -14,7 +14,7 @@
             <div class="c21-header-button" [ngStyle]="{'display': (g.hideHeaderCloseButton)?'none':'block'}">
 
                 <!-- ICON MAXIMIZE -->
-                <div *ngIf="size === 'min' && !fullscreenMode" class="c21-size-button">
+                <div *ngIf="size === 'min' && !fullscreenMode && !g?.isMobile" class="c21-size-button">
                     <button [attr.disabled]="(isButtonsDisabled)?true:null" tabindex="-1" class="c21-close-button-body" [ngStyle]="{'display': (hideHeaderConversationOptionsMenu)?'none':'flex'}" (click)="onChangeSize('max')" >
                         <svg role="img" aria-labelledby="altIconTitle" [ngStyle]="{'fill': stylesMap?.get('foregroundColor') }" xmlns="http://www.w3.org/2000/svg" transform="matrix(-1,0,0,1,0,0)"
                             width="17" height="17" viewBox="0 0 17 17">
@@ -25,7 +25,7 @@
                 </div>
 
                 <!-- ICON MINIMIZE -->
-                <div *ngIf="size==='top' && !fullscreenMode" class="c21-size-button">
+                <div *ngIf="size==='top' && !fullscreenMode && !g?.isMobile" class="c21-size-button">
                     <button [attr.disabled]="(isButtonsDisabled)?true:null" tabindex="-1" class="c21-close-button-body" [ngStyle]="{'display': (hideHeaderConversationOptionsMenu)?'none':'flex'}" (click)="onChangeSize('min')" >
                         <svg role="img" aria-labelledby="altIconTitle" class="icon-menu" [ngStyle]="{'fill': stylesMap?.get('foregroundColor')}" xmlns="http://www.w3.org/2000/svg" transform="matrix(-1,0,0,1,0,0)"
                             width="17" height="17" viewBox="0 0 17 17">
@@ -36,7 +36,7 @@
                 </div>
 
                 <!-- ICON TOP -->
-                <div *ngIf="size==='max' && !fullscreenMode" class="c21-size-button">
+                <div *ngIf="size==='max' && !fullscreenMode && !g?.isMobile" class="c21-size-button">
                     <button [attr.disabled]="(isButtonsDisabled)?true:null" tabindex="-1" class="c21-close-button-body" [ngStyle]="{'display': (hideHeaderConversationOptionsMenu)?'none':'flex'}" (click)="onChangeSize('top')" >
                         <svg  role="img" aria-labelledby="altIconTitle" [ngStyle]="{'fill': stylesMap?.get('foregroundColor')}" xmlns="http://www.w3.org/2000/svg" transform="matrix(-1,0,0,1,0,0)"
                             width="17" height="17" viewBox="0 0 17 17">

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, isSameSender } from 'src/chat21-core/utils/utils-message';
+import { commandToMessage, conversationToMessage, isEmojii, isFrame, isImage, isMine, isSameSender, isSender } from 'src/chat21-core/utils/utils-message';
 
 
 @Component({
@@ -59,6 +59,9 @@ 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)