From 81c07dc8c1cc770b954e1278c127524cb9ff0561 Mon Sep 17 00:00:00 2001 From: Ilango Date: Mon, 19 Feb 2024 11:49:01 +0530 Subject: [PATCH] Update UI of speech to text dialog --- .../ui-component/dialog/SpeechToTextDialog.js | 291 ++++++++---------- .../ui-component/dropdown/AsyncDropdown.js | 6 +- .../views/canvas/CredentialInputHandler.js | 6 +- 3 files changed, 145 insertions(+), 158 deletions(-) diff --git a/packages/ui/src/ui-component/dialog/SpeechToTextDialog.js b/packages/ui/src/ui-component/dialog/SpeechToTextDialog.js index 9fc11a728..606346642 100644 --- a/packages/ui/src/ui-component/dialog/SpeechToTextDialog.js +++ b/packages/ui/src/ui-component/dialog/SpeechToTextDialog.js @@ -13,14 +13,13 @@ import { DialogContent, DialogTitle, DialogActions, - Accordion, - AccordionSummary, - AccordionDetails, + FormControl, ListItem, ListItemAvatar, - ListItemText + ListItemText, + MenuItem, + Select } from '@mui/material' -import ExpandMoreIcon from '@mui/icons-material/ExpandMore' import { IconX } from '@tabler/icons' // Project import @@ -40,8 +39,8 @@ import useNotifier from 'utils/useNotifier' // API import chatflowsApi from 'api/chatflows' -const speechToTextProviders = [ - { +const speechToTextProviders = { + openAIWhisper: { label: 'OpenAI Whisper', name: 'openAIWhisper', icon: openAISVG, @@ -77,16 +76,10 @@ const speechToTextProviders = [ step: 0.1, description: `The sampling temperature, between 0 and 1. Higher values like 0.8 will make the output more random, while lower values like 0.2 will make it more focused and deterministic.`, optional: true - }, - { - label: 'On/Off', - name: 'status', - type: 'boolean', - optional: true } ] }, - { + assemblyAiTranscribe: { label: 'Assembly AI', name: 'assemblyAiTranscribe', icon: assemblyAIPng, @@ -97,16 +90,10 @@ const speechToTextProviders = [ name: 'credential', type: 'credential', credentialNames: ['assemblyAIApi'] - }, - { - label: 'On/Off', - name: 'status', - type: 'boolean', - optional: true } ] } -] +} const SpeechToTextDialog = ({ show, dialogProps, onCancel }) => { const portalElement = document.getElementById('portal') @@ -118,7 +105,7 @@ const SpeechToTextDialog = ({ show, dialogProps, onCancel }) => { const closeSnackbar = (...args) => dispatch(closeSnackbarAction(...args)) const [speechToText, setSpeechToText] = useState({}) - const [providerExpanded, setProviderExpanded] = useState({}) + const [selectedProvider, setSelectedProvider] = useState('openAIWhisper') const onSave = async () => { try { @@ -169,8 +156,9 @@ const SpeechToTextDialog = ({ show, dialogProps, onCancel }) => { newVal[providerName][inputParamName] = value if (inputParamName === 'status' && value === true) { - //ensure that the others are turned off - speechToTextProviders.forEach((provider) => { + // ensure that the others are turned off + Object.keys(speechToTextProviders).forEach((key) => { + const provider = speechToTextProviders[key] if (provider.name !== providerName) { newVal[provider.name] = { ...speechToText[provider.name], status: false } } @@ -179,10 +167,9 @@ const SpeechToTextDialog = ({ show, dialogProps, onCancel }) => { setSpeechToText(newVal) } - const handleAccordionChange = (providerName) => (event, isExpanded) => { - const accordionProviders = { ...providerExpanded } - accordionProviders[providerName] = isExpanded - setProviderExpanded(accordionProviders) + const handleProviderChange = (event) => { + setSelectedProvider(event.target.value) + setValue(true, event.target.value, 'status') } useEffect(() => { @@ -197,7 +184,6 @@ const SpeechToTextDialog = ({ show, dialogProps, onCancel }) => { return () => { setSpeechToText({}) - setProviderExpanded({}) } }, [dialogProps]) @@ -220,136 +206,129 @@ const SpeechToTextDialog = ({ show, dialogProps, onCancel }) => { Speech To Text Configuration - {speechToTextProviders.map((provider, index) => ( - - } aria-controls={provider.name} id={provider.name}> - - -
- AI -
- - - {provider.url} - + + Speech To Text Providers + + + + + <> + + +
+ AI +
+ + + {speechToTextProviders[selectedProvider].url} + + } + /> + {speechToText[selectedProvider] && speechToText[selectedProvider].status && ( +
+
+ ON +
+ )} + + {speechToTextProviders[selectedProvider].inputs.map((inputParam, index) => ( + +
+ + {inputParam.label} + {!inputParam.optional &&  *} + {inputParam.description && ( + + )} + +
+ {inputParam.type === 'credential' && ( + setValue(newValue, selectedProvider, 'credentialId')} + /> + )} + {inputParam.type === 'boolean' && ( + setValue(newValue, selectedProvider, inputParam.name)} + value={ + speechToText[selectedProvider] + ? speechToText[selectedProvider][inputParam.name] + : inputParam.default ?? false } /> - {speechToText[provider.name] && speechToText[provider.name].status && ( -
-
- ON -
- )} - - - - {provider.inputs.map((inputParam, index) => ( - -
- - {inputParam.label} - {!inputParam.optional &&  *} - {inputParam.description && ( - - )} - -
- {providerExpanded[provider.name] && inputParam.type === 'credential' && ( - setValue(newValue, provider.name, 'credentialId')} - /> - )} - {inputParam.type === 'boolean' && ( - setValue(newValue, provider.name, inputParam.name)} - value={ - speechToText[provider.name] - ? speechToText[provider.name][inputParam.name] - : inputParam.default ?? false - } - /> - )} - {providerExpanded[provider.name] && - (inputParam.type === 'string' || - inputParam.type === 'password' || - inputParam.type === 'number') && ( - setValue(newValue, provider.name, inputParam.name)} - value={ - speechToText[provider.name] - ? speechToText[provider.name][inputParam.name] - : inputParam.default ?? '' - } - /> - )} + )} + {(inputParam.type === 'string' || inputParam.type === 'password' || inputParam.type === 'number') && ( + setValue(newValue, selectedProvider, inputParam.name)} + value={ + speechToText[selectedProvider] + ? speechToText[selectedProvider][inputParam.name] + : inputParam.default ?? '' + } + /> + )} - {providerExpanded[provider.name] && inputParam.type === 'options' && ( - setValue(newValue, provider.name, inputParam.name)} - value={ - speechToText[provider.name] - ? speechToText[provider.name][inputParam.name] - : inputParam.default ?? 'choose an option' - } - /> - )} - - ))} - - - ))} + {inputParam.type === 'options' && ( + setValue(newValue, selectedProvider, inputParam.name)} + value={ + speechToText[selectedProvider] + ? speechToText[selectedProvider][inputParam.name] + : inputParam.default ?? 'choose an option' + } + /> + )} + + ))} + diff --git a/packages/ui/src/ui-component/dropdown/AsyncDropdown.js b/packages/ui/src/ui-component/dropdown/AsyncDropdown.js index b24fa02b5..b98410a81 100644 --- a/packages/ui/src/ui-component/dropdown/AsyncDropdown.js +++ b/packages/ui/src/ui-component/dropdown/AsyncDropdown.js @@ -105,7 +105,11 @@ export const AsyncDropdown = ({ })() // eslint-disable-next-line react-hooks/exhaustive-deps - }, []) + }, [credentialNames]) + + useEffect(() => { + setInternalValue(value) + }, [value]) return ( <> diff --git a/packages/ui/src/views/canvas/CredentialInputHandler.js b/packages/ui/src/views/canvas/CredentialInputHandler.js index 4f8747191..8285a00d6 100644 --- a/packages/ui/src/views/canvas/CredentialInputHandler.js +++ b/packages/ui/src/views/canvas/CredentialInputHandler.js @@ -1,5 +1,5 @@ import PropTypes from 'prop-types' -import { useRef, useState } from 'react' +import { useEffect, useRef, useState } from 'react' // material-ui import { IconButton } from '@mui/material' @@ -88,6 +88,10 @@ const CredentialInputHandler = ({ inputParam, data, onSelect, disabled = false } setShowSpecificCredentialDialog(true) } + useEffect(() => { + setCredentialId(data?.credential ?? '') + }, [data]) + return (
{inputParam && (