@chat21/chat21-web-widget 5.1.34 → 5.2.1

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

@@ -1,25 +1,40 @@
-import { Component, EventEmitter, HostBinding, Input, 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 { MESSAGE_TYPE_MINE, MESSAGE_TYPE_OTHERS, TYPE_MSG_URL_PREVIEW } from 'src/chat21-core/utils/constants';
+import { MESSAGE_TYPE_MINE, MESSAGE_TYPE_OTHERS } from 'src/chat21-core/utils/constants';
 import { convertColorToRGBA } from 'src/chat21-core/utils/utils';
-import { calcImageSize, isAudio, isFile, isFrame, isImage, isJsonSources, messageType } from 'src/chat21-core/utils/utils-message';
+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 { JsonSourcesParserService } from 'src/app/providers/json-sources-parser.service';
+import { JsonSourcesParserService, UrlPreviewDisplayFields } from 'src/app/providers/json-sources-parser.service';
 import { JsonSourceItem } from '../json-sources/json-sources.component';
+import { VoiceService } from 'src/app/providers/voice/voice.service';
+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 {
+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 }>();
@@ -39,10 +54,43 @@ export class BubbleMessageComponent {
     return !!(msg.text && String(msg.text).trim().length > 0);
   }
 
+  ngOnInit() {
+    // 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);
+    }
+
+    // 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;
+  }
+
   readonly isImage = isImage;
   readonly isFile = isFile;
   readonly isFrame = isFrame;
   readonly isAudio = isAudio;
+  readonly isAudioTTS = isAudioTTS;
   readonly isJsonSources = isJsonSources;
   readonly messageType = messageType;
   readonly convertColorToRGBA = convertColorToRGBA;
@@ -53,12 +101,15 @@ export class BubbleMessageComponent {
   fullnameColor: string;
   jsonSources: JsonSourceItem[] | null = null;
   isUrlPreviewMessage = false;
+  jsonSourcesDisplayFields?: UrlPreviewDisplayFields;
+  jsonSourcesBackgroundColor?: string;
 
   private urlPreviewReqId = 0;
 
   constructor(
     public sanitizer: DomSanitizer,
-    private jsonSourcesParser: JsonSourcesParserService
+    private jsonSourcesParser: JsonSourcesParserService,
+    public voiceService: VoiceService,
   ) {}
 
   ngOnChanges(): void {
@@ -74,16 +125,47 @@ export class BubbleMessageComponent {
       this.fullnameColor = getColorBck(this.message.sender_fullname);
     }
 
+    // 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;
+    }
+
     // Reset on every message change: we must not "leak" sources across different messages.
     this.jsonSources = null;
+    this.jsonSourcesDisplayFields = undefined;
+    this.jsonSourcesBackgroundColor = undefined;
 
     // 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;
-    this.isUrlPreviewMessage = !!urlPreviewLike;
-    if (urlPreviewLike) this.loadJsonSourcesFromUrlPreviewMessage();
+    const urlPreviewPayload = this.jsonSourcesParser.getUrlPreviewPayload(this.message);
+    this.isUrlPreviewMessage = !!urlPreviewPayload;
+    if (urlPreviewPayload) {
+      this.jsonSourcesDisplayFields = urlPreviewPayload.displayFields;
+      this.jsonSourcesBackgroundColor = urlPreviewPayload.previewBackgroundColor;
+      this.loadJsonSourcesFromUrlPreviewMessage();
+    }
+  }
+
+  trackWord(_index: number, item: { word: string; index: number }): number {
+    return item.index;
+  }
+
+  trackKaraokeWord(index: number): number {
+    return index;
   }
 
   private async loadJsonSourcesFromUrlPreviewMessage(): Promise<void> {

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}}" -->

package/src/app/component/message/buttons/action-button/action-button.component.spec.ts

@@ -1,4 +1,6 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { SimpleChange } from '@angular/core';
+import { ComponentFixture, TestBed, fakeAsync, tick, waitForAsync } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
 
 import { ActionButtonComponent } from './action-button.component';
 
@@ -6,20 +8,62 @@ describe('ActionButtonComponent', () => {
   let component: ActionButtonComponent;
   let fixture: ComponentFixture<ActionButtonComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ ActionButtonComponent ]
-    })
-    .compileComponents();
+      declarations: [ActionButtonComponent],
+    }).compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(ActionButtonComponent);
     component = fixture.componentInstance;
