Add callback option to trackTranscription hook (#939)

Author: lukasIO

.changeset/sixty-singers-thank.md

@@ -0,0 +1,5 @@
+---
+"@livekit/components-react": patch
+---
+
+Add callback option to trackTranscription hook

packages/react/etc/components-react.api.md

@@ -676,6 +676,7 @@ export interface TrackToggleProps<T extends ToggleSource> extends Omit<React_2.B
 // @alpha (undocumented)
 export interface TrackTranscriptionOptions {
     bufferSize?: number;
+    onTranscription?: (newSegments: TranscriptionSegment[]) => void;
 }
 
 // Warning: (ae-internal-missing-underscore) The name "UnfocusToggleIcon" should be prefixed with an underscore because the declaration is marked as @internal
@@ -880,7 +881,7 @@ export function useMediaDeviceSelect({ kind, room, track, requestPermissions, on
     devices: MediaDeviceInfo[];
     className: string;
     activeDeviceId: string;
-    setActiveMediaDevice: (id: string, options?: SetMediaDeviceOptions | undefined) => Promise<void>;
+    setActiveMediaDevice: (id: string, options?: SetMediaDeviceOptions) => Promise<void>;
 };
 
 // @public (undocumented)
@@ -1151,7 +1152,7 @@ export type UseTracksOptions = {
 
 // @public
 export function useTrackToggle<T extends ToggleSource>({ source, onChange, initialState, captureOptions, publishOptions, onDeviceError, ...rest }: UseTrackToggleProps<T>): {
-    toggle: (forceState?: boolean | undefined, captureOptions?: CaptureOptionsBySource<T> | undefined) => Promise<void>;
+    toggle: (forceState?: boolean, captureOptions?: CaptureOptionsBySource<T> | undefined) => Promise<void>;
     enabled: boolean;
     pending: boolean;
     track: LocalTrackPublication | undefined;
@@ -1223,7 +1224,7 @@ export type WidgetState = {
 // src/context/layout-context.ts:11:3 - (ae-forgotten-export) The symbol "WidgetContextType" needs to be exported by the entry point index.d.ts
 // src/hooks/useGridLayout.ts:27:6 - (ae-forgotten-export) The symbol "GridLayoutInfo" needs to be exported by the entry point index.d.ts
 // src/hooks/useMediaDeviceSelect.ts:47:29 - (ae-forgotten-export) The symbol "SetMediaDeviceOptions" needs to be exported by the entry point index.d.ts
-// src/hooks/useTrackTranscription.ts:39:38 - (ae-forgotten-export) The symbol "ReceivedTranscriptionSegment" needs to be exported by the entry point index.d.ts
+// src/hooks/useTrackTranscription.ts:43:38 - (ae-forgotten-export) The symbol "ReceivedTranscriptionSegment" needs to be exported by the entry point index.d.ts
 
 // (No @packageDocumentation comment for this package)
 

packages/react/src/hooks/useTrackTranscription.ts

@@ -21,6 +21,10 @@ export interface TrackTranscriptionOptions {
    * @defaultValue 100
    */
   bufferSize?: number;
+  /**
+   * optional callback for retrieving newly incoming transcriptions only
+   */
+  onTranscription?: (newSegments: TranscriptionSegment[]) => void;
   /** amount of time (in ms) that the segment is considered `active` past its original segment duration, defaults to 2_000 */
   // maxAge?: number;
 }
@@ -46,6 +50,7 @@ export function useTrackTranscription(
   // const prevActiveSegments = React.useRef<ReceivedTranscriptionSegment[]>([]);
   const syncTimestamps = useTrackSyncTime(trackRef);
   const handleSegmentMessage = (newSegments: TranscriptionSegment[]) => {
+    opts.onTranscription?.(newSegments);
     setSegments((prevSegments) =>
       dedupeSegments(
         prevSegments,