@chat21/chat21-web-widget 5.1.34 → 5.2.1

package/src/app/component/message/avatar/avatar.component.html

@@ -1,9 +1,9 @@
 <div class="c21-icon-avatar">
   <div class="c21-avatar-image profile_image">
       <!-- is a BOT -->
-      <img *ngIf="senderID?.indexOf('bot_') !== -1 || senderFullname.toLowerCase().includes('bot')" [src]="url" (error)="onBotImgError($event)" (load)="onLoadedBot($event)"/>
+      <img *ngIf="senderID?.indexOf('bot_') !== -1 || senderFullname.toLowerCase().includes('bot')" [src]="url" [attr.alt]="senderFullname || 'Bot'" role="img" (error)="onBotImgError($event)" (load)="onLoadedBot($event)"/>
       <!-- is a HUMAN -->
-      <img *ngIf="senderID?.indexOf('bot_') === -1 && !senderFullname.toLowerCase().includes('bot')" [src]="url" (error)="onHumanImgError($event)" (load)="onLoadedHuman($event)"/>
+      <img *ngIf="senderID?.indexOf('bot_') === -1 && !senderFullname.toLowerCase().includes('bot')" [src]="url" [attr.alt]="senderFullname || 'User'" role="img" (error)="onHumanImgError($event)" (load)="onLoadedHuman($event)"/>
   </div> 
 </div>
 

package/src/app/component/message/avatar/avatar.component.spec.ts

@@ -1,27 +1,119 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { Injectable } from '@angular/core';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { ImageRepoService } from '../../../../chat21-core/providers/abstract/image-repo.service';
 
 import { AvatarComponent } from './avatar.component';
 
+@Injectable()
+class ImageRepoStub extends ImageRepoService {
+  getImagePhotoUrl(uid: string): string {
+    return `https://cdn.test/photo/${uid}`;
+  }
+  checkImageExists(_uid: string, _cb: (exist: boolean) => void): void {}
+}
+
 describe('AvatarComponent', () => {
   let component: AvatarComponent;
   let fixture: ComponentFixture<AvatarComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ AvatarComponent ],
-      providers: [ ImageRepoService ]
-    })
-    .compileComponents();
+      declarations: [AvatarComponent],
+      providers: [{ provide: ImageRepoService, useClass: ImageRepoStub }],
+    }).compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(AvatarComponent);
     component = fixture.componentInstance;
-    fixture.detectChanges();
+    component.baseLocation = 'https://app.test';
   });
 
   it('should create', () => {
+    component.senderID = 'user_1';
+    component.senderFullname = 'Alice';
+    fixture.detectChanges();
     expect(component).toBeTruthy();
   });
+
+  it('ngOnInit should prefer remote photo when checkImageExists returns true', () => {
+    const remote = 'https://cdn.test/photo/bot_1';
+    spyOn(AvatarComponent.prototype as any, 'checkImageExists').and.callFake((_url: string, cb: (b: boolean) => void) => {
+      cb(true);
+    });
+    component.senderID = 'bot_1';
+    component.senderFullname = 'Support Bot';
+    component.ngOnInit();
+    expect(component.url).toBe(remote);
+  });
+
+  it('ngOnInit should keep default bot asset when remote image missing', () => {
+    spyOn(AvatarComponent.prototype as any, 'checkImageExists').and.callFake((_url: string, cb: (b: boolean) => void) => {
+      cb(false);
+    });
+    component.senderID = 'bot_1';
+    component.senderFullname = 'Bot';
+    component.ngOnInit();
+    expect(component.url).toBe(component.baseLocation + '/assets/images/tommy_bot_tiledesk.svg');
+  });
+
+  it('ngOnInit should use human default when not bot and photo missing', () => {
+    spyOn(AvatarComponent.prototype as any, 'checkImageExists').and.callFake((_url: string, cb: (b: boolean) => void) => {
+      cb(false);
+    });
+    component.senderID = 'user_99';
+    component.senderFullname = 'Bob';
+    component.ngOnInit();
+    expect(component.url).toBe(component.baseLocation + '/assets/images/chat_human_avatar.svg');
+  });
+
+  it('checkImageExists should invoke callback on image load', (done) => {
+    const imgCtor = window.Image;
+    (window as any).Image = function MockImage(this: any) {
+      setTimeout(() => this.onload && this.onload(), 0);
+      return this;
+    } as any;
+    component.checkImageExists('https://x', (ok) => {
+      (window as any).Image = imgCtor;
+      expect(ok).toBe(true);
+      done();
+    });
+  });
+
+  it('checkImageExists should invoke callback false on error', (done) => {
+    const imgCtor = window.Image;
+    (window as any).Image = function MockImage(this: any) {
+      setTimeout(() => this.onerror && this.onerror(), 0);
+      return this;
+    } as any;
+    component.checkImageExists('https://bad', (ok) => {
+      (window as any).Image = imgCtor;
+      expect(ok).toBe(false);
+      done();
+    });
+  });
+
+  it('onBotImgError should swap to local bot svg', () => {
+    const target = { src: 'bad' } as any;
+    component.baseLocation = 'https://host';
+    component.onBotImgError({ target });
+    expect(target.src).toContain('tommy_bot_tiledesk.svg');
+  });
+
+  it('onHumanImgError should swap to local human svg', () => {
+    const target = { src: 'bad' } as any;
+    component.baseLocation = 'https://host';
+    component.onHumanImgError({ target });
+    expect(target.src).toContain('chat_human_avatar.svg');
+  });
+
+  it('template should expose accessible name on avatar image (bot)', () => {
+    spyOn(AvatarComponent.prototype as any, 'checkImageExists').and.stub();
+    component.senderID = 'bot_x';
+    component.senderFullname = 'Helper Bot';
+    fixture.detectChanges();
+    const img = (fixture.nativeElement as HTMLElement).querySelector('img');
+    expect(img?.getAttribute('alt')).toBeTruthy();
+    expect(img?.getAttribute('role')).toBe('img');
+  });
 });

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