+    component.button = { value: 'OK', action: 'go' };
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('ngOnChanges should map theme CSS variables onto .action', () => {
+    component.fontSize = '16px';
+    component.backgroundColor = '#111';
+    component.textColor = '#222';
+    component.hoverBackgroundColor = '#333';
+    component.hoverTextColor = '#444';
+    component.ngOnChanges({
+      fontSize: new SimpleChange(null, '16px', true),
+    });
+    const el = fixture.nativeElement.querySelector('.action') as HTMLElement;
+    expect(el.style.getPropertyValue('--buttonFontSize').trim()).toBe('16px');
+    expect(el.style.getPropertyValue('--buttonBackgroundColor').trim()).toBeTruthy();
+  });
+
+  it('actionButtonAction should emit when action present', fakeAsync(() => {
+    spyOn(component.onButtonClicked, 'emit');
+    const de = fixture.debugElement.query(By.css('.action'));
+    de.triggerEventHandler('click', {});
+    tick(500);
+    expect(component.onButtonClicked.emit).toHaveBeenCalled();
+  }));
+
+  it('actionButtonAction should no-op when button has no action', () => {
+    component.button = { value: 'X', action: '' };
+    fixture.detectChanges();
+    spyOn(component.onButtonClicked, 'emit');
+    component.actionButtonAction();
+    expect(component.onButtonClicked.emit).not.toHaveBeenCalled();
+  });
+
+  it('mouseover and mouseout should not throw', () => {
+    expect(() => component.onMouseOver({} as any)).not.toThrow();
+    expect(() => component.onMouseOut({} as any)).not.toThrow();
+  });
+
+  it('template should mark archived conversations as disabled', () => {
+    component.isConversationArchived = true;
+    fixture.detectChanges();
+    const el = fixture.nativeElement.querySelector('.action');
+    expect(el.classList.contains('disabled')).toBe(true);
+  });
 });

package/src/app/component/message/buttons/link-button/link-button.component.scss

@@ -42,20 +42,17 @@
     transition: background-color .6s ease;
     .icon-button-action {
         position: absolute;
-        top: 50%;
-        right: 8px;
-        transform: translateY(-50%);
+        top: -1px;
+        right: 1px;
         svg {
-            fill: var(--textColor);
+            fill: var(--buttonTextColor);
         }
     }
     .icon-button-action-self{
         position: absolute;
-        top: 50%;
-        right: 8px;
-        transform: translateY(-50%);
+        right: 1px;
         svg {
-            fill: var(--textColor);
+            fill: var(--buttonTextColor);
         }
     }
     &:focus,

package/src/app/component/message/buttons/link-button/link-button.component.spec.ts

@@ -1,4 +1,6 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { SimpleChange } from '@angular/core';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
 
 import { LinkButtonComponent } from './link-button.component';
 
@@ -6,20 +8,63 @@ describe('LinkButtonComponent', () => {
   let component: LinkButtonComponent;
   let fixture: ComponentFixture<LinkButtonComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ LinkButtonComponent ]
-    })
-    .compileComponents();
+      declarations: [LinkButtonComponent],
+    }).compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(LinkButtonComponent);
     component = fixture.componentInstance;
+    component.button = { value: 'Open', link: 'https://x.test', target: 'blank' };
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('ngOnChanges should set CSS variables on .url', () => {
+    component.fontSize = '12px';
+    component.backgroundColor = '#aaa';
+    component.textColor = '#bbb';
+    component.hoverBackgroundColor = '#ccc';
+    component.hoverTextColor = '#ddd';
+    component.ngOnChanges({
+      fontSize: new SimpleChange(null, '12px', true),
+    });
+    const el = fixture.nativeElement.querySelector('.url') as HTMLElement;
+    expect(el.style.getPropertyValue('--buttonFontSize').trim()).toBe('12px');
+  });
+
+  it('actionButtonUrl should emit when link set', () => {
+    spyOn(component.onButtonClicked, 'emit');
+    component.actionButtonUrl();
+    expect(component.onButtonClicked.emit).toHaveBeenCalled();
+  });
+
+  it('actionButtonUrl should not emit when link empty', () => {
+    component.button = { value: 'x', link: '' };
+    spyOn(component.onButtonClicked, 'emit');
+    component.actionButtonUrl();
+    expect(component.onButtonClicked.emit).not.toHaveBeenCalled();
+  });
+
+  it('should render external icon when target is not self', () => {
+    component.button = { value: 'L', link: 'u', target: 'blank' };
+    fixture.detectChanges();
+    expect(fixture.debugElement.query(By.css('.icon-button-action'))).toBeTruthy();
+  });
+
+  it('should render self icon when target is self', () => {
+    component.button = { value: 'L', link: 'u', target: 'self' };
+    fixture.detectChanges();
+    expect(fixture.debugElement.query(By.css('.icon-button-action-self'))).toBeTruthy();
+  });
+
+  it('mouseover and mouseout should not throw', () => {
+    expect(() => component.onMouseOver({} as any)).not.toThrow();
+    expect(() => component.onMouseOut({} as any)).not.toThrow();
+  });
 });

