@chat21/chat21-web-widget 5.1.32-rc9 → 5.1.33-rc8

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

@@ -32,4 +32,57 @@
     chat-audio {
         display: flex;
     }
-}
+}
+.streaming-text {
+    padding: 0;
+    margin: 0;
+    line-height: 1.5;
+
+    .stream-word {
+        display: inline;
+        opacity: 0;
+        animation: stream-word-in 200ms ease-out forwards;
+    }
+}
+
+@keyframes stream-word-in {
+    from {
+        opacity: 0;
+        transform: translateY(3px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+// -- WSS TTS Karaoke ----------------------------------------------------------
+.wss-karaoke {
+    // Match chat-text (ShadowDom) visual layout so there's no jump when voice opens.
+    // font-size must be set explicitly: the parent has font-size:10px but chat-text
+    // overrides it via :host { font-size: var(--font-size-bubble-message, 14px) }.
+    display: block;
+    margin: 0;
+    padding: 12px 16px;
+    font-size: var(--font-size-bubble-message, 14px);
+    line-height: 1.4em;
+    font-weight: 300;
+    overflow: hidden;
+}
+
+.wss-word {
+    display: inline;
+    transition: opacity 120ms ease;
+
+    &.future {
+        opacity: 0.35;
+    }
+
+    &.active {
+        opacity: 1;
+    }
+
+    &.past {
+        opacity: 1;
+    }
+}

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

@@ -1,26 +1,62 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
+import { of } from 'rxjs';
+import { MAX_WIDTH_IMAGES, MIN_WIDTH_IMAGES } from 'src/chat21-core/utils/constants';
+import { VoiceService } from 'src/app/providers/voice/voice.service';
+import { JsonSourcesParserService } from 'src/app/providers/json-sources-parser.service';
 
 import { BubbleMessageComponent } from './bubble-message.component';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
 
 describe('BubbleMessageComponent', () => {
   let component: BubbleMessageComponent;
   let fixture: ComponentFixture<BubbleMessageComponent>;
 
-  beforeEach(async(() => {
+  const voiceServiceMock = {
+    isWssVoiceActive: false,
+    markProxyHandled: jasmine.createSpy('markProxyHandled'),
+    voiceTtsKaraoke$: of({ text: '', words: [], activeIndex: -1 }),
+  };
+
+  const jsonSourcesParserMock = {
+    parseBaseFromMessage: jasmine.createSpy('parseBaseFromMessage').and.returnValue(null),
+    enrichSources: jasmine.createSpy('enrichSources').and.resolveTo(null),
+  };
+
+  const textMessage: any = {
+    attributes: { projectId: 'p1' },
+    channel_type: 'group',
+    recipient: 'support-group-x',
+    recipient_fullname: 'Guest ',
+    sender: 'bot_1',
+    sender_fullname: 'BOT2',
+    status: 150,
+    text: 'Hello',
+    timestamp: 1629273999970,
+    type: 'text',
+    uid: 'm1',
+    isSender: false,
+  };
+
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ BubbleMessageComponent ],
+      declarations: [BubbleMessageComponent],
       schemas: [NO_ERRORS_SCHEMA],
-      imports: [
+      providers: [
+        { provide: VoiceService, useValue: voiceServiceMock },
+        { provide: JsonSourcesParserService, useValue: jsonSourcesParserMock },
       ],
-    })
-    .compileComponents();
+    }).compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(BubbleMessageComponent);
     component = fixture.componentInstance;
+    component.stylesMap = new Map([
+      ['buttonFontSize', '14px'],
+      ['themeColor', '#000'],
+      ['foregroundColor', '#fff'],
+    ]);
     fixture.detectChanges();
   });
 
@@ -28,54 +64,115 @@ describe('BubbleMessageComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  it('should have a "chat-text" child element', () => {
-    const messages: any = {
-          attributes: {
-              projectId: "6013ec749b32000045be650e",
-              tiledesk_message_id: "611cbf8ffb379b00346660e7"
-          },
-          channel_type: "group",
-          recipient: "support-group-6013ec749b32000045be650e-4904aee91f8b487aad117bcda860549d",
-          recipient_fullname: "Guest ",
-          sender: "bot_602256f6c001b800342cb76f",
-          sender_fullname: "BOT2",
-          status: 150,
-          text: "Hello 👋. I'm a bot 🤖.\n\nChoose one of the options below or write a message to reach our staff.",
-          timestamp: 1629273999970,
-          type: "text",
-          uid: "-MhNI3eaIoLTOLoX3TAu",
-          isSender: false
-    }
-    component.message = messages
-    // component.textColor = 'black'
-    fixture.detectChanges()
-    const textChild = fixture.debugElement.query(By.css('chat-text'))
-    textChild.properties.text
-    expect(textChild).toBeTruthy();
-  })
-
-  it('should have a text inside "chat-text" child element', () => {
-    const messages: any = {
-          attributes: {
-              projectId: "6013ec749b32000045be650e",
-              tiledesk_message_id: "611cbf8ffb379b00346660e7"
-          },
-          channel_type: "group",
-          recipient: "support-group-6013ec749b32000045be650e-4904aee91f8b487aad117bcda860549d",
-          recipient_fullname: "Guest ",
-          sender: "bot_602256f6c001b800342cb76f",
-          sender_fullname: "BOT2",
-          status: 150,
-          text: "Hello 👋. I'm a bot 🤖.\n\nChoose one of the options below or write a message to reach our staff.",
-          timestamp: 1629273999970,
-          type: "text",
-          uid: "-MhNI3eaIoLTOLoX3TAu",
-          isSender: false
-    }
-    component.message = messages
-    // component.textColor = 'black'
-    fixture.detectChanges()
-    const textChild = fixture.debugElement.query(By.css('chat-text'))
-    expect(textChild.properties.text).toEqual(messages.text)
-  })
+  it('should have a chat-text child for plain text messages', () => {
+    component.message = textMessage;
+    fixture.detectChanges();
+    expect(fixture.debugElement.query(By.css('chat-text'))).toBeTruthy();
+  });
+
+  it('should bind chat-text inputs from message', () => {
+    component.message = textMessage;
+    fixture.detectChanges();
+    const textChild = fixture.debugElement.query(By.css('chat-text'));
+    expect(textChild.properties.text).toEqual(textMessage.text);
+  });
+
+  describe('ngOnChanges', () => {
+    it('should compute sizeImage from message metadata object', () => {
+      component.message = {
+        ...textMessage,
+        metadata: { width: 100, height: 50 },
+      };
+      component.ngOnChanges();
+      expect(component.sizeImage.width).toBe(100);
+    });
+
+    it('should cap width when metadata exceeds MAX_WIDTH_IMAGES (calcImageSize)', () => {
+      component.message = {
+        ...textMessage,
+        metadata: { width: MAX_WIDTH_IMAGES * 2, height: 100 },
+      };
+      component.ngOnChanges();
+      expect(component.sizeImage.width).toBe(MAX_WIDTH_IMAGES);
+    });
+
+    it('should scale up narrow thumbnails when width <= 55 (calcImageSize)', () => {
+      component.message = {
+        ...textMessage,
+        metadata: { width: 40, height: 80 },
+      };
+      component.ngOnChanges();
+      expect(component.sizeImage.width).toBe(MIN_WIDTH_IMAGES);
+      expect(component.sizeImage.height).toBe(MIN_WIDTH_IMAGES / (40 / 80));
+    });
+
+    it('should keep metadata dimensions for mid-sized images', () => {
+      component.message = {
+        ...textMessage,
+        metadata: { width: 120, height: 60 },
+      };
+      component.ngOnChanges();
+      expect(component.sizeImage.width).toBe(120);
+      expect(component.sizeImage.height).toBe(60);
+    });
+
+    it('should leave width undefined when metadata has no width (calcImageSize)', () => {
+      component.message = {
+        ...textMessage,
+        metadata: { width: undefined, height: 10 },
+      };
+      component.ngOnChanges();
+      expect(component.sizeImage.width).toBeUndefined();
+      expect(component.sizeImage.height).toBe(10);
+    });
+
+    it('should ignore non-object metadata', () => {
+      component.message = { ...textMessage, metadata: 'x' as any };
+      component.ngOnChanges();
+      expect(component.sizeImage).toEqual({ width: 0, height: 0 });
+    });
+
+    it('should derive fullnameColor from fontColor', () => {
+      component.message = textMessage;
+      component.fontColor = '#ff0000';
+      component.ngOnChanges();
+      expect(component.fullnameColor).toBeTruthy();
+    });
+
+    it('should prefer sender fullname color when name present', () => {
+      component.message = { ...textMessage, sender_fullname: 'Anna' };
+      component.fontColor = '#00ff00';
+      component.ngOnChanges();
+      expect(component.fullnameColor).toBeTruthy();
+    });
+  });
+
+  describe('emitters', () => {
+    beforeEach(() => {
+      component.message = textMessage;
+    });
+
+    it('onBeforeMessageRenderFN should emit with sanitizer and message', () => {
+      spyOn(component.onBeforeMessageRender, 'emit');
+      const ev = { messageEl: {}, component: {} };
+      component.onBeforeMessageRenderFN(ev);
+      expect(component.onBeforeMessageRender.emit).toHaveBeenCalled();
+      const arg = (component.onBeforeMessageRender.emit as jasmine.Spy).calls.mostRecent().args[0];
+      expect(arg.message).toBe(component.message);
+      expect(arg.sanitizer).toBe(component.sanitizer);
+    });
+
+    it('onAfterMessageRenderFN should emit', () => {
+      spyOn(component.onAfterMessageRender, 'emit');
+      const ev = { messageEl: {}, component: {} };
+      component.onAfterMessageRenderFN(ev);
+      expect(component.onAfterMessageRender.emit).toHaveBeenCalled();
+    });
+
+    it('onElementRenderedFN should forward element and status', () => {
+      spyOn(component.onElementRendered, 'emit');
+      component.onElementRenderedFN({ element: 'image', status: true });
+      expect(component.onElementRendered.emit).toHaveBeenCalledWith({ element: 'image', status: true });
+    });
+  });
 });

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

