diff --git a/packages/ui/src/views/chatflows/EmbedChat.jsx b/packages/ui/src/views/chatflows/EmbedChat.jsx
index 03ddbe24..2c179664 100644
--- a/packages/ui/src/views/chatflows/EmbedChat.jsx
+++ b/packages/ui/src/views/chatflows/EmbedChat.jsx
@@ -53,7 +53,10 @@ const embedPopupReactCode = (chatflowid) => {
const App = () => {
return (
-
+
);
};`
}
@@ -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 Terms & Condition',
+ 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)}
})
`
}
@@ -262,14 +216,31 @@ const App = () => {
' '.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())}
})
`
}
const embedFullpageReactCodeCustomization = (chatflowid) => {
- return `import { FullPageChat } from "flowise-embed-react"
+ return `import { FullPageChat } from 'flowise-embed-react'
const App = () => {
return (
' '.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)
}
}