feat: add room option for useChat / useTextStream / useTrackToggle / useTranscriptions

Author: 1egoman

packages/react/src/hooks/useChat.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import type { ChatOptions, ReceivedChatMessage } from '@livekit/components-core';
 import { setupChat } from '@livekit/components-core';
-import { ConnectionState } from 'livekit-client';
-import { useRoomContext } from '../context';
+import { ConnectionState, Room } from 'livekit-client';
+import { useEnsureRoom } from '../context';
 import { useObservableState } from './internal/useObservableState';
 import { useConnectionState } from './useConnectionStatus';
 
@@ -39,8 +39,8 @@ import { useConnectionState } from './useConnectionStatus';
  * ```
  * @public
  */
-export function useChat(options?: ChatOptions) {
-  const room = useRoomContext();
+export function useChat(options?: ChatOptions & { room?: Room }) {
+  const room = useEnsureRoom(options?.room);
   const connectionState = useConnectionState(room);
   const isDisconnected = React.useMemo(
     () => connectionState === ConnectionState.Disconnected,

packages/react/src/hooks/useTextStream.ts

@@ -1,10 +1,14 @@
 import * as React from 'react';
-import { ConnectionState } from 'livekit-client';
+import { ConnectionState, Room } from 'livekit-client';
 import { setupTextStream, type TextStreamData } from '@livekit/components-core';
-import { useRoomContext } from '../context';
+import { useEnsureRoom } from '../context';
 import { useConnectionState } from './useConnectionStatus';
 import { useObservableState } from './internal';
 
+export type UseTextStreamOptions = {
+  room?: Room;
+};
+
 /**
  * @beta
  * @param topic - the topic to listen to
@@ -15,8 +19,8 @@ import { useObservableState } from './internal';
  * return <div>{textStreams.map((textStream) => textStream.text)}</div>;
  * ```
  */
-export function useTextStream(topic: string) {
-  const room = useRoomContext();
+export function useTextStream(topic: string, options?: UseTextStreamOptions) {
+  const room = useEnsureRoom(options?.room);
 
   const connectionState = useConnectionState(room);
   const isDisconnected = connectionState === ConnectionState.Disconnected;

packages/react/src/hooks/useTrackToggle.ts

@@ -1,14 +1,17 @@
 import type { ToggleSource } from '@livekit/components-core';
 import { setupMediaToggle, setupManualToggle, log } from '@livekit/components-core';
 import * as React from 'react';
+import { type Room } from 'livekit-client';
 import type { TrackToggleProps } from '../components';
 import { useMaybeRoomContext } from '../context';
 import { mergeProps } from '../mergeProps';
 import { useObservableState } from './internal';
 
 /** @public */
 export interface UseTrackToggleProps<T extends ToggleSource>
-  extends Omit<TrackToggleProps<T>, 'showIcon'> {}
+  extends Omit<TrackToggleProps<T>, 'showIcon'> {
+  room?: Room;
+}
 
 /**
  * The `useTrackToggle` hook is used to implement the `TrackToggle` component and returns state
@@ -28,19 +31,21 @@ export function useTrackToggle<T extends ToggleSource>({
   captureOptions,
   publishOptions,
   onDeviceError,
+  room,
   ...rest
 }: UseTrackToggleProps<T>) {
-  const room = useMaybeRoomContext();
-  const track = room?.localParticipant?.getTrackPublication(source);
+  const roomFromContext = useMaybeRoomContext();
+  const roomFallback = React.useMemo(() => room ?? roomFromContext, [room, roomFromContext]);
+  const track = roomFallback?.localParticipant?.getTrackPublication(source);
   /** `true` if a user interaction such as a click on the TrackToggle button has occurred. */
   const userInteractionRef = React.useRef(false);
 
   const { toggle, className, pendingObserver, enabledObserver } = React.useMemo(
     () =>
-      room
-        ? setupMediaToggle<T>(source, room, captureOptions, publishOptions, onDeviceError)
+      roomFallback
+        ? setupMediaToggle<T>(source, roomFallback, captureOptions, publishOptions, onDeviceError)
         : setupManualToggle(),
-    [room, source, JSON.stringify(captureOptions), publishOptions],
+    [roomFallback, source, JSON.stringify(captureOptions), publishOptions],
   );
 
   const pending = useObservableState(pendingObserver, false);

packages/react/src/hooks/useTranscriptions.ts

@@ -1,11 +1,13 @@
 import * as React from 'react';
 import { useTextStream } from './useTextStream';
 import { DataTopic, ParticipantAgentAttributes } from '@livekit/components-core';
+import { Room } from 'livekit-client';
 
 /**
  * @beta
  */
 export interface UseTranscriptionsOptions {
+  room?: Room;
   participantIdentities?: string[];
   trackSids?: string[];
 }
@@ -22,7 +24,7 @@ export interface UseTranscriptionsOptions {
  */
 export function useTranscriptions(opts?: UseTranscriptionsOptions) {
   const { participantIdentities, trackSids } = opts ?? {};
-  const { textStreams } = useTextStream(DataTopic.TRANSCRIPTION);
+  const { textStreams } = useTextStream(DataTopic.TRANSCRIPTION, { room: opts?.room });
 
   const filteredMessages = React.useMemo(
     () =>