✨ feat: Export additional types and functions for speech recognition …

…and synthesis

This commit introduces new features to the codebase. Exported types and
functions related to speech recognition and synthesis have been added. The
`useOpenaiSTT` function now accepts additional options and callbacks for
handling audio recording and text changes. Similar changes have been made to
the `useOpenaiSTTWithPSR` and `useOpenaiSTTWithSR` functions. Additionally, the
`usePersistedSpeechRecognition` and `useSpeechRecognition` functions have been
updated to accept the same options and callbacks.

Changes:
- Export additional types and functions for speech recognition and synthesis
- Update `useOpenaiSTT` function to accept additional options and callbacks
- Update `useOpenaiSTTWithPSR` and `useOpenaiSTTWithSR` functions with similar changes
- Update `usePersistedSpeechRecognition` and `useSpeechRecognition` functions to accept the same options and callbacks

src/index.ts

@@ -18,10 +18,18 @@ export { useAudioRecorder } from './useAudioRecorder';
 export { useAzureSpeech } from './useAzureSpeech';
 export { useEdgeSpeech } from './useEdgeSpeech';
 export { useMicrosoftSpeech } from './useMicrosoftSpeech';
-export { useOpenaiSTT, useOpenaiSTTWithPSR, useOpenaiSTTWithSR } from './useOpenaiSTT';
+export {
+  type OpenaiSpeechRecognitionOptions,
+  useOpenaiSTT,
+  useOpenaiSTTWithPSR,
+  useOpenaiSTTWithSR,
+} from './useOpenaiSTT';
 export { useOpenaiTTS } from './useOpenaiTTS';
 export { usePersistedSpeechRecognition } from './useSpeechRecognition/usePersistedSpeechRecognition';