@@ -1,149 +1,177 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, HostBinding, Input, OnDestroy, OnInit, Output } from '@angular/core';
+import { Observable, Subscription } from 'rxjs';
+import { map, startWith } from 'rxjs/operators';
 import { DomSanitizer } from '@angular/platform-browser';
 import { MessageModel } from 'src/chat21-core/models/message';
-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 { MESSAGE_TYPE_MINE, MESSAGE_TYPE_OTHERS, TYPE_MSG_URL_PREVIEW } from 'src/chat21-core/utils/constants';
 import { convertColorToRGBA } from 'src/chat21-core/utils/utils';
-import { isAudio, isAudioTTS, isFile, isFrame, isImage, messageType } from 'src/chat21-core/utils/utils-message';
+import { JsonSourcesParserService } from 'src/app/providers/json-sources-parser.service';
+import { calcImageSize, isAudio, isAudioTTS, isFile, isFrame, isImage, isJsonSources, messageType } from 'src/chat21-core/utils/utils-message';
 import { getColorBck } from 'src/chat21-core/utils/utils-user';
+import { VoiceService } from 'src/app/providers/voice/voice.service';
+import { JsonSourceItem } from '../json-sources/json-sources.component';
+import { VoiceTtsKaraokeWord } from 'src/app/providers/voice/voice-streaming.types';
 
 @Component({
   selector: 'chat-bubble-message',
   templateUrl: './bubble-message.component.html',
   styleUrls: ['./bubble-message.component.scss']
 })
