@chat21/chat21-web-widget 5.1.34 → 5.2.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@chat21/chat21-web-widget",
   "author": "Tiledesk SRL",
-  "version": "5.1.34",
+  "version": "5.2.1",
   "license": "MIT",
   "homepage": "https://www.tiledesk.com",
   "repository": {
@@ -10,12 +10,15 @@
   },
   "scripts": {
     "ng": "ng",
+    "copy-onnx-wasm": "mkdir -p src/assets/onnx && cp node_modules/onnxruntime-web/dist/ort-wasm-simd-threaded.mjs node_modules/onnxruntime-web/dist/ort-wasm-simd-threaded.wasm src/assets/onnx/",
     "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": {
@@ -32,6 +35,7 @@
     "@ctrl/ngx-emoji-mart": "^9.2.0",
     "@ngx-translate/core": "^16.0.4",
     "@ngx-translate/http-loader": "^16.0.1",
+    "@ricky0123/vad-web": "^0.0.30",
     "accept-language-parser": "^1.5.0",
     "bootstrap": "^5.1.3",
     "dayjs": "^1.11.7",
@@ -40,6 +44,7 @@
     "humanize-duration-ts": "^2.1.1",
     "marked": "^16.3.0",
     "ngx-logger": "^5.0.11",
+    "onnxruntime-web": "^1.24.3",
     "replace": "^1.2.2",
     "rxjs": "^7.8.2",
     "source-map-explorer": "^2.5.3",
@@ -52,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",
@@ -68,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

@@ -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,6 +139,11 @@ 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';
@@ -289,6 +297,7 @@ export function uploadFactory(http: HttpClient, appConfig: AppConfigService, app
     ConversationPreviewComponent,
     ConversationInternalFrameComponent,
     ConversationAudioRecorderComponent,
+    StreamAudioSpectrumComponent,
     BubbleMessageComponent,
     AvatarComponent,
     FrameComponent,
@@ -301,6 +310,7 @@ export function uploadFactory(http: HttpClient, appConfig: AppConfigService, app
     LinkButtonComponent,
     TextButtonComponent,
     AudioComponent,
+    AudioSyncComponent,
     UserTypingComponent,
     /**DIRECTIVES */
     HtmlEntitiesEncodePipe,
@@ -318,6 +328,7 @@ export function uploadFactory(http: HttpClient, appConfig: AppConfigService, app
     BrowserAnimationsModule,
     FormsModule,
     ReactiveFormsModule,
+    A11yModule,
     PickerModule,
      TranslateModule.forRoot({
     //   defaultLanguage: 'en',
@@ -407,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,15 @@
 
-<!-- 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"
+    [class.chat21-conversation--close-stream-active]="closeStreamButtonActiveForSheetBottom()">
+
+    <!-- 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 +71,7 @@
         [showThinkingMessage]="showThinkingMessage"
         [lastServerSenderKind]="lastServerSenderKind"
         [fullscreenMode]="g?.fullscreenMode"
+        [isStreamAudioActive]="isStreamAudioActive"
         [translationMap]="translationMapContent"
         [stylesMap]="stylesMap"
         (onBeforeMessageRender)="onBeforeMessageRenderFN($event)"
@@ -113,12 +119,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,6 +142,7 @@
             [showAttachmentFooterButton]="g?.showAttachmentFooterButton"
             [showEmojiFooterButton]="g?.showEmojiFooterButton"
             [showAudioRecorderFooterButton]="g?.showAudioRecorderFooterButton"
+            [showAudioStreamFooterButton]="g?.showAudioStreamFooterButton"
             [hideTextAreaContent]="(g?.singleConversation && hideTextAreaContent) || (isConversationArchived && !g?.allowReopen)"
             [isConversationArchived]="isConversationArchived"
             [hideTextReply]="hideFooterTextReply"
@@ -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;
@@ -242,6 +270,16 @@ dialog:-internal-dialog-in-top-layer{
     ::ng-deep .chat21-sheet-content{
         bottom: calc(var(--chat-footer-logo-height) + var(--chat-footer-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;
+    }
     
 }