Feature/update share chatbot for adding title colors (#3823)

update share chatbot for adding title colors

packages/ui/src/views/chatflows/ShareChatbot.jsx

@@ -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*/}
+            <Card sx={{ borderColor: theme.palette.primary[200] + 75, p: 3, mt: 2 }} variant='outlined'>
-            <Typography variant='h4' sx={{ mb: 1, mt: 2 }}>
+                <Stack sx={{ mt: 1, mb: 2, alignItems: 'center' }} direction='row' spacing={2}>
-                Bot Message
+                    <Typography variant='h4'>Title Settings</Typography>
-            </Typography>
+                </Stack>
-            {colorField(botMessageBackgroundColor, 'botMessageBackgroundColor', 'Background Color')}
+                {textField(title, 'title', 'Title', 'string', 'Flowise Assistant')}
-            {colorField(botMessageTextColor, 'botMessageTextColor', 'Text Color')}
+                {textField(
-            {textField(
+                    titleAvatarSrc,
-                botMessageAvatarSrc,
+                    'titleAvatarSrc',
-                'botMessageAvatarSrc',
+                    'Title Avatar Link',
-                'Avatar Link',
+                    'string',
-                'string',
+                    `https://raw.githubusercontent.com/FlowiseAI/Flowise/main/assets/FloWiseAI_dark.png`
-                `https://raw.githubusercontent.com/zahidkhawaja/langchain-chat-nextjs/main/public/parroticon.png`
+                )}
-            )}
+                {colorField(titleBackgroundColor, 'titleBackgroundColor', 'Title Background Color')}
-            {booleanField(botMessageShowAvatar, 'botMessageShowAvatar', 'Show Avatar')}
+                {colorField(titleTextColor, 'titleTextColor', 'Title TextColor')}
+            </Card>
 
-            {/*USER Message*/}
+            <Card sx={{ borderColor: theme.palette.primary[200] + 75, p: 3, mt: 2 }} variant='outlined'>
-            <Typography variant='h4' sx={{ mb: 1, mt: 2 }}>
+                <Stack sx={{ mt: 1, mb: 2, alignItems: 'center' }} direction='row' spacing={2}>
-                User Message
+                    <Typography variant='h4'>General Settings</Typography>
-            </Typography>
+                </Stack>
-            {colorField(userMessageBackgroundColor, 'userMessageBackgroundColor', 'Background Color')}
+                {textField(welcomeMessage, 'welcomeMessage', 'Welcome Message', 'string', 'Hello! This is custom welcome message')}
-            {colorField(userMessageTextColor, 'userMessageTextColor', 'Text Color')}
+                {textField(errorMessage, 'errorMessage', 'Error Message', 'string', 'This is custom error message')}
-            {textField(
+                {colorField(backgroundColor, 'backgroundColor', 'Background Color')}
-                userMessageAvatarSrc,
+                {textField(fontSize, 'fontSize', 'Font Size', 'number')}
-                'userMessageAvatarSrc',
+                {colorField(poweredByTextColor, 'poweredByTextColor', 'PoweredBy TextColor')}
-                'Avatar Link',
+                {isAgentCanvas && booleanField(showAgentMessages, 'showAgentMessages', 'Show agent reasonings when using Agentflow')}
-                '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>
                 {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*/}
+            <Card sx={{ borderColor: theme.palette.primary[200] + 75, p: 3, mt: 2 }} variant='outlined'>
-            {isSessionMemory && (
+                <Stack sx={{ mt: 1, mb: 2, alignItems: 'center' }} direction='row' spacing={2}>
-                <>
+                    <Typography variant='h4'>Bot Message</Typography>
-                    <Typography variant='h4' sx={{ mb: 1, mt: 2 }}>
+                </Stack>
-                        Session Memory
+                {colorField(botMessageBackgroundColor, 'botMessageBackgroundColor', 'Background Color')}
-                    </Typography>
+                {colorField(botMessageTextColor, 'botMessageTextColor', 'Text Color')}
-                    {booleanField(generateNewSession, 'generateNewSession', 'Start new session when chatbot link is opened or refreshed')}
+                {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