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

package/src/app/component/message/json-sources/json-sources.component.ts

@@ -10,6 +10,12 @@ export type JsonSourceItem = {
   image?: string;
 };
 
+export type JsonSourcesDisplayFields = {
+  title?: boolean;
+  description?: boolean;
+  image?: boolean;
+};
+
 @Component({
   selector: 'chat-json-sources',
   templateUrl: './json-sources.component.html',
@@ -19,11 +25,30 @@ export class JsonSourcesComponent {
   @Input() items: JsonSourceItem[] = [];
   @Input() themeColor?: string;
   @Input() limit = 3;
+  // Optional: per-field visibility. Missing/undefined fields default to visible
+  // (only an explicit `false` hides the field).
+  @Input() displayFields?: JsonSourcesDisplayFields;
+  // Optional: background color override for the sources panel.
+  @Input() backgroundColor?: string;
 
   @Output() onElementRendered = new EventEmitter<{ element: string; status: boolean }>();
 
   showAll = false;
 
+  isFieldVisible(field: keyof JsonSourcesDisplayFields): boolean {
+    return this.displayFields?.[field] !== false;
+  }
+
+  // Title is always rendered: when its content is missing or the field is
+  // hidden via displayFields, we fall back to the item URL so the row is never
+  // left without a label.
+  getTitleText(item: JsonSourceItem): string {
+    const titleVisible = this.isFieldVisible('title');
+    const title = (item?.title || '').trim();
+    if (titleVisible && title) return title;
+    return (item?.link || '').trim();
+  }
+
   trackByLink = (_: number, item: JsonSourceItem) => item?.link || item?.title || _;
 
   ngAfterViewInit() {
@@ -51,6 +76,22 @@ export class JsonSourcesComponent {
     return hostname || '';
   }
 
+  // Route large source images through wsrv.nl which downsamples them server-side
+  // to a thumbnail-sized version. Rendering at ~3x the CSS size keeps the result
+  // sharp on retina displays. Falls back to the original URL on any error.
+  getThumbUrl(item: JsonSourceItem): string {
+    const raw = (item?.image || '').trim();
+    if (!raw) return '';
+    if (!/^https?:\/\//i.test(raw)) return raw;
+    try {
+      const stripped = raw.replace(/^https?:\/\//i, '');
+      const encoded = encodeURIComponent(stripped);
+      return `https://wsrv.nl/?url=${encoded}&w=120&h=120&fit=cover&output=webp&n=-1`;
+    } catch {
+      return raw;
+    }
+  }
+
   private safeHostname(url: string): string {
     try {
       return new URL(url).hostname.replace(/^www\./, '');

package/src/app/providers/global-settings.service.ts

@@ -66,8 +66,6 @@ export class GlobalSettingsService {
         this.globals.logLevel = this.appConfigService.getConfig().logLevel
         /**SET PERSISTENCE parameter */
         this.globals.persistence = this.appConfigService.getConfig().authPersistence
-        /**SET CLOSE CHAT IN CONVERSATION parameter */
-        this.globals.closeChatInConversation = this.appConfigService.getConfig().closeChatInConversation;
 
         // ------------------------------- //
         /** LOAD PARAMETERS FROM SERVER
@@ -340,8 +338,6 @@ export class GlobalSettingsService {
         this.setCssIframe();
         /** set main style */
         this.setStyle();
-        /** external CSS override: last stylesheet in document head (max cascade priority vs bundle) */
-        this.applyCustomCssOverrideFromGlobals();
         this.obsSettingsService.next(true);
     }
 
@@ -422,28 +418,6 @@ export class GlobalSettingsService {
 
         document.documentElement.style.setProperty('--font-family', family);
     }
-
-    /**
-     * Loads `globals.cssSource` (set only from tiledeskSettings) as the last stylesheet in head
-     * so rules with the same specificity override local / bundled CSS.
-     */
-    private applyCustomCssOverrideFromGlobals(): void {
-        const id = 'tiledesk-widget-css-override';
-        document.getElementById(id)?.remove();
-
-        const href = (this.globals.cssSource || '').trim();
-        console.log('href', href);
-        if (!href) {
-            return;
-        }
-
-        const link = document.createElement('link');
-        link.id = id;
-        link.rel = 'stylesheet';
-        link.href = href;
-        link.setAttribute('data-tiledesk-css-override', 'true');
-        document.head.appendChild(link);
-    }
     /**
      * A: setVariablesFromService
      */
@@ -667,11 +641,6 @@ export class GlobalSettingsService {
         let TEMP: any;
         const tiledeskSettings = windowContext['tiledeskSettings'];
         // this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > tiledeskSettings: ', tiledeskSettings);
-        /** css override URL: solo tiledeskSettings, mai da URL / query params */
-        TEMP = tiledeskSettings['cssSource'];
-        if (TEMP !== undefined) {
-            globals.cssSource = TEMP;
-        }
         TEMP = tiledeskSettings['tenant'];
         // this.logger.debug('[GLOBAL-SET] setVariablesFromSettings >  tenant:: ', TEMP);
         if (TEMP !== undefined) {
@@ -1176,12 +1145,6 @@ export class GlobalSettingsService {
         if (TEMP !== undefined) {
             globals.size = TEMP;
         } 
-
-        TEMP = tiledeskSettings['closeChatInConversation'];
-        // this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > closeChatInConversation:: ', TEMP]);
-        if (TEMP !== undefined) {
-            globals.closeChatInConversation = (TEMP === true) ? true : false;
-        }
     }
 
     /**
@@ -1951,11 +1914,6 @@ export class GlobalSettingsService {
         if (TEMP) {
             globals.size = TEMP;
         }
-
-        TEMP = getParameterByName(windowContext, 'tiledesk_closeChatInConversation');
-        if (TEMP) {
-            globals.closeChatInConversation = stringToBoolean(TEMP);
-        }
         
     }
 

package/src/app/providers/json-sources-parser.service.ts

@@ -5,9 +5,17 @@ import { extractUrlsFromText } from 'src/app/utils/url-utils';
 import { JsonSourceItem } from 'src/app/component/message/json-sources/json-sources.component';
 import { mergeJsonSourcesMissingFields } from 'src/app/utils/json-sources-utils';
 
+export type UrlPreviewDisplayFields = {
+  title?: boolean;
+  description?: boolean;
+  image?: boolean;
+};
+
 export type UrlPreviewMessage = {
   type?: string; // "url_preview"
   text?: string;
+  displayFields?: UrlPreviewDisplayFields;
+  previewBackgroundColor?: string;
 };
 
 /**
@@ -79,7 +87,11 @@ export class JsonSourcesParserService {
     return this.enrichSources(base);
   }
 
-  private getUrlPreviewPayload(messageLike?: any): UrlPreviewMessage | null {
+  /**
+   * Public: lets callers (UI components) read the raw `url_preview` payload to
+   * extract presentation options like `displayFields` or `previewBackgroundColor`.
+   */
+  getUrlPreviewPayload(messageLike?: any): UrlPreviewMessage | null {
     if (!messageLike) return null;
     const candidates: any[] = [
       messageLike,

package/src/app/providers/translator.service.ts

@@ -318,9 +318,7 @@ export class TranslatorService {
       'LABEL_PREVIEW',
       'MAX_ATTACHMENT',
       'EMOJI',
-      'BUTTON_OPEN_CHAT',
-      'MAX_ATTACHMENT_ERROR',
-      'EMOJI'
+      'BUTTON_OPEN_CHAT'
     ];
 
 
@@ -376,7 +374,6 @@ export class TranslatorService {
       globals.LABEL_PREVIEW = res['LABEL_PREVIEW']
       globals.LABEL_ERROR_FIELD_REQUIRED= res['LABEL_ERROR_FIELD_REQUIRED']
       globals.MAX_ATTACHMENT = res['MAX_ATTACHMENT']
-      globals.MAX_ATTACHMENT_ERROR = res['MAX_ATTACHMENT_ERROR']
       globals.EMOJI = res['EMOJI']
       globals.BUTTON_OPEN_CHAT = res['BUTTON_OPEN_CHAT']
       

package/src/app/providers/tts-audio-playback-coordinator.service.spec.ts

@@ -1,12 +1,10 @@
-import { TestBed } from '@angular/core/testing';
 import { TtsAudioPlaybackCoordinator } from './tts-audio-playback-coordinator.service';
 
 describe('TtsAudioPlaybackCoordinator', () => {
   let coordinator: TtsAudioPlaybackCoordinator;
 
   beforeEach(() => {
-    TestBed.configureTestingModule({ providers: [TtsAudioPlaybackCoordinator] });
-    coordinator = TestBed.inject(TtsAudioPlaybackCoordinator);
+    coordinator = new TtsAudioPlaybackCoordinator();
   });
 
   // ── Basic lifecycle ───────────────────────────────────────────────────────
@@ -28,15 +26,16 @@ describe('TtsAudioPlaybackCoordinator', () => {
   });
 
   it('stopAll clears the queue, sets playing=false, and emits stopAllPlayback$', () => {
-    const stopNextSpy = spyOn((coordinator as any)._stopAll$, 'next').and.callThrough();
+    const stopAllFired: void[] = [];
+    coordinator.stopAllPlayback$.subscribe(() => stopAllFired.push(undefined));
 
     coordinator.requestStart('msg-1', () => {});
     coordinator.stopAll();
 
-    expect(stopNextSpy).toHaveBeenCalledTimes(1);
-    const states: boolean[] = [];
-    coordinator.isTTSPlaying$.subscribe((v) => states.push(v));
-    expect(states).toEqual([false]);
+    let playing = true;
+    coordinator.isTTSPlaying$.subscribe((v) => (playing = v));
+    expect(playing).toBe(false);
+    expect(stopAllFired.length).toBe(1);
   });
 
   // ── Preemption tests (SPEC-002) ───────────────────────────────────────────

package/src/app/providers/tts-audio-playback-coordinator.service.ts

@@ -11,6 +11,10 @@ export class TtsAudioPlaybackCoordinator {
   private currentOwnerId: string | null = null;
   private readonly queue: Array<{ ownerId: string; start: () => void }> = [];
 
+  private readonly cancelAllSource = new Subject<void>();
+  /** Emesso quando la riproduzione TTS va interrotta globalmente (es. l’utente parla al microfono). */
+  readonly cancelAll$: Observable<void> = this.cancelAllSource.asObservable();
+
   /** Emits true while any TTS is playing or queued; false when the queue is fully drained. */
   private readonly _isTTSPlaying$ = new BehaviorSubject<boolean>(false);
   readonly isTTSPlaying$ = this._isTTSPlaying$.asObservable();
@@ -96,6 +100,15 @@ export class TtsAudioPlaybackCoordinator {
     this.releaseIfCurrent(ownerId);
   }
 
+  /**
+   * Interrompe TUTTA la riproduzione TTS (corrente + coda) e notifica i componenti.
+   * I componenti devono fermare l’audio e mostrare il testo per intero.
+   */
+  cancelAll(): void {
+    this.stopAll();
+    this.cancelAllSource.next();
+  }
+
   /**
    * Stops all TTS playback immediately and clears the queue.
    * Broadcasts on stopAllPlayback$ so every AudioSyncComponent can abort its stream and reveal all text.

package/src/app/providers/voice/STT&TTS/openai-voice.provider.ts

@@ -1,9 +1,7 @@
 import { HttpClient, HttpErrorResponse, HttpHeaders } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { firstValueFrom } from 'rxjs';
-import { environment } from 'src/environments/environment';
 
-import type { OpenAiVoiceEnvironmentConfig } from './openai-voice.config';
 import {
   SpeechToTextProvider,
   TextToSpeechProvider,
@@ -14,121 +12,121 @@ import {
 } from './speech-provider.abstract';
 import { AppConfigService } from '../../app-config.service';
 
-const DEFAULT_BASE = 'https://api.openai.com/v1';
-const DEFAULT_TRANSCRIPTION_MODEL = 'whisper-1';
-const DEFAULT_TTS_MODEL = 'tts-1';
-const DEFAULT_VOICE = 'alloy';
-const DEFAULT_FORMAT = 'mp3';
-
 /**
- * Provider OpenAI unico: STT (Whisper) + TTS, entrambi via {@link HttpClient}.
+ * Routes STT and TTS calls through the tiledesk-speech-proxy.
+ *
+ * STT: POST <proxyBase>/api/stt  — multipart/form-data, field "audio"
+ * TTS: POST <proxyBase>/api/tts  — JSON body { text, ... }
  */
 @Injectable({ providedIn: 'root' })
 export class OpenAiVoiceProviderService extends SpeechToTextProvider implements TextToSpeechProvider {
   constructor(
     private readonly httpClient: HttpClient,
-    private readonly appConfig: AppConfigService
+    private readonly appConfig: AppConfigService,
   ) {
     super();
   }
 
   async transcribe(request: SpeechToTextRequest): Promise<SpeechToTextResult> {
-    const cfg = this.getConfig();
-    const apiKey = cfg.apiKey?.trim();
-    if (!apiKey) {
+    const proxyBase = this.proxyBase();
+    if (!proxyBase) {
       return { text: '' };
     }
 
-    const base = (cfg.baseUrl ?? DEFAULT_BASE).replace(/\/$/, '');
-    const model = cfg.transcriptionModel ?? DEFAULT_TRANSCRIPTION_MODEL;
-    const url = `${base}/audio/transcriptions`;
-
+    const url = `${proxyBase}/api/stt`;
     const ext = this.extensionForMime(request.mimeType);
     const file = new File([request.audio], `segment.${ext}`, { type: request.mimeType });
 
     const form = new FormData();
-    form.append('file', file);
-    form.append('model', model);
+    form.append('audio', file);
     if (request.language) {
       form.append('language', request.language);
     }
+    const projectId = String(this.appConfig.g?.projectid ?? '').trim();
+    if (projectId) form.append('projectId', projectId);
+    const requestId = this.parseRequestId(this.appConfig.g?.recipientId ?? '');
+    if (requestId) {
+      form.append('requestId', requestId);
+    }
 
-    const headers = new HttpHeaders({
-      Authorization: `Bearer ${apiKey}`,
-    });
+    const headers = new HttpHeaders({ Authorization: this.authHeader() });
 
     try {
       const data = await firstValueFrom(
-        this.httpClient.post<{ text?: string }>(url, form, { headers }),
+        this.httpClient.post<{ transcript?: string }>(url, form, { headers }),
       );
-      return { text: (data.text ?? '').trim() };
+      return { text: (data.transcript ?? '').trim() };
     } catch (e) {
       if (e instanceof HttpErrorResponse && e.error instanceof Blob) {
         const errText = await e.error.text();
-        throw new Error(`OpenAI transcription ${e.status}: ${errText || e.statusText}`);
+        throw new Error(`Speech proxy STT ${e.status}: ${errText || e.statusText}`);
       }
-      throw this.mapOpenAiHttpError(e);
+      throw this.mapHttpError('Speech proxy STT', e);
     }
   }
 
   async synthesize(request: TextToSpeechRequest): Promise<TextToSpeechResult> {
-    const cfg = this.getConfig();
-    const apiKey = cfg.apiKey?.trim();
-    if (!apiKey) {
-      throw new Error('OpenAI API key not configured (environment.openAiVoice.apiKey)');
+    const proxyBase = this.proxyBase();
+    if (!proxyBase) {
+      throw new Error('voiceProxyApiBaseUrl not configured');
     }
 
-    const base = (cfg.baseUrl ?? DEFAULT_BASE).replace(/\/$/, '');
-    const model = cfg.ttsModel ?? DEFAULT_TTS_MODEL;
-    const voice = request.voice ?? cfg.ttsVoice ?? DEFAULT_VOICE;
-    const responseFormat =
-      (request.responseFormat as 'mp3' | 'opus' | 'aac' | 'flac' | undefined) ?? DEFAULT_FORMAT;
-    const url = `${base}/audio/speech`;
-
-    const body = {
-      model,
-      voice,
-      input: request.text,
-      response_format: responseFormat,
-    };
+    const url = `${proxyBase}/api/tts`;
+    const body: Record<string, unknown> = { text: request.text };
+    if (request.language) body['language'] = request.language;
+    if (request.voice) body['voiceId'] = request.voice;
+    if (request.responseFormat) body['outputFormat'] = request.responseFormat;
+    const projectId = String(this.appConfig.g?.projectid ?? '').trim();
+    if (projectId) body['projectId'] = projectId;
+    const requestId = this.parseRequestId(this.appConfig.g?.recipientId ?? '');
+    if (requestId) body['requestId'] = requestId;
 
     const headers = new HttpHeaders({
-      Authorization: `Bearer ${apiKey}`,
+      Authorization: this.authHeader(),
       'Content-Type': 'application/json',
     });
 
     try {
       const blob = await firstValueFrom(
-        this.httpClient.post(url, body, {
-          headers,
-          responseType: 'blob',
-        }),
+        this.httpClient.post(url, body, { headers, responseType: 'blob' }),
       );
-      return { audio: blob, mimeType: this.mimeForFormat(responseFormat) };
+      return { audio: blob, mimeType: this.mimeForFormat(request.responseFormat ?? 'mp3') };
     } catch (e) {
       if (e instanceof HttpErrorResponse && e.error instanceof Blob) {
         const errText = await e.error.text();
-        throw new Error(`OpenAI TTS ${e.status}: ${errText || e.statusText}`);
+        throw new Error(`Speech proxy TTS ${e.status}: ${errText || e.statusText}`);
       }
-      if (e instanceof HttpErrorResponse) {
-        throw new Error(`OpenAI TTS ${e.status}: ${e.message || e.statusText}`);
-      }
-      throw e;
+      throw this.mapHttpError('Speech proxy TTS', e);
     }
   }
 
-  private getConfig(): OpenAiVoiceEnvironmentConfig {
-    return this.appConfig.getConfig().openAiKey ?? {};
+  private proxyBase(): string | null {
+    const base = String(this.appConfig.getConfig()?.voiceProxyApiBaseUrl ?? '').trim();
+    return base ? base.replace(/\/$/, '') : null;
+  }
+
+  /** Returns `JWT <rawToken>`, stripping any existing prefix first. */
+  private authHeader(): string {
+    const raw = (
+      String(this.appConfig.g?.tiledeskToken ?? this.appConfig.g?.jwt ?? '').trim()
+    ).replace(/^(JWT|Bearer)\s+/i, '').trim();
+    return raw ? `JWT ${raw}` : '';
+  }
+
+  /**
+   * Extracts the Tiledesk requestId from a Chat21 recipient string.
+   * Format: `support-group-<projectId>-<requestId>`
+   */
+  private parseRequestId(recipient: string): string | null {
+    const parts = recipient.split('-');
+    if (parts.length < 4) return null;
+    return parts.slice(3).join('-') || null;
   }
 
-  private mapOpenAiHttpError(e: unknown): Error {
+  private mapHttpError(label: string, e: unknown): Error {
     if (!(e instanceof HttpErrorResponse)) {
       return e instanceof Error ? e : new Error(String(e));
     }
-    const label = 'OpenAI transcription';
-    if (e.error instanceof Blob) {
-      return new Error(`${label} ${e.status}: ${e.statusText}`);
-    }
     if (typeof e.error === 'object' && e.error !== null && 'error' in e.error) {
       const err = (e.error as { error?: { message?: string } }).error;
       return new Error(`${label} ${e.status}: ${err?.message ?? JSON.stringify(e.error)}`);
@@ -140,32 +138,19 @@ export class OpenAiVoiceProviderService extends SpeechToTextProvider implements
   }
 
   private extensionForMime(mime: string): string {
-    if (mime.includes('webm')) {
-      return 'webm';
-    }
-    if (mime.includes('mp4') || mime.includes('m4a')) {
-      return 'm4a';
-    }
-    if (mime.includes('wav')) {
-      return 'wav';
-    }
-    if (mime.includes('mpeg') || mime.includes('mp3')) {
-      return 'mp3';
-    }
+    if (mime.includes('webm')) return 'webm';
+    if (mime.includes('mp4') || mime.includes('m4a')) return 'm4a';
+    if (mime.includes('wav')) return 'wav';
+    if (mime.includes('mpeg') || mime.includes('mp3')) return 'mp3';
     return 'webm';
   }
 
   private mimeForFormat(fmt: string): string {
     switch (fmt) {
-      case 'opus':
-        return 'audio/opus';
-      case 'aac':
-        return 'audio/aac';
-      case 'flac':
-        return 'audio/flac';
-      case 'mp3':
-      default:
-        return 'audio/mpeg';
+      case 'opus': return 'audio/opus';
+      case 'aac':  return 'audio/aac';
+      case 'flac': return 'audio/flac';
+      default:     return 'audio/mpeg';
     }
   }
 }