From 219191dc6ea5d34a6d9eac8ceb277fe4a0a1973a Mon Sep 17 00:00:00 2001 From: Constantine-S-AN Date: Wed, 1 Oct 2025 16:03:18 -0500 Subject: [PATCH] showing the current language --- src/components/api/returnAPI.tsx | 19 +- .../navbars/sidebar/language/menu.tsx | 514 +++++++++--------- src/components/navbars/topbar/api/pickApi.tsx | 158 ++++-- 3 files changed, 383 insertions(+), 308 deletions(-) diff --git a/src/components/api/returnAPI.tsx b/src/components/api/returnAPI.tsx index 6a1a608..3524d5c 100644 --- a/src/components/api/returnAPI.tsx +++ b/src/components/api/returnAPI.tsx @@ -56,6 +56,19 @@ export const returnRecogAPI = (api : ApiStatus, control : ControlStatus, azure : */ + +function toWhisperCode(bcp47: string): string { + // Accept "en", "en-US", etc. Return "en" for "en-US". + if (!bcp47) return "en"; + const base = bcp47.split('-')[0].toLowerCase(); + const supported = new Set([ + 'en','es','fr','de','it','pt','nl','sv','da','nb','fi','pl','cs','sk','sl','hr','sr','bg','ro', + 'hu','el','tr','ru','uk','ar','he','fa','ur','hi','bn','ta','te','ml','mr','gu','kn','pa', + 'id','ms','vi','th','zh','ja','ko' + ]); + return supported.has(base) ? base : 'en'; + } + const createRecognizer = (currentApi: number, control: ControlStatus, azure: AzureStatus, streamTextConfig: StreamTextStatus, scribearServerStatus: ScribearServerStatus, selectedModelOption: SelectedOption, playbackStatus: PlaybackStatus): Recognizer => { if (currentApi === API.SCRIBEAR_SERVER) { return new ScribearRecognizer(scribearServerStatus, selectedModelOption, control.speechLanguage.CountryCode); @@ -74,7 +87,11 @@ const createRecognizer = (currentApi: number, control: ControlStatus, azure: Azu // Placeholder - this is just WebSpeech for now return new StreamTextRecognizer(streamTextConfig.streamTextEvent, 'en', streamTextConfig.startPosition); } else if (currentApi === API.WHISPER) { - return new WhisperRecognizer(null, control.speechLanguage.CountryCode, 4); + return new WhisperRecognizer( + null, + toWhisperCode(control.speechLanguage.CountryCode), + 4 + ); } else { throw new Error(`Unexpcted API_CODE: ${currentApi}`); } diff --git a/src/components/navbars/sidebar/language/menu.tsx b/src/components/navbars/sidebar/language/menu.tsx index 4d371f0..b0914ff 100644 --- a/src/components/navbars/sidebar/language/menu.tsx +++ b/src/components/navbars/sidebar/language/menu.tsx @@ -1,274 +1,290 @@ import React from 'react'; -import { List, ListItemText, Collapse, MessageIcon, ListItem } from '../../../../muiImports' +import { + List, + ListItemText, + Collapse, + MessageIcon, + ListItem, +} from '../../../../muiImports'; import { useSelector } from 'react-redux'; -import { RootState, ControlStatus, LanguageList } from '../../../../react-redux&middleware/redux/typesImports'; -import ChooseLanguage from './chooseLanguage' +import { + RootState, + ControlStatus, + LanguageList, +} from '../../../../react-redux&middleware/redux/typesImports'; +import ChooseLanguage from './chooseLanguage'; + +type Props = { + open: boolean; + listItemHeader: (subMenu: string, drawerName: string, Icon: any) => JSX.Element; + isRecording?: boolean; // optional; passed from Sidebar +}; const speechLanguages = [ - {label: "Afrikaans (South Africa)", CountryCode: "af-ZA"}, - {label: "Amharic (Ethiopia)", CountryCode: "am-ET"}, - {label: "Arabic (Algeria)", CountryCode: "ar-DZ"}, - {label: "Arabic (Bahrain), modern standard", CountryCode: "ar-BH"}, - {label: "Arabic (Egypt)", CountryCode: "ar-EG"}, - {label: "Arabic (Iraq)", CountryCode: "ar-IQ"}, - {label: "Arabic (Israel)", CountryCode: "ar-IL"}, - {label: "Arabic (Jordan)", CountryCode: "ar-JO"}, - {label: "Arabic (Kuwait)", CountryCode: "ar-KW"}, - {label: "Arabic (Lebanon)", CountryCode: "ar-LB"}, - {label: "Arabic (Libya)", CountryCode: "ar-LY"}, - {label: "Arabic (Morocco)", CountryCode: "ar-MA"}, - {label: "Arabic (Oman)", CountryCode: "ar-OM"}, - {label: "Arabic (Palestinian Authority)", CountryCode: "ar-PS"}, - {label: "Arabic (Qatar)", CountryCode: "ar-QA"}, - {label: "Arabic (Saudi Arabia)", CountryCode: "ar-SA"}, - {label: "Arabic (Syria)", CountryCode: "ar-SY"}, - {label: "Arabic (Tunisia)", CountryCode: "ar-TN"}, - {label: "Arabic (United Arab Emirates)", CountryCode: "ar-AE"}, - {label: "Arabic (Yemen)", CountryCode: "ar-YE"}, - {label: "Bengali (India)", CountryCode: "bn-IN"}, - {label: "Bulgarian (Bulgaria)", CountryCode: "bg-BG"}, - {label: "Burmese (Myanmar)", CountryCode: "my-MM"}, - {label: "Catalan (Spain)", CountryCode: "ca-ES"}, - {label: "Chinese (Cantonese, Traditional)", CountryCode: "zh-HK"}, - {label: "Chinese (Mandarin, Simplified)", CountryCode: "zh-CN"}, - {label: "Chinese (Taiwanese Mandarin)", CountryCode: "zh-TW"}, - {label: "Croatian (Croatia)", CountryCode: "hr-HR"}, - {label: "Czech (Czech)", CountryCode: "cs-CZ"}, - {label: "Danish (Denmark)", CountryCode: "da-DK"}, - {label: "Dutch (Belgium)", CountryCode: "nl-BE"}, - {label: "Dutch (Netherlands)", CountryCode: "nl-NL"}, - {label: "English (Australia)", CountryCode: "en-AU"}, - {label: "English (Canada)", CountryCode: "en-CA"}, - {label: "English (Ghana)", CountryCode: "en-GH"}, - {label: "English (Hong Kong)", CountryCode: "en-HK"}, - {label: "English (India)", CountryCode: "en-IN"}, - {label: "English (Ireland)", CountryCode: "en-IE"}, - {label: "English (Kenya)", CountryCode: "en-KE"}, - {label: "English (New Zealand)", CountryCode: "en-NZ"}, - {label: "English (Nigeria)", CountryCode: "en-NG"}, - {label: "English (Philippines)", CountryCode: "en-PH"}, - {label: "English (Singapore)", CountryCode: "en-SG"}, - {label: "English (South Africa)", CountryCode: "en-ZA"}, - {label: "English (Tanzania)", CountryCode: "en-TZ"}, - {label: "English (United Kingdom)", CountryCode: "en-GB"}, - {label: "English (United States)", CountryCode: "en-US"}, - {label: "Estonian (Estonia)", CountryCode: "et-EE"}, - {label: "Filipino (Philippines)", CountryCode: "fil-PH"}, - {label: "Finnish (Finland)", CountryCode: "fi-FI"}, - {label: "French (Belgium)", CountryCode: "fr-BE"}, - {label: "French (Canada)", CountryCode: "fr-CA"}, - {label: "French (France)", CountryCode: "fr-FR"}, - {label: "French (Switzerland)", CountryCode: "fr-CH"}, - {label: "German (Austria)", CountryCode: "de-AT"}, - {label: "German (Germany)", CountryCode: "de-DE"}, - {label: "German (Switzerland)", CountryCode: "de-CH"}, - {label: "Greek (Greece)", CountryCode: "el-GR"}, - {label: "Gujarati (Indian)", CountryCode: "gu-IN"}, - {label: "Hebrew (Israel)", CountryCode: "he-IL"}, - {label: "Hindi (India)", CountryCode: "hi-IN"}, - {label: "Hungarian (Hungary)", CountryCode: "hu-HU"}, - {label: "Icelandic (Iceland)", CountryCode: "is-IS"}, - {label: "Indonesian (Indonesia)", CountryCode: "id-ID"}, - {label: "Irish (Ireland)", CountryCode: "ga-IE"}, - {label: "Italian (Italy)", CountryCode: "it-IT"}, - {label: "Japanese (Japan)", CountryCode: "ja-JP"}, - {label: "Javanese (Indonesia)", CountryCode: "jv-ID"}, - {label: "Kannada (India)", CountryCode: "kn-IN"}, - {label: "Khmer (Cambodia)", CountryCode: "km-KH"}, - {label: "Korean (Korea)", CountryCode: "ko-KR"}, - {label: "Lao (Laos)", CountryCode: "lo-LA"}, - {label: "Latvian (Latvia)", CountryCode: "lv-LV"}, - {label: "Lithuanian (Lithuania)", CountryCode: "lt-LT"}, - {label: "Macedonian (North Macedonia)", CountryCode: "mk-MK"}, - {label: "Malay (Malaysia)", CountryCode: "ms-MY"}, - {label: "Maltese (Malta)", CountryCode: "mt-MT"}, - {label: "Marathi (India)", CountryCode: "mr-IN"}, - {label: "Norwegian (Bokmål, Norway)", CountryCode: "nb-NO"}, - {label: "Persian (Iran)", CountryCode: "fa-IR"}, - {label: "Polish (Poland)", CountryCode: "pl-PL"}, - {label: "Portuguese (Brazil)", CountryCode: "pt-BR"}, - {label: "Portuguese (Portugal)", CountryCode: "pt-PT"}, - {label: "Romanian (Romania)", CountryCode: "ro-RO"}, - {label: "Russian (Russia)", CountryCode: "ru-RU"}, - {label: "Serbian (Serbia)", CountryCode: "sr-RS"}, - {label: "Sinhala (Sri Lanka)", CountryCode: "si-LK"}, - {label: "Slovak (Slovakia)", CountryCode: "sk-SK"}, - {label: "Slovenian (Slovenia)", CountryCode: "sl-SI"}, - {label: "Spanish (Argentina)", CountryCode: "es-AR"}, - {label: "Spanish (Bolivia)", CountryCode: "es-BO"}, - {label: "Spanish (Chile)", CountryCode: "es-CL"}, - {label: "Spanish (Colombia)", CountryCode: "es-CO"}, - {label: "Spanish (Costa Rica)", CountryCode: "es-CR"}, - {label: "Spanish (Cuba)", CountryCode: "es-CU"}, - {label: "Spanish (Dominican Republic)", CountryCode: "es-DO"}, - {label: "Spanish (Ecuador)", CountryCode: "es-EC"}, - {label: "Spanish (El Salvador)", CountryCode: "es-SV"}, - {label: "Spanish (Equatorial Guinea)", CountryCode: "es-GQ"}, - {label: "Spanish (Guatemala)", CountryCode: "es-GT"}, - {label: "Spanish (Honduras)", CountryCode: "es-HN"}, - {label: "Spanish (Mexico)", CountryCode: "es-MX"}, - {label: "Spanish (Nicaragua)", CountryCode: "es-NI"}, - {label: "Spanish (Panama)", CountryCode: "es-PA"}, - {label: "Spanish (Paraguay)", CountryCode: "es-PY"}, - {label: "Spanish (Peru)", CountryCode: "es-PE"}, - {label: "Spanish (Puerto Rico)", CountryCode: "es-PR"}, - {label: "Spanish (Spain)", CountryCode: "es-ES"}, - {label: "Spanish (Uruguay)", CountryCode: "es-UY"}, - {label: "Spanish (USA)", CountryCode: "es-US"}, - {label: "Spanish (Venezuela)", CountryCode: "es-VE"}, - {label: "Swahili (Kenya)", CountryCode: "sw-KE"}, - {label: "Swahili (Tanzania)", CountryCode: "sw-TZ"}, - {label: "Swedish (Sweden)", CountryCode: "sv-SE"}, - {label: "Tamil (India)", CountryCode: "ta-IN"}, - {label: "Telugu (India)", CountryCode: "te-IN"}, - {label: "Thai (Thailand)", CountryCode: "th-TH"}, - {label: "Turkish (Turkey)", CountryCode: "tr-TR"}, - {label: "Ukrainian (Ukraine)", CountryCode: "uk-UA"}, - {label: "Uzbek (Uzbekistan)", CountryCode: "uz-UZ"}, - {label: "Vietnamese (Vietnam)", CountryCode: "vi-VN"}, - {label: "Zulu (South Africa)", CountryCode: "zu-ZA"}, -] as LanguageList[] + { label: 'Afrikaans (South Africa)', CountryCode: 'af-ZA' }, + { label: 'Amharic (Ethiopia)', CountryCode: 'am-ET' }, + { label: 'Arabic (Algeria)', CountryCode: 'ar-DZ' }, + { label: 'Arabic (Bahrain), modern standard', CountryCode: 'ar-BH' }, + { label: 'Arabic (Egypt)', CountryCode: 'ar-EG' }, + { label: 'Arabic (Iraq)', CountryCode: 'ar-IQ' }, + { label: 'Arabic (Israel)', CountryCode: 'ar-IL' }, + { label: 'Arabic (Jordan)', CountryCode: 'ar-JO' }, + { label: 'Arabic (Kuwait)', CountryCode: 'ar-KW' }, + { label: 'Arabic (Lebanon)', CountryCode: 'ar-LB' }, + { label: 'Arabic (Libya)', CountryCode: 'ar-LY' }, + { label: 'Arabic (Morocco)', CountryCode: 'ar-MA' }, + { label: 'Arabic (Oman)', CountryCode: 'ar-OM' }, + { label: 'Arabic (Palestinian Authority)', CountryCode: 'ar-PS' }, + { label: 'Arabic (Qatar)', CountryCode: 'ar-QA' }, + { label: 'Arabic (Saudi Arabia)', CountryCode: 'ar-SA' }, + { label: 'Arabic (Syria)', CountryCode: 'ar-SY' }, + { label: 'Arabic (Tunisia)', CountryCode: 'ar-TN' }, + { label: 'Arabic (United Arab Emirates)', CountryCode: 'ar-AE' }, + { label: 'Arabic (Yemen)', CountryCode: 'ar-YE' }, + { label: 'Bengali (India)', CountryCode: 'bn-IN' }, + { label: 'Bulgarian (Bulgaria)', CountryCode: 'bg-BG' }, + { label: 'Burmese (Myanmar)', CountryCode: 'my-MM' }, + { label: 'Catalan (Spain)', CountryCode: 'ca-ES' }, + { label: 'Chinese (Cantonese, Traditional)', CountryCode: 'zh-HK' }, + { label: 'Chinese (Mandarin, Simplified)', CountryCode: 'zh-CN' }, + { label: 'Chinese (Taiwanese Mandarin)', CountryCode: 'zh-TW' }, + { label: 'Croatian (Croatia)', CountryCode: 'hr-HR' }, + { label: 'Czech (Czech)', CountryCode: 'cs-CZ' }, + { label: 'Danish (Denmark)', CountryCode: 'da-DK' }, + { label: 'Dutch (Belgium)', CountryCode: 'nl-BE' }, + { label: 'Dutch (Netherlands)', CountryCode: 'nl-NL' }, + { label: 'English (Australia)', CountryCode: 'en-AU' }, + { label: 'English (Canada)', CountryCode: 'en-CA' }, + { label: 'English (Ghana)', CountryCode: 'en-GH' }, + { label: 'English (Hong Kong)', CountryCode: 'en-HK' }, + { label: 'English (India)', CountryCode: 'en-IN' }, + { label: 'English (Ireland)', CountryCode: 'en-IE' }, + { label: 'English (Kenya)', CountryCode: 'en-KE' }, + { label: 'English (New Zealand)', CountryCode: 'en-NZ' }, + { label: 'English (Nigeria)', CountryCode: 'en-NG' }, + { label: 'English (Philippines)', CountryCode: 'en-PH' }, + { label: 'English (Singapore)', CountryCode: 'en-SG' }, + { label: 'English (South Africa)', CountryCode: 'en-ZA' }, + { label: 'English (Tanzania)', CountryCode: 'en-TZ' }, + { label: 'English (United Kingdom)', CountryCode: 'en-GB' }, + { label: 'English (United States)', CountryCode: 'en-US' }, + { label: 'Estonian (Estonia)', CountryCode: 'et-EE' }, + { label: 'Filipino (Philippines)', CountryCode: 'fil-PH' }, + { label: 'Finnish (Finland)', CountryCode: 'fi-FI' }, + { label: 'French (Belgium)', CountryCode: 'fr-BE' }, + { label: 'French (Canada)', CountryCode: 'fr-CA' }, + { label: 'French (France)', CountryCode: 'fr-FR' }, + { label: 'French (Switzerland)', CountryCode: 'fr-CH' }, + { label: 'German (Austria)', CountryCode: 'de-AT' }, + { label: 'German (Germany)', CountryCode: 'de-DE' }, + { label: 'German (Switzerland)', CountryCode: 'de-CH' }, + { label: 'Greek (Greece)', CountryCode: 'el-GR' }, + { label: 'Gujarati (Indian)', CountryCode: 'gu-IN' }, + { label: 'Hebrew (Israel)', CountryCode: 'he-IL' }, + { label: 'Hindi (India)', CountryCode: 'hi-IN' }, + { label: 'Hungarian (Hungary)', CountryCode: 'hu-HU' }, + { label: 'Icelandic (Iceland)', CountryCode: 'is-IS' }, + { label: 'Indonesian (Indonesia)', CountryCode: 'id-ID' }, + { label: 'Irish (Ireland)', CountryCode: 'ga-IE' }, + { label: 'Italian (Italy)', CountryCode: 'it-IT' }, + { label: 'Japanese (Japan)', CountryCode: 'ja-JP' }, + { label: 'Javanese (Indonesia)', CountryCode: 'jv-ID' }, + { label: 'Kannada (India)', CountryCode: 'kn-IN' }, + { label: 'Khmer (Cambodia)', CountryCode: 'km-KH' }, + { label: 'Korean (Korea)', CountryCode: 'ko-KR' }, + { label: 'Lao (Laos)', CountryCode: 'lo-LA' }, + { label: 'Latvian (Latvia)', CountryCode: 'lv-LV' }, + { label: 'Lithuanian (Lithuania)', CountryCode: 'lt-LT' }, + { label: 'Macedonian (North Macedonia)', CountryCode: 'mk-MK' }, + { label: 'Malay (Malaysia)', CountryCode: 'ms-MY' }, + { label: 'Maltese (Malta)', CountryCode: 'mt-MT' }, + { label: 'Marathi (India)', CountryCode: 'mr-IN' }, + { label: 'Norwegian (Bokmål, Norway)', CountryCode: 'nb-NO' }, + { label: 'Persian (Iran)', CountryCode: 'fa-IR' }, + { label: 'Polish (Poland)', CountryCode: 'pl-PL' }, + { label: 'Portuguese (Brazil)', CountryCode: 'pt-BR' }, + { label: 'Portuguese (Portugal)', CountryCode: 'pt-PT' }, + { label: 'Romanian (Romania)', CountryCode: 'ro-RO' }, + { label: 'Russian (Russia)', CountryCode: 'ru-RU' }, + { label: 'Serbian (Serbia)', CountryCode: 'sr-RS' }, + { label: 'Sinhala (Sri Lanka)', CountryCode: 'si-LK' }, + { label: 'Slovak (Slovakia)', CountryCode: 'sk-SK' }, + { label: 'Slovenian (Slovenia)', CountryCode: 'sl-SI' }, + { label: 'Spanish (Argentina)', CountryCode: 'es-AR' }, + { label: 'Spanish (Bolivia)', CountryCode: 'es-BO' }, + { label: 'Spanish (Chile)', CountryCode: 'es-CL' }, + { label: 'Spanish (Colombia)', CountryCode: 'es-CO' }, + { label: 'Spanish (Costa Rica)', CountryCode: 'es-CR' }, + { label: 'Spanish (Cuba)', CountryCode: 'es-CU' }, + { label: 'Spanish (Dominican Republic)', CountryCode: 'es-DO' }, + { label: 'Spanish (Ecuador)', CountryCode: 'es-EC' }, + { label: 'Spanish (El Salvador)', CountryCode: 'es-SV' }, + { label: 'Spanish (Equatorial Guinea)', CountryCode: 'es-GQ' }, + { label: 'Spanish (Guatemala)', CountryCode: 'es-GT' }, + { label: 'Spanish (Honduras)', CountryCode: 'es-HN' }, + { label: 'Spanish (Mexico)', CountryCode: 'es-MX' }, + { label: 'Spanish (Nicaragua)', CountryCode: 'es-NI' }, + { label: 'Spanish (Panama)', CountryCode: 'es-PA' }, + { label: 'Spanish (Paraguay)', CountryCode: 'es-PY' }, + { label: 'Spanish (Peru)', CountryCode: 'es-PE' }, + { label: 'Spanish (Puerto Rico)', CountryCode: 'es-PR' }, + { label: 'Spanish (Spain)', CountryCode: 'es-ES' }, + { label: 'Spanish (Uruguay)', CountryCode: 'es-UY' }, + { label: 'Spanish (USA)', CountryCode: 'es-US' }, + { label: 'Spanish (Venezuela)', CountryCode: 'es-VE' }, + { label: 'Swahili (Kenya)', CountryCode: 'sw-KE' }, + { label: 'Swahili (Tanzania)', CountryCode: 'sw-TZ' }, + { label: 'Swedish (Sweden)', CountryCode: 'sv-SE' }, + { label: 'Tamil (India)', CountryCode: 'ta-IN' }, + { label: 'Telugu (India)', CountryCode: 'te-IN' }, + { label: 'Thai (Thailand)', CountryCode: 'th-TH' }, + { label: 'Turkish (Turkey)', CountryCode: 'tr-TR' }, + { label: 'Ukrainian (Ukraine)', CountryCode: 'uk-UA' }, + { label: 'Uzbek (Uzbekistan)', CountryCode: 'uz-UZ' }, + { label: 'Vietnamese (Vietnam)', CountryCode: 'vi-VN' }, + { label: 'Zulu (South Africa)', CountryCode: 'zu-ZA' }, +] as LanguageList[]; const textLanguages = [ -{label: "Afrikaans", CountryCode: "af"}, -{label: "Albanian", CountryCode: "sq"}, -{label: "Amharic", CountryCode: "am"}, -{label: "Arabic", CountryCode: "ar"}, -{label: "Armenian", CountryCode: "hy"}, -{label: "Assamese", CountryCode: "as"}, -{label: "Azerbaijani (Latin)",CountryCode: "az"}, -{label: "Bangla", CountryCode: "bn"}, -{label: "Bashkir", CountryCode: "ba"}, -{label: "Basque", CountryCode: "eu"}, -{label: "Bosnian (Latin)", CountryCode: "bs"}, -{label: "Bulgarian", CountryCode: "bg"}, -{label: "Cantonese (Traditional)", CountryCode: "yue"}, -{label: "Catalan", CountryCode: "ca"}, -{label: "Chinese (Literary)", CountryCode: "lzh"}, -{label: "Chinese Simplified", CountryCode: "zh-Hans"}, -{label: "Chinese Traditional", CountryCode: "zh-Hant"}, -{label: "Croatian", CountryCode: "hr"}, -{label: "Czech", CountryCode: "cs"}, -{label: "Danish", CountryCode: "da"}, -{label: "Dari", CountryCode: "prs"}, -{label: "Divehi",CountryCode: "dv"}, -{label: "Dutch", CountryCode: "nl"}, -{label: "English", CountryCode: "en"}, -{label: "Estonian", CountryCode: "et"}, -{label: "Faroese", CountryCode: "fo"}, -{label: "Fijian", CountryCode: "fj"}, -{label: "Filipino", CountryCode: "fil"}, -{label: "Finnish", CountryCode: "fi"}, -{label: "French", CountryCode: "fr"}, -{label: "French (Canada)", CountryCode: "fr-ca"}, -{label: "Galician", CountryCode: "gl"}, -{label: "Georgian", CountryCode: "ka"}, -{label: "German", CountryCode: "de"}, -{label: "Greek", CountryCode: "el"}, -{label: "Gujarati", CountryCode: "gu"}, -{label: "Haitian Creole", CountryCode:"ht"}, -{label: "Hebrew", CountryCode: "he"}, -{label: "Hindi", CountryCode: "hi"}, -{label: "Hmong Daw(Latin)", CountryCode: "mww"}, -{label: "Hungarian", CountryCode: "hu"}, -{label: "Icelandic", CountryCode: "is"}, -{label: "Indonesian", CountryCode: "id"}, -{label: "Inuinnaqtun",CountryCode: "ikt"}, -{label: "Inuktitut", CountryCode: "iu"}, -{label: "Inuktitut (Latin)", CountryCode: "iu-Latn"}, -{label: "Irish", CountryCode: "ga"}, -{label: "Italian", CountryCode: "it"}, -{label: "Japanese", CountryCode: "ja"}, -{label: "Kannada", CountryCode: "kn"}, -{label: "Kazakh", CountryCode: "kk"}, -{label: "Khmer", CountryCode: "km"}, -{label: "Korean", CountryCode: "ko"}, -{label: "Kurdish (Central)", CountryCode: "ku"}, -{label: "Kurdish (Northern)", CountryCode: "kmr"}, -{label: "Kyrgyz (Cyrillic)", CountryCode: "ky"}, -{label: "Lao", CountryCode: "lo"}, -{label: "Latvian", CountryCode: "lv"}, -{label: "Lithuanian", CountryCode: "lt"}, -{label: "Macedonian", CountryCode: "mk"}, -{label: "Malagasy", CountryCode: "mg"}, -{label: "Malay (Latin)", CountryCode: "ms"}, -{label: "Malayalam", CountryCode: "ml"}, -{label: "Maltese", CountryCode: "mt"}, -{label: "Maori", CountryCode: "mi"}, -{label: "Marathi", CountryCode: "mr"}, -{label: "Mongolian (Cyrillic)", CountryCode: "mn-Cyrl"}, -{label: "Mongolian (Traditional)", CountryCode: "mn-Mong"}, -{label: "Myanmar", CountryCode: "my"}, -{label: "Nepali", CountryCode: "ne"}, -{label: "Norwegian", CountryCode: "nb"}, -{label: "Odia", CountryCode: "or"}, -{label: "Pashto", CountryCode: "ps"}, -{label: "Persian",CountryCode: "fa"}, -{label: "Polish", CountryCode: "pl"}, -{label: "Portuguese (Brazil)", CountryCode: "pt"}, -{label: "Portuguese (Portugal)", CountryCode: "pt-pt"}, -{label: "Punjabi", CountryCode: "pa"}, -{label: "Queretaro Otomi", CountryCode: "otq"}, -{label: "Romanian", CountryCode: "ro"}, -{label: "Russian", CountryCode: "ru"}, -{label: "Samoan (Latin)", CountryCode: "sm"}, -{label: "Serbian (Cyrillic)", CountryCode: "sr-Cyrl"}, -{label: "Serbian (Latin)", CountryCode: "sr-Latn"}, -{label: "Slovak", CountryCode: "sk"}, -{label: "Slovenian", CountryCode: "sl"}, -{label: "Somali (Arabic)", CountryCode: "so"}, -{label: "Spanish", CountryCode: "es"}, -{label: "Swahili (Latin)", CountryCode: "sw"}, -{label: "Swedish", CountryCode: "sv"}, -{label: "Tahitian", CountryCode: "ty"}, -{label: "Tamil", CountryCode: "ta"}, -{label: "Tatar (Latin)",CountryCode: "tt"}, -{label: "Telugu", CountryCode: "te"}, -{label: "Thai", CountryCode: "th"}, -{label: "Tibetan", CountryCode: "bo"}, -{label: "Tigrinya", CountryCode: "ti"}, -{label: "Tongan", CountryCode: "to"}, -{label: "Turkish", CountryCode: "tr"}, -{label: "Turkmen (Latin)", CountryCode: "tk"}, -{label: "Ukrainian", CountryCode: "uk"}, -{label: "Upper Sorbian", CountryCode: "hsb"}, -{label: "Urdu", CountryCode: "ur"}, -{label: "Uyghur (Arabic)",CountryCode: "ug"}, -{label: "Uzbek (Latin", CountryCode: "uz"}, -{label: "Vietnamese", CountryCode: "vi"}, -{label: "Welsh", CountryCode: "cy"}, -{label: "Yucatec Maya", CountryCode: "yua"}, -{label: "Zulu", CountryCode: "zu"}, -] - + { label: 'Afrikaans', CountryCode: 'af' }, + { label: 'Albanian', CountryCode: 'sq' }, + { label: 'Amharic', CountryCode: 'am' }, + { label: 'Arabic', CountryCode: 'ar' }, + { label: 'Armenian', CountryCode: 'hy' }, + { label: 'Assamese', CountryCode: 'as' }, + { label: 'Azerbaijani (Latin)', CountryCode: 'az' }, + { label: 'Bangla', CountryCode: 'bn' }, + { label: 'Bashkir', CountryCode: 'ba' }, + { label: 'Basque', CountryCode: 'eu' }, + { label: 'Bosnian (Latin)', CountryCode: 'bs' }, + { label: 'Bulgarian', CountryCode: 'bg' }, + { label: 'Cantonese (Traditional)', CountryCode: 'yue' }, + { label: 'Catalan', CountryCode: 'ca' }, + { label: 'Chinese (Literary)', CountryCode: 'lzh' }, + { label: 'Chinese Simplified', CountryCode: 'zh-Hans' }, + { label: 'Chinese Traditional', CountryCode: 'zh-Hant' }, + { label: 'Croatian', CountryCode: 'hr' }, + { label: 'Czech', CountryCode: 'cs' }, + { label: 'Danish', CountryCode: 'da' }, + { label: 'Dari', CountryCode: 'prs' }, + { label: 'Divehi', CountryCode: 'dv' }, + { label: 'Dutch', CountryCode: 'nl' }, + { label: 'English', CountryCode: 'en' }, + { label: 'Estonian', CountryCode: 'et' }, + { label: 'Faroese', CountryCode: 'fo' }, + { label: 'Fijian', CountryCode: 'fj' }, + { label: 'Filipino', CountryCode: 'fil' }, + { label: 'Finnish', CountryCode: 'fi' }, + { label: 'French', CountryCode: 'fr' }, + { label: 'French (Canada)', CountryCode: 'fr-ca' }, + { label: 'Galician', CountryCode: 'gl' }, + { label: 'Georgian', CountryCode: 'ka' }, + { label: 'German', CountryCode: 'de' }, + { label: 'Greek', CountryCode: 'el' }, + { label: 'Gujarati', CountryCode: 'gu' }, + { label: 'Haitian Creole', CountryCode: 'ht' }, + { label: 'Hebrew', CountryCode: 'he' }, + { label: 'Hindi', CountryCode: 'hi' }, + { label: 'Hmong Daw(Latin)', CountryCode: 'mww' }, + { label: 'Hungarian', CountryCode: 'hu' }, + { label: 'Icelandic', CountryCode: 'is' }, + { label: 'Indonesian', CountryCode: 'id' }, + { label: 'Inuinnaqtun', CountryCode: 'ikt' }, + { label: 'Inuktitut', CountryCode: 'iu' }, + { label: 'Inuktitut (Latin)', CountryCode: 'iu-Latn' }, + { label: 'Irish', CountryCode: 'ga' }, + { label: 'Italian', CountryCode: 'it' }, + { label: 'Japanese', CountryCode: 'ja' }, + { label: 'Kannada', CountryCode: 'kn' }, + { label: 'Kazakh', CountryCode: 'kk' }, + { label: 'Khmer', CountryCode: 'km' }, + { label: 'Korean', CountryCode: 'ko' }, + { label: 'Kurdish (Central)', CountryCode: 'ku' }, + { label: 'Kurdish (Northern)', CountryCode: 'kmr' }, + { label: 'Kyrgyz (Cyrillic)', CountryCode: 'ky' }, + { label: 'Lao', CountryCode: 'lo' }, + { label: 'Latvian', CountryCode: 'lv' }, + { label: 'Lithuanian', CountryCode: 'lt' }, + { label: 'Macedonian', CountryCode: 'mk' }, + { label: 'Malagasy', CountryCode: 'mg' }, + { label: 'Malay (Latin)', CountryCode: 'ms' }, + { label: 'Malayalam', CountryCode: 'ml' }, + { label: 'Maltese', CountryCode: 'mt' }, + { label: 'Maori', CountryCode: 'mi' }, + { label: 'Marathi', CountryCode: 'mr' }, + { label: 'Mongolian (Cyrillic)', CountryCode: 'mn-Cyrl' }, + { label: 'Mongolian (Traditional)', CountryCode: 'mn-Mong' }, + { label: 'Myanmar', CountryCode: 'my' }, + { label: 'Nepali', CountryCode: 'ne' }, + { label: 'Norwegian', CountryCode: 'nb' }, + { label: 'Odia', CountryCode: 'or' }, + { label: 'Pashto', CountryCode: 'ps' }, + { label: 'Persian', CountryCode: 'fa' }, + { label: 'Polish', CountryCode: 'pl' }, + { label: 'Portuguese (Brazil)', CountryCode: 'pt' }, + { label: 'Portuguese (Portugal)', CountryCode: 'pt-pt' }, + { label: 'Punjabi', CountryCode: 'pa' }, + { label: 'Queretaro Otomi', CountryCode: 'otq' }, + { label: 'Romanian', CountryCode: 'ro' }, + { label: 'Russian', CountryCode: 'ru' }, + { label: 'Samoan (Latin)', CountryCode: 'sm' }, + { label: 'Serbian (Cyrillic)', CountryCode: 'sr-Cyrl' }, + { label: 'Serbian (Latin)', CountryCode: 'sr-Latn' }, + { label: 'Slovak', CountryCode: 'sk' }, + { label: 'Slovenian', CountryCode: 'sl' }, + { label: 'Somali (Arabic)', CountryCode: 'so' }, + { label: 'Spanish', CountryCode: 'es' }, + { label: 'Swahili (Latin)', CountryCode: 'sw' }, + { label: 'Swedish', CountryCode: 'sv' }, + { label: 'Tahitian', CountryCode: 'ty' }, + { label: 'Tamil', CountryCode: 'ta' }, + { label: 'Tatar (Latin)', CountryCode: 'tt' }, + { label: 'Telugu', CountryCode: 'te' }, + { label: 'Thai', CountryCode: 'th' }, + { label: 'Tibetan', CountryCode: 'bo' }, + { label: 'Tigrinya', CountryCode: 'ti' }, + { label: 'Tongan', CountryCode: 'to' }, + { label: 'Turkish', CountryCode: 'tr' }, + { label: 'Turkmen (Latin)', CountryCode: 'tk' }, + { label: 'Ukrainian', CountryCode: 'uk' }, + { label: 'Upper Sorbian', CountryCode: 'hsb' }, + { label: 'Urdu', CountryCode: 'ur' }, + { label: 'Uyghur (Arabic)', CountryCode: 'ug' }, + { label: 'Uzbek (Latin', CountryCode: 'uz' }, + { label: 'Vietnamese', CountryCode: 'vi' }, + { label: 'Welsh', CountryCode: 'cy' }, + { label: 'Yucatec Maya', CountryCode: 'yua' }, + { label: 'Zulu', CountryCode: 'zu' }, +]; -export default function LangMenu(props) { +export default function LangMenu({ open, listItemHeader }: Props) { const control = useSelector((state: RootState) => { return state.ControlReducer as ControlStatus; }); return (
- {props.listItemHeader("Language", "lang", MessageIcon)} - + {listItemHeader('Language', 'lang', MessageIcon)} + - + - - + - - + + + - @@ -277,4 +293,4 @@ export default function LangMenu(props) {
); -} \ No newline at end of file +} diff --git a/src/components/navbars/topbar/api/pickApi.tsx b/src/components/navbars/topbar/api/pickApi.tsx index 75aa011..bba360f 100644 --- a/src/components/navbars/topbar/api/pickApi.tsx +++ b/src/components/navbars/topbar/api/pickApi.tsx @@ -17,14 +17,18 @@ import { import { CancelIcon, CheckCircleIcon, + Collapse, DoNotDisturbOnIcon, ErrorIcon, + ExpandLess, + ExpandMore, + IconButton, ListItemButton, ListItemIcon, ListItemText, ThemeProvider, createTheme, - Chip, + Chip, // from muiImports barrel } from '../../../../muiImports'; import { ListItem } from '@mui/material'; @@ -32,23 +36,12 @@ import AzureSettings from './AzureSettings'; import StreamTextSettings from './StreamTextSettings'; import ScribearServerSettings from './ScribearServerSettings'; import PlaybackSettings from './PlaybackSettings'; -import WhisperSettings from './WhisperSettings'; +import WhisperSettings from './WhisperSettings'; // gear dialog for Whisper import swal from 'sweetalert'; import { testAzureTranslRecog } from '../../../api/azure/azureTranslRecog'; -import { selectSelectedModel } from '../../../../react-redux&middleware/redux/reducers/modelSelectionReducers'; - -// helper to normalize selected model to 'tiny' | 'base' | undefined -function getSelectedModelKey(selected: unknown): 'tiny' | 'base' | undefined { - if (typeof selected === 'string') { - return selected === 'tiny' || selected === 'base' ? selected : undefined; - } - if (selected && typeof selected === 'object' && 'key' in (selected as any)) { - const k = (selected as any).key; - return k === 'tiny' || k === 'base' ? k : undefined; - } - return undefined; -} +import { selectSelectedModel } from + '../../../../react-redux&middleware/redux/reducers/modelSelectionReducers'; const currTheme = createTheme({ palette: { @@ -90,35 +83,44 @@ const IconStatus = (currentApi: any) => { } }; +function getSelectedModelKey(selected: unknown): 'tiny' | 'base' | undefined { + if (typeof selected === 'string') { + return selected === 'tiny' || selected === 'base' ? selected : undefined; + } + if (selected && typeof selected === 'object' && 'key' in (selected as any)) { + const k = (selected as any).key; + return k === 'tiny' || k === 'base' ? k : undefined; + } + return undefined; +} + export default function PickApi() { const dispatch = useDispatch(); const myTheme = currTheme; - // ✅ hooks INSIDE the component + // ---- Redux state (all hooks inside component!) ---- const apiStatus = useSelector((state: RootState) => state.APIStatusReducer as ApiStatus); const controlStatus = useSelector((state: RootState) => state.ControlReducer as ControlStatus); const azureStatus = useSelector((state: RootState) => state.AzureReducer as AzureStatus); const streamTextStatus = useSelector((state: RootState) => state.StreamTextReducer as StreamTextStatus); const scribearServerStatus = useSelector((state: RootState) => state.ScribearServerReducer as ScribearServerStatus); const playbackStatus = useSelector((state: RootState) => state.PlaybackReducer as PlaybackStatus); - - const selectedModel = useSelector(selectSelectedModel as any); - const selectedModelKey = React.useMemo( - () => getSelectedModelKey(selectedModel), - [selectedModel] - ); + const selectedModel = useSelector(selectSelectedModel); + const selectedModelKey = getSelectedModelKey(selectedModel); const [state, setState] = React.useState({ showAzureDropdown: false, showWhisperDropdown: false, }); + // ---- Actions / Switchers ---- const switchToAzure = async () => { dispatch({ type: 'FLIP_RECORDING', payload: controlStatus }); const copyStatus = { ...apiStatus }; testAzureTranslRecog(controlStatus, azureStatus) .then(() => { localStorage.setItem('azureStatus', JSON.stringify(azureStatus)); + copyStatus.currentApi = API.AZURE_TRANSLATION; copyStatus.azureTranslStatus = STATUS.TRANSCRIBING; copyStatus.webspeechStatus = STATUS.AVAILABLE; @@ -126,7 +128,14 @@ export default function PickApi() { copyStatus.whisperStatus = STATUS.AVAILABLE; copyStatus.streamTextStatus = STATUS.AVAILABLE; copyStatus.playbackStatus = STATUS.AVAILABLE; - swal({ title: 'Success!', text: 'Switching to Microsoft Azure', icon: 'success', timer: 1500 }); + + swal({ + title: 'Success!', + text: 'Switching to Microsoft Azure', + icon: 'success', + timer: 1500, + }); + dispatch({ type: 'CHANGE_API_STATUS', payload: copyStatus }); }) .catch((error) => { @@ -138,39 +147,65 @@ export default function PickApi() { }); }; + const switchToStreamText = (event: React.KeyboardEvent | React.MouseEvent) => { + localStorage.setItem('streamTextStatus', JSON.stringify(streamTextStatus)); + return toggleDrawer('streamTextStatus', API.STREAM_TEXT, false)(event); + }; + + const switchToScribearServer = (event: React.KeyboardEvent | React.MouseEvent) => { + localStorage.setItem('scribearServerStatus', JSON.stringify(scribearServerStatus)); + return toggleDrawer('scribearServerStatus', API.SCRIBEAR_SERVER, false)(event); + }; + + const switchToPlayback = (event: React.KeyboardEvent | React.MouseEvent) => { + localStorage.setItem('playbackStatus', JSON.stringify(playbackStatus)); + return toggleDrawer('playbackStatus', API.PLAYBACK, false)(event); + }; + const toggleDrawer = (apiStat: string, api: ApiType, isArrow: boolean) => (_event: React.KeyboardEvent | React.MouseEvent) => { if (apiStatus.currentApi !== api) { if (!isArrow) { - const copyStatus = { ...apiStatus, currentApi: api }; + const copyStatus = { ...apiStatus }; + copyStatus.currentApi = api; // reset all - copyStatus.azureTranslStatus = STATUS.AVAILABLE; - copyStatus.webspeechStatus = STATUS.AVAILABLE; - copyStatus.azureConvoStatus = STATUS.AVAILABLE; - copyStatus.whisperStatus = STATUS.AVAILABLE; - copyStatus.streamTextStatus = STATUS.AVAILABLE; - copyStatus.scribearServerStatus = STATUS.AVAILABLE; - copyStatus.playbackStatus = STATUS.AVAILABLE; + copyStatus.azureTranslStatus = STATUS.AVAILABLE; + copyStatus.webspeechStatus = STATUS.AVAILABLE; + copyStatus.azureConvoStatus = STATUS.AVAILABLE; + copyStatus.whisperStatus = STATUS.AVAILABLE; + copyStatus.streamTextStatus = STATUS.AVAILABLE; + copyStatus.scribearServerStatus= STATUS.AVAILABLE; + copyStatus.playbackStatus = STATUS.AVAILABLE; let apiName = ''; if (api === API.AZURE_TRANSLATION) { - apiName = 'Microsoft Azure'; copyStatus.azureTranslStatus = STATUS.TRANSCRIBING; + apiName = 'Microsoft Azure'; + copyStatus.azureTranslStatus = STATUS.TRANSCRIBING; } else if (api === API.WHISPER) { - apiName = 'Whisper'; copyStatus.whisperStatus = STATUS.TRANSCRIBING; + apiName = 'Whisper'; + copyStatus.whisperStatus = STATUS.TRANSCRIBING; } else if (api === API.WEBSPEECH) { - copyStatus.webspeechStatus = STATUS.TRANSCRIBING; + copyStatus.webspeechStatus = STATUS.TRANSCRIBING; } else if (api === API.STREAM_TEXT) { - apiName = 'StreamText'; copyStatus.streamTextStatus = STATUS.TRANSCRIBING; + apiName = 'StreamText'; + copyStatus.streamTextStatus = STATUS.TRANSCRIBING; } else if (api === API.SCRIBEAR_SERVER) { - apiName = 'ScribeAR Server'; copyStatus.scribearServerStatus = STATUS.TRANSCRIBING; + apiName = 'ScribeAR Server'; + copyStatus.scribearServerStatus = STATUS.TRANSCRIBING; } else if (api === API.PLAYBACK) { - apiName = 'Playback'; copyStatus.playbackStatus = STATUS.TRANSCRIBING; + apiName = 'Playback'; + copyStatus.playbackStatus = STATUS.TRANSCRIBING; } dispatch({ type: 'CHANGE_API_STATUS', payload: copyStatus }); - swal({ title: 'Success!', text: 'Switching to ' + apiName, icon: 'success', timer: 2500 }); + swal({ + title: 'Success!', + text: 'Switching to ' + apiName, + icon: 'success', + timer: 2500, + }); } else { setState((s) => ({ ...s, [apiStat]: !s[apiStat] })); } @@ -179,24 +214,10 @@ export default function PickApi() { } }; - const switchToStreamText = (e: React.KeyboardEvent | React.MouseEvent) => { - localStorage.setItem('streamTextStatus', JSON.stringify(streamTextStatus)); - return toggleDrawer('streamTextStatus', API.STREAM_TEXT, false)(e); - }; - - const switchToScribearServer = (e: React.KeyboardEvent | React.MouseEvent) => { - localStorage.setItem('scribearServerStatus', JSON.stringify(scribearServerStatus)); - return toggleDrawer('scribearServerStatus', API.SCRIBEAR_SERVER, false)(e); - }; - - const switchToPlayback = (e: React.KeyboardEvent | React.MouseEvent) => { - localStorage.setItem('playbackStatus', JSON.stringify(playbackStatus)); - return toggleDrawer('playbackStatus', API.PLAYBACK, false)(e); - }; - + // ---- UI ---- return (
- {/* Webspeech */} + {/* Webspeech (with language chip) */} @@ -204,7 +225,22 @@ export default function PickApi() { - + + + Webspeech + {/* Show current speech language (e.g., en-US) */} + {controlStatus?.speechLanguage?.CountryCode && ( + + )} + + } + /> @@ -225,7 +261,7 @@ export default function PickApi() { - + @@ -252,7 +288,7 @@ export default function PickApi() { - {/* Whisper (button + gear; inline chip shows selected model) */} + {/* Whisper (label + model chip + right gear) */} Whisper {selectedModelKey && ( - + )} } /> + + {/* Right-aligned settings gear (same pattern as Azure/ScribeAR) */}