issue 409, shoud not get Invoices in self-hosted system (#412)

* Support deepgram onprem

* wip

* wip

.github/workflows/pr-checks.yml

@@ -12,18 +12,18 @@ jobs:
   pr-checks:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
 
       - name: Cache node_modules
         id: node-cache
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: node_modules
           key: node-modules-${{ hashFiles('package-lock.json') }}
 
       - name: Cache cypress binary
         id: cypress-cache
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: /home/runner/.cache/Cypress
           key: cypress-${{ hashFiles('package-lock.json') }}

src/api/types.ts

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

src/components/forms/checkzone/index.tsx

@@ -11,6 +11,7 @@ type CheckzoneProps = {
   hidden?: boolean;
   children: React.ReactNode;
   initialCheck: boolean;
+  disabled?: boolean;
   handleChecked?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 };
 
@@ -28,6 +29,7 @@ export const Checkzone = forwardRef<CheckzoneRef, CheckzoneProps>(
       children,
       initialCheck,
       handleChecked,
+      disabled = false,
     }: CheckzoneProps,
     ref
   ) => {
@@ -51,6 +53,7 @@ export const Checkzone = forwardRef<CheckzoneRef, CheckzoneProps>(
         <label>
           <div className="label-container">
             <input
+              disabled={disabled}
               ref={ref}
               type="checkbox"
               name={name}

src/containers/internal/views/accounts/form.tsx

@@ -40,6 +40,7 @@ import {
   PlanType,
   USER_ACCOUNT,
   WEBHOOK_METHODS,
+  STRIPE_PUBLISHABLE_KEY,
 } from "src/api/constants";
 import { MSG_REQUIRED_FIELDS, MSG_WEBHOOK_FIELDS } from "src/constants";
 
@@ -85,7 +86,10 @@ export const AccountForm = ({
   const user = useSelectState("user");
   const currentServiceProvider = useSelectState("currentServiceProvider");
   const [accounts] = useApiData<Account[]>("Accounts");
-  const [invoice] = useApiData<Invoice>("Invoices");
+  // Dont get Invoices if the environment is self-hosted
+  const [invoice] = STRIPE_PUBLISHABLE_KEY
+    ? useApiData<Invoice>("Invoices")
+    : [undefined];
   const [userData] = useApiData<CurrentUserData>("Users/me");
   const [userCarriers] = useApiData<Carrier[]>(`VoipCarriers`);
   const [userSpeechs] = useApiData<SpeechCredential[]>(

src/containers/internal/views/applications/speech-selection.tsx

@@ -99,27 +99,37 @@ export const SpeechProviderSelection = ({
     SelectorOption[]
   >([]);
 
-  const currentVendor = useRef("");
-
-  const currentServiceProvider = useSelectState("currentServiceProvider");
+  const currentTtsVendor = useRef(synthVendor);
+  const currentSttVendor = useRef(recogVendor);
+  const shouldUpdateTtsVoice = useRef(false);
+  const shouldUpdateSttLanguage = useRef(false);
+  const ttsEffectTimer = useRef<number | null>(null);
+  const sttEffectTimer = useRef<number | null>(null);
 
   // Get Synthesis languages and voices
   useEffect(() => {
+    if (
+      !user ||
+      !synthVendor ||
+      (user?.scope === USER_ADMIN && !serviceProviderSid)
+    ) {
+      return;
+    }
+    currentTtsVendor.current = synthVendor;
     /** When Custom Vendor is used, user you have to input the lange and voice. */
     if (synthVendor.toString().startsWith(VENDOR_CUSTOM)) {
       setSynthVoice("");
       return;
     }
-    currentVendor.current = synthVendor;
-    if (
-      !user ||
-      (user?.scope === USER_ADMIN &&
-        !currentServiceProvider?.service_provider_sid)
-    ) {
-      return;
+    // just execute last change
+    if (ttsEffectTimer.current) {
+      clearTimeout(ttsEffectTimer.current);
     }
-    configSynthesis();
-  }, [synthVendor, synthLabel, currentServiceProvider]);
+
+    ttsEffectTimer.current = setTimeout(() => {
+      configSynthesis();
+    }, 200);
+  }, [synthVendor, synthLabel, serviceProviderSid]);
 
   // Get Recognizer languages and voices
   useEffect(() => {
@@ -130,13 +140,21 @@ export const SpeechProviderSelection = ({
     }
     if (
       !user ||
-      (user?.scope === USER_ADMIN &&
-        !currentServiceProvider?.service_provider_sid)
+      !recogVendor ||
+      (user?.scope === USER_ADMIN && !serviceProviderSid)
     ) {
       return;
     }
-    configRecognizer();
-  }, [recogVendor, recogLabel, currentServiceProvider]);
+    currentSttVendor.current = recogVendor;
+    // just execute last change
+    if (sttEffectTimer.current) {
+      clearTimeout(sttEffectTimer.current);
+    }
+
+    sttEffectTimer.current = setTimeout(() => {
+      configRecognizer();
+    }, 200);
+  }, [recogVendor, recogLabel, serviceProviderSid]);
 
   useEffect(() => {
     if (credentials) {
@@ -167,39 +185,40 @@ export const SpeechProviderSelection = ({
           }
           return lang.value === synthLang;
         })?.voices || [];
-      setSynthesisVoiceOptions(voicesOpts);
 
-      if (synthVendor === VENDOR_GOOGLE) {
-        getGoogleCustomVoices({
-          ...(synthLabel && { label: synthLabel }),
-          account_sid: accountSid,
-          service_provider_sid: serviceProviderSid,
-        }).then(({ json }) => {
-          // If after successfully fetching data, vendor is still good, then apply value
-          if (currentVendor.current !== VENDOR_GOOGLE) {
-            return;
-          }
-          const customVOices = json.map((v) => ({
-            name: `${v.name} (Custom)`,
-            value: `custom_${v.google_custom_voice_sid}`,
-          }));
-          setSynthesisGoogleCustomVoiceOptions(customVOices);
-          setSynthesisVoiceOptions([...customVOices, ...voicesOpts]);
-          if (customVOices.length > 0) {
-            setSynthVoice(customVOices[0].value);
-          }
-        });
+      if (synthVendor === VENDOR_GOOGLE && synthesisGoogleCustomVoiceOptions) {
+        if (synthesisGoogleCustomVoiceOptions) {
+          setSynthesisVoiceOptions([
+            ...synthesisGoogleCustomVoiceOptions,
+            ...voicesOpts,
+          ]);
+        } else {
+          setSynthesisVoiceOptions(voicesOpts);
+        }
+        if (synthesisGoogleCustomVoiceOptions.length > 0) {
+          updateTtsVoice(synthesisGoogleCustomVoiceOptions[0].value);
+        }
+      } else {
+        setSynthesisVoiceOptions(voicesOpts);
       }
     }
-  }, [synthLang, synthesisSupportedLanguagesAndVoices]);
+  }, [
+    synthLang,
+    synthesisSupportedLanguagesAndVoices,
+    synthesisGoogleCustomVoiceOptions,
+  ]);
 
   const configSynthesis = () => {
     getSpeechSupportedLanguagesAndVoices(
-      currentServiceProvider?.service_provider_sid,
+      serviceProviderSid,
       synthVendor,
       synthLabel
     )
       .then(({ json }) => {
+        // while fetching data, user might change the vendor
+        if (currentTtsVendor.current !== synthVendor) {
+          return;
+        }
         setSynthesisSupportedLanguagesAndVoices(json);
         // Extract model
         if (json.models && json.models.length) {
@@ -219,21 +238,27 @@ export const SpeechProviderSelection = ({
           setSynthesisLanguageOptions(langOpts);
 
           // Default setting
-          if (synthVendor === VENDOR_GOOGLE && synthLang === LANG_EN_US) {
-            setSynthVoice(LANG_EN_US_STANDARD_C);
+          const googleLang = json.tts.find((lang) => lang.value === synthLang);
+          if (
+            synthVendor === VENDOR_GOOGLE &&
+            (!googleLang ||
+              !googleLang.voices.find((v) => v.value === synthVoice))
+          ) {
+            setSynthLang(LANG_EN_US);
+            updateTtsVoice(LANG_EN_US_STANDARD_C);
             return;
           }
           if (synthVendor === VENDOR_ELEVENLABS) {
             // Samve Voices applied to all languages
             // Voices are only available for the 1st language.
             setSynthLang(ELEVENLABS_LANG_EN);
-            setSynthVoice(json.tts[0].voices[0].value);
+            updateTtsVoice(json.tts[0].voices[0].value);
             return;
           }
           if (synthVendor === VENDOR_WHISPER) {
             const newLang = json.tts.find((lang) => lang.value === LANG_EN_US);
             setSynthLang(LANG_EN_US);
-            setSynthVoice(newLang!.voices[0].value);
+            updateTtsVoice(newLang!.voices[0].value);
             return;
           }
           /** Google and AWS have different language lists */
@@ -241,28 +266,57 @@ export const SpeechProviderSelection = ({
           let newLang = json.tts.find((lang) => lang.value === synthLang);
 
           if (newLang) {
-            setSynthVoice(newLang.voices[0].value);
+            updateTtsVoice(newLang.voices[0].value);
             return;
           }
 
           newLang = json.tts.find((lang) => lang.value === LANG_EN_US);
 
           setSynthLang(LANG_EN_US);
-          setSynthVoice(newLang!.voices[0].value);
+          updateTtsVoice(newLang!.voices[0].value);
         }
       })
       .catch((error) => {
         toastError(error.msg);
       });
+
+    if (synthVendor === VENDOR_GOOGLE) {
+      getGoogleCustomVoices({
+        ...(synthLabel && { label: synthLabel }),
+        account_sid: accountSid,
+        service_provider_sid: serviceProviderSid,
+      }).then(({ json }) => {
+        // If after successfully fetching data, vendor is still good, then apply value
+        if (currentTtsVendor.current !== VENDOR_GOOGLE) {
+          return;
+        }
+        const customVOices = json.map((v) => ({
+          name: `${v.name} (Custom)`,
+          value: `custom_${v.google_custom_voice_sid}`,
+        }));
+        setSynthesisGoogleCustomVoiceOptions(customVOices);
+      });
+    }
+  };
+
+  const updateTtsVoice = (value: string) => {
+    if (shouldUpdateTtsVoice.current) {
+      setSynthVoice(value);
+      shouldUpdateTtsVoice.current = false;
+    }
   };
 
   const configRecognizer = () => {
     getSpeechSupportedLanguagesAndVoices(
-      currentServiceProvider?.service_provider_sid,
+      serviceProviderSid,
       recogVendor,
       recogLabel
     )
       .then(({ json }) => {
+        // while fetching data, the user might change the vendor
+        if (currentSttVendor.current !== recogVendor) {
+          return;
+        }
         // Extract Language
         const langOpts = json.stt.map((lang) => ({
           name: lang.name,
@@ -271,8 +325,12 @@ export const SpeechProviderSelection = ({
         setRecogLanguageOptions(langOpts);
 
         /**When vendor is custom, Language is input by user */
-        if (recogVendor.toString() === VENDOR_CUSTOM) return;
-
+        if (
+          recogVendor.toString() === VENDOR_CUSTOM ||
+          !shouldUpdateSttLanguage.current
+        )
+          return;
+        shouldUpdateSttLanguage.current = false;
         /** Google and AWS have different language lists */
         /** If the new language doesn't map then default to "en-US" */
         const newLang = json.stt.find((lang) => lang.value === recogLang);
@@ -282,10 +340,10 @@ export const SpeechProviderSelection = ({
           !newLang
         ) {
           setRecogLang(LANG_EN_US);
-        }
-        // Default colbalt language
-        if (recogVendor === VENDOR_COBALT) {
+        } else if (recogVendor === VENDOR_COBALT && !newLang) {
           setRecogLang(LANG_COBALT_EN_US);
+        } else if (langOpts.length && !newLang) {
+          setRecogLang(langOpts[0].value);
         }
       })
       .catch((error) => {
@@ -309,6 +367,7 @@ export const SpeechProviderSelection = ({
           )}
           onChange={(e) => {
             const vendor = e.target.value as keyof SynthesisVendors;
+            shouldUpdateTtsVoice.current = true;
             setSynthVendor(vendor);
             setSynthLabel("");
             setSynthesisLanguageOptions([]);
@@ -353,6 +412,7 @@ export const SpeechProviderSelection = ({
                 value={synthLang}
                 options={synthesisLanguageOptions}
                 onChange={(e) => {
+                  shouldUpdateTtsVoice.current = true;
                   const language = e.target.value;
                   setSynthLang(language);
 
@@ -456,6 +516,7 @@ export const SpeechProviderSelection = ({
           )}
           onChange={(e) => {
             const vendor = e.target.value as keyof RecognizerVendors;
+            shouldUpdateSttLanguage.current = true;
             setRecogVendor(vendor);
             setRecogLabel("");
 

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

@@ -48,6 +48,7 @@ import {
   isUserAccountScope,
   isNotBlank,
   hasLength,
+  hasValue,
 } from "src/utils";
 import { getObscuredGoogleServiceKey } from "./utils";
 import { CredentialStatus } from "./status";
@@ -144,6 +145,13 @@ export const SpeechServiceForm = ({ credential }: SpeechServiceFormProps) => {
   const [optionsInitialChecked, setOptionsInitialChecked] = useState(false);
   const [options, setOptions] = useState("");
   const [tmpOptions, setTmpOptions] = useState("");
+  const [deepgramSttUri, setDeepgramSttUri] = useState("");
+  const [tmpDeepgramSttUri, setTmpDeepgramSttUri] = useState("");
+  const [deepgramSttUseTls, setDeepgramSttUseTls] = useState(false);
+  const [tmpDeepgramSttUseTls, setTmpDeepgramSttUseTls] = useState(false);
+  const [initialDeepgramOnpremCheck, setInitialDeepgramOnpremCheck] =
+    useState(false);
+  const [isDeepgramOnpremEnabled, setIsDeepgramOnpremEnabled] = useState(false);
 
   const handleFile = (file: File) => {
     const handleError = () => {
@@ -292,6 +300,10 @@ export const SpeechServiceForm = ({ credential }: SpeechServiceFormProps) => {
         ...(vendor === VENDOR_ELEVENLABS && {
           options: options || null,
         }),
+        ...(vendor === VENDOR_DEEPGRAM && {
+          deepgram_stt_uri: deepgramSttUri || null,
+          deepgram_stt_use_tls: deepgramSttUseTls ? 1 : 0,
+        }),
       };
 
       if (credential && credential.data) {
@@ -544,6 +556,16 @@ export const SpeechServiceForm = ({ credential }: SpeechServiceFormProps) => {
         setUseCustomVoicesCheck(json.length > 0);
       });
     }
+    if (credential?.data?.deepgram_stt_uri) {
+      setDeepgramSttUri(credential.data.deepgram_stt_uri);
+    }
+    if (credential?.data?.deepgram_stt_use_tls) {
+      setDeepgramSttUseTls(
+        credential?.data?.deepgram_stt_use_tls > 0 ? true : false
+      );
+    }
+    setInitialDeepgramOnpremCheck(hasValue(credential?.data?.deepgram_stt_uri));
+    setIsDeepgramOnpremEnabled(hasValue(credential?.data?.deepgram_stt_uri));
   }, [credential]);
 
   const updateCustomVoices = (
@@ -1112,7 +1134,6 @@ export const SpeechServiceForm = ({ credential }: SpeechServiceFormProps) => {
           </fieldset>
         )}
         {(vendor === VENDOR_WELLSAID ||
-          vendor === VENDOR_DEEPGRAM ||
           vendor === VENDOR_ASSEMBLYAI ||
           vendor == VENDOR_ELEVENLABS ||
           vendor === VENDOR_WHISPER ||
@@ -1132,6 +1153,22 @@ export const SpeechServiceForm = ({ credential }: SpeechServiceFormProps) => {
             />
           </fieldset>
         )}
+        {vendor === VENDOR_DEEPGRAM && (
+          <fieldset>
+            <label htmlFor={`${vendor}_apikey`}>
+              API key{!isDeepgramOnpremEnabled && <span>*</span>}
+            </label>
+            <Passwd
+              id={`${vendor}_apikey`}
+              required={!isDeepgramOnpremEnabled}
+              name={`${vendor}_apikey`}
+              placeholder="API key"
+              value={apiKey ? getObscuredSecret(apiKey) : apiKey}
+              onChange={(e) => setApiKey(e.target.value)}
+              disabled={credential ? true : false}
+            />
+          </fieldset>
+        )}
         {(vendor == VENDOR_ELEVENLABS || vendor == VENDOR_WHISPER) &&
           ttsModels.length > 0 && (
             <fieldset>
@@ -1324,6 +1361,57 @@ export const SpeechServiceForm = ({ credential }: SpeechServiceFormProps) => {
               />
             </fieldset>
           )}
+        {vendor === VENDOR_DEEPGRAM && (
+          <fieldset>
+            <Checkzone
+              disabled={hasValue(credential)}
+              hidden
+              name="use_hosted_deepgram_service"
+              label="Use on-prem Deepgram container"
+              initialCheck={initialDeepgramOnpremCheck}
+              handleChecked={(e) => {
+                // setInitialDeepgramOnpremCheck(!e.target.checked);
+                setIsDeepgramOnpremEnabled(e.target.checked);
+                if (e.target.checked) {
+                  if (tmpDeepgramSttUri) {
+                    setDeepgramSttUri(tmpDeepgramSttUri);
+                  }
+                  if (tmpDeepgramSttUseTls) {
+                    setDeepgramSttUseTls(tmpDeepgramSttUseTls);
+                  }
+                } else {
+                  setTmpDeepgramSttUri(deepgramSttUri);
+                  setDeepgramSttUri("");
+                  setTmpDeepgramSttUseTls(deepgramSttUseTls);
+                  setDeepgramSttUseTls(false);
+                }
+              }}
+            >
+              <label htmlFor="deepgram_uri_for_tts">
+                Container URI<span>*</span>
+              </label>
+              <input
+                id="deepgram_uri_for_tts"
+                required
+                type="text"
+                name="deepgram_uri_for_tts"
+                placeholder="Container URI for TTS"
+                value={deepgramSttUri}
+                onChange={(e) => setDeepgramSttUri(e.target.value)}
+              />
+              <label htmlFor="deepgram_tts_use_tls" className="chk">
+                <input
+                  id="deepgram_tts_use_tls"
+                  name="deepgram_tts_use_tls"
+                  type="checkbox"
+                  onChange={(e) => setDeepgramSttUseTls(e.target.checked)}
+                  defaultChecked={deepgramSttUseTls}
+                />
+                <div>Use TLS</div>
+              </label>
+            </Checkzone>
+          </fieldset>
+        )}
         {vendor === VENDOR_MICROSOFT && (
           <React.Fragment>
             <fieldset>