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

package/mocks/voice-websocket-mock/server.cjs

@@ -1,245 +0,0 @@
-/**
- * Mock proxy voce WSS: salva l'audio in `temp/` e simula gli eventi del protocollo reale.
- *
- * Eventi JSON inviati al client (`msg.event`):
- *   session_started | listening | transcript | thinking | speaking | done | error
- * Frame binari: piccolo WAV silenzio (TTS simulato), dopo `speaking`.
- *
- * Uso: `npm run voice-mock`
- * Env: VOICE_MOCK_PORT, VOICE_MOCK_PATH, VOICE_MOCK_SILENCE_MS (debounce fine parlato, default 700),
- *      VOICE_MOCK_SEND_ERROR=1 (invia subito `error`)
- */
-/* eslint-disable no-console */
-const fs = require('fs');
-const path = require('path');
-const http = require('http');
-const { WebSocketServer } = require('ws');
-
-const PORT = parseInt(process.env.VOICE_MOCK_PORT || '4587', 10);
-const PATH = process.env.VOICE_MOCK_PATH || '/ws/voice';
-const SILENCE_MS = parseInt(process.env.VOICE_MOCK_SILENCE_MS || '700', 10);
-const SEND_ERROR = process.env.VOICE_MOCK_SEND_ERROR === '1' || process.env.VOICE_MOCK_SEND_ERROR === 'true';
-
-const here = __dirname;
-const outDir = path.join(here, 'temp');
-const DEFAULT_TOKEN = 'mock-token-ok';
-const DEFAULT_PROJECT = 'mock-project';
-
-if (!fs.existsSync(outDir)) {
-  fs.mkdirSync(outDir, { recursive: true });
-}
-
-/** WAV PCM 16-bit mono, silenzio (decodificabile da Web Audio). */
-function buildSilenceWav(durationSec = 0.2) {
-  const sampleRate = 8000;
-  const bitsPerSample = 16;
-  const channels = 1;
-  const blockAlign = (channels * bitsPerSample) / 8;
-  const byteRate = sampleRate * blockAlign;
-  const numSamples = Math.floor(sampleRate * durationSec);
-  const dataSize = numSamples * blockAlign;
-  const buffer = Buffer.alloc(44 + dataSize);
-  buffer.write('RIFF', 0);
-  buffer.writeUInt32LE(36 + dataSize, 4);
-  buffer.write('WAVE', 8);
-  buffer.write('fmt ', 12);
-  buffer.writeUInt32LE(16, 16);
-  buffer.writeUInt16LE(1, 20);
-  buffer.writeUInt16LE(channels, 22);
-  buffer.writeUInt32LE(sampleRate, 24);
-  buffer.writeUInt32LE(byteRate, 28);
-  buffer.writeUInt16LE(blockAlign, 32);
-  buffer.writeUInt16LE(bitsPerSample, 34);
-  buffer.write('data', 36);
-  buffer.writeUInt32LE(dataSize, 40);
-  return buffer;
-}
-
-const TTS_MOCK_CHUNK = buildSilenceWav(0.25);
-
-function sendJson(ws, obj) {
-  if (ws.readyState !== 1) {
-    return;
-  }
-  try {
-    ws.send(JSON.stringify(obj));
-  } catch (e) {
-    console.error('[voice-mock] sendJson failed', e.message);
-  }
-}
-
-const server = http.createServer((_req, res) => {
-  res.writeHead(200, { 'Content-Type': 'text/plain' });
-  res.end(
-    'Tiledesk voice-websocket-mock. Events: session_started, listening, transcript, thinking, speaking, TTS binary, done, error.\n',
-  );
-});
-
-const wss = new WebSocketServer({ noServer: true });
-
-server.on('upgrade', (req, socket, head) => {
-  const host = (req.headers.host || 'localhost').split(':')[0];
-  const u = new URL(req.url, 'http://' + host);
-  if (u.pathname !== PATH) {
-    socket.destroy();
-    return;
-  }
-
-  wss.handleUpgrade(req, socket, head, (ws) => {
-    wss.emit('connection', ws, req, u);
-  });
-});
-
-wss.on('connection', (ws, _req, urlObj) => {
-  const q = urlObj.searchParams;
-  const token = q.get('token') || DEFAULT_TOKEN;
-  const projectId = q.get('projectId') || DEFAULT_PROJECT;
-  const qRequestId = q.get('requestId') || '';
-  const mime = q.get('mimeType') || 'application/octet-stream';
-  const ext = mime.indexOf('webm') >= 0 ? 'webm' : 'bin';
-
-  const convId =
-    qRequestId && qRequestId !== 'new'
-      ? qRequestId
-      : `mock-req-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
-
-  const safeTs = new Date().toISOString().replace(/[:.]/g, '-');
-  const outFile = path.join(
-    outDir,
-    `voice-${safeTs}-p${String(projectId).replace(/[^a-zA-Z0-9._-]/g, '_')}-r${String(convId).replace(/[^a-zA-Z0-9._-]/g, '_')}.${ext}`,
-  );
-  const fileStream = fs.createWriteStream(outFile, { flags: 'a' });
-  const tokenOk = String(token).length > 0;
-
-  let chunkCount = 0;
-  let silenceTimer = null;
-  let finalPipelineStarted = false;
-
-  function clearSilenceTimer() {
-    if (silenceTimer) {
-      clearTimeout(silenceTimer);
-      silenceTimer = null;
-    }
-  }
-
-  /** Dopo debounce senza nuovi chunk audio: chiude il turno come farebbe il proxy reale. */
-  function runAfterUtteranceEnd() {
-    if (finalPipelineStarted || ws.readyState !== 1) {
-      return;
-    }
-    finalPipelineStarted = true;
-    clearSilenceTimer();
-
-    sendJson(ws, {
-      event: 'transcript',
-      text: '[mock] Trascrizione finale simulata.',
-      isFinal: true,
-    });
-
-    setTimeout(() => {
-      sendJson(ws, { event: 'thinking' });
-    }, 150);
-
-    setTimeout(() => {
-      sendJson(ws, { event: 'speaking' });
-      try {
-        if (ws.readyState === 1) {
-          ws.send(TTS_MOCK_CHUNK, { binary: true });
-        }
-      } catch (e) {
-        console.error('[voice-mock] TTS binary send failed', e.message);
-      }
-    }, 450);
-
-    setTimeout(() => {
-      sendJson(ws, {
-        event: 'done',
-        url: 'https://example.com/mock-voice-session-complete',
-      });
-    }, 900);
-  }
-
-  function scheduleUtteranceEndCheck() {
-    clearSilenceTimer();
-    silenceTimer = setTimeout(runAfterUtteranceEnd, SILENCE_MS);
-  }
-
-  console.log('[voice-mock] client connected', {
-    projectId,
-    requestId: convId,
-    mimeType: mime,
-    outFile,
-    token: tokenOk ? 'present' : 'missing',
-  });
-
-  if (!tokenOk) {
-    sendJson(ws, { event: 'error', message: 'Missing or invalid token' });
-    ws.close();
-    return;
-  }
-
-  if (SEND_ERROR) {
-    sendJson(ws, { event: 'error', message: 'VOICE_MOCK_SEND_ERROR is set' });
-    setTimeout(() => ws.close(), 100);
-    return;
-  }
-
-  sendJson(ws, { event: 'session_started', requestId: convId });
-
-  setTimeout(() => {
-    sendJson(ws, { event: 'listening' });
-  }, 80);
-
-  ws.on('message', (data, isBinary) => {
-    if (isBinary || Buffer.isBuffer(data)) {
-      const buf = Buffer.isBuffer(data) ? data : Buffer.from(data);
-      fileStream.write(buf);
-      chunkCount += 1;
-
-      if (chunkCount === 1) {
-        sendJson(ws, {
-          event: 'transcript',
-          text: '[mock] Utterance…',
-          isFinal: false,
-        });
-      } else if (chunkCount === 4) {
-        sendJson(ws, {
-          event: 'transcript',
-          text: '[mock] Utterance parziale aggiornata.',
-          isFinal: false,
-        });
-      }
-
-      finalPipelineStarted = false;
-      scheduleUtteranceEndCheck();
-      return;
-    }
-
-    const line = 'TEXT ' + (typeof data === 'string' ? data : data.toString()) + '\n';
-    fileStream.write(Buffer.from(line, 'utf8'));
-  });
-
-  ws.on('close', () => {
-    clearSilenceTimer();
-    fileStream.end();
-    const stat = fs.existsSync(outFile) ? fs.statSync(outFile) : null;
-    console.log('[voice-mock] client closed, bytes on disk:', stat ? stat.size : 0, outFile);
-  });
-
-  ws.on('error', (e) => {
-    console.error('[voice-mock] socket error', e);
-    clearSilenceTimer();
-    try {
-      fileStream.end();
-    } catch {
-      // ignore
-    }
-  });
-});
-
-server.listen(PORT, '0.0.0.0', () => {
-  console.log(
-    '[voice-mock] listening on ws://127.0.0.1:' + PORT + PATH + ' — output dir: ' + outDir,
-  );
-  console.log('[voice-mock] silence debounce:', SILENCE_MS, 'ms (fire transcript→thinking→speaking→TTS wav→done)');
-});

package/playwright.config.ts

@@ -1,41 +0,0 @@
-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/component/conversation-detail/stream-audio-spectrum/stream-audio-spectrum.component.html

@@ -1,46 +0,0 @@
-<ng-container [ngSwitch]="mode">
-    <!-- ALERT: spectrum line (fills streamAudioAlert width) -->
-    <div *ngSwitchCase="'alert'" class="stream-audio-spectrum" [ngStyle]="accentColor ? { color: accentColor } : null">
-        <svg class="stream-audio-spectrum__svg" viewBox="0 0 100 32" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
-            <defs>
-                <linearGradient [attr.id]="gradientId" x1="0" y1="16" x2="100" y2="16" gradientUnits="userSpaceOnUse">
-                    <stop offset="0%" stop-color="currentColor" stop-opacity="0.45"/>
-                    <stop offset="50%" stop-color="currentColor" stop-opacity="1"/>
-                    <stop offset="100%" stop-color="currentColor" stop-opacity="0.45"/>
-                </linearGradient>
-            </defs>
-            <path class="stream-audio-spectrum__line"
-                [attr.d]="spectrumLinePath"
-                fill="none"
-                [attr.stroke]="'url(#' + gradientId + ')'"
-                stroke-width="2.4"
-                stroke-linecap="round"
-                stroke-linejoin="round"/>
-        </svg>
-    </div>
-
-    <!-- BUTTON: inactive icon / expanded pill content -->
-    <ng-container *ngSwitchCase="'button'">
-        <span class="stream-audio-button__icon" *ngIf="!active" aria-hidden="true">
-            <svg role="img" xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 23 23" aria-labelledby="altIconTitle">
-                <rect x="0" y="7.5" height="6px" fill-opacity="1" width="2px" rx="0.75" ry="0.75"></rect>
-                <rect x="4" y="5.5" height="10px" fill-opacity="1" width="2px" rx="0.75" ry="0.75"></rect>
-                <rect x="8" y="2.5" height="16px" fill-opacity="1" width="2px" rx="0.75" ry="0.75"></rect>
-                <rect x="12" y="5.5" height="10px" fill-opacity="1" width="2px" rx="0.75" ry="0.75"></rect>
-                <rect x="16" y="2.5" height="16px" fill-opacity="1" width="2px" rx="0.75" ry="0.75"></rect>
-                <rect x="20" y="7.5" height="6px" fill-opacity="1" width="2px" rx="0.75" ry="0.75"></rect>
-                <title id="altIconTitle">{{ translationMap.get('STREAM_AUDIO') }}</title>
-            </svg>
-        </span>
-
-        <span class="stream-audio-button__expanded" *ngIf="active">
-            <span class="stream-audio-button__bars" aria-hidden="true">
-                <span class="bar" [style.transform]="'scaleY(' + barScales[0] + ')'"></span>
-                <span class="bar" [style.transform]="'scaleY(' + barScales[1] + ')'"></span>
-                <span class="bar" [style.transform]="'scaleY(' + barScales[2] + ')'"></span>
-                <span class="bar" [style.transform]="'scaleY(' + barScales[3] + ')'"></span>
-            </span>
-            <span class="stream-audio-button__label">{{ translationMap.get('CLOSE') }}</span>
-        </span>
-    </ng-container>
-</ng-container>

package/src/app/component/conversation-detail/stream-audio-spectrum/stream-audio-spectrum.component.scss

@@ -1,83 +0,0 @@
-:host {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-}
-
-.stream-audio-spectrum {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  padding: 0 10px;
-  box-sizing: border-box;
-}
-
-.stream-audio-spectrum__svg {
-  width: 100%;
-  height: 32px;
-  display: block;
-}
-
-.stream-audio-spectrum__line {
-  pointer-events: none;
-  filter: drop-shadow(0 0 1px color-mix(in srgb, currentColor 35%, transparent));
-}
-
-/* ===========================
- * BUTTON (pill content)
- * =========================== */
-.stream-audio-button__icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-}
-
-.stream-audio-button__icon svg {
-  width: 20px;
-  height: 20px;
-  display: block;
-  rect {
-    fill: var(--icon-fill-color);
-  }
-}
-
-.stream-audio-button__expanded {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 12px;
-  width: 100%;
-  user-select: none;
-  color: var(--icon-fill-color);
-}
-
-.stream-audio-button__label {
-  font-size: 14px;
-  line-height: 1;
-  font-weight: 500;
-  letter-spacing: 0.2px;
-  white-space: nowrap;
-}
-
-.stream-audio-button__bars {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 3px;
-  width: 26px;
-  height: 18px;
-  transform-origin: center;
-  margin: 0;
-  line-height: 0;
-}
-
-.stream-audio-button__bars .bar {
-  width: 3px;
-  height: 100%;
-  border-radius: 2px;
-  background: var(--icon-fill-color);
-  transform-origin: center;
-}

package/src/app/component/conversation-detail/stream-audio-spectrum/stream-audio-spectrum.component.ts

@@ -1,192 +0,0 @@
-import { Component, Input, OnChanges, OnDestroy, OnInit, Optional, SimpleChanges } from '@angular/core';
-import { Subscription } from 'rxjs';
-import { VoiceService } from 'src/app/providers/voice/voice.service';
-
-export type StreamAudioSpectrumMode = 'alert' | 'button';
-
-/**
- * Icona stream: cerchio con linea orizzontale tipo spettro, reattiva al volume del microfono.
- * Il parent (es. conversation-footer) aggiorna solo {@link volume} da VoiceService.
- */
-@Component({
-  selector: 'chat-stream-audio-spectrum',
-  templateUrl: './stream-audio-spectrum.component.html',
-  styleUrl: './stream-audio-spectrum.component.scss',
-})
-export class StreamAudioSpectrumComponent implements OnInit, OnChanges {
-  private static gradSeq = 0;
-  readonly gradientId = `streamSpectrumGrad-${++StreamAudioSpectrumComponent.gradSeq}`;
-
-  /** Volume normalizzato come emesso da VoiceService (stessa scala del footer). */
-  @Input() volume = 0;
-  /** Colore tema (stroke / gradient); opzionale. */
-  @Input() accentColor?: string;
-
-  /** UI variant. `alert` = spectrum line (in #streamAudioAlert). `button` = icon / pill with bars + label. */
-  @Input() mode: StreamAudioSpectrumMode = 'alert';
-  /** For `mode="button"`: whether the stream is active (expanded pill). */
-  @Input() active = false;
-  /** For `mode="button"`: VAD speech flag; if omitted, we fall back to a volume threshold heuristic. */
-  @Input() isUserSpeaking?: boolean;
-  /** For `mode="button"`: label on the pill. */
-  @Input() translationMap: Map< string, string>;
-
-  // ALERT (spectrum line)
-  spectrumLinePath = 'M0,16 L100,16';
-
-  // BUTTON (bars)
-  barScales: [number, number, number, number] = [0.65, 0.65, 0.65, 0.65];
-  private rafId: number | null = null;
-  private lastSpeaking = false;
-  private voiceSpeechStartSub?: Subscription;
-  private voiceSpeechEndSub?: Subscription;
-  private internalIsUserSpeaking = false;
-
-  constructor(@Optional() private readonly voiceService: VoiceService | null) {}
-
-  ngOnInit(): void {
-    // Optional: use VAD speech events to improve idle/speaking detection.
-    if (this.voiceService) {
-      this.voiceSpeechStartSub = this.voiceService.speechStart$?.subscribe(() => {
-        this.internalIsUserSpeaking = true;
-      });
-      this.voiceSpeechEndSub = this.voiceService.speechEnd$?.subscribe(() => {
-        this.internalIsUserSpeaking = false;
-      });
-    }
-    this.refreshAll();
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes['volume'] || changes['mode'] || changes['active'] || changes['isUserSpeaking']) {
-      this.refreshAll();
-    }
-  }
-
-  ngOnDestroy(): void {
-    this.stopRaf();
-    this.voiceSpeechStartSub?.unsubscribe();
-    this.voiceSpeechEndSub?.unsubscribe();
-  }
-
-  private refreshAll(): void {
-    if (this.mode === 'alert') {
-      this.refreshSpectrumPath();
-      this.stopRaf();
-      return;
-    }
-    this.refreshBars();
-  }
-
-  private refreshSpectrumPath(): void {
-    const intensity = Math.min(this.volume / 80, 1);
-    const t = Date.now() / 175;
-    this.spectrumLinePath = this.buildSpectrumLinePath(intensity, t);
-  }
-
-  private buildSpectrumLinePath(intensity: number, t: number): string {
-    const x0 = 0;
-    const x1 = 100;
-    const cy = 16;
-    const segments = 100;
-    const amp = 0.8 + intensity * 6.5;
-    const parts: string[] = [];
-    for (let i = 0; i <= segments; i++) {
-      const p = i / segments;
-      const x = x0 + p * (x1 - x0);
-      const u = p * Math.PI * 6;
-      const wobble =
-        Math.sin(u + t) * 0.34 +
-        Math.sin(u * 2.35 + t * 1.12) * 0.24 +
-        Math.sin(u * 4.2 + t * 0.72) * 0.18 +
-        Math.sin(u * 6.8 + t * 1.05) * 0.14 +
-        Math.sin(u * 9.1 + t * 0.88) * 0.1;
-      const y = cy + amp * wobble;
-      const yClamped = Math.min(30, Math.max(2, y));
-      parts.push(i === 0 ? `M${x.toFixed(2)},${yClamped.toFixed(2)}` : `L${x.toFixed(2)},${yClamped.toFixed(2)}`);
-    }
-    return parts.join('');
-  }
-
-  private refreshBars(): void {
-    if (!this.active) {
-      this.stopRaf();
-      return;
-    }
-
-    const speaking = this.computeSpeaking();
-    if (!speaking) {
-      this.stopRaf();
-      this.barScales = [0.65, 0.65, 0.65, 0.65];
-      this.lastSpeaking = false;
-      return;
-    }
-
-    // speaking: animate bars with volume-driven intensity
-    if (!this.lastSpeaking) {
-      this.lastSpeaking = true;
-    }
-    this.startRaf();
-  }
-
-  private computeSpeaking(): boolean {
-    if (typeof this.isUserSpeaking === 'boolean') {
-      return this.isUserSpeaking;
-    }
-    if (this.voiceService) {
-      return this.internalIsUserSpeaking;
-    }
-    // Fallback heuristic: treat as speaking when volume crosses a low threshold.
-    return (this.volume || 0) >= 4;
-  }
-
-  private startRaf(): void {
-    if (this.rafId !== null) {
-      return;
-    }
-    const tick = () => {
-      if (!this.active) {
-        this.stopRaf();
-        return;
-      }
-      const speaking = this.computeSpeaking();
-      if (!speaking) {
-        this.stopRaf();
-        this.barScales = [0.65, 0.65, 0.65, 0.65];
-        return;
-      }
-
-      const intensity = Math.min((this.volume || 0) / 80, 1);
-      const t = performance.now() / 220;
-      const targets: [number, number, number, number] = [0.35, 0.35, 0.35, 0.35];
-
-      for (let i = 0; i < 4; i++) {
-        const phase = i * 0.9;
-        const w1 = (Math.sin(t * 1.35 + phase) + 1) / 2;
-        const w2 = (Math.sin(t * 2.05 + phase * 1.7) + 1) / 2;
-        const mix = w1 * 0.62 + w2 * 0.38;
-        const s = 0.25 + intensity * (0.25 + 0.95 * mix);
-        targets[i as 0 | 1 | 2 | 3] = Math.max(0.35, Math.min(1.2, s));
-      }
-
-      // Smooth toward targets to avoid jitter on rapid volume changes.
-      const lerp = (a: number, b: number, k: number) => a + (b - a) * k;
-      this.barScales = [
-        lerp(this.barScales[0], targets[0], 0.35),
-        lerp(this.barScales[1], targets[1], 0.35),
-        lerp(this.barScales[2], targets[2], 0.35),
-        lerp(this.barScales[3], targets[3], 0.35),
-      ];
-
-      this.rafId = requestAnimationFrame(tick);
-    };
-    this.rafId = requestAnimationFrame(tick);
-  }
-
-  private stopRaf(): void {
-    if (this.rafId !== null) {
-      cancelAnimationFrame(this.rafId);
-      this.rafId = null;
-    }
-  }
-}

package/src/app/component/form/prechat-form-test-mock.ts

@@ -1,35 +0,0 @@
-/**
- * Shared mock for pre-chat dynamic form (unit / integration-style tests).
- * Mirrors a typical `g.preChatFormJson` payload with i18n labels and email regex.
- */
-export const PRECHAT_FORM_JSON_MOCK = [
-  {
-    name: 'userFullname',
-    type: 'text',
-    mandatory: true,
-    label: {
-      en: 'User fullname',
-      it: 'Nome utente',
-    },
-  },
-  {
-    name: 'userEmail',
-    type: 'text',
-    mandatory: true,
-    regex:
-      "/^(?=.{1,254}$)(?=.{1,64}@)[-!#$%&'*+/0-9=?A-Z^_`a-z{|}~]+(.[-!#$%&'*+/0-9=?A-Z^_`a-z{|}~]+)*@[A-Za-z0-9]([A-Za-z0-9-]{0,61}[A-Za-z0-9])?(.[A-Za-z0-9]([A-Za-z0-9-]{0,61}[A-Za-z0-9])?)+$/",
-    label: {
-      en: 'Email',
-      it: 'Indirizzo email',
-    },
-    errorLabel: {
-      en: 'Invalid email address',
-      it: 'Indirizzo email non valido',
-    },
-  },
-];
-
-/** Deep clone so `setTranslations` / `buildFormGroup` can mutate safely in tests. */
-export function clonePrechatFormJsonMock(): any[] {
-  return JSON.parse(JSON.stringify(PRECHAT_FORM_JSON_MOCK));
-}

package/src/app/component/message/audio-sync/audio-sync.component.html

@@ -1,18 +0,0 @@
-<div class="lyrics-container">
-
-    <audio
-      #audioPlayer
-      (timeupdate)="onTimeUpdate()"
-      style="display:none">
-    </audio>
-  
-    <p class="lyrics message_innerhtml marked" #transcriptBox [style.color]="color">
-      <span
-        *ngFor="let w of words; let i = index; trackBy: trackByIndex"
-        class="word"
-        [ngClass]="w.state">
-        {{ w.text }}
-      </span>
-    </p>
-  
-</div>