UNPKG

@voxket-ai/voxket-live

Version:

A React widget for embedding Voxket-powered audio/video/chat experiences.

246 lines (245 loc) 9.97 kB
import { default as React } from 'react'; import { Room, RemoteParticipant, LocalParticipant, ConnectionState, Track } from 'livekit-client'; import { VoxketEventEmitter } from './event-emitter'; import { PluginManager } from '../plugins/plugin-system'; import { VoxketConfig, SessionConfig, VoxketSession, VoxketEvents, SessionState, SessionMetrics, AgentInfo, ParticipantInfo, ChatMessage, TranscriptionSegment, SessionModality } from '../types/core'; import { VoxketInteractiveView, ViewPresentationMode, InteractiveUIState, RpcEvents } from '../types/rpc'; import { WidgetTheme } from '../styles'; import { DisplayType, PopupPosition } from '../components/widget'; export interface RenderUIOptions { target?: string | HTMLElement; modality?: SessionModality[]; theme?: WidgetTheme | 'dark' | 'light' | 'vox'; component?: 'widget' | 'session' | 'chat-only' | 'voice-only'; className?: string; style?: React.CSSProperties; autoStart?: boolean; agentId?: string; participantName?: string; displayType?: DisplayType; popupPosition?: PopupPosition; popupTriggerText?: string; width?: string; height?: string; /** * Callback function to handle display type changes (e.g., when user clicks expand button). * Required for expand/fullscreen functionality to work properly. * @param displayType - The new display type ('widget', 'fullscreen', 'popup') * @example * onDisplayTypeChange: (newDisplayType) => { * console.log('Display type changed to:', newDisplayType); * // Handle the display type change in your app * } */ onDisplayTypeChange?: (displayType: DisplayType) => void; prompts?: string[]; statusMessage?: string; welcomeTitle?: string; welcomeSubTitle?: string; loadingText?: string; } export interface VoxketClientConfig extends VoxketConfig { agentId?: string; participantName?: string; modalities?: SessionModality[]; onConnected?: () => void; onDisconnected?: (reason?: string) => void; onError?: (error: Error) => void; onMessageReceived?: (message: ChatMessage) => void; onTranscriptionReceived?: (transcription: TranscriptionSegment) => void; onSessionStateChanged?: (state: SessionState) => void; onSessionStart?: (sessionId: string) => void; onSessionEnd?: (metrics: any) => void; onUserJoined?: (userId: string) => void; onUserLeft?: (userId: string) => void; } export declare class VoxketClient extends VoxketEventEmitter<VoxketEvents & RpcEvents> { private config; private room; private pluginManager; private rpcManager; private isConnected; private currentSession; private connectionState; private renderedComponents; private textStreamHandlersRegistered; private currentAgentInfo; private chatMessages; private isAgentConnected; private agentState; constructor(config: VoxketClientConfig); private setupEventListeners; private setupRpcEventForwarding; private initializeClient; private setupRoomEventListeners; private setupTextStreamHandlers; fetchConnectionDetails(agentId?: string, participantName?: string, modalities?: SessionModality[]): Promise<{ serverUrl: string; participantToken: string; voxketSessionId: string; agentInfo?: AgentInfo; }>; connect(agentId?: string, participantName?: string, modalities?: SessionModality[]): Promise<{ serverUrl: string; participantToken: string; voxketSessionId: string; agentInfo?: AgentInfo; }>; disconnect(): Promise<void>; createSession(config: SessionConfig): Promise<VoxketSession>; startSession(agentId?: string, options?: { participantName?: string; modalities?: SessionModality[]; metadata?: Record<string, any>; }): Promise<VoxketSession>; endSession(): Promise<SessionMetrics | null>; getCurrentSession(): VoxketSession | null; getCurrentAgentInfo(): AgentInfo | null; getIsAgentConnected(): boolean; /** * Force mark agent as connected - useful when agent should be visible * even without receiving agent_state_changed events */ forceAgentConnected(): void; getAgentState(): 'idle' | 'thinking' | 'speaking'; private setAgentState; /** * Get agent tracks from remote participants */ getAgentAudioTrack(): { source: Track.Source; participant: RemoteParticipant; publication: import('livekit-client').RemoteTrackPublication; } | null; getAgentVideoTrack(): { source: Track.Source; participant: RemoteParticipant; publication: import('livekit-client').RemoteTrackPublication; } | null; /** * Get all video track references (camera and screen share) from all participants */ getVideoTrackRefs(): Array<{ source: Track.Source; participant: any; publication: any; }>; /** * Get camera track references only */ getCameraTrackRefs(): Array<{ source: Track.Source; participant: any; publication: any; }>; /** * Get screen share track references only */ getScreenShareTrackRefs(): Array<{ source: Track.Source; participant: any; publication: any; }>; getChatMessages(): ChatMessage[]; addChatMessage(message: ChatMessage): void; updateChatMessage(updatedMessage: ChatMessage): void; clearChatMessages(): void; renderUI(options?: RenderUIOptions): void; removeUI(target?: string | HTMLElement): void; removeAllUI(): void; private forceCleanupFullscreenOverlays; private resolveTarget; private getTargetKey; sendMessage(message: string, metadata?: Record<string, any>): Promise<void>; sendChatMessage(message: string, metadata?: Record<string, any>): Promise<void>; sendAttachments(files: File[], metadata?: Record<string, any>): Promise<void>; sendAttachment(file: File, metadata?: Record<string, any>): Promise<void>; toggleMicrophone(enabled?: boolean): Promise<void>; setMicrophoneEnabled(enabled: boolean): Promise<void>; toggleCamera(enabled?: boolean): Promise<void>; setCameraEnabled(enabled: boolean): Promise<void>; enableCamera(): Promise<void>; disableCamera(): Promise<void>; startScreenShare(): Promise<void>; stopScreenShare(): Promise<void>; getAudioInputDevices(): Promise<MediaDeviceInfo[]>; getVideoInputDevices(): Promise<MediaDeviceInfo[]>; setAudioInputDevice(deviceId: string): Promise<void>; setVideoInputDevice(deviceId: string): Promise<void>; getLocalParticipant(): LocalParticipant | null; getRemoteParticipants(): RemoteParticipant[]; getPublishPermissions(): { camera: boolean; microphone: boolean; screenShare: boolean; data: boolean; }; canPublishSource(source: 'camera' | 'microphone' | 'screenShare'): boolean; getRoom(): Room | null; getConnectionState(): ConnectionState; get connected(): boolean; getMicrophoneTrack(): import('livekit-client').LocalTrack<Track.Kind> | null | undefined; getCameraTrack(): import('livekit-client').LocalTrack<Track.Kind> | null | undefined; getScreenShareTrack(): import('livekit-client').LocalTrack<Track.Kind> | null | undefined; get isMicrophoneEnabled(): boolean; get isCameraEnabled(): boolean; get isScreenShareEnabled(): boolean; registerPlugin(plugin: any): void; getPluginManager(): PluginManager; getParticipants(): ParticipantInfo[]; getSessionMetrics(): SessionMetrics | null; updateConfig(updates: Partial<VoxketClientConfig>): void; startRecording(): Promise<void>; stopRecording(): Promise<void>; /** * Register a frontend RPC method with a React component * @param methodName The RPC method name to register * @param component React component that implements VoxketInteractiveView * @param presentationMode How the component should be displayed */ registerFrontendRPC(methodName: string, component: VoxketInteractiveView, presentationMode?: ViewPresentationMode): Promise<void>; /** * Get the current interactive RPC component state */ getCurrentInteraction(): InteractiveUIState | null; /** * Dismiss the current interactive component */ dismissCurrentInteraction(): void; /** * Get all registered RPC methods */ getRegisteredRpcMethods(): string[]; /** * Unregister an RPC method */ unregisterRpcMethod(methodName: string): void; /** * Register a custom event listener for VoxketClient events. * This is a business-friendly alias for the inherited `on` method. * @param eventName The event name to listen for (string) * @param callback The callback function to invoke with event data * @returns Unsubscribe function * * Example: * client.registerEventListener('chat.message.received', (msg) => { ... }); */ registerEventListener<K extends keyof (VoxketEvents & RpcEvents)>(eventName: K, callback: (data: any) => void): () => void; /** * Register a custom event emitter for a LiveKit text stream topic. * This allows business/consumer code to listen for custom events sent via text stream. * @param topic The topic name to listen for (string) * @param handler The callback function to invoke with (data, participantInfo) * @returns void * * Example: * client.registerEventEmitter('custom_event', (data) => { ... }); */ registerEventEmitter(topic: string, handler: (data: string) => void): void; /** * Convert markdown text to plain text by removing common markdown formatting * @param markdownText The markdown text to convert * @returns Plain text without markdown formatting */ private convertMarkdownToText; }