@voxket-ai/voxket-live/dist/core/ui-renderer.d.ts

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

import { default as React } from 'react';
import { DisplayType, PopupPosition, ConsentScreenData } from '../components/widget';
import { AudioOrbUI } from '../components/voxket/AudioOrb';
import { WidgetTheme } from '../styles';
import { ModalityValue, VoxketConfig } from '../types/core';
export interface RenderUIOptions {
    target?: string | HTMLElement;
    modality?: ModalityValue[];
    theme?: WidgetTheme | 'dark' | 'light' | 'vox';
    component?: 'widget' | 'session' | 'chat-only' | 'voice-only';
    className?: string;
    style?: React.CSSProperties;
    autoStart?: boolean;
    agentId?: string;
    sessionId?: string;
    popupBgColor?: string;
    participantName?: string;
    displayType?: DisplayType;
    showToolExecMessage?: boolean;
    popupTriggerBgColor?: string;
    popupPosition?: PopupPosition;
    popupTriggerText?: string;
    popupModalityMode?: 'all' | 'voice' | 'chat' | 'video';
    popupTriggerLogoUrl?: string;
    headerLogo?: string;
    width?: string;
    height?: string;
    onDisplayTypeChange?: (displayType: DisplayType) => void;
    prompts?: string[];
    statusMessage?: string;
    welcomeTitle?: string;
    welcomeSubTitle?: string;
    loadingText?: string;
    participantMetadata?: Record<string, any>;
    useShadowDOM?: boolean;
    orgLogoWidth?: number;
    orgLogoHeight?: number;
    showOrgLogo?: boolean;
    /** Custom colors for the AudioOrb visualizer. */
    audioOrbUI?: AudioOrbUI;
    /** Custom content for the consent screen shown before a session starts. */
    consentScreen?: ConsentScreenData;
    /** When false, the consent screen is skipped and the session starts directly. Defaults to true. */
    showConsent?: boolean;
    /** Quick action buttons shown after the first agent message in chat. */
    quickActions?: Array<{
        label: string;
        message: string;
    }>;
    /** Custom inline styles applied to each quick action button, allowing client-side CSS overrides. */
    quickActionButtonStyle?: React.CSSProperties;
    /** When true, an Agent Assist toggle is shown in the widget header. */
    agentAssistEnabled?: boolean;
}
/**
 * UIRenderer
 *
 * Manages all UI rendering functionality including:
 * - React component rendering
 * - DOM management
 * - React root lifecycle
 * - Target element resolution
 * - Component cleanup
 */
export declare class UIRenderer {
    private renderedComponents;
    private config;
    private voxketClient;
    private useShadowDOM;
    constructor(config: VoxketConfig, voxketClient: any);
    /**
     * Set whether to use Shadow DOM for rendering (style isolation)
     */
    setUseShadowDOM(useShadow: boolean): void;
    /**
     * Get current Shadow DOM setting
     */
    getUseShadowDOM(): boolean;
    /**
     * Inject CSS into host document head (only when Shadow DOM is disabled)
     * This ensures Tailwind classes work when not using Shadow DOM isolation
     */
    private injectCSSToHost;
    /**
     * Render UI component
     */
    renderUI(options?: RenderUIOptions): void;
    /**
     * Remove UI component from a specific target
     */
    removeUI(target?: string | HTMLElement): void;
    /**
     * Remove all UI components
     */
    removeAllUI(): void;
    /**
     * Force cleanup of fullscreen overlays
     */
    private forceCleanupFullscreenOverlays;
    /**
     * Resolve target element from string selector or HTMLElement
     */
    private resolveTarget;
    /**
     * Get a stable key for a target element
     */
    private getTargetKey;
    /**
     * Build widget props from render options
     */
    private buildWidgetProps;
    /**
     * Update configuration
     */
    updateConfig(config: VoxketConfig): void;
}