mirror of
https://github.com/farcasclaudiu/Flowise.git
synced 2026-06-23 23:00:35 +03:00
Enhanced Chat Embed Configuration View (#3559)
* Changes Made to Embed Chat Configuration 1. Consolidated multiple configuration functions into a single `defaultThemeConfig` object 2. Added full theme configuration support for both popup and fullpage modes 3. Fixed fullpage chat window sizing to use 100% height and width 4. Improved code formatting and readability * fix: replace empty customCSS quotes with backticks in theme configuration output * refactor: improve script output formatting for embed chat code * Fixed incorrect spacing in React component theme prop string templates.
This commit is contained in:
toi500
@@ -53,7 +53,10 @@ const embedPopupReactCode = (chatflowid) => {
|
||||
|
||||
const App = () => {
|
||||
return (
|
||||
<BubbleChat chatflowid="${chatflowid}" apiHost="${baseURL}" />
|
||||
<BubbleChat
|
||||
chatflowid="${chatflowid}"
|
||||
apiHost="${baseURL}"
|
||||
/>
|
||||
);
|
||||
};`
|
||||
}
|
||||
@@ -82,158 +85,110 @@ const App = () => {
|
||||
};`
|
||||
}
|
||||
|
||||
const buttonConfig = (isReact = false) => {
|
||||
return isReact
|
||||
? `button: {
|
||||
backgroundColor: "#3B81F6",
|
||||
right: 20,
|
||||
bottom: 20,
|
||||
size: 48, // small | medium | large | number
|
||||
dragAndDrop: true,
|
||||
iconColor: "white",
|
||||
customIconSrc: "https://raw.githubusercontent.com/walkxcode/dashboard-icons/main/svg/google-messages.svg",
|
||||
autoWindowOpen: {
|
||||
autoOpen: true, //parameter to control automatic window opening
|
||||
openDelay: 2, // Optional parameter for delay time in seconds
|
||||
autoOpenOnMobile: false, //parameter to control automatic window opening in mobile
|
||||
},
|
||||
}`
|
||||
: `button: {
|
||||
backgroundColor: "#3B81F6",
|
||||
right: 20,
|
||||
bottom: 20,
|
||||
size: 48, // small | medium | large | number
|
||||
dragAndDrop: true,
|
||||
iconColor: "white",
|
||||
customIconSrc: "https://raw.githubusercontent.com/walkxcode/dashboard-icons/main/svg/google-messages.svg",
|
||||
autoWindowOpen: {
|
||||
autoOpen: true, //parameter to control automatic window opening
|
||||
openDelay: 2, // Optional parameter for delay time in seconds
|
||||
autoOpenOnMobile: false, //parameter to control automatic window opening in mobile
|
||||
},
|
||||
}`
|
||||
export const defaultThemeConfig = {
|
||||
button: {
|
||||
backgroundColor: '#3B81F6',
|
||||
right: 20,
|
||||
bottom: 20,
|
||||
size: 48,
|
||||
dragAndDrop: true,
|
||||
iconColor: 'white',
|
||||
customIconSrc: 'https://raw.githubusercontent.com/walkxcode/dashboard-icons/main/svg/google-messages.svg',
|
||||
autoWindowOpen: {
|
||||
autoOpen: true,
|
||||
openDelay: 2,
|
||||
autoOpenOnMobile: false
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
showTooltip: true,
|
||||
tooltipMessage: 'Hi There 👋!',
|
||||
tooltipBackgroundColor: 'black',
|
||||
tooltipTextColor: 'white',
|
||||
tooltipFontSize: 16
|
||||
},
|
||||
disclaimer: {
|
||||
title: 'Disclaimer',
|
||||
message: 'By using this chatbot, you agree to the <a target="_blank" href="https://flowiseai.com/terms">Terms & Condition</a>',
|
||||
textColor: 'black',
|
||||
buttonColor: '#3b82f6',
|
||||
buttonText: 'Start Chatting',
|
||||
buttonTextColor: 'white',
|
||||
blurredBackgroundColor: 'rgba(0, 0, 0, 0.4)',
|
||||
backgroundColor: 'white'
|
||||
},
|
||||
customCSS: ``,
|
||||
chatWindow: {
|
||||
showTitle: true,
|
||||
showAgentMessages: true,
|
||||
title: 'Flowise Bot',
|
||||
titleAvatarSrc: 'https://raw.githubusercontent.com/walkxcode/dashboard-icons/main/svg/google-messages.svg',
|
||||
welcomeMessage: 'Hello! This is custom welcome message',
|
||||
errorMessage: 'This is a custom error message',
|
||||
backgroundColor: '#ffffff',
|
||||
backgroundImage: 'enter image path or link',
|
||||
height: 700,
|
||||
width: 400,
|
||||
fontSize: 16,
|
||||
starterPrompts: ['What is a bot?', 'Who are you?'],
|
||||
starterPromptFontSize: 15,
|
||||
clearChatOnReload: false,
|
||||
sourceDocsTitle: 'Sources:',
|
||||
renderHTML: true,
|
||||
botMessage: {
|
||||
backgroundColor: '#f7f8ff',
|
||||
textColor: '#303235',
|
||||
showAvatar: true,
|
||||
avatarSrc: 'https://raw.githubusercontent.com/zahidkhawaja/langchain-chat-nextjs/main/public/parroticon.png'
|
||||
},
|
||||
userMessage: {
|
||||
backgroundColor: '#3B81F6',
|
||||
textColor: '#ffffff',
|
||||
showAvatar: true,
|
||||
avatarSrc: 'https://raw.githubusercontent.com/zahidkhawaja/langchain-chat-nextjs/main/public/usericon.png'
|
||||
},
|
||||
textInput: {
|
||||
placeholder: 'Type your question',
|
||||
backgroundColor: '#ffffff',
|
||||
textColor: '#303235',
|
||||
sendButtonColor: '#3B81F6',
|
||||
maxChars: 50,
|
||||
maxCharsWarningMessage: 'You exceeded the characters limit. Please input less than 50 characters.',
|
||||
autoFocus: true,
|
||||
sendMessageSound: true,
|
||||
sendSoundLocation: 'send_message.mp3',
|
||||
receiveMessageSound: true,
|
||||
receiveSoundLocation: 'receive_message.mp3'
|
||||
},
|
||||
feedback: {
|
||||
color: '#303235'
|
||||
},
|
||||
dateTimeToggle: {
|
||||
date: true,
|
||||
time: true
|
||||
},
|
||||
footer: {
|
||||
textColor: '#303235',
|
||||
text: 'Powered by',
|
||||
company: 'Flowise',
|
||||
companyLink: 'https://flowiseai.com'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const tooltipConfig = (isReact = false) => {
|
||||
return isReact
|
||||
? `tooltip: {
|
||||
showTooltip: true,
|
||||
tooltipMessage: 'Hi There 👋!',
|
||||
tooltipBackgroundColor: 'black',
|
||||
tooltipTextColor: 'white',
|
||||
tooltipFontSize: 16,
|
||||
}`
|
||||
: `tooltip: {
|
||||
showTooltip: true,
|
||||
tooltipMessage: 'Hi There 👋!',
|
||||
tooltipBackgroundColor: 'black',
|
||||
tooltipTextColor: 'white',
|
||||
tooltipFontSize: 16,
|
||||
}`
|
||||
}
|
||||
|
||||
const chatwindowConfig = (isReact = false) => {
|
||||
return isReact
|
||||
? `chatWindow: {
|
||||
showTitle: true,
|
||||
title: 'Flowise Bot',
|
||||
titleAvatarSrc: 'https://raw.githubusercontent.com/walkxcode/dashboard-icons/main/svg/google-messages.svg',
|
||||
showAgentMessages: true,
|
||||
welcomeMessage: 'Hello! This is custom welcome message',
|
||||
errorMessage: 'This is a custom error message',
|
||||
backgroundColor: "#ffffff",
|
||||
backgroundImage: 'enter image path or link', // If set, this will overlap the background color of the chat window.
|
||||
height: 700,
|
||||
width: 400,
|
||||
fontSize: 16,
|
||||
//starterPrompts: ['What is a bot?', 'Who are you?'], // It overrides the starter prompts set by the chat flow passed
|
||||
starterPromptFontSize: 15,
|
||||
clearChatOnReload: false, // If set to true, the chat will be cleared when the page reloads.
|
||||
botMessage: {
|
||||
backgroundColor: "#f7f8ff",
|
||||
textColor: "#303235",
|
||||
showAvatar: true,
|
||||
avatarSrc: "https://raw.githubusercontent.com/zahidkhawaja/langchain-chat-nextjs/main/public/parroticon.png",
|
||||
},
|
||||
userMessage: {
|
||||
backgroundColor: "#3B81F6",
|
||||
textColor: "#ffffff",
|
||||
showAvatar: true,
|
||||
avatarSrc: "https://raw.githubusercontent.com/zahidkhawaja/langchain-chat-nextjs/main/public/usericon.png",
|
||||
},
|
||||
textInput: {
|
||||
placeholder: 'Type your question',
|
||||
backgroundColor: '#ffffff',
|
||||
textColor: '#303235',
|
||||
sendButtonColor: '#3B81F6',
|
||||
maxChars: 50,
|
||||
maxCharsWarningMessage: 'You exceeded the characters limit. Please input less than 50 characters.',
|
||||
autoFocus: true, // If not used, autofocus is disabled on mobile and enabled on desktop. true enables it on both, false disables it on both.
|
||||
sendMessageSound: true,
|
||||
// sendSoundLocation: "send_message.mp3", // If this is not used, the default sound effect will be played if sendSoundMessage is true.
|
||||
receiveMessageSound: true,
|
||||
// receiveSoundLocation: "receive_message.mp3", // If this is not used, the default sound effect will be played if receiveSoundMessage is true.
|
||||
},
|
||||
feedback: {
|
||||
color: '#303235',
|
||||
},
|
||||
footer: {
|
||||
textColor: '#303235',
|
||||
text: 'Powered by',
|
||||
company: 'Flowise',
|
||||
companyLink: 'https://flowiseai.com',
|
||||
}
|
||||
}`
|
||||
: `chatWindow: {
|
||||
showTitle: true,
|
||||
title: 'Flowise Bot',
|
||||
titleAvatarSrc: 'https://raw.githubusercontent.com/walkxcode/dashboard-icons/main/svg/google-messages.svg',
|
||||
showAgentMessages: true,
|
||||
welcomeMessage: 'Hello! This is custom welcome message',
|
||||
errorMessage: 'This is a custom error message',
|
||||
backgroundColor: "#ffffff",
|
||||
backgroundImage: 'enter image path or link', // If set, this will overlap the background color of the chat window.
|
||||
height: 700,
|
||||
width: 400,
|
||||
fontSize: 16,
|
||||
//starterPrompts: ['What is a bot?', 'Who are you?'], // It overrides the starter prompts set by the chat flow passed
|
||||
starterPromptFontSize: 15,
|
||||
clearChatOnReload: false, // If set to true, the chat will be cleared when the page reloads.
|
||||
botMessage: {
|
||||
backgroundColor: "#f7f8ff",
|
||||
textColor: "#303235",
|
||||
showAvatar: true,
|
||||
avatarSrc: "https://raw.githubusercontent.com/zahidkhawaja/langchain-chat-nextjs/main/public/parroticon.png",
|
||||
},
|
||||
userMessage: {
|
||||
backgroundColor: "#3B81F6",
|
||||
textColor: "#ffffff",
|
||||
showAvatar: true,
|
||||
avatarSrc: "https://raw.githubusercontent.com/zahidkhawaja/langchain-chat-nextjs/main/public/usericon.png",
|
||||
},
|
||||
textInput: {
|
||||
placeholder: 'Type your question',
|
||||
backgroundColor: '#ffffff',
|
||||
textColor: '#303235',
|
||||
sendButtonColor: '#3B81F6',
|
||||
maxChars: 50,
|
||||
maxCharsWarningMessage: 'You exceeded the characters limit. Please input less than 50 characters.',
|
||||
autoFocus: true, // If not used, autofocus is disabled on mobile and enabled on desktop. true enables it on both, false disables it on both.
|
||||
sendMessageSound: true,
|
||||
// sendSoundLocation: "send_message.mp3", // If this is not used, the default sound effect will be played if sendSoundMessage is true.
|
||||
receiveMessageSound: true,
|
||||
// receiveSoundLocation: "receive_message.mp3", // If this is not used, the default sound effect will be played if receiveSoundMessage is true.
|
||||
},
|
||||
feedback: {
|
||||
color: '#303235',
|
||||
},
|
||||
footer: {
|
||||
textColor: '#303235',
|
||||
text: 'Powered by',
|
||||
company: 'Flowise',
|
||||
companyLink: 'https://flowiseai.com',
|
||||
}
|
||||
}`
|
||||
const customStringify = (obj) => {
|
||||
let stringified = JSON.stringify(obj, null, 4)
|
||||
.replace(/"([^"]+)":/g, '$1:')
|
||||
.replace(/: "([^"]+)"/g, (match, value) => (value.includes('<') ? `: "${value}"` : `: '${value}'`))
|
||||
.replace(/: "(true|false|\d+)"/g, ': $1')
|
||||
.replace(/customCSS: ""/g, 'customCSS: ``')
|
||||
return stringified
|
||||
.split('\n')
|
||||
.map((line, index) => {
|
||||
if (index === 0) return line
|
||||
return ' '.repeat(8) + line
|
||||
})
|
||||
.join('\n')
|
||||
}
|
||||
|
||||
const embedPopupHtmlCodeCustomization = (chatflowid) => {
|
||||
@@ -243,13 +198,12 @@ const embedPopupHtmlCodeCustomization = (chatflowid) => {
|
||||
chatflowid: "${chatflowid}",
|
||||
apiHost: "${baseURL}",
|
||||
chatflowConfig: {
|
||||
// topK: 2
|
||||
/* Chatflow Config */
|
||||
},
|
||||
theme: {
|
||||
${buttonConfig()},
|
||||
${tooltipConfig()},
|
||||
${chatwindowConfig()}
|
||||
}
|
||||
observersConfig: {
|
||||
/* Observers Config */
|
||||
},
|
||||
theme: ${customStringify(defaultThemeConfig)}
|
||||
})
|
||||
</script>`
|
||||
}
|
||||
@@ -262,14 +216,31 @@ const App = () => {
|
||||
<BubbleChat
|
||||
chatflowid="${chatflowid}"
|
||||
apiHost="${baseURL}"
|
||||
theme={{
|
||||
${buttonConfig(true)},
|
||||
${tooltipConfig(true)},
|
||||
${chatwindowConfig(true)}
|
||||
chatflowConfig={{
|
||||
/* Chatflow Config */
|
||||
}}
|
||||
observersConfig={{
|
||||
/* Observers Config */
|
||||
}}
|
||||
theme={{${customStringify(defaultThemeConfig)
|
||||
.substring(1)
|
||||
.split('\n')
|
||||
.map((line) => ' '.repeat(4) + line)
|
||||
.join('\n')}
|
||||
/>
|
||||
);
|
||||
};`
|
||||
)
|
||||
}`
|
||||
}
|
||||
|
||||
const getFullPageThemeConfig = () => {
|
||||
return {
|
||||
...defaultThemeConfig,
|
||||
chatWindow: {
|
||||
...defaultThemeConfig.chatWindow,
|
||||
height: '100%',
|
||||
width: '100%'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const embedFullpageHtmlCodeCustomization = (chatflowid) => {
|
||||
@@ -279,27 +250,39 @@ const embedFullpageHtmlCodeCustomization = (chatflowid) => {
|
||||
Chatbot.initFull({
|
||||
chatflowid: "${chatflowid}",
|
||||
apiHost: "${baseURL}",
|
||||
theme: {
|
||||
${chatwindowConfig()}
|
||||
}
|
||||
chatflowConfig: {
|
||||
/* Chatflow Config */
|
||||
},
|
||||
observersConfig: {
|
||||
/* Observers Config */
|
||||
},
|
||||
theme: ${customStringify(getFullPageThemeConfig())}
|
||||
})
|
||||
</script>`
|
||||
}
|
||||
|
||||
const embedFullpageReactCodeCustomization = (chatflowid) => {
|
||||
return `import { FullPageChat } from "flowise-embed-react"
|
||||
return `import { FullPageChat } from 'flowise-embed-react'
|
||||
|
||||
const App = () => {
|
||||
return (
|
||||
<FullPageChat
|
||||
chatflowid="${chatflowid}"
|
||||
apiHost="${baseURL}"
|
||||
theme={{
|
||||
${chatwindowConfig(true)}
|
||||
chatflowConfig={{
|
||||
/* Chatflow Config */
|
||||
}}
|
||||
observersConfig={{
|
||||
/* Observers Config */
|
||||
}}
|
||||
theme={{${customStringify(getFullPageThemeConfig())
|
||||
.substring(1)
|
||||
.split('\n')
|
||||
.map((line) => ' '.repeat(4) + line)
|
||||
.join('\n')}
|
||||
/>
|
||||
);
|
||||
};`
|
||||
)
|
||||
}`
|
||||
}
|
||||
|
||||
const EmbedChat = ({ chatflowid }) => {
|
||||
@@ -341,7 +324,7 @@ const EmbedChat = ({ chatflowid }) => {
|
||||
case 'Fullpage React':
|
||||
return embedFullpageReactCodeCustomization(chatflowid)
|
||||
default:
|
||||
return ''
|
||||
return embedPopupHtmlCodeCustomization(chatflowid)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user