@dragon0/layercode-react-sdk/dist/index.js

Layercode React SDK for integrating with React applications (Dragon0 Fork with getFrequencies exposure)

import { useState, useRef, useEffect, useCallback } from 'react';
import LayercodeClient from '@dragon0/layercode-js-sdk';

/**
 * Hook for connecting to a Layercode pipeline in a React application
 *
 * @param options - Configuration options for the pipeline
 * @returns An object containing methods and state for interacting with the pipeline
 */
const useLayercodePipeline = (
// Accept the public options plus any other properties (for internal use)
options) => {
    // Extract public options
    const { pipelineId, sessionId, authorizeSessionEndpoint, metadata = {}, onConnect, onDisconnect, onError, onDataMessage } = options;
    const [status, setStatus] = useState('initializing');
    const [userAudioAmplitude, setUserAudioAmplitude] = useState(0);
    const [agentAudioAmplitude, setAgentAudioAmplitude] = useState(0);
    // Reference to the LayercodeClient instance
    const clientRef = useRef(null);
    // Initialize the client on component mount
    useEffect(() => {
        // Create a new LayercodeClient instance
        console.log('Creating LayercodeClient instance');
        clientRef.current = new LayercodeClient({
            pipelineId,
            sessionId,
            authorizeSessionEndpoint,
            metadata,
            onConnect: ({ sessionId }) => {
                onConnect?.({ sessionId });
            },
            onDisconnect: () => {
                onDisconnect?.();
            },
            onError: (error) => {
                onError?.(error);
            },
            onDataMessage: (data) => {
                onDataMessage?.(data);
            },
            onStatusChange: (newStatus) => {
                setStatus(newStatus);
            },
            onUserAmplitudeChange: (amplitude) => {
                setUserAudioAmplitude(amplitude);
            },
            onAgentAmplitudeChange: (amplitude) => {
                setAgentAudioAmplitude(amplitude);
            },
        });
        // Pass the override websocket URL if provided. Use for local development.
        if (options['_websocketUrl']) {
            clientRef.current._websocketUrl = options['_websocketUrl'];
        }
        // Connect to the pipeline
        clientRef.current.connect().catch((error) => {
            console.error('Failed to connect to pipeline:', error);
            onError?.(error);
        });
        // Cleanup function to disconnect when component unmounts
        return () => {
            if (clientRef.current) {
                clientRef.current.disconnect();
            }
        };
        // Add the internal override URL to the dependency array
    }, [pipelineId, sessionId, authorizeSessionEndpoint]); // Make sure metadata isn't causing unnecessary re-renders if it changes often
    // Class methods
    // TODO: Mic mute
    // const setMuteMic = useCallback((mute: boolean) => {
    //   // clientRef.current?.setMuteMic(mute);
    // }, []);
    const triggerUserTurnStarted = useCallback(() => {
        clientRef.current?.triggerUserTurnStarted();
    }, []);
    const triggerUserTurnFinished = useCallback(() => {
        clientRef.current?.triggerUserTurnFinished();
    }, []);
    const connect = useCallback(() => {
        clientRef.current?.connect();
    }, []);
    const disconnect = useCallback(() => {
        clientRef.current?.disconnect();
    }, []);
    // Return methods and state
    return {
        // Methods
        triggerUserTurnStarted,
        triggerUserTurnFinished,
        connect,
        disconnect,
        // State
        status,
        userAudioAmplitude,
        agentAudioAmplitude,
    };
};

export { useLayercodePipeline };
//# sourceMappingURL=index.js.map