@chat21/chat21-web-widget 5.1.34 → 5.2.1

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

@@ -161,6 +161,11 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
   membersConversation = ['SYSTEM'];
   // ========== end:: typying =======
 
+  // ========== begin:: stream audio ======= //
+  public isStreamAudioActive = false;
+  public isStreamAudioConnecting = false;
+  // ========== end:: stream audio ======= //
+
   @ViewChild(ConversationFooterComponent) conversationFooter: ConversationFooterComponent
   @ViewChild(ConversationContentComponent) conversationContent: ConversationContentComponent
   conversationHandlerService: ConversationHandlerService
@@ -246,7 +251,21 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
       'CONTINUE',
       'EMOJI_NOT_ELLOWED',
       'ATTACHMENT',
-      'EMOJI'
+      'EMOJI',
+      'BUTTON_ATTACH_FILE',
+      'BUTTON_SEND_MESSAGE',
+      'BUTTON_RECORD_AUDIO',
+      'BUTTON_DELETE_AUDIO',
+      'BUTTON_SEND_AUDIO',
+      'BUTTON_PLAY_AUDIO',
+      'BUTTON_PAUSE_AUDIO',
+      'SKIP_TO_COMPOSER',
+      'CLOSE_CHAT',
+      'CLOSE',
+      'VOICE_CONNECTING',
+      'VOICE_LISTENING',
+      'VOICE_PROCESSING',
+      'STREAM_AUDIO'
     ];
 
     const keysContent = [
@@ -266,13 +285,21 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
       'LABEL_THINKING',
       'LABEL_TO',
       'ARRAY_DAYS',
+      'CONVERSATION_LOG_LABEL',
+      'BUTTON_SCROLL_TO_BOTTOM',
+      'CAROUSEL_PREVIOUS',
+      'CAROUSEL_NEXT',
+      'CAROUSEL_LABEL',
+      'CAROUSEL_SLIDE_LABEL'
     ];
 
     const keysPreview= [
       'BACK', 
       'CLOSE',
       'LABEL_PLACEHOLDER',
-      'LABEL_PREVIEW'
+      'LABEL_PREVIEW',
+      'BUTTON_CLOSE_PREVIEW',
+      'BUTTON_SEND_MESSAGE'
     ];
 
     const keysCloseChatDialog= [
@@ -822,6 +849,10 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
             this.showThinkingMessage = false;
           }
 
+          if (this.isStreamAudioActive && msg.sender !== this.senderId) {
+            this.conversationFooter?.interruptStreamDueToPeerMessage();
+          }
+
           that.newMessageAdded(msg);
           // Update badge based on the latest message received from the server.
           // We rely on `messages` being kept in-sync by the conversation handler.
@@ -1032,6 +1063,21 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
 
   
 
+ /**
+  * Programmatically moves keyboard focus to the message composer textarea.
+  * Wired to the visible-on-focus skip link in conversation.component.html (WCAG 2.4.1 Bypass Blocks).
+  */
+ skipToCompose() {
+   try {
+     const textarea = document.getElementById('chat21-main-message-context') as HTMLTextAreaElement | null;
+     if (textarea) {
+       textarea.focus();
+     }
+   } catch(e) {
+     this.logger.warn('[CONV-COMP] skipToCompose error', e);
+   }
+ }
+
  scrollToBottom() {
   this.conversationContent.scrollToBottom();
   // const that = this;
@@ -1383,6 +1429,28 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
     this.logger.debug('[CONV-COMP] floating onNewConversationButtonClicked')
     this.onNewConversationButtonClicked.emit()
   }
+
+  /** CALLED BY: conv-footer component */
+  onStreamAudioActiveChange(event: boolean){
+    this.isStreamAudioActive = event
+  }
+  /** CALLED BY: conv-footer when connecting state changes */
+  onStreamAudioConnectingChange(event: boolean){
+    this.isStreamAudioConnecting = event
+  }
+  /** CALLED BY: conv-footer component */
+  onCloseChatButtonClickedFN(event){
+    this.logger.debug('[CONV-COMP] onCloseChatButtonClicked::::', event)
+    this.onCloseChat()
+  }
+
+  /**
+   * True quando è visibile il pulsante chiudi stream (`.close-stream-button`, `isStreamAudioActive`).
+   * Solo in quel caso il bottom del foglio include `--chat-footer-stream-button-height`.
+   */
+  closeStreamButtonActiveForSheetBottom(): boolean {
+    return !!(this.g?.showAudioStreamFooterButton && (this.isStreamAudioActive || this.isStreamAudioConnecting));
+  }
   // =========== END: event emitter function ====== //
 
 

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

