mirror of
https://github.com/farcasclaudiu/Flowise.git
synced 2026-06-22 09:01:09 +03:00
Feature/update share chatbot for adding title colors (#3823)
update share chatbot for adding title colors
This commit is contained in:
Henry Heng
@@ -4,7 +4,7 @@ import { enqueueSnackbar as enqueueSnackbarAction, closeSnackbar as closeSnackba
|
||||
import { SketchPicker } from 'react-color'
|
||||
import PropTypes from 'prop-types'
|
||||
|
||||
import { Box, Typography, Button, Switch, OutlinedInput, Popover, Stack, IconButton } from '@mui/material'
|
||||
import { Card, Box, Typography, Button, Switch, OutlinedInput, Popover, Stack, IconButton } from '@mui/material'
|
||||
import { useTheme } from '@mui/material/styles'
|
||||
|
||||
// Project import
|
||||
@@ -27,6 +27,8 @@ const defaultConfig = {
|
||||
backgroundColor: '#ffffff',
|
||||
fontSize: 16,
|
||||
poweredByTextColor: '#303235',
|
||||
titleBackgroundColor: '#3B81F6',
|
||||
titleTextColor: '#ffffff',
|
||||
botMessage: {
|
||||
backgroundColor: '#f7f8ff',
|
||||
textColor: '#303235'
|
||||
@@ -60,6 +62,10 @@ const ShareChatbot = ({ isSessionMemory, isAgentCanvas }) => {
|
||||
|
||||
const [title, setTitle] = useState(chatbotConfig?.title ?? '')
|
||||
const [titleAvatarSrc, setTitleAvatarSrc] = useState(chatbotConfig?.titleAvatarSrc ?? '')
|
||||
const [titleBackgroundColor, setTitleBackgroundColor] = useState(
|
||||
chatbotConfig?.titleBackgroundColor ?? defaultConfig.titleBackgroundColor
|
||||
)
|
||||
const [titleTextColor, setTitleTextColor] = useState(chatbotConfig?.titleTextColor ?? defaultConfig.titleTextColor)
|
||||
|
||||
const [welcomeMessage, setWelcomeMessage] = useState(chatbotConfig?.welcomeMessage ?? '')
|
||||
const [errorMessage, setErrorMessage] = useState(chatbotConfig?.errorMessage ?? '')
|
||||
@@ -115,6 +121,9 @@ const ShareChatbot = ({ isSessionMemory, isAgentCanvas }) => {
|
||||
}
|
||||
if (title) obj.title = title
|
||||
if (titleAvatarSrc) obj.titleAvatarSrc = titleAvatarSrc
|
||||
if (titleBackgroundColor) obj.titleBackgroundColor = titleBackgroundColor
|
||||
if (titleTextColor) obj.titleTextColor = titleTextColor
|
||||
|
||||
if (welcomeMessage) obj.welcomeMessage = welcomeMessage
|
||||
if (errorMessage) obj.errorMessage = errorMessage
|
||||
if (backgroundColor) obj.backgroundColor = backgroundColor
|
||||
@@ -272,6 +281,12 @@ const ShareChatbot = ({ isSessionMemory, isAgentCanvas }) => {
|
||||
case 'textInputSendButtonColor':
|
||||
setTextInputSendButtonColor(hexColor)
|
||||
break
|
||||
case 'titleBackgroundColor':
|
||||
setTitleBackgroundColor(hexColor)
|
||||
break
|
||||
case 'titleTextColor':
|
||||
setTitleTextColor(hexColor)
|
||||
break
|
||||
}
|
||||
setSketchPickerColor(hexColor)
|
||||
}
|
||||
@@ -436,78 +451,91 @@ const ShareChatbot = ({ isSessionMemory, isAgentCanvas }) => {
|
||||
/>
|
||||
</div>
|
||||
</Stack>
|
||||
{textField(title, 'title', 'Title', 'string', 'Flowise Assistant')}
|
||||
{textField(
|
||||
titleAvatarSrc,
|
||||
'titleAvatarSrc',
|
||||
'Title Avatar Link',
|
||||
'string',
|
||||
`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')}
|
||||
{isAgentCanvas && booleanField(showAgentMessages, 'showAgentMessages', 'Show Agent Reasoning')}
|
||||
|
||||
{/*BOT Message*/}
|
||||
<Typography variant='h4' sx={{ mb: 1, mt: 2 }}>
|
||||
Bot Message
|
||||
</Typography>
|
||||
{colorField(botMessageBackgroundColor, 'botMessageBackgroundColor', 'Background Color')}
|
||||
{colorField(botMessageTextColor, 'botMessageTextColor', 'Text Color')}
|
||||
{textField(
|
||||
botMessageAvatarSrc,
|
||||
'botMessageAvatarSrc',
|
||||
'Avatar Link',
|
||||
'string',
|
||||
`https://raw.githubusercontent.com/zahidkhawaja/langchain-chat-nextjs/main/public/parroticon.png`
|
||||
)}
|
||||
{booleanField(botMessageShowAvatar, 'botMessageShowAvatar', 'Show Avatar')}
|
||||
<Card sx={{ borderColor: theme.palette.primary[200] + 75, p: 3, mt: 2 }} variant='outlined'>
|
||||
<Stack sx={{ mt: 1, mb: 2, alignItems: 'center' }} direction='row' spacing={2}>
|
||||
<Typography variant='h4'>Title Settings</Typography>
|
||||
</Stack>
|
||||
{textField(title, 'title', 'Title', 'string', 'Flowise Assistant')}
|
||||
{textField(
|
||||
titleAvatarSrc,
|
||||
'titleAvatarSrc',
|
||||
'Title Avatar Link',
|
||||
'string',
|
||||
`https://raw.githubusercontent.com/FlowiseAI/Flowise/main/assets/FloWiseAI_dark.png`
|
||||
)}
|
||||
{colorField(titleBackgroundColor, 'titleBackgroundColor', 'Title Background Color')}
|
||||
{colorField(titleTextColor, 'titleTextColor', 'Title TextColor')}
|
||||
</Card>
|
||||
|
||||
{/*USER Message*/}
|
||||
<Typography variant='h4' sx={{ mb: 1, mt: 2 }}>
|
||||
User Message
|
||||
</Typography>
|
||||
{colorField(userMessageBackgroundColor, 'userMessageBackgroundColor', 'Background Color')}
|
||||
{colorField(userMessageTextColor, 'userMessageTextColor', 'Text Color')}
|
||||
{textField(
|
||||
userMessageAvatarSrc,
|
||||
'userMessageAvatarSrc',
|
||||
'Avatar Link',
|
||||
'string',
|
||||
`https://raw.githubusercontent.com/zahidkhawaja/langchain-chat-nextjs/main/public/usericon.png`
|
||||
)}
|
||||
{booleanField(userMessageShowAvatar, 'userMessageShowAvatar', 'Show Avatar')}
|
||||
|
||||
{/*TEXT Input*/}
|
||||
<Typography variant='h4' sx={{ mb: 1, mt: 2 }}>
|
||||
Text Input
|
||||
</Typography>
|
||||
{colorField(textInputBackgroundColor, 'textInputBackgroundColor', 'Background Color')}
|
||||
{colorField(textInputTextColor, 'textInputTextColor', 'Text Color')}
|
||||
{textField(textInputPlaceholder, 'textInputPlaceholder', 'TextInput Placeholder', 'string', `Type question..`)}
|
||||
{colorField(textInputSendButtonColor, 'textInputSendButtonColor', 'TextIntput Send Button Color')}
|
||||
|
||||
<>
|
||||
<Typography variant='h4' sx={{ mb: 1, mt: 2 }}>
|
||||
Render HTML
|
||||
</Typography>
|
||||
<Card sx={{ borderColor: theme.palette.primary[200] + 75, p: 3, mt: 2 }} variant='outlined'>
|
||||
<Stack sx={{ mt: 1, mb: 2, alignItems: 'center' }} direction='row' spacing={2}>
|
||||
<Typography variant='h4'>General Settings</Typography>
|
||||
</Stack>
|
||||
{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')}
|
||||
{isAgentCanvas && booleanField(showAgentMessages, 'showAgentMessages', 'Show agent reasonings when using Agentflow')}
|
||||
{booleanField(renderHTML, 'renderHTML', 'Render HTML on the chat')}
|
||||
</>
|
||||
{isSessionMemory &&
|
||||
booleanField(generateNewSession, 'generateNewSession', 'Start new session when chatbot link is opened or refreshed')}
|
||||
</Card>
|
||||
|
||||
{/*Session Memory Input*/}
|
||||
{isSessionMemory && (
|
||||
<>
|
||||
<Typography variant='h4' sx={{ mb: 1, mt: 2 }}>
|
||||
Session Memory
|
||||
</Typography>
|
||||
{booleanField(generateNewSession, 'generateNewSession', 'Start new session when chatbot link is opened or refreshed')}
|
||||
</>
|
||||
)}
|
||||
<Card sx={{ borderColor: theme.palette.primary[200] + 75, p: 3, mt: 2 }} variant='outlined'>
|
||||
<Stack sx={{ mt: 1, mb: 2, alignItems: 'center' }} direction='row' spacing={2}>
|
||||
<Typography variant='h4'>Bot Message</Typography>
|
||||
</Stack>
|
||||
{colorField(botMessageBackgroundColor, 'botMessageBackgroundColor', 'Background Color')}
|
||||
{colorField(botMessageTextColor, 'botMessageTextColor', 'Text Color')}
|
||||
{textField(
|
||||
botMessageAvatarSrc,
|
||||
'botMessageAvatarSrc',
|
||||
'Avatar Link',
|
||||
'string',
|
||||
`https://raw.githubusercontent.com/zahidkhawaja/langchain-chat-nextjs/main/public/parroticon.png`
|
||||
)}
|
||||
{booleanField(botMessageShowAvatar, 'botMessageShowAvatar', 'Show Avatar')}
|
||||
</Card>
|
||||
|
||||
<StyledButton style={{ marginBottom: 10, marginTop: 10 }} variant='contained' onClick={() => onSave()}>
|
||||
<Card sx={{ borderColor: theme.palette.primary[200] + 75, p: 3, mt: 2 }} variant='outlined'>
|
||||
<Stack sx={{ mt: 1, mb: 2, alignItems: 'center' }} direction='row' spacing={2}>
|
||||
<Typography variant='h4'>User Message</Typography>
|
||||
</Stack>
|
||||
{colorField(userMessageBackgroundColor, 'userMessageBackgroundColor', 'Background Color')}
|
||||
{colorField(userMessageTextColor, 'userMessageTextColor', 'Text Color')}
|
||||
{textField(
|
||||
userMessageAvatarSrc,
|
||||
'userMessageAvatarSrc',
|
||||
'Avatar Link',
|
||||
'string',
|
||||
`https://raw.githubusercontent.com/zahidkhawaja/langchain-chat-nextjs/main/public/usericon.png`
|
||||
)}
|
||||
{booleanField(userMessageShowAvatar, 'userMessageShowAvatar', 'Show Avatar')}
|
||||
</Card>
|
||||
|
||||
<Card sx={{ borderColor: theme.palette.primary[200] + 75, p: 3, mt: 2 }} variant='outlined'>
|
||||
<Stack sx={{ mt: 1, mb: 2, alignItems: 'center' }} direction='row' spacing={2}>
|
||||
<Typography variant='h4'>Text Input</Typography>
|
||||
</Stack>
|
||||
{colorField(textInputBackgroundColor, 'textInputBackgroundColor', 'Background Color')}
|
||||
{colorField(textInputTextColor, 'textInputTextColor', 'Text Color')}
|
||||
{textField(textInputPlaceholder, 'textInputPlaceholder', 'TextInput Placeholder', 'string', `Type question..`)}
|
||||
{colorField(textInputSendButtonColor, 'textInputSendButtonColor', 'TextIntput Send Button Color')}
|
||||
</Card>
|
||||
|
||||
<StyledButton
|
||||
fullWidth
|
||||
style={{
|
||||
borderRadius: 20,
|
||||
marginBottom: 10,
|
||||
marginTop: 10,
|
||||
background: 'linear-gradient(45deg, #673ab7 30%, #1e88e5 90%)'
|
||||
}}
|
||||
variant='contained'
|
||||
onClick={() => onSave()}
|
||||
>
|
||||
Save Changes
|
||||
</StyledButton>
|
||||
<Popover
|
||||
|
||||
Generated
+34004
-34047
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user