Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Feature/update share chatbot for adding title colors #3823

Merged
merged 1 commit into from
Jan 7, 2025
Merged

Feature/update share chatbot for adding title colors #3823

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
172 changes: 100 additions & 72 deletions packages/ui/src/views/chatflows/ShareChatbot.jsx
View file
Open in desktop
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
Loading