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

package/playwright.config.ts

@@ -0,0 +1,41 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './tests',
+  timeout: 120_000,
+  expect: { timeout: 30_000 },
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: 'html',
+  use: {
+    baseURL: 'http://127.0.0.1:4203',
+    trace: 'on-first-retry',
+  },
+
+  /**
+   * Solo Chromium: i test TWP chiamano API Tiledesk reali; più browser in parallelo
+   * aumentano flakiness. Per Firefox/WebKit decommentare i progetti sotto.
+   */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+    // { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
+    // { name: 'webkit', use: { ...devices['Desktop Safari'] } },
+  ],
+
+  webServer: {
+    command: 'npx ng serve widget --port 4203 --host 127.0.0.1',
+    url: 'http://127.0.0.1:4203/',
+    reuseExistingServer: !process.env.CI,
+    timeout: 300_000,
+    stdout: 'pipe',
+    stderr: 'pipe',
+  },
+});

package/src/app/app.component.html

@@ -1,5 +1,5 @@
-
-<div id="tiledesk-container" [class.active]="g.isShown" tabindex="9999"> 
+<!-- tabindex="9999" -->
+<div id="tiledesk-container" [class.active]="g.isShown"> 
 
   <div id="chat21-conversations"
     [ngClass]="{ 'swing-in-bottom-fwd' : g.isOpen === true, 'full-screen-mode' : g.fullscreenMode === true, 'c21-align-left' : g.align === 'left', 'c21-align-right' : g.align !== 'left'}"

package/src/app/app.component.scss

@@ -50,8 +50,18 @@ body {
     margin:0px;
 }
 