@@ -1,26 +1,4 @@
-<!-- [ngClass]="{'button-in-msg' : message.metadata && message.metadata.button}" -->
-<!-- ngStyle]="{'padding': (isImage(message) || isFrame(message))?'1px':'0 8px'}" -->
-<!-- 'width': (isImage(message) || isFrame(message))? sizeImage?.width + 'px': null  -->
-
-
-    
-<!-- <div id="bubble-message" *ngIf="isAudio(message)" [ngStyle]="{'padding': '0'}" class="messages primary-color">
-  <div>
-    <chat-audio-track  *ngIf="isAudio(message)"
-      [metadata]="message.metadata" 
-    ></chat-audio-track>
-  </div>
-</div> 
-
-
-[ngStyle]="{'padding': (isImage(message) || isFrame(message) || isAudio(message))?'0 0px':'0 8px'}"
--->
-
-
-
-
-
-<div id="bubble-message" *ngIf="hasRenderableContent()" class="messages primary-color">
+<div class="bubble-message messages primary-color" *ngIf="hasRenderableContent()">
     <div>
 
       <div *ngIf="messageType(MESSAGE_TYPE_OTHERS, message) && !isSameSender"
@@ -28,17 +6,7 @@
         [ngStyle]="{'margin': (isImage(message) || isFrame(message))? '12px 16px 8px 16px': '12px 16px 0px 16px'}" class="message_sender_fullname">
         {{message?.sender_fullname}}
       </div>
-      <!-- message type:: image -->
-      <!-- <div *ngIf="message.type == 'image' && message.metadata"  [ngStyle] = "{ 'max-width': getSizeImg(message).width, 'max-height': getSizeImg(message).height }">
-          <img class="message-contentX message-content-imageX" [src]="message.metadata.src" />
-      </div> -->
-  
-      <!-- <img *ngIf="message.type == 'image' && message.metadata" class="message-contentX message-content-imageX"
-      [src]="message.metadata.src" [width]="getSizeImg(message).width"
-      [height]="getSizeImg(message).height" /> -->
-
-      <!-- [width]="getMetadataSize(message.metadata).width"
-      [height]="getMetadataSize(message.metadata).height" -->
+
       <chat-image *ngIf="isImage(message)"
         [metadata]="message.metadata"
         [width]="sizeImage?.width"
@@ -53,21 +21,44 @@
         (onElementRendered)="onElementRenderedFN($event)">
       </chat-frame>
 
-      <!-- <chat-audio *ngIf="isAudio(message)"
-        [metadata]="message.metadata" 
-        (onElementRendered)="onElementRenderedFN($event)">
-      </chat-audio> -->
 
       <chat-audio *ngIf="isAudio(message)"
         [metadata]="message.metadata"
         [color]="fontColor"
-        [stylesMap]="stylesMap">
+        [stylesMap]="stylesMap"
+        [translationMap]="translationMap">
       </chat-audio>
 
+      <!-- TTS player: only when voice proxy is NOT active (avoids double playback)
+           and the message was not already played by the proxy (avoids replay on session end) -->
+      <chat-audio-sync *ngIf="isAudioTTS(message) && !(voiceService.isWssVoiceActive$ | async) && !voiceService.wasProxyHandled(message?.uid)"
+        [message]="message"
+        [color]="fontColor">
+      </chat-audio-sync>
+
       <chat-json-sources *ngIf="jsonSources !== null && jsonSources.length > 0"
         [items]="jsonSources"
+        [displayFields]="jsonSourcesDisplayFields"
+        [backgroundColor]="jsonSourcesBackgroundColor"
         (onElementRendered)="onElementRenderedFN($event)">
