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

package/src/app/component/conversation-detail/conversation-footer/conversation-footer.component.ts

@@ -1,4 +1,4 @@
-import { Component, ComponentFactoryResolver, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild, ViewContainerRef } from '@angular/core';
+import { Component, ComponentFactoryResolver, ElementRef, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, ViewChild, ViewContainerRef } from '@angular/core';
 import { error } from 'console';
 import { FILE_SIZE_LIMIT } from 'src/app/utils/constants';
 import { Globals } from 'src/app/utils/globals';
@@ -15,13 +15,15 @@ import { TYPE_MSG_FILE, TYPE_MSG_IMAGE, TYPE_MSG_TEXT } from 'src/chat21-core/ut
 import { convertColorToRGBA, isAllowedUrlInText, isEmoji } from 'src/chat21-core/utils/utils';
 import { findAndRemoveEmoji, isImage } from 'src/chat21-core/utils/utils-message';
 import { ProjectModel } from 'src/models/project';
+import { Subscription } from 'rxjs';
+import { VoiceService } from 'src/app/providers/voice/voice.service';
 
 @Component({
   selector: 'chat-conversation-footer',
   templateUrl: './conversation-footer.component.html',
   styleUrls: ['./conversation-footer.component.scss']
 })
-export class ConversationFooterComponent implements OnInit, OnChanges {
+export class ConversationFooterComponent implements OnInit, OnChanges, OnDestroy {
 
   @Input() conversationWith: string;
   @Input() attributes: string;
@@ -32,8 +34,9 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
   @Input() userFullname: string;
   @Input() userEmail: string;
   @Input() showAttachmentFooterButton: boolean;
-  @Input() showEmojiFooterButton: boolean
-  @Input() showAudioRecorderFooterButton: boolean
+  @Input() showEmojiFooterButton: boolean;
+  @Input() showAudioRecorderFooterButton: boolean;
+  @Input() showAudioStreamFooterButton: boolean;
   // @Input() showContinueConversationButton: boolean;
   @Input() isConversationArchived: boolean;
   @Input() hideTextAreaContent: boolean;
@@ -53,6 +56,7 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
   @Output() onChangeTextArea = new EventEmitter<any>();
   @Output() onAttachmentFileButtonClicked = new EventEmitter<any>();
   @Output() onNewConversationButtonClicked = new EventEmitter();
+  @Output() onStreamAudioActiveChange = new EventEmitter<boolean>();
   @Output() onCloseChatButtonClicked = new EventEmitter();
 
   @ViewChild('chat21_file') public chat21_file: ElementRef;
@@ -87,6 +91,17 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
 
   showAlertEmoji: boolean = false
 
+  /** Stream audio UI: icona equalizer → X; alert con onde animate sopra il footer */
+  isStreamAudioActive = false;
+  /** Sottoscrizione ai segmenti audio (VAD → WebM) dal {@link VoiceService}. */
+  private voiceAudioSubscription?: Subscription;
+  /** Sottoscrizione al volume audio (real-time) dal {@link VoiceService}. */
+  private voiceVolumeSubscription?: Subscription;
+  currentVolume = 0;
+  wavePath1 = '';
+  wavePath2 = '';
+  wavePath3 = '';
+
   file_size_limit = FILE_SIZE_LIMIT;
   attachmentTooltip: string = '';
   isErrorNetwork: boolean = false;
@@ -96,7 +111,8 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
   private logger: LoggerService = LoggerInstance.getInstance()
   constructor(private chatManager: ChatManager,
               private typingService: TypingService,
-              private uploadService: UploadService) { }
+              private uploadService: UploadService,
+              private voiceService: VoiceService) { }
 
   ngOnInit() {
     // this.updateAttachmentTooltip();
@@ -106,6 +122,8 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
   ngOnChanges(changes: SimpleChanges){
     if(changes['conversationWith'] && changes['conversationWith'].currentValue !== undefined){
       this.conversationHandlerService = this.chatManager.getConversationHandlerByConversationId(this.conversationWith);
+      this.isStreamAudioActive = false;
+      void this.stopVoice();
     }
     if(changes['hideTextReply'] && changes['hideTextReply'].currentValue !== undefined){
       this.restoreTextArea();
@@ -145,6 +163,59 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
   //   }, 500);
   // }
 
+  /**
+   * Microfono + VAD: ogni fine parlato il servizio emette su `audioSegment$` → upload.
+   */
+  async initVoice() {
+    this.voiceAudioSubscription?.unsubscribe();
+    this.voiceVolumeSubscription?.unsubscribe();
+
+    this.voiceAudioSubscription = this.voiceService.audioSegment$.subscribe((rec) => {
+      console.log('[CONV-FOOTER] audioSegment$', rec);
+      this.prepareAndUpload(rec.blob);
+    });
+    this.voiceVolumeSubscription = this.voiceService.volume$.subscribe((volume) => {
+      this.currentVolume = volume;
+      this.updateWave(volume);
+    });
+    await this.voiceService.startSession();
+  }
+
+  async stopVoice() {
+    this.voiceAudioSubscription?.unsubscribe();
+    this.voiceAudioSubscription = undefined;
+
+    this.voiceVolumeSubscription?.unsubscribe();
+    this.voiceVolumeSubscription = undefined;
+
+    await this.voiceService.stopSession();
+  }
+
+  updateWave(volume: number) {
+    const intensity = Math.min(volume / 80, 1); // più sensibile
+  
+    const amp1 = 4 + intensity * 22;
+    const amp2 = 2 + intensity * 16;
+    const amp3 = 1 + intensity * 12;
+  
+    this.wavePath1 = this.buildWave(42, amp1);
+    this.wavePath2 = this.buildWave(50, amp2);
+    this.wavePath3 = this.buildWave(58, amp3);
+  }
+
+  buildWave(y: number, amp: number): string {
+    return `
+      M6 ${y}
+      Q24 ${y - amp} 42 ${y}
+      T78 ${y}
+      T98 ${y}
+    `;
+  }
+
+  ngOnDestroy() {
+    void this.stopVoice();
+  }
+
   // ========= begin:: functions send image ======= //
   // START LOAD IMAGE //
   /** load the selected image locally and open the pop up preview */
@@ -524,7 +595,7 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
     }
   }
 
-  prepareAndUpload(audioBlob: Blob) {
+  prepareAndUpload(audioBlob: Blob, text: string = '') {
 
     this.isFilePendingToUpload = true;
     
@@ -554,7 +625,7 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
     this.logger.log('[UPLOAD] metadata:', metadata);
   
     // stesso metodo che già usi
-    this.uploadSingle(metadata, file, '');
+    this.uploadSingle(metadata, file, text);
   }
 
   // Funzione per convertire Blob in Base64 usando FileReader
@@ -661,6 +732,29 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
     }
   }
 
+  async onStreamPressed(event: Event) {
+    this.logger.log('[CONV-FOOTER] onStreamPressed:event', event);
+    event.preventDefault();
+    if (this.showAlertEmoji) {
+      return;
+    }
+    const turningOn = !this.isStreamAudioActive;
+    if (turningOn) {
+      try {
+        await this.initVoice();
+        this.isStreamAudioActive = true;
+      } catch (e) {
+        this.logger.error('[CONV-FOOTER] onStreamPressed: initVoice failed', e);
+        this.isStreamAudioActive = false;
+      }
+    } else {
+      await this.stopVoice();
+      this.isStreamAudioActive = false;
+    }
+    this.onStreamAudioActiveChange.emit(this.isStreamAudioActive);
+    this.logger.log('[CONV-FOOTER] isStreamAudioActive', this.isStreamAudioActive);
+  }
+
   async onEmojiiPickerClicked(){
     // if(this.loadPickerModule){
     //   this.loadPickerModule = false;

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,6 +1125,11 @@ 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) {
@@ -1873,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);

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;
+}