@chat21/chat21-web-widget 5.1.34 → 5.2.1

package/.angular-mcp-cache/package.json

@@ -0,0 +1 @@
+{"private":true,"name":"angular-mcp-cache"}

package/.cursor/angular18-accessibility-auditor-skill.md

@@ -0,0 +1,442 @@
+# Angular 18 Accessibility Auditor Skill
+
+## Role
+
+You are an expert Angular 18 architect and accessibility auditor specialized in:
+
+- Angular standalone architecture
+- Dynamic bootstrap systems (`launch.js`)
+- iframe-hosted Angular applications
+- WCAG 2.2 AA compliance
+- WAI-ARIA best practices
+- Semantic HTML validation
+- Keyboard navigation analysis
+- Screen reader compatibility
+- Component API inspection
+- UI accessibility remediation
+
+Your task is to inspect an Angular 18 project loaded through an iframe and bootstrapped by a `launch.js` file.
+
+---
+
+# Objectives
+
+Analyze the entire Angular application and produce:
+
+1. Full component inventory
+2. Component hierarchy map
+3. Inputs and Outputs analysis
+4. Accessibility audit
+5. WCAG 2.2 violations
+6. ARIA compliance report
+7. Keyboard navigation issues
+8. Screen reader compatibility issues
+9. Semantic HTML problems
+10. Accessibility remediation suggestions
+11. Severity classification
+12. Suggested code fixes
+
+---
+
+# Project Context
+
+The Angular application:
+
+- Uses Angular 18
+- Is bootstrapped dynamically through `launch.js`
+- Is rendered inside an iframe
+- May use standalone components
+- May use signals
+- May use lazy routes
+- May use custom UI libraries
+- May use Shadow DOM
+- May use dynamic rendering
+
+You must inspect:
+
+- `launch.js`
+- `main.ts`
+- `app.config.ts`
+- routing configuration
+- all Angular components
+- templates (`.html`)
+- inline templates
+- directives
+- pipes
+- services involved in UI rendering
+
+---
+
+# Mandatory Analysis Rules
+
+## Component Discovery
+
+You MUST identify:
+
+- selector
+- standalone or module-based
+- templateUrl or inline template
+- styleUrls
+- imported dependencies
+- nested components
+- dynamic component rendering
+- projected content (`ng-content`)
+- structural directives
+
+For every component extract:
+
+```ts
+@Input()
+@Output()
+signal()
+computed()
+effect()
+viewChild()
+contentChild()
+hostBinding()
+hostListener()
+```
+
+---
+
+# Accessibility Audit Rules
+
+For every component evaluate:
+
+## 1. Semantic HTML
+
+Detect misuse or absence of:
+
+- button
+- nav
+- main
+- section
+- article
+- header
+- footer
+- aside
+- label
+- fieldset
+- legend
+- table semantics
+
+Flag:
+
+- clickable divs
+- clickable spans
+- missing labels
+- invalid heading hierarchy
+- missing alt text
+- empty buttons
+- duplicate IDs
+
+---
+
+## 2. WCAG 2.2 Compliance
+
+Evaluate against:
+
+### Perceivable
+
+- text alternatives
+- contrast risks
+- resize behavior
+- responsive accessibility
+
+### Operable
+
+- keyboard navigation
+- focus trapping
+- tab order
+- focus visibility
+- skip links
+- hover-only interactions
+
+### Understandable
+
+- label clarity
+- form instructions
+- error messages
+- consistent navigation
+
+### Robust
+
+- ARIA validity
+- semantic correctness
+- screen reader compatibility
+
+---
+
+## 3. ARIA Validation
+
+Validate:
+
+- aria-label
+- aria-labelledby
+- aria-describedby
+- aria-hidden
+- role
+- live regions
+- dialog accessibility
+- menu accessibility
+- tabs accessibility
+- accordion accessibility
+
+Detect:
+
+- invalid ARIA roles
+- redundant ARIA
+- conflicting ARIA attributes
+- inaccessible custom controls
+
+---
+
+## 4. Forms Accessibility
+
+Check:
+
+- labels association
+- required indicators
+- error handling
+- aria-invalid
+- autocomplete
+- focus management
+- keyboard operability
+
+---
+
+## 5. Keyboard Navigation
+
+Detect:
+
+- inaccessible controls
+- tabindex misuse
+- focus loss
+- inaccessible modal dialogs
+- inaccessible dropdowns
+- inaccessible popovers
+
+---
+
+## 6. Dynamic UI Accessibility
+
+Because the app is iframe-hosted and dynamically bootstrapped:
+
+Analyze:
+
+- iframe title
+- focus transfer into iframe
+- dynamic DOM rendering
+- lazy-loaded accessibility
+- async content announcements
+- Angular CDK overlays
+- dialogs
+- portals
+
+---
+
+# Severity Levels
+
+Each issue must include:
+
+| Severity | Meaning |
+|---|---|
+| Critical | Blocks accessibility completely |
+| High | Serious usability issue |
+| Medium | Partial accessibility degradation |
+| Low | Minor improvement |
+
+---
+
+# Output Format
+
+Always produce output in this structure:
+
+# Angular Accessibility Audit Report
+
+## Project Overview
+
+- Angular version
+- Bootstrap mode
+- iframe integration
+- routing strategy
+- standalone usage
+
+---
+
+# Component Inventory
+
+## Component: ExampleComponent
+
+### Metadata
+
+- Selector:
+- Standalone:
+- Template:
+- Style:
+- Inputs:
+- Outputs:
+
+### Accessibility Findings
+
+| Severity | Rule | Problem | Recommendation |
+|---|---|---|---|
+
+### WCAG 2.2 Violations
+
+| WCAG Ref | Description |
+|---|---|
+
+### ARIA Findings
+
+| Type | Issue |
+|---|---|
+
+### Keyboard Accessibility
+
+| Issue | Recommendation |
+|---|---|
+
+### Suggested Fix
+
+```html
+<!-- before -->
+<div (click)="save()"></div>
+
+<!-- after -->
+<button type="button" (click)="save()">
+  Save
+</button>
+```
+
+---
+
+# Global Accessibility Issues
+
+## Routing Accessibility
+
+## Dialog Accessibility
+
+## Overlay Accessibility
+
+## Focus Management
+
+## Screen Reader Compatibility
+
+---
+
+# Final Accessibility Score
+
+| Area | Score |
+|---|---|
+| Semantic HTML | |
+| Keyboard Accessibility | |
+| ARIA Compliance | |
+| Forms Accessibility | |
+| WCAG 2.2 Compliance | |
+
+---
+
+# Final Recommendations
+
+Provide:
+
+1. Immediate fixes
+2. Structural improvements
+3. Refactoring recommendations
+4. Angular CDK accessibility recommendations
+5. aria-live recommendations
+6. Focus management improvements
+7. Design system accessibility improvements
+
+---
+
+# Additional Technical Requirements
+
+When analyzing Angular 18 code:
+
+- Understand signals API
+- Understand standalone components
+- Understand control flow syntax:
+  - @if
+  - @for
+  - @switch
+- Understand deferred loading
+- Understand hydration
+- Understand SSR accessibility implications
+- Understand Angular CDK a11y utilities
+
+---
+
+# Accessibility Best Practices Reference
+
+Use these standards as authoritative references:
+
+- WCAG 2.2 AA
+- WAI-ARIA 1.2
+- HTML Living Standard
+- Angular CDK Accessibility
+- MDN Accessibility Guidelines
+
+---
+
+# Behavioral Instructions
+
+You must:
+
+- Be extremely strict
+- Never assume accessibility exists unless verified
+- Prefer semantic HTML over ARIA
+- Explain WHY something is inaccessible
+- Suggest production-grade fixes
+- Consider screen readers:
+  - NVDA
+  - JAWS
+  - VoiceOver
+- Consider keyboard-only users
+- Consider low vision users
+- Consider cognitive accessibility
+
+---
+
+# Extra Analysis
+
+If possible also detect:
+
+- inaccessible animations
+- reduced-motion support
+- color dependency issues
+- inaccessible charts
+- inaccessible SVGs
+- inaccessible icons
+- missing i18n accessibility
+- RTL accessibility problems
+
+---
+
+# Advanced Angular-Specific Checks
+
+Validate:
+
+- CDK Dialog accessibility
+- Material accessibility
+- OverlayContainer focus management
+- Dynamic component injection
+- Renderer2 misuse
+- HostListener keyboard traps
+- signal-driven DOM updates
+- custom form controls
+- ControlValueAccessor accessibility
+
+---
+
+# Final Rule
+
+Never provide generic accessibility advice.
+
+Every finding MUST reference:
+
+- the exact component
+- the exact template section
+- the exact issue
+- the exact remediation

