@chat21/chat21-web-widget 5.1.30 → 5.1.32-rc2

package/src/app/component/message/audio/audio.component.ts

@@ -154,15 +154,10 @@ export class AudioComponent implements AfterViewInit {
     // });
 
     const response = await fetch(this.rawAudioUrl!);
-    this.logger.debug('getAudioDuration: response ---> ', response)
     const arrayBuffer = await response.arrayBuffer();
-    this.logger.debug('getAudioDuration: arrayBuffer ---> ', arrayBuffer)
     const audioContext = new (window.AudioContext || (window as any).webkitAudioContext)();
-    this.logger.debug('getAudioDuration: audioContext ---> ', audioContext)
     const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
-    this.logger.debug('getAudioDuration: audioBuffer ---> ', audioBuffer)
     this.audioDuration = audioBuffer.duration;
-    this.logger.debug('getAudioDuration: audioDuration ---> ', this.audioDuration)
 
   }
 

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

@@ -0,0 +1,19 @@
+<div class="lyrics-container">
+
+    <audio
+      #audioPlayer
+      [src]="message?.metadata?.src"
+      (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>

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

@@ -0,0 +1,65 @@
+:host {
+  display: block;
+  font-size: var(--font-size-bubble-message, 14px);
+}
+
+/* Allineato a text.component.scss (.message_innerhtml, p) */
+.message_innerhtml {
+  margin: 0;
+
+  &.marked {
+    padding: 12px 16px;
+    margin-block-start: 0em !important;
+    margin-block-end: 0em !important;
+  }
+}
+
+.lyrics {
+  font-size: inherit;
+  margin: 0;
+  line-height: 1.4em;
+  font-style: normal;
+  letter-spacing: normal;
+  font-stretch: normal;
+  font-variant: normal;
+  font-weight: 300;
+  overflow: hidden;
+
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  /* Colore bubble: da [style.color] / @Input() color — ereditato dalle .word */
+}
+
+/* base word */
+.word {
+  transition:
+    transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
+    color 0.3s ease,
+    opacity 0.3s ease,
+    filter 0.3s ease;
+
+  will-change: transform;
+}
+
+/* FUTURE */
+.word.future {
+  opacity: 0;
+  transform: scale(0.98);
+}
+
+/* PAST: stesso colore del testo bubble (@Input color sul <p>) */
+.word.past {
+  opacity: 1;
+  color: inherit;
+  transform: scale(1);
+}
+
+/* ACTIVE (solo momentaneo, tipo “karaoke flash”) */
+.word.active {
+  opacity: 1;
+  color: #00c3ff;
+  font-weight: 700;
+  transform: scale(1.18);
+  text-shadow: 0 0 10px rgba(0, 195, 255, 0.35);
+}

package/src/app/component/message/audio-sync/audio-sync.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AudioSyncComponent } from './audio-sync.component';
+
+describe('AudioSyncComponent', () => {
+  let component: AudioSyncComponent;
+  let fixture: ComponentFixture<AudioSyncComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AudioSyncComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AudioSyncComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,197 @@
+import {
+  AfterViewInit,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  Input,
+  OnChanges,
+  OnDestroy,
+  SimpleChanges,
+  ViewChild,
+} from '@angular/core';
+import { MessageModel } from 'src/chat21-core/models/message';
+
+/** HAVE_METADATA: metadati già disponibili (tipico audio servito da cache). */
+const HAVE_METADATA = 1;
+
+@Component({
+  selector: 'chat-audio-sync',
+  templateUrl: './audio-sync.component.html',
+  styleUrl: './audio-sync.component.scss',
+})
+export class AudioSyncComponent implements AfterViewInit, OnChanges, OnDestroy {
+  @Input() message: MessageModel | null = null;
+  @Input() color?: string;
+
+  @ViewChild('audioPlayer') audioRef!: ElementRef<HTMLAudioElement>;
+  @ViewChild('transcriptBox') transcriptBox!: ElementRef<HTMLElement>;
+
+  words: {
+    text: string;
+    start: number;
+    end: number;
+    state: 'future' | 'active' | 'past';
+  }[] = [];
+
+  currentTime = 0;
+  duration = 1;
+  activeIndex = -1;
+
+  private timingReady = false;
+  private onMetadataLoaded: () => void;
+  private onPlaybackEnded: () => void;
+
+  constructor(private readonly cdr: ChangeDetectorRef) {}
+
+  /** `false` = messaggio già in storico: niente autoplay / karaoke. Da `message.isJustRecived`. */
+  private get skipSyncAnimation(): boolean {
+    return this.message?.isJustRecived === false;
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (!changes['message']) {
+      return;
+    }
+    if (this.audioRef?.nativeElement && this.timingReady) {
+      this.duration = this.audioRef.nativeElement.duration || 1;
+      this.buildFakeTiming();
+      if (this.skipSyncAnimation) {
+        this.markAllWordsPast();
+      } else {
+        this.syncStatesFromCurrentTime();
+      }
+    }
+  }
+
+  ngAfterViewInit(): void {
+    const audio = this.audioRef.nativeElement;
+
+    this.onPlaybackEnded = () => {
+      if (this.skipSyncAnimation) {
+        return;
+      }
+      this.markAllWordsPast();
+      if (this.message) {
+        this.message.isJustRecived = false;
+      }
+      this.cdr.detectChanges();
+    };
+
+    this.onMetadataLoaded = () => {
+      if (this.timingReady) {
+        return;
+      }
+      this.timingReady = true;
+      this.duration = audio.duration || 1;
+      this.buildFakeTiming();
+      if (this.skipSyncAnimation) {
+        this.markAllWordsPast();
+        this.cdr.detectChanges();
+        return;
+      }
+      this.syncStatesFromCurrentTime();
+      this.cdr.detectChanges();
+
+      setTimeout(() => {
+        audio.play().catch(() => {
+          this.syncStatesFromCurrentTime();
+          this.cdr.detectChanges();
+        });
+      }, 200);
+    };
+
+    audio.addEventListener('loadedmetadata', this.onMetadataLoaded);
+    audio.addEventListener('ended', this.onPlaybackEnded);
+
+    if (audio.readyState >= HAVE_METADATA) {
+      this.onMetadataLoaded();
+    }
+  }
+
+  ngOnDestroy(): void {
+    const audio = this.audioRef?.nativeElement;
+    if (!audio) {
+      return;
+    }
+    if (this.onMetadataLoaded) {
+      audio.removeEventListener('loadedmetadata', this.onMetadataLoaded);
+    }
+    if (this.onPlaybackEnded) {
+      audio.removeEventListener('ended', this.onPlaybackEnded);
+    }
+  }
+
+  private markAllWordsPast(): void {
+    this.words.forEach((w) => {
+      w.state = 'past';
+    });
+    this.activeIndex = -1;
+  }
+
+  buildFakeTiming(): void {
+    const rawWords = (this.message?.text || '')
+      .trim()
+      .split(/\s+/)
+      .filter((w) => w.length > 0);
+    if (rawWords.length === 0) {
+      this.words = [];
+      return;
+    }
+    const step = this.duration / rawWords.length;
+
+    this.words = rawWords.map((w, i) => ({
+      text: w,
+      start: i * step,
+      end: (i + 1) * step,
+      state: 'future' as const,
+    }));
+  }
+
+  syncStatesFromCurrentTime(): void {
+    if (this.skipSyncAnimation) {
+      return;
+    }
+    const audio = this.audioRef?.nativeElement;
+    if (!audio || this.words.length === 0) {
+      return;
+    }
+    this.currentTime = audio.currentTime;
+    let newActiveIndex = -1;
+
+    this.words.forEach((w, i) => {
+      if (this.currentTime >= w.end) {
+        w.state = 'past';
+      } else if (this.currentTime >= w.start && this.currentTime < w.end) {
+        w.state = 'active';
+        newActiveIndex = i;
+      } else {
+        w.state = 'future';
+      }
+    });
+
+    if (newActiveIndex !== this.activeIndex) {
+      this.activeIndex = newActiveIndex;
+      this.scrollToActive();
+    }
+  }
+
+  onTimeUpdate(): void {
+    this.syncStatesFromCurrentTime();
+  }
+
+  scrollToActive(): void {
+    const container = this.transcriptBox?.nativeElement;
+    const active = container?.querySelector('.active') as HTMLElement;
+
+    if (active) {
+      active.scrollIntoView({
+        behavior: 'smooth',
+        block: 'center',
+      });
+    }
+  }
+
+  trackByIndex(index: number): number {
+    return index;
+  }
+}

package/src/app/component/message/bubble-message/bubble-message.component.html

@@ -64,6 +64,11 @@
         [stylesMap]="stylesMap">
       </chat-audio>
 
+      <chat-audio-sync *ngIf="isAudioTTS(message)"
+        [message]="message"
+        [color]="fontColor">
+      </chat-audio-sync>
+
 
       <!-- <chat-frame *ngIf="message.metadata && message.metadata.type && message.metadata.type.includes('video')"
         [metadata]="message.metadata"
@@ -75,7 +80,7 @@
       <!-- <div *ngIf="message.type == 'text'"> -->     
 
       <!-- tooltip="{{message.timestamp | dateAgo}} ({{message.timestamp | date:'shortDate'}} {{message.timestamp | date:'HH:mm:ss'}})" placement="bottom" -->
-      <div *ngIf="message?.text && !isAudio(message)" >
+      <div *ngIf="message?.text && (!isAudio(message) && !isAudioTTS(message))" >
 
         <!-- [htmlEnabled]="(message?.type==='html')? true : false" -->
         <chat-text *ngIf="message?.type !=='html'"

package/src/app/component/message/bubble-message/bubble-message.component.ts

@@ -5,7 +5,7 @@ import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 import { MAX_WIDTH_IMAGES, MESSAGE_TYPE_MINE, MESSAGE_TYPE_OTHERS, MIN_WIDTH_IMAGES } from 'src/chat21-core/utils/constants';
 import { convertColorToRGBA } from 'src/chat21-core/utils/utils';
-import { isAudio, isFile, isFrame, isImage, messageType } from 'src/chat21-core/utils/utils-message';
+import { isAudio, isAudioTTS, isFile, isFrame, isImage, messageType } from 'src/chat21-core/utils/utils-message';
 import { getColorBck } from 'src/chat21-core/utils/utils-user';
 
 @Component({
@@ -26,6 +26,7 @@ export class BubbleMessageComponent implements OnInit {
   isFile = isFile;
   isFrame = isFrame;
   isAudio = isAudio;
+  isAudioTTS=isAudioTTS;
   convertColorToRGBA = convertColorToRGBA
 
  // ========== begin:: check message type functions ======= //

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

@@ -1125,11 +1125,22 @@ export class GlobalSettingsService {
         if (TEMP !== undefined) {
             globals.showAudioRecorderFooterButton = (TEMP === true) ? true : false;
         }
+        TEMP = tiledeskSettings['showAudioStreamFooterButton'];
+        // this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > showAudioStreamFooterButton:: ', TEMP]);
+        if (TEMP !== undefined) {
+            globals.showAudioStreamFooterButton = (TEMP === true) ? true : false;
+        }
         TEMP = tiledeskSettings['size'];
         // this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > size:: ', TEMP]);
         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;
+        }
     }
 
     /**
@@ -1867,6 +1878,11 @@ export class GlobalSettingsService {
             globals.showAttachmentFooterButton = stringToBoolean(TEMP);
         }
 
+        TEMP = getParameterByName(windowContext, 'tiledesk_showAudioStreamFooterButton');
+        if (TEMP) {
+            globals.showAudioStreamFooterButton = stringToBoolean(TEMP);
+        }
+
         TEMP = getParameterByName(windowContext, 'tiledesk_showEmojiFooterButton');
         if (TEMP) {
             globals.showEmojiFooterButton = stringToBoolean(TEMP);
@@ -1876,6 +1892,11 @@ export class GlobalSettingsService {
         if (TEMP) {
             globals.size = TEMP;
         }
+
+        TEMP = getParameterByName(windowContext, 'tiledesk_closeChatInConversation');
+        if (TEMP) {
+            globals.closeChatInConversation = stringToBoolean(TEMP);
+        }
         
     }
 

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

@@ -302,6 +302,7 @@ export class TranslatorService {
       'CLOSED',
       'LABEL_PREVIEW',
       'MAX_ATTACHMENT',
+      'MAX_ATTACHMENT_ERROR',
       'EMOJI'
     ];
 
@@ -358,6 +359,7 @@ 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']
       
       

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

@@ -0,0 +1,12 @@
+/**
+ * Configurazione opzionale per i servizi voce OpenAI (da `environment` o runtime).
+ */
+export interface OpenAiVoiceEnvironmentConfig {
+  /** Obbligatoria per chiamate API reali; se assente, STT/TTS non inviano richieste. */
+  apiKey?: string;
+  baseUrl?: string;
+  transcriptionModel?: string;
+  ttsModel?: string;
+  /** Voce predefinita TTS (es. `alloy`). */
+  ttsVoice?: string;
+}

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

@@ -0,0 +1,171 @@
+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,
+  type SpeechToTextRequest,
+  type SpeechToTextResult,
+  type TextToSpeechRequest,
+  type TextToSpeechResult,
+} 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}.
+ */
+@Injectable({ providedIn: 'root' })
+export class OpenAiVoiceProviderService extends SpeechToTextProvider implements TextToSpeechProvider {
+  constructor(
+    private readonly httpClient: HttpClient,
+    private readonly appConfig: AppConfigService
+  ) {
+    super();
+  }
+
+  async transcribe(request: SpeechToTextRequest): Promise<SpeechToTextResult> {
+    const cfg = this.getConfig();
+    const apiKey = cfg.apiKey?.trim();
+    if (!apiKey) {
+      return { text: '' };
+    }
+
+    const base = (cfg.baseUrl ?? DEFAULT_BASE).replace(/\/$/, '');
+    const model = cfg.transcriptionModel ?? DEFAULT_TRANSCRIPTION_MODEL;
+    const url = `${base}/audio/transcriptions`;
+
+    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);
+    if (request.language) {
+      form.append('language', request.language);
+    }
+
+    const headers = new HttpHeaders({
+      Authorization: `Bearer ${apiKey}`,
+    });
+
+    try {
+      const data = await firstValueFrom(
+        this.httpClient.post<{ text?: string }>(url, form, { headers }),
+      );
+      return { text: (data.text ?? '').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 this.mapOpenAiHttpError(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 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 headers = new HttpHeaders({
+      Authorization: `Bearer ${apiKey}`,
+      'Content-Type': 'application/json',
+    });
+
+    try {
+      const blob = await firstValueFrom(
+        this.httpClient.post(url, body, {
+          headers,
+          responseType: 'blob',
+        }),
+      );
+      return { audio: blob, mimeType: this.mimeForFormat(responseFormat) };
+    } 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}`);
+      }
+      if (e instanceof HttpErrorResponse) {
+        throw new Error(`OpenAI TTS ${e.status}: ${e.message || e.statusText}`);
+      }
+      throw e;
+    }
+  }
+
+  private getConfig(): OpenAiVoiceEnvironmentConfig {
+    return this.appConfig.getConfig().openAiKey ?? {};
+  }
+
+  private mapOpenAiHttpError(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)}`);
+    }
+    if (typeof e.error === 'string') {
+      return new Error(`${label} ${e.status}: ${e.error}`);
+    }
+    return new Error(`${label} ${e.status}: ${e.message || e.statusText}`);
+  }
+
+  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';
+    }
+    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';
+    }
+  }
+}

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

