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.

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

@@ -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) => {
+export const defaultThemeConfig = {
-    return isReact
+    button: {
-        ? `button: {
+        backgroundColor: '#3B81F6',
-                    backgroundColor: "#3B81F6",
+        right: 20,
-                    right: 20,
+        bottom: 20,
-                    bottom: 20,
+        size: 48,
-                    size: 48, // small | medium | large | number
+        dragAndDrop: true,
-                    dragAndDrop: true,
+        iconColor: 'white',
-                    iconColor: "white",
+        customIconSrc: 'https://raw.githubusercontent.com/walkxcode/dashboard-icons/main/svg/google-messages.svg',
-                    customIconSrc: "https://raw.githubusercontent.com/walkxcode/dashboard-icons/main/svg/google-messages.svg",
+        autoWindowOpen: {
-                    autoWindowOpen: {
+            autoOpen: true,
-                        autoOpen: true, //parameter to control automatic window opening
+            openDelay: 2,
-                        openDelay: 2, // Optional parameter for delay time in seconds
+            autoOpenOnMobile: false
-                        autoOpenOnMobile: false, //parameter to control automatic window opening in mobile
+        }
-                        },
+    },
-                }`
+    tooltip: {
-        : `button: {
+        showTooltip: true,
-                backgroundColor: "#3B81F6",
+        tooltipMessage: 'Hi There 👋!',
-                right: 20,
+        tooltipBackgroundColor: 'black',
-                bottom: 20,
+        tooltipTextColor: 'white',
-                size: 48, // small | medium | large | number
+        tooltipFontSize: 16
-                dragAndDrop: true,
+    },
-                iconColor: "white",
+    disclaimer: {
-                customIconSrc: "https://raw.githubusercontent.com/walkxcode/dashboard-icons/main/svg/google-messages.svg",
+        title: 'Disclaimer',
-                autoWindowOpen: {
+        message: 'By using this chatbot, you agree to the <a target="_blank" href="https://flowiseai.com/terms">Terms & Condition</a>',
-                    autoOpen: true, //parameter to control automatic window opening
+        textColor: 'black',
-                    openDelay: 2, // Optional parameter for delay time in seconds
+        buttonColor: '#3b82f6',
-                    autoOpenOnMobile: false, //parameter to control automatic window opening in mobile
+        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) => {
+const customStringify = (obj) => {
-    return isReact
+    let stringified = JSON.stringify(obj, null, 4)
-        ? `tooltip: {
+        .replace(/"([^"]+)":/g, '$1:')
-                    showTooltip: true,
+        .replace(/: "([^"]+)"/g, (match, value) => (value.includes('<') ? `: "${value}"` : `: '${value}'`))
-                    tooltipMessage: 'Hi There 👋!',
+        .replace(/: "(true|false|\d+)"/g, ': $1')
-                    tooltipBackgroundColor: 'black',
+        .replace(/customCSS: ""/g, 'customCSS: ``')
-                    tooltipTextColor: 'white',
+    return stringified
-                    tooltipFontSize: 16,
+        .split('\n')
-                }`
+        .map((line, index) => {
-        : `tooltip: {
+            if (index === 0) return line
-                showTooltip: true,
+            return ' '.repeat(8) + line
-                tooltipMessage: 'Hi There 👋!',
+        })
-                tooltipBackgroundColor: 'black',
+        .join('\n')
-                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 embedPopupHtmlCodeCustomization = (chatflowid) => {
@@ -243,13 +198,12 @@ const embedPopupHtmlCodeCustomization = (chatflowid) => {
         chatflowid: "${chatflowid}",
         apiHost: "${baseURL}",
         chatflowConfig: {
-            // topK: 2
+            /* Chatflow Config */
         },
-        theme: {
+        observersConfig: {
-            ${buttonConfig()},
+            /* Observers Config */
-            ${tooltipConfig()},
+        },
-            ${chatwindowConfig()}
+        theme: ${customStringify(defaultThemeConfig)}
-        }
     })
 </script>`
 }
@@ -262,14 +216,31 @@ const App = () => {
         <BubbleChat
             chatflowid="${chatflowid}"
             apiHost="${baseURL}"
-            theme={{
+            chatflowConfig={{
-                ${buttonConfig(true)},
+                /* Chatflow Config */
-                ${tooltipConfig(true)},
-                ${chatwindowConfig(true)}
             }}
+            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: {
+        chatflowConfig: {
-            ${chatwindowConfig()}
+            /* 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={{
+            chatflowConfig={{
-                ${chatwindowConfig(true)}
+                /* 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)
         }
     }