mirror of
https://github.com/farcasclaudiu/Flowise.git
synced 2026-06-28 19:00:59 +03:00
Feature: define a custom error message for allowed domains (#2194)
* Add a field for custom error message in allowed domains configuration * enhance UI for more consistency * update pnpm version * update pnpm version --------- Co-authored-by: Henry <hzj94@hotmail.com>
This commit is contained in:
Ilango
@@ -4,11 +4,12 @@ import PropTypes from 'prop-types'
|
||||
import { enqueueSnackbar as enqueueSnackbarAction, closeSnackbar as closeSnackbarAction, SET_CHATFLOW } from '@/store/actions'
|
||||
|
||||
// material-ui
|
||||
import { Button, IconButton, OutlinedInput, Box, List, InputAdornment } from '@mui/material'
|
||||
import { Button, IconButton, OutlinedInput, Box, List, InputAdornment, Typography } from '@mui/material'
|
||||
import { IconX, IconTrash, IconPlus } from '@tabler/icons'
|
||||
|
||||
// Project import
|
||||
import { StyledButton } from '@/ui-component/button/StyledButton'
|
||||
import { TooltipWithParser } from '@/ui-component/tooltip/TooltipWithParser'
|
||||
|
||||
// store
|
||||
import useNotifier from '@/utils/useNotifier'
|
||||
@@ -25,6 +26,7 @@ const AllowedDomains = ({ dialogProps }) => {
|
||||
const closeSnackbar = (...args) => dispatch(closeSnackbarAction(...args))
|
||||
|
||||
const [inputFields, setInputFields] = useState([''])
|
||||
const [errorMessage, setErrorMessage] = useState('')
|
||||
|
||||
const [chatbotConfig, setChatbotConfig] = useState({})
|
||||
|
||||
@@ -47,9 +49,12 @@ const AllowedDomains = ({ dialogProps }) => {
|
||||
const onSave = async () => {
|
||||
try {
|
||||
let value = {
|
||||
allowedOrigins: [...inputFields]
|
||||
allowedOrigins: [...inputFields],
|
||||
allowedOriginsError: errorMessage
|
||||
}
|
||||
chatbotConfig.allowedOrigins = value.allowedOrigins
|
||||
chatbotConfig.allowedOriginsError = value.allowedOriginsError
|
||||
|
||||
const saveResp = await chatflowsApi.updateChatflow(dialogProps.chatflow.id, {
|
||||
chatbotConfig: JSON.stringify(chatbotConfig)
|
||||
})
|
||||
@@ -98,8 +103,14 @@ const AllowedDomains = ({ dialogProps }) => {
|
||||
} else {
|
||||
setInputFields([''])
|
||||
}
|
||||
if (chatbotConfig.allowedOriginsError) {
|
||||
setErrorMessage(chatbotConfig.allowedOriginsError)
|
||||
} else {
|
||||
setErrorMessage('')
|
||||
}
|
||||
} catch (e) {
|
||||
setInputFields([''])
|
||||
setErrorMessage('')
|
||||
}
|
||||
}
|
||||
|
||||
@@ -108,15 +119,21 @@ const AllowedDomains = ({ dialogProps }) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column'
|
||||
}}
|
||||
>
|
||||
<span>Your chatbot will only work when used from the following domains.</span>
|
||||
</div>
|
||||
<Box sx={{ '& > :not(style)': { m: 1 }, pt: 2 }}>
|
||||
<Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column'
|
||||
}}
|
||||
>
|
||||
<Typography sx={{ mb: 1 }}>
|
||||
Allowed Domains
|
||||
<TooltipWithParser
|
||||
style={{ mb: 1, mt: 2, marginLeft: 10 }}
|
||||
title={'Your chatbot will only work when used from the following domains.'}
|
||||
/>
|
||||
</Typography>
|
||||
</Box>
|
||||
<List>
|
||||
{inputFields.map((origin, index) => {
|
||||
return (
|
||||
@@ -130,6 +147,7 @@ const AllowedDomains = ({ dialogProps }) => {
|
||||
size='small'
|
||||
value={origin}
|
||||
name='origin'
|
||||
placeholder='https://example.com'
|
||||
endAdornment={
|
||||
<InputAdornment position='end' sx={{ padding: '2px' }}>
|
||||
{inputFields.length > 1 && (
|
||||
@@ -160,6 +178,28 @@ const AllowedDomains = ({ dialogProps }) => {
|
||||
})}
|
||||
</List>
|
||||
</Box>
|
||||
<Box sx={{ pt: 2, pb: 2 }}>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start' }}>
|
||||
<Typography sx={{ mb: 1 }}>
|
||||
Error Message
|
||||
<TooltipWithParser
|
||||
style={{ mb: 1, mt: 2, marginLeft: 10 }}
|
||||
title={'Custom error message that will be shown when for unauthorized domain'}
|
||||
/>
|
||||
</Typography>
|
||||
<OutlinedInput
|
||||
sx={{ width: '100%' }}
|
||||
type='text'
|
||||
size='small'
|
||||
fullWidth
|
||||
placeholder='Unauthorized domain!'
|
||||
value={errorMessage}
|
||||
onChange={(e) => {
|
||||
setErrorMessage(e.target.value)
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</Box>
|
||||
<StyledButton variant='contained' onClick={onSave}>
|
||||
Save
|
||||
</StyledButton>
|
||||
|
||||
@@ -7,6 +7,7 @@ import { Box, Typography, Button, OutlinedInput } from '@mui/material'
|
||||
|
||||
// Project import
|
||||
import { StyledButton } from '@/ui-component/button/StyledButton'
|
||||
import { TooltipWithParser } from '@/ui-component/tooltip/TooltipWithParser'
|
||||
|
||||
// Icons
|
||||
import { IconX } from '@tabler/icons'
|
||||
@@ -16,7 +17,6 @@ import chatflowsApi from '@/api/chatflows'
|
||||
|
||||
// utils
|
||||
import useNotifier from '@/utils/useNotifier'
|
||||
import { TooltipWithParser } from '@/ui-component/tooltip/TooltipWithParser'
|
||||
|
||||
const RateLimit = () => {
|
||||
const dispatch = useDispatch()
|
||||
@@ -117,6 +117,7 @@ const RateLimit = () => {
|
||||
value={message}
|
||||
placeholder={placeholder}
|
||||
name={fieldName}
|
||||
size='small'
|
||||
onChange={(e) => {
|
||||
onTextChanged(e.target.value, fieldName)
|
||||
}}
|
||||
@@ -138,9 +139,9 @@ const RateLimit = () => {
|
||||
}
|
||||
/>
|
||||
</Typography>
|
||||
{textField(limitMax, 'limitMax', 'Message Limit per Duration', 'number')}
|
||||
{textField(limitDuration, 'limitDuration', 'Duration in Second', 'number')}
|
||||
{textField(limitMsg, 'limitMsg', 'Limit Message', 'string')}
|
||||
{textField(limitMax, 'limitMax', 'Message Limit per Duration', 'number', '5')}
|
||||
{textField(limitDuration, 'limitDuration', 'Duration in Second', 'number', '60')}
|
||||
{textField(limitMsg, 'limitMsg', 'Limit Message', 'string', 'You have reached the quota')}
|
||||
|
||||
<StyledButton style={{ marginBottom: 10, marginTop: 10 }} variant='contained' onClick={() => onSave()}>
|
||||
Save Changes
|
||||
|
||||
@@ -189,7 +189,7 @@ const SpeechToText = ({ dialogProps }) => {
|
||||
Providers
|
||||
</Typography>
|
||||
<FormControl fullWidth>
|
||||
<Select value={selectedProvider} onChange={handleProviderChange}>
|
||||
<Select size='small' value={selectedProvider} onChange={handleProviderChange}>
|
||||
<MenuItem value='none'>None</MenuItem>
|
||||
<MenuItem value='openAIWhisper'>OpenAI Whisper</MenuItem>
|
||||
<MenuItem value='assemblyAiTranscribe'>Assembly AI</MenuItem>
|
||||
@@ -198,7 +198,7 @@ const SpeechToText = ({ dialogProps }) => {
|
||||
</Box>
|
||||
{selectedProvider !== 'none' && (
|
||||
<>
|
||||
<ListItem style={{ padding: 0, margin: 0 }} alignItems='center'>
|
||||
<ListItem sx={{ mt: 3 }} alignItems='center'>
|
||||
<ListItemAvatar>
|
||||
<div
|
||||
style={{
|
||||
|
||||
Reference in New Issue
Block a user