support use_streaming elevenlabs and whisper (#396)

src/api/types.ts

@@ -419,6 +419,7 @@ export interface SpeechCredential {
   model_id: null | string;
   model: null | string;
   options: null | string;
+  use_streaming: number;
 }
 
 export interface Alert {

src/containers/internal/views/speech-services/form.tsx

@@ -144,6 +144,7 @@ export const SpeechServiceForm = ({ credential }: SpeechServiceFormProps) => {
   const [optionsInitialChecked, setOptionsInitialChecked] = useState(false);
   const [options, setOptions] = useState("");
   const [tmpOptions, setTmpOptions] = useState("");
+  const [useStreaming, setUseStreaming] = useState(false);
 
   const handleFile = (file: File) => {
     const handleError = () => {
@@ -292,6 +293,9 @@ export const SpeechServiceForm = ({ credential }: SpeechServiceFormProps) => {
         ...(vendor === VENDOR_ELEVENLABS && {
           options: options || null,
         }),
+        ...((vendor === VENDOR_ELEVENLABS || vendor === VENDOR_WHISPER) && {
+          use_streaming: useStreaming ? 1 : 0,
+        }),
       };
 
       if (credential && credential.data) {
@@ -535,6 +539,9 @@ export const SpeechServiceForm = ({ credential }: SpeechServiceFormProps) => {
       setOptions(credential.data.options);
       setOptionsInitialChecked(true);
     }
+    if (credential?.data?.use_streaming) {
+      setUseStreaming(credential.data.use_streaming > 0 ? true : false);
+    }
     if (credential?.data?.vendor === VENDOR_GOOGLE) {
       // let try to check if there is custom voices
       getGoogleCustomVoices({
@@ -749,6 +756,20 @@ export const SpeechServiceForm = ({ credential }: SpeechServiceFormProps) => {
             )}
           </fieldset>
         )}
+        {(vendor === VENDOR_ELEVENLABS || vendor === VENDOR_WHISPER) && (
+          <fieldset>
+            <label htmlFor="streaming_mode" className="chk">
+              <input
+                id="streaming_mode"
+                name="streaming_mode"
+                type="checkbox"
+                onChange={(e) => setUseStreaming(e.target.checked)}
+                defaultChecked={useStreaming}
+              />
+              <div>Use Streaming</div>
+            </label>
+          </fieldset>
+        )}
         {vendor === VENDOR_COBALT && (
           <fieldset>
             <label htmlFor="cobalt_server_url">