@solo3li/client-react 1.0.0 → 1.0.2

package/README.md

@@ -0,0 +1,67 @@
+# @solo3li/client-react
+
+The official React SDK for connecting your web applications to the **Voice AI CPaaS**. This library provides a seamless React Hook (`useOmniAgent`) to handle WebRTC connections, audio routing, and state management for your AI Voice Agents.
+
+## Installation
+
+```bash
+npm install @solo3li/client-react
+```
+*Note: This package requires `react` and `livekit-client` as peer dependencies.*
+
+## Quick Start
+
+The SDK is designed to be extremely simple. All you need is the `token` and `livekitUrl` generated by your backend server using `@solo3li/backend-node`.
+
+```tsx
+import React from 'react';
+import { useOmniAgent } from '@solo3li/client-react';
+
+interface CallScreenProps {
+    token: string;
+    livekitUrl: string;
+}
+
+export const CallScreen: React.FC<CallScreenProps> = ({ token, livekitUrl }) => {
+    // 1. Initialize the AI Agent Hook
+    const { isConnected, isAgentSpeaking, disconnect } = useOmniAgent({
+        token,
+        livekitUrl,
+        onAgentConnected: () => console.log('AI Agent joined the room!'),
+        onAgentDisconnected: () => console.log('AI Agent left the room.'),
+    });
+
+    return (
+        <div style={{ textAlign: 'center', padding: '50px' }}>
+            <h2>Voice AI Assistant</h2>
+            
+            {/* Connection Status */}
+            <p>
+                Status: {isConnected ? '🟢 Connected' : '🔴 Disconnected'}
+            </p>
+
+            {/* Speaking Indicator */}
+            {isConnected && (
+                <div style={{ margin: '20px' }}>
+                    {isAgentSpeaking ? '🗣️ Agent is speaking...' : '👂 Agent is listening...'}
+                </div>
+            )}
+
+            {/* End Call Button */}
+            {isConnected && (
+                <button onClick={disconnect} style={{ color: 'red' }}>
+                    End Call
+                </button>
+            )}
+        </div>
+    );
+};
+```
+
+## Features
+- **Auto Audio Routing:** Automatically attaches remote audio tracks to the DOM so you don't have to manage `<audio>` elements manually.
+- **Active Speaker Detection:** Easily bind UI animations to the `isAgentSpeaking` state.
+- **Microphone Management:** Automatically requests microphone permissions and publishes the local audio track upon connection.
+
+## License
+MIT

package/dist/index.d.ts

@@ -10,3 +10,11 @@ export declare const useOmniAgent: (options: OmniAgentOptions) => {
     isAgentSpeaking: boolean;
     disconnect: () => void;
 };
+export declare const useHumanAgent: (options: {
+    token: string;
+    livekitUrl: string;
+}) => {
+    isConnected: boolean;
+    isCustomerSpeaking: boolean;
+    disconnect: () => void;
+};

package/dist/index.js

@@ -59,3 +59,59 @@ export const useOmniAgent = (options) => {
         disconnect
     };
 };
+export const useHumanAgent = (options) => {
+    const [room, setRoom] = useState(null);
+    const [isConnected, setIsConnected] = useState(false);
+    const [isCustomerSpeaking, setIsCustomerSpeaking] = useState(false);
+    useEffect(() => {
+        if (!options.token || !options.livekitUrl)
+            return;
+        const newRoom = new Room({
+            adaptiveStream: true,
+            dynacast: true,
+        });
+        newRoom.on(RoomEvent.Connected, () => {
+            setIsConnected(true);
+        });
+        newRoom.on(RoomEvent.Disconnected, () => {
+            setIsConnected(false);
+        });
+        newRoom.on(RoomEvent.ActiveSpeakersChanged, (speakers) => {
+            // Anyone who is not the local participant is assumed to be the customer
+            const customerSpeaking = speakers.some(s => s.identity !== newRoom.localParticipant.identity);
+            setIsCustomerSpeaking(customerSpeaking);
+        });
+        newRoom.on(RoomEvent.TrackSubscribed, (track) => {
+            if (track.kind === Track.Kind.Audio) {
+                const element = track.attach();
+                document.body.appendChild(element);
+            }
+        });
+        const connect = async () => {
+            try {
+                await newRoom.connect(options.livekitUrl, options.token);
+                await newRoom.localParticipant.enableCameraAndMicrophone();
+                setRoom(newRoom);
+            }
+            catch (error) {
+                console.error('Failed to connect Human Agent:', error);
+            }
+        };
+        connect();
+        return () => {
+            newRoom.disconnect();
+        };
+    }, [options.token, options.livekitUrl]);
+    const disconnect = () => {
+        if (room) {
+            room.disconnect();
+            setRoom(null);
+            setIsConnected(false);
+        }
+    };
+    return {
+        isConnected,
+        isCustomerSpeaking,
+        disconnect
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solo3li/client-react",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "React hooks and components for Voice AI CPaaS",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",