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

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

@@ -1,4 +1,4 @@
-import { Component, ComponentFactoryResolver, ElementRef, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, ViewChild, ViewContainerRef } from '@angular/core';
+import { Component, ComponentFactoryResolver, ElementRef, EventEmitter, Input, OnChanges, 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,18 +15,13 @@ 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';
-import { VoiceStreamingSessionConfig } from 'src/app/providers/voice/voice-streaming.types';
-import { TtsAudioPlaybackCoordinator } from 'src/app/providers/tts-audio-playback-coordinator.service';
-import { TiledeskAuthService } from 'src/chat21-core/providers/tiledesk/tiledesk-auth.service';
 
 @Component({
   selector: 'chat-conversation-footer',
   templateUrl: './conversation-footer.component.html',
   styleUrls: ['./conversation-footer.component.scss']
 })
-export class ConversationFooterComponent implements OnInit, OnChanges, OnDestroy {
+export class ConversationFooterComponent implements OnInit, OnChanges {
 
   @Input() conversationWith: string;
   @Input() attributes: string;
@@ -37,9 +32,8 @@ export class ConversationFooterComponent implements OnInit, OnChanges, OnDestroy
   @Input() userFullname: string;
   @Input() userEmail: string;
   @Input() showAttachmentFooterButton: boolean;
-  @Input() showEmojiFooterButton: boolean;
-  @Input() showAudioRecorderFooterButton: boolean;
-  @Input() showAudioStreamFooterButton: boolean;
+  @Input() showEmojiFooterButton: boolean
+  @Input() showAudioRecorderFooterButton: boolean
   // @Input() showContinueConversationButton: boolean;
   @Input() isConversationArchived: boolean;
   @Input() hideTextAreaContent: boolean;
@@ -48,7 +42,6 @@ export class ConversationFooterComponent implements OnInit, OnChanges, OnDestroy
   @Input() isEmojiiPickerShow: boolean;
   @Input() footerMessagePlaceholder: string;
   @Input() fileUploadAccept: string;
-  @Input() closeChatInConversation: boolean;
   @Input() dropEvent: Event;
   @Input() poweredBy: string;
   @Input() stylesMap: Map<string, string>
@@ -59,9 +52,6 @@ export class ConversationFooterComponent implements OnInit, OnChanges, OnDestroy
   @Output() onChangeTextArea = new EventEmitter<any>();
   @Output() onAttachmentFileButtonClicked = new EventEmitter<any>();
   @Output() onNewConversationButtonClicked = new EventEmitter();
-  @Output() onStreamAudioActiveChange = new EventEmitter<boolean>();
-  @Output() onStreamAudioConnectingChange = new EventEmitter<boolean>();
-  @Output() onCloseChatButtonClicked = new EventEmitter();
 
   @ViewChild('chat21_file') public chat21_file: ElementRef;
   // @ViewChild('emojii_container', {read: ViewContainerRef}) selector;
@@ -95,67 +85,24 @@ export class ConversationFooterComponent implements OnInit, OnChanges, OnDestroy
 
   showAlertEmoji: boolean = false
 
-  /** Stream audio UI: icona equalizer → X; alert con onde animate sopra il footer */
-  isStreamAudioActive = false;
-  /** True while the WebSocket session is being established (between click and session_started). */
-  isStreamAudioConnecting = false;
-  /** True while the bot's TTS audio is playing — mic segments are suppressed, spectrum turns grey. */
-  isBotSpeaking = false;
-  /** Sottoscrizione ai segmenti audio (VAD → WebM) dal {@link VoiceService}. */
-  private voiceAudioSubscription?: Subscription;
-  /** Sottoscrizione a `transcript` finale dalla WSS. */
-  private voiceTranscriptSubscription?: Subscription;
-  /** Sottoscrizione al volume audio (real-time) dal {@link VoiceService}. */
-  private voiceVolumeSubscription?: Subscription;
-  /** Sottoscrizione allo stato TTS (bot sta parlando). */
-  private botSpeakingSub?: Subscription;
-  /** Passato a {@link StreamAudioSpectrumComponent} per disegnare la linea spettro. */
-  currentVolume = 0;
-  /** Last user utterance transcribed — persists during bot processing to show in voice panel. */
-  lastVoiceTranscript = '';
-
-  get voiceStatusLabel(): string {
-    if (this.isStreamAudioConnecting && !this.isStreamAudioActive) {
-      return this.translationMap?.get('VOICE_CONNECTING') || 'Connecting...';
-    }
-    if (this.isStreamAudioActive && this.isBotSpeaking) {
-      return this.translationMap?.get('VOICE_PROCESSING') || 'Processing...';
-    }
-    return this.translationMap?.get('VOICE_LISTENING') || 'Listening...';
-  }
-
-  get maxAttachmentLabel(): string {
-    const template = this.translationMap?.get('MAX_ATTACHMENT')
-      || `Max allowed size {{FILE_SIZE_LIMIT}}Mb`;
-    return template.replace(/\{\{FILE_SIZE_LIMIT\}\}/g, String(this.file_size_limit));
-  }
-
   file_size_limit = FILE_SIZE_LIMIT;
   attachmentTooltip: string = '';
-  isErrorNetwork: boolean = false;
 
 
   convertColorToRGBA = convertColorToRGBA;
   private logger: LoggerService = LoggerInstance.getInstance()
-  constructor(
-    private chatManager: ChatManager,
-    private typingService: TypingService,
-    private uploadService: UploadService,
-    private voiceService: VoiceService,
-    private ttsPlayback: TtsAudioPlaybackCoordinator,
-    private tiledeskAuthService: TiledeskAuthService,
-    public g: Globals,
-  ) {}
+  constructor(private chatManager: ChatManager,
+              private typingService: TypingService,
+              private uploadService: UploadService) { }
 
   ngOnInit() {
     // this.updateAttachmentTooltip();
   }
 
+
   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();
@@ -195,159 +142,6 @@ export class ConversationFooterComponent implements OnInit, OnChanges, OnDestroy
   //   }, 500);
   // }
 
-  /**
-   * Stream voce: con `voiceIngress` solo WSS (no VAD) — transcript + TTS dal server.
-   * Senza ingresso WSS: VAD + upload per segmento.
-   */
-  async initVoice() {
-    this.voiceAudioSubscription?.unsubscribe();
-    this.voiceVolumeSubscription?.unsubscribe();
-    this.botSpeakingSub?.unsubscribe();
-    this.voiceTranscriptSubscription?.unsubscribe();
-
-    const voiceIngress = this.buildVoiceIngressStreamConfig();
-    this.voiceAudioSubscription = undefined;
-    this.voiceTranscriptSubscription = this.voiceService.voiceTranscript$.subscribe(({ text }) => {
-      // Guard: stop accepting transcript text once the proxy is processing (thinking/speaking)
-      if (text && !this.isBotSpeaking) {
-        this.textInputTextArea = text;
-        this.lastVoiceTranscript = text;
-        // The proxy publishes the user utterance to Chat21 via AMQP on utterance-end;
-        // no sendMessage call is needed here — doing so would produce duplicate messages.
-      }
-    });
-
-    this.voiceVolumeSubscription = this.voiceService.volume$.subscribe((volume) => {
-      this.currentVolume = volume;
-    });
-    this.botSpeakingSub = this.voiceService.isAcquisitionBlocked$.subscribe((blocked) => {
-      this.isBotSpeaking = blocked;
-      if (blocked) {
-        // Proxy has started thinking/speaking — clear the textarea preview
-        this.textInputTextArea = '';
-      }
-    });
-    await this.voiceService.startSession(voiceIngress ? { voiceIngressStream: voiceIngress } : {});
-  }
-
-  private buildVoiceIngressStreamConfig(): VoiceStreamingSessionConfig | null {
-    const token = this.tiledeskAuthService.getTiledeskToken() ?? '';
-    const sender = this.tiledeskAuthService.getCurrentUser()?.uid ?? '';
-    const recipient = this.conversationWith ?? '';
-    if (!token || !sender || !recipient) {
-      this.logger.warn('[CONV-FOOTER] buildVoiceIngressStreamConfig: missing required fields', {
-        hasToken: !!token,
-        hasSender: !!sender,
-        hasRecipient: !!recipient,
-      });
-      return null;
-    }
-    const { recipientFullname, attributes, channelType } = this.buildSendMessageContext();
-    this.logger.log('[CONV-FOOTER] buildVoiceIngressStreamConfig', { sender, recipient, channelType });
-    return {
-      token,
-      sender,
-      recipient,
-      // Use Deepgram multilingual code-switching so the model detects the spoken
-      // language from the audio stream regardless of browser locale.
-      // Source: https://developers.deepgram.com/docs/multilingual-code-switching
-      lang: 'multi',
-      text: '',
-      type: 'text',
-      recipient_fullname: recipientFullname ?? '',
-      sender_fullname: recipientFullname ?? '',
-      attributes: attributes ?? {},
-      metadata: '',
-      channel_type: channelType ?? '',
-    };
-  }
-
-  /**
-   * Merge `attributes` di componente con `additional_attributes` e risolve `recipientFullname` come in sendMessage.
-   */
-  private buildSendMessageContext(additional_attributes?: any) {
-    let recipientFullname = this.translationMap.get('GUEST_LABEL');
-    const g_attributes = this.attributes;
-    const attributes = <any>{};
-    if (g_attributes) {
-      for (const [key, value] of Object.entries(g_attributes)) {
-        attributes[key] = value;
-      }
-    }
-    if (additional_attributes) {
-      for (const [key, value] of Object.entries(additional_attributes)) {
-        attributes[key] = value;
-      }
-    }
-    const senderId = this.senderId;
-    const projectid = this.project.id;
-    const channelType = this.channelType;
-    const userFullname = this.userFullname;
-    const userEmail = this.userEmail;
-    const conversationWith = this.conversationWith;
-
-    if (userFullname) {
-      recipientFullname = userFullname;
-    } else if (userEmail) {
-      recipientFullname = userEmail;
-    } else if (attributes && attributes['userFullname']) {
-      recipientFullname = attributes['userFullname'];
-    } else {
-      recipientFullname = this.translationMap.get('GUEST_LABEL');
-    }
-
-    return {
-      recipientFullname,
-      attributes,
-      senderId,
-      projectid,
-      channelType,
-      conversationWith,
-    };
-  }
-  async stopVoice(options?: { discardInProgressSegment?: boolean }) {
-    // Stop all active TTS audio immediately and reveal all text.
-    this.ttsPlayback.stopAll();
-
-    this.voiceAudioSubscription?.unsubscribe();
-    this.voiceAudioSubscription = undefined;
-
-    this.voiceTranscriptSubscription?.unsubscribe();
-    this.voiceTranscriptSubscription = undefined;
-
-    this.voiceVolumeSubscription?.unsubscribe();
-    this.voiceVolumeSubscription = undefined;
-
-    this.botSpeakingSub?.unsubscribe();
-    this.botSpeakingSub = undefined;
-    this.isBotSpeaking = false;
-
-    await this.voiceService.stopSession(options);
-    this.currentVolume = 0;
-    this.textInputTextArea = '';
-    this.lastVoiceTranscript = '';
-  }
-
-  /**
-   * Messaggio in arrivo da un altro mittente mentre lo stream è attivo: con VAD legacy scarta il segmento in corso.
-   * Con sola sessione WSS non ha effetto sul mic (nessun recorder a segmenti locale).
-   */
-  interruptStreamDueToPeerMessage(): void {
-    if (!this.isStreamAudioActive) {
-      return;
-    }
-    this.logger.log('[CONV-FOOTER] discard recording segment: incoming message from peer (stream stays on)');
-    try {
-      this.voiceService.discardCurrentRecordingSegment();
-    } catch (e) {
-      this.logger.error('[CONV-FOOTER] interruptStreamDueToPeerMessage', e);
-    }
-  }
-
-  ngOnDestroy() {
-    void this.stopVoice();
-  }
-
   // ========= begin:: functions send image ======= //
   // START LOAD IMAGE //
   /** load the selected image locally and open the pop up preview */
@@ -585,14 +379,40 @@ export class ConversationFooterComponent implements OnInit, OnChanges, OnDestroy
       // msg = replaceEndOfLine(msg);
       // msg = msg.trim();
 
-      const {
-        recipientFullname,
-        attributes,
-        senderId,
-        projectid,
-        channelType,
-        conversationWith,
-      } = this.buildSendMessageContext(additional_attributes);
+      let recipientFullname = this.translationMap.get('GUEST_LABEL');
+        // sponziello: adds ADDITIONAL ATTRIBUTES TO THE MESSAGE
+      const g_attributes = this.attributes;
+      // added <any> to resolve the Error occurred during the npm installation: Property 'userFullname' does not exist on type '{}'
+      const attributes = <any>{};
+      if (g_attributes) {
+        for (const [key, value] of Object.entries(g_attributes)) {
+          attributes[key] = value;
+        }
+      }
+      if (additional_attributes) {
+        for (const [key, value] of Object.entries(additional_attributes)) {
+          attributes[key] = value;
+        }
+      }
+        // fine-sponziello
+      // this.conversationHandlerService = this.chatManager.getConversationHandlerByConversationId(this.conversationWith)
+      const senderId = this.senderId;
+      const projectid = this.project.id;
+      const channelType = this.channelType;
+      const userFullname = this.userFullname;
+      const userEmail = this.userEmail;
+      const conversationWith = this.conversationWith;
+        
+
+      if (userFullname) {
+        recipientFullname = userFullname;
+      } else if (userEmail) {
+        recipientFullname = userEmail;
+      } else if (attributes && attributes['userFullname']) {
+        recipientFullname = attributes['userFullname'];
+      } else {
+        recipientFullname = this.translationMap.get('GUEST_LABEL');
+      }
 
       this.onBeforeMessageSent.emit({
         senderFullname: recipientFullname,
@@ -701,7 +521,7 @@ export class ConversationFooterComponent implements OnInit, OnChanges, OnDestroy
     }
   }
 
-  prepareAndUpload(audioBlob: Blob, text: string = '') {
+  prepareAndUpload(audioBlob: Blob) {
 
     this.isFilePendingToUpload = true;
     
@@ -731,7 +551,7 @@ export class ConversationFooterComponent implements OnInit, OnChanges, OnDestroy
     this.logger.log('[UPLOAD] metadata:', metadata);
   
     // stesso metodo che già usi
-    this.uploadSingle(metadata, file, text);
+    this.uploadSingle(metadata, file, '');
   }
 
   // Funzione per convertire Blob in Base64 usando FileReader
@@ -838,39 +658,6 @@ export class ConversationFooterComponent implements OnInit, OnChanges, OnDestroy
     }
   }
 
-  async onStreamPressed(event: Event) {
-    this.logger.log('[CONV-FOOTER] onStreamPressed:event', event);
-    event.preventDefault();
-    if (this.showAlertEmoji) {
-      return;
-    }
-    // Treat a click during connecting as a cancel request (same as turning off).
-    const turningOn = !this.isStreamAudioActive && !this.isStreamAudioConnecting;
-    this.logger.log('[CONV-FOOTER] onStreamPressed', { turningOn });
-    if (turningOn) {
-      this.isStreamAudioConnecting = true;
-      this.onStreamAudioConnectingChange.emit(true);
-      try {
-        this.currentVolume = 0;
-        await this.initVoice();
-        this.isStreamAudioActive = true;
-      } catch (e) {
-        this.logger.error('[CONV-FOOTER] onStreamPressed: initVoice failed', e);
-        this.isStreamAudioActive = false;
-      } finally {
-        this.isStreamAudioConnecting = false;
-        this.onStreamAudioConnectingChange.emit(false);
-      }
-    } else {
-      await this.stopVoice();
-      this.isStreamAudioActive = false;
-      this.isStreamAudioConnecting = false;
-      this.onStreamAudioConnectingChange.emit(false);
-    }
-    this.onStreamAudioActiveChange.emit(this.isStreamAudioActive);
-    this.logger.log('[CONV-FOOTER] isStreamAudioActive', this.isStreamAudioActive);
-  }
-
   async onEmojiiPickerClicked(){
     // if(this.loadPickerModule){
     //   this.loadPickerModule = false;
@@ -922,10 +709,6 @@ export class ConversationFooterComponent implements OnInit, OnChanges, OnDestroy
     this.onNewConversationButtonClicked.emit();
   }
 
-  onCloseChat(event){
-    this.onCloseChatButtonClicked.emit();
-  }
-
   // onContinueConversation(){
   //   this.hideTextAreaContent = false;
   //   this.onBackButton.emit(false)
@@ -962,46 +745,48 @@ export class ConversationFooterComponent implements OnInit, OnChanges, OnDestroy
   }
 
   /**
-   * Single keyboard handler for the message textarea.
-   *
-   * - Enter (no modifier)               -> send message
-   * - Shift / Alt / Ctrl / Meta + Enter -> insert a newline (default browser behavior)
-   * - Tab                               -> prevented, to keep focus inside the chat
-   *
-   * Modifier check is intentionally on `keydown` because `keypress` is deprecated
-   * and does not consistently fire for modifier combos across browsers.
+   * when I press a key I call this method which:
+   * check if 'enter' has been pressed
+   * if you clear text
+   * set field height as min by default
+   * takes out the focus and resets it after a few moments
+   * (this is a patch to keep the focus and eliminate the br of the send !!!)
+   * send message
    * @param event
    */
-  onkeydown(event: KeyboardEvent) {
+  onkeypress(event) {
     const keyCode = event.which || event.keyCode;
-
-    if (keyCode === 13) { // ENTER
-      const hasModifier = event.metaKey || event.shiftKey || event.altKey || event.ctrlKey;
-      if (hasModifier) {
-        // Let the textarea insert a newline on its own (do not preventDefault).
-        return;
-      }
-
-      // Plain Enter -> send the message
-      event.preventDefault();
-
-      if (this.showAlertEmoji) {
-        return;
-      }
-
-      const target = document.getElementById('chat21-main-message-context') as HTMLInputElement;
-      if (target) {
-        this.textInputTextArea = target.value;
+    this.textInputTextArea = ((document.getElementById('chat21-main-message-context') as HTMLInputElement).value);
+    if (keyCode === 13) { // ENTER pressed
+      if(this.showAlertEmoji){
+        return; 
       }
-
       if (this.textInputTextArea && this.textInputTextArea.trim() !== '') {
+        //   that.logger.log('[CONV-FOOTER] sendMessage -> ', this.textInputTextArea);
+        // this.resizeInputField();
+        // this.messagingService.sendMessage(msg, TYPE_MSG_TEXT);
+        // this.setDepartment();
+        // this.textInputTextArea = replaceBr(this.textInputTextArea);
         this.sendMessage(this.textInputTextArea, TYPE_MSG_TEXT);
+        // this.restoreTextArea();
       }
-      return;
+    } else if (keyCode === 9) { // TAB pressed
+      event.preventDefault();
     }
+  }
 
-    if (keyCode === 9) { // TAB
+  
+  /**
+  * HANDLE: cmd+enter, shiftKey+enter, alt+enter, ctrl+enter
+  * @param event 
+  */
+  onkeydown(event){
+    const keyCode = event.which || event.keyCode;
+    // metaKey -> COMMAND ,  shiftKey -> SHIFT, altKey -> ALT, ctrlKey -> CONTROL
+    if( (event.metaKey || event.shiftKey || event.altKey || event.ctrlKey) && keyCode===13){  
       event.preventDefault();
+      this.textInputTextArea += '\r\n';
+      this.resizeInputField();
     }
   }