@chat21/chat21-web-widget 5.1.32-rc9 → 5.1.33-rc11

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@chat21/chat21-web-widget",
   "author": "Tiledesk SRL",
-  "version": "5.1.32-rc9",
+  "version": "5.1.33-rc11",
   "license": "MIT",
   "homepage": "https://www.tiledesk.com",
   "repository": {
@@ -14,9 +14,11 @@
     "start": "ng serve",
     "build": "ng build",
     "test": "ng test",
+    "test:e2e": "playwright test",
     "lint": "ng lint",
     "e2e": "ng e2e",
-    "source-map-explorer": "source-map-explorer dist/*.js"
+    "source-map-explorer": "source-map-explorer dist/*.js",
+    "voice-mock": "node mocks/voice-websocket-mock/server.cjs"
   },
   "private": false,
   "dependencies": {
@@ -55,6 +57,7 @@
     "@angular/cli": "^18.2.19",
     "@angular/compiler-cli": "^18.2.13",
     "@angular/language-service": "^18.2.13",
+    "@playwright/test": "^1.59.1",
     "@types/jasmine": "^3.6.11",
     "@types/jasminewd2": "~2.0.3",
     "@types/marked": "^6.0.0",
@@ -71,6 +74,7 @@
     "protractor": "~7.0.0",
     "ts-node": "~7.0.0",
     "tslint": "~6.1.0",
-    "typescript": "~5.4"
+    "typescript": "~5.4",
+    "ws": "^8.18.0"
   }
 }

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.module.ts

@@ -58,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
@@ -145,6 +146,7 @@ import {
 } 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';
 
 
 
@@ -318,6 +320,7 @@ export function uploadFactory(http: HttpClient, appConfig: AppConfigService, app
     LikeUnlikeComponent,
     TooltipDirective,
     CarouselComponent,
+    JsonSourcesComponent,
     ErrorAlertComponent,
     ConfirmCloseComponent
   ],
@@ -325,6 +328,7 @@ export function uploadFactory(http: HttpClient, appConfig: AppConfigService, app
     BrowserAnimationsModule,
     FormsModule,
     ReactiveFormsModule,
+    A11yModule,
     PickerModule,
      TranslateModule.forRoot({
     //   defaultLanguage: 'en',

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

@@ -1,11 +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"
-    [class.chat21-conversation--close-stream-active]="closeStreamButtonActiveForSheetBottom()">
+    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
@@ -115,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"
@@ -154,6 +161,7 @@
             (onAttachmentFileButtonClicked)="onAttachmentFileButtonClicked($event)"
             (onNewConversationButtonClicked)="onNewConversationButtonClickedFN($event)"
             (onStreamAudioActiveChange)="onStreamAudioActiveChange($event)"
+            (onStreamAudioConnectingChange)="onStreamAudioConnectingChange($event)"
             (onCloseChatButtonClicked)="onCloseChatButtonClickedFN($event)">
         </chat-conversation-footer>
 

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;