add instance ID field (#175)

Co-authored-by: EgleHelms <e.helms@cognigy.com>

src/api/types.ts

@@ -306,6 +306,7 @@ export interface SpeechCredential {
   tts_region: null | string;
   stt_api_key: null | string;
   stt_region: null | string;
+  instance_id: null | string;
 }
 
 export interface Alert {

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

@@ -67,6 +67,7 @@ export const SpeechServiceForm = ({ credential }: SpeechServiceFormProps) => {
   const [sttApiKey, setSttApiKey] = useState("");
   const [ttsRegion, setTtsRegion] = useState("");
   const [ttsApiKey, setTtsApiKey] = useState("");
+  const [instanceId, setInstanceId] = useState("");
   const [useCustomTts, setUseCustomTts] = useState(false);
   const [useCustomStt, setUseCustomStt] = useState(false);
   const [customTtsEndpoint, setCustomTtsEndpoint] = useState("");
@@ -129,6 +130,7 @@ export const SpeechServiceForm = ({ credential }: SpeechServiceFormProps) => {
           custom_stt_endpoint: customSttEndpoint || null,
         }),
         ...(vendor === VENDOR_IBM && {
+          instance_id: instanceId,
           stt_api_key: sttApiKey || null,
           stt_region: sttRegion || null,
           tts_api_key: ttsApiKey || null,
@@ -253,6 +255,10 @@ export const SpeechServiceForm = ({ credential }: SpeechServiceFormProps) => {
         setSttRegion(credential.data.stt_region);
       }
 
+      if (credential.data.instance_id) {
+        setInstanceId(credential.data.instance_id);
+      }
+
       setUseCustomTts(credential.data.use_custom_tts > 0 ? true : false);
       setUseCustomStt(credential.data.use_custom_stt > 0 ? true : false);
       setCustomTtsEndpoint(credential.data.custom_tts_endpoint || "");
@@ -528,6 +534,18 @@ export const SpeechServiceForm = ({ credential }: SpeechServiceFormProps) => {
                 onChange={(e) => setSttApiKey(e.target.value)}
                 disabled={credential ? true : false}
               />
+              <label htmlFor="instance_id">
+                Speech Instance ID {sttCheck && <span>*</span>}
+              </label>
+              <input
+                id="instance_id"
+                required={sttCheck}
+                type="text"
+                name="instance_id"
+                placeholder="Instance ID"
+                value={instanceId}
+                onChange={(e) => setInstanceId(e.target.value)}
+              />
             </fieldset>
           )}
         {vendor === VENDOR_MICROSOFT && (