@@ -0,0 +1,39 @@
+/**
+ * Contratti astratti per Speech-to-Text e Text-to-Speech.
+ * Implementazione OpenAI unificata: `OpenAiVoiceProviderService` (`openai-voice.provider.ts`).
+ */
+
+/** Input per la trascrizione di un segmento audio. */
+export interface SpeechToTextRequest {
+  audio: Blob;
+  mimeType: string;
+  /** ISO 639-1 opzionale (es. `it`, `en`). */
+  language?: string;
+}
+
+export interface SpeechToTextResult {
+  text: string;
+}
+
+/** Input per la sintesi vocale. */
+export interface TextToSpeechRequest {
+  text: string;
+  /** Voce provider-specific (es. OpenAI: `alloy`, `echo`, …). */
+  voice?: string;
+  language?: string;
+  /** Formato audio desiderato (dipende dal provider). */
+  responseFormat?: string;
+}
+
+export interface TextToSpeechResult {
+  audio: Blob;
+  mimeType: string;
+}
+
+export abstract class SpeechToTextProvider {
+  abstract transcribe(request: SpeechToTextRequest): Promise<SpeechToTextResult>;
+}
+
+export abstract class TextToSpeechProvider {
+  abstract synthesize(request: TextToSpeechRequest): Promise<TextToSpeechResult>;
+}

