@testgorilla/tgo-ai-interview-test 0.0.1

package/src/lib/components/interview-stream/interview-stream.component.ts

@@ -0,0 +1,321 @@
+import {
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  inject,
+  Input,
+  OnDestroy,
+  OnInit,
+  Output,
+  signal,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import DailyIframe, {
+  DailyCall,
+  DailyEventObjectParticipant,
+  DailyParticipant,
+  DailyEventObjectFatalError,
+  DailyEventObjectParticipants,
+  DailyEventObjectNoPayload,
+  DailyEventObjectParticipantLeft,
+  DailyEventObjectTrack,
+  DailyEventObjectAppMessage,
+} from '@daily-co/daily-js';
+import { SelectedMediaDevices } from '@testgorilla/tgo-test-shared';
+import { InterviewVideoComponent } from '../interview-video/interview-video.component';
+
+export type Participant = {
+  videoTrack?: MediaStreamTrack | undefined;
+  audioTrack?: MediaStreamTrack | undefined;
+  videoReady: boolean;
+  audioReady: boolean;
+  userName: string;
+  local: boolean;
+  sessionId: string;
+};
+
+const PLAYABLE_STATE = 'playable';
+const LOADING_STATE = 'loading';
+
+interface EventData {
+  event_type: string;
+  properties: {
+    name: string;
+    arguments: string;
+  };
+}
+
+@Component({
+  selector: 'tgo-interview-stream',
+  templateUrl: './interview-stream.component.html',
+  styleUrls: ['./interview-stream.component.scss'],
+  standalone: true,
+  imports: [CommonModule, InterviewVideoComponent],
+})
+export class InterviewStreamComponent implements OnInit, OnDestroy {
+  @Input() conversationUrl: string | undefined;
+  @Input() selectedMediaDevices: SelectedMediaDevices | undefined;
+  @Input() translations: { [key: string]: string } = {};
+  @Output() streamStart: EventEmitter<null> = new EventEmitter();
+  @Output() streamEnd: EventEmitter<null> = new EventEmitter();
+  @Output() checkMediaPermissions: EventEmitter<null> = new EventEmitter();
+
+  callObject: DailyCall | undefined;
+  avatarParticipant: Participant | undefined;
+  candidateJoined = signal(false);
+  private cdr = inject(ChangeDetectorRef);
+
+  ngOnInit(): void {
+    void this.setupCall();
+  }
+
+  ngOnDestroy(): void {
+    if (!this.callObject) return;
+    this.leaveCall();
+    this.callObject
+      .off('joined-meeting', this.candidateJoinMeeting)
+      .off('participant-joined', this.participantJoined)
+      .off('app-message', this.handleNewMessage)
+      .off('track-started', this.handleTrackStartedStopped)
+      .off('track-stopped', this.handleTrackStartedStopped)
+      .off('participant-left', this.handleParticipantLeft)
+      .off('left-meeting', this.handleLeftMeeting)
+      .off('error', this.handleError);
+  }
+
+  private async setupCall() {
+    this.callObject = DailyIframe.getCallInstance();
+    if (!this.callObject) {
+      this.callObject = DailyIframe.createCallObject();
+    }
+    if (this.selectedMediaDevices) {
+      await this.callObject.setInputDevicesAsync({
+        videoDeviceId: this.selectedMediaDevices.videoDeviceId,
+        audioDeviceId: this.selectedMediaDevices.audioDeviceId,
+      });
+    }
+    this.callObject.startRecording({
+      type: 'cloud',
+    });
+
+    this.callObject
+      .on('joined-meeting', this.candidateJoinMeeting)
+      .on('participant-joined', this.participantJoined)
+      .on('app-message', this.handleNewMessage)
+      .on('track-started', this.handleTrackStartedStopped)
+      .on('track-stopped', this.handleTrackStartedStopped)
+      .on('participant-left', this.handleParticipantLeft)
+      .on('left-meeting', this.handleLeftMeeting)
+      .on('error', this.handleError);
+
+    await this.callObject.join({
+      userName: 'Candidate',
+      url: this.conversationUrl,
+    });
+  }
+
+  formatParticipantObj(participant: DailyParticipant): Participant {
+    const { video, audio } = participant.tracks;
+
+    const videoTrack = video?.persistentTrack;
+    const audioTrack = audio?.persistentTrack;
+    return {
+      videoTrack: videoTrack,
+      audioTrack: audioTrack,
+      videoReady: !!(
+        videoTrack &&
+        (video.state === PLAYABLE_STATE || video.state === LOADING_STATE)
+      ),
+      audioReady: !!(
+        audioTrack &&
+        (audio.state === PLAYABLE_STATE || audio.state === LOADING_STATE)
+      ),
+      userName: participant.user_name,
+      local: participant.local,
+      sessionId: participant.session_id,
+    };
+  }
+
+  updateTrack(participant: DailyParticipant, newTrackType: string): void {
+    if (
+      !this.avatarParticipant ||
+      this.avatarParticipant.sessionId !== participant.session_id
+    ) {
+      return;
+    }
+    const existingParticipant = this.avatarParticipant as Participant;
+    const currentParticipantCopy = this.formatParticipantObj(participant);
+
+    if (newTrackType === 'video') {
+      if (
+        existingParticipant.videoReady !== currentParticipantCopy.videoReady
+      ) {
+        existingParticipant.videoReady = currentParticipantCopy.videoReady;
+      }
+
+      if (
+        currentParticipantCopy.videoReady &&
+        existingParticipant.videoTrack?.id !==
+          currentParticipantCopy.videoTrack?.id
+      ) {
+        existingParticipant.videoTrack = currentParticipantCopy.videoTrack;
+      }
+      return;
+    }
+
+    if (newTrackType === 'audio') {
+      if (
+        existingParticipant.audioReady !== currentParticipantCopy.audioReady
+      ) {
+        existingParticipant.audioReady = currentParticipantCopy.audioReady;
+      }
+
+      if (
+        currentParticipantCopy.audioReady &&
+        existingParticipant.audioTrack?.id !==
+          currentParticipantCopy.audioTrack?.id
+      ) {
+        existingParticipant.audioTrack = currentParticipantCopy.audioTrack;
+      }
+    }
+  }
+
+  private candidateJoinMeeting = (
+    event: DailyEventObjectParticipants | undefined
+  ): void => {
+    if (!event || !this.callObject) return;
+    this.candidateJoined.set(true);
+    this.streamStart.emit();
+  };
+
+  private participantJoined = (
+    event: DailyEventObjectParticipant | undefined
+  ) => {
+    if (!event) return;
+    this.avatarParticipant = this.formatParticipantObj(event.participant);
+  };
+
+  private handleTrackStartedStopped = (
+    event: DailyEventObjectTrack | undefined
+  ): void => {
+    if (!event || !event.participant || !this.candidateJoined()) return;
+    if (event.action === 'track-stopped') {
+      this.checkMediaPermissions.emit();
+    }
+    this.updateTrack(event.participant, event.type);
+    this.cdr.detectChanges();
+  };
+
+  private handleParticipantLeft = (
+    event: DailyEventObjectParticipantLeft | undefined
+  ): void => {
+    if (!event) return;
+    this.leaveCall();
+  };
+
+  private handleError = (
+    event: DailyEventObjectFatalError | undefined
+  ): void => {
+    if (!event) return;
+    console.error('Interview stream error', event);
+    this.leaveCall();
+  };
+
+  private handleLeftMeeting = (
+    event: DailyEventObjectNoPayload | undefined
+  ): void => {
+    this.callObject?.stopRecording();
+    if (!event || !this.callObject) return;
+    this.candidateJoined.set(false);
+    this.callObject.destroy();
+    this.streamEnd.emit();
+  };
+
+  private leaveCall(): void {
+    if (!this.callObject) return;
+    this.callObject.leave();
+  }
+
+  private handleNewMessage = (
+    event: DailyEventObjectAppMessage<EventData> | undefined
+  ): void => {
+    if (!event) return;
+    if (event.data.event_type === 'conversation.tool_call') {
+      this.handleToolCall(event.data.properties);
+    }
+  };
+
+  private getConversationId(): string | undefined {
+    return this.conversationUrl?.replace('https://tavus.daily.co/', '');
+  }
+
+  /*
+    This is a test implementation of tool calling.
+    These events will only be triggered if configured with a Tavus persona. The message content will be further refined by the IP Team.
+    https://docs.tavus.io/sections/event-schemas/conversation-toolcall
+  */
+  private handleToolCall = (properties: {
+    name: string;
+    arguments: string;
+  }): void => {
+    switch (properties.name) {
+      case 'next_question':
+        try {
+          const args = JSON.parse(properties.arguments);
+          if (args?.questionsLeft > 0) {
+            this.sendMessage(this.getToolCallTranslation('NEXT_QUESTION'));
+            window.setTimeout(() => {
+              this.sendMessage('Read next question', 'respond');
+            }, 1000);
+          } else {
+            throw new Error('No more questions left');
+          }
+        } catch (err) {
+          console.error(
+            'Failed to parse arguments for next_question tool call',
+            err
+          );
+
+          this.sendMessage(this.getToolCallTranslation('ALL_FOR_TODAY'));
+          window.setTimeout(() => {
+            this.leaveCall();
+          }, 5000);
+        }
+        break;
+      case 'end_conversation':
+        window.setTimeout(() => {
+          this.leaveCall();
+        }, 5000);
+        break;
+      default:
+        console.warn('Unknown tool call code:', properties);
+        break;
+    }
+  };
+
+  /*
+    Echo message is a message that avatar reads and candidate can hear
+    Respond message is a message that avatar reads and candidate cannot hear
+  */
+
+  private sendMessage(text: string, type: 'echo' | 'respond' = 'echo'): void {
+    if (!this.callObject) return;
+
+    this.callObject.sendAppMessage({
+      message_type: 'conversation',
+      event_type: 'conversation.' + type,
+      conversation_id: this.getConversationId(),
+      properties: {
+        text,
+      },
+    });
+  }
+
+  private getToolCallTranslation(key: string) {
+    const toolCallTranslations = this.translations['TOOL_CALL'] as unknown as {
+      [key: string]: string;
+    };
+    return toolCallTranslations[key];
+  }
+}
+

package/src/lib/components/interview-video/interview-video.component.html

@@ -0,0 +1,8 @@
+@if (videoStream) {
+<video autoPlay muted playsInline [srcObject]="videoStream"></video>
+} @if (audioStream) {
+<audio autoPlay playsInline [srcObject]="audioStream">
+  <track kind="captions" />
+</audio>
+}
+

package/src/lib/components/interview-video/interview-video.component.scss

@@ -0,0 +1,7 @@
+:host {
+  video {
+    width: 100%;
+    height: 100%;
+  }
+}
+

package/src/lib/components/interview-video/interview-video.component.spec.ts

@@ -0,0 +1,140 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { InterviewVideoComponent } from './interview-video.component';
+
+class MediaStreamTrackMock {
+  kind: string;
+  enabled: boolean;
+  id: string;
+
+  constructor(kind = 'video') {
+    this.kind = kind;
+    this.enabled = true;
+    this.id = `${kind}-track-${Math.random().toString(36).substring(2, 15)}`;
+  }
+}
+
+describe('InterviewVideoComponent', () => {
+  let component: InterviewVideoComponent;
+  let fixture: ComponentFixture<InterviewVideoComponent>;
+  beforeEach(async () => {
+    class MediaStreamMock {
+      tracks: MediaStreamTrack[] = [];
+      constructor(initialTracks: MediaStreamTrack[]) {
+        this.tracks = [...initialTracks];
+      }
+
+      addTrack(track: MediaStreamTrack) {
+        this.tracks.push(track);
+      }
+
+      removeTrack(track: MediaStreamTrack) {
+        const index = this.tracks.findIndex((t) => t.id === track.id);
+        if (index !== -1) {
+          this.tracks.splice(index, 1);
+        }
+      }
+      getVideoTracks() {
+        return this.tracks.filter((t) => t.kind === 'video');
+      }
+      getAudioTracks() {
+        return this.tracks.filter((t) => t.kind === 'audio');
+      }
+    }
+
+    Object.defineProperty(global, 'MediaStream', {
+      writable: true,
+      value: jest
+        .fn()
+        .mockImplementation((tracks) => new MediaStreamMock(tracks)),
+    });
+
+    await TestBed.configureTestingModule({
+      imports: [InterviewVideoComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(InterviewVideoComponent);
+    component = fixture.componentInstance;
+  });
+
+  afterEach(() => {
+    fixture.destroy();
+    jest.clearAllMocks();
+  });
+
+  describe('when component is initialized with videoTrack and audioTrack', () => {
+    const testVideoTrack = new MediaStreamTrackMock(
+      'video'
+    ) as MediaStreamTrack;
+    const testAudioTrack = new MediaStreamTrackMock(
+      'audio'
+    ) as MediaStreamTrack;
+    beforeEach(() => {
+      component.videoTrack = testVideoTrack;
+      component.audioTrack = testAudioTrack;
+      component.ngOnInit();
+      fixture.detectChanges();
+    });
+
+    it('should initialize videoStream and audioStream', () => {
+      expect(component.videoStream).toBeDefined();
+      expect(component.audioStream).toBeDefined();
+    });
+
+    it('should add video track to videoStream', () => {
+      expect(component.videoStream?.getVideoTracks().length).toBe(1);
+      expect(component.videoStream?.getVideoTracks()[0].id).toBe(
+        testVideoTrack.id
+      );
+    });
+
+    it('should add audio track to audioStream', () => {
+      expect(component.audioStream?.getAudioTracks().length).toBe(1);
+      expect(component.audioStream?.getAudioTracks()[0].id).toBe(
+        testAudioTrack.id
+      );
+    });
+
+    describe('when track changes', () => {
+      const changedVideoTrack = new MediaStreamTrackMock(
+        'video'
+      ) as MediaStreamTrack;
+      const changedAudioTrack = new MediaStreamTrackMock(
+        'audio'
+      ) as MediaStreamTrack;
+      beforeEach(() => {
+        component.ngOnChanges({
+          videoTrack: {
+            currentValue: changedVideoTrack,
+            previousValue: testVideoTrack,
+            isFirstChange: () => false,
+            firstChange: false,
+          },
+          audioTrack: {
+            currentValue: changedAudioTrack,
+            previousValue: testAudioTrack,
+            isFirstChange: () => false,
+            firstChange: false,
+          },
+        });
+        fixture.detectChanges();
+      });
+
+      it('should update videoStream with new video track', () => {
+        expect(component.videoStream?.getVideoTracks().length).toBe(1);
+        expect(component.videoStream?.getVideoTracks()[0].id).toBe(
+          changedVideoTrack.id
+        );
+      });
+
+      it('should update audioStream with new audio track', () => {
+        expect(component.audioStream?.getAudioTracks().length).toBe(1);
+        expect(component.audioStream?.getAudioTracks()[0].id).toBe(
+          changedAudioTrack.id
+        );
+      });
+    });
+  });
+});
+

package/src/lib/components/interview-video/interview-video.component.ts

@@ -0,0 +1,68 @@
+import { Component, Input, OnInit, SimpleChanges, OnChanges } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'tgo-interview-video',
+  templateUrl: './interview-video.component.html',
+  styleUrls: ['./interview-video.component.scss'],
+  standalone: true,
+  imports: [CommonModule],
+})
+export class InterviewVideoComponent implements OnInit, OnChanges {
+  @Input() videoTrack: MediaStreamTrack | undefined;
+  @Input() audioTrack: MediaStreamTrack | undefined;
+  videoStream: MediaStream | undefined;
+  audioStream: MediaStream | undefined;
+
+  ngOnInit(): void {
+    if (this.videoTrack) {
+      this.addVideoStream(this.videoTrack);
+    }
+    if (this.audioTrack) {
+      this.addAudioStream(this.audioTrack);
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    const { videoTrack, audioTrack } = changes;
+
+    if (videoTrack?.currentValue && !this.videoStream) {
+      this.addVideoStream(videoTrack.currentValue);
+    }
+
+    if (audioTrack?.currentValue && !this.audioStream) {
+      this.addAudioStream(audioTrack.currentValue);
+    }
+
+    if (videoTrack?.currentValue && this.videoStream) {
+      this.updateVideoTrack(videoTrack.previousValue, videoTrack.currentValue);
+    }
+
+    if (audioTrack?.currentValue && this.audioStream) {
+      this.updateAudioTrack(audioTrack.previousValue, audioTrack.currentValue);
+    }
+  }
+
+  addVideoStream(track: MediaStreamTrack) {
+    this.videoStream = new MediaStream([track]);
+  }
+
+  addAudioStream(track: MediaStreamTrack) {
+    this.audioStream = new MediaStream([track]);
+  }
+
+  updateVideoTrack(oldTrack: MediaStreamTrack, track: MediaStreamTrack) {
+    if (oldTrack) {
+      this.videoStream?.removeTrack(oldTrack);
+    }
+    this.videoStream?.addTrack(track);
+  }
+
+  updateAudioTrack(oldTrack: MediaStreamTrack, track: MediaStreamTrack) {
+    if (oldTrack) {
+      this.audioStream?.removeTrack(oldTrack);
+    }
+    this.audioStream?.addTrack(track);
+  }
+}
+

package/src/lib/models/index.ts

@@ -0,0 +1,13 @@
+// Re-export shared models
+export {
+  Question,
+  TestResultRead,
+  SelectedMediaDevices,
+  ISubmissionState,
+  ROOT_TRANSLATIONS_SCOPE,
+} from '@testgorilla/tgo-test-shared';
+
+// Export library-specific extensions
+export * from './question-component';
+export * from './translations';
+

package/src/lib/models/question-component.ts

@@ -0,0 +1,13 @@
+import { IQuestionDataContract as BaseIQuestionDataContract } from '@testgorilla/tgo-test-shared';
+
+// Extend the base interface to add conversationUrl for AI Interview
+export interface IQuestionDataContract extends BaseIQuestionDataContract {
+  conversationUrl?: string;
+}
+
+// Re-export shared interfaces for convenience
+export {
+  SelectedMediaDevices,
+  ISubmissionState,
+} from '@testgorilla/tgo-test-shared';
+

package/src/lib/models/translations.ts

@@ -0,0 +1,3 @@
+// Re-export from shared
+export { ROOT_TRANSLATIONS_SCOPE } from '@testgorilla/tgo-test-shared';
+

package/src/test-setup.ts

@@ -0,0 +1,28 @@
+import 'jest-preset-angular/setup-jest';
+
+// Mock HTMLMediaElement.play() for jsdom
+Object.defineProperty(HTMLMediaElement.prototype, 'play', {
+  writable: true,
+  value: jest.fn().mockResolvedValue(undefined),
+});
+
+// Mock @daily-co/daily-js
+jest.mock('@daily-co/daily-js', () => {
+  return {
+    default: jest.fn().mockImplementation(() => ({
+      createCallObject: jest.fn().mockReturnValue({
+        join: jest.fn(),
+        leave: jest.fn(),
+        destroy: jest.fn(),
+        setInputDevicesAsync: jest.fn(),
+        startRecording: jest.fn(),
+        stopRecording: jest.fn(),
+        sendAppMessage: jest.fn(),
+        on: jest.fn(),
+        off: jest.fn(),
+      }),
+      getCallInstance: jest.fn(),
+    })),
+  };
+});
+

package/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "es2022"
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../tsconfig.base.json"
+}
+

package/tsconfig.lib.json

@@ -0,0 +1,15 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": [
+      "node",
+    ]
+  },
+  "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"],
+  "include": ["src/**/*.ts"]
+}
+

package/tsconfig.lib.prod.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}
+

package/tsconfig.spec.json

@@ -0,0 +1,13 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "target": "es2016",
+    "types": ["jest", "node"]
+  },
+  "files": ["src/test-setup.ts"],
+  "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"],
+  "exclude": ["src/lib/models/test.ts"]
+}
+