-      </chat-json-sources> 
+      </chat-json-sources>
+
+      <!-- Karaoke display for TTS messages while a WSS voice session is active -->
+      <p *ngIf="isAudioTTS(message) && (voiceService.isWssVoiceActive$ | async) && _wssKaraokeWords$"
+         class="wss-karaoke"
+         [style.color]="fontColor">
+        <span *ngFor="let w of (_wssKaraokeWords$ | async); trackBy: trackKaraokeWord"
+              class="wss-word"
+              [class.future]="w.state === 'future'"
+              [class.active]="w.state === 'active'"
+              [class.past]="w.state === 'past'">{{ w.text }}&nbsp;</span>
+      </p>
+
+      <!-- Text fallback for TTS messages after the voice proxy session ended -->
+      <chat-text *ngIf="isAudioTTS(message) && !(voiceService.isWssVoiceActive$ | async) && voiceService.wasProxyHandled(message?.uid) && message?.text"
+        [text]="message?.text"
+        [color]="fontColor">
+      </chat-text>
 
 
       <!-- <chat-frame *ngIf="message.metadata && message.metadata.type && message.metadata.type.includes('video')"
@@ -80,10 +71,17 @@
       <!-- <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)) && !isJsonSources(message)">
+      <div *ngIf="(message?.text && !isAudio(message) && !isAudioTTS(message)) && !isJsonSources(message)">
+
+        <!-- Word-by-word streaming reveal during an active voice session -->
+        <p *ngIf="_isStreaming" class="streaming-text" [style.color]="fontColor">
+          <span *ngFor="let w of _streamingWords; trackBy: trackWord"
+                class="stream-word"
+                [style.animation-delay]="(w.index * 80) + 'ms'">{{w.word}} </span>
+        </p>
 
         <!-- [htmlEnabled]="(message?.type==='html')? true : false" -->
-        <chat-text *ngIf="jsonSources === null && message?.type !=='html'"
+        <chat-text *ngIf="jsonSources === null && message?.type !=='html' && !_isStreaming"
           [text]="message?.text"
           [color]="fontColor"
           (onBeforeMessageRender)="onBeforeMessageRenderFN($event)"
@@ -98,13 +96,5 @@
         </chat-html>
 
       </div>
-  
     </div>
-  
-  </div>
-
-
-  
-
-
-
+</div>

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

@@ -37,4 +37,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,67 @@
-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 { MAX_WIDTH_IMAGES, MIN_WIDTH_IMAGES } from 'src/chat21-core/utils/constants';
+import { calcImageSize } from 'src/chat21-core/utils/utils-message';
+import { JsonSourcesParserService } from 'src/app/providers/json-sources-parser.service';
+import { VoiceService } from 'src/app/providers/voice/voice.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 jsonSourcesParserMock = {
+    getUrlPreviewPayload: () => null,
+    parseBaseFromMessage: () => null,
+    enrichSources: jasmine.createSpy('enrichSources').and.resolveTo([]),
+  };
+
+  const voiceServiceMock = {
+    isWssVoiceActive: false,
+    markProxyHandled: jasmine.createSpy('markProxyHandled'),
+    voiceTtsKaraoke$: {
+      pipe: () => ({
+        subscribe: () => ({ unsubscribe: () => undefined }),
+      }),
+    },
+  };
+
+  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: JsonSourcesParserService, useValue: jsonSourcesParserMock },
+        { provide: VoiceService, useValue: voiceServiceMock },
       ],
-    })
-    .compileComponents();
+    }).compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(BubbleMessageComponent);
     component = fixture.componentInstance;
+    component.stylesMap = new Map([
+      ['buttonFontSize', '14px'],
+      ['themeColor', '#000'],
+      ['foregroundColor', '#fff'],
+    ]);
     fixture.detectChanges();
   });
 
@@ -28,54 +69,103 @@ 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('calcImageSize', () => {
+    it('should scale down when width exceeds MAX_WIDTH_IMAGES', () => {
+      const meta = { width: MAX_WIDTH_IMAGES * 2, height: 100 };
+      const s = calcImageSize(meta);
+      expect(s.width).toBe(MAX_WIDTH_IMAGES);
+    });
+
+    it('should apply MIN_WIDTH when thumbnail width is small', () => {
+      const meta = { width: 40, height: 80 };
+      const s = calcImageSize(meta);
+      expect(s.width).toBe(MIN_WIDTH_IMAGES);
+    });
+
+    it('should keep metadata dimensions for mid-sized images', () => {
+      const meta = { width: 120, height: 60 };
+      const s = calcImageSize(meta);
+      expect(s.width).toBe(120);
+      expect(s.height).toBe(60);
+    });
+
+    it('should return raw metadata when width branch not matched', () => {
+      const s = calcImageSize({ width: undefined, height: 10 });
+      expect(s.width).toBeUndefined();
+      expect(s.height).toBe(10);
+    });
+  });
+
+  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 ignore non-object metadata', () => {
+      component.message = { ...textMessage, metadata: 'x' as any };
+      component.ngOnChanges();
+      expect(component.sizeImage).toBeUndefined();
+    });
+
+    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 });
+    });
+  });
 });