package/src/app/providers/voice/audio.types.ts

@@ -0,0 +1,34 @@
+/**
+ * Tipi condivisi per cattura microfono, VAD e registrazione (WebM).
+ */
+
+export const DEFAULT_VOICE_AUDIO_CONSTRAINTS: MediaTrackConstraints = {
+  echoCancellation: true,
+  noiseSuppression: true,
+  autoGainControl: true,
+};
+
+export const DEFAULT_VOICE_MEDIA_STREAM_CONSTRAINTS: MediaStreamConstraints = {
+  audio: DEFAULT_VOICE_AUDIO_CONSTRAINTS,
+};
+
+export interface VoiceRecordedBlob {
+  blob: Blob;
+  mimeType: string;
+}
+
+/**
+ * Segmento audio dopo VAD; può includere `transcript` se STT è configurato e abilitato.
+ */
+export interface VoiceSegmentPayload extends VoiceRecordedBlob {
+  transcript?: string;
+  transcriptionError?: string;
+}
+
+export interface VoiceSessionStartOptions {
+  /** Opzionale se usi solo {@link VoiceService.audioSegment$}. */
+  onRecordingComplete?: (result: VoiceSegmentPayload) => void;
+  constraints?: MediaStreamConstraints;
+  /** Default `true`. Se `false`, non viene chiamato lo STT sul segmento. */
+  enableTranscription?: boolean;
+}