@@ -1,32 +1,44 @@
 <div class="audio-recorder">
-  <button *ngIf="audioUrl" (click)="deleteRecording()">
+  <button *ngIf="audioUrl" type="button" [attr.aria-label]="translationMap?.get('BUTTON_DELETE_AUDIO') || 'Delete recording'" (click)="deleteRecording()">
     <span class="v-align-center">
-      <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px">
+      <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px">
         <path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm80-160h80v-360h-80v360Zm160 0h80v-360h-80v360Z"/>
       </svg>
-      <!-- <i class="material-icons">delete_outline</i> -->
     </span>
   </button>
 
-  <chat-audio  class="test" *ngIf="audioBlob && audioUrl"
-    [audioBlob] = "audioBlob"
+  <chat-audio class="test" *ngIf="audioBlob && audioUrl"
+    [audioBlob]="audioBlob"
     [color]="'var(--chat-footer-color)'"
+    [translationMap]="translationMap"
     [stylesMap]="stylesMap">
   </chat-audio>
-    
-  <button *ngIf="!audioUrl" class="mic-button" (mousedown)="startRecording($event)" (mouseup)="stopRecording($event)" (touchstart)="startRecording($event)" (touchend)="stopRecording($event)">
-    <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px">
+
+  <button *ngIf="!audioUrl"
+      type="button"
+      class="mic-button"
+      [attr.aria-label]="translationMap?.get('BUTTON_RECORD_AUDIO') || 'Hold to record an audio message'"
+      [attr.aria-pressed]="isRecording ? 'true' : 'false'"
+      (mousedown)="startRecording($event)"
+      (mouseup)="stopRecording($event)"
+      (touchstart)="startRecording($event)"
+      (touchend)="stopRecording($event)"
+      (keydown.space)="$event.preventDefault(); !isRecording && startRecording($event)"
+      (keyup.space)="$event.preventDefault(); isRecording && stopRecording($event)">
+    <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px">
       <path d="M480-400q-50 0-85-35t-35-85v-240q0-50 35-85t85-35q50 0 85 35t35 85v240q0 50-35 85t-85 35Zm0-240Zm-40 520v-123q-104-14-172-93t-68-184h80q0 83 58.5 141.5T480-320q83 0 141.5-58.5T680-520h80q0 105-68 184t-172 93v123h-80Zm40-360q17 0 28.5-11.5T520-520v-240q0-17-11.5-28.5T480-800q-17 0-28.5 11.5T440-760v240q0 17 11.5 28.5T480-480Z"/>
     </svg>
   </button>
-  <!-- <button *ngIf="isRecording" (click)="stopRecording()"><i class="material-icons">pause_circle_outline</i></button> -->
-  
-  <button *ngIf="audioUrl" (click)="sendMessage()">
+
+  <button *ngIf="audioUrl"
+      type="button"
+      [attr.aria-label]="translationMap?.get('BUTTON_SEND_AUDIO') || 'Send audio message'"
+      (click)="sendMessage()">
     <span class="v-align-center">
-        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  height="20" width="24" viewBox="0 0 24 20" xml:space="preserve">
+        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="20" width="24" viewBox="0 0 24 20" xml:space="preserve">
             <path d="M1.8,18.9V1.7L22,10.3L1.8,18.9z M3.9,15.6l12.6-5.4L3.9,4.9v3.7l6.4,1.6l-6.4,1.6V15.6z M3.9,15.6V4.9v7V15.6z"/>
         </svg>
     </span>
   </button>
 
-</div>
+</div>

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

@@ -1,23 +1,141 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
 
 import { ConversationAudioRecorderComponent } from './conversation-audio-recorder.component';
 
