Skip to content

Commit

Permalink
Enhanced Chat Embed Configuration View (#3559)
Browse files Browse the repository at this point in the history
* 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.
  • Loading branch information
toi500 authored Nov 25, 2024
1 parent 7d9e151 commit af5e6b0
Showing 1 changed file with 155 additions and 172 deletions.
327 changes: 155 additions & 172 deletions packages/ui/src/views/chatflows/EmbedChat.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,10 @@ const embedPopupReactCode = (chatflowid) => {
const App = () => {
return (
<BubbleChat chatflowid="${chatflowid}" apiHost="${baseURL}" />
<BubbleChat
chatflowid="${chatflowid}"
apiHost="${baseURL}"
/>
);
};`
}
Expand Down Expand Up @@ -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
},
}`
}

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,
}`
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 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) => {
Expand All @@ -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>`
}
Expand All @@ -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) => {
Expand All @@ -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 }) => {
Expand Down Expand Up @@ -341,7 +324,7 @@ const EmbedChat = ({ chatflowid }) => {
case 'Fullpage React':
return embedFullpageReactCodeCustomization(chatflowid)
default:
return ''
return embedPopupHtmlCodeCustomization(chatflowid)
}
}

Expand Down

0 comments on commit af5e6b0

Please sign in to comment.