diff --git a/packages/ui/src/ui-component/dialog/AllowedDomainsDialog.jsx b/packages/ui/src/ui-component/dialog/AllowedDomainsDialog.jsx deleted file mode 100644 index a5ed317a..00000000 --- a/packages/ui/src/ui-component/dialog/AllowedDomainsDialog.jsx +++ /dev/null @@ -1,220 +0,0 @@ -import { createPortal } from 'react-dom' -import { useDispatch } from 'react-redux' -import { useState, useEffect } from 'react' -import PropTypes from 'prop-types' - -// material-ui -import { - Button, - IconButton, - Dialog, - DialogContent, - OutlinedInput, - DialogTitle, - DialogActions, - Box, - List, - InputAdornment -} from '@mui/material' -import { IconX, IconTrash, IconPlus } from '@tabler/icons' - -// Project import -import { StyledButton } from '@/ui-component/button/StyledButton' - -// store -import { - enqueueSnackbar as enqueueSnackbarAction, - closeSnackbar as closeSnackbarAction, - SET_CHATFLOW, - HIDE_CANVAS_DIALOG, - SHOW_CANVAS_DIALOG -} from '@/store/actions' -import useNotifier from '@/utils/useNotifier' - -// API -import chatflowsApi from '@/api/chatflows' - -const AllowedDomainsDialog = ({ show, dialogProps, onCancel, onConfirm }) => { - const portalElement = document.getElementById('portal') - const dispatch = useDispatch() - - useNotifier() - - const enqueueSnackbar = (...args) => dispatch(enqueueSnackbarAction(...args)) - const closeSnackbar = (...args) => dispatch(closeSnackbarAction(...args)) - - const [inputFields, setInputFields] = useState(['']) - - const [chatbotConfig, setChatbotConfig] = useState({}) - - const addInputField = () => { - setInputFields([...inputFields, '']) - } - const removeInputFields = (index) => { - const rows = [...inputFields] - rows.splice(index, 1) - setInputFields(rows) - } - - const handleChange = (index, evnt) => { - const { value } = evnt.target - const list = [...inputFields] - list[index] = value - setInputFields(list) - } - - const onSave = async () => { - try { - let value = { - allowedOrigins: [...inputFields] - } - chatbotConfig.allowedOrigins = value.allowedOrigins - const saveResp = await chatflowsApi.updateChatflow(dialogProps.chatflow.id, { - chatbotConfig: JSON.stringify(chatbotConfig) - }) - if (saveResp.data) { - enqueueSnackbar({ - message: 'Allowed Origins Saved', - options: { - key: new Date().getTime() + Math.random(), - variant: 'success', - action: (key) => ( - - ) - } - }) - dispatch({ type: SET_CHATFLOW, chatflow: saveResp.data }) - } - onConfirm() - } catch (error) { - const errorData = error.response.data || `${error.response.status}: ${error.response.statusText}` - enqueueSnackbar({ - message: `Failed to save Allowed Origins: ${errorData}`, - options: { - key: new Date().getTime() + Math.random(), - variant: 'error', - persist: true, - action: (key) => ( - - ) - } - }) - } - } - - useEffect(() => { - if (dialogProps.chatflow && dialogProps.chatflow.chatbotConfig) { - try { - let chatbotConfig = JSON.parse(dialogProps.chatflow.chatbotConfig) - setChatbotConfig(chatbotConfig || {}) - if (chatbotConfig.allowedOrigins) { - let inputFields = [...chatbotConfig.allowedOrigins] - setInputFields(inputFields) - } else { - setInputFields(['']) - } - } catch (e) { - setInputFields(['']) - } - } - - return () => {} - }, [dialogProps]) - - useEffect(() => { - if (show) dispatch({ type: SHOW_CANVAS_DIALOG }) - else dispatch({ type: HIDE_CANVAS_DIALOG }) - return () => dispatch({ type: HIDE_CANVAS_DIALOG }) - }, [show, dispatch]) - - const component = show ? ( - - - {dialogProps.title || 'Allowed Origins'} - - -
- Your chatbot will only work when used from the following domains. -
- :not(style)': { m: 1 }, pt: 2 }}> - - {inputFields.map((origin, index) => { - return ( -
- - handleChange(index, e)} - size='small' - value={origin} - name='origin' - placeholder='https://example.com' - endAdornment={ - - {inputFields.length > 1 && ( - removeInputFields(index)} - edge='end' - > - - - )} - - } - /> - - - {index === inputFields.length - 1 && ( - - - - )} - -
- ) - })} - - - - - - - Save - - - - ) : null - - return createPortal(component, portalElement) -} - -AllowedDomainsDialog.propTypes = { - show: PropTypes.bool, - dialogProps: PropTypes.object, - onCancel: PropTypes.func, - onConfirm: PropTypes.func -} - -export default AllowedDomainsDialog diff --git a/packages/ui/src/ui-component/dialog/AnalyseFlowDialog.jsx b/packages/ui/src/ui-component/dialog/AnalyseFlowDialog.jsx deleted file mode 100644 index 891c2efc..00000000 --- a/packages/ui/src/ui-component/dialog/AnalyseFlowDialog.jsx +++ /dev/null @@ -1,358 +0,0 @@ -import { createPortal } from 'react-dom' -import { useDispatch } from 'react-redux' -import { useState, useEffect } from 'react' -import PropTypes from 'prop-types' -import { enqueueSnackbar as enqueueSnackbarAction, closeSnackbar as closeSnackbarAction, SET_CHATFLOW } from '@/store/actions' - -// material-ui -import { - Typography, - Box, - Button, - Dialog, - DialogContent, - DialogTitle, - DialogActions, - Accordion, - AccordionSummary, - AccordionDetails, - ListItem, - ListItemAvatar, - ListItemText -} from '@mui/material' -import ExpandMoreIcon from '@mui/icons-material/ExpandMore' -import { IconX } from '@tabler/icons' - -// Project import -import CredentialInputHandler from '@/views/canvas/CredentialInputHandler' -import { TooltipWithParser } from '@/ui-component/tooltip/TooltipWithParser' -import { SwitchInput } from '@/ui-component/switch/Switch' -import { Input } from '@/ui-component/input/Input' -import { StyledButton } from '@/ui-component/button/StyledButton' -import langsmithPNG from '@/assets/images/langchain.png' -import langfuseSVG from '@/assets/images/langfuse.svg' -import lunarySVG from '@/assets/images/lunary.svg' - -// store -import { HIDE_CANVAS_DIALOG, SHOW_CANVAS_DIALOG } from '@/store/actions' -import useNotifier from '@/utils/useNotifier' - -// API -import chatflowsApi from '@/api/chatflows' - -const analyticProviders = [ - { - label: 'LangSmith', - name: 'langSmith', - icon: langsmithPNG, - url: 'https://smith.langchain.com', - inputs: [ - { - label: 'Connect Credential', - name: 'credential', - type: 'credential', - credentialNames: ['langsmithApi'] - }, - { - label: 'Project Name', - name: 'projectName', - type: 'string', - optional: true, - description: 'If not provided, default will be used', - placeholder: 'default' - }, - { - label: 'On/Off', - name: 'status', - type: 'boolean', - optional: true - } - ] - }, - { - label: 'LangFuse', - name: 'langFuse', - icon: langfuseSVG, - url: 'https://langfuse.com', - inputs: [ - { - label: 'Connect Credential', - name: 'credential', - type: 'credential', - credentialNames: ['langfuseApi'] - }, - { - label: 'Release', - name: 'release', - type: 'string', - optional: true, - description: 'The release number/hash of the application to provide analytics grouped by release' - }, - { - label: 'On/Off', - name: 'status', - type: 'boolean', - optional: true - } - ] - }, - { - label: 'Lunary', - name: 'lunary', - icon: lunarySVG, - url: 'https://lunary.ai', - inputs: [ - { - label: 'Connect Credential', - name: 'credential', - type: 'credential', - credentialNames: ['lunaryApi'] - }, - { - label: 'On/Off', - name: 'status', - type: 'boolean', - optional: true - } - ] - } -] - -const AnalyseFlowDialog = ({ show, dialogProps, onCancel }) => { - const portalElement = document.getElementById('portal') - const dispatch = useDispatch() - - useNotifier() - - const enqueueSnackbar = (...args) => dispatch(enqueueSnackbarAction(...args)) - const closeSnackbar = (...args) => dispatch(closeSnackbarAction(...args)) - - const [analytic, setAnalytic] = useState({}) - const [providerExpanded, setProviderExpanded] = useState({}) - - const onSave = async () => { - try { - const saveResp = await chatflowsApi.updateChatflow(dialogProps.chatflow.id, { - analytic: JSON.stringify(analytic) - }) - if (saveResp.data) { - enqueueSnackbar({ - message: 'Analytic Configuration Saved', - options: { - key: new Date().getTime() + Math.random(), - variant: 'success', - action: (key) => ( - - ) - } - }) - dispatch({ type: SET_CHATFLOW, chatflow: saveResp.data }) - } - onCancel() - } catch (error) { - const errorData = error.response.data || `${error.response.status}: ${error.response.statusText}` - enqueueSnackbar({ - message: `Failed to save Analytic Configuration: ${errorData}`, - options: { - key: new Date().getTime() + Math.random(), - variant: 'error', - persist: true, - action: (key) => ( - - ) - } - }) - } - } - - const setValue = (value, providerName, inputParamName) => { - let newVal = {} - if (!Object.prototype.hasOwnProperty.call(analytic, providerName)) { - newVal = { ...analytic, [providerName]: {} } - } else { - newVal = { ...analytic } - } - - newVal[providerName][inputParamName] = value - setAnalytic(newVal) - } - - const handleAccordionChange = (providerName) => (event, isExpanded) => { - const accordianProviders = { ...providerExpanded } - accordianProviders[providerName] = isExpanded - setProviderExpanded(accordianProviders) - } - - useEffect(() => { - if (dialogProps.chatflow && dialogProps.chatflow.analytic) { - try { - setAnalytic(JSON.parse(dialogProps.chatflow.analytic)) - } catch (e) { - setAnalytic({}) - console.error(e) - } - } - - return () => { - setAnalytic({}) - setProviderExpanded({}) - } - }, [dialogProps]) - - useEffect(() => { - if (show) dispatch({ type: SHOW_CANVAS_DIALOG }) - else dispatch({ type: HIDE_CANVAS_DIALOG }) - return () => dispatch({ type: HIDE_CANVAS_DIALOG }) - }, [show, dispatch]) - - const component = show ? ( - - - Analyse Chatflow - - - {analyticProviders.map((provider, index) => ( - - } aria-controls={provider.name} id={provider.name}> - - -
- AI -
- - - {provider.url} - - } - /> - {analytic[provider.name] && analytic[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')} - /> - )} - {providerExpanded[provider.name] && inputParam.type === 'boolean' && ( - setValue(newValue, provider.name, inputParam.name)} - value={ - analytic[provider.name] - ? analytic[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={ - analytic[provider.name] - ? analytic[provider.name][inputParam.name] - : inputParam.default ?? '' - } - /> - )} - - ))} - - - ))} - - - - Save - - -
- ) : null - - return createPortal(component, portalElement) -} - -AnalyseFlowDialog.propTypes = { - show: PropTypes.bool, - dialogProps: PropTypes.object, - onCancel: PropTypes.func -} - -export default AnalyseFlowDialog diff --git a/packages/ui/src/ui-component/dialog/ChatFeedbackDialog.jsx b/packages/ui/src/ui-component/dialog/ChatFeedbackDialog.jsx deleted file mode 100644 index 1706d624..00000000 --- a/packages/ui/src/ui-component/dialog/ChatFeedbackDialog.jsx +++ /dev/null @@ -1,107 +0,0 @@ -import { useDispatch } from 'react-redux' -import { useState, useEffect } from 'react' -import PropTypes from 'prop-types' - -// material-ui -import { Button, Box } from '@mui/material' -import { IconX } from '@tabler/icons' - -// Project import -import { StyledButton } from '@/ui-component/button/StyledButton' -import { SwitchInput } from '@/ui-component/switch/Switch' - -// store -import { enqueueSnackbar as enqueueSnackbarAction, closeSnackbar as closeSnackbarAction, SET_CHATFLOW } from '@/store/actions' -import useNotifier from '@/utils/useNotifier' - -// API -import chatflowsApi from '@/api/chatflows' - -const ChatFeedback = ({ dialogProps }) => { - const dispatch = useDispatch() - - useNotifier() - - const enqueueSnackbar = (...args) => dispatch(enqueueSnackbarAction(...args)) - const closeSnackbar = (...args) => dispatch(closeSnackbarAction(...args)) - - const [chatFeedbackStatus, setChatFeedbackStatus] = useState(false) - const [chatbotConfig, setChatbotConfig] = useState({}) - - const handleChange = (value) => { - setChatFeedbackStatus(value) - } - - const onSave = async () => { - try { - let value = { - chatFeedback: { - status: chatFeedbackStatus - } - } - chatbotConfig.chatFeedback = value.chatFeedback - const saveResp = await chatflowsApi.updateChatflow(dialogProps.chatflow.id, { - chatbotConfig: JSON.stringify(chatbotConfig) - }) - if (saveResp.data) { - enqueueSnackbar({ - message: 'Chat Feedback Settings Saved', - options: { - key: new Date().getTime() + Math.random(), - variant: 'success', - action: (key) => ( - - ) - } - }) - dispatch({ type: SET_CHATFLOW, chatflow: saveResp.data }) - } - } catch (error) { - const errorData = error.response.data || `${error.response.status}: ${error.response.statusText}` - enqueueSnackbar({ - message: `Failed to save Chat Feedback Settings: ${errorData}`, - options: { - key: new Date().getTime() + Math.random(), - variant: 'error', - persist: true, - action: (key) => ( - - ) - } - }) - } - } - - useEffect(() => { - if (dialogProps.chatflow && dialogProps.chatflow.chatbotConfig) { - let chatbotConfig = JSON.parse(dialogProps.chatflow.chatbotConfig) - setChatbotConfig(chatbotConfig || {}) - if (chatbotConfig.chatFeedback) { - setChatFeedbackStatus(chatbotConfig.chatFeedback.status) - } - } - - return () => {} - }, [dialogProps]) - - return ( - <> - - - - - Save - - - ) -} - -ChatFeedback.propTypes = { - dialogProps: PropTypes.object -} - -export default ChatFeedback diff --git a/packages/ui/src/ui-component/dialog/SpeechToTextDialog.jsx b/packages/ui/src/ui-component/dialog/SpeechToTextDialog.jsx deleted file mode 100644 index ef410ae6..00000000 --- a/packages/ui/src/ui-component/dialog/SpeechToTextDialog.jsx +++ /dev/null @@ -1,348 +0,0 @@ -import { createPortal } from 'react-dom' -import { useDispatch } from 'react-redux' -import { useState, useEffect } from 'react' -import PropTypes from 'prop-types' -import { enqueueSnackbar as enqueueSnackbarAction, closeSnackbar as closeSnackbarAction, SET_CHATFLOW } from '@/store/actions' - -// material-ui -import { - Typography, - Box, - Button, - Dialog, - DialogContent, - DialogTitle, - DialogActions, - FormControl, - ListItem, - ListItemAvatar, - ListItemText, - MenuItem, - Select -} from '@mui/material' -import { IconX } from '@tabler/icons' - -// Project import -import CredentialInputHandler from '@/views/canvas/CredentialInputHandler' -import { TooltipWithParser } from '@/ui-component/tooltip/TooltipWithParser' -import { SwitchInput } from '@/ui-component/switch/Switch' -import { Input } from '@/ui-component/input/Input' -import { StyledButton } from '@/ui-component/button/StyledButton' -import { Dropdown } from '@/ui-component/dropdown/Dropdown' -import openAISVG from '@/assets/images/openai.svg' -import assemblyAIPng from '@/assets/images/assemblyai.png' - -// store -import { HIDE_CANVAS_DIALOG, SHOW_CANVAS_DIALOG } from '@/store/actions' -import useNotifier from '@/utils/useNotifier' - -// API -import chatflowsApi from '@/api/chatflows' - -const speechToTextProviders = { - openAIWhisper: { - label: 'OpenAI Whisper', - name: 'openAIWhisper', - icon: openAISVG, - url: 'https://platform.openai.com/docs/guides/speech-to-text', - inputs: [ - { - label: 'Connect Credential', - name: 'credential', - type: 'credential', - credentialNames: ['openAIApi'] - }, - { - label: 'Language', - name: 'language', - type: 'string', - description: - 'The language of the input audio. Supplying the input language in ISO-639-1 format will improve accuracy and latency.', - placeholder: 'en', - optional: true - }, - { - label: 'Prompt', - name: 'prompt', - type: 'string', - rows: 4, - description: `An optional text to guide the model's style or continue a previous audio segment. The prompt should match the audio language.`, - optional: true - }, - { - label: 'Temperature', - name: 'temperature', - type: 'number', - 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 - } - ] - }, - assemblyAiTranscribe: { - label: 'Assembly AI', - name: 'assemblyAiTranscribe', - icon: assemblyAIPng, - url: 'https://www.assemblyai.com/', - inputs: [ - { - label: 'Connect Credential', - name: 'credential', - type: 'credential', - credentialNames: ['assemblyAIApi'] - } - ] - } -} - -const SpeechToTextDialog = ({ show, dialogProps, onCancel }) => { - const portalElement = document.getElementById('portal') - const dispatch = useDispatch() - - useNotifier() - - const enqueueSnackbar = (...args) => dispatch(enqueueSnackbarAction(...args)) - const closeSnackbar = (...args) => dispatch(closeSnackbarAction(...args)) - - const [speechToText, setSpeechToText] = useState({}) - const [selectedProvider, setSelectedProvider] = useState('none') - - const onSave = async () => { - const speechToText = setValue(true, selectedProvider, 'status') - try { - const saveResp = await chatflowsApi.updateChatflow(dialogProps.chatflow.id, { - speechToText: JSON.stringify(speechToText) - }) - if (saveResp.data) { - enqueueSnackbar({ - message: 'Speech To Text Configuration Saved', - options: { - key: new Date().getTime() + Math.random(), - variant: 'success', - action: (key) => ( - - ) - } - }) - dispatch({ type: SET_CHATFLOW, chatflow: saveResp.data }) - } - onCancel() - } catch (error) { - const errorData = error.response.data || `${error.response.status}: ${error.response.statusText}` - enqueueSnackbar({ - message: `Failed to save Speech To Text Configuration: ${errorData}`, - options: { - key: new Date().getTime() + Math.random(), - variant: 'error', - persist: true, - action: (key) => ( - - ) - } - }) - } - } - - const setValue = (value, providerName, inputParamName) => { - let newVal = {} - if (!Object.prototype.hasOwnProperty.call(speechToText, providerName)) { - newVal = { ...speechToText, [providerName]: {} } - } else { - newVal = { ...speechToText } - } - - newVal[providerName][inputParamName] = value - if (inputParamName === 'status' && value === true) { - // 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 } - } - }) - } - setSpeechToText(newVal) - return newVal - } - - const handleProviderChange = (event) => { - setSelectedProvider(event.target.value) - } - - useEffect(() => { - if (dialogProps.chatflow && dialogProps.chatflow.speechToText) { - try { - const speechToText = JSON.parse(dialogProps.chatflow.speechToText) - let selectedProvider = 'none' - Object.keys(speechToTextProviders).forEach((key) => { - const providerConfig = speechToText[key] - if (providerConfig && providerConfig.status) { - selectedProvider = key - } - }) - setSelectedProvider(selectedProvider) - setSpeechToText(speechToText) - } catch (e) { - setSpeechToText({}) - setSelectedProvider('none') - console.error(e) - } - } - - return () => { - setSpeechToText({}) - setSelectedProvider('none') - } - }, [dialogProps]) - - useEffect(() => { - if (show) dispatch({ type: SHOW_CANVAS_DIALOG }) - else dispatch({ type: HIDE_CANVAS_DIALOG }) - return () => dispatch({ type: HIDE_CANVAS_DIALOG }) - }, [show, dispatch]) - - const component = ( - - - Speech To Text Configuration - - - - Speech To Text Providers - - - - - {selectedProvider !== 'none' && ( - <> - - -
- AI -
- - - {speechToTextProviders[selectedProvider].url} - - } - /> - - {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 - } - /> - )} - {(inputParam.type === 'string' || inputParam.type === 'password' || inputParam.type === 'number') && ( - setValue(newValue, selectedProvider, inputParam.name)} - value={ - speechToText[selectedProvider] - ? speechToText[selectedProvider][inputParam.name] - : inputParam.default ?? '' - } - /> - )} - - {inputParam.type === 'options' && ( - setValue(newValue, selectedProvider, inputParam.name)} - value={ - speechToText[selectedProvider] - ? speechToText[selectedProvider][inputParam.name] - : inputParam.default ?? 'choose an option' - } - /> - )} - - ))} - - )} - - - - Save - - - - ) - - return createPortal(component, portalElement) -} - -SpeechToTextDialog.propTypes = { - show: PropTypes.bool, - dialogProps: PropTypes.object, - onCancel: PropTypes.func -} - -export default SpeechToTextDialog