-export { useSpeechRecognition } from './useSpeechRecognition/useSpeechRecognition';
+export {
+  type SpeechRecognitionOptions,
+  useSpeechRecognition,
+} from './useSpeechRecognition/useSpeechRecognition';
 export { useSpeechSynthes } from './useSpeechSynthes';
 export {
   genLevaOptions,

src/useOpenaiSTT/index.ts

@@ -1,3 +1,3 @@
-export { useOpenaiSTT } from './useOpenaiSTT';
+export { type OpenaiSpeechRecognitionOptions, useOpenaiSTT } from './useOpenaiSTT';
 export { useOpenaiSTTWithPSR } from './useOpenaiSTTWithPSR';
 export { useOpenaiSTTWithSR } from './useOpenaiSTTWithSR';

src/useOpenaiSTT/useOpenaiSTT.ts

@@ -1,30 +1,54 @@
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
 import useSWR from 'swr';
 
 import { OpenaiSttOptions, fetchOpenaiSTT } from '@/services/fetchOpenaiSTT';
 import { useAudioRecorder } from '@/useAudioRecorder';
+import { SpeechRecognitionOptions } from '@/useSpeechRecognition/useSpeechRecognition';
 
-export const useOpenaiSTT = (options: OpenaiSttOptions) => {
+export type OpenaiSpeechRecognitionOptions = SpeechRecognitionOptions & OpenaiSttOptions;
+
+export const useOpenaiSTT = ({
+  onBolbAvailable,
+  onTextChange,
+  ...options
+}: OpenaiSpeechRecognitionOptions) => {
+  const [isGlobalLoading, setIsGlobalLoading] = useState<boolean>(false);
   const [shouldFetch, setShouldFetch] = useState<boolean>(false);
-  const { start, stop, blob, url, isRecording, time, formattedTime } = useAudioRecorder(() => {
-    setShouldFetch(true);
-  });
+  const [text, setText] = useState<string>();
+  const { start, stop, blob, url, isRecording, time, formattedTime } = useAudioRecorder(
+    (blobData) => {
+      setShouldFetch(true);
+      onBolbAvailable?.(blobData);
+    },
+  );
 
   const key = new Date().getDate().toString();
 
-  const { isLoading, data } = useSWR(
+  const { isLoading } = useSWR(
     shouldFetch && blob ? key : null,
     async () => await fetchOpenaiSTT(blob as any, options),
+    {
+      onSuccess: (value) => {
+        onTextChange?.(value);
+        setIsGlobalLoading(false);
+      },
+    },
   );
 
+  const handleStart = useCallback(() => {
+    setIsGlobalLoading(true);
+    start();
+    setText('');
+  }, [start]);
+
   return {
     blob,
     formattedTime,
-    isLoading: isLoading || isRecording,
+    isLoading: isGlobalLoading || isLoading || isRecording,
     isRecording,
-    start,
+    start: handleStart,
     stop,
-    text: data,
+    text,
     time,
     url,
   };

src/useOpenaiSTT/useOpenaiSTTWithPSR.ts

@@ -1,10 +1,16 @@
 import { useCallback, useState } from 'react';
 import useSWR from 'swr';
 
-import { OpenaiSttOptions, fetchOpenaiSTT } from '@/services/fetchOpenaiSTT';
+import { fetchOpenaiSTT } from '@/services/fetchOpenaiSTT';
 import { usePersistedSpeechRecognition } from '@/useSpeechRecognition';
 
-export const useOpenaiSTTWithPSR = (locale: string, options: OpenaiSttOptions) => {
+import { OpenaiSpeechRecognitionOptions } from './useOpenaiSTT';
+
+export const useOpenaiSTTWithPSR = (
+  locale: string,
+  { onBolbAvailable, onTextChange, ...options }: OpenaiSpeechRecognitionOptions,
+) => {
+  const [isGlobalLoading, setIsGlobalLoading] = useState<boolean>(false);
   const [shouldFetch, setShouldFetch] = useState<boolean>(false);
   const [text, setText] = useState<string>();
   const {
@@ -16,8 +22,14 @@ export const useOpenaiSTTWithPSR = (locale: string, options: OpenaiSttOptions) =
     time,
     formattedTime,
   } = usePersistedSpeechRecognition(locale, {
-    onBolbAvailable: () => setShouldFetch(true),
-    onTextChange: setText,
+    onBolbAvailable: (blobData) => {
+      setShouldFetch(true);
+      onBolbAvailable?.(blobData);
+    },
+    onTextChange: (data) => {
+      setText(data);
+      onTextChange?.(data);
+    },
   });
 
   const key = new Date().getDate().toString();
@@ -29,19 +41,22 @@ export const useOpenaiSTTWithPSR = (locale: string, options: OpenaiSttOptions) =
       onSuccess: (data) => {
         setShouldFetch(false);
         setText(data);
+        onTextChange?.(data);
+        setIsGlobalLoading(false);
       },
     },
   );
 
   const handleStart = useCallback(() => {
+    setIsGlobalLoading(true);
     start();
     setText('');
   }, [start]);
 
   return {
     blob,
     formattedTime,
-    isLoading: isLoading || isRecording,
+    isLoading: isGlobalLoading || isLoading || isRecording,
     isRecording,
     start: handleStart,
     stop,

src/useOpenaiSTT/useOpenaiSTTWithSR.ts

@@ -1,10 +1,16 @@
 import { useCallback, useState } from 'react';
 import useSWR from 'swr';
 
-import { OpenaiSttOptions, fetchOpenaiSTT } from '@/services/fetchOpenaiSTT';
+import { fetchOpenaiSTT } from '@/services/fetchOpenaiSTT';
 import { useSpeechRecognition } from '@/useSpeechRecognition';
 
-export const useOpenaiSTTWithSR = (locale: string, options: OpenaiSttOptions) => {
+import { OpenaiSpeechRecognitionOptions } from './useOpenaiSTT';
+
+export const useOpenaiSTTWithSR = (
+  locale: string,
+  { onBolbAvailable, onTextChange, ...options }: OpenaiSpeechRecognitionOptions,
+) => {
+  const [isGlobalLoading, setIsGlobalLoading] = useState<boolean>(false);
   const [shouldFetch, setShouldFetch] = useState<boolean>(false);
   const [text, setText] = useState<string>();
   const {
@@ -16,8 +22,14 @@ export const useOpenaiSTTWithSR = (locale: string, options: OpenaiSttOptions) =>
     time,
     formattedTime,
   } = useSpeechRecognition(locale, {
-    onBolbAvailable: () => setShouldFetch(true),
-    onTextChange: setText,
+    onBolbAvailable: (blobData) => {
+      setShouldFetch(true);
+      onBolbAvailable?.(blobData);
+    },
+    onTextChange: (data) => {
+      setText(data);
+      onTextChange?.(data);
+    },
   });
 
   const key = new Date().getDate().toString();
@@ -29,19 +41,22 @@ export const useOpenaiSTTWithSR = (locale: string, options: OpenaiSttOptions) =>
       onSuccess: (data) => {
         setShouldFetch(false);
         setText(data);
+        onTextChange?.(data);
+        setIsGlobalLoading(false);
       },
     },
   );
 
   const handleStart = useCallback(() => {
+    setIsGlobalLoading(true);
     start();
     setText('');
   }, [start]);
 
   return {
     blob,
     formattedTime,
-    isLoading: isLoading || isRecording,
+    isLoading: isGlobalLoading || isLoading || isRecording,
     isRecording,
     start: handleStart,
     stop,

src/useSpeechRecognition/usePersistedSpeechRecognition.ts

@@ -1,11 +1,13 @@
 import { useCallback, useMemo, useState } from 'react';
 
 import { useAudioRecorder } from '@/useAudioRecorder';
-import { useRecognition } from '@/useSpeechRecognition/useRecognition';
+
+import { useRecognition } from './useRecognition';
+import { SpeechRecognitionOptions } from './useSpeechRecognition';
 
 export const usePersistedSpeechRecognition = (
   locale: string,
-  options?: { onBolbAvailable?: (blob: Blob) => void; onTextChange?: (value: string) => void },
+  options?: SpeechRecognitionOptions,
 ) => {
   const [texts, setTexts] = useState<string[]>([]);
   const [isGLobalLoading, setIsGlobalLoading] = useState<boolean>(false);

src/useSpeechRecognition/useSpeechRecognition.ts

@@ -3,10 +3,12 @@ import { useCallback } from 'react';
 import { useAudioRecorder } from '@/useAudioRecorder';
 import { useRecognition } from '@/useSpeechRecognition/useRecognition';
 
-export const useSpeechRecognition = (
-  locale: string,
-  options?: { onBolbAvailable?: (blob: Blob) => void; onTextChange?: (value: string) => void },
-) => {
+export interface SpeechRecognitionOptions {
+  onBolbAvailable?: (blob: Blob) => void;
+  onTextChange?: (value: string) => void;
+}
+
+export const useSpeechRecognition = (locale: string, options?: SpeechRecognitionOptions) => {
   const {
     time,
     formattedTime,