allow toggling mic on/off and disable amplitude updates when inactive; bump JS SDK dependency

Author: jackbridger

package-lock.json

@@ -39,7 +39,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@layercode/js-sdk": "^2.3.1"
+    "@layercode/js-sdk": "^2.3.2"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^25.0.8",

package.json

@@ -16,6 +16,12 @@ interface UseLayercodeAgentOptions {
   onDataMessage?: (data: any) => void;
   onMuteStateChange?: (isMuted: boolean) => void;
   onMessage?: (data: any) => void;
+  onUserSpeakingChange?: (isSpeaking: boolean) => void;
+  onAgentSpeakingChange?: (isSpeaking: boolean) => void;
+
+  audioInput?: boolean;
+  onAudioInputChanged?: (audioInput: boolean) => void;
+  enableAmplitudeMonitoring?: boolean;
 }
 
 /**
@@ -41,12 +47,19 @@ const useLayercodeAgent = (
     onDataMessage,
     onMessage,
     onMuteStateChange,
+    onUserSpeakingChange,
+    onAgentSpeakingChange,
+    onAudioInputChanged,
   } = options;
   const websocketUrlOverride = options['_websocketUrl'];
+  const enableAmplitudeMonitoring = options.enableAmplitudeMonitoring ?? true;
 
   const [status, setStatus] = useState('initializing');
   const [userAudioAmplitude, setUserAudioAmplitude] = useState(0);
   const [agentAudioAmplitude, setAgentAudioAmplitude] = useState(0);
+  const [userSpeaking, setUserSpeaking] = useState(false);
+  const [agentSpeaking, setAgentSpeaking] = useState(false);
+  const [audioInput, _setAudioInput] = useState<boolean>(options.audioInput ?? true);
   const [isMuted, setIsMuted] = useState(false);
   const [internalConversationId, setInternalConversationId] = useState<string | null | undefined>(conversationId);
   const conversationIdRef = useRef<string | undefined>(conversationId);
@@ -62,6 +75,13 @@ const useLayercodeAgent = (
     }
   }, [conversationId]);
 
+  useEffect(() => {
+    if (!enableAmplitudeMonitoring) {
+      setUserAudioAmplitude(0);
+      setAgentAudioAmplitude(0);
+    }
+  }, [enableAmplitudeMonitoring]);
+
   const createClient = useCallback(
     (initialConversationId: string | null) => {
       console.log('Creating LayercodeClient instance');
@@ -71,6 +91,11 @@ const useLayercodeAgent = (
         authorizeSessionEndpoint,
         authorizeSessionRequest,
         metadata,
+        audioInput,
+        audioInputChanged: (next: boolean) => {
+          _setAudioInput(next);
+          onAudioInputChanged?.(next);
+        },
         onConnect: ({ conversationId, config }: { conversationId: string | null; config?: AgentConfig }) => {
           setInternalConversationId((current) => {
             if (conversationIdRef.current === undefined) {
@@ -95,22 +120,39 @@ const useLayercodeAgent = (
         onStatusChange: (newStatus: string) => {
           setStatus(newStatus);
         },
-        onUserAmplitudeChange: (amplitude: number) => {
-          setUserAudioAmplitude(amplitude);
+        onUserAmplitudeChange: enableAmplitudeMonitoring
+          ? (amplitude: number) => {
+              setUserAudioAmplitude(amplitude);
+            }
+          : undefined,
+        onAgentAmplitudeChange: enableAmplitudeMonitoring
+          ? (amplitude: number) => {
+              setAgentAudioAmplitude(amplitude);
+            }
+          : undefined,
+        onUserIsSpeakingChange: (isSpeaking: boolean) => {
+          setUserSpeaking(isSpeaking);
+          onUserSpeakingChange?.(isSpeaking);
         },
-        onAgentAmplitudeChange: (amplitude: number) => {
-          setAgentAudioAmplitude(amplitude);
+        onAgentSpeakingChange: (isSpeaking: boolean) => {
+          setAgentSpeaking(isSpeaking);
+          onAgentSpeakingChange?.(isSpeaking);
         },
         onMuteStateChange: (muted: boolean) => {
           setIsMuted(muted);
           onMuteStateChange?.(muted);
         },
+        enableAmplitudeMonitoring,
       });
 
       if (websocketUrlOverride) {
         client._websocketUrl = websocketUrlOverride;
       }
 
+      setUserSpeaking(false);
+      onUserSpeakingChange?.(false);
+      setAgentSpeaking(false);
+      onAgentSpeakingChange?.(false);
       setIsMuted(client.isMuted);
       clientRef.current = client;
       return client;
@@ -126,7 +168,12 @@ const useLayercodeAgent = (
       onError,
       onMessage,
       onMuteStateChange,
+      onUserSpeakingChange,
+      onAgentSpeakingChange,
+      onAudioInputChanged,
       websocketUrlOverride,
+      audioInput,
+      enableAmplitudeMonitoring,
     ]
   );
 
@@ -148,6 +195,15 @@ const useLayercodeAgent = (
     clientRef.current?.unmute();
   }, []);
 
+  const setAudioInput = useCallback(
+    (state: React.SetStateAction<boolean>) => {
+      _setAudioInput(state);
+      const next = typeof state === 'function' ? (state as (prev: boolean) => boolean)(audioInput) : state;
+      clientRef.current?.setAudioInput(next);
+    },
+    [_setAudioInput, clientRef, audioInput]
+  );
+
   const triggerUserTurnStarted = useCallback(() => {
     clientRef.current?.triggerUserTurnStarted();
   }, []);
@@ -207,12 +263,17 @@ const useLayercodeAgent = (
     unmute,
     sendClientResponseText,
 
+    setAudioInput,
+
     // State
     status,
     userAudioAmplitude,
     agentAudioAmplitude,
+    userSpeaking,
+    agentSpeaking,
     isMuted,
     conversationId: internalConversationId,
+    audioInput,
   };
 };