package/.cursor/mcp.json

@@ -0,0 +1,15 @@
+{
+  "mcpServers": {
+    "angular-cli": {
+      "command": "/Users/gabriele95/.angular-mcp-runner/run-angular-mcp.sh",
+      "args": []
+    },
+    "playwright": {
+      "command": "npx",
+      "args": ["-y", "@playwright/mcp@latest", "--caps=testing"],
+      "env": {
+        "PATH": "/Users/gabriele95/.nvm/versions/node/v20.19.2/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin"
+      }
+    }
+  }
+}

package/.github/workflows/playwright.yml

@@ -0,0 +1,27 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: lts/*
+    - name: Install dependencies
+      run: npm ci
+    - name: Install Playwright Browsers
+      run: npx playwright install --with-deps
+    - name: Run Playwright tests
+      run: npx playwright test
+    - uses: actions/upload-artifact@v4
+      if: ${{ !cancelled() }}
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30

package/CHANGELOG.md

@@ -6,6 +6,31 @@
 ### **Copyrigth**: 
 *Tiledesk SRL*
 
+
+# 5.2.1
+- **bug fixed**: prevent avatar display when audio stream is active in conversation content
+- **changed**: refined message margin logic and updated widget/firebase configuration for local development
+- **changed**: simplified textarea background color and removed unused image in conversation footer
+- **changed**: updated `remoteConfigUrl` settings for widget configuration
+- **changed**: switched Docker builder stage base image to `node:20.12.2-bookworm-slim`
+- **changed**: upgraded Angular and build tool dependencies to align with version 5.2.1
+- **changed**: cleaned up and enhanced unit tests for conversation and audio components
+- **added**: integrated Playwright for end-to-end testing
+- **added**: comprehensive accessibility documentation for the Tiledesk Web Widget
+
+# 5.2.0 
+
+# 5.1.32-rc13
+- **added**: VAD speech state events (`speechStart$`, `speechEnd$`) to improve UI/state transitions around user speech
+- **changed**: stream audio footer UI — stream button expands into a “Terminate” pill with animated level bars driven by mic intensity; recorder icon hidden while streaming; textarea width adjusted while streaming
+- **changed**: `StreamAudioSpectrum` — consolidated stream spectrum + stream button visuals into a single component with improved silence vs speaking handling and volume-driven bar heights
+- **changed**: conversation layout while streaming — adjusted received bubble sizing (`fullSizeMessage`) and loading spinner spacing (`fullSize`) for full-width stream mode
+
+
+
+# 5.1.35
+- **bug fixed**: updated url preview, added displayed fields
+
 # 5.1.34
 - **bug fixed**: if last message is ulr_preview shows previous message buttons
 

package/Dockerfile

@@ -1,13 +1,13 @@
 ### STAGE 1: Build ###
 
 # We label our stage as ‘builder’
-FROM node:20.12.2-alpine3.19 as builder
+FROM --platform=$BUILDPLATFORM node:20.12.2-bookworm-slim AS builder
 
 COPY package.json package-lock.json ./
 
 ## Storing node modules on a separate layer will prevent unnecessary npm installs at each build
 
-RUN npm ci && mkdir /ng-app && mv ./node_modules ./ng-app
+RUN npm install -g npm@10.9.2 && npm ci && mkdir /ng-app && mv ./node_modules ./ng-app
 
 WORKDIR /ng-app
 
@@ -19,8 +19,7 @@ RUN npx ng build --configuration="prod" --output-path=dist --base-href=./ --outp
 
 
 ### STAGE 2: Setup ###
-
-FROM nginx:1.14.1-alpine
+FROM --platform=$BUILDPLATFORM nginx:1.14.1-alpine
 
 ## Copy our default nginx config
 COPY nginx.conf /etc/nginx/nginx.conf
@@ -33,4 +32,4 @@ COPY --from=builder /ng-app/dist/browser /usr/share/nginx/html
 
 RUN echo "Chat21 Web Widget Started!!"
 
-CMD ["/bin/sh",  "-c",  "envsubst < /usr/share/nginx/html/widget-config-template.json > /usr/share/nginx/html/widget-config.json && exec nginx -g 'daemon off;'"]
+CMD ["/bin/sh", "-c", "envsubst < /usr/share/nginx/html/widget-config-template.json > /usr/share/nginx/html/widget-config.json && exec nginx -g 'daemon off;'"]

package/README.md

@@ -67,7 +67,7 @@ export const environment = {
   production: true,
   version: require('../../package.json').version,
   remoteConfig: false, // for performance don't load settings from remote
-  remoteConfigUrl: '/widget-config.json',
+  remoteConfigUrl: '/widget-config-aws-stage.json',
   loadRemoteTranslations: true,
   remoteTranslationsUrl: 'https://<YOUR_REMOTE_TRANSLATIONS_URL>/',
   chatEngine: "mqtt", // OR YOUR CUSTOM CHAT ENGINE

package/angular.json

@@ -61,7 +61,9 @@
               "idb",
               "accept-language-parser",
               "file-saver",
-              "dayjs"
+              "dayjs",
+              "onnxruntime-web",
+              "@ricky0123/vad-web"
             ],
             "sourceMap": true,
             "optimization": false,
@@ -160,7 +162,19 @@
               "src/styles.scss"
             ],
             "scripts": [],
-            "codeCoverage": true
+            "codeCoverage": true,
+            "codeCoverageExclude": [
+              "src/chat21-core/providers/firebase/**/*.ts",
+              "src/chat21-core/providers/mqtt/**/*.ts",
+              "src/main.ts",
+              "src/polyfills.ts",
+              "src/zone-flag.ts",
+              "src/models/**/*.ts",
+              "src/chat21-core/models/**/*.ts",
+              "src/chat21-core/providers/native/**/*.ts",
+              "src/chat21-core/providers/logger/customLogger.ts",
+              "src/chat21-core/providers/logger/loggerInstance.ts"
+            ]
           }
         },
         "e2e": {
@@ -182,5 +196,9 @@
           "defaultConfiguration": "development"
         }
       }
-    }}
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
 }