package/src/app/component/message/buttons/text-button/text-button.component.spec.ts

@@ -1,4 +1,6 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { SimpleChange } from '@angular/core';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
 
 import { TextButtonComponent } from './text-button.component';
 
@@ -6,20 +8,57 @@ describe('TextButtonComponent', () => {
   let component: TextButtonComponent;
   let fixture: ComponentFixture<TextButtonComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ TextButtonComponent ]
-    })
-    .compileComponents();
+      declarations: [TextButtonComponent],
+    }).compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(TextButtonComponent);
     component = fixture.componentInstance;
+    component.button = { value: 'Reply' };
+    component.isConversationArchived = false;
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('ngOnChanges should set CSS variables on .text', () => {
+    component.fontSize = '13px';
+    component.backgroundColor = '#111';
+    component.textColor = '#222';
+    component.hoverBackgroundColor = '#333';
+    component.hoverTextColor = '#444';
+    component.ngOnChanges({
+      fontSize: new SimpleChange(null, '13px', true),
+    });
+    const el = fixture.nativeElement.querySelector('.text') as HTMLElement;
+    expect(el.style.getPropertyValue('--buttonFontSize').trim()).toBe('13px');
+  });
+
+  it('actionButtonText should emit click payload', () => {
+    spyOn(component.onButtonClicked, 'emit');
+    component.actionButtonText();
+    expect(component.onButtonClicked.emit).toHaveBeenCalled();
+  });
+
+  it('click on template should invoke actionButtonText', () => {
+    spyOn(component, 'actionButtonText');
+    fixture.debugElement.query(By.css('.text')).triggerEventHandler('click', {});
+    expect(component.actionButtonText).toHaveBeenCalled();
+  });
+
+  it('should add disabled class when conversation archived', () => {
+    component.isConversationArchived = true;
+    fixture.detectChanges();
+    expect(fixture.nativeElement.querySelector('.text').classList.contains('disabled')).toBe(true);
+  });
+
+  it('mouseover and mouseout should not throw', () => {
+    expect(() => component.onMouseOver({} as any)).not.toThrow();
+    expect(() => component.onMouseOut({} as any)).not.toThrow();
+  });
 });

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

@@ -1,19 +1,28 @@
-<div class="wrapper">
-    <div id="left" class="arrow left" (click)="goTo('previous')" *ngIf="activeElement > 1">
-        <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
+<div class="wrapper"
+    role="region"
+    aria-roledescription="carousel"
+    [attr.aria-label]="translationMap?.get('CAROUSEL_LABEL') || 'Cards carousel'">
+    <button type="button"
+        id="left"
+        class="arrow left c21-button-clean"
+        [attr.aria-label]="translationMap?.get('CAROUSEL_PREVIOUS') || 'Previous slide'"
+        (click)="goTo('previous')" *ngIf="activeElement > 1">
+        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
             <path d="M0 0h24v24H0V0z" fill="none"/><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12l4.58-4.59z"/>
         </svg>
-    </div>
+    </button>
     <div class="carousel">
-        <!-- <div class="card" style="width: 17px;"></div> -->
-        <div class="card" *ngFor="let card of gallery; let i = index">
-            <!-- <div [style.opacity]="i+1 === activeElement? 1: 0.5"> -->
+        <div class="card"
+            *ngFor="let card of gallery; let i = index"
+            role="group"
+            aria-roledescription="slide"
+            [attr.aria-label]="getSlideLabel(i + 1, gallery?.length)">
             <div>
                 <div class="card-image" *ngIf="card?.preview?.src !== ''">
