Skip to content

Commit

Permalink
Feature/update share chatbot for adding title colors (#3823)
Browse files Browse the repository at this point in the history 
update share chatbot for adding title colors
  • Loading branch information
@HenryHengZJ
HenryHengZJ authored Jan 7, 2025
1 parent e429af1 commit b2224b9
Show file tree
Hide file tree
Showing 2 changed files with 33,964 additions and 33,979 deletions.
172 changes: 100 additions & 72 deletions packages/ui/src/views/chatflows/ShareChatbot.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -27,6 +27,8 @@ const defaultConfig = {
backgroundColor: '#ffffff',
fontSize: 16,
poweredByTextColor: '#303235',
titleBackgroundColor: '#3B81F6',
titleTextColor: '#ffffff',
botMessage: {
backgroundColor: '#f7f8ff',
textColor: '#303235'
Expand Down Expand Up @@ -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 ?? '')
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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)
}
Expand Down Expand Up @@ -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')}

{/*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'>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>

<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')}
</>

{/*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')}
</>
)}

<StyledButton style={{ marginBottom: 10, marginTop: 10 }} variant='contained' onClick={() => onSave()}>
{isSessionMemory &&
booleanField(generateNewSession, 'generateNewSession', 'Start new session when chatbot link is opened or refreshed')}
</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'>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>

<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
Expand Down
Loading

0 comments on commit b2224b9

Please sign in to comment.