@chat21/chat21-web-widget 5.1.32-rc8 → 5.1.33-rc8

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

@@ -0,0 +1,172 @@
+<div class="footerContainerAlert">
+    <!-- LOGO-->
+    <div id="hiddenFooter" *ngIf="!hideTextAreaContent && poweredBy" class="fade-in-bottom" [class.hideTextReply]="hideTextReply">
+        <div class="c21-powered-by" [innerHTML]="poweredBy" (click)="managePoweredBy($event)"></div>
+    </div>
+
+    <!-- ALERT EMOJI -->
+    <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"/>
+        </svg>
+        <div class="alertText">{{translationMap.get('EMOJI_NOT_ELLOWED')}}</div>
+    </div>
+
+</div>
+
+<!-- TEXTAREA + ICONS: conv active-->
+<div class="textarea-container" *ngIf="!hideTextAreaContent && !hideTextReply">
+
+    <div *ngIf="!isStopRec" class="icons-container">
+        <!-- ICON ATTACHMENT -->
+        <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"
+            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"/>
+                </svg>
+            </span>
+             <input
+                [attr.disabled]="(isFilePendingToUpload || isConversationArchived || hideTextReply)? true : null"
+                tabindex="-1"
+                type="file"
+                [attr.aria-label]="translationMap?.get('BUTTON_ATTACH_FILE')"
+                [accept]="fileUploadAccept"
+                name="chat21-file"
+                id="chat21-file"
+                #chat21_file
+                class="inputfile"
+                style="position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;"
+                (change)="detectFiles($event)"/>
+        </label>
+        <!-- ICON EMOJII -->
+        <label *ngIf="showEmojiFooterButton"
+            for="chat21-emojii"
+            role="button"
+            tabindex="0"
+            [attr.aria-label]="translationMap?.get('EMOJI')"
+            [attr.aria-pressed]="isEmojiiPickerShow ? 'true' : 'false'"
+            class="chat21-textarea-button"
+            [class.active]="!isFilePendingToUpload && !hideTextReply"
+            id="chat21-emoticon-picker"
+            (click)="onEmojiiPickerClicked()"
+            (keydown.enter)="$event.preventDefault(); onEmojiiPickerClicked()"
+            (keydown.space)="$event.preventDefault(); onEmojiiPickerClicked()">
+            <span class="v-align-center">
+                <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"/>
+                    <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"/>
+                </svg>
+            </span>
+        </label>
+    </div>
+
+    <div *ngIf="!isStopRec"
+         class="visible-text-area"
+         [class.hasError]="showAlertEmoji"
+         [class.disabled]="(isConversationArchived || hideTextReply)? true : null">
+      <textarea
+        [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'"
+        start-focus-chat21-conversation-component
+        inputTextArea
+        #textbox
+        rows="1"
+        id="chat21-main-message-context"
+        class='f21textarea c21-button-clean'
+        [(ngModel)]="textInputTextArea"
+        (ngModelChange)="onTextAreaChange()"
+        (keydown)="onkeydown($event)"
+        (paste)="onPaste($event)">
+      </textarea>
+    </div>
+
+    <!-- ICON SEND -->
+    <button type="button"
+        *ngIf="(textInputTextArea !== '' && !isStopRec) || !showAudioRecorderFooterButton"
+        class="chat21-textarea-button c21-button-clean"
+        [class.disabled]="showAlertEmoji"
+        [class.active]="textInputTextArea && !hideTextReply"
+        [attr.aria-label]="translationMap?.get('BUTTON_SEND_MESSAGE')"
+        [attr.disabled]="(showAlertEmoji || !textInputTextArea || hideTextReply) ? true : null"
+        id="chat21-button-send"
+        (click)="onSendPressed($event)">
+        <span class="v-align-center">
+            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24" 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>
+    </button>
+
+    <!-- ICON REC -->
+    <div *ngIf="showAudioRecorderFooterButton && !textInputTextArea"
+        class="chat21-audio-button"
+        [class.active]="isStopRec"
+        id="chat21-button-rec">
+        <chat-audio-recorder
+            [translationMap]="translationMap"
+            (startRecordingEvent)="onStartRecording()"
+            (deleteRecordingEvent)="onDeleteRecording()"
+            (endRecordingEvent)="onEndRecording($event)"
+            (sendRecordingEvent)="onSendRecording($event)"
+            [stylesMap]="stylesMap">
+        </chat-audio-recorder>
+    </div>
+</div>
+
+
+<!-- EMOJII PICKER-->
+<div [style.visibility]="isEmojiiPickerShow?'visible':'hidden'"
+    class="emoji-container"
+    id="emoji-mart-container"
+    role="dialog"
+    [attr.aria-hidden]="!isEmojiiPickerShow"
+    [attr.aria-label]="translationMap?.get('EMOJI')"
+    #emoji_mart_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>
+</div>
+
+<!-- NEW CONV & CONTINE buttons: conv archived-->
+<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">
+            <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" [ngStyle]="{'fill': stylesMap?.get('foregroundColor')}"/>
+          </svg>
+        </span>
+        <span class="v-align-center c21-label-button">
+          {{translationMap?.get('LABEL_START_NW_CONV')}}
+        </span>
+        <div class="clear"></div>
+    </button>
+</div>

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

@@ -1,21 +1,38 @@
 <div class="footerContainerAlert">
     <!-- LOGO-->
     <div id="hiddenFooter" *ngIf="!hideTextAreaContent && poweredBy" class="fade-in-bottom" [class.hideTextReply]="hideTextReply">
-        <div tabindex="-1" class="c21-powered-by" [innerHTML]="poweredBy" (click)="managePoweredBy($event)"></div>
+        <div class="c21-powered-by" [innerHTML]="poweredBy" (click)="managePoweredBy($event)"></div>
     </div>
 
     <!-- ALERT EMOJI -->
-    <div id="textAlert" *ngIf="!hideTextAreaContent && showAlertEmoji" class="fade-in-bottom" [class.hideTextReply]="hideTextReply">
-        <svg 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">
+    <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"/>
-          </svg>
-        <div tabindex="-1" class="alertText">{{translationMap.get('EMOJI_NOT_ELLOWED')}}</div>
+        </svg>
+        <div 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'">
+    <!-- STREAM AUDIO: status + waveform panel above footer -->
+    <div id="streamAudioAlert" *ngIf="!hideTextAreaContent && (isStreamAudioActive || isStreamAudioConnecting)"
+         class="fade-in-bottom stream-audio-alert" [class.hideTextReply]="hideTextReply"
+         role="status" [attr.aria-label]="voiceStatusLabel">
+        <div class="voice-status-row">
+            <span class="voice-status-dot"
+                  [class.voice-status-dot--connecting]="isStreamAudioConnecting && !isStreamAudioActive"
+                  [class.voice-status-dot--listening]="isStreamAudioActive && !isBotSpeaking"
+                  [class.voice-status-dot--processing]="isStreamAudioActive && isBotSpeaking">
+            </span>
+            <span class="voice-status-text">{{ voiceStatusLabel }}</span>
+            <span class="voice-transcript-text" *ngIf="lastVoiceTranscript">{{ lastVoiceTranscript }}</span>
+        </div>
         <chat-stream-audio-spectrum
-            [volume]="currentVolume"
+            mode="alert"
+            [volume]="isBotSpeaking ? 0 : currentVolume"
             [accentColor]="stylesMap?.get('themeColor')">
         </chat-stream-audio-spectrum>
     </div>
@@ -24,23 +41,31 @@
 
 <div class="textarea-container-wrapper" *ngIf="!hideTextAreaContent && !hideTextReply">
     <!-- TEXTAREA + ICONS: conv active-->
-    <div class="textarea-container">
+    <div class="textarea-container" [class.voice-mode]="isStreamAudioActive || isStreamAudioConnecting">
         
-        <div *ngIf="!isStopRec" class="icons-container">
+        <div *ngIf="!isStopRec && !(isStreamAudioActive || isStreamAudioConnecting)" 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">
+            <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" 
+                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 role="img" aria-labelledby="altIconTitle" xmlns="http://www.w3.org/2000/svg" width="24px" height="24" viewBox="0 0 24 24" fill="currentColor">
+                    <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">{{ 'MAX_ATTACHMENT' | translate: { FILE_SIZE_LIMIT: file_size_limit } }}</title>
-                    </svg>
-                    
+                    </svg> 
                 </span>
                 <input
-                    [attr.disabled] = "(isFilePendingToUpload || isConversationArchived || hideTextReply)? true : null"
-                    tabindex="1503" 
+                    [attr.disabled]="(isFilePendingToUpload || isConversationArchived || hideTextReply)? true : null"
+                    tabindex="-1"
                     type="file" 
-                    aria-label="seleziona allegato"
+                    [attr.aria-label]="translationMap?.get('BUTTON_ATTACH_FILE')"
                     [accept]="fileUploadAccept"
                     name="chat21-file"
                     id="chat21-file"
@@ -50,19 +75,24 @@
                     (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()">
+            <label *ngIf="showEmojiFooterButton" 
+                for="chat21-emojii"
+                role="button"
+                tabindex="0"
+                [attr.aria-label]="translationMap?.get('EMOJI')"
+                [attr.aria-pressed]="isEmojiiPickerShow ? 'true' : 'false'"
+                class="chat21-textarea-button"
+                [class.active]="!isFilePendingToUpload && !hideTextReply"
+                id="chat21-emoticon-picker"
+                (click)="onEmojiiPickerClicked()"
+                (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">
                         <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>
@@ -71,22 +101,35 @@
 
 
 
-        <div *ngIf="!isStopRec" class="visible-text-area" [class.hasError]="showAlertEmoji" [class.disabled] = "( isConversationArchived || hideTextReply)? true : null">
-            <!-- isFilePendingToUpload || -->
+        <div *ngIf="!isStopRec" 
+            class="visible-text-area" 
+            [class.stream-active]="isStreamAudioActive || isStreamAudioConnecting" 
+            [class.hasError]="showAlertEmoji" 
+            [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"
+                      [class.voice-inline-dot--connecting]="isStreamAudioConnecting && !isStreamAudioActive"
+                      [class.voice-inline-dot--processing]="isStreamAudioActive && isBotSpeaking">
+                </span>
+                <span class="voice-inline-label">{{ voiceStatusLabel }}</span>
+            </div>
+            <!-- Normal mode: textarea -->
         <textarea 
-            [attr.disabled] = "(hideTextReply)? true : null"
-            [attr.placeholder] ="(footerMessagePlaceholder)? footerMessagePlaceholder : translationMap?.get('LABEL_PLACEHOLDER')"
+            *ngIf="!(isStreamAudioActive || isStreamAudioConnecting)"
+            [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'"
             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>
@@ -94,17 +137,29 @@
         </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)">
+        <button type="button"
+            *ngIf="(textInputTextArea !== '' && !isStopRec) || !showAudioRecorderFooterButton"
+            class="chat21-textarea-button c21-button-clean"
+            [class.disabled]="showAlertEmoji"
+            [class.active]="textInputTextArea && !hideTextReply"
+            [attr.aria-label]="translationMap?.get('BUTTON_SEND_MESSAGE')"
+            [attr.disabled]="(showAlertEmoji || !textInputTextArea || hideTextReply) ? true : null"
+            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">
+                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24" 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>
+        </button>
 
         <!-- ICON REC -->
-        <div *ngIf="showAudioRecorderFooterButton && !textInputTextArea" tabindex="-1" class="chat21-audio-button" [class.active]="isStopRec" id="chat21-button-rec">
+        <div *ngIf="showAudioRecorderFooterButton && !textInputTextArea"
+            class="chat21-audio-button"
+            [class.active]="isStopRec"
+            id="chat21-button-rec">
             <chat-audio-recorder
+                [translationMap]="translationMap"
                 (startRecordingEvent)="onStartRecording()"
                 (deleteRecordingEvent)="onDeleteRecording()"
                 (endRecordingEvent)="onEndRecording($event)"
@@ -115,22 +170,17 @@
 
         <!-- ICON STREAM / CHIUDI STREAM (cerchio, icone bianche su iconColor) -->
         <div *ngIf="showAudioStreamFooterButton" tabindex="-1" id="chat21-button-stream"
-            class="chat21-textarea-button chat21-stream-button" [class.active]="isStreamAudioActive || (!textInputTextArea && !hideTextReply)"
-            (click)="onStreamPressed($event)" [attr.aria-label]="isStreamAudioActive ? (translationMap?.get('CLOSE') || 'Chiudi stream') : (translationMap?.get('STREAM_AUDIO') || 'Stream audio')"
+            class="chat21-textarea-button chat21-stream-button"
+            [class.active]="isStreamAudioActive || isStreamAudioConnecting || (!textInputTextArea && !hideTextReply)"
+            [class.chat21-stream-button--expanded]="isStreamAudioActive || isStreamAudioConnecting"
+            (click)="onStreamPressed($event)" [attr.aria-label]="(isStreamAudioActive || isStreamAudioConnecting) ? (translationMap?.get('CLOSE') || 'Chiudi stream') : (translationMap?.get('STREAM_AUDIO') || 'Stream audio')"
             [ngStyle]="{ 'background-color': stylesMap?.get('iconColor') || stylesMap?.get('themeColor') }">
-            <span class="v-align-center chat21-stream-button__icon" *ngIf="!isStreamAudioActive">
-                <svg role="img" xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 30 30" fill="#ffffff" aria-hidden="true" preserveAspectRatio="xMidYMid meet">
-                    <path class="s0" d="m5.21 7.41c-1.21 0-2.21 0.99-2.21 2.21v8.14c0 1.21 0.99 2.21 2.21 2.21 1.22 0 2.21-0.99 2.21-2.21v-8.14c0-1.21-0.99-2.21-2.21-2.21z"/>
-                    <path class="s0" d="m11.64 3.01c-1.22 0-2.21 0.99-2.21 2.2v16.94c0 1.21 0.99 2.2 2.21 2.2 1.22 0 2.21-0.98 2.21-2.2v-16.94c0-1.21-0.99-2.21-2.21-2.21z"/>
-                    <path class="s0" d="m15.86 9.25v8.88c0 1.21 0.99 2.21 2.21 2.21 1.22 0 2.21-0.99 2.21-2.21v-8.88c0-1.22-0.99-2.21-2.21-2.21-1.22 0-2.21 0.99-2.21 2.21z"/>
-                    <path class="s0" d="m24.5 8.97c-1.22 0-2.21 0.99-2.21 2.21v5.02c0 1.22 0.99 2.21 2.21 2.21 1.22 0 2.21-0.99 2.21-2.21v-5.02c0-1.21-0.99-2.21-2.21-2.21z"/>
-                </svg>
-            </span>
-            <span class="v-align-center chat21-stream-button__icon" *ngIf="isStreamAudioActive">
-                <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#ffffff" aria-hidden="true">
-                    <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/>
-                </svg>
-            </span>
+            <chat-stream-audio-spectrum
+                mode="button"
+                [active]="isStreamAudioActive || isStreamAudioConnecting"
+                [volume]="currentVolume"
+                [translationMap]="translationMap">
+            </chat-stream-audio-spectrum>
         </div>
     </div>
 
@@ -160,9 +210,15 @@
 
 
 <!-- EMOJII PICKER-->
-<div [style.visibility]="isEmojiiPickerShow?'visible':'hidden'"  class="emoji-container"  id="emoji-mart-container" #emoji_mart_container>
+<div [style.visibility]="isEmojiiPickerShow?'visible':'hidden'"
+    class="emoji-container"
+    id="emoji-mart-container"
+    role="dialog"
+    [attr.aria-hidden]="!isEmojiiPickerShow"
+    [attr.aria-label]="translationMap?.get('EMOJI')"
+    #emoji_mart_container>
     <!-- <ng-container #emojii_container></ng-container> -->
-        <emoji-mart id="emoji-mart"
+    <emoji-mart id="emoji-mart"
         *ngIf="showEmojiPicker"
         class="emoji-mart"
         [showPreview]="emojiiOptions?.showPreview"
@@ -178,10 +234,10 @@
 
 <!-- NEW CONV & CONTINE buttons: conv archived-->
 <div id="floating-container" *ngIf="hideTextAreaContent" class="fade-in-bottom" start-focus-chat21-conversation-component> 
-    <button tabindex="1040" aflistconv #aflistconv  class="c21-button-primary" (click)="openNewConversation()" [ngStyle]="{'background-color': stylesMap.get('themeColor'), 'border-color': stylesMap.get('themeColor'), 'color': stylesMap?.get('foregroundColor')}">
+    <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 [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 aria-hidden="true" focusable="false" 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>
         </span>
         <span class="v-align-center c21-label-button">
@@ -189,10 +245,4 @@
         </span>  
         <div class="clear"></div>
     </button>
-    <!-- <button *ngIf="showContinueConversationButton" tabindex="1040"  class="c21-button-primary" (click)="onContinueConversation()" [ngStyle]="{'background-color': stylesMap.get('themeColor'), 'border-color': stylesMap.get('themeColor'), 'color': stylesMap?.get('foregroundColor')}">
-        <span class="v-align-center c21-label-button">
-          {{translationMap?.get('CONTINUE')}}
-        </span>  
-        <div class="clear"></div>
-    </button> -->
 </div>

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

@@ -9,6 +9,7 @@
     justify-content: space-between;
     gap: 8px;
 }
+
 .close-chat-container{
     display: flex;
     flex-direction: column;
@@ -32,6 +33,7 @@
 
 .visible-text-area {
     width: 70%;
+    transition: width 220ms ease;
     // margin: 12px 0px;
     pointer-events: auto;
     border-radius: var(--chat-footer-border-radius);
@@ -42,6 +44,15 @@
     &.hasError{
         box-shadow: 0 0 0 1px var(--chat-footer-border-color-error) inset;
     }
+
+    &.stream-active {
+        flex: 1;
+        width: auto;
+        min-width: 0;
+        background-color: transparent;
+        display: flex;
+        align-items: center;
+    }
 }
 
 .chat21-textarea-button {
@@ -90,9 +101,14 @@
     height: 36px;
     min-width: 36px;
     border-radius: 50%;
+    overflow: hidden;
     box-sizing: border-box;
     flex-shrink: 0;
     color: #ffffff;
+    transition:
+        min-width 220ms ease,
+        border-radius 180ms ease,
+        padding 180ms ease;
 
     .chat21-stream-button__icon svg {
         width: 20px;
@@ -106,6 +122,19 @@
         background: rgba(255, 255, 255, 0.2) !important;
         border-radius: 50%;
     }
+
+    &.chat21-stream-button--expanded {
+        min-width: 120px;
+        border-radius: 999px;
+        padding: 0 14px;
+        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,
@@ -393,13 +422,13 @@ textarea:active{
 #streamAudioAlert {
     bottom: 100%;
     width: 100%;
-    min-height: var(--chat-footer-stream-button-height);
+    height: var(--chat-footer-stream-button-height);
     display: flex;
-    align-items: center;
+    flex-direction: column;
     justify-content: center;
     position: absolute;
-    padding: var(--chat-footer-stream-button-padding);
-    /* Satinato / vetro: più trasparenza, blur più marcato */
+    padding: 8px 16px;
+    overflow: hidden;
     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);
@@ -407,10 +436,61 @@ textarea:active{
         inset 0 1px 0 rgba(255, 255, 255, 0.28),
         0 1px 0 rgba(0, 0, 0, 0.05);
 
+    .voice-status-row {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        margin-bottom: 6px;
+        min-height: 18px;
+    }
+
+    .voice-status-dot {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        flex-shrink: 0;
+        background-color: #b0b0b0;
+        animation: pulse-dot 2s ease-in-out infinite;
+
+        &--connecting {
+            background-color: #f59e0b;
+        }
+        &--listening {
+            background-color: #22c55e;
+        }
+        &--processing {
+            background-color: #3b82f6;
+            animation: pulse-dot 1s ease-in-out infinite;
+        }
+    }
+
+    .voice-status-text {
+        font-size: 12px;
+        font-weight: 600;
+        letter-spacing: 0.02em;
+        color: var(--chat-footer-color);
+        white-space: nowrap;
+    }
+
+    .voice-transcript-text {
+        font-size: 11px;
+        font-style: italic;
+        color: var(--dark-gray);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        flex: 1;
+        min-width: 0;
+
+        &::before {
+            content: '· ';
+        }
+    }
+
     &.hideTextReply {
         position: unset;
-        min-height: auto;
-        padding: 16px 0;
+        height: auto;
+        padding: 16px;
         box-shadow: none;
         backdrop-filter: none;
         -webkit-backdrop-filter: none;
@@ -497,4 +577,50 @@ textarea:active{
     &.inactive {
         bottom: -52px;
     }
-}
+}
+.voice-preview {
+    font-style: italic;
+    opacity: 0.65;
+}
+
+// Voice mode: footer row layout when voice UI is active
+.textarea-container.voice-mode {
+    justify-content: flex-end;
+}
+
+// Inline voice status chip (inside .visible-text-area when stream active)
+.voice-inline-status {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 0 4px;
+
+    .voice-inline-dot {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        flex-shrink: 0;
+        background-color: #22c55e;
+        animation: pulse-dot 2s ease-in-out infinite;
+
+        &--connecting {
+            background-color: #f59e0b;
+        }
+        &--processing {
+            background-color: #3b82f6;
+            animation: pulse-dot 1s ease-in-out infinite;
+        }
+    }
+
+    .voice-inline-label {
+        font-size: 12px;
+        font-weight: 500;
+        color: var(--dark-gray);
+        white-space: nowrap;
+    }
+}
+
+@keyframes pulse-dot {
+    0%, 100% { opacity: 1; transform: scale(1); }
+    50%       { opacity: 0.45; transform: scale(0.75); }
+}