Add Microsoft vendor to Jambonz Webapp (#32)

* Add Microsoft vendor to Speech Form

Add Microsoft vendor to Application Form

Clean up UI for Speech and Application forms

* Remove Sbcs from SpeechServiceAddEdit Form

src/components/blocks/TableContent.js

@@ -220,7 +220,8 @@ const TableContent = props => {
         contentToDelete.name ||
         contentToDelete.number ||
         contentToDelete.tenant_fqdn ||
-        contentToDelete.token
+        contentToDelete.token ||
+        contentToDelete.vendor
       ) && (
         <Modal
           title={`Are you sure you want to delete the following ${props.name}?`}

src/components/elements/Select.js

@@ -10,6 +10,7 @@ const Select = styled.select`
   border-radius: 0.125rem;
   background: #fff;
   color: inherit;
+  max-width: 230px;
   &:focus {
     border-color: #565656;
     outline: none;

src/components/forms/ApplicationForm.js

@@ -15,6 +15,8 @@ import SpeechSynthesisLanguageGoogle from '../../data/SpeechSynthesisLanguageGoo
 import SpeechSynthesisLanguageAws from '../../data/SpeechSynthesisLanguageAws';
 import SpeechRecognizerLanguageGoogle from '../../data/SpeechRecognizerLanguageGoogle';
 import SpeechRecognizerLanguageAws from '../../data/SpeechRecognizerLanguageAws';
+import SpeechRecognizerLanguageMicrosoft from '../../data/SpeechRecognizerLanguageMicrosoft';
+import SpeechSynthesisLanguageMicrosoft from '../../data/SpeechSynthesisLanguageMicrosoft';
 import Loader from '../blocks/Loader';
 import CopyableText from '../elements/CopyableText';
 
@@ -745,6 +747,10 @@ const ApplicationForm = props => {
                   ? SpeechSynthesisLanguageGoogle.find(l => (
                       l.code === speechSynthesisLanguage
                     ))
+                  : e.target.value === 'microsoft'
+                  ? SpeechSynthesisLanguageMicrosoft.find(l => (
+                      l.code === speechSynthesisLanguage
+                    ))
                   : SpeechSynthesisLanguageAws.find(l => (
                       l.code === speechSynthesisLanguage
                     ));
@@ -758,9 +764,13 @@ const ApplicationForm = props => {
                     return;
                   }
 
-                  newLang = SpeechSynthesisLanguageAws.find(l => (
-                    l.code === 'en-US'
-                  ));
+                  newLang = e.target.value === 'aws'
+                    ? SpeechSynthesisLanguageAws.find(l => (
+                        l.code === 'en-US'
+                      ))
+                    : SpeechSynthesisLanguageMicrosoft.find(l => (
+                        l.code === 'en-US'
+                      ));
                 }
 
                 // Update state to reflect first voice option for language
@@ -769,6 +779,7 @@ const ApplicationForm = props => {
             >
               <option value="google">Google</option>
               <option value="aws">AWS</option>
+              <option value="microsoft">Microsoft</option>
             </Select>
             <Label middle htmlFor="speechSynthesisLanguage">Language</Label>
             <Select
@@ -792,6 +803,10 @@ const ApplicationForm = props => {
                   ? SpeechSynthesisLanguageGoogle.find(l => (
                       l.code === e.target.value
                     ))
+                  : speechSynthesisVendor === 'microsoft'
+                  ? SpeechSynthesisLanguageMicrosoft.find(l => (
+                      l.code === e.target.value
+                    ))
                   : SpeechSynthesisLanguageAws.find(l => (
                       l.code === e.target.value
                     ));
@@ -804,6 +819,10 @@ const ApplicationForm = props => {
                 SpeechSynthesisLanguageGoogle.map(l => (
                   <option key={l.code} value={l.code}>{l.name}</option>
                 ))
+              ) : speechSynthesisVendor === 'microsoft' ? (
+                SpeechSynthesisLanguageMicrosoft.map(l => (
+                  <option key={l.code} value={l.code}>{l.name}</option>
+                ))
               ) : (
                 SpeechSynthesisLanguageAws.map(l => (
                   <option key={l.code} value={l.code}>{l.name}</option>
@@ -824,6 +843,12 @@ const ApplicationForm = props => {
                   .map(m => m.voices.map(v => (
                       <option key={v.value} value={v.value}>{v.name}</option>
                   )))
+              ) : speechSynthesisVendor === 'microsoft' ? (
+                SpeechSynthesisLanguageMicrosoft
+                  .filter(l => l.code === speechSynthesisLanguage)
+                  .map(m => m.voices.map(v => (
+                    <option key={v.value} value={v.value}>{v.name}</option>
+                  )))
               ) : (
                 SpeechSynthesisLanguageAws
                     .filter(l => l.code === speechSynthesisLanguage)
@@ -862,6 +887,7 @@ const ApplicationForm = props => {
             >
               <option value="google">Google</option>
               <option value="aws">AWS</option>
+              <option value="microsoft">Microsoft</option>
             </Select>
             <Label middle htmlFor="speechRecognizerLanguage">Language</Label>
             <Select
@@ -875,6 +901,10 @@ const ApplicationForm = props => {
                 SpeechRecognizerLanguageGoogle.map(l => (
                   <option key={l.code} value={l.code}>{l.name}</option>
                 ))
+              ) : speechRecognizerVendor === 'microsoft' ? (
+                SpeechRecognizerLanguageMicrosoft.map(l => (
+                  <option key={l.code} value={l.code}>{l.name}</option>
+                ))
               ) : (
                 SpeechRecognizerLanguageAws.map(l => (
                   <option key={l.code} value={l.code}>{l.name}</option>

src/components/forms/SpeechForm.js

@@ -20,6 +20,8 @@ import Button from '../elements/Button';
 import Loader from '../blocks/Loader';
 import { ServiceProviderValueContext } from '../../contexts/ServiceProviderContext'
 
+import MicrosoftAzureRegions from '../../data/MicrosoftAzureRegions';
+
 
 const StyledButtonGroup = styled(InputGroup)`
   @media (max-width: 576.98px) {
@@ -67,10 +69,13 @@ const SpeechServicesAddEdit = (props) => {
   // Refs
   const refVendorGoogle = useRef(null);
   const refVendorAws = useRef(null);
+  const refVendorMs = useRef(null);
   const refAccessKeyId = useRef(null);
   const refSecretAccessKey = useRef(null);
   const refUseForTts = useRef(null);
   const refUseForStt = useRef(null);
+  const refApiKey = useRef(null);
+  const refRegion = useRef(null);
 
   // Form inputs
   const [ vendor,              setVendor              ] = useState('');
@@ -82,14 +87,19 @@ const SpeechServicesAddEdit = (props) => {
   const [ useForStt,           setUseForStt           ] = useState(false);
   const [ accounts,            setAccounts            ] = useState([]);
   const [ accountSid,          setAccountSid          ] = useState('');
+  const [ apiKey,              setApiKey              ] = useState('');
+  const [ region,              setRegion              ] = useState('');
 
   // Invalid form inputs
   const [ invalidVendorGoogle,    setInvalidVendorGoogle    ] = useState(false);
   const [ invalidVendorAws,       setInvalidVendorAws       ] = useState(false);
+  const [ invalidVendorMs,        setInvalidVendorMs       ] = useState(false);
   const [ invalidAccessKeyId,     setInvalidAccessKeyId     ] = useState(false);
   const [ invalidSecretAccessKey, setInvalidSecretAccessKey ] = useState(false);
   const [ invalidUseForTts,       setInvalidUseForTts       ] = useState(false);
   const [ invalidUseForStt,       setInvalidUseForStt       ] = useState(false);
+  const [ invalidApiKey,          setInvalidApiKey          ] = useState(false);
+  const [ invalidRegion,          setInvalidRegion          ] = useState(false);
 
   const [ originalTtsValue,       setOriginalTtsValue       ] = useState(null);
   const [ originalSttValue,       setOriginalSttValue       ] = useState(null);
@@ -139,6 +149,8 @@ const SpeechServicesAddEdit = (props) => {
           setDisplayedServiceKey( displayedServiceKeyJson                 || '');
           setAccessKeyId(         speechCredential.data.access_key_id     || '');
           setSecretAccessKey(     speechCredential.data.secret_access_key || '');
+          setApiKey(              speechCredential.data.api_key           || '');
+          setRegion(              speechCredential.data.region            || '');
           setUseForTts(           speechCredential.data.use_for_tts       || false);
           setUseForStt(           speechCredential.data.use_for_stt       || false);
           setOriginalTtsValue(    speechCredential.data.use_for_tts       || false);
@@ -206,10 +218,12 @@ const SpeechServicesAddEdit = (props) => {
       setErrorMessage('');
       setInvalidVendorGoogle(false);
       setInvalidVendorAws(false);
+      setInvalidVendorMs(false);
       setInvalidAccessKeyId(false);
       setInvalidSecretAccessKey(false);
       setInvalidUseForTts(false);
       setInvalidUseForStt(false);
+      setInvalidApiKey(false);
       let errorMessages = [];
       let focusHasBeenSet = false;
 
@@ -217,6 +231,7 @@ const SpeechServicesAddEdit = (props) => {
         errorMessages.push('Please select a vendor.');
         setInvalidVendorGoogle(true);
         setInvalidVendorAws(true);
+        setInvalidVendorMs(true);
         if (!focusHasBeenSet) {
           refVendorGoogle.current.focus();
           focusHasBeenSet = true;
@@ -245,6 +260,24 @@ const SpeechServicesAddEdit = (props) => {
         }
       }
 
+      if (vendor === 'microsoft' && !apiKey) {
+        errorMessages.push('Please provide an API key.');
+        setInvalidApiKey(true);
+        if (!focusHasBeenSet) {
+          refApiKey.current.focus();
+          focusHasBeenSet = true;
+        }
+      }
+
+      if (vendor === 'microsoft' && !region) {
+        errorMessages.push('Please select a region.');
+        setInvalidRegion(true);
+        if (!focusHasBeenSet) {
+          refRegion.current.focus();
+          focusHasBeenSet = true;
+        }
+      }
+
       if (errorMessages.length > 1) {
         setErrorMessage(errorMessages);
         return;
@@ -276,6 +309,8 @@ const SpeechServicesAddEdit = (props) => {
           service_key: vendor === 'google' ? JSON.stringify(serviceKey) : null,
           access_key_id: vendor === 'aws' ? accessKeyId : null,
           secret_access_key: vendor === 'aws' ? secretAccessKey : null,
+          api_key: vendor === 'microsoft' ? apiKey : null,
+          region: vendor === 'microsoft' ? region : null,
           use_for_tts: useForTts,
           use_for_stt: useForStt,
           service_provider_sid: accountSid ? null : currentServiceProvider,
@@ -444,6 +479,17 @@ const SpeechServicesAddEdit = (props) => {
             ref={refVendorAws}
             disabled={type === 'edit'}
           />
+
+          <Radio
+            name="vendor"
+            id="microsoft"
+            label="Microsoft"
+            checked={vendor === 'microsoft'}
+            onChange={() => setVendor('microsoft')}
+            invalid={invalidVendorMs}
+            ref={refVendorMs}
+            disabled={type === 'edit'}
+          />
         </InputGroup>
 
         <Label htmlFor="account">Used by</Label>
@@ -512,11 +558,47 @@ const SpeechServicesAddEdit = (props) => {
               disabled={type === 'edit'}
             />
           </>
+        ) : vendor === 'microsoft' ? (
+          <>
+            <Label htmlFor="apiKey">API Key</Label>
+            <Input
+              name="apiKey"
+              id="apiKey"
+              value={apiKey}
+              onChange={e => setApiKey(e.target.value)}
+              placeholder=""
+              invalid={invalidApiKey}
+              ref={refApiKey}
+              disabled={type === 'edit'}
+            />
+
+            <Label htmlFor="region">Region</Label>
+            <Select
+              name="region"
+              id="region"
+              value={region}
+              onChange={e => setRegion(e.target.value)}
+              ref={refRegion}
+              invalid={invalidRegion}
+            >
+              <option value="">
+                All regions
+              </option>
+              {MicrosoftAzureRegions.map(r => (
+                <option
+                  key={r.value}
+                  value={r.value}
+                >
+                  {r.name}
+                </option>
+              ))}
+            </Select>
+          </>
         ) : (
           null
         )}
 
-        {vendor === 'google' || vendor === 'aws' ? (
+        {vendor === 'google' || vendor === 'aws' || vendor === 'microsoft' ? (
           <>
             <div/>
             <Checkbox

src/components/pages/internal/SpeechServicesAddEdit.js

@@ -2,7 +2,6 @@ import React, { useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 import InternalTemplate from '../../templates/InternalTemplate';
 import SpeechForm from '../../forms/SpeechForm';
-import Sbcs from '../../blocks/Sbcs';
 
 const SpeechServicesAddEdit = () => {
   let { speech_service_sid } = useParams();
@@ -14,7 +13,6 @@ const SpeechServicesAddEdit = () => {
     <InternalTemplate
       type="form"
       title={pageTitle}
-      subtitle={<Sbcs />}
       breadcrumbs={[
         { name: 'Speech Services', url: '/internal/speech-services' },
         { name: pageTitle },

src/components/pages/internal/SpeechServicesList.js

@@ -9,7 +9,6 @@ import handleErrors from '../../../helpers/handleErrors';
 import InternalTemplate from '../../templates/InternalTemplate';
 import TableContent from '../../../components/blocks/TableContent';
 import { ServiceProviderValueContext } from '../../../contexts/ServiceProviderContext';
-import Sbcs from '../../blocks/Sbcs';
 import InputGroup from '../../../components/elements/InputGroup';
 import Select from '../../../components/elements/Select';
 
@@ -268,7 +267,6 @@ const SpeechServicesList = () => {
     <InternalTemplate
       type="normalTable"
       title="Speech Services"
-      subtitle={<Sbcs />}
       addButtonText="Add Speech Service"
       addButtonLink="/internal/speech-services/add"
     >

src/data/MicrosoftAzureRegions.js

@@ -0,0 +1,82 @@
+export default [
+  {
+    name: 'Asia (East)',
+    value: 'eastasia'
+  },
+  {
+    name: 'Asia (Southeast)',
+    value: 'southeastasia'
+  },
+  {
+    name: 'Australia (East)',
+    value: 'australiaeast'
+  },
+  {
+    name: 'Brazil (South)',
+    value: 'brazilsouth'
+  },
+  {
+    name: 'Canada (Central)',
+    value: 'canadacentral'
+  },
+  {
+    name: 'Europe (North)',
+    value: 'northeurope'
+  },
+  {
+    name: 'Europe (West)',
+    value: 'westeurope'
+  },
+  {
+    name: 'France (Central)',
+    value: 'francecentral'
+  },
+  {
+    name: 'India (Central)',
+    value: 'centralindia'
+  },
+  {
+    name: 'Japan (East)',
+    value: 'japaneast'
+  },
+  {
+    name: 'Korea (Central)',
+    value: 'koreacentral'
+  },
+  {
+    name: 'South Africa (North)',
+    value: 'southafricanorth'
+  },
+  {
+    name: 'UK (South)',
+    value: 'uksouth'
+  },
+  {
+    name: 'US (West Central)',
+    value: 'westcentralus'
+  },
+  {
+    name: 'US (East)',
+    value: 'eastus'
+  },
+  {
+    name: 'US (East 2)',
+    value: 'eastus2'
+  },
+  {
+    name: 'US (North Central)',
+    value: 'northcentralus'
+  },
+  {
+    name: 'US (South Central)',
+    value: 'southcentralus'
+  },
+  {
+    name: 'US (West)',
+    value: 'westus'
+  },
+  {
+    name: 'US (West 2)',
+    value: 'westus2'
+  },
+];

src/data/SpeechRecognizerLanguageMicrosoft.js

@@ -0,0 +1,422 @@
+export default [
+  {
+    name: 'Arabic (Algeria)',
+    code: 'ar-DZ'
+  },
+  {
+    name: 'Arabic (Bahrain)',
+    code: 'ar-BH'
+  },
+  {
+    name: 'Arabic (Egypt)',
+    code: 'ar-EG'
+  },
+  {
+    name: 'Arabic (Iraq)',
+    code: 'ar-IQ'
+  },
+  {
+    name: 'Arabic (Israel)',
+    code: 'ar-IL'
+  },
+  {
+    name: 'Arabic (Jordan)',
+    code: 'ar-JO'
+  },
+  {
+    name: 'Arabic (Kuwait)',
+    code: 'ar-KW'
+  },
+  {
+    name: 'Arabic (Lebanon)',
+    code: 'ar-LB'
+  },
+  {
+    name: 'Arabic (Libya)',
+    code: 'ar-LY'
+  },
+  {
+    name: 'Arabic (Morocco)',
+    code: 'ar-MA'
+  },
+  {
+    name: 'Arabic (Oman)',
+    code: 'ar-OM'
+  },
+  {
+    name: 'Arabic (Qatar)',
+    code: 'ar-QA'
+  },
+  {
+    name: 'Arabic (Saudi Arabia)',
+    code: 'ar-SA'
+  },
+  {
+    name: 'Arabic (Palestinian Authority)',
+    code: 'ar-PS'
+  },
+  {
+    name: 'Arabic (Syria)',
+    code: 'ar-SY'
+  },
+  {
+    name: 'Arabic (Tunisia)',
+    code: 'ar-TN'
+  },
+  {
+    name: 'Arabic (United Arab Emirates)',
+    code: 'ar-AE'
+  },
+  {
+    name: 'Arabic (Yemen)',
+    code: 'ar-YE'
+  },
+  {
+    name: 'Bulgarian (Bulgaria)',
+    code: 'bg-BG'
+  },
+  {
+    name: 'Catalan (Spain)',
+    code: 'ca-ES'
+  },
+  {
+    name: 'Chinese (Cantonese, Traditional)',
+    code: 'zh-HK'
+  },
+  {
+    name: 'Chinese (Mandarin, Simplified)',
+    code: 'zh-CN'
+  },
+  {
+    name: 'Chinese (Taiwanese Mandarin)',
+    code: 'zh-TW'
+  },
+  {
+    name: 'Croatian (Croatia)',
+    code: 'hr-HR'
+  },
+  {
+    name: 'Czech (Czech)',
+    code: 'cs-CZ'
+  },
+  {
+    name: 'Danish (Denmark)',
+    code: 'da-DK'
+  },
+  {
+    name: 'Dutch (Netherlands)',
+    code: 'nl-NL'
+  },
+  {
+    name: 'English (Australia)',
+    code: 'en-AU'
+  },
+  {
+    name: 'English (Canada)',
+    code: 'en-CA'
+  },
+  {
+    name: 'English (Ghana)',
+    code: 'en-GH'
+  },
+  {
+    name: 'English (Hong Kong)',
+    code: 'en-HK'
+  },
+  {
+    name: 'English (India)',
+    code: 'en-IN'
+  },
+  {
+    name: 'English (Ireland)',
+    code: 'en-IE'
+  },
+  {
+    name: 'English (Kenya)',
+    code: 'en-KE'
+  },
+  {
+    name: 'English (New Zealand)',
+    code: 'en-NZ'
+  },
+  {
+    name: 'English (Nigeria)',
+    code: 'en-NG'
+  },
+  {
+    name: 'English (Philippines)',
+    code: 'en-PH'
+  },
+  {
+    name: 'English (Singapore)',
+    code: 'en-SG'
+  },
+  {
+    name: 'English (South Africa)',
+    code: 'en-ZA'
+  },
+  {
+    name: 'English (Tanzania)',
+    code: 'en-TZ'
+  },
+  {
+    name: 'English (United Kingdom)',
+    code: 'en-GB'
+  },
+  {
+    name: 'English (United States)',
+    code: 'en-US'
+  },
+  {
+    name: 'Estonian(Estonia)',
+    code: 'et-EE'
+  },
+  {
+    name: 'Filipino (Philippines)',
+    code: 'fil-PH'
+  },
+  {
+    name: 'Finnish (Finland)',
+    code: 'fi-FI'
+  },
+  {
+    name: 'French (Canada)',
+    code: 'fr-CA'
+  },
+  {
+    name: 'French (France)',
+    code: 'fr-FR'
+  },
+  {
+    name: 'French (Switzerland)',
+    code: 'fr-CH'
+  },
+  {
+    name: 'German (Austria)',
+    code: 'de-AT'
+  },
+  {
+    name: 'German (Switzerland)',
+    code: 'de-CH'
+  },
+  {
+    name: 'German (Germany)',
+    code: 'de-DE'
+  },
+  {
+    name: 'Greek (Greece)',
+    code: 'el-GR'
+  },
+  {
+    name: 'Gujarati (Indian)',
+    code: 'gu-IN'
+  },
+  {
+    name: 'Hebrew (Israel)',
+    code: 'he-IL'
+  },
+  {
+    name: 'Hindi (India)',
+    code: 'hi-IN'
+  },
+  {
+    name: 'Hungarian (Hungary)',
+    code: 'hu-HU'
+  },
+  {
+    name: 'Indonesian (Indonesia)',
+    code: 'id-ID'
+  },
+  {
+    name: 'Irish (Ireland)',
+    code: 'ga-IE'
+  },
+  {
+    name: 'Italian (Italy)',
+    code: 'it-IT'
+  },
+  {
+    name: 'Japanese (Japan)',
+    code: 'ja-JP'
+  },
+  {
+    name: 'Kannada (India)',
+    code: 'kn-IN'
+  },
+  {
+    name: 'Korean (Korea)',
+    code: 'ko-KR'
+  },
+  {
+    name: 'Latvian (Latvia)',
+    code: 'lv-LV'
+  },
+  {
+    name: 'Lithuanian (Lithuania)',
+    code: 'lt-LT'
+  },
+  {
+    name: 'Malay (Malaysia)',
+    code: 'ms-MY'
+  },
+  {
+    name: 'Maltese (Malta)',
+    code: 'mt-MT'
+  },
+  {
+    name: 'Marathi (India)',
+    code: 'mr-IN'
+  },
+  {
+    name: 'Norwegian (Bokmål, Norway)',
+    code: 'nb-NO'
+  },
+  {
+    name: 'Persian (Iran)',
+    code: 'fa-IR'
+  },
+  {
+    name: 'Polish (Poland)',
+    code: 'pl-PL'
+  },
+  {
+    name: 'Portuguese (Brazil)',
+    code: 'pt-BR'
+  },
+  {
+    name: 'Portuguese (Portugal)',
+    code: 'pt-PT'
+  },
+  {
+    name: 'Romanian (Romania)',
+    code: 'ro-RO'
+  },
+  {
+    name: 'Russian (Russia)',
+    code: 'ru-RU'
+  },
+  {
+    name: 'Slovak (Slovakia)',
+    code: 'sk-SK'
+  },
+  {
+    name: 'Slovenian (Slovenia)',
+    code: 'sl-SI'
+  },
+  {
+    name: 'Spanish (Argentina)',
+    code: 'es-AR'
+  },
+  {
+    name: 'Spanish (Bolivia)',
+    code: 'es-BO'
+  },
+  {
+    name: 'Spanish (Chile)',
+    code: 'es-CL'
+  },
+  {
+    name: 'Spanish (Colombia)',
+    code: 'es-CO'
+  },
+  {
+    name: 'Spanish (Costa Rica)',
+    code: 'es-CR'
+  },
+  {
+    name: 'Spanish (Cuba)',
+    code: 'es-CU'
+  },
+  {
+    name: 'Spanish (Dominican Republic)',
+    code: 'es-DO'
+  },
+  {
+    name: 'Spanish (Ecuador)',
+    code: 'es-EC'
+  },
+  {
+    name: 'Spanish (El Salvador)',
+    code: 'es-SV'
+  },
+  {
+    name: 'Spanish (Equatorial Guinea)',
+    code: 'es-GQ'
+  },
+  {
+    name: 'Spanish (Guatemala)',
+    code: 'es-GT'
+  },
+  {
+    name: 'Spanish (Honduras)',
+    code: 'es-HN'
+  },
+  {
+    name: 'Spanish (Mexico)',
+    code: 'es-MX'
+  },
+  {
+    name: 'Spanish (Nicaragua)',
+    code: 'es-NI'
+  },
+  {
+    name: 'Spanish (Panama)',
+    code: 'es-PA'
+  },
+  {
+    name: 'Spanish (Paraguay)',
+    code: 'es-PY'
+  },
+  {
+    name: 'Spanish (Peru)',
+    code: 'es-PE'
+  },
+  {
+    name: 'Spanish (Puerto Rico)',
+    code: 'es-PR'
+  },
+  {
+    name: 'Spanish (Spain)',
+    code: 'es-ES'
+  },
+  {
+    name: 'Spanish (Uruguay)',
+    code: 'es-UY'
+  },
+  {
+    name: 'Spanish (USA)',
+    code: 'es-US'
+  },
+  {
+    name: 'Spanish (Venezuela)',
+    code: 'es-VE'
+  },
+  {
+    name: 'Swahili (Kenya)',
+    code: 'sw-KE'
+  },
+  {
+    name: 'Swedish (Sweden)',
+    code: 'sv-SE'
+  },
+  {
+    name: 'Tamil (India)',
+    code: 'ta-IN'
+  },
+  {
+    name: 'Telugu (India)',
+    code: 'te-IN'
+  },
+  {
+    name: 'Thai (Thailand)',
+    code: 'th-TH'
+  },
+  {
+    name: 'Turkish (Turkey)',
+    code: 'tr-TR'
+  },
+  {
+    name: 'Vietnamese (Vietnam)',
+    code: 'vi-VN'
+  },
+];