Feat/rid of env (#443 )

* Get rid of VITE_API_BASE_URL * wip * wip
add use sips scheme to outbound tls gateway (#439 )
2026-01-25 02:08:19 +00:00 · 2024-07-15 08:58:22 -04:00 · 2024-06-15 09:13:04 -04:00 · 2024-05-29 07:57:05 -04:00 · 2024-05-02 07:58:02 -04:00 · 2024-04-30 07:43:44 -04:00
93 changed files with 5307 additions and 7497 deletions
--- a/.env
+++ b/.env
@@ -1,5 +1,5 @@
-VITE_API_BASE_URL=http://127.0.0.1:3000/v1
-VITE_DEV_BASE_URL=http://127.0.0.1:3000/v1
+#VITE_API_BASE_URL=http://127.0.0.1:3000/v1
+#VITE_DEV_BASE_URL=http://127.0.0.1:3000/v1

 ## enables choosing units and lisenced account call limits
 # VITE_APP_ENABLE_ACCOUNT_LIMITS_ALL=true
--- a/.github/workflows/pr-checks.yml
+++ b/.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') }}
--- a/4
+++ b/4
@@ -1,6 +1,6 @@
 MIT License

-Copyright (c) 2022 Drachtio Communications Services, LLC
+Copyright (c) 2018-2024 FirstFive8, Inc.

 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+SOFTWARE.
--- a/cypress/support/component-index.html
+++ b/cypress/support/component-index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
  <head>
    <meta charset="utf-8" />
--- a/cypress/support/component.tsx
+++ b/cypress/support/component.tsx
@@ -44,7 +44,7 @@ declare global {
       */
      mountTestProvider(
        component: React.ReactNode,
-        options?: MountOptions & { authProps?: TestProviderProps["authProps"] }
+        options?: MountOptions & { authProps?: TestProviderProps["authProps"] },
      ): Cypress.Chainable<MountReturn>;
    }
  }
--- a/docs/contributors.md
+++ b/docs/contributors.md
@@ -100,7 +100,7 @@ export const postAccount = (payload: Partial<Account>) => {
 export const putAccount = (sid: string, payload: Partial<Account>) => {
  return putFetch<EmptyResponse, Partial<Account>>(
    `${API_ACCOUNTS}/${sid}`,
-    payload
+    payload,
  );
 };
 ```
--- a/index.html
+++ b/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "jambonz-webapp",
  "description": "A simple provisioning web app for jambonz",
-  "version": "0.8.5",
+  "version": "0.9.0",
  "license": "MIT",
  "type": "module",
  "engines": {
@@ -42,45 +42,45 @@
  },
  "dependencies": {
    "@jambonz/ui-kit": "^0.0.21",
-    "@stripe/react-stripe-js": "^2.1.1",
-    "@stripe/stripe-js": "^1.54.1",
-    "dayjs": "^1.11.5",
+    "@stripe/react-stripe-js": "^2.6.2",
+    "@stripe/stripe-js": "^3.2.0",
+    "dayjs": "^1.11.10",
    "immutability-helper": "^3.1.1",
-    "react": "^18.0.0",
+    "react": "^18.2.0",
    "react-dnd": "16.0.1",
    "react-dnd-html5-backend": "16.0.1",
-    "react-dom": "^18.0.0",
+    "react-dom": "^18.2.0",
    "react-feather": "^2.0.10",
-    "react-router-dom": "^6.3.0",
-    "wavesurfer.js": "^7.3.4"
+    "react-router-dom": "^6.22.3",
+    "wavesurfer.js": "^7.7.9"
  },
  "devDependencies": {
-    "@types/cors": "^2.8.12",
-    "@types/express": "^4.17.13",
-    "@types/node": "^18.6.1",
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
-    "@types/uuid": "^9.0.1",
-    "@typescript-eslint/eslint-plugin": "^5.30.6",
-    "@typescript-eslint/parser": "^5.30.6",
-    "@vitejs/plugin-react": "^1.3.0",
+    "@types/cors": "^2.8.17",
+    "@types/express": "^4.17.21",
+    "@types/node": "^20.12.5",
+    "@types/react": "^18.2.74",
+    "@types/react-dom": "^18.2.24",
+    "@types/uuid": "^9.0.8",
+    "@typescript-eslint/eslint-plugin": "^7.5.0",
+    "@typescript-eslint/parser": "^7.5.0",
+    "@vitejs/plugin-react": "^4.2.1",
    "cors": "^2.8.5",
-    "cypress": "^10.8.0",
+    "cypress": "^13.7.2",
    "eslint": "^8.19.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-jsx-a11y": "^6.6.0",
-    "eslint-plugin-react": "^7.30.1",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-react": "^7.34.1",
    "eslint-plugin-react-hooks": "^4.6.0",
-    "express": "^4.18.1",
-    "husky": "^8.0.1",
-    "lint-staged": "^13.0.3",
-    "nanoid": "^4.0.0",
-    "prettier": "^2.7.1",
-    "sass": "^1.53.0",
-    "serve": "^14.0.1",
-    "ts-node": "^10.9.1",
-    "typescript": "^4.6.3",
-    "vite": "^3.0.0"
+    "express": "^4.19.2",
+    "husky": "^9.0.11",
+    "lint-staged": "^15.2.2",
+    "nanoid": "^5.0.7",
+    "prettier": "^3.2.5",
+    "sass": "^1.74.1",
+    "serve": "^14.2.1",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.4.4",
+    "vite": "^5.2.8"
  },
  "lint-staged": {
    "*.{ts,tsx}": "eslint --max-warnings=0",
--- a/server/dev.server.ts
+++ b/server/dev.server.ts
@@ -111,14 +111,14 @@ app.get(
      page: query.page,
      data: paged,
    });
-  }
+  },
 );

 app.get(
  "/api/Accounts/:account_sid/RecentCalls/:call_sid",
  (req: Request, res: Response) => {
    res.status(200).json({ total: Math.random() > 0.5 ? 1 : 0 });
-  }
+  },
 );

 app.get(
@@ -126,7 +126,7 @@ app.get(
  (req: Request, res: Response) => {
    /** Sample pcap file from: https://wiki.wireshark.org/SampleCaptures#sip-and-rtp */
    const pcap: Buffer = fs.readFileSync(
-      path.resolve(process.cwd(), "server", "sample-sip-rtp-traffic.pcap")
+      path.resolve(process.cwd(), "server", "sample-sip-rtp-traffic.pcap"),
    );

    res
@@ -136,7 +136,7 @@ app.get(
        "Content-Disposition": "attachment",
      })
      .send(pcap); // server: Buffer => client: Blob
-  }
+  },
 );

 app.get(
@@ -144,7 +144,7 @@ app.get(
  (req: Request, res: Response) => {
    /** Sample pcap file from: https://wiki.wireshark.org/SampleCaptures#sip-and-rtp */
    const wav: Buffer = fs.readFileSync(
-      path.resolve(process.cwd(), "server", "example.mp3")
+      path.resolve(process.cwd(), "server", "example.mp3"),
    );

    res
@@ -154,7 +154,7 @@ app.get(
        "Content-Disposition": "attachment",
      })
      .send(wav); // server: Buffer => client: Blob
-  }
+  },
 );

 app.get(
@@ -162,10 +162,10 @@ app.get(
  (req: Request, res: Response) => {
    const json = fs.readFileSync(
      path.resolve(process.cwd(), "server", "sample-jaeger.json"),
-      { encoding: "utf8" }
+      { encoding: "utf8" },
    );
    res.status(200).json(JSON.parse(json));
-  }
+  },
 );

 /** Alerts mock API responses for local dev */
--- a/src/api/constants.ts
+++ b/src/api/constants.ts
@@ -1,9 +1,12 @@
+import { hasValue } from "src/utils";
 import type {
  Currency,
  ElevenLabsOptions,
  LimitField,
  LimitUnitOption,
  PasswordSettings,
+  PlayHTOptions,
+  RimelabsOptions,
  SelectorOptions,
  SipGateway,
  SmppGateway,
@@ -35,8 +38,11 @@ declare global {
 }

 /** https://vitejs.dev/guide/env-and-mode.html#env-files */
-export const API_BASE_URL =
+const CONFIGURED_API_BASE_URL =
  window.JAMBONZ?.API_BASE_URL || import.meta.env.VITE_API_BASE_URL;
+export const API_BASE_URL = hasValue(CONFIGURED_API_BASE_URL)
+  ? CONFIGURED_API_BASE_URL
+  : `${window.location.protocol}//${window.location.hostname}/api/v1`;

 /** Serves mock API responses from a local dev API server */
 export const DEV_BASE_URL = import.meta.env.VITE_DEV_BASE_URL;
@@ -203,6 +209,14 @@ export const DEFAULT_ELEVENLABS_MODEL = "eleven_multilingual_v2";

 export const DEFAULT_WHISPER_MODEL = "tts-1";

+// VERBIO
+export const VERBIO_STT_MODELS = [
+  { name: "V1", value: "V1" },
+  { name: "V2", value: "V2" },
+];
+
+export const DEFAULT_VERBIO_MODEL = "V1";
+
 // Google Custom Voice reported usage options

 export const DEFAULT_GOOGLE_CUSTOM_VOICES_REPORTED_USAGE = "REALTIME";
@@ -211,7 +225,7 @@ export const GOOGLE_CUSTOM_VOICES_REPORTED_USAGE = [
  { name: "REALTIME", value: "REALTIME" },
  { name: "OFFLINE", value: "OFFLINE" },
 ];
-// Eleven Labs options
+// ElevenLabs options
 export const DEFAULT_ELEVENLABS_OPTIONS: Partial<ElevenLabsOptions> = {
  optimize_streaming_latency: 3,
  voice_settings: {
@@ -220,6 +234,24 @@ export const DEFAULT_ELEVENLABS_OPTIONS: Partial<ElevenLabsOptions> = {
    use_speaker_boost: true,
  },
 };
+
+// Rimelabs options
+export const DEFAULT_RIMELABS_OPTIONS: Partial<RimelabsOptions> = {
+  speedAlpha: 1.0,
+  reduceLatency: true,
+};
+
+// PlayHT options
+export const DEFAULT_PLAYHT_OPTIONS: Partial<PlayHTOptions> = {
+  quality: "medium",
+  speed: 1,
+  seed: 1,
+  temperature: 1,
+  emotion: "female_happy",
+  voice_guidance: 3,
+  style_guidance: 20,
+  text_guidance: 1,
+};
 /** Password Length options */

 export const PASSWORD_MIN = 8;
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -101,7 +101,7 @@ import { JaegerRoot } from "./jaeger-types";
 /** Wrap all requests to normalize response handling */
 const fetchTransport = <Type>(
  url: string,
-  options: RequestInit
+  options: RequestInit,
 ): Promise<FetchTransport<Type>> => {
  return new Promise(async (resolve, reject) => {
    try {
@@ -189,7 +189,7 @@ const getAuthHeaders = () => {

 const getQuery = <Type>(query: Type) => {
  return decodeURIComponent(
-    new URLSearchParams(query as unknown as Record<string, string>).toString()
+    new URLSearchParams(query as unknown as Record<string, string>).toString(),
  );
 };

@@ -235,7 +235,7 @@ export const getFetch = <Type>(url: string) => {

 export const postFetch = <Type, Payload = undefined>(
  url: string,
-  payload?: Payload
+  payload?: Payload,
 ) => {
  return fetchTransport<Type>(url, {
    method: "POST",
@@ -261,7 +261,7 @@ export const deleteFetch = <Type>(url: string) => {

 export const deleteFetchWithPayload = <Type, Payload>(
  url: string,
-  payload: Payload
+  payload: Payload,
 ) => {
  return fetchTransport<Type>(url, {
    method: "DELETE",
@@ -291,7 +291,7 @@ export const postLogout = () => {
 export const postServiceProviders = (payload: Partial<ServiceProvider>) => {
  return postFetch<SidResponse, Partial<ServiceProvider>>(
    API_SERVICE_PROVIDERS,
-    payload
+    payload,
  );
 };

@@ -305,24 +305,24 @@ export const postAccount = (payload: Partial<Account>) => {

 export const postAccountBucketCredentialTest = (
  sid: string,
-  payload: Partial<BucketCredential>
+  payload: Partial<BucketCredential>,
 ) => {
  return postFetch<BucketCredentialTestResult, Partial<BucketCredential>>(
    `${API_ACCOUNTS}/${sid}/BucketCredentialTest`,
-    payload
+    payload,
  );
 };

 export const postApplication = (payload: Partial<Application>) => {
  return postFetch<SidResponse, Partial<Application>>(
    API_APPLICATIONS,
-    payload
+    payload,
  );
 };

 export const postSpeechService = (
  sid: string,
-  payload: Partial<SpeechCredential>
+  payload: Partial<SpeechCredential>,
 ) => {
  const userData = parseJwt(getToken());
  const apiUrl =
@@ -336,14 +336,14 @@ export const postSpeechService = (
 export const postMsTeamsTentant = (payload: Partial<MSTeamsTenant>) => {
  return postFetch<SidResponse, Partial<MSTeamsTenant>>(
    API_MS_TEAMS_TENANTS,
-    payload
+    payload,
  );
 };

 export const postPhoneNumber = (payload: Partial<PhoneNumber>) => {
  return postFetch<SidResponse, Partial<PhoneNumber>>(
    API_PHONE_NUMBERS,
-    payload
+    payload,
  );
 };

@@ -359,19 +359,19 @@ export const postCarrier = (sid: string, payload: Partial<Carrier>) => {

 export const postPredefinedCarrierTemplate = (
  currentServiceProviderSid: string,
-  predefinedCarrierSid: string
+  predefinedCarrierSid: string,
 ) => {
  return postFetch<SidResponse>(
-    `${API_BASE_URL}/ServiceProviders/${currentServiceProviderSid}/PredefinedCarriers/${predefinedCarrierSid}`
+    `${API_BASE_URL}/ServiceProviders/${currentServiceProviderSid}/PredefinedCarriers/${predefinedCarrierSid}`,
  );
 };

 export const postPredefinedCarrierTemplateAccount = (
  accountSid: string,
-  predefinedCarrierSid: string
+  predefinedCarrierSid: string,
 ) => {
  return postFetch<SidResponse>(
-    `${API_BASE_URL}/Accounts/${accountSid}/PredefinedCarriers/${predefinedCarrierSid}`
+    `${API_BASE_URL}/Accounts/${accountSid}/PredefinedCarriers/${predefinedCarrierSid}`,
  );
 };

@@ -382,45 +382,45 @@ export const postSipGateway = (payload: Partial<SipGateway>) => {
 export const postSmppGateway = (payload: Partial<SmppGateway>) => {
  return postFetch<SidResponse, Partial<SmppGateway>>(
    API_SMPP_GATEWAY,
-    payload
+    payload,
  );
 };

 export const postServiceProviderLimit = (
  sid: string,
-  payload: Partial<Limit>
+  payload: Partial<Limit>,
 ) => {
  return postFetch<SidResponse, Partial<Limit>>(
    `${API_SERVICE_PROVIDERS}/${sid}/Limits`,
-    payload
+    payload,
  );
 };

 export const postAccountLimit = (sid: string, payload: Partial<Limit>) => {
  return postFetch<SidResponse, Partial<Limit>>(
    `${API_ACCOUNTS}/${sid}/Limits`,
-    payload
+    payload,
  );
 };

 export const postPasswordSettings = (payload: Partial<PasswordSettings>) => {
  return postFetch<EmptyResponse, Partial<PasswordSettings>>(
    API_PASSWORD_SETTINGS,
-    payload
+    payload,
  );
 };

 export const postForgotPassword = (payload: Partial<ForgotPassword>) => {
  return postFetch<EmptyResponse, Partial<ForgotPassword>>(
    API_FORGOT_PASSWORD,
-    payload
+    payload,
  );
 };

 export const postSystemInformation = (payload: Partial<SystemInformation>) => {
  return postFetch<SystemInformation, Partial<SystemInformation>>(
    API_SYSTEM_INFORMATION,
-    payload
+    payload,
  );
 };

@@ -430,11 +430,11 @@ export const postLcr = (payload: Partial<Lcr>) => {

 export const postLcrCreateRoutes = (
  sid: string,
-  payload: Partial<LcrRoute[]>
+  payload: Partial<LcrRoute[]>,
 ) => {
  return postFetch<EmptyResponse, Partial<LcrRoute[]>>(
    `${API_LCRS}/${sid}/Routes`,
-    payload
+    payload,
  );
 };

@@ -443,11 +443,11 @@ export const postLcrRoute = (payload: Partial<LcrRoute>) => {
 };

 export const postLcrCarrierSetEntry = (
-  payload: Partial<LcrCarrierSetEntry>
+  payload: Partial<LcrCarrierSetEntry>,
 ) => {
  return postFetch<SidResponse, Partial<LcrCarrierSetEntry>>(
    API_LCR_CARRIER_SET_ENTRIES,
-    payload
+    payload,
  );
 };

@@ -458,27 +458,27 @@ export const postClient = (payload: Partial<Client>) => {
 export const postRegister = (payload: Partial<RegisterRequest>) => {
  return postFetch<RegisterResponse, Partial<RegisterRequest>>(
    API_REGISTER,
-    payload
+    payload,
  );
 };

 export const postSipRealms = (accountSid: string, domain: string) => {
  return postFetch<EmptyResponse>(
-    `${API_ACCOUNTS}/${accountSid}/SipRealms/${domain}`
+    `${API_ACCOUNTS}/${accountSid}/SipRealms/${domain}`,
  );
 };

 export const postSubscriptions = (payload: Partial<Subscription>) => {
  return postFetch<Subscription, Partial<Subscription>>(
    API_SUBSCRIPTIONS,
-    payload
+    payload,
  );
 };

 export const postChangepassword = (payload: Partial<ChangePassword>) => {
  return postFetch<EmptyResponse, Partial<ChangePassword>>(
    API_CHANGE_PASSWORD,
-    payload
+    payload,
  );
 };

@@ -489,7 +489,7 @@ export const postSignIn = (payload: Partial<SignIn>) => {
 export const postGoogleCustomVoice = (payload: Partial<GoogleCustomVoice>) => {
  return postFetch<SidResponse, Partial<GoogleCustomVoice>>(
    API_GOOGLE_CUSTOM_VOICES,
-    payload
+    payload,
  );
 };
 /** Named wrappers for `putFetch` */
@@ -497,38 +497,38 @@ export const postGoogleCustomVoice = (payload: Partial<GoogleCustomVoice>) => {
 export const putUser = (sid: string, payload: Partial<UserUpdatePayload>) => {
  return putFetch<EmptyResponse, Partial<UserUpdatePayload>>(
    `${API_USERS}/${sid}`,
-    payload
+    payload,
  );
 };

 export const putServiceProvider = (
  sid: string,
-  payload: Partial<ServiceProvider>
+  payload: Partial<ServiceProvider>,
 ) => {
  return putFetch<EmptyResponse, Partial<ServiceProvider>>(
    `${API_SERVICE_PROVIDERS}/${sid}`,
-    payload
+    payload,
  );
 };

 export const putAccount = (sid: string, payload: Partial<Account>) => {
  return putFetch<EmptyResponse, Partial<Account>>(
    `${API_ACCOUNTS}/${sid}`,
-    payload
+    payload,
  );
 };

 export const putApplication = (sid: string, payload: Partial<Application>) => {
  return putFetch<EmptyResponse, Partial<Application>>(
    `${API_APPLICATIONS}/${sid}`,
-    payload
+    payload,
  );
 };

 export const putSpeechService = (
  sid1: string,
  sid2: string,
-  payload: Partial<SpeechCredential>
+  payload: Partial<SpeechCredential>,
 ) => {
  const userData = parseJwt(getToken());
  const apiUrl =
@@ -541,25 +541,25 @@ export const putSpeechService = (

 export const putMsTeamsTenant = (
  sid: string,
-  payload: Partial<MSTeamsTenant>
+  payload: Partial<MSTeamsTenant>,
 ) => {
  return putFetch<EmptyResponse, Partial<MSTeamsTenant>>(
    `${API_MS_TEAMS_TENANTS}/${sid}`,
-    payload
+    payload,
  );
 };

 export const putPhoneNumber = (sid: string, payload: Partial<PhoneNumber>) => {
  return putFetch<EmptyResponse, Partial<PhoneNumber>>(
    `${API_PHONE_NUMBERS}/${sid}`,
-    payload
+    payload,
  );
 };

 export const putCarrier = (
  sid1: string,
  sid2: string,
-  payload: Partial<Carrier>
+  payload: Partial<Carrier>,
 ) => {
  const userData = parseJwt(getToken());
  const apiUrl =
@@ -573,14 +573,14 @@ export const putCarrier = (
 export const putSipGateway = (sid: string, payload: Partial<SipGateway>) => {
  return putFetch<EmptyResponse, Partial<SipGateway>>(
    `${API_SIP_GATEWAY}/${sid}`,
-    payload
+    payload,
  );
 };

 export const putSmppGateway = (sid: string, payload: Partial<SmppGateway>) => {
  return putFetch<EmptyResponse, Partial<SmppGateway>>(
    `${API_SMPP_GATEWAY}/${sid}`,
-    payload
+    payload,
  );
 };

@@ -590,55 +590,55 @@ export const putLcr = (sid: string, payload: Partial<Lcr>) => {

 export const putLcrUpdateRoutes = (
  sid: string,
-  payload: Partial<LcrRoute[]>
+  payload: Partial<LcrRoute[]>,
 ) => {
  return putFetch<EmptyResponse, Partial<LcrRoute[]>>(
    `${API_LCRS}/${sid}/Routes`,
-    payload
+    payload,
  );
 };

 export const putLcrRoutes = (sid: string, payload: Partial<LcrRoute>) => {
  return putFetch<EmptyResponse, Partial<LcrRoute>>(
    `${API_LCR_ROUTES}/${sid}`,
-    payload
+    payload,
  );
 };

 export const putLcrCarrierSetEntries = (
  sid: string,
-  payload: Partial<LcrCarrierSetEntry>
+  payload: Partial<LcrCarrierSetEntry>,
 ) => {
  return putFetch<EmptyResponse, Partial<LcrCarrierSetEntry>>(
    `${API_LCR_CARRIER_SET_ENTRIES}/${sid}`,
-    payload
+    payload,
  );
 };

 export const putClient = (sid: string, payload: Partial<Client>) => {
  return putFetch<EmptyResponse, Partial<Client>>(
    `${API_CLIENTS}/${sid}`,
-    payload
+    payload,
  );
 };

 export const putActivationCode = (
  code: string,
-  payload: Partial<ActivationCode>
+  payload: Partial<ActivationCode>,
 ) => {
  return putFetch<EmptyResponse, Partial<ActivationCode>>(
    `${API_ACTIVATION_CODE}/${code}`,
-    payload
+    payload,
  );
 };

 export const putGoogleCustomVoice = (
  sid: string,
-  payload: Partial<GoogleCustomVoice>
+  payload: Partial<GoogleCustomVoice>,
 ) => {
  return putFetch<EmptyResponse, Partial<GoogleCustomVoice>>(
    `${API_GOOGLE_CUSTOM_VOICES}/${sid}`,
-    payload
+    payload,
  );
 };

@@ -659,7 +659,7 @@ export const deleteApiKey = (sid: string) => {
 export const deleteAccount = (sid: string, payload: Partial<DeleteAccount>) => {
  return deleteFetchWithPayload<EmptyResponse, Partial<DeleteAccount>>(
    `${API_ACCOUNTS}/${sid}`,
-    payload
+    payload,
  );
 };

@@ -669,7 +669,7 @@ export const deleteApplication = (sid: string) => {

 export const deleteSpeechService = (sid1: string, sid2: string) => {
  return deleteFetch<EmptyResponse>(
-    `${API_SERVICE_PROVIDERS}/${sid1}/SpeechCredentials/${sid2}`
+    `${API_SERVICE_PROVIDERS}/${sid1}/SpeechCredentials/${sid2}`,
  );
 };

@@ -695,16 +695,16 @@ export const deleteSmppGateway = (sid: string) => {

 export const deleteServiceProviderLimit = (
  sid: string,
-  cat: LimitCategories
+  cat: LimitCategories,
 ) => {
  return deleteFetch<EmptyResponse>(
-    `${API_SERVICE_PROVIDERS}/${sid}/Limits?category=${cat}`
+    `${API_SERVICE_PROVIDERS}/${sid}/Limits?category=${cat}`,
  );
 };

 export const deleteAccountLimit = (sid: string, cat: LimitCategories) => {
  return deleteFetch<EmptyResponse>(
-    `${API_ACCOUNTS}/${sid}/Limits?category=${cat}`
+    `${API_ACCOUNTS}/${sid}/Limits?category=${cat}`,
  );
 };

@@ -747,7 +747,7 @@ export const getServiceProviders = () => {

 export const getAccountWebhook = (sid: string) => {
  return getFetch<SecretResponse>(
-    `${API_ACCOUNTS}/${sid}/WebhookSecret?regenerate=true`
+    `${API_ACCOUNTS}/${sid}/WebhookSecret?regenerate=true`,
  );
 };

@@ -769,7 +769,7 @@ export const getLcrRoute = (sid: string) => {

 export const getLcrCarrierSetEtries = (sid: string) => {
  return getFetch<LcrCarrierSetEntry[]>(
-    `${API_LCR_CARRIER_SET_ENTRIES}?lcr_route_sid=${sid}`
+    `${API_LCR_CARRIER_SET_ENTRIES}?lcr_route_sid=${sid}`,
  );
 };

@@ -783,12 +783,12 @@ export const getClient = (sid: string) => {

 export const getAvailability = (domain: string) => {
  return getFetch<Availability>(
-    `${API_AVAILABILITY}?type=subdomain&value=${domain}`
+    `${API_AVAILABILITY}?type=subdomain&value=${domain}`,
  );
 };

 export const getGoogleCustomVoices = (
-  query: Partial<GoogleCustomVoicesQuery>
+  query: Partial<GoogleCustomVoicesQuery>,
 ) => {
  const qryStr = getQuery<Partial<GoogleCustomVoicesQuery>>(query);
  return getFetch<GoogleCustomVoice[]>(`${API_GOOGLE_CUSTOM_VOICES}?${qryStr}`);
@@ -806,7 +806,7 @@ export const getRecentCalls = (sid: string, query: Partial<CallQuery>) => {
  return getFetch<PagedResponse<RecentCall>>(
    import.meta.env.DEV
      ? `${DEV_BASE_URL}/Accounts/${sid}/RecentCalls?${qryStr}`
-      : `${API_ACCOUNTS}/${sid}/RecentCalls?${qryStr}`
+      : `${API_ACCOUNTS}/${sid}/RecentCalls?${qryStr}`,
  );
 };

@@ -814,7 +814,7 @@ export const getRecentCall = (sid: string, sipCallId: string) => {
  return getFetch<TotalResponse>(
    import.meta.env.DEV
      ? `${DEV_BASE_URL}/Accounts/${sid}/RecentCalls/${sipCallId}`
-      : `${API_ACCOUNTS}/${sid}/RecentCalls/${sipCallId}`
+      : `${API_ACCOUNTS}/${sid}/RecentCalls/${sipCallId}`,
  );
 };

@@ -822,7 +822,7 @@ export const getPcap = (sid: string, sipCallId: string, method: string) => {
  return getBlob(
    import.meta.env.DEV
      ? `${DEV_BASE_URL}/Accounts/${sid}/RecentCalls/${sipCallId}/${method}/pcap`
-      : `${API_ACCOUNTS}/${sid}/RecentCalls/${sipCallId}/${method}/pcap`
+      : `${API_ACCOUNTS}/${sid}/RecentCalls/${sipCallId}/${method}/pcap`,
  );
 };

@@ -830,30 +830,30 @@ export const getJaegerTrace = (sid: string, traceId: string) => {
  return getFetch<JaegerRoot>(
    import.meta.env.DEV
      ? `${DEV_BASE_URL}/Accounts/${sid}/RecentCalls/trace/${traceId}`
-      : `${API_ACCOUNTS}/${sid}/RecentCalls/trace/${traceId}`
+      : `${API_ACCOUNTS}/${sid}/RecentCalls/trace/${traceId}`,
  );
 };

 export const getServiceProviderRecentCall = (
  sid: string,
-  sipCallId: string
+  sipCallId: string,
 ) => {
  return getFetch<TotalResponse>(
    import.meta.env.DEV
      ? `${DEV_BASE_URL}/ServiceProviders/${sid}/RecentCalls/${sipCallId}`
-      : `${API_SERVICE_PROVIDERS}/${sid}/RecentCalls/${sipCallId}`
+      : `${API_SERVICE_PROVIDERS}/${sid}/RecentCalls/${sipCallId}`,
  );
 };

 export const getServiceProviderPcap = (
  sid: string,
  sipCallId: string,
-  method: string
+  method: string,
 ) => {
  return getBlob(
    import.meta.env.DEV
      ? `${DEV_BASE_URL}/ServiceProviders/${sid}/RecentCalls/${sipCallId}/${method}/pcap`
-      : `${API_SERVICE_PROVIDERS}/${sid}/RecentCalls/${sipCallId}/${method}/pcap`
+      : `${API_SERVICE_PROVIDERS}/${sid}/RecentCalls/${sipCallId}/${method}/pcap`,
  );
 };

@@ -863,7 +863,7 @@ export const getAlerts = (sid: string, query: Partial<PageQuery>) => {
  return getFetch<PagedResponse<Alert>>(
    import.meta.env.DEV
      ? `${DEV_BASE_URL}/Accounts/${sid}/Alerts?${qryStr}`
-      : `${API_ACCOUNTS}/${sid}/Alerts?${qryStr}`
+      : `${API_ACCOUNTS}/${sid}/Alerts?${qryStr}`,
  );
 };

@@ -874,7 +874,7 @@ export const getPrice = () => {
 export const getSpeechSupportedLanguagesAndVoices = (
  sid: string | undefined,
  vendor: string,
-  label: string
+  label: string,
 ) => {
  const userData = parseJwt(getToken());
  const apiUrl =
@@ -946,7 +946,7 @@ export const useServiceProviderData: UseApiData = <Type>(apiPath: string) => {

    if (currentServiceProvider) {
      getFetch<Type>(
-        `${API_SERVICE_PROVIDERS}/${currentServiceProvider.service_provider_sid}/${apiPath}`
+        `${API_SERVICE_PROVIDERS}/${currentServiceProvider.service_provider_sid}/${apiPath}`,
      )
        .then(({ json }) => {
          if (!ignore) {
--- a/src/api/types.ts
+++ b/src/api/types.ts
@@ -63,11 +63,9 @@ export interface FetchError {
 }

 export interface UseApiData {
-  <Type>(apiPath: string): [
-    Type | undefined,
-    () => void,
-    FetchError | undefined
-  ];
+  <Type>(
+    apiPath: string,
+  ): [Type | undefined, () => void, FetchError | undefined];
 }

 /** API related interfaces */
@@ -392,6 +390,8 @@ export interface SpeechCredential {
  region: null | string;
  aws_region: null | string;
  api_key: null | string;
+  role_arn: null | string;
+  user_id: null | string;
  access_key_id: null | string;
  secret_access_key: null | string;
  service_key: null | string;
@@ -402,6 +402,7 @@ export interface SpeechCredential {
  custom_stt_endpoint_url: null | string;
  custom_stt_endpoint: null | string;
  client_id: null | string;
+  client_secret: null | string;
  secret: null | string;
  nuance_tts_uri: null | string;
  nuance_stt_uri: null | string;
@@ -417,8 +418,12 @@ export interface SpeechCredential {
  label: null | string;
  cobalt_server_uri: null | string;
  model_id: null | string;
+  voice_engine: null | string;
+  engine_version: null | string;
  model: null | string;
  options: null | string;
+  deepgram_stt_uri: null | string;
+  deepgram_stt_use_tls: number;
 }

 export interface Alert {
@@ -483,6 +488,8 @@ export interface SipGateway extends Gateway {
  protocol?: string;
  port: number | null;
  pad_crypto?: boolean;
+  send_options_ping?: boolean;
+  use_sips_scheme?: boolean;
 }

 export interface SmppGateway extends Gateway {
@@ -718,3 +725,19 @@ export interface ElevenLabsOptions {
    use_speaker_boost: boolean;
  }>;
 }
+
+export interface PlayHTOptions {
+  quality: string;
+  speed: number;
+  seed: number;
+  temperature: number;
+  emotion: string;
+  voice_guidance: number;
+  style_guidance: number;
+  text_guidance: number;
+}
+
+export interface RimelabsOptions {
+  speedAlpha: number;
+  reduceLatency: boolean;
+}
--- a/src/components/application-filter.cy.tsx
+++ b/src/components/application-filter.cy.tsx
@@ -12,7 +12,7 @@ import applications from "../../cypress/fixtures/applications.json";

 /** Wrapper to perform React state setup */
 const ApplicationFilterTestWrapper = (
-  props: Partial<ApplicationFilterProps>
+  props: Partial<ApplicationFilterProps>,
 ) => {
  const [application, setApplication] = useState("");

@@ -47,7 +47,7 @@ describe("<ApplicationFilter>", () => {
    /** Default value is properly set to first option */
    cy.get("select").should(
      "have.value",
-      applicationsSorted[0].application_sid
+      applicationsSorted[0].application_sid,
    );
  });

@@ -58,7 +58,7 @@ describe("<ApplicationFilter>", () => {
    cy.get("select").select(applicationsSorted[1].application_sid);
    cy.get("select").should(
      "have.value",
-      applicationsSorted[1].application_sid
+      applicationsSorted[1].application_sid,
    );
  });

@@ -75,7 +75,7 @@ describe("<ApplicationFilter>", () => {
  it("renders default option", () => {
    /** Test with the `defaultOption` prop */
    cy.mount(
-      <ApplicationFilterTestWrapper defaultOption="Choose Application" />
+      <ApplicationFilterTestWrapper defaultOption="Choose Application" />,
    );

    /** No default value is set when this prop is present */
--- a/src/components/clipboard/index.tsx
+++ b/src/components/clipboard/index.tsx
@@ -20,7 +20,7 @@ export const ClipBoard = ({ text, id = "", name = "" }: ClipBoardProps) => {
        toastSuccess(
          <>
            <strong>{text}</strong> copied to clipboard
-          </>
+          </>,
        );
      })
      .catch(() => {
@@ -28,7 +28,7 @@ export const ClipBoard = ({ text, id = "", name = "" }: ClipBoardProps) => {
          <>
            Unable to copy <strong>{text}</strong>, please select the text and
            right click to copy
-          </>
+          </>,
        );
      });
  };
--- a/src/components/forms/account-select.tsx
+++ b/src/components/forms/account-select.tsx
@@ -28,7 +28,7 @@ export const AccountSelect = forwardRef<SelectorRef, AccountSelectProps>(
      defaultOption,
      ...restProps
    }: AccountSelectProps,
-    ref
+    ref,
  ) => {
    useEffect(() => {
      if (hasLength(accounts) && !accountSid && !defaultOption) {
@@ -56,14 +56,14 @@ export const AccountSelect = forwardRef<SelectorRef, AccountSelectProps>(
                  name: account.name,
                  value: account.account_sid,
                }))
-              : []
+              : [],
          )}
          onChange={(e) => setAccountSid(e.target.value)}
          {...restProps}
        />
      </>
    );
-  }
+  },
 );

 AccountSelect.displayName = "AccountSelect";
--- a/src/components/forms/application-select.tsx
+++ b/src/components/forms/application-select.tsx
@@ -34,7 +34,7 @@ export const ApplicationSelect = forwardRef<
      defaultOption,
      ...restProps
    }: ApplicationSelectProps,
-    ref
+    ref,
  ) => {
    useEffect(() => {
      if (hasLength(applications) && !applicationSid && !defaultOption) {
@@ -62,14 +62,14 @@ export const ApplicationSelect = forwardRef<
                  name: application.name,
                  value: application.application_sid,
                }))
-              : []
+              : [],
          )}
          onChange={(e) => setApplicationSid(e.target.value)}
          {...restProps}
        />
      </>
    );
-  }
+  },
 );

 ApplicationSelect.displayName = "ApplicationSelect";
--- a/src/components/forms/checkzone/index.tsx
+++ b/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,8 +29,9 @@ export const Checkzone = forwardRef<CheckzoneRef, CheckzoneProps>(
      children,
      initialCheck,
      handleChecked,
+      disabled = false,
    }: CheckzoneProps,
-    ref
+    ref,
  ) => {
    const [checked, setChecked] = useState(false);
    const classesTop = classNames({
@@ -51,6 +53,7 @@ export const Checkzone = forwardRef<CheckzoneRef, CheckzoneProps>(
        <label>
          <div className="label-container">
            <input
+              disabled={disabled}
              ref={ref}
              type="checkbox"
              name={name}
@@ -71,7 +74,7 @@ export const Checkzone = forwardRef<CheckzoneRef, CheckzoneProps>(
        {checked && <div className={classesIn}>{children}</div>}
      </div>
    );
-  }
+  },
 );

 Checkzone.displayName = "Checkzone";
--- a/src/components/forms/file-upload/index.tsx
+++ b/src/components/forms/file-upload/index.tsx
@@ -25,7 +25,7 @@ export const FileUpload = forwardRef<FileRef, FileProps>(
      disabled,
      ...restProps
    }: FileProps,
-    ref
+    ref,
  ) => {
    const [fileName, setFileName] = useState("");
    const [focus, setFocus] = useState(false);
@@ -73,7 +73,7 @@ export const FileUpload = forwardRef<FileRef, FileProps>(
        </div>
      </div>
    );
-  }
+  },
 );

 FileUpload.displayName = "FileUpload";
--- a/src/components/forms/local-limits.tsx
+++ b/src/components/forms/local-limits.tsx
@@ -52,12 +52,12 @@ export const LocalLimits = ({
    ? LIMITS.filter((limit) =>
        unit === LIMIT_SESS
          ? !limit.category.includes(LIMIT_MIN)
-          : limit.category.includes(LIMIT_MIN)
+          : limit.category.includes(LIMIT_MIN),
      )
    : LIMITS.filter(
        (limit) =>
          !limit.category.includes("license") &&
-          !limit.category.includes(LIMIT_MIN)
+          !limit.category.includes(LIMIT_MIN),
      );

  useEffect(() => {
@@ -130,7 +130,7 @@ export const LocalLimits = ({
                  }
                  onChange={(e) => {
                    const limit = localLimits.find(
-                      (l) => l.category === category
+                      (l) => l.category === category,
                    );
                    const value = e.target.value ? Number(e.target.value) : "";

@@ -139,8 +139,8 @@ export const LocalLimits = ({
                        localLimits.map((l) =>
                          l.category === category
                            ? { ...l, quantity: value }
-                            : l
-                        )
+                            : l,
+                        ),
                      );
                    } else {
                      setLocalLimits([
--- a/src/components/forms/passwd/index.tsx
+++ b/src/components/forms/passwd/index.tsx
@@ -24,7 +24,7 @@ export const Passwd = forwardRef<PasswdRef, PasswdProps>(
      locked = false,
      ...restProps
    }: PasswdProps,
-    ref
+    ref,
  ) => {
    const [reveal, setReveal] = useState(false);

@@ -55,7 +55,7 @@ export const Passwd = forwardRef<PasswdRef, PasswdProps>(
        )}
      </div>
    );
-  }
+  },
 );

 Passwd.displayName = "Passwd";
--- a/src/components/forms/selector/index.tsx
+++ b/src/components/forms/selector/index.tsx
@@ -20,7 +20,7 @@ type SelectorRef = HTMLSelectElement;
 export const Selector = forwardRef<SelectorRef, SelectorProps>(
  (
    { id, name, value, options, disabled, ...restProps }: SelectorProps,
-    ref
+    ref,
  ) => {
    const [focus, setFocus] = useState(false);
    const classes = {
@@ -53,7 +53,7 @@ export const Selector = forwardRef<SelectorRef, SelectorProps>(
        </span>
      </div>
    );
-  }
+  },
 );

 Selector.displayName = "Selector";
--- a/src/components/modal/index.tsx
+++ b/src/components/modal/index.tsx
@@ -50,7 +50,7 @@ export const Modal = ({
        </ButtonGroup>
      </div>
    </div>,
-    portal
+    portal,
  );
 };

@@ -87,7 +87,7 @@ export const ModalForm = ({
        </ButtonGroup>
      </form>
    </div>,
-    portal
+    portal,
  );
 };

@@ -113,7 +113,7 @@ export const ModalClose = ({ children, handleClose }: CloseProps) => {
        </ButtonGroup>
      </div>
    </div>,
-    portal
+    portal,
  );
 };

@@ -147,6 +147,6 @@ export const ModalLoader = ({ children }: LoaderProps) => {
        </div>
      </div>
    </div>,
-    portal
+    portal,
  );
 };
--- a/src/components/pagination/index.tsx
+++ b/src/components/pagination/index.tsx
@@ -32,7 +32,7 @@ export const Pagination = ({
    (num: number) => {
      setPageNumber(Math.max(1, Math.min(maxPageNumber, num)));
    },
-    [maxPageNumber, setPageNumber]
+    [maxPageNumber, setPageNumber],
  );

  const handleNumberMapping = useCallback(
@@ -100,7 +100,7 @@ export const Pagination = ({
        );
      }
    },
-    [maxPageNumber, pageNumber]
+    [maxPageNumber, pageNumber],
  );

  return (
--- a/src/components/scoped-access.cy.tsx
+++ b/src/components/scoped-access.cy.tsx
@@ -29,7 +29,7 @@ describe("<ScopedAccess>", () => {
    cy.mountTestProvider(
      <ScopedAccessTestWrapper scope={Scope.admin} user={user}>
        <H1>ScopedAccess: admin</H1>
-      </ScopedAccessTestWrapper>
+      </ScopedAccessTestWrapper>,
    );
    cy.get(".scope-div").should("exist");
  });
@@ -44,7 +44,7 @@ describe("<ScopedAccess>", () => {
    cy.mountTestProvider(
      <ScopedAccessTestWrapper scope={Scope.admin} user={user}>
        <H1>ScopedAccess: service_provider</H1>
-      </ScopedAccessTestWrapper>
+      </ScopedAccessTestWrapper>,
    );
    cy.get(".scope-div").should("not.exist");
  });
@@ -59,7 +59,7 @@ describe("<ScopedAccess>", () => {
    cy.mountTestProvider(
      <ScopedAccessTestWrapper scope={Scope.admin} user={user}>
        <H1>ScopedAccess: account</H1>
-      </ScopedAccessTestWrapper>
+      </ScopedAccessTestWrapper>,
    );
    cy.get(".scope-div").should("not.exist");
  });
--- a/src/components/search-filter/index.tsx
+++ b/src/components/search-filter/index.tsx
@@ -46,7 +46,7 @@ export const SearchFilter = ({
        setAppearance(false);
      }
    },
-    [setFilterValue]
+    [setFilterValue],
  );

  const handleActive = useCallback(() => {
--- a/src/components/select-filter.tsx
+++ b/src/components/select-filter.tsx
@@ -42,7 +42,7 @@ export const SelectFilter = ({
            setFilterValue(e.target.value);
            const queryFilter = createFilterString(
              e.target.value,
-              label as string
+              label as string,
            );
            setQueryFilter(queryFilter);

--- a/src/components/toast/index.tsx
+++ b/src/components/toast/index.tsx
@@ -23,6 +23,6 @@ export const Toast = ({ type, message }: ToastProps) => {
        {message}
      </div>
    </div>,
-    portal
+    portal,
  );
 };
--- a/src/containers/internal/navi/index.tsx
+++ b/src/containers/internal/navi/index.tsx
@@ -76,7 +76,7 @@ export const Navi = ({

  const naviByoFiltered = useMemo(() => {
    return naviByo.filter(
-      (item) => !item.acl || (item.acl && accessControl[item.acl])
+      (item) => !item.acl || (item.acl && accessControl[item.acl]),
    );
  }, [accessControl, currentServiceProvider]);

@@ -100,7 +100,7 @@ export const Navi = ({
        toastSuccess(
          <>
            Added new service provider <strong>{name}</strong>
-          </>
+          </>,
        );
        dispatch({ type: "serviceProviders" });
        setSid(json.sid);
@@ -123,7 +123,7 @@ export const Navi = ({
    setSid(getActiveSP());
    if (sid) {
      const serviceProvider = serviceProviders.find(
-        (sp) => sp.service_provider_sid === sid
+        (sp) => sp.service_provider_sid === sid,
      );

      if (serviceProvider) {
--- a/src/containers/internal/views/accounts/delete.tsx
+++ b/src/containers/internal/views/accounts/delete.tsx
@@ -75,19 +75,19 @@ export const DeleteAccount = ({
      getFetch<PhoneNumber[]>(API_PHONE_NUMBERS),
      getFetch<MSTeamsTenant[]>(API_MS_TEAMS_TENANTS),
      getFetch<ApiKey[]>(
-        `${API_BASE_URL}/Accounts/${account.account_sid}/ApiKeys`
+        `${API_BASE_URL}/Accounts/${account.account_sid}/ApiKeys`,
      ),
    ]).then(([appsRes, phonesRes, teamsRes, apiKeysRes]) => {
      if (!ignore) {
        const used = {
          apps: appsRes.json.filter(
-            (app) => app.account_sid === account.account_sid
+            (app) => app.account_sid === account.account_sid,
          ),
          phones: phonesRes.json.filter(
-            (phone) => phone.account_sid === account.account_sid
+            (phone) => phone.account_sid === account.account_sid,
          ),
          teams: teamsRes.json.filter(
-            (team) => team.account_sid === account.account_sid
+            (team) => team.account_sid === account.account_sid,
          ),
          apiKeys: apiKeysRes.json,
        };
--- a/src/containers/internal/views/accounts/edit-sip-realm.tsx
+++ b/src/containers/internal/views/accounts/edit-sip-realm.tsx
@@ -44,8 +44,8 @@ export const EditSipRealm = () => {
      getAvailability(`${name}.${userData?.account?.root_domain}`)
        .then(({ json }) =>
          setIsValidDomain(
-            Boolean(json.available) && hasValue(name) && name.length != 0
-          )
+            Boolean(json.available) && hasValue(name) && name.length != 0,
+          ),
        )
        .catch((error) => {
          setErrorMessage(error.msg);
--- a/src/containers/internal/views/accounts/edit.tsx
+++ b/src/containers/internal/views/accounts/edit.tsx
@@ -19,14 +19,14 @@ export const EditAccount = () => {
  const params = useParams();
  const user = useSelectState("user");
  const [data, refetch, error] = useApiData<Account>(
-    `Accounts/${params.account_sid}`
+    `Accounts/${params.account_sid}`,
  );
  const [limitsData, refetchLimits] = useApiData<Limit[]>(
-    `Accounts/${params.account_sid}/Limits`
+    `Accounts/${params.account_sid}/Limits`,
  );
  const [apps] = useApiData<Application[]>("Applications");
  const [ttsCache, ttsCacheFetcher] = useApiData<TtsCache>(
-    `Accounts/${params.account_sid}/TtsCache`
+    `Accounts/${params.account_sid}/TtsCache`,
  );

  useScopedRedirect(
@@ -36,7 +36,7 @@ export const EditAccount = () => {
      : ROUTE_INTERNAL_APPLICATIONS,
    user,
    "You do not have access to this resource",
-    data
+    data,
  );

  /** Handle error toast at top level... */
--- a/src/containers/internal/views/accounts/form.tsx
+++ b/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,11 +86,14 @@ 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[]>(
-    `/Accounts/${params.account_sid}/SpeechCredentials`
+    `/Accounts/${params.account_sid}/SpeechCredentials`,
  );
  const [name, setName] = useState("");
  const [realm, setRealm] = useState("");
@@ -183,7 +187,7 @@ export const AccountForm = ({

    if (deleteMessage !== "delete my account") {
      toastError(
-        "You must type the delete message correctly in order to delete your account."
+        "You must type the delete message correctly in order to delete your account.",
      );
      if (
        deleteMessageRef.current &&
@@ -281,7 +285,7 @@ export const AccountForm = ({
        } else {
          toastError(json.reason);
        }
-      }
+      },
    );
  };

@@ -306,7 +310,7 @@ export const AccountForm = ({
          return limit.quantity === ""
            ? deleteAccountLimit(sid, limit.category)
            : postAccountLimit(sid, limit);
-        })
+        }),
      )
        .then(() => {
          if (limits) {
@@ -357,18 +361,18 @@ export const AccountForm = ({
        filtered.find(
          (a) =>
            a.service_provider_sid !== account.data!.service_provider_sid &&
-            a.name === name
+            a.name === name,
        )
      ) {
        setMessage(
-          "The name you have entered is already in use on another one of your accounts."
+          "The name you have entered is already in use on another one of your accounts.",
        );
        return;
      }

      if (filtered.find((a) => a.sip_realm === realm)) {
        setMessage(
-          "The SIP Realm you have entered is already in use on another one of your accounts."
+          "The SIP Realm you have entered is already in use on another one of your accounts.",
        );
        return;
      }
@@ -518,7 +522,7 @@ export const AccountForm = ({
      }
      if (account.data.bucket_credential?.secret_access_key) {
        setBucketSecretAccessKey(
-          account.data.bucket_credential?.secret_access_key
+          account.data.bucket_credential?.secret_access_key,
        );
      }
      if (account.data.bucket_credential?.region) {
@@ -526,7 +530,7 @@ export const AccountForm = ({
      }
      if (account.data.bucket_credential?.connection_string) {
        setAzureConnectionString(
-          account.data.bucket_credential.connection_string
+          account.data.bucket_credential.connection_string,
        );
      }
      if (account.data.bucket_credential?.endpoint) {
@@ -536,7 +540,7 @@ export const AccountForm = ({
        setRecordAllCalls(account.data.record_all_calls ? true : false);
      }
      setBucketCredentialChecked(
-        hasValue(bucketVendor) && bucketVendor.length !== 0
+        hasValue(bucketVendor) && bucketVendor.length !== 0,
      );
      if (account.data.bucket_credential?.tags) {
        setBucketTags(account.data.bucket_credential?.tags);
@@ -548,11 +552,11 @@ export const AccountForm = ({
        setBucketGoogleServiceKey(tmpBucketGoogleServiceKey);
      } else if (account.data.bucket_credential?.service_key) {
        setBucketGoogleServiceKey(
-          JSON.parse(account.data.bucket_credential?.service_key)
+          JSON.parse(account.data.bucket_credential?.service_key),
        );
      }
      setInitialCheckRecordAllCall(
-        hasValue(bucketVendor) && bucketVendor.length !== 0
+        hasValue(bucketVendor) && bucketVendor.length !== 0,
      );
    }
  }, [account]);
@@ -572,7 +576,7 @@ export const AccountForm = ({
          : { quantity: 0 };
        const callSessionRecord = products
          ? products.find(
-              (item) => item.name === "concurrent call session"
+              (item) => item.name === "concurrent call session",
            ) || { quantity: 0 }
          : { quantity: 0 };
        const quantity =
@@ -588,10 +592,10 @@ export const AccountForm = ({
              } simultaneous calls and ${quantity} registered devices.${
                trial_end_date
                  ? ` Your free trial will end on ${dayjs(
-                      trial_end_date
+                      trial_end_date,
                    ).format("MMM DD, YYYY")}.`
                  : ""
-              }`
+              }`,
            );
            break;
          case PlanType.PAID:
@@ -603,7 +607,7 @@ export const AccountForm = ({
                  CurrencySymbol[invoice.currency || "usd"]
                }${(invoice.total || 0) / 100} on ${dayjs
                  .unix(Number(invoice.next_payment_attempt))
-                  .format("MMM DD, YYYY")}.`
+                  .format("MMM DD, YYYY")}.`,
              );
            }

@@ -611,11 +615,11 @@ export const AccountForm = ({
          case PlanType.FREE:
            if (is_active) {
              setSubscriptionDescription(
-                `You are currently on the Free plan (trial period expired). You are limited to ${callSessionRecord.quantity} simultaneous calls and ${quantity} registered devices`
+                `You are currently on the Free plan (trial period expired). You are limited to ${callSessionRecord.quantity} simultaneous calls and ${quantity} registered devices`,
              );
            } else {
              setSubscriptionDescription(
-                "Your free trial has expired.  Please upgrade your subscription to a paid plan to continue service"
+                "Your free trial has expired.  Please upgrade your subscription to a paid plan to continue service",
              );
            }
            break;
@@ -629,10 +633,10 @@ export const AccountForm = ({
  const updateBucketTags = (
    index: number,
    key: string,
-    value: typeof bucketTags[number][keyof AwsTag]
+    value: (typeof bucketTags)[number][keyof AwsTag],
  ) => {
    setBucketTags(
-      bucketTags.map((b, i) => (i === index ? { ...b, [key]: value } : b))
+      bucketTags.map((b, i) => (i === index ? { ...b, [key]: value } : b)),
    );
  };

@@ -906,7 +910,7 @@ export const AccountForm = ({
                    defaultOption="None"
                    application={[application.stateVal, application.stateSet]}
                    applications={apps.filter(
-                      (app) => app.account_sid === account.data!.account_sid
+                      (app) => app.account_sid === account.data!.account_sid,
                    )}
                  />
                </fieldset>
@@ -914,7 +918,7 @@ export const AccountForm = ({
            })}
          {webhooks.map((webhook) => {
            const selectOptions = WEBHOOK_METHODS.filter((wm) =>
-              webhook.prefix === "queue_event_hook" ? wm.name !== "GET" : true
+              webhook.prefix === "queue_event_hook" ? wm.name !== "GET" : true,
            );

            return (
@@ -1171,10 +1175,10 @@ export const AccountForm = ({
                          <code>
                            {JSON.stringify(
                              getObscuredGoogleServiceKey(
-                                bucketGoogleServiceKey
+                                bucketGoogleServiceKey,
                              ),
                              null,
-                              2
+                              2,
                            )}
                          </code>
                        </pre>
@@ -1204,10 +1208,10 @@ export const AccountForm = ({
                    bucketVendor === BUCKET_VENDOR_S3_COMPATIBLE
                      ? "S3"
                      : bucketVendor === BUCKET_VENDOR_GOOGLE
-                      ? "Google Cloud Storage"
-                      : bucketVendor === BUCKET_VENDOR_AZURE
-                      ? "Azure Cloud Storage"
-                      : ""}{" "}
+                        ? "Google Cloud Storage"
+                        : bucketVendor === BUCKET_VENDOR_AZURE
+                          ? "Azure Cloud Storage"
+                          : ""}{" "}
                    Tags
                  </label>
                  {hasLength(bucketTags) &&
@@ -1247,7 +1251,7 @@ export const AccountForm = ({
                          type="button"
                          onClick={() => {
                            setBucketTags(
-                              bucketTags.filter((g2, i2) => i2 !== i)
+                              bucketTags.filter((g2, i2) => i2 !== i),
                            );
                          }}
                        >
--- a/src/containers/internal/views/accounts/index.tsx
+++ b/src/containers/internal/views/accounts/index.tsx
@@ -30,7 +30,7 @@ export const Accounts = () => {
    Scope.service_provider,
    `${ROUTE_INTERNAL_ACCOUNTS}/${user?.account_sid}/edit`,
    user,
-    "You do not have permissions to manage all accounts"
+    "You do not have permissions to manage all accounts",
  );

  const handleDelete = () => {
@@ -40,7 +40,7 @@ export const Accounts = () => {
        user.account_sid !== account.account_sid
      ) {
        toastError(
-          "You do not have permissions to make changes to this Account"
+          "You do not have permissions to make changes to this Account",
        );
        return;
      }
@@ -52,7 +52,7 @@ export const Accounts = () => {
          toastSuccess(
            <>
              Deleted account <strong>{account.name}</strong>
-            </>
+            </>,
          );
        })
        .catch((error) => {
--- a/src/containers/internal/views/accounts/manage-payment-form.tsx
+++ b/src/containers/internal/views/accounts/manage-payment-form.tsx
@@ -35,7 +35,7 @@ export const ManagePaymentForm = () => {
        if (json.status === "success") {
          toastSuccess("Payment completed successfully");
          navigate(
-            `${ROUTE_INTERNAL_ACCOUNTS}/${userData?.account?.account_sid}/edit`
+            `${ROUTE_INTERNAL_ACCOUNTS}/${userData?.account?.account_sid}/edit`,
          );
        } else if (json.status === "action required") {
          if (stripe) {
--- a/src/containers/internal/views/accounts/subscription-form.tsx
+++ b/src/containers/internal/views/accounts/subscription-form.tsx
@@ -33,7 +33,7 @@ const SubscriptionForm = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const isModifySubscription = location.pathname.includes(
-    "modify-subscription"
+    "modify-subscription",
  );
  const [billingCharge, setBillingCharge] = useState<Subscription | null>(null);
  const [isShowModalLoader, setIsShowModalLoader] = useState(false);
@@ -69,7 +69,7 @@ const SubscriptionForm = () => {
        if (json.status === "success") {
          toastSuccess("Payment completed successfully");
          navigate(
-            `${ROUTE_INTERNAL_ACCOUNTS}/${userData?.account?.account_sid}/edit`
+            `${ROUTE_INTERNAL_ACCOUNTS}/${userData?.account?.account_sid}/edit`,
          );
        } else if (json.status === "action required") {
          if (stripe) {
@@ -176,7 +176,7 @@ const SubscriptionForm = () => {
      .then(() => {
        toastSuccess("Downgrade to free plan completed successfully");
        navigate(
-          `${ROUTE_INTERNAL_ACCOUNTS}/${userData?.account?.account_sid}/edit`
+          `${ROUTE_INTERNAL_ACCOUNTS}/${userData?.account?.account_sid}/edit`,
        );
      })
      .catch((error) => {
@@ -201,16 +201,16 @@ const SubscriptionForm = () => {
    })
      .then(() => {
        toastSuccess(
-          "Your subscription capacity has been successfully modified."
+          "Your subscription capacity has been successfully modified.",
        );
        navigate(
-          `${ROUTE_INTERNAL_ACCOUNTS}/${userData?.account?.account_sid}/edit`
+          `${ROUTE_INTERNAL_ACCOUNTS}/${userData?.account?.account_sid}/edit`,
        );
      })
      .catch(() => {
        toastError(
          `The additional capacity you that you requested could not be granted due to a failure processing payment.
-          Please configure a valid credit card for your account and the upgrade will be automatically processed`
+          Please configure a valid credit card for your account and the upgrade will be automatically processed`,
        );
      })
      .finally(() => {
@@ -254,18 +254,18 @@ const SubscriptionForm = () => {
    },
  ]);
  const [originalServiceData, setOriginalServiceData] = useState<ServiceData[]>(
-    []
+    [],
  );

  const initFeesAndCost = (priceData: PriceInfo[]) => {
    serviceData.forEach((service) => {
      const record = priceData.find(
-        (item) => item.category === service.category
+        (item) => item.category === service.category,
      );

      if (record) {
        const price = record.prices.find(
-          (item) => item.currency === service.currency
+          (item) => item.currency === service.currency,
        );

        if (price) {
@@ -299,7 +299,7 @@ const SubscriptionForm = () => {

  const getServicePrice = (
    service: ServiceData,
-    capacity: number
+    capacity: number,
  ): [number, string, number] => {
    let fees = 0;
    let feesLabel = "";
@@ -311,7 +311,7 @@ const SubscriptionForm = () => {
    } else if (service.billing_scheme === "tiered") {
      const filteredTiers = service.tiers
        ? service.tiers.filter(
-            (item) => !item.up_to || item.up_to >= capacityNum
+            (item) => !item.up_to || item.up_to >= capacityNum,
          )
        : [];
      if (filteredTiers.length) {
@@ -360,7 +360,7 @@ const SubscriptionForm = () => {
  const updateServiceData = (
    index: number,
    key: string,
-    value: typeof serviceData[number][keyof ServiceData]
+    value: (typeof serviceData)[number][keyof ServiceData],
  ) => {
    setServiceData(
      serviceData.map((g, i) =>
@@ -370,8 +370,8 @@ const SubscriptionForm = () => {
              [key]: value,
              ...(key === "capacity" && { cost: Number(value) * g.fees }),
            }
-          : g
-      )
+          : g,
+      ),
    );
  };

@@ -389,7 +389,7 @@ const SubscriptionForm = () => {
    if (isModifySubscription && originalServiceData.length > 0) {
      setIsDisableSubmitButton(
        serviceData[0].capacity === originalServiceData[0].capacity &&
-          serviceData[1].capacity === originalServiceData[1].capacity
+          serviceData[1].capacity === originalServiceData[1].capacity,
      );
    }
    setTotal(serviceData.reduce((res, service) => res + service.cost || 0, 0));
@@ -506,7 +506,7 @@ const SubscriptionForm = () => {
                            updateServiceData(
                              idx,
                              "capacity",
-                              e.target.value ? Number(e.target.value) : ""
+                              e.target.value ? Number(e.target.value) : "",
                            );
                          }}
                        />
--- a/src/containers/internal/views/applications/delete.tsx
+++ b/src/containers/internal/views/applications/delete.tsx
@@ -66,10 +66,10 @@ export const DeleteApplication = ({
            (account) =>
              account.device_calling_application_sid ===
                application.application_sid ||
-              account.siprec_hook_sid === application.application_sid
+              account.siprec_hook_sid === application.application_sid,
          ),
          teams: msteamRes.json.filter(
-            (team) => team.application_sid === application.application_sid
+            (team) => team.application_sid === application.application_sid,
          ),
        };
        const deletable =
--- a/src/containers/internal/views/applications/edit.tsx
+++ b/src/containers/internal/views/applications/edit.tsx
@@ -15,7 +15,7 @@ export const EditApplication = () => {
  const params = useParams();
  const user = useSelectState("user");
  const [data, refetch, error] = useApiData<Application>(
-    `Applications/${params.application_sid}`
+    `Applications/${params.application_sid}`,
  );

  useScopedRedirect(
@@ -23,7 +23,7 @@ export const EditApplication = () => {
    ROUTE_INTERNAL_APPLICATIONS,
    user,
    "You do not have access to this resource",
-    data
+    data,
  );

  useEffect(() => {
--- a/src/containers/internal/views/applications/form.tsx
+++ b/src/containers/internal/views/applications/form.tsx
@@ -165,7 +165,7 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
  useRedirect<Account>(
    accounts,
    ROUTE_INTERNAL_ACCOUNTS,
-    "You must create an account before you can create an application."
+    "You must create an account before you can create an application.",
  );

  const handleSubmit = (e: React.FormEvent) => {
@@ -173,7 +173,7 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {

    if (isUserAccountScope(accountSid, user)) {
      toastError(
-        "You do not have permissions to make changes to these Speech Credentials"
+        "You do not have permissions to make changes to these Speech Credentials",
      );
      return;
    }
@@ -187,11 +187,11 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
            a.name === applicationName &&
            (!application ||
              !application.data ||
-              a.application_sid !== application.data.application_sid)
+              a.application_sid !== application.data.application_sid),
        )
      ) {
        setMessage(
-          "The name you have entered is already in use on another one of your applications."
+          "The name you have entered is already in use on another one of your applications.",
        );
        return;
      }
@@ -242,7 +242,7 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
          application.refetch();
          toastSuccess("Application updated successfully");
          navigate(
-            `${ROUTE_INTERNAL_APPLICATIONS}/${application.data?.application_sid}/edit`
+            `${ROUTE_INTERNAL_APPLICATIONS}/${application.data?.application_sid}/edit`,
          );
        })
        .catch((error) => {
@@ -271,7 +271,7 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
              tv.vendor.substring(VENDOR_CUSTOM.length + 1) +
              ` (${VENDOR_CUSTOM})`,
            value: tv.vendor,
-          })
+          }),
        );
      setttsVendorOptions(vendors.concat(v));

@@ -283,7 +283,7 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
              tv.vendor.substring(VENDOR_CUSTOM.length + 1) +
              ` (${VENDOR_CUSTOM})`,
            value: tv.vendor,
-          })
+          }),
        );
      setSttVendorOptions(vendors.concat(v2));

@@ -296,7 +296,7 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
        (c) =>
          c.vendor === synthVendor &&
          (!c.account_sid || c.account_sid === accountSid) &&
-          c.use_for_tts
+          c.use_for_tts,
      );
      let c2 = c1
        .filter((c) => c.label)
@@ -304,11 +304,11 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
          Object.assign({
            name: c.label,
            value: c.label,
-          })
+          }),
        );

      setTtsLabelOptions(
-        c1.length !== c2.length ? [noneLabelObject, ...c2] : c2
+        c1.length !== c2.length ? [noneLabelObject, ...c2] : c2,
      );

      c1 = fallbackSpeechSynthsisVendor
@@ -316,7 +316,7 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
            (c) =>
              c.vendor === fallbackSpeechSynthsisVendor &&
              (!c.account_sid || c.account_sid === accountSid) &&
-              c.use_for_tts
+              c.use_for_tts,
          )
        : [];

@@ -326,17 +326,17 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
          Object.assign({
            name: c.label,
            value: c.label,
-          })
+          }),
        );
      setFallbackTtsLabelOptions(
-        c1.length !== c2.length ? [noneLabelObject, ...c2] : c2
+        c1.length !== c2.length ? [noneLabelObject, ...c2] : c2,
      );

      c1 = credentials.filter(
        (c) =>
          c.vendor === recogVendor &&
          (!c.account_sid || c.account_sid === accountSid) &&
-          c.use_for_stt
+          c.use_for_stt,
      );
      c2 = c1
        .filter((c) => c.label)
@@ -344,11 +344,11 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
          Object.assign({
            name: c.label,
            value: c.label,
-          })
+          }),
        );

      setSttLabelOptions(
-        c1.length !== c2.length ? [noneLabelObject, ...c2] : c2
+        c1.length !== c2.length ? [noneLabelObject, ...c2] : c2,
      );

      c1 = fallbackSpeechRecognizerVendor
@@ -356,7 +356,7 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
            (c) =>
              c.vendor === fallbackSpeechRecognizerVendor &&
              (!c.account_sid || c.account_sid === accountSid) &&
-              c.use_for_stt
+              c.use_for_stt,
          )
        : [];
      c2 = c1
@@ -365,11 +365,11 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
          Object.assign({
            name: c.label,
            value: c.label,
-          })
+          }),
        );

      setFallbackSttLabelOptions(
-        c1.length !== c2.length ? [noneLabelObject, ...c2] : c2
+        c1.length !== c2.length ? [noneLabelObject, ...c2] : c2,
      );
    }
  }, [
@@ -444,7 +444,7 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
      setTmpApplicationJson(applicationJson);
      setInitialApplicationJson(
        application.data.app_json != undefined &&
-          application.data.app_json.length !== 0
+          application.data.app_json.length !== 0,
      );

      if (application.data.call_hook) {
@@ -491,12 +491,12 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {

      if (application.data.speech_synthesis_vendor)
        setSynthVendor(
-          application.data.speech_synthesis_vendor as keyof SynthesisVendors
+          application.data.speech_synthesis_vendor as keyof SynthesisVendors,
        );

      if (application.data.speech_synthesis_language)
        setSynthLang(
-          application.data.speech_synthesis_language as keyof RecognizerVendors
+          application.data.speech_synthesis_language as keyof RecognizerVendors,
        );

      if (application.data.speech_synthesis_voice)
@@ -504,7 +504,7 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {

      if (application.data.speech_recognizer_vendor)
        setRecogVendor(
-          application.data.speech_recognizer_vendor as keyof RecognizerVendors
+          application.data.speech_recognizer_vendor as keyof RecognizerVendors,
        );

      if (application.data.speech_recognizer_language)
@@ -513,35 +513,35 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
      if (application.data.use_for_fallback_speech) {
        setUseForFallbackSpeech(application.data.use_for_fallback_speech > 0);
        setInitalCheckFallbackSpeech(
-          application.data.use_for_fallback_speech > 0
+          application.data.use_for_fallback_speech > 0,
        );
      }
      if (application.data.fallback_speech_recognizer_vendor) {
        setFallbackSpeechRecognizerVendor(
          application.data
-            .fallback_speech_recognizer_vendor as keyof RecognizerVendors
+            .fallback_speech_recognizer_vendor as keyof RecognizerVendors,
        );
      }
      if (application.data.fallback_speech_recognizer_language) {
        setFallbackSpeechRecognizerLanguage(
-          application.data.fallback_speech_recognizer_language
+          application.data.fallback_speech_recognizer_language,
        );
      }

      if (application.data.fallback_speech_synthesis_vendor) {
        setFallbackSpeechSynthsisVendor(
          application.data
-            .fallback_speech_synthesis_vendor as keyof SynthesisVendors
+            .fallback_speech_synthesis_vendor as keyof SynthesisVendors,
        );
      }
      if (application.data.fallback_speech_synthesis_language) {
        setFallbackSpeechSynthsisLanguage(
-          application.data.fallback_speech_synthesis_language
+          application.data.fallback_speech_synthesis_language,
        );
      }
      if (application.data.fallback_speech_synthesis_voice) {
        setFallbackSpeechSynthsisVoice(
-          application.data.fallback_speech_synthesis_voice
+          application.data.fallback_speech_synthesis_voice,
        );
      }
    }
--- a/src/containers/internal/views/applications/index.tsx
+++ b/src/containers/internal/views/applications/index.tsx
@@ -40,14 +40,14 @@ export const Applications = () => {

  const filteredApplications = useFilteredResults<Application>(
    filter,
-    applications
+    applications,
  );

  const handleDelete = () => {
    if (application) {
      if (isUserAccountScope(accountSid, user)) {
        toastError(
-          "You do not have permissions to make changes to this Application"
+          "You do not have permissions to make changes to this Application",
        );
        return;
      }
@@ -59,7 +59,7 @@ export const Applications = () => {
          toastSuccess(
            <>
              Deleted application <strong>{application.name}</strong>
-            </>
+            </>,
          );
        })
        .catch((error) => {
@@ -139,7 +139,7 @@ export const Applications = () => {
                            {
                              accounts?.find(
                                (acct) =>
-                                  acct.account_sid === application.account_sid
+                                  acct.account_sid === application.account_sid,
                              )?.name
                            }
                          </span>
--- a/src/containers/internal/views/applications/speech-selection.tsx
+++ b/src/containers/internal/views/applications/speech-selection.tsx
@@ -41,7 +41,7 @@ type SpeechProviderSelectionProbs = {
  credentials: SpeechCredential[] | undefined;
  ttsVendor: [
    keyof SynthesisVendors,
-    React.Dispatch<React.SetStateAction<keyof SynthesisVendors>>
+    React.Dispatch<React.SetStateAction<keyof SynthesisVendors>>,
  ];
  ttsVendorOptions: VendorOptions[];
  ttsVoice: [string, React.Dispatch<React.SetStateAction<string>>];
@@ -50,7 +50,7 @@ type SpeechProviderSelectionProbs = {
  ttsLabel: [string, React.Dispatch<React.SetStateAction<string>>];
  sttVendor: [
    keyof RecognizerVendors,
-    React.Dispatch<React.SetStateAction<keyof RecognizerVendors>>
+    React.Dispatch<React.SetStateAction<keyof RecognizerVendors>>,
  ];
  sttVendorOptions: VendorOptions[];
  sttLang: [string, React.Dispatch<React.SetStateAction<string>>];
@@ -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,20 +140,28 @@ 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) {
      setSelectedCredential(
        credentials.find(
-          (c) => c.vendor === synthVendor && (c.label || "") === synthLabel
-        )
+          (c) => c.vendor === synthVendor && (c.label || "") === synthLabel,
+        ),
      );
    }
  }, [synthVendor, synthLabel, 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
+      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
+      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) => {
@@ -305,10 +363,11 @@ export const SpeechProviderSelection = ({
              vendor.value != VENDOR_ASSEMBLYAI &&
              vendor.value != VENDOR_SONIOX &&
              vendor.value !== VENDOR_CUSTOM &&
-              vendor.value !== VENDOR_COBALT
+              vendor.value !== VENDOR_COBALT,
          )}
          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);

@@ -367,7 +427,7 @@ export const SpeechProviderSelection = ({

                  const voices =
                    synthesisSupportedLanguagesAndVoices?.tts.find(
-                      (lang) => lang.value === language
+                      (lang) => lang.value === language,
                    )?.voices || [];
                  if (
                    synthVendor === VENDOR_GOOGLE &&
@@ -452,10 +512,11 @@ export const SpeechProviderSelection = ({
              vendor.value != VENDOR_WELLSAID &&
              vendor.value != VENDOR_ELEVENLABS &&
              vendor.value != VENDOR_WHISPER &&
-              vendor.value !== VENDOR_CUSTOM
+              vendor.value !== VENDOR_CUSTOM,
          )}
          onChange={(e) => {
            const vendor = e.target.value as keyof RecognizerVendors;
+            shouldUpdateSttLanguage.current = true;
            setRecogVendor(vendor);
            setRecogLabel("");

--- a/src/containers/internal/views/carriers/delete.tsx
+++ b/src/containers/internal/views/carriers/delete.tsx
@@ -28,8 +28,8 @@ export const DeleteCarrier = ({
      if (!ignore) {
        setPhoneNumbers(
          json.filter(
-            (phone) => phone.voip_carrier_sid === carrier.voip_carrier_sid
-          )
+            (phone) => phone.voip_carrier_sid === carrier.voip_carrier_sid,
+          ),
        );
      }
    });
--- a/src/containers/internal/views/carriers/edit.tsx
+++ b/src/containers/internal/views/carriers/edit.tsx
@@ -15,13 +15,13 @@ export const EditCarrier = () => {
  const params = useParams();
  const user = useSelectState("user");
  const [data, refetch, error] = useApiData<Carrier>(
-    `VoipCarriers/${params.voip_carrier_sid}`
+    `VoipCarriers/${params.voip_carrier_sid}`,
  );
  const [sipGateways, sipGatewaysRefetch] = useApiData<SipGateway[]>(
-    `SipGateways?voip_carrier_sid=${params.voip_carrier_sid}`
+    `SipGateways?voip_carrier_sid=${params.voip_carrier_sid}`,
  );
  const [smppGateways, smppGatewaysRefetch] = useApiData<SmppGateway[]>(
-    `SmppGateways?voip_carrier_sid=${params.voip_carrier_sid}`
+    `SmppGateways?voip_carrier_sid=${params.voip_carrier_sid}`,
  );

  useScopedRedirect(
@@ -29,7 +29,7 @@ export const EditCarrier = () => {
    ROUTE_INTERNAL_CARRIERS,
    user,
    "You do not have access to this resource",
-    data
+    data,
  );

  useEffect(() => {
--- a/src/containers/internal/views/carriers/form.tsx
+++ b/src/containers/internal/views/carriers/form.tsx
@@ -236,7 +236,7 @@ export const CarrierForm = ({
  const updateSipGateways = (
    index: number,
    key: string,
-    value: typeof sipGateways[number][keyof SipGateway]
+    value: (typeof sipGateways)[number][keyof SipGateway],
  ) => {
    setSipGateways(
      sipGateways.map((g, i) =>
@@ -251,18 +251,18 @@ export const CarrierForm = ({
                getIpValidationType(value) === IP &&
                g.port === null && { port: 5060 }),
            }
-          : g
-      )
+          : g,
+      ),
    );
  };

  const updateSmppGateways = (
    index: number,
    key: string,
-    value: typeof smppGateways[number][keyof SmppGateway]
+    value: (typeof smppGateways)[number][keyof SmppGateway],
  ) => {
    setSmppGateways(
-      smppGateways.map((g, i) => (i === index ? { ...g, [key]: value } : g))
+      smppGateways.map((g, i) => (i === index ? { ...g, [key]: value } : g)),
    );
  };

@@ -271,8 +271,8 @@ export const CarrierForm = ({
      sipGateways.map(({ sip_gateway_sid, ...g }: SipGateway) =>
        sip_gateway_sid
          ? putSipGateway(sip_gateway_sid, g)
-          : postSipGateway({ ...g, voip_carrier_sid })
-      )
+          : postSipGateway({ ...g, voip_carrier_sid }),
+      ),
    ).then(() => {
      if (carrierSipGateways) {
        carrierSipGateways.refetch();
@@ -289,7 +289,7 @@ export const CarrierForm = ({
          smpp_gateway_sid
            ? putSmppGateway(smpp_gateway_sid, g)
            : postSmppGateway({ ...g, voip_carrier_sid });
-        })
+        }),
    ).then(() => {
      if (carrierSmppGateways) {
        carrierSmppGateways.refetch();
@@ -300,7 +300,7 @@ export const CarrierForm = ({
  const handleSipGatewayDelete = (g?: SipGateway) => {
    if (g && g.sip_gateway_sid) {
      deleteSipGateway(g.sip_gateway_sid).then(() =>
-        toastSuccess("SIP gateway successfully deleted")
+        toastSuccess("SIP gateway successfully deleted"),
      );
    }
  };
@@ -311,8 +311,8 @@ export const CarrierForm = ({
        toastSuccess(
          `SMPP ${
            g.outbound ? "outbound" : "inbound"
-          } gateway successfully deleted`
-        )
+          } gateway successfully deleted`,
+        ),
      );
    }
  };
@@ -429,7 +429,7 @@ export const CarrierForm = ({

    const emptySipIp = sipGateways.find((g) => g.ipv4.trim() === "");
    const invalidSipPort = sipGateways.find(
-      (g) => hasValue(g.port) && !isValidPort(g.port)
+      (g) => hasValue(g.port) && !isValidPort(g.port),
    );
    const sipGatewayValidation = getSipValidation();

@@ -530,7 +530,7 @@ export const CarrierForm = ({
        putCarrier(
          currentServiceProvider.service_provider_sid,
          carrier.data.voip_carrier_sid,
-          carrierPayload
+          carrierPayload,
        )
          .then(() => {
            if (carrier.data?.voip_carrier_sid) {
@@ -541,7 +541,7 @@ export const CarrierForm = ({
            toastSuccess("Carrier updated successfully");
            carrier.refetch();
            navigate(
-              `${ROUTE_INTERNAL_CARRIERS}/${carrier.data?.voip_carrier_sid}/edit`
+              `${ROUTE_INTERNAL_CARRIERS}/${carrier.data?.voip_carrier_sid}/edit`,
            );
          })
          .catch((error) => {
@@ -571,7 +571,7 @@ export const CarrierForm = ({
    setLocation();
    if (predefinedName && hasLength(predefinedCarriers)) {
      const predefinedCarrierSid = predefinedCarriers.find(
-        (a) => a.name === predefinedName
+        (a) => a.name === predefinedName,
      )?.predefined_carrier_sid;

      if (currentServiceProvider && predefinedCarrierSid) {
@@ -579,11 +579,11 @@ export const CarrierForm = ({
          user?.scope === USER_ACCOUNT
            ? postPredefinedCarrierTemplateAccount(
                accountSid,
-                predefinedCarrierSid
+                predefinedCarrierSid,
              )
            : postPredefinedCarrierTemplate(
                currentServiceProvider.service_provider_sid,
-                predefinedCarrierSid
+                predefinedCarrierSid,
              );

        postPredefinedCarrier
@@ -693,9 +693,9 @@ export const CarrierForm = ({
                          (carrier: PredefinedCarrier) => ({
                            name: carrier.name,
                            value: carrier.name,
-                          })
+                          }),
                        )
-                      : []
+                      : [],
                  )}
                  onChange={(e) => setPredefinedName(e.target.value)}
                />
@@ -748,7 +748,7 @@ export const CarrierForm = ({
                accounts={
                  user?.scope === USER_ACCOUNT
                    ? accounts?.filter(
-                        (acct) => user.account_sid === acct.account_sid
+                        (acct) => user.account_sid === acct.account_sid,
                      )
                    : accounts
                }
@@ -760,8 +760,8 @@ export const CarrierForm = ({
                  user?.scope !== USER_ACCOUNT
                    ? false
                    : user.account_sid !== accountSid
-                    ? true
-                    : false
+                      ? true
+                      : false
                }
              />
              {user &&
@@ -774,7 +774,7 @@ export const CarrierForm = ({
                      defaultOption="None"
                      application={[applicationSid, setApplicationSid]}
                      applications={applications.filter(
-                        (application) => application.account_sid === accountSid
+                        (application) => application.account_sid === accountSid,
                      )}
                    />
                  </>
@@ -1002,7 +1002,7 @@ export const CarrierForm = ({
                                !isNotBlank(e.target.value) &&
                                getIpValidationType(g.ipv4) !== IP
                                ? null
-                                : Number(e.target.value)
+                                : Number(e.target.value),
                            );
                          }}
                          ref={(ref: HTMLInputElement) =>
@@ -1015,7 +1015,6 @@ export const CarrierForm = ({
                          <Selector
                            id={`sip_protocol_${i}`}
                            name={`sip_protocol${i}`}
-                            placeholder=""
                            value={g.protocol}
                            options={SIP_GATEWAY_PROTOCOL_OPTIONS}
                            onChange={(e) => {
@@ -1028,7 +1027,6 @@ export const CarrierForm = ({
                          <Selector
                            id={`sip_netmask_${i}`}
                            name={`sip_netmask${i}`}
-                            placeholder="32"
                            value={g.netmask}
                            options={NETMASK_OPTIONS}
                            onChange={(e) => {
@@ -1053,7 +1051,7 @@ export const CarrierForm = ({
                              updateSipGateways(
                                i,
                                "is_active",
-                                e.target.checked ? 1 : 0
+                                e.target.checked ? 1 : 0,
                              );
                            }}
                          />
@@ -1072,7 +1070,7 @@ export const CarrierForm = ({
                              updateSipGateways(
                                i,
                                "inbound",
-                                e.target.checked ? 1 : 0
+                                e.target.checked ? 1 : 0,
                              );
                            }}
                          />
@@ -1091,7 +1089,7 @@ export const CarrierForm = ({
                              updateSipGateways(
                                i,
                                "outbound",
-                                e.target.checked
+                                e.target.checked,
                              );
                            }}
                          />
@@ -1113,7 +1111,7 @@ export const CarrierForm = ({
                                updateSipGateways(
                                  i,
                                  "pad_crypto",
-                                  e.target.checked
+                                  e.target.checked,
                                );
                              }}
                            />
@@ -1121,6 +1119,53 @@ export const CarrierForm = ({
                          </label>
                        </div>
                      )}
+                      {Boolean(g.outbound) && (
+                        <div>
+                          <label
+                            htmlFor={`send_options_ping_${i}`}
+                            className="chk"
+                          >
+                            <input
+                              id={`send_options_ping_${i}`}
+                              name={`send_options_ping_${i}`}
+                              type="checkbox"
+                              checked={g.send_options_ping ? true : false}
+                              onChange={(e) => {
+                                updateSipGateways(
+                                  i,
+                                  "send_options_ping",
+                                  e.target.checked,
+                                );
+                              }}
+                            />
+                            <div>Send OPTIONS ping</div>
+                          </label>
+                        </div>
+                      )}
+                      {Boolean(g.outbound) &&
+                        (g.protocol === "tls" || g.protocol === "tls/srtp") && (
+                          <div>
+                            <label
+                              htmlFor={`use_sips_scheme_${i}`}
+                              className="chk"
+                            >
+                              <input
+                                id={`use_sips_scheme_${i}`}
+                                name={`use_sips_scheme_${i}`}
+                                type="checkbox"
+                                checked={g.use_sips_scheme ? true : false}
+                                onChange={(e) => {
+                                  updateSipGateways(
+                                    i,
+                                    "use_sips_scheme",
+                                    e.target.checked,
+                                  );
+                                }}
+                              />
+                              <div>Use sips scheme</div>
+                            </label>
+                          </div>
+                        )}
                    </div>

                    <button
@@ -1132,15 +1177,15 @@ export const CarrierForm = ({

                        if (sipGateways.length === 1) {
                          setSipMessage(
-                            "You must provide at least one SIP Gateway."
+                            "You must provide at least one SIP Gateway.",
                          );
                        } else {
                          handleSipGatewayDelete(
-                            sipGateways.find((g2, i2) => i2 === i)
+                            sipGateways.find((g2, i2) => i2 === i),
                          );

                          setSipGateways(
-                            sipGateways.filter((g2, i2) => i2 !== i)
+                            sipGateways.filter((g2, i2) => i2 !== i),
                          );
                        }
                      }}
@@ -1254,7 +1299,7 @@ export const CarrierForm = ({
                              updateSmppGateways(
                                i,
                                "port",
-                                Number(e.target.value)
+                                Number(e.target.value),
                              )
                            }
                            ref={(ref: HTMLInputElement) =>
@@ -1273,7 +1318,7 @@ export const CarrierForm = ({
                                updateSmppGateways(
                                  i,
                                  "use_tls",
-                                  e.target.checked
+                                  e.target.checked,
                                )
                              }
                            />
@@ -1295,15 +1340,15 @@ export const CarrierForm = ({
                            (smppSystemId || smppPass)
                          ) {
                            setSmppOutboundMessage(
-                              "You must provide at least one Outbound Gateway."
+                              "You must provide at least one Outbound Gateway.",
                            );
                          } else {
                            handleSmppGatewayDelete(
-                              smppGateways.find((g2, i2) => i2 === i)
+                              smppGateways.find((g2, i2) => i2 === i),
                            );

                            setSmppGateways(
-                              smppGateways.filter((g2, i2) => i2 !== i)
+                              smppGateways.filter((g2, i2) => i2 !== i),
                            );
                          }
                        }}
@@ -1397,7 +1442,6 @@ export const CarrierForm = ({
                          <Selector
                            id={`smpp_netmask_${i}`}
                            name={`smpp_netmask_${i}`}
-                            placeholder="32"
                            options={NETMASK_OPTIONS}
                            value={g.netmask}
                            onChange={(e) =>
@@ -1412,11 +1456,11 @@ export const CarrierForm = ({
                        type="button"
                        onClick={() => {
                          handleSmppGatewayDelete(
-                            smppGateways.find((g2, i2) => i2 === i)
+                            smppGateways.find((g2, i2) => i2 === i),
                          );

                          setSmppGateways(
-                            smppGateways.filter((g2, i2) => i2 !== i)
+                            smppGateways.filter((g2, i2) => i2 !== i),
                          );
                        }}
                      >
--- a/src/containers/internal/views/carriers/gateways.tsx
+++ b/src/containers/internal/views/carriers/gateways.tsx
@@ -12,7 +12,7 @@ type GatewaysProps = {

 export const Gateways = ({ carrier }: GatewaysProps) => {
  const [gateways, , error] = useApiData<SipGateway[]>(
-    `SipGateways?voip_carrier_sid=${carrier.voip_carrier_sid}`
+    `SipGateways?voip_carrier_sid=${carrier.voip_carrier_sid}`,
  );

  const renderGateways = () => {
--- a/src/containers/internal/views/carriers/index.tsx
+++ b/src/containers/internal/views/carriers/index.tsx
@@ -66,14 +66,14 @@ export const Carriers = () => {
      ? carriers.filter((carrier) =>
          accountSid
            ? carrier.account_sid === accountSid
-            : carrier.account_sid === null
+            : carrier.account_sid === null,
        )
      : [];
  }, [accountSid, carrier, carriers]);

  const filteredCarriers = useFilteredResults<Carrier>(
    filter,
-    carriersFiltered
+    carriersFiltered,
  );

  const handleDelete = () => {
@@ -87,10 +87,10 @@ export const Carriers = () => {
        .then(() => {
          Promise.all([
            getFetch<SipGateway[]>(
-              `${API_SIP_GATEWAY}?voip_carrier_sid=${carrier.voip_carrier_sid}`
+              `${API_SIP_GATEWAY}?voip_carrier_sid=${carrier.voip_carrier_sid}`,
            ),
            getFetch<SmppGateway[]>(
-              `${API_SMPP_GATEWAY}?voip_carrier_sid=${carrier.voip_carrier_sid}`
+              `${API_SMPP_GATEWAY}?voip_carrier_sid=${carrier.voip_carrier_sid}`,
            ),
          ]).then(([sipGatewaysRes, smppGatewaysRes]) => {
            hasLength(sipGatewaysRes.json) &&
@@ -99,8 +99,8 @@ export const Carriers = () => {
                  g &&
                  g.sip_gateway_sid &&
                  deleteSipGateway(g.sip_gateway_sid).catch((error) =>
-                    toastError(error.msg)
-                  )
+                    toastError(error.msg),
+                  ),
              );
            hasLength(smppGatewaysRes.json) &&
              smppGatewaysRes.json.forEach(
@@ -108,8 +108,8 @@ export const Carriers = () => {
                  g &&
                  g.smpp_gateway_sid &&
                  deleteSmppGateway(g.smpp_gateway_sid).catch((error) =>
-                    toastError(error.msg)
-                  )
+                    toastError(error.msg),
+                  ),
              );
          });
          setCarrier(null);
@@ -117,7 +117,7 @@ export const Carriers = () => {
          toastSuccess(
            <>
              Deleted Carrier <strong>{carrier.name}</strong>
-            </>
+            </>,
          );
        })
        .catch((error) => {
@@ -130,7 +130,7 @@ export const Carriers = () => {
    setLocation();
    if (currentServiceProvider) {
      setApiUrl(
-        `ServiceProviders/${currentServiceProvider.service_provider_sid}/VoipCarriers`
+        `ServiceProviders/${currentServiceProvider.service_provider_sid}/VoipCarriers`,
      );
    }
  }, [user, currentServiceProvider, accountSid]);
--- a/src/containers/internal/views/clients/edit.tsx
+++ b/src/containers/internal/views/clients/edit.tsx
@@ -11,7 +11,7 @@ export const ClientsEdit = () => {
  const params = useParams();
  const navigate = useNavigate();
  const [data, refetch, error] = useApiData<Client>(
-    `Clients/${params.client_sid}`
+    `Clients/${params.client_sid}`,
  );

  /** Handle error toast at top level... */
--- a/src/containers/internal/views/clients/form.tsx
+++ b/src/containers/internal/views/clients/form.tsx
@@ -31,7 +31,7 @@ export const ClientsForm = ({ client }: ClientsFormProps) => {
  const [password, setPassword] = useState("");
  const [username, setUsername] = useState("");
  const [isActive, setIsActive] = useState(
-    client ? client.data?.is_active : true
+    client ? client.data?.is_active : true,
  );
  const [allowDirectAppCalling, setAllowDirectAppCalling] = useState(true);
  const [allowDirectQueueCalling, setAllowDirectQueueCalling] = useState(true);
--- a/src/containers/internal/views/clients/index.tsx
+++ b/src/containers/internal/views/clients/index.tsx
@@ -40,7 +40,7 @@ export const Clients = () => {
    setSelectedAccount(
      accountSid
        ? accounts?.find((a: Account) => a.account_sid === accountSid)
-        : null
+        : null,
    );

    return clients
@@ -48,8 +48,8 @@ export const Clients = () => {
          return accountSid
            ? c.account_sid === accountSid
            : accounts
-            ? accounts.map((a) => a.account_sid).includes(c.account_sid || "")
-            : false;
+              ? accounts.map((a) => a.account_sid).includes(c.account_sid || "")
+              : false;
        })
      : [];
  }, [accountSid, clients, accounts]);
@@ -63,7 +63,7 @@ export const Clients = () => {
          toastSuccess(
            <>
              Deleted sip client <strong>{client.username}</strong>
-            </>
+            </>,
          );
          setClient(null);
          refetch();
@@ -179,7 +179,7 @@ export const Clients = () => {
                        <span>
                          {
                            accounts?.find(
-                              (acct) => acct.account_sid === c.account_sid
+                              (acct) => acct.account_sid === c.account_sid,
                            )?.name
                          }
                        </span>
--- a/src/containers/internal/views/least-cost-routing/card.tsx
+++ b/src/containers/internal/views/least-cost-routing/card.tsx
@@ -27,7 +27,7 @@ type CardProps = {
    index1: number,
    index2: number,
    key: string,
-    value: unknown
+    value: unknown,
  ) => void;
  handleRouteDelete: (lr: LcrRoute, index: number) => void;
  carrierSelectorOptions: SelectorOption[];
@@ -141,7 +141,6 @@ export const Card = ({
        <Selector
          id={`lcr_carrier_set_entry_carrier_${index}`}
          name={`lcr_carrier_set_entry_carrier_${index}`}
-          placeholder="Carrier"
          value={
            lr.lcr_carrier_set_entries && lr.lcr_carrier_set_entries.length > 0
              ? lr.lcr_carrier_set_entries[0].voip_carrier_sid
@@ -156,7 +155,7 @@ export const Card = ({
              index,
              0,
              "voip_carrier_sid",
-              e.target.value
+              e.target.value,
            );
          }}
        />
--- a/src/containers/internal/views/least-cost-routing/container.tsx
+++ b/src/containers/internal/views/least-cost-routing/container.tsx
@@ -23,13 +23,13 @@ export const Container = ({
          [dragIndex, 1],
          [hoverIndex, 0, prevCards[dragIndex]],
        ],
-      })
+      }),
    );
  };

  const updateLcrRoute = (index: number, key: string, value: unknown) => {
    setLcrRoutes(
-      lcrRoutes.map((lr, i) => (i === index ? { ...lr, [key]: value } : lr))
+      lcrRoutes.map((lr, i) => (i === index ? { ...lr, [key]: value } : lr)),
    );
  };

@@ -37,7 +37,7 @@ export const Container = ({
    index1: number,
    index2: number,
    key: string,
-    value: unknown
+    value: unknown,
  ) => {
    setLcrRoutes(
      lcrRoutes.map((lr, i) =>
@@ -51,11 +51,11 @@ export const Container = ({
                        ...entry,
                        [key]: value,
                      }
-                    : entry
+                    : entry,
              ),
            }
-          : lr
-      )
+          : lr,
+      ),
    );
  };

--- a/src/containers/internal/views/least-cost-routing/edit.tsx
+++ b/src/containers/internal/views/least-cost-routing/edit.tsx
@@ -7,10 +7,10 @@ import { useParams } from "react-router-dom";
 export const EditLcr = () => {
  const params = useParams();
  const [lcrData, lcrRefect, lcrError] = useApiData<Lcr>(
-    `Lcrs/${params.lcr_sid}`
+    `Lcrs/${params.lcr_sid}`,
  );
  const [lcrRouteData, lcrRouteRefect, lcrRouteError] = useApiData<LcrRoute[]>(
-    `LcrRoutes?lcr_sid=${params.lcr_sid}`
+    `LcrRoutes?lcr_sid=${params.lcr_sid}`,
  );
  return (
    <>
--- a/src/containers/internal/views/least-cost-routing/form.tsx
+++ b/src/containers/internal/views/least-cost-routing/form.tsx
@@ -85,7 +85,7 @@ export const LcrForm = ({ lcrDataMap, lcrRouteDataMap }: LcrFormProps) => {
    setLocation();
    if (currentServiceProvider) {
      setApiUrl(
-        `ServiceProviders/${currentServiceProvider.service_provider_sid}/VoipCarriers`
+        `ServiceProviders/${currentServiceProvider.service_provider_sid}/VoipCarriers`,
      );
    }
  }, [user, currentServiceProvider, accountSid]);
@@ -99,7 +99,7 @@ export const LcrForm = ({ lcrDataMap, lcrRouteDataMap }: LcrFormProps) => {
      ? carriers.filter((carrier) =>
          accountSid
            ? carrier.account_sid === accountSid
-            : carrier.account_sid === null
+            : carrier.account_sid === null,
        )
      : [];

@@ -118,7 +118,7 @@ export const LcrForm = ({ lcrDataMap, lcrRouteDataMap }: LcrFormProps) => {
      setErrorMessage(
        accountSid
          ? "There are no available carriers defined for this account"
-          : "There are no available carriers"
+          : "There are no available carriers",
      );
    } else {
      setErrorMessage("");
@@ -149,7 +149,7 @@ export const LcrForm = ({ lcrDataMap, lcrRouteDataMap }: LcrFormProps) => {
          ) {
            setDefaultLcrCarrier(entry.voip_carrier_sid || defaultCarrier);
            setDefaultLcrCarrierSetEntrySid(
-              entry.lcr_carrier_set_entry_sid || null
+              entry.lcr_carrier_set_entry_sid || null,
            );
            default_lcr_route_sid = entry.lcr_route_sid || "";
            setDefaultLcrRoute(lr);
@@ -161,8 +161,8 @@ export const LcrForm = ({ lcrDataMap, lcrRouteDataMap }: LcrFormProps) => {
    if (lcrRouteDataMap && lcrRouteDataMap.data)
      setLcrRoutes(
        lcrRouteDataMap.data.filter(
-          (route) => route.lcr_route_sid !== default_lcr_route_sid
-        )
+          (route) => route.lcr_route_sid !== default_lcr_route_sid,
+        ),
      );
  }, [lcrRouteDataMap?.data]);

@@ -177,7 +177,7 @@ export const LcrForm = ({ lcrDataMap, lcrRouteDataMap }: LcrFormProps) => {
          (r) => ({
            ...r,
            voip_carrier_sid: defaultCarrier || carrierSelectorOptions[0].value,
-          })
+          }),
        ),
      },
    ];
@@ -235,7 +235,7 @@ export const LcrForm = ({ lcrDataMap, lcrRouteDataMap }: LcrFormProps) => {
                navigate(ROUTE_INTERNAL_LEST_COST_ROUTING);
              } else {
                navigate(
-                  `${ROUTE_INTERNAL_LEST_COST_ROUTING}/${json.sid}/edit`
+                  `${ROUTE_INTERNAL_LEST_COST_ROUTING}/${json.sid}/edit`,
                );
              }
              // Update global state
@@ -301,7 +301,7 @@ export const LcrForm = ({ lcrDataMap, lcrRouteDataMap }: LcrFormProps) => {
          toastSuccess(
            <>
              Deleted least cost routing <strong>{lcrForDelete?.name}</strong>
-            </>
+            </>,
          );
          setLcrForDelete(null);
          if (user?.access === Scope.admin) {
--- a/src/containers/internal/views/least-cost-routing/index.tsx
+++ b/src/containers/internal/views/least-cost-routing/index.tsx
@@ -32,7 +32,7 @@ export const Lcrs = () => {
    Scope.admin,
    `${ROUTE_INTERNAL_LEST_COST_ROUTING}/add`,
    user,
-    "You do not have permissions to manage all outbound call routes"
+    "You do not have permissions to manage all outbound call routes",
  );
  const [lcrs, refetch] = useApiData<Lcr[]>("Lcrs");
  const [filter, setFilter] = useState("");
@@ -53,9 +53,9 @@ export const Lcrs = () => {
          accountSid
            ? lcr.account_sid === accountSid
            : currentServiceProvider?.service_provider_sid
-            ? lcr.service_provider_sid ==
-              currentServiceProvider.service_provider_sid
-            : lcr.account_sid === null
+              ? lcr.service_provider_sid ==
+                currentServiceProvider.service_provider_sid
+              : lcr.account_sid === null,
        )
      : [];
  }, [accountSid, lcrs]);
@@ -68,7 +68,7 @@ export const Lcrs = () => {
          toastSuccess(
            <>
              Deleted outbound call route <strong>{lcr?.name}</strong>
-            </>
+            </>,
          );
          setLcr(null);
          refetch();
@@ -156,7 +156,7 @@ export const Lcrs = () => {
                        <span>
                          {lcr.account_sid
                            ? accounts?.find(
-                                (acct) => acct.account_sid === lcr.account_sid
+                                (acct) => acct.account_sid === lcr.account_sid,
                              )?.name
                            : currentServiceProvider?.name}
                        </span>
--- a/src/containers/internal/views/least-cost-routing/styles.scss
+++ b/src/containers/internal/views/least-cost-routing/styles.scss
@@ -4,7 +4,9 @@
 }

 .lcr-card:hover {
-  box-shadow: -7px 7px 5px #d5d7db, -5px -5px 10px #ffffff;
+  box-shadow:
+    -7px 7px 5px #d5d7db,
+    -5px -5px 10px #ffffff;
  transform: translateY(-3px) translateX(-3px);
 }

--- a/src/containers/internal/views/ms-teams-tenants/edit.tsx
+++ b/src/containers/internal/views/ms-teams-tenants/edit.tsx
@@ -11,7 +11,7 @@ import type { MSTeamsTenant } from "src/api/types";
 export const EditMsTeamsTenant = () => {
  const params = useParams();
  const [data, refetch, error] = useApiData<MSTeamsTenant>(
-    `MicrosoftTeamsTenants/${params.ms_teams_tenant_sid}`
+    `MicrosoftTeamsTenants/${params.ms_teams_tenant_sid}`,
  );

  useEffect(() => {
--- a/src/containers/internal/views/ms-teams-tenants/form.tsx
+++ b/src/containers/internal/views/ms-teams-tenants/form.tsx
@@ -49,7 +49,7 @@ export const MsTeamsTenantForm = ({
  useRedirect<Account>(
    accounts,
    ROUTE_INTERNAL_ACCOUNTS,
-    "You must create an account before you can create an Microsoft Teams Tenant."
+    "You must create an account before you can create an Microsoft Teams Tenant.",
  );

  const handleSubmit = (e: React.FormEvent) => {
@@ -63,7 +63,7 @@ export const MsTeamsTenantForm = ({
          ? msTeamsTenants.filter(
              (a) =>
                a.ms_teams_tenant_sid !==
-                msTeamsTenant.data!.ms_teams_tenant_sid
+                msTeamsTenant.data!.ms_teams_tenant_sid,
            )
          : msTeamsTenants;

@@ -156,7 +156,7 @@ export const MsTeamsTenantForm = ({
            applications={
              applications
                ? applications.filter(
-                    (application) => application.account_sid === accountSid
+                    (application) => application.account_sid === accountSid,
                  )
                : []
            }
--- a/src/containers/internal/views/ms-teams-tenants/index.tsx
+++ b/src/containers/internal/views/ms-teams-tenants/index.tsx
@@ -32,10 +32,10 @@ import type { ACLGetIMessage } from "src/utils/with-access-control";

 export const MSTeamsTenants = () => {
  const [msTeamsTenant, setMsTeamsTenant] = useState<MSTeamsTenant | null>(
-    null
+    null,
  );
  const [msTeamsTenants, refetch] = useApiData<MSTeamsTenant[]>(
-    "MicrosoftTeamsTenants"
+    "MicrosoftTeamsTenants",
  );
  const [accounts] = useServiceProviderData<Account[]>("Accounts");
  const [applications] = useServiceProviderData<Application[]>("Applications");
@@ -45,14 +45,14 @@ export const MSTeamsTenants = () => {
  const msTeamsTenantsFiltered = useMemo(() => {
    return msTeamsTenants
      ? msTeamsTenants.filter(
-          (mst) => !accountSid || mst.account_sid === accountSid
+          (mst) => !accountSid || mst.account_sid === accountSid,
        )
      : [];
  }, [accountSid, msTeamsTenants]);

  const filteredMsTeamsTenants = useFilteredResults<MSTeamsTenant>(
    filter,
-    msTeamsTenantsFiltered
+    msTeamsTenantsFiltered,
  );

  const handleDelete = () => {
@@ -65,7 +65,7 @@ export const MSTeamsTenants = () => {
            <>
              Deleted Microsoft Teams Tenant{" "}
              <strong>{msTeamsTenant.tenant_fqdn}</strong>
-            </>
+            </>,
          );
        })
        .catch((error) => {
@@ -131,7 +131,8 @@ export const MSTeamsTenants = () => {
                            {
                              accounts?.find(
                                (acct) =>
-                                  acct.account_sid === msTeamsTenant.account_sid
+                                  acct.account_sid ===
+                                  msTeamsTenant.account_sid,
                              )?.name
                            }
                          </span>
@@ -148,7 +149,7 @@ export const MSTeamsTenants = () => {
                            {applications?.find(
                              (app) =>
                                app.application_sid ===
-                                msTeamsTenant.application_sid
+                                msTeamsTenant.application_sid,
                            )?.name || "None"}
                          </span>
                        </div>
@@ -217,5 +218,5 @@ const getAclIMessage: ACLGetIMessage = (currentServiceProvider) => {

 export default withAccessControl(
  "hasMSTeamsFqdn",
-  getAclIMessage
+  getAclIMessage,
 )(MSTeamsTenants);
--- a/src/containers/internal/views/phone-numbers/edit.tsx
+++ b/src/containers/internal/views/phone-numbers/edit.tsx
@@ -11,7 +11,7 @@ import type { PhoneNumber } from "src/api/types";
 export const EditPhoneNumber = () => {
  const params = useParams();
  const [data, refetch, error] = useApiData<PhoneNumber>(
-    `PhoneNumbers/${params.phone_number_sid}`
+    `PhoneNumbers/${params.phone_number_sid}`,
  );

  useEffect(() => {
--- a/src/containers/internal/views/phone-numbers/form.tsx
+++ b/src/containers/internal/views/phone-numbers/form.tsx
@@ -51,13 +51,13 @@ export const PhoneNumberForm = ({ phoneNumber }: PhoneNumberFormProps) => {
  useRedirect<Account>(
    accounts,
    ROUTE_INTERNAL_ACCOUNTS,
-    "You must create an account before you can create a phone number."
+    "You must create an account before you can create a phone number.",
  );

  useRedirect<Carrier>(
    carriers,
    ROUTE_INTERNAL_CARRIERS,
-    "You must create a SIP trunk before you can create a phone number."
+    "You must create a SIP trunk before you can create a phone number.",
  );

  const handleSubmit = (e: React.FormEvent) => {
@@ -69,7 +69,7 @@ export const PhoneNumberForm = ({ phoneNumber }: PhoneNumberFormProps) => {
      const filtered =
        phoneNumber && phoneNumber.data
          ? phoneNumbers.filter(
-              (a) => a.phone_number_sid !== phoneNumber.data!.phone_number_sid
+              (a) => a.phone_number_sid !== phoneNumber.data!.phone_number_sid,
            )
          : phoneNumbers;

@@ -90,7 +90,7 @@ export const PhoneNumberForm = ({ phoneNumber }: PhoneNumberFormProps) => {
          phoneNumber.refetch();
          toastSuccess("Phone number updated successfully");
          navigate(
-            `${ROUTE_INTERNAL_PHONE_NUMBERS}/${phoneNumber.data?.phone_number_sid}/edit`
+            `${ROUTE_INTERNAL_PHONE_NUMBERS}/${phoneNumber.data?.phone_number_sid}/edit`,
          );
        })
        .catch((error) => {
@@ -201,7 +201,7 @@ export const PhoneNumberForm = ({ phoneNumber }: PhoneNumberFormProps) => {
              applications={
                applications
                  ? applications.filter(
-                      (application) => application.account_sid === accountSid
+                      (application) => application.account_sid === accountSid,
                    )
                  : []
              }
--- a/src/containers/internal/views/phone-numbers/index.tsx
+++ b/src/containers/internal/views/phone-numbers/index.tsx
@@ -56,14 +56,14 @@ export const PhoneNumbers = () => {
    setAccountSid(getAccountFilter());
    return phoneNumbers
      ? phoneNumbers.filter(
-          (phn) => !accountSid || phn.account_sid === accountSid
+          (phn) => !accountSid || phn.account_sid === accountSid,
        )
      : [];
  }, [accountSid, phoneNumbers]);

  const filteredPhoneNumbers = useFilteredResults<PhoneNumber>(
    filter,
-    phoneNumbersFiltered
+    phoneNumbersFiltered,
  );

  const handleMassEdit = () => {
@@ -74,7 +74,7 @@ export const PhoneNumbers = () => {
        };

        return putPhoneNumber(phoneNumber.phone_number_sid, payload);
-      })
+      }),
    )
      .then(() => {
        refetch();
@@ -98,7 +98,7 @@ export const PhoneNumbers = () => {
          toastSuccess(
            <>
              Deleted phone number <strong>{phoneNumber.number}</strong>
-            </>
+            </>,
          );
        })
        .catch((error) => {
@@ -177,7 +177,7 @@ export const PhoneNumbers = () => {
                          application={[applicationSid, setApplicationSid]}
                          applications={applications?.filter(
                            (application) =>
-                              application.account_sid === accountSid
+                              application.account_sid === accountSid,
                          )}
                          defaultOption="None"
                        />
@@ -224,7 +224,7 @@ export const PhoneNumbers = () => {
                              selectedPhoneNumbers.find(
                                (phone) =>
                                  phone.phone_number_sid ===
-                                  phoneNumber.phone_number_sid
+                                  phoneNumber.phone_number_sid,
                              )
                                ? true
                                : false
@@ -240,8 +240,8 @@ export const PhoneNumbers = () => {
                                  curr.filter(
                                    (phone) =>
                                      phone.phone_number_sid !==
-                                      phoneNumber.phone_number_sid
-                                  )
+                                      phoneNumber.phone_number_sid,
+                                  ),
                                );
                              }
                            }}
@@ -270,7 +270,8 @@ export const PhoneNumbers = () => {
                              {
                                accounts?.find(
                                  (acct) =>
-                                    acct.account_sid === phoneNumber.account_sid
+                                    acct.account_sid ===
+                                    phoneNumber.account_sid,
                                )?.name
                              }
                            </span>
@@ -287,7 +288,7 @@ export const PhoneNumbers = () => {
                              {applications?.find(
                                (app) =>
                                  app.application_sid ===
-                                  phoneNumber.application_sid
+                                  phoneNumber.application_sid,
                              )?.name || "None"}
                            </span>
                          </div>
--- a/src/containers/internal/views/recent-calls/call-tracing.tsx
+++ b/src/containers/internal/views/recent-calls/call-tracing.tsx
@@ -98,7 +98,7 @@ export const CallTracing = ({ call }: CallTracingProps) => {
        rootGroup.children = buildChildren(
          rootGroup.level + 1,
          rootGroup,
-          groups
+          groups,
        );
        setJaegerGroup(rootGroup);
      }
@@ -108,7 +108,7 @@ export const CallTracing = ({ call }: CallTracingProps) => {
  const buildChildren = (
    level: number,
    rootGroup: JaegerGroup,
-    groups: JaegerGroup[]
+    groups: JaegerGroup[],
  ): JaegerGroup[] => {
    return getGroupsByParent(rootGroup.spanId, groups).map((group) => {
      group.level = level;
--- a/src/containers/internal/views/recent-calls/jaeger/detail.tsx
+++ b/src/containers/internal/views/recent-calls/jaeger/detail.tsx
@@ -3,6 +3,7 @@ import { JaegerGroup, JaegerValue } from "src/api/jaeger-types";
 import dayjs from "dayjs";
 import "./styles.scss";
 import { formattedDuration } from "./utils";
+import { getSpansByNameRegex } from "../utils";

 type JaegerDetailProps = {
  group: JaegerGroup;
@@ -65,6 +66,37 @@ export const JaegerDetail = ({ group }: JaegerDetailProps) => {
            </div>
          </div>
        ))}
+
+        {/* TTS Streaming Attrs */}
+        {group.children.length &&
+          getSpansByNameRegex(group.children, /tts-generation/)?.map((span) => {
+            return span.attributes.map((attribute) => {
+              if (
+                ![
+                  "tts.vendor",
+                  "tts.language",
+                  "tts.voice",
+                  "tts.cached",
+                  "engine",
+                  "voice",
+                ].includes(attribute.key)
+              ) {
+                return (
+                  <div
+                    key={attribute.key}
+                    className="spanDetailsWrapper__details"
+                  >
+                    <div className="spanDetailsWrapper__details_header">
+                      <strong>{attribute.key}</strong>:
+                    </div>
+                    <div className="spanDetailsWrapper__details_body">
+                      {extractSpanGroupValue(attribute.value)}
+                    </div>
+                  </div>
+                );
+              }
+            });
+          })}
      </div>
    </div>
  );
--- a/src/containers/internal/views/recent-calls/player.tsx
+++ b/src/containers/internal/views/recent-calls/player.tsx
@@ -71,7 +71,7 @@ export const Player = ({ call }: PlayerProps) => {
        const [dtmfValue] = getSpanAttributeByName(s.attributes, "dtmf");
        const [durationValue] = getSpanAttributeByName(
          s.attributes,
-          "duration"
+          "duration",
        );
        if (dtmfValue && durationValue) {
          const start =
@@ -127,7 +127,7 @@ export const Player = ({ call }: PlayerProps) => {
  const getSilenceStartTime = (
    start: number,
    end: number,
-    channel: number
+    channel: number,
  ): number => {
    if (waveSurferRef.current) {
      const duration = waveSurferRef.current.getDecodedData()?.duration;
@@ -161,7 +161,7 @@ export const Player = ({ call }: PlayerProps) => {
  const drawSttRegionForSpan = (
    s: JaegerSpan,
    startPoint: JaegerSpan,
-    channel = 0
+    channel = 0,
  ) => {
    if (waveSurferRegionsPluginRef.current) {
      const r = waveSurferRegionsPluginRef.current
@@ -191,7 +191,7 @@ export const Player = ({ call }: PlayerProps) => {

          const [sttResolve] = getSpanAttributeByName(
            s.attributes,
-            "stt.resolve"
+            "stt.resolve",
          );
          if (
            endSpeechTime > 0 &&
@@ -213,7 +213,7 @@ export const Player = ({ call }: PlayerProps) => {
        } else {
          const [sttResolve] = getSpanAttributeByName(
            s.attributes,
-            "stt.resolve"
+            "stt.resolve",
          );
          if (sttResolve && sttResolve.value.stringValue === "timeout") {
            att = {
@@ -266,7 +266,7 @@ export const Player = ({ call }: PlayerProps) => {
        const [ttsCache] = getSpanAttributeByName(s.attributes, "tts.cached");
        const [streamLatency] = getSpanAttributeByName(
          s.attributes,
-          "time_to_first_byte_ms"
+          "time_to_first_byte_ms",
        );
        if (streamLatency && streamLatency.value.stringValue) {
          end = start + Number(streamLatency.value.stringValue) / 1_000;
@@ -320,7 +320,7 @@ export const Player = ({ call }: PlayerProps) => {
        });
        const [statusCode] = getSpanAttributeByName(
          s.attributes,
-          "http.statusCode"
+          "http.statusCode",
        );
        changeRegionMouseStyle(latencyRegion, 0);
        latencyRegion.on("click", () => {
@@ -363,7 +363,7 @@ export const Player = ({ call }: PlayerProps) => {
          drawSttRegionForSpan(
            cs,
            startPoint,
-            channel > 0 ? channel - 1 : channel
+            channel > 0 ? channel - 1 : channel,
          );
        });
        // DTMF
@@ -383,11 +383,11 @@ export const Player = ({ call }: PlayerProps) => {
          .filter((s) => {
            const [httpBody] = getSpanAttributeByName(
              s.attributes,
-              "http.body"
+              "http.body",
            );
            return (
              httpBody.value.stringValue.includes(
-                '"reason":"speechDetected"'
+                '"reason":"speechDetected"',
              ) ||
              httpBody.value.stringValue.includes('"reason":"dtmfDetected"')
            );
@@ -515,8 +515,8 @@ export const Player = ({ call }: PlayerProps) => {
        idx <= 0
          ? 0
          : idx >= waveSurferRef.current.getDuration()
-          ? waveSurferRef.current.getDuration() - 1
-          : idx;
+            ? waveSurferRef.current.getDuration() - 1
+            : idx;
      waveSurferRef.current.setTime(value);
      setPlayBackTime(formatTime(value));
    }
--- a/src/containers/internal/views/recent-calls/utils.ts
+++ b/src/containers/internal/views/recent-calls/utils.ts
@@ -11,12 +11,12 @@ export const getSpansFromJaegerRoot = (trace: JaegerRoot) => {
              !(
                attr.key.startsWith("telemetry") ||
                attr.key.startsWith("internal")
-              )
+              ),
          );
          value.attributes = attrs;
          spans.push(value);
        });
-      }
+      },
    );
  });
  spans.sort((a, b) => a.startTimeUnixNano - b.startTimeUnixNano);
@@ -25,14 +25,14 @@ export const getSpansFromJaegerRoot = (trace: JaegerRoot) => {

 export const getSpansByName = (
  spans: JaegerSpan[],
-  name: string
+  name: string,
 ): JaegerSpan[] => {
  return spans.filter((s) => s.name === name);
 };

 export const getSpansByNameRegex = (
  spans: JaegerSpan[],
-  pattern: RegExp
+  pattern: RegExp,
 ): JaegerSpan[] => {
  const matcher = new RegExp(pattern);
  return spans.filter((s) => matcher.test(s.name));
@@ -40,7 +40,7 @@ export const getSpansByNameRegex = (

 export const getSpanAttributeByName = (
  attr: JaegerAttribute[],
-  name: string
+  name: string,
 ): JaegerAttribute[] => {
  return attr.filter((a) => a.key === name);
 };
--- a/src/containers/internal/views/settings/admin-settings.tsx
+++ b/src/containers/internal/views/settings/admin-settings.tsx
@@ -72,7 +72,7 @@ export const AdminSettings = () => {
    if (hasValue(passwordSettings)) {
      setRequireDigit(passwordSettings.require_digit > 0 ? true : false);
      setRequireSpecialCharacter(
-        passwordSettings.require_special_character > 0 ? true : false
+        passwordSettings.require_special_character > 0 ? true : false,
      );
      if (passwordSettings.min_password_length) {
        setMinPasswordLength(passwordSettings.min_password_length);
--- a/src/containers/internal/views/settings/index.tsx
+++ b/src/containers/internal/views/settings/index.tsx
@@ -27,7 +27,7 @@ export const Settings = ({ currentServiceProvider }: SettingsProps) => {
    Scope.service_provider,
    `${ROUTE_INTERNAL_ACCOUNTS}/${user?.account_sid}/edit`,
    user,
-    "You do not have permissions to manage Settings"
+    "You do not have permissions to manage Settings",
  );

  return (
--- a/src/containers/internal/views/settings/service-provider-settings.tsx
+++ b/src/containers/internal/views/settings/service-provider-settings.tsx
@@ -56,13 +56,13 @@ export const ServiceProviderSettings = ({
            return limit.quantity === ""
              ? deleteServiceProviderLimit(
                  currentServiceProvider.service_provider_sid,
-                  limit.category
+                  limit.category,
                )
              : postServiceProviderLimit(
                  currentServiceProvider.service_provider_sid,
-                  limit
+                  limit,
                );
-          })
+          }),
        )
          .then(() => {
            refetchLimits();
@@ -93,7 +93,7 @@ export const ServiceProviderSettings = ({
          <>
            Deleted service provider{" "}
            <strong>{currentServiceProvider.name}</strong>
-          </>
+          </>,
        );
        removeActiveSP();
      })
@@ -193,5 +193,5 @@ export const ServiceProviderSettings = ({
 };

 export default withSelectState(["serviceProviders", "currentServiceProvider"])(
-  ServiceProviderSettings
+  ServiceProviderSettings,
 );
--- a/src/containers/internal/views/speech-services/edit.tsx
+++ b/src/containers/internal/views/speech-services/edit.tsx
@@ -24,17 +24,17 @@ export const EditSpeechService = () => {
    ROUTE_INTERNAL_SPEECH,
    user,
    "You do not have access to this resource",
-    data
+    data,
  );

  const getUrlForSpeech = () => {
    if (user && user?.scope === USER_ACCOUNT) {
      setUrl(
-        `Accounts/${user?.account_sid}/SpeechCredentials/${params.speech_credential_sid}`
+        `Accounts/${user?.account_sid}/SpeechCredentials/${params.speech_credential_sid}`,
      );
    } else {
      setUrl(
-        `ServiceProviders/${currentServiceProvider?.service_provider_sid}/SpeechCredentials/${params.speech_credential_sid}`
+        `ServiceProviders/${currentServiceProvider?.service_provider_sid}/SpeechCredentials/${params.speech_credential_sid}`,
      );
    }
  };
--- a/src/containers/internal/views/speech-services/form.tsx
+++ b/src/containers/internal/views/speech-services/form.tsx
@@ -40,6 +40,13 @@ import {
  VENDOR_ELEVENLABS,
  VENDOR_ASSEMBLYAI,
  VENDOR_WHISPER,
+  VENDOR_PLAYHT,
+  VENDOR_RIMELABS,
+  AWS_CREDENTIAL_TYPES,
+  AWS_CREDENTIAL_IAM_ASSUME_ROLE,
+  AWS_CREDENTIAL_ACCESS_KEY,
+  AWS_INSTANCE_PROFILE,
+  VENDOR_VERBIO,
 } from "src/vendor";
 import { MSG_REQUIRED_FIELDS } from "src/constants";
 import {
@@ -48,6 +55,7 @@ import {
  isUserAccountScope,
  isNotBlank,
  hasLength,
+  hasValue,
 } from "src/utils";
 import { getObscuredGoogleServiceKey } from "./utils";
 import { CredentialStatus } from "./status";
@@ -68,8 +76,12 @@ import { setAccountFilter, setLocation } from "src/store/localStore";
 import {
  DEFAULT_ELEVENLABS_OPTIONS,
  DEFAULT_GOOGLE_CUSTOM_VOICES_REPORTED_USAGE,
+  DEFAULT_PLAYHT_OPTIONS,
+  DEFAULT_RIMELABS_OPTIONS,
+  DEFAULT_VERBIO_MODEL,
  DISABLE_CUSTOM_SPEECH,
  GOOGLE_CUSTOM_VOICES_REPORTED_USAGE,
+  VERBIO_STT_MODELS,
 } from "src/api/constants";

 type SpeechServiceFormProps = {
@@ -88,14 +100,16 @@ export const SpeechServiceForm = ({ credential }: SpeechServiceFormProps) => {
  const [initialSttCheck, setInitialSttCheck] = useState(false);
  const [sttCheck, setSttCheck] = useState(false);
  const [vendor, setVendor] = useState<Lowercase<Vendor>>(
-    "" as Lowercase<Vendor>
+    "" as Lowercase<Vendor>,
  );
  const [region, setRegion] = useState("");
  const [apiKey, setApiKey] = useState("");
+  const [userId, setUserId] = useState("");
  const [accessKeyId, setAccessKeyId] = useState("");
  const [secretAccessKey, setSecretAccessKey] = useState("");
  const [clientId, setClientId] = useState("");
  const [secretKey, setSecretKey] = useState("");
+  const [clientSecret, setClientSecret] = useState("");
  const [googleServiceKey, setGoogleServiceKey] =
    useState<GoogleServiceKey | null>(null);
  const [sttRegion, setSttRegion] = useState("");
@@ -103,6 +117,7 @@ export const SpeechServiceForm = ({ credential }: SpeechServiceFormProps) => {
  const [ttsRegion, setTtsRegion] = useState("");
  const [ttsApiKey, setTtsApiKey] = useState("");
  const [ttsModelId, setTtsModelId] = useState("");
+  const [engineVersion, setEngineVersion] = useState(DEFAULT_VERBIO_MODEL);
  const [instanceId, setInstanceId] = useState("");
  const [initialCheckCustomTts, setInitialCheckCustomTts] = useState(false);
  const [initialCheckCustomStt, setInitialCheckCustomStt] = useState(false);
@@ -144,6 +159,17 @@ 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 [awsCredentialType, setAwsCredentialType] = useState(
+    AWS_CREDENTIAL_ACCESS_KEY,
+  );
+  const [roleArn, setRoleArn] = useState("");

  const handleFile = (file: File) => {
    const handleError = () => {
@@ -171,6 +197,34 @@ export const SpeechServiceForm = ({ credential }: SpeechServiceFormProps) => {
      });
  };

+  const getDefaultVendorOptions = () => {
+    if (vendor) {
+      switch (vendor) {
+        case VENDOR_ELEVENLABS:
+          return DEFAULT_ELEVENLABS_OPTIONS;
+        case VENDOR_PLAYHT:
+          return DEFAULT_PLAYHT_OPTIONS;
+        case VENDOR_RIMELABS:
+          return DEFAULT_RIMELABS_OPTIONS;
+      }
+    }
+    return "";
+  };
+
+  const getDefaultVendorApiDoc = () => {
+    if (vendor) {
+      switch (vendor) {
+        case VENDOR_ELEVENLABS:
+          return "https://elevenlabs.io/docs/api-reference/streaming";
+        case VENDOR_PLAYHT:
+          return "https://docs.play.ht/reference/api-generate-tts-audio-stream";
+        case VENDOR_RIMELABS:
+          return "https://rimelabs.mintlify.app/api-reference/endpoint/streaming-mp3#variable-parameters";
+      }
+    }
+    return "";
+  };
+
  const handlePutGoogleCustomVoices = () => {
    if (!credential || !credential.data) {
      return;
@@ -188,13 +242,13 @@ export const SpeechServiceForm = ({ credential }: SpeechServiceFormProps) => {
              speech_credential_sid: credential.data?.speech_credential_sid,
            });
          }
-        })
+        }),
      )
        .then(() => {
          toastSuccess("Speech credential updated successfully");
          credential.refetch();
          navigate(
-            `${ROUTE_INTERNAL_SPEECH}/${credential?.data?.speech_credential_sid}/edit`
+            `${ROUTE_INTERNAL_SPEECH}/${credential?.data?.speech_credential_sid}/edit`,
          );
        })
        .catch((error) => {
@@ -206,13 +260,13 @@ export const SpeechServiceForm = ({ credential }: SpeechServiceFormProps) => {
          if (v.google_custom_voice_sid) {
            return deleteGoogleCustomVoice(v.google_custom_voice_sid);
          }
-        })
+        }),
      )
        .then(() => {
          toastSuccess("Speech credential updated successfully");
          credential.refetch();
          navigate(
-            `${ROUTE_INTERNAL_SPEECH}/${credential?.data?.speech_credential_sid}/edit`
+            `${ROUTE_INTERNAL_SPEECH}/${credential?.data?.speech_credential_sid}/edit`,
          );
        })
        .catch((error) => {
@@ -222,7 +276,7 @@ export const SpeechServiceForm = ({ credential }: SpeechServiceFormProps) => {
      toastSuccess("Speech credential updated successfully");
      credential.refetch();
      navigate(
-        `${ROUTE_INTERNAL_SPEECH}/${credential.data.speech_credential_sid}/edit`
+        `${ROUTE_INTERNAL_SPEECH}/${credential.data.speech_credential_sid}/edit`,
      );
    }
  };
@@ -232,7 +286,7 @@ export const SpeechServiceForm = ({ credential }: SpeechServiceFormProps) => {

    if (isUserAccountScope(accountSid, user)) {
      toastError(
-        "You do not have permissions to make changes to these Speech Credentials"
+        "You do not have permissions to make changes to these Speech Credentials",
      );
      return;
    }
@@ -286,12 +340,27 @@ export const SpeechServiceForm = ({ credential }: SpeechServiceFormProps) => {
        ...(vendor === VENDOR_COBALT && {
          cobalt_server_uri: cobaltServerUri || null,
        }),
-        ...((vendor === VENDOR_ELEVENLABS || vendor === VENDOR_WHISPER) && {
+        ...((vendor === VENDOR_ELEVENLABS ||
+          vendor === VENDOR_WHISPER ||
+          vendor === VENDOR_RIMELABS) && {
          model_id: ttsModelId || null,
        }),
-        ...(vendor === VENDOR_ELEVENLABS && {
+        ...((vendor === VENDOR_ELEVENLABS ||
+          vendor === VENDOR_PLAYHT ||
+          vendor === VENDOR_RIMELABS) && {
          options: options || null,
        }),
+        ...(vendor === VENDOR_PLAYHT &&
+          ttsModelId && {
+            voice_engine: ttsModelId,
+          }),
+        ...(vendor === VENDOR_DEEPGRAM && {
+          deepgram_stt_uri: deepgramSttUri || null,
+          deepgram_stt_use_tls: deepgramSttUseTls ? 1 : 0,
+        }),
+        ...(vendor === VENDOR_VERBIO && {
+          engine_version: engineVersion,
+        }),
      };

      if (credential && credential.data) {
@@ -300,7 +369,7 @@ export const SpeechServiceForm = ({ credential }: SpeechServiceFormProps) => {
        putSpeechService(
          currentServiceProvider.service_provider_sid,
          credential.data.speech_credential_sid,
-          payload
+          payload,
        )
          .then(() => {
            if (credential && credential.data) {
@@ -310,7 +379,7 @@ export const SpeechServiceForm = ({ credential }: SpeechServiceFormProps) => {
                toastSuccess("Speech credential updated successfully");
                credential.refetch();
                navigate(
-                  `${ROUTE_INTERNAL_SPEECH}/${credential.data.speech_credential_sid}/edit`
+                  `${ROUTE_INTERNAL_SPEECH}/${credential.data.speech_credential_sid}/edit`,
                );
              }
            }
@@ -325,6 +394,7 @@ export const SpeechServiceForm = ({ credential }: SpeechServiceFormProps) => {
            vendor === VENDOR_GOOGLE ? JSON.stringify(googleServiceKey) : null,
          access_key_id: vendor === VENDOR_AWS ? accessKeyId : null,
          secret_access_key: vendor === VENDOR_AWS ? secretAccessKey : null,
+          role_arn: vendor === VENDOR_AWS ? roleArn : null,
          ...(apiKey && {
            api_key:
              vendor === VENDOR_MICROSOFT ||
@@ -333,10 +403,20 @@ export const SpeechServiceForm = ({ credential }: SpeechServiceFormProps) => {
              vendor === VENDOR_ASSEMBLYAI ||
              vendor === VENDOR_SONIOX ||
              vendor === VENDOR_ELEVENLABS ||
+              vendor === VENDOR_PLAYHT ||
+              vendor === VENDOR_RIMELABS ||
              vendor === VENDOR_WHISPER
                ? apiKey
                : null,
          }),
+          ...(vendor === VENDOR_PLAYHT &&
+            userId && {
+              user_id: userId,
+            }),
+          ...(vendor === VENDOR_VERBIO && {
+            client_id: clientId,
+            client_secret: clientSecret,
+          }),
          riva_server_uri: vendor == VENDOR_NVIDIA ? rivaServerUri : null,
        })
          .then(({ json }) => {
@@ -346,8 +426,8 @@ export const SpeechServiceForm = ({ credential }: SpeechServiceFormProps) => {
                  postGoogleCustomVoice({
                    ...v,
                    speech_credential_sid: json.sid,
-                  })
-                )
+                  }),
+                ),
              ).then(() => {
                toastSuccess("Speech credential created successfully");
                navigate(ROUTE_INTERNAL_SPEECH);
@@ -367,17 +447,22 @@ export const SpeechServiceForm = ({ credential }: SpeechServiceFormProps) => {
  };

  useEffect(() => {
-    if (vendor === VENDOR_ELEVENLABS || vendor === VENDOR_WHISPER) {
+    if (
+      vendor === VENDOR_ELEVENLABS ||
+      vendor === VENDOR_WHISPER ||
+      vendor === VENDOR_PLAYHT ||
+      vendor === VENDOR_RIMELABS
+    ) {
      getSpeechSupportedLanguagesAndVoices(
        currentServiceProvider?.service_provider_sid,
        vendor,
-        ""
+        "",
      ).then(({ json }) => {
        if (json.models) {
          setTtsModels(json.models);
          if (
            json.models.length > 0 &&
-            (vendor === VENDOR_ELEVENLABS || vendor === VENDOR_WHISPER)
+            !json.models.find((m) => m.value === ttsModelId)
          ) {
            setTtsModelId(json.models[0].value);
          }
@@ -508,13 +593,13 @@ export const SpeechServiceForm = ({ credential }: SpeechServiceFormProps) => {
      setInitialCheckCustomStt(isNotBlank(credential.data.custom_stt_endpoint));
      setInitialCheckOnpremAzureService(
        isNotBlank(credential.data.custom_tts_endpoint_url) ||
-          isNotBlank(credential.data.custom_stt_endpoint_url)
+          isNotBlank(credential.data.custom_stt_endpoint_url),
      );

      setCustomVendorName(
        credential.data.vendor.startsWith(VENDOR_CUSTOM)
          ? credential.data.vendor.substring(VENDOR_CUSTOM.length + 1)
-          : credential.data.vendor
+          : credential.data.vendor,
      );
      setCustomVendorAuthToken(credential.data.auth_token || "");
      setCustomVendorSttUrl(credential.data.custom_stt_url || "");
@@ -544,12 +629,51 @@ 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));
+
+    if (credential?.data?.user_id) {
+      setUserId(credential.data.user_id);
+    }
+
+    if (credential?.data?.voice_engine) {
+      setTtsModelId(credential.data.voice_engine);
+    }
+    if (credential?.data?.role_arn) {
+      setRoleArn(credential.data.role_arn);
+    }
+    if (credential) {
+      setAwsCredentialType(
+        credential?.data?.access_key_id
+          ? AWS_CREDENTIAL_ACCESS_KEY
+          : credential?.data?.role_arn
+            ? AWS_CREDENTIAL_IAM_ASSUME_ROLE
+            : AWS_INSTANCE_PROFILE,
+      );
+    }
+    if (credential?.data?.client_id) {
+      setClientId(credential.data.client_id);
+    }
+    if (credential?.data?.client_secret) {
+      setClientSecret(credential.data.client_secret);
+    }
+    if (credential?.data?.engine_version) {
+      setEngineVersion(credential.data.engine_version);
+    }
  }, [credential]);

  const updateCustomVoices = (
    index: number,
    key: string,
-    value: typeof customVoices[number][keyof GoogleCustomVoice]
+    value: (typeof customVoices)[number][keyof GoogleCustomVoice],
  ) => {
    setCustomVoices((prev) =>
      prev.map((g, i) =>
@@ -558,8 +682,8 @@ export const SpeechServiceForm = ({ credential }: SpeechServiceFormProps) => {
              ...g,
              [key]: value,
            }
-          : g
-      )
+          : g,
+      ),
    );
  };

@@ -596,7 +720,7 @@ export const SpeechServiceForm = ({ credential }: SpeechServiceFormProps) => {
            ]
              .concat(vendors)
              .filter(
-                (v) => !DISABLE_CUSTOM_SPEECH || v.value !== VENDOR_CUSTOM
+                (v) => !DISABLE_CUSTOM_SPEECH || v.value !== VENDOR_CUSTOM,
              )}
            onChange={(e) => {
              setVendor(e.target.value as Lowercase<Vendor>);
@@ -670,6 +794,8 @@ export const SpeechServiceForm = ({ credential }: SpeechServiceFormProps) => {
            {vendor !== VENDOR_WELLSAID &&
              vendor !== VENDOR_CUSTOM &&
              vendor !== VENDOR_WHISPER &&
+              vendor !== VENDOR_PLAYHT &&
+              vendor !== VENDOR_RIMELABS &&
              vendor !== VENDOR_ELEVENLABS && (
                <label htmlFor="use_for_stt" className="chk">
                  <input
@@ -806,7 +932,7 @@ export const SpeechServiceForm = ({ credential }: SpeechServiceFormProps) => {
                    {JSON.stringify(
                      getObscuredGoogleServiceKey(googleServiceKey),
                      null,
-                      2
+                      2,
                    )}
                  </code>
                </pre>
@@ -881,7 +1007,7 @@ export const SpeechServiceForm = ({ credential }: SpeechServiceFormProps) => {
                                  updateCustomVoices(
                                    i,
                                    "reported_usage",
-                                    e.target.value
+                                    e.target.value,
                                  );
                                }}
                              />
@@ -908,7 +1034,7 @@ export const SpeechServiceForm = ({ credential }: SpeechServiceFormProps) => {
                                  updateCustomVoices(
                                    i,
                                    "model",
-                                    e.target.value
+                                    e.target.value,
                                  );
                                }}
                              />
@@ -923,19 +1049,19 @@ export const SpeechServiceForm = ({ credential }: SpeechServiceFormProps) => {
                              setCustomVoicesMessage("");
                              if (customVoices.length === 1) {
                                setCustomVoicesMessage(
-                                  "You must provide at least one custom voice."
+                                  "You must provide at least one custom voice.",
                                );
                                return;
                              }
                              if (v.google_custom_voice_sid) {
                                deleteGoogleCustomVoice(
-                                  v.google_custom_voice_sid
+                                  v.google_custom_voice_sid,
                                ).finally(() => {
                                  credential?.refetch();
                                });
                              }
                              setCustomVoices((prev) =>
-                                prev.filter((_, idx) => idx !== i)
+                                prev.filter((_, idx) => idx !== i),
                              );
                            }}
                          >
@@ -1078,46 +1204,158 @@ export const SpeechServiceForm = ({ credential }: SpeechServiceFormProps) => {
            </fieldset>
          </>
        )}
+        {vendor === VENDOR_VERBIO && (
+          <>
+            <fieldset>
+              <label htmlFor="verbio_client_id">
+                Client ID
+                {!onPremNuanceSttCheck && !onPremNuanceTtsCheck && (
+                  <span>*</span>
+                )}
+              </label>
+              <input
+                id="verbio_client_id"
+                required
+                type="text"
+                name="verbio_client_id"
+                placeholder="Client ID"
+                value={clientId}
+                onChange={(e) => setClientId(e.target.value)}
+                disabled={credential ? true : false}
+              />
+              <label htmlFor="verbio_client_secret">
+                Client secret
+                {!onPremNuanceSttCheck && !onPremNuanceTtsCheck && (
+                  <span>*</span>
+                )}
+              </label>
+              <input
+                id="verbio_client_secret"
+                required
+                type="text"
+                name="verbio_client_secret"
+                placeholder="Client secret"
+                value={clientSecret}
+                onChange={(e) => setClientSecret(e.target.value)}
+                disabled={credential ? true : false}
+              />
+            </fieldset>
+            <fieldset>
+              <label htmlFor={`${vendor}_tts_model_id`}>
+                Engine version<span>*</span>
+              </label>
+              <Selector
+                id={"verbio_engine_version"}
+                name={"verbio_engine_version"}
+                value={engineVersion}
+                options={VERBIO_STT_MODELS}
+                onChange={(e) => {
+                  setEngineVersion(e.target.value);
+                }}
+              />
+            </fieldset>
+          </>
+        )}
        {vendor === VENDOR_AWS && (
          <fieldset>
-            <label htmlFor="aws_access_key">
-              Access key ID<span>*</span>
+            <label htmlFor="vendor">
+              Credential type<span>*</span>
            </label>
-            <input
-              id="aws_access_key"
-              required
-              type="text"
-              name="aws_access_key"
-              placeholder="Access Key ID"
-              value={accessKeyId}
-              onChange={(e) => setAccessKeyId(e.target.value)}
+            <Selector
+              id="aws_credential_type"
+              name="aws_credential_type"
+              value={awsCredentialType}
+              options={AWS_CREDENTIAL_TYPES}
+              onChange={(e) => {
+                setAccessKeyId("");
+                setSecretAccessKey("");
+                setRoleArn("");
+                setAwsCredentialType(e.target.value);
+              }}
              disabled={credential ? true : false}
-            />
-            <label htmlFor="aws_secret_key">
-              Secret access key<span>*</span>
-            </label>
-            <Passwd
-              id="aws_secret_key"
              required
-              name="aws_secret_key"
-              placeholder="Secret Access Key"
-              value={
-                secretAccessKey
-                  ? getObscuredSecret(secretAccessKey)
-                  : secretAccessKey
-              }
-              onChange={(e) => setSecretAccessKey(e.target.value)}
-              disabled={credential ? true : false}
            />
+            {awsCredentialType === AWS_CREDENTIAL_ACCESS_KEY ? (
+              <>
+                <label htmlFor="aws_access_key">
+                  Access key ID<span>*</span>
+                </label>
+                <input
+                  id="aws_access_key"
+                  required
+                  type="text"
+                  name="aws_access_key"
+                  placeholder="Access Key ID"
+                  value={accessKeyId}
+                  onChange={(e) => setAccessKeyId(e.target.value)}
+                  disabled={credential ? true : false}
+                />
+                <label htmlFor="aws_secret_key">
+                  Secret access key<span>*</span>
+                </label>
+                <Passwd
+                  id="aws_secret_key"
+                  required
+                  name="aws_secret_key"
+                  placeholder="Secret Access Key"
+                  value={
+                    secretAccessKey
+                      ? getObscuredSecret(secretAccessKey)
+                      : secretAccessKey
+                  }
+                  onChange={(e) => setSecretAccessKey(e.target.value)}
+                  disabled={credential ? true : false}
+                />
+              </>
+            ) : awsCredentialType === AWS_CREDENTIAL_IAM_ASSUME_ROLE ? (
+              <>
+                <label htmlFor="aws_access_key">
+                  RoleArn<span>*</span>
+                </label>
+                <input
+                  id="aws_role_arn"
+                  required
+                  type="text"
+                  name="aws_role_arn"
+                  placeholder="RoleArn"
+                  value={roleArn}
+                  onChange={(e) => setRoleArn(e.target.value)}
+                  disabled={credential ? true : false}
+                />
+              </>
+            ) : (
+              <></>
+            )}
          </fieldset>
        )}
+
        {(vendor === VENDOR_WELLSAID ||
-          vendor === VENDOR_DEEPGRAM ||
          vendor === VENDOR_ASSEMBLYAI ||
          vendor == VENDOR_ELEVENLABS ||
          vendor === VENDOR_WHISPER ||
+          vendor === VENDOR_PLAYHT ||
+          vendor === VENDOR_RIMELABS ||
          vendor === VENDOR_SONIOX) && (
          <fieldset>
+            {vendor === VENDOR_PLAYHT && (
+              <>
+                <label htmlFor={`${vendor}_userid`}>
+                  User ID<span>*</span>
+                </label>
+                <input
+                  id="playht_user_id"
+                  type="text"
+                  name="playht_user_id"
+                  placeholder="User ID"
+                  required
+                  value={userId}
+                  onChange={(e) => {
+                    setUserId(e.target.value);
+                  }}
+                  disabled={credential ? true : false}
+                />
+              </>
+            )}
            <label htmlFor={`${vendor}_apikey`}>
              API key<span>*</span>
            </label>
@@ -1132,7 +1370,39 @@ export const SpeechServiceForm = ({ credential }: SpeechServiceFormProps) => {
            />
          </fieldset>
        )}
-        {(vendor == VENDOR_ELEVENLABS || vendor == VENDOR_WHISPER) &&
+        {vendor === VENDOR_PLAYHT && ttsModels.length > 0 && (
+          <fieldset>
+            <label htmlFor={`${vendor}_tts_model_id`}>Voice engine</label>
+            <Selector
+              id={"tts_model_id"}
+              name={"tts_model_id"}
+              value={ttsModelId}
+              options={ttsModels}
+              onChange={(e) => {
+                setTtsModelId(e.target.value);
+              }}
+            />
+          </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 ||
+          vendor == VENDOR_RIMELABS) &&
          ttsModels.length > 0 && (
            <fieldset>
              <label htmlFor={`${vendor}_tts_model_id`}>Model</label>
@@ -1147,7 +1417,9 @@ export const SpeechServiceForm = ({ credential }: SpeechServiceFormProps) => {
              />
            </fieldset>
          )}
-        {vendor === VENDOR_ELEVENLABS && (
+        {(vendor === VENDOR_ELEVENLABS ||
+          vendor === VENDOR_PLAYHT ||
+          vendor === VENDOR_RIMELABS) && (
          <fieldset>
            <Checkzone
              hidden
@@ -1159,7 +1431,7 @@ export const SpeechServiceForm = ({ credential }: SpeechServiceFormProps) => {
                  setOptions(
                    tmpOptions
                      ? tmpOptions
-                      : JSON.stringify(DEFAULT_ELEVENLABS_OPTIONS, null, 2)
+                      : JSON.stringify(getDefaultVendorOptions(), null, 2),
                  );
                }
                if (!e.target.checked) {
@@ -1182,7 +1454,7 @@ export const SpeechServiceForm = ({ credential }: SpeechServiceFormProps) => {
                  }}
                >
                  <a
-                    href="https://elevenlabs.io/docs/api-reference/streaming"
+                    href={getDefaultVendorApiDoc()}
                    target="_blank"
                    rel="noopener noreferrer"
                    style={{ marginRight: "10px", fontSize: "16px" }}
@@ -1324,6 +1596,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>
--- a/src/containers/internal/views/speech-services/index.tsx
+++ b/src/containers/internal/views/speech-services/index.tsx
@@ -49,27 +49,27 @@ export const SpeechServices = () => {
      ? credentials.filter((credential) =>
          accountSid
            ? credential.account_sid === accountSid
-            : credential.account_sid === null
+            : credential.account_sid === null,
        )
      : [];
  }, [accountSid, accounts, credentials]);

  const filteredCredentials = useFilteredResults<SpeechCredential>(
    filter,
-    credentialsFiltered
+    credentialsFiltered,
  );

  const handleDelete = () => {
    if (credential && currentServiceProvider) {
      if (isUserAccountScope(accountSid, user)) {
        toastError(
-          "You do not have permissions to delete these Speech Credentials"
+          "You do not have permissions to delete these Speech Credentials",
        );
        return;
      }
      deleteSpeechService(
        currentServiceProvider.service_provider_sid,
-        credential.speech_credential_sid
+        credential.speech_credential_sid,
      )
        .then(() => {
          setCredential(null);
@@ -81,7 +81,7 @@ export const SpeechServices = () => {
                {credential.vendor}
                {credential.label ? ` (${credential.label})` : ""}
              </strong>{" "}
-            </>
+            </>,
          );
        })
        .catch((error) => {
@@ -97,7 +97,7 @@ export const SpeechServices = () => {
      setApiUrl(`Accounts/${accountSid}/SpeechCredentials`);
    } else {
      setApiUrl(
-        `ServiceProviders/${currentServiceProvider?.service_provider_sid}/SpeechCredentials`
+        `ServiceProviders/${currentServiceProvider?.service_provider_sid}/SpeechCredentials`,
      );
    }
  }, [currentServiceProvider, accountSid]);
@@ -149,7 +149,7 @@ export const SpeechServices = () => {
                            Vendor:{" "}
                            {credential.vendor.startsWith(VENDOR_CUSTOM)
                              ? credential.vendor.substring(
-                                  VENDOR_CUSTOM.length + 1
+                                  VENDOR_CUSTOM.length + 1,
                                )
                              : credential.vendor}
                          </strong>
--- a/src/containers/internal/views/speech-services/status.tsx
+++ b/src/containers/internal/views/speech-services/status.tsx
@@ -37,8 +37,8 @@ export const CredentialStatus = ({
            status === CRED_OK
              ? "teal"
              : status === CRED_NOT_TESTED
-              ? "jean"
-              : "jam"
+                ? "jean"
+                : "jam"
          }`}
          title={status === CRED_NOT_TESTED ? notTestedTxt : reason}
        >
@@ -61,11 +61,11 @@ export const CredentialStatus = ({
  useEffect(() => {
    if (user && user.scope === USER_ACCOUNT) {
      setApiUrl(
-        `Accounts/${user.account_sid}/SpeechCredentials/${cred.speech_credential_sid}/test`
+        `Accounts/${user.account_sid}/SpeechCredentials/${cred.speech_credential_sid}/test`,
      );
    } else if (currentServiceProvider) {
      setApiUrl(
-        `ServiceProviders/${currentServiceProvider.service_provider_sid}/SpeechCredentials/${cred.speech_credential_sid}/test`
+        `ServiceProviders/${currentServiceProvider.service_provider_sid}/SpeechCredentials/${cred.speech_credential_sid}/test`,
      );
    }
  }, [user, cred, currentServiceProvider]);
--- a/src/containers/internal/views/speech-services/utils.ts
+++ b/src/containers/internal/views/speech-services/utils.ts
@@ -14,7 +14,7 @@ export const getObscuredGoogleServiceKey = (key: GoogleServiceKey) => {
  return {
    ...key,
    private_key: `${keyHeader}${getObscuredSecret(
-      key.private_key.slice(keyHeader.length, key.private_key.length)
+      key.private_key.slice(keyHeader.length, key.private_key.length),
    )}`,
  };
 };
@@ -23,15 +23,15 @@ export const getUsage = (cred: SpeechCredential) => {
  return cred.use_for_tts && cred.use_for_stt
    ? "TTS/STT"
    : cred.use_for_tts
-    ? "TTS"
-    : cred.use_for_stt
-    ? "STT"
-    : "Not in use";
+      ? "TTS"
+      : cred.use_for_stt
+        ? "STT"
+        : "Not in use";
 };

 export const getStatus = (
  cred: SpeechCredential,
-  testResult: CredentialTestResult
+  testResult: CredentialTestResult,
 ): CredentialStatus => {
  if (
    (cred.use_for_tts &&
@@ -60,7 +60,7 @@ export const getStatus = (

 export const getReason = (
  cred: SpeechCredential,
-  testResult: CredentialTestResult
+  testResult: CredentialTestResult,
 ) => {
  const ok = "Connection test successful";

--- a/src/containers/internal/views/users/form.tsx
+++ b/src/containers/internal/views/users/form.tsx
@@ -55,7 +55,7 @@ export const UserForm = ({ user }: UserFormProps) => {
  const [email, setEmail] = useState("");
  const [initialPassword, setInitialPassword] = useState("");
  const [scope, setScope] = useState<UserScopes | null>(
-    currentUser?.scope || null
+    currentUser?.scope || null,
  );
  const [isActive, setIsActive] = useState(true);
  const [forceChange, setForceChange] = useState(true);
@@ -80,7 +80,7 @@ export const UserForm = ({ user }: UserFormProps) => {
          toastSuccess(
            <>
              Deleted user <strong>{user?.data?.name}</strong>
-            </>
+            </>,
          );
          handleSelfDetete();
        })
@@ -202,7 +202,8 @@ export const UserForm = ({ user }: UserFormProps) => {
                options={
                  currentUser?.scope === USER_SP
                    ? USER_SCOPE_SELECTION.filter(
-                        (opt) => opt.value !== USER_ADMIN && opt.value !== "all"
+                        (opt) =>
+                          opt.value !== USER_ADMIN && opt.value !== "all",
                      )
                    : USER_SCOPE_SELECTION.filter((e) => e.value !== "all")
                }
--- a/src/containers/internal/views/users/index.tsx
+++ b/src/containers/internal/views/users/index.tsx
@@ -60,7 +60,7 @@ export const Users = () => {

    if (scopeFilter !== "all" && accountSid) {
      return serviceProviderUsers?.filter(
-        (e) => e.scope === scopeFilter && accountSid === e.account_sid
+        (e) => e.scope === scopeFilter && accountSid === e.account_sid,
      );
    }

@@ -71,7 +71,7 @@ export const Users = () => {
  }, [accountSid, scopeFilter, users, accounts, currentServiceProvider]);

  const filteredUsers = useFilteredResults<User>(filter, usersFiltered)?.sort(
-    sortUsersAlpha
+    sortUsersAlpha,
  );

  useEffect(() => {
@@ -137,8 +137,8 @@ export const Users = () => {
                    {user.scope === USER_ADMIN
                      ? "All"
                      : user.account_name
-                      ? `Account: ${user.account_name}`
-                      : `Service Provider: ${user.service_provider_name}`}
+                        ? `Account: ${user.account_name}`
+                        : `Service Provider: ${user.service_provider_name}`}
                  </div>
                  <div className="item__actions">
                    <Link
--- a/src/containers/login/create-password.tsx
+++ b/src/containers/login/create-password.tsx
@@ -63,7 +63,7 @@ export const CreatePassword = () => {
              <li>Contain at least one special character</li>
            )}
          </ul>
-        </>
+        </>,
      );
      return;
    }
@@ -90,7 +90,7 @@ export const CreatePassword = () => {
            navigate(
              userData.scope !== USER_ACCOUNT
                ? ROUTE_INTERNAL_ACCOUNTS
-                : ROUTE_INTERNAL_APPLICATIONS
+                : ROUTE_INTERNAL_APPLICATIONS,
            );
          } else {
            setMessage(MSG_SOMETHING_WRONG);
--- a/src/containers/login/forgot-password.tsx
+++ b/src/containers/login/forgot-password.tsx
@@ -24,7 +24,7 @@ export const ForgotPassword = () => {
      .then((response) => {
        if (response.status === StatusCodes.NO_CONTENT) {
          toastSuccess(
-            "A password reset email has been sent to your email. Please check your inbox (and, possibly, spam folder) and follow the instructions to reset your password."
+            "A password reset email has been sent to your email. Please check your inbox (and, possibly, spam folder) and follow the instructions to reset your password.",
          );
          navigate(ROUTE_LOGIN);
        } else {
--- a/src/containers/login/reset-password.tsx
+++ b/src/containers/login/reset-password.tsx
@@ -20,7 +20,7 @@ export const ResetPassword = () => {
    setMessage("");
    if (newPassword !== confirmNewPassword) {
      setMessage(
-        "The confirmation password does not match the new password. Please ensure both passwords are identical."
+        "The confirmation password does not match the new password. Please ensure both passwords are identical.",
      );
      return;
    }
--- a/src/containers/login/sub-domain.tsx
+++ b/src/containers/login/sub-domain.tsx
@@ -44,8 +44,8 @@ export const RegisterChooseSubdomain = () => {
      getAvailability(`${name}.${rootDomain}`)
        .then(({ json }) =>
          setIsValidDomain(
-            Boolean(json.available) && hasValue(name) && name.length != 0
-          )
+            Boolean(json.available) && hasValue(name) && name.length != 0,
+          ),
        )
        .catch((error) => {
          setErrorMessage(error.msg);
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -19,5 +19,5 @@ createRoot(root).render(
        </AuthProvider>
      </BrowserRouter>
    </StateProvider>
-  </React.StrictMode>
+  </React.StrictMode>,
 );
--- a/src/router/auth.tsx
+++ b/src/router/auth.tsx
@@ -84,7 +84,7 @@ export const parseJwt = (token: string) => {
      .map((c) => {
        return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2);
      })
-      .join("")
+      .join(""),
  );

  return JSON.parse(jsonPayload);
@@ -117,7 +117,7 @@ export const useProvideAuth = (): AuthStateContext => {
                    navigate(
                      userData.scope !== USER_ACCOUNT
                        ? ROUTE_INTERNAL_ACCOUNTS
-                        : `${ROUTE_INTERNAL_ACCOUNTS}/${userData.account_sid}/edit`
+                        : `${ROUTE_INTERNAL_ACCOUNTS}/${userData.account_sid}/edit`,
                    );
                  }
                })
@@ -132,7 +132,7 @@ export const useProvideAuth = (): AuthStateContext => {
              navigate(
                userData.scope !== USER_ACCOUNT
                  ? ROUTE_INTERNAL_ACCOUNTS
-                  : `${ROUTE_INTERNAL_ACCOUNTS}/${userData.account_sid}/edit`
+                  : `${ROUTE_INTERNAL_ACCOUNTS}/${userData.account_sid}/edit`,
              );
            }

--- a/src/store/actions.ts
+++ b/src/store/actions.ts
@@ -17,7 +17,7 @@ export const genericAction = (state: State, action: Action<keyof State>) => {

 export const serviceProvidersAction = (
  state: State,
-  action: Action<keyof State>
+  action: Action<keyof State>,
 ) => {
  // Sorts for consistent list view
  action.payload = (<ServiceProvider[]>action.payload).sort(sortLocaleName);
@@ -33,7 +33,7 @@ export const serviceProvidersAction = (
    const serviceProvider = action.payload.find(
      (sp: ServiceProvider) =>
        sp.service_provider_sid ===
-        state.currentServiceProvider?.service_provider_sid
+        state.currentServiceProvider?.service_provider_sid,
    );
    // The `serviceProvider` will be undefined if this is after a DELETE
    // For this case we want to just reset to the first provider in the list
@@ -51,7 +51,7 @@ export const serviceProvidersAction = (

 export const currentServiceProviderAction = (
  state: State,
-  action: Action<keyof State>
+  action: Action<keyof State>,
 ) => {
  // Set MS Teams Tenants ACL condition
  state.accessControl.hasMSTeamsFqdn = (<ServiceProvider>action.payload)
--- a/src/store/localStore.ts
+++ b/src/store/localStore.ts
@@ -109,7 +109,7 @@ const storeLocation = "location";
 export const setLocation = () => {
  return localStorage.setItem(
    storeLocation,
-    window.location.pathname.split("/")[2]
+    window.location.pathname.split("/")[2],
  );
 };

--- a/src/styles/_forms.scss
+++ b/src/styles/_forms.scss
@@ -231,7 +231,7 @@ fieldset {
    }

    &:nth-child(2) {
-      grid-template-columns: repeat(4, 1fr);
+      grid-template-columns: repeat(3, 1fr);
      margin-top: ui-vars.$px02;

      > div:last-child {
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -29,14 +29,14 @@ import type { UserData } from "src/store/types";
 import { getQueryFilter } from "src/store/localStore";

 export const hasValue = <Type>(
-  variable: Type | null | undefined
+  variable: Type | null | undefined,
 ): variable is NonNullable<Type> => {
  return variable !== null && variable !== undefined;
 };

 export const hasLength = <Type>(
  variable: Type[] | null | undefined,
-  minlength = 0
+  minlength = 0,
 ): variable is NonNullable<Type[]> => {
  return hasValue(variable) && variable.length > minlength;
 };
@@ -52,7 +52,7 @@ export const isObject = (obj: unknown) => {

 export const isValidPasswd = (
  password: string,
-  passwordSettings: PasswordSettings
+  passwordSettings: PasswordSettings,
 ) => {
  if (passwordSettings) {
    return (
@@ -78,14 +78,14 @@ export const isValidPort = (port: number) => {
 export const getIpValidationType = (ipv4: string): IpType => {
  const type =
    /^((25[0-5]|2[0-4][0-9]|[0-1]?[0-9]?[0-9])\.){3}(25[0-5]|2[0-4][0-9]|[0-1]?[0-9]?[0-9])$/.test(
-      ipv4.trim()
+      ipv4.trim(),
    )
      ? IP
      : /^([a-zA-Z0-9][^.]*)(\.[^.]+){2,}$/.test(ipv4.trim())
-      ? FQDN
-      : /^([a-zA-Z][^.]*)(\.[^.]+)$/.test(ipv4.trim())
-      ? FQDN_TOP_LEVEL
-      : INVALID;
+        ? FQDN
+        : /^([a-zA-Z][^.]*)(\.[^.]+)$/.test(ipv4.trim())
+          ? FQDN_TOP_LEVEL
+          : INVALID;
  return type;
 };

@@ -114,16 +114,16 @@ export const getHumanDateTime = (date: string, fallbackText = "Never used") => {
  currDate.setHours(0, 0, 0, 0);
  argDate.setHours(0, 0, 0, 0);
  const daysDiff = Math.round(
-    (currDate.getTime() - argDate.getTime()) / 1000 / 60 / 60 / 24
+    (currDate.getTime() - argDate.getTime()) / 1000 / 60 / 60 / 24,
  );

  return daysDiff > 1
    ? `${daysDiff} days ago`
    : daysDiff === 1
-    ? "Yesterday"
-    : daysDiff === 0
-    ? "Today"
-    : fallbackText;
+      ? "Yesterday"
+      : daysDiff === 0
+        ? "Today"
+        : fallbackText;
 };

 export const formatPhoneNumber = (number: string) => {
@@ -150,7 +150,7 @@ export const formatTime = (seconds: number) => {

 export const sortLocaleName = (
  a: Required<{ name: string }>,
-  b: Required<{ name: string }>
+  b: Required<{ name: string }>,
 ) => a.name.localeCompare(b.name);

 export const getUserScope = (user: User): UserScopes => {
@@ -172,7 +172,7 @@ export const isUserAccountScope = (accountSid: string, user?: UserData) => {

 export const checkSelectOptions = (
  user?: UserData,
-  resource?: SpeechCredential | Carrier
+  resource?: SpeechCredential | Carrier,
 ) => {
  if (user?.scope === USER_ACCOUNT) {
    if (!resource) {
@@ -203,7 +203,7 @@ export const sortUsersAlpha = (a: User, b: User) => {

 export const filterScopeOptions = (
  optionArray: SelectorOptions[],
-  user: UserData
+  user: UserData,
 ) => {
  if (user.scope === USER_SP) {
    return optionArray.filter((option) => option.value !== USER_ADMIN);
--- a/src/utils/use-filtered-results.ts
+++ b/src/utils/use-filtered-results.ts
@@ -18,7 +18,7 @@ const fuzzyMatch = (patterns: string[], items: string[]) => {

 export const useFilteredResults = <Type>(
  rawFilter: string,
-  rawCollection: Type[] | undefined
+  rawCollection: Type[] | undefined,
 ) => {
  const splitFilter = useMemo(() => rawFilter.split(" "), [rawFilter]);
  const filteredCollection = useMemo(() => {
--- a/src/utils/use-mobile-media.ts
+++ b/src/utils/use-mobile-media.ts
@@ -10,7 +10,7 @@ export const useMobileMedia = () => {

  useEffect(() => {
    const mql = window.matchMedia(
-      `(max-width: ${getCssVar("--mobile-media")})`
+      `(max-width: ${getCssVar("--mobile-media")})`,
    );

    mql.addEventListener("change", handleMedia);
--- a/src/utils/use-redirect.ts
+++ b/src/utils/use-redirect.ts
@@ -8,7 +8,7 @@ import type { IMessage } from "src/store/types";
 export const useRedirect = <Type>(
  collection: Type[] | undefined,
  redirect: string,
-  message: IMessage
+  message: IMessage,
 ) => {
  const navigate = useNavigate();

--- a/src/utils/use-scoped-redirect.ts
+++ b/src/utils/use-scoped-redirect.ts
@@ -17,7 +17,7 @@ export const useScopedRedirect = (
  redirect: string,
  user?: UserData,
  message?: IMessage,
-  data?: Account | User | Application | Carrier | SpeechCredential
+  data?: Account | User | Application | Carrier | SpeechCredential,
 ) => {
  const navigate = useNavigate();
  const currentServiceProvider = useSelectState("currentServiceProvider");
--- a/src/utils/with-access-control.tsx
+++ b/src/utils/with-access-control.tsx
@@ -18,7 +18,7 @@ export interface ACLGetIMessage {

 export const withAccessControl = (
  acl: keyof ACL,
-  getMessage: ACLGetIMessage
+  getMessage: ACLGetIMessage,
 ) => {
  return function WithAccessControl(Component: React.ComponentType) {
    return function ComponentWithAccessControl(props: PassthroughProps) {
--- a/src/vendor/index.tsx
+++ b/src/vendor/index.tsx
@@ -20,6 +20,9 @@ export const VENDOR_COBALT = "cobalt";
 export const VENDOR_ELEVENLABS = "elevenlabs";
 export const VENDOR_ASSEMBLYAI = "assemblyai";
 export const VENDOR_WHISPER = "whisper";
+export const VENDOR_PLAYHT = "playht";
+export const VENDOR_RIMELABS = "rimelabs";
+export const VENDOR_VERBIO = "verbio";

 export const vendors: VendorOptions[] = [
  {
@@ -78,8 +81,39 @@ export const vendors: VendorOptions[] = [
    name: "Whisper",
    value: VENDOR_WHISPER,
  },
+  {
+    name: "PlayHT",
+    value: VENDOR_PLAYHT,
+  },
+  {
+    name: "RimeLabs",
+    value: VENDOR_RIMELABS,
+  },
+  {
+    name: "Verbio",
+    value: VENDOR_VERBIO,
+  },
 ].sort((a, b) => a.name.localeCompare(b.name)) as VendorOptions[];

+export const AWS_CREDENTIAL_ACCESS_KEY = "access_key";
+export const AWS_CREDENTIAL_IAM_ASSUME_ROLE = "assume_role";
+export const AWS_INSTANCE_PROFILE = "instance_profile";
+
+export const AWS_CREDENTIAL_TYPES = [
+  {
+    name: "AWS access key",
+    value: AWS_CREDENTIAL_ACCESS_KEY,
+  },
+  {
+    name: "AWS assume role",
+    value: AWS_CREDENTIAL_IAM_ASSUME_ROLE,
+  },
+  {
+    name: "AWS instance profile",
+    value: AWS_INSTANCE_PROFILE,
+  },
+];
+
 export const useRegionVendors = () => {
  const [regions, setRegions] = useState<RegionVendors>();

@@ -103,7 +137,7 @@ export const useRegionVendors = () => {
            ibm: ibmRegions,
          });
        }
-      }
+      },
    );

    return function cleanup() {
--- a/src/vendor/regions/ms-azure-regions.ts
+++ b/src/vendor/regions/ms-azure-regions.ts
@@ -9,6 +9,10 @@ export const regions: Region[] = [
    name: "Brazil - South (brazilsouth)",
    value: "brazilsouth",
  },
+  {
+    name: "Qatar - Central (qatarcentral)",
+    value: "qatarcentral",
+  },
  {
    name: "Canada - Central (canadacentral)",
    value: "canadacentral",
@@ -53,6 +57,10 @@ export const regions: Region[] = [
    name: "Norway - East (norwayeast)",
    value: "norwayeast",
  },
+  {
+    name: "Sweden - Central (swedencentral)",
+    value: "swedencentral",
+  },
  {
    name: "South Africa - North (southafricanorth)",
    value: "southafricanorth",
--- a/src/vendor/types.ts
+++ b/src/vendor/types.ts
@@ -12,7 +12,10 @@ export type Vendor =
  | "Custom"
  | "ElevenLabs"
  | "assemblyai"
-  | "whisper";
+  | "whisper"
+  | "playht"
+  | "rimelabs"
+  | "verbio";

 export interface VendorOptions {
  name: Vendor;
Author	SHA1	Message	Date
Hoan Luu Huu	2c390715d8	Feat/rid of env (#443 ) * Get rid of VITE_API_BASE_URL * wip * wip	2024-07-15 08:58:22 -04:00
Hoan Luu Huu	dcdc2c0808	add use sips scheme to outbound tls gateway (#439 ) * add use sips scheme to outbound tls gateway * update license	2024-06-15 09:13:04 -04:00
Hoan Luu Huu	a3c48e7efb	support verbio speech (#434 )	2024-05-29 07:57:05 -04:00
Hoan Luu Huu	6b9167e6b8	support speech aws polly by roleArn (#428 ) * support speech aws polly by roleArn * add 3 types of aws poly credential * wip	2024-05-02 07:58:02 -04:00
Hoan Luu Huu	e7889e1ad3	fix send OPTIONS ping mess the layout (#431 )	2024-04-30 07:43:44 -04:00
Hoan Luu Huu	1111e93918	Send options ping sip gateway (#363 ) * wip * up options ping * update review comments	2024-04-15 07:19:35 -04:00
Hoan Luu Huu	4df5709c10	print streaming tts span details (#426 ) * print streaming tts span details * wip	2024-04-14 09:15:52 -04:00
Hoan Luu Huu	760ddd64bb	support mod_rimelabs_tts (#425 )	2024-04-12 07:11:44 -04:00
Hoan Luu Huu	bd8612bb67	fix playht voice engine is not correctly display (#424 )	2024-04-09 06:53:53 -04:00
Hoan Luu Huu	bc68eb8e71	support mod_playht_tts (#423 ) * support mod_playht_tts * wip * wip * fix code style	2024-04-08 10:24:06 -04:00
Dave Horton	ea2713a021	update deps (#422 ) * update deps * prettier * wip	2024-04-07 18:42:42 -04:00
Dave Horton	1d1909732f	Revert "register use tls (#418 )" This reverts commit `d3354bbe9d`.	2024-04-06 13:48:50 -04:00
Hoan Luu Huu	d3354bbe9d	register use tls (#418 ) * register use tls * update Use SIP over TLS label	2024-04-04 08:03:12 -04:00
Hoan Luu Huu	d95b8073d3	update azure speech regions (#416 )	2024-04-01 07:35:33 -04:00
Hoan Luu Huu	e8355a1dd3	issue 409, shoud not get Invoices in self-hosted system (#412 )	2024-03-19 07:23:10 -04:00
Hoan Luu Huu	8be61ddfad	remove use_stream in elevenlabs and whisper speech (#406 )	2024-02-20 08:01:12 -05:00
Dave Horton	05c1d9efaa	prettier fix	2024-02-12 09:03:12 -05:00
Dave Horton	01a5476dfe	update github actions	2024-02-12 08:57:49 -05:00
Hoan Luu Huu	9d2fee64e6	Support deepgram onprem (#398 ) * Support deepgram onprem * wip * wip	2024-02-12 08:52:54 -05:00
Hoan Luu Huu	3a87f5f1c2	support use_streaming elevenlabs and whisper (#396 )	2024-02-12 08:16:31 -05:00
Hoan Luu Huu	a991b56a4e	Fix/speech selection after updating application (#395 ) * fix speech selection show app languge and voice * wip * wip * wip * wip	2024-01-27 11:26:37 -05:00