From f4c7887e506634d50d1e74102019ba12a4db7452 Mon Sep 17 00:00:00 2001 From: Ilango Date: Fri, 19 Apr 2024 07:43:28 +0530 Subject: [PATCH] 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 --- .github/workflows/main.yml | 2 +- package.json | 2 +- .../ui-component/extended/AllowedDomains.jsx | 62 +++++++++++++++---- .../src/ui-component/extended/RateLimit.jsx | 9 +-- .../ui-component/extended/SpeechToText.jsx | 4 +- .../ui/src/views/chatflows/ShareChatbot.jsx | 6 ++ 6 files changed, 66 insertions(+), 19 deletions(-) diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index 6b6b6f489..485f5c2eb 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -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: diff --git a/package.json b/package.json index 238eb3b31..33471e385 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/packages/ui/src/ui-component/extended/AllowedDomains.jsx b/packages/ui/src/ui-component/extended/AllowedDomains.jsx index 5a5f55b8c..4930623d2 100644 --- a/packages/ui/src/ui-component/extended/AllowedDomains.jsx +++ b/packages/ui/src/ui-component/extended/AllowedDomains.jsx @@ -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 ( <> -
- Your chatbot will only work when used from the following domains. -
- :not(style)': { m: 1 }, pt: 2 }}> + + + + Allowed Domains + + + {inputFields.map((origin, index) => { return ( @@ -130,6 +147,7 @@ const AllowedDomains = ({ dialogProps }) => { size='small' value={origin} name='origin' + placeholder='https://example.com' endAdornment={ {inputFields.length > 1 && ( @@ -160,6 +178,28 @@ const AllowedDomains = ({ dialogProps }) => { })} + +
+ + Error Message + + + { + setErrorMessage(e.target.value) + }} + /> +
+ Save diff --git a/packages/ui/src/ui-component/extended/RateLimit.jsx b/packages/ui/src/ui-component/extended/RateLimit.jsx index 3f47667c7..36e1a7b90 100644 --- a/packages/ui/src/ui-component/extended/RateLimit.jsx +++ b/packages/ui/src/ui-component/extended/RateLimit.jsx @@ -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 = () => { } /> - {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')} onSave()}> Save Changes diff --git a/packages/ui/src/ui-component/extended/SpeechToText.jsx b/packages/ui/src/ui-component/extended/SpeechToText.jsx index 234840ff3..3c8fb674e 100644 --- a/packages/ui/src/ui-component/extended/SpeechToText.jsx +++ b/packages/ui/src/ui-component/extended/SpeechToText.jsx @@ -189,7 +189,7 @@ const SpeechToText = ({ dialogProps }) => { Providers - None OpenAI Whisper Assembly AI @@ -198,7 +198,7 @@ const SpeechToText = ({ dialogProps }) => { {selectedProvider !== 'none' && ( <> - +
{ 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')}