Add discovery endpoint to real time client + react

Author: mnemitz

examples/nextjs/src/app/real-time/Controls.tsx

@@ -16,20 +16,13 @@ import { LanguageSelect } from './LanguageSelect';
 
 export function Controls({
   languages,
-}: { languages: [code: string, displayName: string][] }) {
-  const { startTranscription, stopTranscription, sendAudio, socketState } =
+}: { languages: (readonly [code: string, displayName: string])[] }) {
+  const { startTranscription, stopTranscription, sendAudio } =
     useRealtimeTranscription();
 
   const { isRecording, startRecording, stopRecording } = usePcmAudioRecorder();
 
   usePcmAudioListener(sendAudio);
-  // Cleanup
-  useEffect(() => {
-    return () => {
-      stopTranscription();
-      stopRecording();
-    };
-  }, [stopTranscription, stopRecording]);
 
   const startSession = useCallback(
     async ({
@@ -59,6 +52,14 @@ export function Controls({
     [startSession],
   );
 
+  // Cleanup
+  useEffect(() => {
+    return () => {
+      stopTranscription();
+      stopRecording();
+    };
+  }, [stopTranscription, stopRecording]);
+
   return (
     <article>
       <form onSubmit={handleSubmit}>

examples/nextjs/src/app/real-time/LanguageSelect.tsx

@@ -1,7 +1,10 @@
 export function LanguageSelect({
   languages,
   disabled,
-}: { languages: [code: string, displayName: string][]; disabled?: boolean }) {
+}: {
+  languages: (readonly [code: string, displayName: string])[];
+  disabled?: boolean;
+}) {
   return (
     <label>
       Select language

examples/nextjs/src/app/real-time/page.tsx

@@ -1,4 +1,7 @@
-import { RealtimeTranscriptionProvider } from '@speechmatics/real-time-client-react';
+import {
+  getFeatures,
+  RealtimeTranscriptionProvider,
+} from '@speechmatics/real-time-client-react';
 import { PcmAudioRecorderProvider } from '@speechmatics/browser-audio-input-react';
 import { Controls } from './Controls';
 import { Status } from './Status';
@@ -11,15 +14,10 @@ export const metadata: Metadata = {
 };
 
 export default async function Page() {
-  const resp = await fetch(
-    'https://asr.api.speechmatics.com/v1/discovery/features',
-  );
-
+  const features = await getFeatures();
   const displayNames = new Intl.DisplayNames(['en'], { type: 'language' });
-
-  // TODO figure out if there's an RT specific discovery endpoint
-  const languages = (await resp.json()).batch.transcription[0].languages.map(
-    (code: string) => [code, displayNames.of(code)] as const,
+  const languages = features.realtime.transcription[0].languages.map(
+    (code) => [code, displayNames.of(code) ?? code] as const,
   );
 
   return (

packages/real-time-client-react/src/index.ts

@@ -2,4 +2,4 @@ export * from './use-real-time-transcription';
 export * from './use-real-time-event-listener';
 export * from './real-time-context';
 export * from './real-time-transcription-provider';
-export type * from '@speechmatics/real-time-client';
+export * from '@speechmatics/real-time-client';