Prompt file imported from HiRekruit-AI-powered-recruitment/HiRekruit (
.windsurf/workflows/interview-component.md). Copyright stays with the author.
InterviewPage Component Workflow
šÆ Optimal Loading Sequence for Seamless User Experience
Phase 1: Initial Setup (0-500ms)
- Component Mount ā Initialize all refs and states
- Route Validation ā Validate interview parameters and user data
- Permission Check ā Check camera/microphone permissions immediately
- Loading UI Display ā Show unified loader with progress indicators
Phase 2: Dependency Initialization (500-2000ms)
- Completion Check (Candidates only) ā Check if interview already completed
- LiveKit Connection ā Initialize video/audio connection
- Video Element Creation ā Create and mount video elements
- Audio Context Setup ā Initialize Web Audio API context
Phase 3: AI Integration (2000-3000ms)
- VAPI Initialization ā Initialize AI voice assistant
- Audio Capture Setup ā Configure VAPI audio capture and LiveKit publishing
- Permission Resolution ā Handle any pending permission requests
- Connection Validation ā Verify all connections are stable
Phase 4: Ready State (3000-3500ms)
- Render Buffer ā Brief pause to ensure all components are fully rendered
- Final Validation ā Verify all dependencies are ready
- Interface Transition ā Hide loader, show complete interview interface
- Auto-Start (Candidates) ā Automatically begin interview when ready
š Detailed Step-by-Step Workflow
Step 1: Component Mount & Validation
// IMMEDIATE (0-100ms)
- Initialize all refs (vapiListeningRef, livekitRoomRef, etc.)
- Set initial states (isConnecting, isLoading, etc.)
- Validate route parameters (driveCandidateId, interviewType)
- Check user data availability
- Display unified loader with "Initializing..." message
Step 2: Permission Check & Request
// EARLY (100-300ms)
- Check camera/microphone permissions
- Request permissions if not granted
- Update permission state
- Show "Requesting camera permissions..." in loader
Step 3: Interview Completion Check (Candidates)
// PARALLEL (200-500ms)
- API call to check interview completion status
- Prevent duplicate interview attempts
- Update completionCheck state
- Show "Checking interview status..." in loader
Step 4: LiveKit Connection Setup
// PARALLEL (300-1000ms)
- Initialize LiveKit room connection
- Set up local video/audio tracks
- Connect to room server
- Update livekitConnected state
- Show "Connecting to video room..." in loader
Step 5: Video Element Creation
// SEQUENTIAL (800-1500ms)
- Create video elements after LiveKit connection
- Attach video tracks to DOM elements
- Verify video element is mounted and ready
- Update videoElement state
- Show "Setting up video..." in loader
Step 6: Audio Context & VAPI Setup
// PARALLEL (1000-2000ms)
- Initialize Web Audio API context
- Set up VAPI client instance
- Configure VAPI event listeners
- Update vapiReady state
- Show "Preparing AI assistant..." in loader
Step 7: Audio Capture Configuration
// SEQUENTIAL (1500-2500ms)
- Wait for video element to be ready
- Configure VAPI audio capture
- Set up LiveKit audio publishing
- Test audio routing
- Update vapiAudio state
- Show "Configuring audio system..." in loader
Step 8: Final Validation & Buffer
// FINAL (2500-3000ms)
- Validate all dependencies are ready
- Ensure all components are fully rendered
- Apply render buffer for stability
- Update isFullyReady state
- Show "Finalizing setup..." in loader
Step 9: Interface Transition
// TRANSITION (3000-3500ms)
- Hide unified loader smoothly
- Show complete interview interface
- All components visible simultaneously
- No partial loading states visible
Step 10: Auto-Start (Candidates)
// READY (3500ms+)
- Automatically start interview for candidates
- Begin AI interaction
- Enable user controls
- Start recording/transcription
š Dependency Flow Diagram
āāāāāāāāāāāāāāāāāāā
ā Component ā
ā Mount ā
āāāāāāāāāāā¬āāāāāāāā
ā
āāāāāāāāāāā¼āāāāāāāā
ā Permission ā
ā Check ā
āāāāāāāāāāā¬āāāāāāāā
ā
āāāāāāā¼āāāāāā
ā Completion ā (Candidates Only)
ā Check ā
āāāāāāā¬āāāāāā
ā
āāāāāāā¼āāāāāā
ā LiveKit ā
ā Connection ā
āāāāāāā¬āāāāāā
ā
āāāāāāā¼āāāāāā
ā Video ā
ā Element ā
āāāāāāā¬āāāāāā
ā
āāāāāāā¼āāāāāā
ā VAPI ā
ā Setup ā
āāāāāāā¬āāāāāā
ā
āāāāāāā¼āāāāāā
ā Audio ā
ā Capture ā
āāāāāāā¬āāāāāā
ā
āāāāāāā¼āāāāāā
ā Ready ā
ā State ā
āāāāāāā¬āāāāāā
ā
āāāāāāā¼āāāāāā
ā Interface ā
ā Show ā
āāāāāāāāāāāāā
šØ User Experience Flow
Loading Experience:
- 0-1s: "Initializing interview..."
- 1-2s: "Setting up video connection..."
- 2-3s: "Preparing AI assistant..."
- 3-3.5s: "Finalizing setup..."
- 3.5s+: Complete interface appears instantly
Key UX Principles:
- No Partial Loading: User never sees incomplete interface
- Progressive Feedback: Clear messages for each stage
- Fast Perception: Perceived loading time through progress indicators
- Error Handling: Graceful fallbacks for each dependency
- Smooth Transitions: No jarring UI changes
ā” Performance Optimizations
Parallel Operations:
- Permission check + Completion check (candidates)
- LiveKit connection + Audio context setup
- VAPI setup + Video element creation
Sequential Dependencies:
- Video element must wait for LiveKit connection
- Audio capture must wait for video element
- Interface show must wait for all dependencies
Buffer Zones:
- 500ms render buffer before showing interface
- 1s delay before auto-starting interview
- Graceful timeout handling for each stage
š§ Technical Implementation
Dependency States to Track:
const dependencyStates = {
completionCheck: false, // Interview completion check done
livekit: false, // LiveKit connected and loaded
vapi: false, // VAPI initialized and ready
permissions: false, // Camera/microphone permissions resolved
connection: false, // LiveKit connection established
videoElement: false, // Video element mounted and ready
audioContext: false, // Web Audio API context ready
vapiAudio: false, // VAPI audio capture configured
};
Readiness Conditions:
HR Mode:
isReady =
dependencyStates.livekit &&
dependencyStates.connection &&
dependencyStates.videoElement;
Candidate Mode:
isReady =
dependencyStates.completionCheck &&
dependencyStates.livekit &&
dependencyStates.vapi &&
dependencyStates.permissions &&
dependencyStates.videoElement &&
dependencyStates.vapiAudio;
šØ Error Handling & Fallbacks
Permission Errors:
- Show clear permission request UI
- Provide instructions for enabling permissions
- Allow retry mechanism
Connection Errors:
- Show connection status in loader
- Provide retry buttons for failed connections
- Fallback to audio-only if video fails
VAPI Errors:
- Graceful degradation if AI fails to initialize
- Manual interview start option
- Clear error messaging
Timeout Handling:
- 30-second timeout for each major step
- Automatic retry for transient failures
- User notification for persistent issues
š Success Metrics
Loading Performance:
- Target: Complete loading in < 4 seconds
- Metric: Time from mount to ready state
- Goal: 95% of users complete loading successfully
User Experience:
- Target: Zero partial loading states visible
- Metric: User satisfaction scores
- Goal: Smooth, professional interview experience
Error Rate:
- Target: < 5% loading failures
- Metric: Failed initialization rate
- Goal: Robust fallback mechanisms
This workflow ensures a seamless, professional user experience where all components load together and the interface appears complete and ready to use.
