add mic switching

jackbridger · jackbridger · commit c6864ccd1ede · 2025-11-14T12:46:54.000Z
diff --git a/README.md b/README.md
@@ -1,13 +1,59 @@
 # Layercode React SDK
 
-A React SDK for integrating Layercode audio agents into React applications.
+Build polished Layercode agent experiences in React with a single hook and a few UI helpers.
 
 ## Installation
 
 ```bash
 npm install @layercode/react-sdk
 ```
 
-## Usage
+> When developing in this repo we consume the package via a local file dependency (`layercode-react-sdk`). When publishing, the package name remains `@layercode/react-sdk`.
 
-Read the docs: [https://docs.layercode.com/sdk-reference/react-sdk](https://docs.layercode.com/sdk-reference/react-sdk)
+## Quick start
+
+```tsx
+import { MicrophoneSelect, useLayercodeAgent } from '@layercode/react-sdk';
+
+export function VoiceAgent() {
+  const agent = useLayercodeAgent({
+    agentId: process.env.NEXT_PUBLIC_LAYERCODE_AGENT_ID!,
+    authorizeSessionEndpoint: '/api/authorize',
+    onMessage: (event) => {
+      if (event.type === 'response.text') {
+        console.log('Agent says:', event.content);
+      }
+    },
+  });
+
+  return (
+    <div>
+      <button onClick={() => agent.connect()}>Connect</button>
+      <MicrophoneSelect agent={agent} helperText="Pick an input before connecting." />
+      <p>User speaking? {agent.userSpeaking ? 'yes' : 'no'}</p>
+      <p>Agent speaking? {agent.agentSpeaking ? 'yes' : 'no'}</p>
+    </div>
+  );
+}
+```
+
+## Microphone selection
+
+`useLayercodeAgent` now exposes microphone state and helpers:
+
+- `availableInputDevices`: list of normalized `LayercodeAudioInputDevice`s.
+- `activeInputDeviceId` / `preferredInputDeviceId`: reflect what is currently in use or what the user picked.
+- `refreshInputDevices()`: manually re-enumerate mics (permissions are requested automatically the first time).
+- `selectInputDevice(deviceId: string | null)`: persist the preferred device, even before connecting.
+
+Pair those fields with the ready-made `<MicrophoneSelect />` component to ship a drop-in selector with loading/error states. The component accepts plain `select` props plus a few extras (`helperText`, `containerClassName`, `autoRefresh`). (There is also a `LayercodeMicrophoneSelect` alias for backwards compatibility.)
+
+All React-only logic (state, refs, UI) lives in this package; device enumeration, watchers, and permission handling are implemented in `@layercode/js-sdk`, so they can also be used outside React.
+
+## Speaking state
+
+The hook surfaces `userSpeaking` and `agentSpeaking` booleans. They flip to `true` whenever VAD detects speech (user) or when the agent begins streaming audio (agent). This makes it trivial to render pulse indicators, avatar animations, or “agent typing” affordances without manually parsing websocket messages.
+
+## Documentation
+
+Full API reference lives in the docs: [https://docs.layercode.com/sdk-reference/react-sdk](https://docs.layercode.com/sdk-reference/react-sdk)
diff --git a/rollup.config.js b/rollup.config.js
@@ -5,7 +5,7 @@ import typescript from "@rollup/plugin-typescript";
 export default [
   // ESM build
   {
-    input: "src/index.ts",
+    input: "src/index.tsx",
     output: {
       file: "dist/index.js",
       format: "esm",
diff --git a/src/index.tsx b/src/index.tsx
@@ -1,5 +1,11 @@
-import { useState, useEffect, useCallback, useRef } from 'react';
-import LayercodeClient, { type AgentConfig, type AuthorizeSessionRequest } from '@layercode/js-sdk';
+import React, { useState, useEffect, useCallback, useRef } from 'react';
+import LayercodeClient, {
+  type AgentConfig,
+  type AuthorizeSessionRequest,
+  type LayercodeAudioInputDevice,
+  listAudioInputDevices,
+  watchAudioInputDevices,
+} from 'layercode-js-sdk';
 
 /**
  * Configuration options for the useLayercodeAgent hook.
@@ -26,6 +32,13 @@ interface UseLayercodeAgentOptions {
   enableAmplitudeMonitoring?: boolean;
 }
 
+const normalizeDeviceId = (deviceId?: string | null): string | null => {
+  if (!deviceId || deviceId === 'default') {
+    return null;
+  }
+  return deviceId;
+};
+
 /**
  * Hook for connecting to a Layercode agent in a React application
  *
@@ -66,10 +79,54 @@ const useLayercodeAgent = (
   const [audioOutput, _setAudioOutput] = useState<boolean>(options.audioOutput ?? true);
   const [isMuted, setIsMuted] = useState(false);
   const [internalConversationId, setInternalConversationId] = useState<string | null | undefined>(conversationId);
+  const [availableInputDevices, setAvailableInputDevices] = useState<LayercodeAudioInputDevice[]>([]);
+  const [activeInputDeviceId, setActiveInputDeviceId] = useState<string | null>(null);
+  const [preferredInputDeviceId, setPreferredInputDeviceId] = useState<string | null>(null);
+  const [isInputDeviceListLoading, setIsInputDeviceListLoading] = useState(false);
+  const [inputDeviceListError, setInputDeviceListError] = useState<string | null>(null);
   const conversationIdRef = useRef<string | undefined>(conversationId);
+  const preferredInputDeviceRef = useRef<string | null>(null);
+  const mountedRef = useRef(true);
   // Reference to the LayercodeClient instance
   const clientRef = useRef<LayercodeClient | null>(null);
 
+  const refreshInputDevices = useCallback(async () => {
+    if (typeof window === 'undefined' || typeof navigator === 'undefined') {
+      return [] as LayercodeAudioInputDevice[];
+    }
+
+    setIsInputDeviceListLoading(true);
+    try {
+      const devices = await listAudioInputDevices();
+      if (!mountedRef.current) {
+        return devices;
+      }
+      setAvailableInputDevices(devices);
+      setInputDeviceListError(null);
+
+      if (!devices.length) {
+        setActiveInputDeviceId(null);
+        return devices;
+      }
+
+      if (preferredInputDeviceRef.current === null) {
+        const defaultDevice = devices.find((device) => device.default) ?? devices[0];
+        setActiveInputDeviceId(normalizeDeviceId(defaultDevice?.deviceId));
+      }
+
+      return devices;
+    } catch (error) {
+      if (mountedRef.current) {
+        setInputDeviceListError(error instanceof Error ? error.message : 'Unable to access microphones');
+      }
+      throw error;
+    } finally {
+      if (mountedRef.current) {
+        setIsInputDeviceListLoading(false);
+      }
+    }
+  }, []);
+
   useEffect(() => {
     conversationIdRef.current = conversationId;
     if (conversationId !== undefined) {
@@ -79,13 +136,54 @@ const useLayercodeAgent = (
     }
   }, [conversationId]);
 
+  useEffect(() => {
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+
   useEffect(() => {
     if (!enableAmplitudeMonitoring) {
       setUserAudioAmplitude(0);
       setAgentAudioAmplitude(0);
     }
   }, [enableAmplitudeMonitoring]);
 
+  useEffect(() => {
+    preferredInputDeviceRef.current = preferredInputDeviceId;
+  }, [preferredInputDeviceId]);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+
+    refreshInputDevices().catch((error) => {
+      console.warn('Layercode: failed to load microphone devices', error);
+    });
+  }, [refreshInputDevices]);
+
+  useEffect(() => {
+    if (typeof window === 'undefined' || typeof navigator === 'undefined') {
+      return;
+    }
+
+    const unsubscribe = watchAudioInputDevices((devices) => {
+      setAvailableInputDevices(devices);
+      setInputDeviceListError(null);
+      if (devices.length && preferredInputDeviceRef.current === null) {
+        const defaultDevice = devices.find((device) => device.default) ?? devices[0];
+        setActiveInputDeviceId(normalizeDeviceId(defaultDevice?.deviceId));
+      } else if (!devices.length) {
+        setActiveInputDeviceId(null);
+      }
+    });
+
+    return () => {
+      unsubscribe?.();
+    };
+  }, []);
+
   const createClient = useCallback(
     (initialConversationId: string | null) => {
       console.log('Creating LayercodeClient instance');
@@ -105,6 +203,17 @@ const useLayercodeAgent = (
           _setAudioOutput(next);
           onAudioOutputChanged?.(next);
         },
+        onDeviceSwitched: (deviceId: string) => {
+          const normalized = normalizeDeviceId(deviceId);
+          setActiveInputDeviceId(normalized);
+          if (preferredInputDeviceRef.current === null) {
+            setPreferredInputDeviceId(normalized);
+          }
+        },
+        onDevicesChanged: (devices: Array<MediaDeviceInfo & { default: boolean }>) => {
+          setAvailableInputDevices(devices as LayercodeAudioInputDevice[]);
+          setInputDeviceListError(null);
+        },
         onConnect: ({ conversationId, config }: { conversationId: string | null; config?: AgentConfig }) => {
           setInternalConversationId((current) => {
             if (conversationIdRef.current === undefined) {
@@ -224,6 +333,28 @@ const useLayercodeAgent = (
     [_setAudioOutput, clientRef, audioOutput]
   );
 
+  const selectInputDevice = useCallback(
+    async (deviceId: string | null) => {
+      const normalized = normalizeDeviceId(deviceId);
+      setPreferredInputDeviceId(normalized);
+      preferredInputDeviceRef.current = normalized;
+      setInputDeviceListError(null);
+
+      if (!clientRef.current) {
+        return;
+      }
+
+      try {
+        await clientRef.current.setPreferredInputDevice(normalized);
+      } catch (error) {
+        const message = error instanceof Error ? error.message : 'Unable to switch microphone';
+        setInputDeviceListError(message);
+        throw error;
+      }
+    },
+    []
+  );
+
   const triggerUserTurnStarted = useCallback(() => {
     clientRef.current?.triggerUserTurnStarted();
   }, []);
@@ -251,6 +382,7 @@ const useLayercodeAgent = (
     const client = createClient(nextConversationId ?? null);
 
     try {
+      await client.setPreferredInputDevice(preferredInputDeviceRef.current);
       await client.connect();
     } catch (error) {
       console.error('Failed to connect to agent:', error);
@@ -289,6 +421,8 @@ const useLayercodeAgent = (
 
     setAudioInput,
     setAudioOutput,
+    refreshInputDevices,
+    selectInputDevice,
 
     // State
     status,
@@ -300,7 +434,105 @@ const useLayercodeAgent = (
     conversationId: internalConversationId,
     audioInput,
     audioOutput,
+    availableInputDevices,
+    activeInputDeviceId,
+    preferredInputDeviceId,
+    isInputDeviceListLoading,
+    inputDeviceListError,
+  };
+};
+type UseLayercodeAgentReturn = ReturnType<typeof useLayercodeAgent>;
+
+type NativeSelectProps = Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'value' | 'onChange'>;
+
+interface MicrophoneSelectProps extends NativeSelectProps {
+  agent: UseLayercodeAgentReturn;
+  label?: React.ReactNode;
+  helperText?: React.ReactNode;
+  emptyLabel?: React.ReactNode;
+  containerClassName?: string;
+  autoRefresh?: boolean;
+}
+
+const MicrophoneSelect = ({
+  agent,
+  label = 'Microphone',
+  helperText,
+  emptyLabel = 'No microphones detected',
+  containerClassName,
+  className,
+  autoRefresh = true,
+  disabled,
+  ...selectProps
+}: LayercodeMicrophoneSelectProps) => {
+  const selectId = React.useId();
+  const { refreshInputDevices, selectInputDevice, availableInputDevices, isInputDeviceListLoading, inputDeviceListError, preferredInputDeviceId, activeInputDeviceId } = agent;
+
+  useEffect(() => {
+    if (!autoRefresh) {
+      return;
+    }
+
+    refreshInputDevices().catch((error) => {
+      console.warn('Layercode: failed to refresh microphones', error);
+    });
+  }, [autoRefresh, refreshInputDevices]);
+
+  const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    const value = event.target.value;
+    selectInputDevice(value === 'default' ? null : value);
   };
+
+  const currentValue = preferredInputDeviceId ?? activeInputDeviceId ?? 'default';
+
+  const hasDevices = availableInputDevices.length > 0;
+
+  return (
+    <div className={containerClassName}>
+      {label ? (
+        <label className="layercode-mic-select__label" htmlFor={selectId}>
+          {label}
+        </label>
+      ) : null}
+
+      <select
+        id={selectId}
+        className={className}
+        value={currentValue}
+        onChange={handleChange}
+        disabled={disabled || isInputDeviceListLoading || (!hasDevices && !inputDeviceListError)}
+        {...selectProps}
+      >
+        <option value="default">System default microphone</option>
+        {availableInputDevices.map((device) => {
+          const optionValue = device.deviceId || 'default';
+          const labelText = device.label || (device.default ? 'System default microphone' : 'Microphone');
+          const suffix = device.default && optionValue !== 'default' ? ' (default)' : '';
+          return (
+            <option key={`${device.deviceId}-${device.label}`} value={optionValue}>
+              {labelText}
+              {suffix}
+            </option>
+          );
+        })}
+      </select>
+
+      {isInputDeviceListLoading ? <div className="layercode-mic-select__helper">Loading microphones…</div> : null}
+
+      {inputDeviceListError ? <div className="layercode-mic-select__error">{inputDeviceListError}</div> : null}
+
+      {!isInputDeviceListLoading && !inputDeviceListError && !hasDevices ? (
+        <div className="layercode-mic-select__helper">{emptyLabel}</div>
+      ) : null}
+
+      {helperText ? <div className="layercode-mic-select__helper">{helperText}</div> : null}
+    </div>
+  );
 };
 
-export { useLayercodeAgent, UseLayercodeAgentOptions }; // Export the type too
+type LayercodeMicrophoneSelectProps = MicrophoneSelectProps;
+
+export { useLayercodeAgent, MicrophoneSelect };
+export { MicrophoneSelect as LayercodeMicrophoneSelect };
+export type { UseLayercodeAgentOptions, UseLayercodeAgentReturn, MicrophoneSelectProps };
+export type { MicrophoneSelectProps as LayercodeMicrophoneSelectProps };

Original file line number	Diff line number	Diff line change
`@@ -5,7 +5,7 @@ import typescript from "@rollup/plugin-typescript";`
`5`	`5`	`export default [`
`6`	`6`	`// ESM build`
`7`	`7`	`{`
`8`		`- input: "src/index.ts",`
	`8`	`+ input: "src/index.tsx",`
`9`	`9`	`output: {`
`10`	`10`	`file: "dist/index.js",`
`11`	`11`	`format: "esm",`