-:focus {outline: none !important;}
-::-moz-focus-inner {border:0;}
+/* Keyboard focus ring scoped to the widget host only (WCAG 2.4.7) */
+chat-root *:focus:not(:focus-visible) {
+    outline: none;
+}
+chat-root *:focus-visible {
+    outline: 2px solid var(--c21-focus-ring, #1a73e8);
+    outline-offset: 2px;
+}
+
+::-moz-focus-inner {
+    border: 0;
+}
 
 
 
@@ -242,10 +252,7 @@ chat-root {
     height: 100%;
     
     // ========= BEGIN: RESET CSS TAG ========= //
-    *:focus {
-        outline: none;
-    }
-    button{
+    button {
         cursor: pointer;
     }
 
@@ -255,16 +262,21 @@ chat-root {
 
     textarea,
     textarea:visited,
-    textarea:focus,
     textarea:hover,
-    textarea:active{
-        // all: unset;
+    textarea:active {
         line-height: 20px!important;
-        outline: none!important;
-        box-shadow:none!important;
+        box-shadow: none!important;
         border: 0px solid var(--trasp-light-black)!important;
     }
 
+    textarea:focus:not(:focus-visible) {
+        outline: none!important;
+    }
+
+    textarea:focus-visible {
+        outline: 0px !important;
+    }
+
     // ========= BEGIN: CSS APP.COMPONENT ========= //
     .c21-button-clean {
         -webkit-appearance: initial;
@@ -403,7 +415,7 @@ chat-root {
             }
         }
         button.c21-button-primary:hover,
-        button.c21-button-primary:focus,
+        button.c21-button-primary:focus:not(:focus-visible),
         button.c21-button-primary:active {
             //outline-width: 0px;
             opacity: 0.8;
@@ -419,10 +431,9 @@ chat-root {
             cursor: pointer;
         }
         button.c21-button-link:hover,
-        button.c21-button-link:focus,
+        button.c21-button-link:focus:not(:focus-visible),
         button.c21-button-link:active {
             text-decoration: underline;
-            outline: none;
         }
 
         .c21-divBudge {

package/src/app/app.component.spec.ts

@@ -1,3 +1,4 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { Triggerhandler } from './../chat21-core/utils/triggerHandler';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
@@ -20,25 +21,32 @@ import { PresenceService } from 'src/chat21-core/providers/abstract/presence.ser
 import { UploadService } from 'src/chat21-core/providers/abstract/upload.service';
 import { AppConfigService } from './providers/app-config.service';
 import { ChatManager } from 'src/chat21-core/providers/chat-manager';
-import { NGXLogger } from 'ngx-logger';
+import { Globals } from './utils/globals';
+
+
 import { CustomLogger } from 'src/chat21-core/providers/logger/customLogger';
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { of } from 'rxjs';
  
 describe('AppComponent', () => {
   let component: AppComponent;
   let fixture: ComponentFixture<AppComponent>;
-  let ngxlogger: NGXLogger;
-  let customLogger = new CustomLogger(ngxlogger)
+  const ngxlogger = jasmine.createSpyObj('NGXLogger', ['log', 'trace', 'debug', 'warn', 'error', 'info']);
+  const customLogger = new CustomLogger(ngxlogger);
   
   beforeEach(waitForAsync(() => {
+    LoggerInstance.setInstance(customLogger);
+    spyOn(AppComponent.prototype, 'ngAfterViewInit').and.stub();
     TestBed.configureTestingModule({
     declarations: [
         AppComponent
     ],
     imports: [RouterTestingModule,
         TranslateModule.forRoot()],
+    schemas: [NO_ERRORS_SCHEMA],
     providers: [
+        Globals,
         Triggerhandler,
         GlobalSettingsService,
         AppStorageService,
@@ -63,11 +71,18 @@ describe('AppComponent', () => {
   }));
 
   beforeEach(() => {
+    spyOn(TestBed.inject(GlobalSettingsService), 'getProjectParametersById').and.returnValue(
+      of({ project: null }) as any,
+    );
+    spyOn(TestBed.inject(GlobalSettingsService), 'manageLoadingDomains').and.returnValue(true);
+
+    const translator = TestBed.inject(TranslatorService);
+    spyOn(translator, 'initI18n').and.returnValue(Promise.resolve(undefined));
+    spyOn(translator, 'translate').and.stub();
+    spyOn(translator, 'getLanguage').and.returnValue('en');
+
     fixture = TestBed.createComponent(AppComponent);
     component = fixture.componentInstance;
-    LoggerInstance.setInstance(customLogger)
-    let logger = LoggerInstance.getInstance()
-    component['logger']= logger
     fixture.detectChanges();
   });
 

package/src/app/app.component.ts

@@ -106,17 +106,16 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
   
   forceDisconnect: boolean = false;
 
+  //network status
+  isOnline: boolean = true;
+  loading: boolean = false;
+  private calloutScheduleTimeout: any = null;
+  
   // alert error message 
   isShowErrorMessage: boolean = false;
   errorMessage: string = '';
   errorKeyMessage: string = null;
   errorParams: Record<string, any> = {};
-
-  //network status
-  isOnline: boolean = true;
-
-  loading: boolean = false;
-  private calloutScheduleTimeout: any = null;
   
   private logger: LoggerService = LoggerInstance.getInstance();
   constructor(
@@ -170,13 +169,13 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
                     if (conversation.attributes && conversation.attributes['subtype'] === 'info') {
                         return;
                     }
-                    if (conversation.is_new && this.isInitialized) {
+                    if (conversation.is_new && that.isInitialized) {
                         that.manageTabNotification(false, 'conv-added')
                         // this.soundMessage(); 
                     }
-                    if(this.g.isOpen === false){
-                        that.lastConversation = conversation;
+                    if(this.g.isOpen === false && conversation.sender !== this.g.senderId && !isInfo(conversation)){
                         that.g.isOpenNewMessage = true;
+                        that.lastConversation = conversation;
                     }
                 } else {
                     //widget closed
@@ -224,6 +223,7 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
                             that.lastConversation = conversation;
                             that.g.isOpenNewMessage = true;
                             that.logger.debug('[APP-COMP] lastconversationnn', that.lastConversation)
+                            that.logger.debug('[APP-COMP] lastconversationnn message' + JSON.stringify(that.lastConversation?.attributes?.commands))
                         }
                         let badgeNewConverstionNumber = that.conversationsHandlerService.countIsNew()
                         that.g.setParameter('conversationsBadge', badgeNewConverstionNumber);
@@ -2319,6 +2319,7 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
         this.el.nativeElement.style.setProperty('--chat-header-height', this.g.hideHeaderConversation? '0px': null)
         this.el.nativeElement.style.setProperty('--font-size-bubble-message', this.g.fontSize)
         this.el.nativeElement.style.setProperty('--font-family-bubble-message', this.g.fontFamily)
+        this.el.nativeElement.style.setProperty('--chat-footer-close-button-height', this.g.closeChatInConversation? '30px': '0px')
 
     }
 

package/src/app/app.module.ts

@@ -16,6 +16,7 @@ import { ConversationFooterComponent } from './component/conversation-detail/con
 import { ConversationInternalFrameComponent } from './component/conversation-detail/conversation-internal-frame/conversation-internal-frame.component';
 import { ConversationPreviewComponent } from './component/conversation-detail/conversation-preview/conversation-preview.component';
 import { ConversationAudioRecorderComponent } from './component/conversation-detail/conversation-audio-recorder/conversation-audio-recorder.component';
+import { StreamAudioSpectrumComponent } from './component/conversation-detail/stream-audio-spectrum/stream-audio-spectrum.component';
 /** CONVERSATION-DETAIL COMPONENTS */
 import { BubbleMessageComponent } from './component/message/bubble-message/bubble-message.component';
 import { AvatarComponent } from './component/message/avatar/avatar.component';
@@ -25,6 +26,7 @@ import { InfoMessageComponent } from './component/message/info-message/info-mess
 import { HtmlComponent } from './component/message/html/html.component';
 import { FrameComponent } from './component/message/frame/frame.component';
 import { AudioComponent } from './component/message/audio/audio.component';
+import { AudioSyncComponent } from './component/message/audio-sync/audio-sync.component';
 import { UserTypingComponent } from './../chat21-core/utils/user-typing/user-typing.component';
 /** MESSAGE ATTACHMENTS COMPONENTS */
 import { MessageAttachmentComponent } from './component/message-attachment/message-attachment.component';
@@ -56,6 +58,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { APP_INITIALIZER, NgModule } from '@angular/core';
 import { HttpClient, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { A11yModule } from '@angular/cdk/a11y';
 import { environment } from 'src/environments/environment';
 
 //THIRD-PART MODULES
@@ -136,8 +139,14 @@ import { Rules } from './utils/rules';
 import { ScriptService } from 'src/chat21-core/providers/scripts/script.service';
 import { CarouselComponent } from './component/message/carousel/carousel.component';
 import { BrandService } from './providers/brand.service';
+import { OpenAiVoiceProviderService } from './providers/voice/STT&TTS/openai-voice.provider';
+import {
+  SpeechToTextProvider,
+  TextToSpeechProvider,
+} from './providers/voice/STT&TTS/speech-provider.abstract';
 import { ErrorAlertComponent } from './component/error-alert/error-alert.component';
 import { ConfirmCloseComponent } from './modals/confirm-close/confirm-close.component';
+import { JsonSourcesComponent } from './component/message/json-sources/json-sources.component';
 
 
 
@@ -288,6 +297,7 @@ export function uploadFactory(http: HttpClient, appConfig: AppConfigService, app
     ConversationPreviewComponent,
     ConversationInternalFrameComponent,
     ConversationAudioRecorderComponent,
+    StreamAudioSpectrumComponent,
     BubbleMessageComponent,
     AvatarComponent,
     FrameComponent,
@@ -300,6 +310,7 @@ export function uploadFactory(http: HttpClient, appConfig: AppConfigService, app
     LinkButtonComponent,
     TextButtonComponent,
     AudioComponent,
+    AudioSyncComponent,
     UserTypingComponent,
     /**DIRECTIVES */
     HtmlEntitiesEncodePipe,
@@ -309,6 +320,7 @@ export function uploadFactory(http: HttpClient, appConfig: AppConfigService, app
     LikeUnlikeComponent,
     TooltipDirective,
     CarouselComponent,
+    JsonSourcesComponent,
     ErrorAlertComponent,
     ConfirmCloseComponent
   ],
@@ -316,6 +328,7 @@ export function uploadFactory(http: HttpClient, appConfig: AppConfigService, app
     BrowserAnimationsModule,
     FormsModule,
     ReactiveFormsModule,
+    A11yModule,
     PickerModule,
      TranslateModule.forRoot({
     //   defaultLanguage: 'en',
@@ -405,6 +418,8 @@ export function uploadFactory(http: HttpClient, appConfig: AppConfigService, app
     WaitingService,
     ScriptService,
     BrandService,
+    { provide: SpeechToTextProvider, useExisting: OpenAiVoiceProviderService },
+    { provide: TextToSpeechProvider, useExisting: OpenAiVoiceProviderService },
     provideHttpClient(withInterceptorsFromDi())
   ],
   bootstrap: [AppComponent]

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

@@ -1,10 +1,14 @@
 
-<!-- tabindex="1500"-->
-<!-- onFocus="document.querySelector('[start-focus-chat21-conversation-component]').focus()" -->
-<div id="chat21-conversation-component" 
+<div id="chat21-conversation-component"
     #afConversationComponent
-    tabindex="1500" 
-    aria-modal="true">
+    role="region"
+    [attr.aria-label]="g?.project?.widgetTitle">
+
+    <!-- Skip-link: revealed only on focus, jumps straight to the message composer (WCAG 2.4.1 Bypass Blocks). -->
+    <a class="c21-skip-link" href="#chat21-main-message-context"
+        (click)="$event.preventDefault(); skipToCompose()">
+        {{ translationMapFooter?.get('SKIP_TO_COMPOSER') || 'Skip to message composer' }}
+    </a>
 
     <!-- HEADER -->
     <chat-conversation-header
@@ -66,6 +70,7 @@
         [showThinkingMessage]="showThinkingMessage"
         [lastServerSenderKind]="lastServerSenderKind"
         [fullscreenMode]="g?.fullscreenMode"
+        [isStreamAudioActive]="isStreamAudioActive"
         [translationMap]="translationMapContent"
         [stylesMap]="stylesMap"
         (onBeforeMessageRender)="onBeforeMessageRenderFN($event)"
@@ -113,12 +118,16 @@
     </dialog>
 
     <!-- FOOTER -->
-    <!-- [class.maximize-width]="(g?.singleConversation && hideTextAreaContent) || (isConversationArchived && !g?.allowReopen)" -->
     <div id="chat21-footer">
-        <div *ngIf="showBadgeScroollToBottom" id="chat21-buttonToBottom" (click)="scrollToBottom()">
-            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M24 24H0V0h24v24z"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"/></svg>
-            <div *ngIf="messagesBadgeCount!=0" id="chat21-divBudge" class="c21-divBudge">{{messagesBadgeCount}}</div>
-        </div>
+        <button *ngIf="showBadgeScroollToBottom"
+            type="button"
+            id="chat21-buttonToBottom"
+            class="c21-button-clean"
+            [attr.aria-label]="translationMapContent?.get('BUTTON_SCROLL_TO_BOTTOM') || 'Scroll to last message'"
+            (click)="scrollToBottom()">
+            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M24 24H0V0h24v24z"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"/></svg>
+            <span *ngIf="messagesBadgeCount!=0" id="chat21-divBudge" class="c21-divBudge" aria-hidden="true">{{messagesBadgeCount}}</span>
+        </button>
 
         <chat-conversation-footer
             [conversationWith]="conversationWith"
@@ -132,12 +141,14 @@
             [showAttachmentFooterButton]="g?.showAttachmentFooterButton"
             [showEmojiFooterButton]="g?.showEmojiFooterButton"
             [showAudioRecorderFooterButton]="g?.showAudioRecorderFooterButton"
+            [showAudioStreamFooterButton]="g?.showAudioStreamFooterButton"
             [hideTextAreaContent]="(g?.singleConversation && hideTextAreaContent) || (isConversationArchived && !g?.allowReopen)"
             [isConversationArchived]="isConversationArchived"
             [hideTextReply]="hideFooterTextReply"
             [isMobile]="g?.isMobile"
             [isEmojiiPickerShow]="isEmojiiPickerShow"
             [footerMessagePlaceholder]="footerMessagePlaceholder"
+            [closeChatInConversation]="g?.closeChatInConversation"
             [fileUploadAccept]="g?.fileUploadAccept"
             [dropEvent]="dropEvent"
             [poweredBy]="g?.poweredBy"
@@ -148,7 +159,10 @@
             (onAfterSendMessage)="onAfterSendMessageFN($event)"
             (onChangeTextArea)="onChangeTextArea($event)"
             (onAttachmentFileButtonClicked)="onAttachmentFileButtonClicked($event)"
-            (onNewConversationButtonClicked)="onNewConversationButtonClickedFN($event)">
+            (onNewConversationButtonClicked)="onNewConversationButtonClickedFN($event)"
+            (onStreamAudioActiveChange)="onStreamAudioActiveChange($event)"
+            (onStreamAudioConnectingChange)="onStreamAudioConnectingChange($event)"
+            (onCloseChatButtonClicked)="onCloseChatButtonClickedFN($event)">
         </chat-conversation-footer>
 
     </div>

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

@@ -13,6 +13,34 @@
     bottom: var(--chat-footer-height) !important
 }
 
+/* Skip-link visible only when focused via keyboard (WCAG 2.4.1) */
+.c21-skip-link {
+    position: absolute;
+    top: -40px;
+    left: 8px;
+    z-index: 100;
+    padding: 6px 12px;
+    background-color: #1a73e8;
+    color: #ffffff !important;
+    border-radius: 4px;
+    font-size: 14px;
+    text-decoration: none;
+    transition: top 0.15s ease-in-out;
+}
+
+.c21-skip-link:focus,
+.c21-skip-link:focus-visible {
+    top: 8px;
+    outline: 2px solid #ffffff;
+    outline-offset: 2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .c21-skip-link {
+        transition: none;
+    }
+}
+
 // ============= CSS #chat21-conversation-component ================= //
 #chat21-conversation-component {
     // background-color: #ffffff;
@@ -137,7 +165,7 @@
 #dropZone_container{
     position: absolute;
     top: 52px;
-    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));
     left: 0;
     right: 0;
     background-color: rgba(240,248,255,0.6);
@@ -240,7 +268,17 @@ dialog:-internal-dialog-in-top-layer{
 
 
     ::ng-deep .chat21-sheet-content{
-        bottom: calc(var(--chat-footer-logo-height) + var(--chat-footer-height) + 34px)!important;
+        bottom: calc(var(--chat-footer-logo-height) + var(--chat-footer-height) + var(--chat-footer-close-button-height) + 34px)!important;
+    }
+
+    /* Con `.close-stream-button` (stream in ascolto): spazio per alert stream sopra il footer */
+    #chat21-conversation-component.chat21-conversation--close-stream-active ::ng-deep .chat21-sheet-content {
+        bottom: calc(
+            var(--chat-footer-logo-height) +
+            var(--chat-footer-height) +
+            var(--chat-footer-stream-button-height) +
+            34px
+        ) !important;
     }
     
 }