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
GitHub
parent
b7e4fc9517
commit
f4c7887e50
|
|
@ -21,7 +21,7 @@ jobs:
|
|||
- uses: actions/checkout@v4
|
||||
- uses: pnpm/action-setup@v3
|
||||
with:
|
||||
version: 9.0.3
|
||||
version: 9.0.4
|
||||
- name: Use Node.js ${{ matrix.node-version }}
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@
|
|||
"turbo": "1.10.16",
|
||||
"typescript": "^4.8.4"
|
||||
},
|
||||
"packageManager": "pnpm@9.0.3",
|
||||
"packageManager": "pnpm@9.0.4",
|
||||
"pnpm": {
|
||||
"onlyBuiltDependencies": [
|
||||
"faiss-node",
|
||||
|
|
|
|||
|
|
@ -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={{
|
||||
|
|
|
|||
|
|
@ -61,6 +61,7 @@ const ShareChatbot = ({ isSessionMemory }) => {
|
|||
const [titleAvatarSrc, setTitleAvatarSrc] = useState(chatbotConfig?.titleAvatarSrc ?? '')
|
||||
|
||||
const [welcomeMessage, setWelcomeMessage] = useState(chatbotConfig?.welcomeMessage ?? '')
|
||||
const [errorMessage, setErrorMessage] = useState(chatbotConfig?.errorMessage ?? '')
|
||||
const [backgroundColor, setBackgroundColor] = useState(chatbotConfig?.backgroundColor ?? defaultConfig.backgroundColor)
|
||||
const [fontSize, setFontSize] = useState(chatbotConfig?.fontSize ?? defaultConfig.fontSize)
|
||||
const [poweredByTextColor, setPoweredByTextColor] = useState(chatbotConfig?.poweredByTextColor ?? defaultConfig.poweredByTextColor)
|
||||
|
|
@ -114,6 +115,7 @@ const ShareChatbot = ({ isSessionMemory }) => {
|
|||
if (title) obj.title = title
|
||||
if (titleAvatarSrc) obj.titleAvatarSrc = titleAvatarSrc
|
||||
if (welcomeMessage) obj.welcomeMessage = welcomeMessage
|
||||
if (errorMessage) obj.errorMessage = errorMessage
|
||||
if (backgroundColor) obj.backgroundColor = backgroundColor
|
||||
if (fontSize) obj.fontSize = fontSize
|
||||
if (poweredByTextColor) obj.poweredByTextColor = poweredByTextColor
|
||||
|
|
@ -268,6 +270,9 @@ const ShareChatbot = ({ isSessionMemory }) => {
|
|||
case 'welcomeMessage':
|
||||
setWelcomeMessage(value)
|
||||
break
|
||||
case 'errorMessage':
|
||||
setErrorMessage(value)
|
||||
break
|
||||
case 'fontSize':
|
||||
setFontSize(value)
|
||||
break
|
||||
|
|
@ -417,6 +422,7 @@ const ShareChatbot = ({ isSessionMemory }) => {
|
|||
`https://raw.githubusercontent.com/FlowiseAI/Flowise/main/assets/FloWiseAI_dark.png`
|
||||
)}
|
||||
{textField(welcomeMessage, 'welcomeMessage', 'Welcome Message', 'string', 'Hello! This is custom welcome message')}
|
||||
{textField(errorMessage, 'errorMessage', 'Error Message', 'string', 'This is custom error message')}
|
||||
{colorField(backgroundColor, 'backgroundColor', 'Background Color')}
|
||||
{textField(fontSize, 'fontSize', 'Font Size', 'number')}
|
||||
{colorField(poweredByTextColor, 'poweredByTextColor', 'PoweredBy TextColor')}
|
||||
|
|
|
|||
Loading…
Reference in New Issue