@voxket-ai/voxket-live
Version:
A React widget for embedding Voxket-powered audio/video/chat experiences.
246 lines (245 loc) • 9.97 kB
TypeScript
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;
}