-describe('AudioRecorderComponent', () => {
+describe('ConversationAudioRecorderComponent', () => {
   let component: ConversationAudioRecorderComponent;
   let fixture: ComponentFixture<ConversationAudioRecorderComponent>;
+  let stopListeners: { stop?: () => void; data?: (e: { data: Blob }) => void };
+  let mediaRecorderInstance: {
+    start: jasmine.Spy;
+    stop: jasmine.Spy;
+    mimeType: string;
+    addEventListener: jasmine.Spy;
+  };
 
   beforeEach(async () => {
+    stopListeners = {};
+    mediaRecorderInstance = {
+      start: jasmine.createSpy('start'),
+      stop: jasmine.createSpy('stop').and.callFake(() => {
+        const fn = stopListeners.stop;
+        if (fn) {
+          fn();
+        }
+      }),
+      mimeType: 'audio/webm',
+      addEventListener: jasmine.createSpy('addEventListener').and.callFake((ev: string, fn: any) => {
+        if (ev === 'stop') {
+          stopListeners.stop = fn;
+        }
+        if (ev === 'dataavailable') {
+          stopListeners.data = fn;
+        }
+      }),
+    };
+
+    const stream = {
+      getTracks: () => [{ stop: jasmine.createSpy('trackStop') }],
+    };
+
+    spyOn(window.navigator.mediaDevices, 'getUserMedia').and.returnValue(Promise.resolve(stream as any));
+    (window as any).MediaRecorder = jasmine.createSpy('MediaRecorder').and.returnValue(mediaRecorderInstance);
+
     await TestBed.configureTestingModule({
-      declarations: [ ConversationAudioRecorderComponent ]
-    })
-    .compileComponents();
+      declarations: [ConversationAudioRecorderComponent],
+    }).compileComponents();
 
     fixture = TestBed.createComponent(ConversationAudioRecorderComponent);
     component = fixture.componentInstance;
+    component.translationMap = new Map();
+    component.stylesMap = new Map();
+    spyOn(component.startRecordingEvent, 'emit');
+    spyOn(component.endRecordingEvent, 'emit');
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  describe('startRecording', () => {
+    it('should preventDefault on touchstart', fakeAsync(() => {
+      const ev = { type: 'touchstart', preventDefault: jasmine.createSpy('pd') } as any;
+      component.startRecording(ev);
+      tick();
+      expect(ev.preventDefault).toHaveBeenCalled();
+      expect(component.startRecordingEvent.emit).toHaveBeenCalled();
+    }));
+
+    it('should request microphone and start MediaRecorder on mousedown', fakeAsync(() => {
+      const ev = new MouseEvent('mousedown');
+      component.startRecording(ev);
+      tick();
+      expect(navigator.mediaDevices.getUserMedia).toHaveBeenCalledWith({ audio: true });
+      expect(mediaRecorderInstance.start).toHaveBeenCalled();
+      expect(component.isRecording).toBe(true);
+    }));
+
+    it('should log when getUserMedia fails', fakeAsync(() => {
+      (navigator.mediaDevices.getUserMedia as jasmine.Spy).and.returnValue(Promise.reject(new Error('denied')));
+      spyOn(console, 'error');
+      component.startRecording(new MouseEvent('mousedown'));
+      tick();
+      expect(console.error).toHaveBeenCalled();
+    }));
+  });
+
+  describe('stopRecording', () => {
+    it('should discard very short press without stopping recorder', fakeAsync(() => {
+      component.startTime = Date.now();
+      component.stopRecording(new MouseEvent('mouseup'));
+      tick(400);
+      expect(mediaRecorderInstance.stop).not.toHaveBeenCalled();
+    }));
+
+    it('should stop recorder after long press', fakeAsync(() => {
+      component.mediaRecorder = mediaRecorderInstance as any;
+      component.startTime = Date.now() - 600;
+      component.stopRecording(new MouseEvent('mouseup'));
+      tick(400);
+      expect(mediaRecorderInstance.stop).toHaveBeenCalled();
+    }));
+
+    it('should preventDefault on touchend', () => {
+      const ev = { type: 'touchend', preventDefault: jasmine.createSpy('pd') } as any;
+      component.stopRecording(ev);
+      expect(ev.preventDefault).toHaveBeenCalled();
+    });
+  });
+
+  describe('deleteRecording', () => {
+    it('should reset state and emit', () => {
+      spyOn(component.deleteRecordingEvent, 'emit');
+      component.audioUrl = {} as any;
+      component.audioBlob = new Blob();
+      component.deleteRecording();
+      expect(component.audioUrl).toBeNull();
+      expect(component.audioBlob).toBeNull();
+      expect(component.deleteRecordingEvent.emit).toHaveBeenCalledWith(null);
+    });
+  });
+
+  describe('sendMessage', () => {
+    it('should emit blob and clear url when recording exists', () => {
+      spyOn(component.sendRecordingEvent, 'emit');
+      const b = new Blob(['a'], { type: 'audio/webm' });
+      component.audioBlob = b;
+      component.audioUrl = {} as any;
+      component.sendMessage();
+      expect(component.sendRecordingEvent.emit).toHaveBeenCalledWith(b);
+      expect(component.audioUrl).toBeNull();
+    });
+
+    it('should no-op when there is no audioUrl', () => {
+      spyOn(component.sendRecordingEvent, 'emit');
+      component.audioUrl = null;
+      component.sendMessage();
+      expect(component.sendRecordingEvent.emit).not.toHaveBeenCalled();
+    });
+  });
 });

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

@@ -9,6 +9,7 @@ import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
 export class ConversationAudioRecorderComponent {
 
   @Input() stylesMap: Map<string, string>;
+  @Input() translationMap: Map<string, string>;
   @Output() startRecordingEvent = new EventEmitter<void>();
   @Output() deleteRecordingEvent = new EventEmitter<void>();
   @Output() endRecordingEvent = new EventEmitter<Blob | null>();

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

@@ -2,7 +2,12 @@
 
   <div class="c21-body-container">
   
-    <div class="c21-body-content" tabindex="1520" aria-label=" messaggi della conversazione: ">
+    <div class="c21-body-content"
+         role="log"
+         aria-live="polite"
+         aria-relevant="additions text"
+         aria-atomic="false"
+         [attr.aria-label]="translationMap?.get('CONVERSATION_LOG_LABEL') || 'Conversation messages'">
   
       <!-- USER TYPING (WAIT MESSAGE)  -->
       <span *ngIf="messages && this.messages.length === 0 && !isTypings">
@@ -19,21 +24,22 @@
               <div #scrollMe id="scroll-me" (scroll)="onScroll($event)">
     
                   <div id="{{idDivScroll}}" class="c21-contentScroll" > <!-- (resized)="onResized($event)" -->
-                      <div *ngFor="let message of messages; let first = first; let last = last; let i = index" tabindex="1521" class="rowMsg">
-    
+                      <div *ngFor="let message of messages; let first = first; let last = last; let i = index" class="rowMsg">
+
                           <!-- message SENDER:: -->
-                          <div role="messaggio" *ngIf="messageType(MESSAGE_TYPE_MINE, message)" 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" -->
                             <chat-bubble-message class="messages msg_sent"
-                              [class.no-background]="(isImage(message) || isFrame(message)) && ((message?.text && message?.text.trim() === '') || !message?.text)"  
+                              [class.no-background]="(isImage(message) || isFrame(message)) && ((message?.text && message?.text.trim() === '') || !message?.text)"
                               [class.emoticon]="isEmojii(message?.text)"
                               [ngStyle]="{'background': stylesMap.get('bubbleSentBackground'), 'color': stylesMap.get('bubbleSentTextColor')}"
                               [ngClass]="{'button-in-msg' : message?.metadata && message?.metadata?.button}"
                               [message]="message"
                               [fontColor]="stylesMap.get('bubbleSentTextColor')"
                               [stylesMap]="stylesMap"
+                              [translationMap]="translationMap"
                               (onBeforeMessageRender)="onBeforeMessageRenderFN($event)"
                               (onAfterMessageRender)="onAfterMessageRenderFN($event)"
                               (onElementRendered)="onElementRenderedFN($event)">
@@ -47,9 +53,9 @@
                           </div>
     
                           <!-- message RECIPIENT:: -->
-                          <div role="messaggio" *ngIf="messageType(MESSAGE_TYPE_OTHERS, message)" class="msg_container base_receive">
+                          <div role="article" *ngIf="messageType(MESSAGE_TYPE_OTHERS, message)" class="msg_container base_receive">
                             
-                            <chat-avatar-image *ngIf="!isSameSender(message?.sender, i)" 
+                            <chat-avatar-image *ngIf="!isSameSender(message?.sender, i) && !isStreamAudioActive"
                               [ngClass]="{'slide-in-left': false}"    
                               [senderID]="message?.sender"
                               [senderFullname]="message?.sender_fullname"
@@ -60,14 +66,17 @@
                             <!-- [ngClass]="{'slide-in-left': !isFirstMessage(message?.sender, i)}"  -->
                             <chat-bubble-message class="messages msg_receive"
                               [ngClass]="{'slide-in-left': false}"
-                              [class.no-background]="(isImage(message) || isFrame(message) || isCarousel(message)) && ((message?.text && message?.text.trim() === '') || !message?.text)"  
+                              [class.no-background]="(isImage(message) || isFrame(message) || isCarousel(message)) && ((message?.text && message?.text.trim() === '') || !message?.text)"
                               [class.emoticon]="isEmojii(message?.text)"
-                              [style.margin-left]="isSameSender(message?.sender, i)? 'calc(var(--avatar-width) + 10px)': null"
+                              [class.fullSizeMessage]="isStreamAudioActive"
+                              [style.margin-left]="isSameSender(message?.sender, i) && !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"
                               [fontColor]="stylesMap.get('bubbleReceivedTextColor')"
                               [stylesMap]="stylesMap"
+                              [translationMap]="translationMap"
+                              [streamOnArrival]="false"
                               (onBeforeMessageRender)="onBeforeMessageRenderFN($event)"
                               (onAfterMessageRender)="onAfterMessageRenderFN($event)"
                               (onElementRendered)="onElementRenderedFN($event)">
@@ -110,6 +119,7 @@
                               [isConversationArchived]="isConversationArchived"
                               [isLastMessage] = "isLastMessage(message?.uid)"
                               [stylesMap]="stylesMap"
+                              [translationMap]="translationMap"
                               (onElementRendered)="onElementRenderedFN($event)"
                               (onAttachmentButtonClicked)="onAttachmentButtonClickedFN($event)">
                             </chat-carousel>
@@ -134,9 +144,10 @@
                           [senderFullname]="nameUserTypingNow"
                           [baseLocation]="baseLocation">
                         </chat-avatar-image>
+                        
                         <user-typing
-                          [ngClass]="{'userTypingNowExist': !idUserTypingNow}"
                           [color]="stylesMap?.get('iconColor')"
+                          [ngClass]="{'userTypingNowExist': !idUserTypingNow}"
                           [translationMap]="translationMap"
                           [idUserTypingNow]="idUserTypingNow"
                           [nameUserTypingNow]="nameUserTypingNow">
@@ -145,7 +156,9 @@
 
                       <div *ngIf="showThinkingMessage && lastServerSenderKind === 'bot'" class="msg_container base_receive thinking_receive">
                         <user-typing class="loading thinking-dots"
+                          [class.fullSize]="isStreamAudioActive"
                           [color]="stylesMap?.get('iconColor')"
+                          [class.fullSize]="isStreamAudioActive"
                           [translationMap]="translationMap"
                           [idUserTypingNow]="idUserTypingNow"
                           [nameUserTypingNow]="nameUserTypingNow">

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

@@ -27,6 +27,10 @@
     margin: 25px 50px
 }
 
+:host .loading.fullSize ::ng-deep > div.spinner{
+    margin: 50px 0px !important;
+}
+
 // ============= CSS c21-body ================= //
 .c21-body {
     // -webkit-box-shadow: inset 0 10px 10px -10px rgba(0,0,0,0.4);
@@ -242,6 +246,11 @@
                         height: fit-content;
                         width: auto;
 
+                        &.fullSizeMessage {
+                            max-width: 100%;
+                            margin: auto 0 auto 0 !important;
+                        }
+
                     }
                     .msg_receive.json-resources{
                         min-height: unset;
@@ -283,6 +292,15 @@
     }// end c21-body-container
 }// end c21-body
 
+/* Solo con pulsante chiudi stream (stream in ascolto): altezza extra come #streamAudioAlert */
+:host-context(#chat21-conversation-component.chat21-conversation--close-stream-active) .c21-body .c21-body-container .c21-body-content .chat21-sheet-content {
+    bottom: calc(
+        var(--chat-footer-logo-height) +
+        var(--chat-footer-height) +
+        var(--chat-footer-stream-button-height)
+    );
+}
+
 @keyframes thinking-dot {
     0%, 80%, 100% {
         opacity: 0.2;