From a70a1bf6149a99b70a48bcfd0f45fa43e675b071 Mon Sep 17 00:00:00 2001
From: Hoan Luu Huu <110280845+xquanluu@users.noreply.github.com>
Date: Thu, 9 Oct 2025 19:20:39 +0700
Subject: [PATCH] support elevenlabs different endpoint (#571)

* support elevenlabs different endpoint

* wip
---
 src/api/types.ts                              |  1 +
 .../internal/views/speech-services/form.tsx   | 47 ++++++++++++++++++-
 2 files changed, 47 insertions(+), 1 deletion(-)

diff --git a/src/api/types.ts b/src/api/types.ts
index b09aff1..6a17a20 100644
--- a/src/api/types.ts
+++ b/src/api/types.ts
@@ -448,6 +448,7 @@ export interface SpeechCredential {
   playht_tts_uri: null | string;
   resemble_tts_uri: null | string;
   resemble_tts_use_tls: number;
+  api_uri: null | string;
 }
 
 export interface Alert {
diff --git a/src/containers/internal/views/speech-services/form.tsx b/src/containers/internal/views/speech-services/form.tsx
index be1246b..97dd2d8 100644
--- a/src/containers/internal/views/speech-services/form.tsx
+++ b/src/containers/internal/views/speech-services/form.tsx
@@ -108,6 +108,13 @@ export const SpeechServiceForm = ({ credential }: SpeechServiceFormProps) => {
   const { toastError, toastSuccess } = useToast();
   const navigate = useNavigate();
   const user = useSelectState("user");
+
+  // ElevenLabs API URI options
+  const ELEVENLABS_API_URI_OPTIONS = [
+    { name: "US", value: "api.elevenlabs.io" },
+    { name: "EU", value: "api.eu.residency.elevenlabs.io" },
+    { name: "IN", value: "api.in.residency.elevenlabs.io" },
+  ];
   const currentServiceProvider = useSelectState("currentServiceProvider");
   const regions = useRegionVendors();
   const [accounts] = useServiceProviderData<Account[]>("Accounts");
@@ -121,6 +128,7 @@ export const SpeechServiceForm = ({ credential }: SpeechServiceFormProps) => {
   );
   const [region, setRegion] = useState("");
   const [apiKey, setApiKey] = useState("");
+  const [apiUri, setApiUri] = useState("api.elevenlabs.io");
   const [userId, setUserId] = useState("");
   const [accessKeyId, setAccessKeyId] = useState("");
   const [secretAccessKey, setSecretAccessKey] = useState("");
@@ -456,6 +464,9 @@ export const SpeechServiceForm = ({ credential }: SpeechServiceFormProps) => {
           vendor === VENDOR_RIMELABS) && {
           model_id: ttsModelId || null,
         }),
+        ...(vendor === VENDOR_ELEVENLABS && {
+          api_uri: apiUri || null,
+        }),
         ...((vendor === VENDOR_ELEVENLABS ||
           vendor === VENDOR_PLAYHT ||
           vendor === VENDOR_INWORLD ||
@@ -697,6 +708,10 @@ export const SpeechServiceForm = ({ credential }: SpeechServiceFormProps) => {
         setApiKey(credential.data.api_key);
       }
 
+      if (credential.data.api_uri) {
+        setApiUri(credential.data.api_uri);
+      }
+
       if (credential.data.region) {
         setRegion(credential.data.region);
       }
@@ -954,6 +969,9 @@ export const SpeechServiceForm = ({ credential }: SpeechServiceFormProps) => {
               setVendor(e.target.value as Lowercase<Vendor>);
               setRegion("");
               setApiKey("");
+              setApiUri(
+                e.target.value === VENDOR_ELEVENLABS ? "api.elevenlabs.io" : "",
+              );
               setGoogleServiceKey(null);
             }}
             disabled={credential ? true : false}
@@ -1820,10 +1838,37 @@ export const SpeechServiceForm = ({ credential }: SpeechServiceFormProps) => {
           </fieldset>
         )}
 
+        {vendor === VENDOR_ELEVENLABS && (
+          <fieldset>
+            <label htmlFor="elevenlabs_api_uri">
+              Data residency<span>*</span>
+            </label>
+            <Selector
+              id="elevenlabs_api_uri"
+              name="elevenlabs_api_uri"
+              value={apiUri}
+              options={ELEVENLABS_API_URI_OPTIONS}
+              onChange={(e) => setApiUri(e.target.value)}
+              required
+            />
+            <label htmlFor={`${vendor}_apikey`}>
+              API key<span>*</span>
+            </label>
+            <Passwd
+              id={`${vendor}_apikey`}
+              required
+              name={`${vendor}_apikey`}
+              placeholder="API key"
+              value={apiKey ? getObscuredSecret(apiKey) : apiKey}
+              onChange={(e) => setApiKey(e.target.value)}
+              disabled={credential ? true : false}
+            />
+          </fieldset>
+        )}
+
         {(vendor === VENDOR_WELLSAID ||
           vendor === VENDOR_ASSEMBLYAI ||
           vendor === VENDOR_VOXIST ||
-          vendor == VENDOR_ELEVENLABS ||
           vendor === VENDOR_WHISPER ||
           vendor === VENDOR_RIMELABS ||
           vendor === VENDOR_INWORLD ||