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

package/src/app/component/conversation-detail/conversation-preview/conversation-preview.component.spec.ts

@@ -1,38 +1,207 @@
-import { DomSanitizer } from '@angular/platform-browser';
-import { LoggerInstance } from './../../../../chat21-core/providers/logger/loggerInstance';
-import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
-import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { FormsModule } from '@angular/forms';
+import { By } from '@angular/platform-browser';
 
+import { MIN_WIDTH_IMAGES } from 'src/app/utils/constants';
 import { ConversationPreviewComponent } from './conversation-preview.component';
-import { LogLevel } from 'src/chat21-core/utils/constants';
-import { NGXLogger } from 'ngx-logger';
 import { CustomLogger } from 'src/chat21-core/providers/logger/customLogger';
-const mockService = jasmine.createSpyObj('LoggerService', ['setLoggerConfig', "debug", "log", "warn", "info", "error" ]);
+import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
+import { NGXLogger } from 'ngx-logger';
 
 describe('ConversationPreviewComponent', () => {
   let component: ConversationPreviewComponent;
   let fixture: ComponentFixture<ConversationPreviewComponent>;
-  let ngxlogger: NGXLogger;
-  let customLogger = new CustomLogger(ngxlogger)
+  const ngxlogger = jasmine.createSpyObj('NGXLogger', ['log', 'trace', 'debug', 'warn', 'error', 'info']);
+  const customLogger = new CustomLogger(ngxlogger);
+
+  const imageAttachment = (name = 'a.png') => ({
+    file: new File(['x'], name, { type: 'image/png' }),
+    metadata: { width: 400, height: 200, type: 'image/png', uid: 'u1', src: 'blob:mock' },
+  });
 
   beforeEach(waitForAsync(() => {
+    LoggerInstance.setInstance(customLogger);
     TestBed.configureTestingModule({
-      declarations: [ ConversationPreviewComponent ],
-      providers: [LoggerService]
-    }).compileComponents();
+      declarations: [ConversationPreviewComponent],
+      imports: [FormsModule],
+    })
+      .overrideComponent(ConversationPreviewComponent, {
+        set: {
+          template: `
+            <div #scrollMe id="c21-contentScroll-preview" style="height:39%">preview</div>
+            <textarea id="chat21-main-message-context-preview" [(ngModel)]="textInputTextArea"></textarea>
+          `,
+        },
+      })
+      .compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(ConversationPreviewComponent);
     component = fixture.componentInstance;
-    LoggerInstance.setInstance(customLogger)
-    let logger = LoggerInstance.getInstance()
-    component['logger']= logger
+    component.attachments = [imageAttachment()] as any;
+    component.baseLocation = '';
+    component.translationMap = new Map([['LABEL_PLACEHOLDER', 'Placeholder']]);
+    component.stylesMap = new Map([['themeColor', '#000']]);
+    component.textInputTextArea = '';
     fixture.detectChanges();
   });
 
   it('should create', () => {
-    console.log('ConversationPreviewComponent --->', component)
     expect(component).toBeTruthy();
   });
+
+  describe('getMetadataSize', () => {
+    it('should scale wide images to preview max width', () => {
+      const s = component.getMetadataSize({ width: 500, height: 100 });
+      expect(s.width).toBe(230);
+      expect(s.height).toBeCloseTo(46, 5);
+    });
+
+    it('should bump very narrow images to MIN_WIDTH_IMAGES', () => {
+      const s = component.getMetadataSize({ width: 40, height: 80 });
+      expect(s.width).toBe(MIN_WIDTH_IMAGES);
+    });
+
+    it('should cap tall images by max preview height', () => {
+      const s = component.getMetadataSize({ width: 100, height: 400 });
+      expect(s.height).toBe(150);
+    });
+
+    it('should default undefined metadata then cap tall square to preview max height', () => {
+      const s = component.getMetadataSize({});
+      // Both sides start at 230; height branch caps at 150 and scales width to match aspect ratio.
+      expect(s.height).toBe(150);
+      expect(s.width).toBe(150);
+    });
+  });
+
+  describe('readAsDataURL', () => {
+    it('should set fileSelected for raster images', () => {
+      component.fileSelected = undefined as any;
+      component.readAsDataURL(imageAttachment());
+      expect(component.fileSelected).toBeDefined();
+      expect(component.sizeImage).toBeDefined();
+    });
+
+    it('should sanitize SVG src', () => {
+      const svg = {
+        file: new File(['<svg/>'], 'a.svg', { type: 'image/svg+xml' }),
+        metadata: { width: 10, height: 10, type: 'image/svg+xml', uid: 's1', src: 'data:image/svg+xml;base64,PHN2Zy8+' },
+      };
+      component.fileSelected = undefined as any;
+      component.readAsDataURL(svg);
+      expect(component.fileSelected).toBeDefined();
+    });
+
+    it('should route non-image files to createFile', () => {
+      spyOn(component, 'createFile').and.returnValue(Promise.resolve());
+      const pdf = {
+        file: new File(['%PDF'], 'doc.pdf', { type: 'application/pdf' }),
+        metadata: { uid: 'p1', type: 'application/pdf' },
+      };
+      component.readAsDataURL(pdf);
+      expect(component.createFile).toHaveBeenCalledWith(pdf);
+    });
+  });
+
+  describe('createFile', () => {
+    it('should request placeholder asset from baseLocation', async () => {
+      const blob = new Blob(['x'], { type: 'image/png' });
+      spyOn(window, 'fetch').and.returnValue(Promise.resolve({ blob: () => Promise.resolve(blob) } as Response));
+      component.baseLocation = 'https://app.test';
+      const att = {
+        file: new File(['z'], 'note.txt', { type: 'text/plain' }),
+        metadata: { uid: 'f1', type: 'text/plain' },
+      };
+      await component.createFile(att);
+      expect(window.fetch).toHaveBeenCalledWith('https://app.test/assets/images/file-alt-solid.png');
+    });
+  });
+
+  describe('keyboard and actions', () => {
+    it('onkeydown Escape should close modal', () => {
+      spyOn(component.onCloseModalPreview, 'emit');
+      component.onkeydown({ which: 27, keyCode: 27 } as KeyboardEvent);
+      expect(component.onCloseModalPreview.emit).toHaveBeenCalled();
+    });
+
+    it('onkeydown Enter with text should emit send and restore', () => {
+      spyOn(component.onSendAttachment, 'emit');
+      spyOn(component as any, 'restoreTextArea');
+      const ta = fixture.debugElement.query(By.css('#chat21-main-message-context-preview')).nativeElement as HTMLTextAreaElement;
+      ta.value = ' caption ';
+      const ev = new KeyboardEvent('keydown', { key: 'Enter', keyCode: 13 });
+      spyOn(ev, 'preventDefault');
+      component.onkeydown(ev);
+      expect(ev.preventDefault).toHaveBeenCalled();
+      expect(component.onSendAttachment.emit).toHaveBeenCalledWith(' caption ');
+      expect((component as any).restoreTextArea).toHaveBeenCalled();
+    });
+
+    it('onkeydown Enter with only whitespace should not emit', () => {
+      spyOn(component.onSendAttachment, 'emit');
+      const ta = fixture.debugElement.query(By.css('#chat21-main-message-context-preview')).nativeElement as HTMLTextAreaElement;
+      ta.value = '   ';
+      component.onkeydown({ which: 13, keyCode: 13, preventDefault: () => {} } as any);
+      expect(component.onSendAttachment.emit).not.toHaveBeenCalled();
+    });
+
+    it('onClickClose should emit', () => {
+      spyOn(component.onCloseModalPreview, 'emit');
+      component.onClickClose();
+      expect(component.onCloseModalPreview.emit).toHaveBeenCalled();
+    });
+
+    it('onSendPressed should emit current model text', () => {
+      spyOn(component.onSendAttachment, 'emit');
+      component.textInputTextArea = 'hi';
+      component.onSendPressed(new Event('click'));
+      expect(component.onSendAttachment.emit).toHaveBeenCalledWith('hi');
+    });
+  });
+
+  describe('textarea sizing', () => {
+    it('onTextAreaChange should call resize helpers', () => {
+      spyOn(component, 'resizeInputField');
+      spyOn(component, 'resizeModalHeight');
+      component.onTextAreaChange();
+      expect(component.resizeInputField).toHaveBeenCalled();
+      expect(component.resizeModalHeight).toHaveBeenCalled();
+    });
+
+    it('resizeInputField should grow with multiline content', () => {
+      const ta = fixture.debugElement.query(By.css('#chat21-main-message-context-preview')).nativeElement as HTMLTextAreaElement;
+      ta.value = 'a\nb\nc';
+      ta.style.height = '20px';
+      Object.defineProperty(ta, 'scrollHeight', { configurable: true, value: 80 });
+      Object.defineProperty(ta, 'offsetHeight', { configurable: true, value: 20 });
+      component.resizeInputField();
+      expect(parseInt(ta.style.height, 10)).toBeGreaterThan(20);
+    });
+
+    it('resizeModalHeight should adjust host when textarea grows', () => {
+      const ta = fixture.debugElement.query(By.css('#chat21-main-message-context-preview')).nativeElement as HTMLTextAreaElement;
+      ta.style.height = '40px';
+      component.scrollMe = { nativeElement: { style: { height: '' } } } as any;
+      component.resizeModalHeight();
+      expect((component.scrollMe.nativeElement.style.height as string).length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('onImageRenderedFN', () => {
+    it('should clear pending load flag', () => {
+      component.isFilePendingToLoad = true;
+      component.onImageRenderedFN({});
+      expect(component.isFilePendingToLoad).toBe(false);
+    });
+  });
+
+  describe('onPaste', () => {
+    it('should call resizeInputField', () => {
+      spyOn(component, 'resizeInputField');
+      component.onPaste(new ClipboardEvent('paste'));
+      expect(component.resizeInputField).toHaveBeenCalled();
+    });
+  });
 });

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

@@ -1,4 +1,4 @@
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { Component, ElementRef, EventEmitter, HostListener, Input, OnInit, Output, ViewChild } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { MIN_WIDTH_IMAGES } from 'src/app/utils/constants';
 import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
@@ -244,27 +244,47 @@ export class ConversationPreviewComponent implements OnInit {
     this.setFocusOnId('chat21-main-message-context-preview');
   }
 
-  /*
-  * @param event
-  */
-  onkeypress(event) {
+  /**
+   * Single keyboard handler for the preview textarea:
+   * - Enter (no modifier)               -> send the attachment with the typed message
+   * - Shift / Alt / Ctrl / Meta + Enter -> insert a newline (default browser behavior)
+   * - Escape                            -> close the preview modal
+   * Tab navigation is handled by CDK cdkTrapFocus on the dialog wrapper.
+   * @param event
+   */
+  onkeydown(event: KeyboardEvent) {
     const keyCode = event.which || event.keyCode;
-    this.textInputTextArea = ((document.getElementById('chat21-main-message-context-preview') as HTMLInputElement).value);
-    if (keyCode === 13) {
+
+    if (keyCode === 27) { // Esc
+      this.onClickClose();
+      return;
+    }
+
+    if (keyCode === 13) { // ENTER
+      const hasModifier = event.metaKey || event.shiftKey || event.altKey || event.ctrlKey;
+      if (hasModifier) {
+        return;
+      }
+
+      event.preventDefault();
+      const target = document.getElementById('chat21-main-message-context-preview') as HTMLInputElement;
+      if (target) {
+        this.textInputTextArea = target.value;
+      }
       if (this.textInputTextArea && this.textInputTextArea.trim() !== '') {
         this.onSendAttachment.emit(this.textInputTextArea);
         this.restoreTextArea();
       }
-    } else if (keyCode === 9) {
-      event.preventDefault();
+      return;
     }
   }
 
-  onkeydown(event){
-    const keyCode = event.which || event.keyCode;
-    if (keyCode === 27) { // Esc keyboard code
-      this.onClickClose()
-    }
+  /** Component-level Esc handler to close the modal even when focus is not on the textarea. */
+  @HostListener('keydown.escape', ['$event'])
+  onHostEscape(event: KeyboardEvent){
+    event.preventDefault();
+    event.stopPropagation();
+    this.onClickClose();
   }
 
   onPaste(event){

package/src/app/component/conversation-detail/stream-audio-spectrum/stream-audio-spectrum.component.html

@@ -1,18 +1,46 @@
-<div class="stream-audio-spectrum" [ngStyle]="accentColor ? { color: accentColor } : null">
-    <svg class="stream-audio-spectrum__svg" viewBox="0 0 100 32" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
-        <defs>
-            <linearGradient [attr.id]="gradientId" x1="0" y1="16" x2="100" y2="16" gradientUnits="userSpaceOnUse">
-                <stop offset="0%" stop-color="currentColor" stop-opacity="0.45"/>
-                <stop offset="50%" stop-color="currentColor" stop-opacity="1"/>
-                <stop offset="100%" stop-color="currentColor" stop-opacity="0.45"/>
-            </linearGradient>
-        </defs>
-        <path class="stream-audio-spectrum__line"
-            [attr.d]="spectrumLinePath"
-            fill="none"
-            [attr.stroke]="'url(#' + gradientId + ')'"
-            stroke-width="2.4"
-            stroke-linecap="round"
-            stroke-linejoin="round"/>
-    </svg>
-</div>
+<ng-container [ngSwitch]="mode">
+    <!-- ALERT: spectrum line (fills streamAudioAlert width) -->
+    <div *ngSwitchCase="'alert'" class="stream-audio-spectrum" [ngStyle]="accentColor ? { color: accentColor } : null">
+        <svg class="stream-audio-spectrum__svg" viewBox="0 0 100 32" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+            <defs>
+                <linearGradient [attr.id]="gradientId" x1="0" y1="16" x2="100" y2="16" gradientUnits="userSpaceOnUse">
+                    <stop offset="0%" stop-color="currentColor" stop-opacity="0.45"/>
+                    <stop offset="50%" stop-color="currentColor" stop-opacity="1"/>
+                    <stop offset="100%" stop-color="currentColor" stop-opacity="0.45"/>
+                </linearGradient>
+            </defs>
+            <path class="stream-audio-spectrum__line"
+                [attr.d]="spectrumLinePath"
+                fill="none"
+                [attr.stroke]="'url(#' + gradientId + ')'"
+                stroke-width="2.4"
+                stroke-linecap="round"
+                stroke-linejoin="round"/>
+        </svg>
+    </div>
+
+    <!-- BUTTON: inactive icon / expanded pill content -->
+    <ng-container *ngSwitchCase="'button'">
+        <span class="stream-audio-button__icon" *ngIf="!active" aria-hidden="true">
+            <svg role="img" xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 23 23" aria-labelledby="altIconTitle">
+                <rect x="0" y="7.5" height="6px" fill-opacity="1" width="2px" rx="0.75" ry="0.75"></rect>
+                <rect x="4" y="5.5" height="10px" fill-opacity="1" width="2px" rx="0.75" ry="0.75"></rect>
+                <rect x="8" y="2.5" height="16px" fill-opacity="1" width="2px" rx="0.75" ry="0.75"></rect>
+                <rect x="12" y="5.5" height="10px" fill-opacity="1" width="2px" rx="0.75" ry="0.75"></rect>
+                <rect x="16" y="2.5" height="16px" fill-opacity="1" width="2px" rx="0.75" ry="0.75"></rect>
+                <rect x="20" y="7.5" height="6px" fill-opacity="1" width="2px" rx="0.75" ry="0.75"></rect>
+                <title id="altIconTitle">{{ translationMap.get('STREAM_AUDIO') }}</title>
+            </svg>
+        </span>
+
+        <span class="stream-audio-button__expanded" *ngIf="active">
+            <span class="stream-audio-button__bars" aria-hidden="true">
+                <span class="bar" [style.transform]="'scaleY(' + barScales[0] + ')'"></span>
+                <span class="bar" [style.transform]="'scaleY(' + barScales[1] + ')'"></span>
+                <span class="bar" [style.transform]="'scaleY(' + barScales[2] + ')'"></span>
+                <span class="bar" [style.transform]="'scaleY(' + barScales[3] + ')'"></span>
+            </span>
+            <span class="stream-audio-button__label">{{ translationMap.get('CLOSE') }}</span>
+        </span>
+    </ng-container>
+</ng-container>

package/src/app/component/conversation-detail/stream-audio-spectrum/stream-audio-spectrum.component.scss

@@ -1,7 +1,8 @@
 :host {
-  display: block;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   width: 100%;
-  flex: 1 1 auto;
 }
 
 .stream-audio-spectrum {
@@ -23,3 +24,60 @@
   pointer-events: none;
   filter: drop-shadow(0 0 1px color-mix(in srgb, currentColor 35%, transparent));
 }
+
+/* ===========================
+ * BUTTON (pill content)
+ * =========================== */
+.stream-audio-button__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
+
+.stream-audio-button__icon svg {
+  width: 20px;
+  height: 20px;
+  display: block;
+  rect {
+    fill: var(--icon-fill-color);
+  }
+}
+
+.stream-audio-button__expanded {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  width: 100%;
+  user-select: none;
+  color: var(--icon-fill-color);
+}
+
+.stream-audio-button__label {
+  font-size: 14px;
+  line-height: 1;
+  font-weight: 500;
+  letter-spacing: 0.2px;
+  white-space: nowrap;
+}
+
+.stream-audio-button__bars {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 3px;
+  width: 26px;
+  height: 18px;
+  transform-origin: center;
+  margin: 0;
+  line-height: 0;
+}
+
+.stream-audio-button__bars .bar {
+  width: 3px;
+  height: 100%;
+  border-radius: 2px;
+  background: var(--icon-fill-color);
+  transform-origin: center;
+}

package/src/app/component/conversation-detail/stream-audio-spectrum/stream-audio-spectrum.component.ts

@@ -1,4 +1,8 @@
-import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { Component, Input, OnChanges, OnDestroy, OnInit, Optional, SimpleChanges } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { VoiceService } from 'src/app/providers/voice/voice.service';
+
+export type StreamAudioSpectrumMode = 'alert' | 'button';
 
 /**
  * Icona stream: cerchio con linea orizzontale tipo spettro, reattiva al volume del microfono.
@@ -18,19 +22,63 @@ export class StreamAudioSpectrumComponent implements OnInit, OnChanges {
   /** Colore tema (stroke / gradient); opzionale. */
   @Input() accentColor?: string;
 
+  /** UI variant. `alert` = spectrum line (in #streamAudioAlert). `button` = icon / pill with bars + label. */
+  @Input() mode: StreamAudioSpectrumMode = 'alert';
+  /** For `mode="button"`: whether the stream is active (expanded pill). */
+  @Input() active = false;
+  /** For `mode="button"`: VAD speech flag; if omitted, we fall back to a volume threshold heuristic. */
+  @Input() isUserSpeaking?: boolean;
+  /** For `mode="button"`: label on the pill. */
+  @Input() translationMap: Map< string, string>;
+
+  // ALERT (spectrum line)
   spectrumLinePath = 'M0,16 L100,16';
 
+  // BUTTON (bars)
+  barScales: [number, number, number, number] = [0.65, 0.65, 0.65, 0.65];
+  private rafId: number | null = null;
+  private lastSpeaking = false;
+  private voiceSpeechStartSub?: Subscription;
+  private voiceSpeechEndSub?: Subscription;
+  private internalIsUserSpeaking = false;
+
+  constructor(@Optional() private readonly voiceService: VoiceService | null) {}
+
   ngOnInit(): void {
-    this.refreshPath();
+    // Optional: use VAD speech events to improve idle/speaking detection.
+    if (this.voiceService) {
+      this.voiceSpeechStartSub = this.voiceService.speechStart$?.subscribe(() => {
+        this.internalIsUserSpeaking = true;
+      });
+      this.voiceSpeechEndSub = this.voiceService.speechEnd$?.subscribe(() => {
+        this.internalIsUserSpeaking = false;
+      });
+    }
+    this.refreshAll();
   }
 
   ngOnChanges(changes: SimpleChanges): void {
-    if (changes['volume']) {
-      this.refreshPath();
+    if (changes['volume'] || changes['mode'] || changes['active'] || changes['isUserSpeaking']) {
+      this.refreshAll();
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.stopRaf();
+    this.voiceSpeechStartSub?.unsubscribe();
+    this.voiceSpeechEndSub?.unsubscribe();
+  }
+
+  private refreshAll(): void {
+    if (this.mode === 'alert') {
+      this.refreshSpectrumPath();
+      this.stopRaf();
+      return;
     }
+    this.refreshBars();
   }
 
-  private refreshPath(): void {
+  private refreshSpectrumPath(): void {
     const intensity = Math.min(this.volume / 80, 1);
     const t = Date.now() / 175;
     this.spectrumLinePath = this.buildSpectrumLinePath(intensity, t);
@@ -59,4 +107,86 @@ export class StreamAudioSpectrumComponent implements OnInit, OnChanges {
     }
     return parts.join('');
   }
+
+  private refreshBars(): void {
+    if (!this.active) {
+      this.stopRaf();
+      return;
+    }
+
+    const speaking = this.computeSpeaking();
+    if (!speaking) {
+      this.stopRaf();
+      this.barScales = [0.65, 0.65, 0.65, 0.65];
+      this.lastSpeaking = false;
+      return;
+    }
+
+    // speaking: animate bars with volume-driven intensity
+    if (!this.lastSpeaking) {
+      this.lastSpeaking = true;
+    }
+    this.startRaf();
+  }
+
+  private computeSpeaking(): boolean {
+    if (typeof this.isUserSpeaking === 'boolean') {
+      return this.isUserSpeaking;
+    }
+    if (this.voiceService) {
+      return this.internalIsUserSpeaking;
+    }
+    // Fallback heuristic: treat as speaking when volume crosses a low threshold.
+    return (this.volume || 0) >= 4;
+  }
+
+  private startRaf(): void {
+    if (this.rafId !== null) {
+      return;
+    }
+    const tick = () => {
+      if (!this.active) {
+        this.stopRaf();
+        return;
+      }
+      const speaking = this.computeSpeaking();
+      if (!speaking) {
+        this.stopRaf();
+        this.barScales = [0.65, 0.65, 0.65, 0.65];
+        return;
+      }
+
+      const intensity = Math.min((this.volume || 0) / 80, 1);
+      const t = performance.now() / 220;
+      const targets: [number, number, number, number] = [0.35, 0.35, 0.35, 0.35];
+
+      for (let i = 0; i < 4; i++) {
+        const phase = i * 0.9;
+        const w1 = (Math.sin(t * 1.35 + phase) + 1) / 2;
+        const w2 = (Math.sin(t * 2.05 + phase * 1.7) + 1) / 2;
+        const mix = w1 * 0.62 + w2 * 0.38;
+        const s = 0.25 + intensity * (0.25 + 0.95 * mix);
+        targets[i as 0 | 1 | 2 | 3] = Math.max(0.35, Math.min(1.2, s));
+      }
+
+      // Smooth toward targets to avoid jitter on rapid volume changes.
+      const lerp = (a: number, b: number, k: number) => a + (b - a) * k;
+      this.barScales = [
+        lerp(this.barScales[0], targets[0], 0.35),
+        lerp(this.barScales[1], targets[1], 0.35),
+        lerp(this.barScales[2], targets[2], 0.35),
+        lerp(this.barScales[3], targets[3], 0.35),
+      ];
+
+      this.rafId = requestAnimationFrame(tick);
+    };
+    this.rafId = requestAnimationFrame(tick);
+  }
+
+  private stopRaf(): void {
+    if (this.rafId !== null) {
+      cancelAnimationFrame(this.rafId);
+      this.rafId = null;
+    }
+  }
 }