-export class BubbleMessageComponent implements OnInit {
+export class BubbleMessageComponent implements OnInit, OnDestroy {
 
   @Input() message: MessageModel;
   @Input() isSameSender: boolean;
   @Input() fontColor: string;
   @Input() stylesMap: Map<string, string>;
+  @Input() translationMap: Map<string, string>;
+  /** When true, a newly-arrived bot text message reveals its words one by one. */
+  @Input() streamOnArrival = false;
+  /** One-shot flag: set once in ngOnChanges, never reverts so animation isn't replayed. */
+  _isStreaming = false;
+  /** Precomputed word list; rebuilt only when the message text changes. */
+  _streamingWords: Array<{ word: string; index: number }> = [];
+  /** Live karaoke word states driven by voiceTtsKaraoke$ during an active WSS session. */
+  _wssKaraokeWords$?: Observable<VoiceTtsKaraokeWord[]>;
+
+  private _kSub?: Subscription;
   @Output() onBeforeMessageRender = new EventEmitter();
   @Output() onAfterMessageRender = new EventEmitter();
-  @Output() onElementRendered = new EventEmitter<{element: string, status: boolean}>();
-  isImage = isImage;
-  isFile = isFile;
-  isFrame = isFrame;
-  isAudio = isAudio;
-  isAudioTTS=isAudioTTS;
-  convertColorToRGBA = convertColorToRGBA
-
- // ========== begin:: check message type functions ======= //
-  messageType = messageType;
-
-  MESSAGE_TYPE_MINE = MESSAGE_TYPE_MINE;
-  MESSAGE_TYPE_OTHERS = MESSAGE_TYPE_OTHERS;
- // ========== end:: check message type functions ======= //
-  sizeImage : { width: number, height: number}
-  fullnameColor: string;
-  private logger: LoggerService = LoggerInstance.getInstance()
-  constructor(public sanitizer: DomSanitizer) { }
+  @Output() onElementRendered = new EventEmitter<{ element: string; status: boolean }>();
+
+  @HostBinding('class.no-background') get hostNoBackground() { return this.jsonSources !== null && this.jsonSources.length > 0; }
+  @HostBinding('class.json-resources') get hostIsJsonResources() { return this.jsonSources !== null && this.jsonSources.length > 0; }
+
+  readonly isImage = isImage;
+  readonly isFile = isFile;
+  readonly isFrame = isFrame;
+  readonly isAudio = isAudio;
+  readonly isJsonSources = isJsonSources;
+  readonly isAudioTTS = isAudioTTS;
+  readonly messageType = messageType;
+  readonly convertColorToRGBA = convertColorToRGBA;
+  readonly MESSAGE_TYPE_MINE = MESSAGE_TYPE_MINE;
+  readonly MESSAGE_TYPE_OTHERS = MESSAGE_TYPE_OTHERS;
+
+  sizeImage: { width: number; height: number } = { width: 0, height: 0 };
+  fullnameColor: string = '';
+  jsonSources: JsonSourceItem[] | null = null;
+
+  private urlPreviewReqId = 0;
+
+  constructor(
+    public sanitizer: DomSanitizer, 
+    public voiceService: VoiceService, 
+    private jsonSourcesParser: JsonSourcesParserService
+  ) { }
 
   ngOnInit() {
-    // console.log("---- > MSG:", this.message);
-  }
-
-  ngOnChanges() {
-    if (this.message && this.message.metadata && typeof this.message.metadata === 'object' ) {
-      this.sizeImage = this.getMetadataSize(this.message.metadata)
+    // If this TTS message arrived while the voice proxy was active, mark it so
+    // audio-sync never replays it after the session ends.
+    if (isAudioTTS(this.message) && this.voiceService.isWssVoiceActive && this.message?.uid) {
+      this.voiceService.markProxyHandled(this.message.uid);
     }
 
-    if(this.fontColor){
-      this.fullnameColor = convertColorToRGBA(this.fontColor, 65)
-    }
-    if(this.message && this.message.sender_fullname && this.message.sender_fullname.trim() !== ''){
-      this.fullnameColor = getColorBck(this.message.sender_fullname)
+    // Set up karaoke observable for TTS messages during WSS sessions.
+    if (isAudioTTS(this.message) && this.message?.text) {
+      const text = this.message.text;
+      const rawWords = text.trim().split(/\s+/).filter((w) => w.length > 0);
+      // Always start as 'past' (fully visible). The karaoke RAF loop will drive
+      // words through future→active→past for the current speaking turn; using
+      // 'future' here would dimm old/history messages the moment voice opens.
+      const initialWords: VoiceTtsKaraokeWord[] = rawWords.map((w) => ({ text: w, state: 'past' as const }));
+
+      this._wssKaraokeWords$ = this.voiceService.voiceTtsKaraoke$.pipe(
+        startWith({ text, words: initialWords, activeIndex: -1 }),
+        map((frame) =>
+          frame.text === text
+            ? (frame.words as VoiceTtsKaraokeWord[])
+            : initialWords,
+        ),
+      );
     }
+  }
 
+  ngOnDestroy(): void {
+    this._kSub?.unsubscribe();
+    this._kSub = undefined;
   }
 
-  /**
-   *
-   * @param message
-   */
-  // getMetadataSize(metadata): any {
-  //   if(metadata.width === undefined){
-  //     metadata.width= MAX_WIDTH_IMAGES
-  //   }
-  //   if(metadata.height === undefined){
-  //     metadata.height = MAX_WIDTH_IMAGES
-  //   }
-  //   // const MAX_WIDTH_IMAGES = 300;
-  //   const sizeImage = {
-  //       width: metadata.width,
-  //       height: metadata.height
-  //   };
-  //   //   that.g.wdLog(['message::: ', metadata);
-  //   if (metadata.width && metadata.width > MAX_WIDTH_IMAGES) {
-  //       const rapporto = (metadata['width'] / metadata['height']);
-  //       sizeImage.width = MAX_WIDTH_IMAGES;
-  //       sizeImage.height = MAX_WIDTH_IMAGES / rapporto;
-  //   }
-  //   return sizeImage; // h.toString();
-  // }
-
-  /**
-   *
-   * @param message
-   */
-  getMetadataSize(metadata): {width, height} {
-    // if (metadata.width === undefined) {
-    //   metadata.width = MAX_WIDTH_IMAGES
-    // }
-    // if (metadata.height === undefined) {
-    //   metadata.height = MAX_WIDTH_IMAGES
-    // }
-
-    const sizeImage = {
-      width: metadata.width,
-      height: metadata.height
-    };
-
-
-    if (metadata.width && metadata.width < MAX_WIDTH_IMAGES) {
-      if (metadata.width <= 55) {
-        const ratio = (metadata['width'] / metadata['height']);
-        sizeImage.width = MIN_WIDTH_IMAGES;
-        sizeImage.height = MIN_WIDTH_IMAGES / ratio;
-      } else if (metadata.width > 55) {
-        sizeImage.width = metadata.width;
-        sizeImage.height = metadata.height
-      }
-    } else if (metadata.width && metadata.width > MAX_WIDTH_IMAGES) {
-      const ratio = (metadata['width'] / metadata['height']);
-      sizeImage.width = MAX_WIDTH_IMAGES;
-      sizeImage.height = MAX_WIDTH_IMAGES / ratio;
+  ngOnChanges(): void {
+    if (this.message?.metadata && typeof this.message.metadata === 'object') {
+      this.sizeImage = calcImageSize(this.message.metadata);
+    }
+
+    this.fullnameColor = this.fontColor
+      ? convertColorToRGBA(this.fontColor, 65)
+      : this.fullnameColor;
+
+    if (this.message?.sender_fullname?.trim()) {
+      this.fullnameColor = getColorBck(this.message.sender_fullname);
     }
-    return sizeImage
-  }
 
-  // ========= begin:: event emitter function ============//
+    // One-shot: activate word streaming for newly-arrived bot text messages during a voice session.
+    // Reset isJustRecived so the animation never replays on subsequent change detection cycles.
+    if (
+      !this._isStreaming &&
+      this.streamOnArrival &&
+      this.message?.isJustRecived === true &&
+      this.messageType(this.MESSAGE_TYPE_OTHERS, this.message) &&
+      !this.isAudio(this.message) &&
+      !this.isAudioTTS(this.message) &&
+      this.message?.type !== 'html'
+    ) {
+      this._isStreaming = true;
+      this._streamingWords = (this.message.text ?? '')
+        .trim()
+        .split(/\s+/)
+        .filter(w => w.length > 0)
+        .map((word, index) => ({ word, index }));
+      this.message.isJustRecived = false;
+    }
 
-  // returnOpenAttachment(event: String) {
-  //   this.onOpenAttachment.emit(event)
-  // }
+    if (this.message?.type !== TYPE_MSG_URL_PREVIEW) {
+      this.jsonSources = null;
+      return;
+    }
 
-  // /** */
-  // returnClickOnAttachmentButton(event: any) {
-  //   this.onClickAttachmentButton.emit(event)
-  // }
+    // url_preview payload can live on message root OR inside metadata/attributes depending on the integration.
+    const urlPreviewLike =
+      this.message?.type === TYPE_MSG_URL_PREVIEW
+      || this.message?.metadata?.type === TYPE_MSG_URL_PREVIEW
+      || this.message?.attributes?.type === TYPE_MSG_URL_PREVIEW;
+    if (urlPreviewLike) this.loadJsonSourcesFromUrlPreviewMessage();
+  }
 
-  onBeforeMessageRenderFN(event){
-    const messageOBJ = { message: this.message, sanitizer: this.sanitizer, messageEl: event.messageEl, component: event.component}
-    this.onBeforeMessageRender.emit(messageOBJ)
+  private async loadJsonSourcesFromUrlPreviewMessage(): Promise<void> {
+    // Protect the UI from out-of-order async responses when the input `message` changes quickly.
+    const reqId = ++this.urlPreviewReqId;
+    // 1) Parse-only, so the UI can render immediately (no url-preview calls).
+    const baseSources = this.jsonSourcesParser.parseBaseFromMessage(this.message);
+    this.jsonSources = baseSources;
+
+    // 2) Enrich in background via url-preview, then merge missing fields.
+    const enriched = await this.jsonSourcesParser.enrichSources(baseSources);
+    if (reqId !== this.urlPreviewReqId) return;
+    this.jsonSources = enriched;
   }
 
-  onAfterMessageRenderFN(event){
-    const messageOBJ = { message: this.message, sanitizer: this.sanitizer, messageEl: event.messageEl, component: event.component}
-    this.onAfterMessageRender.emit(messageOBJ)
+  trackWord(_index: number, item: { word: string; index: number }): number {
+    return item.index;
   }
 
-  onElementRenderedFN(event){
-    this.onElementRendered.emit({element: event.element, status: event.status})
+  trackKaraokeWord(index: number): number {
+    return index;
   }
 
-  // ========= END:: event emitter function ============//
+  onBeforeMessageRenderFN(event: any): void {
+    this.onBeforeMessageRender.emit({ message: this.message, sanitizer: this.sanitizer, messageEl: event.messageEl, component: event.component });
+  }
 
+  onAfterMessageRenderFN(event: any): void {
+    this.onAfterMessageRender.emit({ message: this.message, sanitizer: this.sanitizer, messageEl: event.messageEl, component: event.component });
+  }
 
+  onElementRenderedFN(event: any): void {
+    this.onElementRendered.emit({ element: event.element, status: event.status });
+  }
 }

package/src/app/component/message/buttons/action-button/action-button.component.html

@@ -1,8 +1,7 @@
-<div #actionButton id="actionButton" class="button-in-msg action" 
+<div #actionButton class="button-in-msg action action-button"
   [ngClass]="{'disabled': isConversationArchived}"
-  (click)="actionButtonAction()" 
-  (mouseover)="onMouseOver($event)" 
+  (click)="actionButtonAction()"
+  (mouseover)="onMouseOver($event)"
   (mouseout)="onMouseOut($event)">
     {{button?.value}}
 </div>
-<!-- title="{{button?.value}}" -->