-                    <img [src]="card?.preview?.src" alt="img" draggable="false">
+                    <img [src]="card?.preview?.src" [attr.alt]="card?.title || 'Carousel image'" draggable="false">
                 </div>
                 <div class="card-image card-image-placeholder" *ngIf="card?.preview?.src == ''">
-                    <img src="assets/images/icons/no-image.svg" alt="img" draggable="false">
+                    <img src="assets/images/icons/no-image.svg" alt="" draggable="false">
                     <span>Image not available</span>
                 </div>
                 <div class="card-content">
@@ -21,20 +30,24 @@
                     <div class="card-description">{{card?.description}}</div>
                 </div>
                 <div class="buttons" *ngIf="card?.buttons && card?.buttons.length > 0">
-                    <div *ngFor="let button of card?.buttons" 
-                        class="single-button action"
+                    <button type="button" *ngFor="let button of card?.buttons"
+                        class="single-button action c21-button-clean"
                         [ngClass]="{'disabled': (isConversationArchived || (!isLastMessage && button.type !== TYPE_BUTTON.URL)), 'active': button?.active}"
+                        [attr.aria-label]="button?.value"
                         (click)="actionButtonClick($event, button, i)" >
                         {{button.value}}
-                    </div>
+                    </button>
                 </div>
             </div>
         </div>
-        <!-- <div class="card" style="width: 17px;"></div> -->
     </div>
-    <div id="right" class="arrow right" (click)="goTo('next')" *ngIf="activeElement !== gallery.length">
-        <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
+    <button type="button"
+        id="right"
+        class="arrow right c21-button-clean"
+        [attr.aria-label]="translationMap?.get('CAROUSEL_NEXT') || 'Next slide'"
+        (click)="goTo('next')" *ngIf="activeElement !== gallery.length">
+        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
             <path d="M0 0h24v24H0V0z" fill="none"/><path d="M10.02 6L8.61 7.41 13.19 12l-4.58 4.59L10.02 18l6-6-6-6z"/>
         </svg>
-    </div>
+    </button>
 </div>

package/src/app/component/message/carousel/carousel.component.scss

@@ -24,13 +24,17 @@
     font-size: 14px;
     // margin: 0 25px;
 }
