fix: make agent.waitUntilAvailable more stable

It had a dependency on `state` so that it could bail if the state was
the expected state when being initially called, but this had the side
effect of causing it to change reference often. So, cache this in a ref
instead.

Author: 1egoman

packages/react/src/hooks/useAgent.ts

@@ -241,6 +241,50 @@ export const useAgentTimeoutIdStore = (): {
 
 type SessionStub = Pick<UseSessionReturn, 'connectionState' | 'room' | 'internal'>;
 
+/** Internal hook used by useAgent which generates a function that when called, will return a
+ * promise which resolves when agent.isAvailable is enabled. */
+function useAgentWaitUntilAvailable(emitter: TypedEventEmitter<AgentCallbacks>, state: AgentState) {
+  const stateRef = React.useRef(state);
+  React.useEffect(() => {
+    stateRef.current = state;
+  }, [state]);
+
+  const waitUntilAvailable = React.useCallback(
+    async (signal?: AbortSignal) => {
+      const { isAvailable } = generateDerivedStateValues(stateRef.current);
+      if (isAvailable) {
+        return;
+      }
+
+      return new Promise<void>((resolve, reject) => {
+        const stateChangedHandler = (state: AgentState) => {
+          const { isAvailable } = generateDerivedStateValues(state);
+          if (!isAvailable) {
+            return;
+          }
+          cleanup();
+          resolve();
+        };
+        const abortHandler = () => {
+          cleanup();
+          reject(new Error('useAgent.waitUntilAvailable - signal aborted'));
+        };
+
+        const cleanup = () => {
+          emitter.off(AgentEvent.StateChanged, stateChangedHandler);
+          signal?.removeEventListener('abort', abortHandler);
+        };
+
+        emitter.on(AgentEvent.StateChanged, stateChangedHandler);
+        signal?.addEventListener('abort', abortHandler);
+      });
+    },
+    [emitter],
+  );
+
+  return waitUntilAvailable;
+}
+
 /**
  * useAgent encapculates all agent state, normalizing some quirks around how LiveKit Agents work.
  * @public
@@ -536,38 +580,7 @@ export function useAgent(session?: SessionStub): UseAgentReturn {
     isBufferingSpeech,
   ]);
 
-  const waitUntilAvailable = React.useCallback(
-    async (signal?: AbortSignal) => {
-      const { isAvailable } = generateDerivedStateValues(state);
-      if (isAvailable) {
-        return;
-      }
-
-      return new Promise<void>((resolve, reject) => {
-        const stateChangedHandler = (state: AgentState) => {
-          const { isAvailable } = generateDerivedStateValues(state);
-          if (!isAvailable) {
-            return;
-          }
-          cleanup();
-          resolve();
-        };
-        const abortHandler = () => {
-          cleanup();
-          reject(new Error('useAgent.waitUntilAvailable - signal aborted'));
-        };
-
-        const cleanup = () => {
-          emitter.off(AgentEvent.StateChanged, stateChangedHandler);
-          signal?.removeEventListener('abort', abortHandler);
-        };
-
-        emitter.on(AgentEvent.StateChanged, stateChangedHandler);
-        signal?.addEventListener('abort', abortHandler);
-      });
-    },
-    [state, emitter],
-  );
+  const waitUntilAvailable = useAgentWaitUntilAvailable(emitter, state);
 
   const waitUntilCamera = React.useCallback(
     (signal?: AbortSignal) => {

packages/react/src/hooks/useSession.ts

@@ -489,7 +489,10 @@ export function useSession(
     emitter.emit(SessionEvent.ConnectionStateChanged, conversationState.connectionState);
   }, [emitter, conversationState.connectionState]);
 
-  const waitUntilConnectionState = useSessionWaitUntilConnectionState(emitter, conversationState.connectionState);
+  const waitUntilConnectionState = useSessionWaitUntilConnectionState(
+    emitter,
+    conversationState.connectionState,
+  );
 
   const waitUntilConnected = React.useCallback(
     async (signal?: AbortSignal) => {