-.wrapper div.arrow {
+.wrapper button.arrow {
     top: 50%;
     height: 40px;
     width: 40px;
     cursor: pointer;
     position: absolute;
     background: #fff;
+    border: none;
+    padding: 0;
+    -webkit-appearance: none;
+    appearance: none;
     border-radius: 50%;
     box-shadow: 0 3px 6px rgba(0,0,0,0.23);
     transform: translateY(-50%);
@@ -41,13 +45,13 @@
     justify-content: center;
     align-items: center;
 }
-.wrapper div.arrow:active{
+.wrapper button.arrow:active{
     transform: translateY(-50%) scale(0.85);
 }
-.wrapper div.arrow:first-child{
+.wrapper button.arrow:first-child{
     left: -22px;
 }
-.wrapper div.arrow:last-child{
+.wrapper button.arrow:last-child{
     right: -22px;
 }
 .wrapper .carousel{
@@ -192,13 +196,18 @@
 
 
     .single-button{
-        // border-top-color: rgb(219, 225, 232);
-
+        width: 100%;
+        box-sizing: border-box;
+        margin: 0;
+        border: none;
+        border-top: 1px dashed rgba(0, 0, 0, 0.08);
+        text-align: center;
+        -webkit-appearance: none;
+        appearance: none;
         -webkit-box-align: center;
         -ms-flex-align: center;
         align-items: center;
         justify-content: center;
-        border-top: 1px dashed rgba(0, 0, 0, 0.08);
         cursor: pointer;
         display: -webkit-box;
         display: -ms-flexbox;
@@ -222,7 +231,6 @@
         line-height: 16px;
         padding: 8px 16px!important;
 
-        &:focus,
         &:hover {
             color: var(--hoverTextColor);
             background:  var(--hoverBackgroundColor);
@@ -233,6 +241,10 @@
                 }
             }
         }
+        &:focus-visible {
+            outline: 2px solid var(--hoverBackgroundColor, #1565c0);
+            outline-offset: 2px;
+        }
         &:after {
             content: "";
             position: absolute;

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

@@ -1,4 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { TYPE_BUTTON } from 'src/chat21-core/utils/constants';
 
 import { CarouselComponent } from './carousel.component';
 
@@ -6,18 +8,93 @@ describe('CarouselComponent', () => {
   let component: CarouselComponent;
   let fixture: ComponentFixture<CarouselComponent>;
 
+  const btnA = { type: TYPE_BUTTON.TEXT, value: 'Go', action: '', link: '', text: 'x', active: false };
+  const gallery = [
+    { preview: { src: 'https://a/img.png' }, title: 'A', description: 'da', buttons: [btnA] },
+    { preview: { src: 'https://b/img.png' }, title: 'B', description: 'db', buttons: [{ type: TYPE_BUTTON.TEXT, value: 'B2', action: 'a', text: 't', active: false }] },
+  ];
+
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ CarouselComponent ]
-    })
-    .compileComponents();
+      declarations: [CarouselComponent],
+    }).compileComponents();
 
     fixture = TestBed.createComponent(CarouselComponent);
     component = fixture.componentInstance;
+    component.message = { attributes: { attachment: { gallery } } } as any;
+    component.gallery = gallery;
+    component.stylesMap = new Map<string, string>([
+      ['buttonFontSize', '14px'],
+      ['buttonBackgroundColor', '#111'],
+      ['buttonTextColor', '#222'],
+      ['buttonHoverBackgroundColor', '#333'],
+      ['buttonHoverTextColor', '#444'],
+    ]);
+    component.isConversationArchived = false;
+    component.isLastMessage = true;
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
+    expect(component.gallery.length).toBe(2);
+  });
+
+  it('ngOnChanges should apply style map to wrapper', () => {
+    component.ngOnChanges({
+      stylesMap: {
+        previousValue: undefined,
+        currentValue: component.stylesMap,
+        firstChange: true,
+        isFirstChange: () => true,
+      },
+    });
+    const wrap = fixture.nativeElement.querySelector('.wrapper') as HTMLElement;
+    expect(wrap.style.getPropertyValue('--buttonFontSize').trim()).toBe('14px');
+  });
+
+  it('goTo should bump activeElement for next and previous', () => {
+    const carouselEl = component.carousel;
+    spyOnProperty(carouselEl, 'offsetWidth', 'get').and.returnValue(400);
+    const cards = carouselEl.querySelectorAll('.card');
+    expect(cards.length).toBeGreaterThanOrEqual(2);
+    const card1 = cards[1] as HTMLElement;
+    spyOnProperty(card1, 'offsetWidth', 'get').and.returnValue(180);
+    const startEl = component.activeElement;
+    component.goTo('next');
+    expect(component.activeElement).toBe(startEl + 1);
+    component.goTo('previous');
+    expect(component.activeElement).toBe(startEl);
+  });
+
+  it('actionButtonClick should emit onAttachmentButtonClicked', () => {
+    spyOn(component.onAttachmentButtonClicked, 'emit');
+    const ev = { target: { classList: { add: jasmine.createSpy('add') } } };
+    component.gallery = gallery;
+    component.actionButtonClick(ev as any, btnA, 0);
+    expect(component.onAttachmentButtonClicked.emit).toHaveBeenCalled();
+    expect(btnA.active).toBe(true);
+  });
+
+  it('actionButtonClick should ignore empty button', () => {
+    spyOn(component.onAttachmentButtonClicked, 'emit');
+    const empty = { type: TYPE_BUTTON.TEXT, value: '', action: '', link: '', text: '', active: false };
+    component.actionButtonClick({ target: { classList: { add: () => {} } } } as any, empty, 0);
+    expect(component.onAttachmentButtonClicked.emit).not.toHaveBeenCalled();
+  });
+
+  it('arrow clicks should invoke goTo', () => {
+    spyOn(component, 'goTo');
+    component.activeElement = 1;
+    component.gallery = gallery;
+    fixture.detectChanges();
+    const right = fixture.debugElement.query(By.css('.arrow.right'));
+    expect(right).toBeTruthy();
+    right!.triggerEventHandler('click', {});
+    expect(component.goTo).toHaveBeenCalledWith('next');
+  });
+
+  it('TYPE_BUTTON should be exposed for template', () => {
+    expect(component.TYPE_BUTTON).toBe(TYPE_BUTTON);
   });
 });