add full page chatbot and react chatbot

packages/server/src/Interface.ts

@@ -13,6 +13,7 @@ export interface IChatFlow {
     deployed: boolean
     updatedDate: Date
     createdDate: Date
+    chatbotConfig?: string
 }
 
 export interface IChatMessage {

packages/server/src/entity/ChatFlow.ts

@@ -19,6 +19,9 @@ export class ChatFlow implements IChatFlow {
     @Column()
     deployed: boolean
 
+    @Column({ nullable: true })
+    chatbotConfig?: string
+
     @CreateDateColumn()
     createdDate: Date
 

packages/ui/craco.config.js

@@ -0,0 +1,16 @@
+module.exports = {
+    webpack: {
+        configure: {
+            module: {
+                rules: [
+                    {
+                        test: /\.m?js$/,
+                        resolve: {
+                            fullySpecified: false
+                        }
+                    }
+                ]
+            }
+        }
+    }
+}

packages/ui/package.json

@@ -16,6 +16,8 @@
         "@mui/x-data-grid": "^6.8.0",
         "@tabler/icons": "^1.39.1",
         "clsx": "^1.1.1",
+        "flowise-embed": "*",
+        "flowise-embed-react": "*",
         "formik": "^2.2.6",
         "framer-motion": "^4.1.13",
         "history": "^5.0.0",
@@ -27,6 +29,7 @@
         "prop-types": "^15.7.2",
         "react": "^18.2.0",
         "react-code-blocks": "^0.0.9-0",
+        "react-color": "^2.19.3",
         "react-datepicker": "^4.8.0",
         "react-device-detect": "^1.17.0",
         "react-dom": "^18.2.0",
@@ -47,11 +50,11 @@
         "yup": "^0.32.9"
     },
     "scripts": {
-        "start": "react-scripts start",
+        "start": "craco start",
-        "dev": "react-scripts start",
+        "dev": "craco start",
-        "build": "react-scripts build",
+        "build": "craco build",
-        "test": "react-scripts test",
+        "test": "craco test",
-        "eject": "react-scripts eject"
+        "eject": "craco eject"
     },
     "babel": {
         "presets": [
@@ -72,6 +75,7 @@
     },
     "devDependencies": {
         "@babel/eslint-parser": "^7.15.8",
+        "@craco/craco": "^7.1.0",
         "@testing-library/jest-dom": "^5.11.10",
         "@testing-library/react": "^14.0.0",
         "@testing-library/user-event": "^12.8.3",

packages/ui/src/routes/ChatbotRoutes.js

@@ -0,0 +1,23 @@
+import { lazy } from 'react'
+
+// project imports
+import Loadable from 'ui-component/loading/Loadable'
+import MinimalLayout from 'layout/MinimalLayout'
+
+// canvas routing
+const ChatbotFull = Loadable(lazy(() => import('views/chatbot')))
+
+// ==============================|| CANVAS ROUTING ||============================== //
+
+const ChatbotRoutes = {
+    path: '/',
+    element: <MinimalLayout />,
+    children: [
+        {
+            path: '/chatbot/:id',
+            element: <ChatbotFull />
+        }
+    ]
+}
+
+export default ChatbotRoutes

packages/ui/src/routes/index.js

@@ -3,10 +3,11 @@ import { useRoutes } from 'react-router-dom'
 // routes
 import MainRoutes from './MainRoutes'
 import CanvasRoutes from './CanvasRoutes'
+import ChatbotRoutes from './ChatbotRoutes'
 import config from 'config'
 
 // ==============================|| ROUTING RENDER ||============================== //
 
 export default function ThemeRoutes() {
-    return useRoutes([MainRoutes, CanvasRoutes], config.basename)
+    return useRoutes([MainRoutes, CanvasRoutes, ChatbotRoutes], config.basename)
 }

packages/ui/src/views/canvas/CanvasHeader.js

@@ -13,7 +13,7 @@ import { IconSettings, IconChevronLeft, IconDeviceFloppy, IconPencil, IconCheck,
 // project imports
 import Settings from 'views/settings'
 import SaveChatflowDialog from 'ui-component/dialog/SaveChatflowDialog'
-import APICodeDialog from 'ui-component/dialog/APICodeDialog'
+import APICodeDialog from 'views/chatflows/APICodeDialog'
 
 // API
 import chatflowsApi from 'api/chatflows'
@@ -107,7 +107,8 @@ const CanvasHeader = ({ chatflow, handleSaveFlow, handleDeleteFlow, handleLoadFl
             title: 'Embed in website or use as API',
             chatflowid: chatflow.id,
             chatflowApiKeyId: chatflow.apikeyid,
-            isFormDataRequired
+            isFormDataRequired,
+            chatbotConfig: chatflow.chatbotConfig
         })
         setAPIDialogOpen(true)
     }

packages/ui/src/views/chatbot/index.js

@@ -0,0 +1,59 @@
+import { useEffect, useState } from 'react'
+import { baseURL } from 'store/constant'
+import axios from 'axios'
+import { FullPageChat } from 'flowise-embed-react'
+
+// ==============================|| Chatbot ||============================== //
+
+const fetchChatflow = async ({ chatflowId }) => {
+    const username = localStorage.getItem('username')
+    const password = localStorage.getItem('password')
+
+    let chatflow = await axios
+        .get(`${baseURL}/api/v1/chatflows/${chatflowId}`, { auth: username && password ? { username, password } : undefined })
+        .then(async function (response) {
+            return response.data
+        })
+        .catch(function (error) {
+            console.error(error)
+        })
+    return chatflow
+}
+
+const ChatbotFull = () => {
+    const URLpath = document.location.pathname.toString().split('/')
+    const chatflowId = URLpath[URLpath.length - 1] === 'chatbot' ? '' : URLpath[URLpath.length - 1]
+
+    const [chatflow, setChatflow] = useState(null)
+    const [chatbotTheme, setChatbotTheme] = useState({})
+
+    useEffect(() => {
+        ;(async () => {
+            const fetchData = async () => {
+                let response = await fetchChatflow({ chatflowId })
+                setChatflow(response)
+                if (response.chatbotConfig) {
+                    try {
+                        setChatbotTheme(JSON.parse(response.chatbotConfig))
+                    } catch (e) {
+                        console.error(e)
+                        setChatbotTheme({})
+                    }
+                }
+            }
+            fetchData()
+        })()
+    }, [chatflowId])
+
+    return (
+        <>
+            {!chatflow || chatflow.apikeyid ? (
+                <p>Invalid Chatbot</p>
+            ) : (
+                <FullPageChat chatflowid={chatflow.id} apiHost={baseURL} theme={{ chatWindow: chatbotTheme }} />
+            )}
+        </>
+    )
+}
+
+export default ChatbotFull

packages/ui/src/views/chatflows/APICodeDialog.js

@@ -9,6 +9,8 @@ import { CopyBlock, atomOneDark } from 'react-code-blocks'
 
 // Project import
 import { Dropdown } from 'ui-component/dropdown/Dropdown'
+import ShareChatbot from './ShareChatbot'
+import EmbedChat from './EmbedChat'
 
 // Const
 import { baseURL } from 'store/constant'
@@ -19,6 +21,7 @@ import pythonSVG from 'assets/images/python.svg'
 import javascriptSVG from 'assets/images/javascript.svg'
 import cURLSVG from 'assets/images/cURL.svg'
 import EmbedSVG from 'assets/images/embed.svg'
+import ShareChatbotSVG from 'assets/images/sharing.png'
 
 // API
 import apiKeyApi from 'api/apikey'
@@ -119,77 +122,19 @@ const getConfigExamplesForCurl = (configData, bodyType) => {
     return finalStr
 }
 
-const embedCode = (chatflowid) => {
-    return `<script type="module">
-    import Chatbot from "https://cdn.jsdelivr.net/npm/flowise-embed/dist/web.js"
-    Chatbot.init({
-        chatflowid: "${chatflowid}",
-        apiHost: "${baseURL}",
-    })
-</script>`
-}
-
-const embedCodeCustomization = (chatflowid) => {
-    return `<script type="module">
-    import Chatbot from "https://cdn.jsdelivr.net/npm/flowise-embed/dist/web.js"
-    Chatbot.init({
-        chatflowid: "${chatflowid}",
-        apiHost: "${baseURL}",
-        chatflowConfig: {
-            // topK: 2
-        },
-        theme: {
-            button: {
-                backgroundColor: "#3B81F6",
-                right: 20,
-                bottom: 20,
-                size: "medium",
-                iconColor: "white",
-                customIconSrc: "https://raw.githubusercontent.com/walkxcode/dashboard-icons/main/svg/google-messages.svg",
-            },
-            chatWindow: {
-                welcomeMessage: "Hello! This is custom welcome message",
-                backgroundColor: "#ffffff",
-                height: 700,
-                width: 400,
-                fontSize: 16,
-                poweredByTextColor: "#303235",
-                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",
-                }
-            }
-        }
-    })
-</script>`
-}
-
 const APICodeDialog = ({ show, dialogProps, onCancel }) => {
     const portalElement = document.getElementById('portal')
     const navigate = useNavigate()
     const dispatch = useDispatch()
-    const codes = ['Embed', 'Python', 'JavaScript', 'cURL']
+
+    const codes = ['Embed', 'Python', 'JavaScript', 'cURL', 'Share Chatbot']
     const [value, setValue] = useState(0)
     const [keyOptions, setKeyOptions] = useState([])
     const [apiKeys, setAPIKeys] = useState([])
     const [chatflowApiKeyId, setChatflowApiKeyId] = useState('')
     const [selectedApiKey, setSelectedApiKey] = useState({})
     const [checkboxVal, setCheckbox] = useState(false)
-    const [embedChatCheckboxVal, setEmbedChatCheckbox] = useState(false)
+    const [chatbotConfig, setChatbotConfig] = useState(null)
 
     const getAllAPIKeysApi = useApi(apiKeyApi.getAllAPIKeys)
     const updateChatflowApi = useApi(chatflowsApi.updateChatflow)
@@ -203,10 +148,6 @@ const APICodeDialog = ({ show, dialogProps, onCancel }) => {
         }
     }
 
-    const onCheckBoxEmbedChatChanged = (newVal) => {
-        setEmbedChatCheckbox(newVal)
-    }
-
     const onApiKeySelected = (keyValue) => {
         if (keyValue === 'addnewkey') {
             navigate('/apikey')
@@ -265,8 +206,6 @@ query({"question": "Hey, how are you?"}).then((response) => {
             return `curl ${baseURL}/api/v1/prediction/${dialogProps.chatflowid} \\
      -X POST \\
      -d '{"question": "Hey, how are you?"}'`
-        } else if (codeLang === 'Embed') {
-            return embedCode(dialogProps.chatflowid)
         }
         return ''
     }
@@ -309,8 +248,6 @@ query({"question": "Hey, how are you?"}).then((response) => {
      -X POST \\
      -d '{"question": "Hey, how are you?"}' \\
      -H "Authorization: Bearer ${selectedApiKey?.apiKey}"`
-        } else if (codeLang === 'Embed') {
-            return embedCode(dialogProps.chatflowid)
         }
         return ''
     }
@@ -318,7 +255,7 @@ query({"question": "Hey, how are you?"}).then((response) => {
     const getLang = (codeLang) => {
         if (codeLang === 'Python') {
             return 'python'
-        } else if (codeLang === 'JavaScript' || codeLang === 'Embed') {
+        } else if (codeLang === 'JavaScript') {
             return 'javascript'
         } else if (codeLang === 'cURL') {
             return 'bash'
@@ -335,6 +272,8 @@ query({"question": "Hey, how are you?"}).then((response) => {
             return EmbedSVG
         } else if (codeLang === 'cURL') {
             return cURLSVG
+        } else if (codeLang === 'Share Chatbot') {
+            return ShareChatbotSVG
         }
         return pythonSVG
     }
@@ -552,6 +491,12 @@ query({
                 setChatflowApiKeyId(dialogProps.chatflowApiKeyId)
                 setSelectedApiKey(getAllAPIKeysApi.data.find((key) => key.id === dialogProps.chatflowApiKeyId))
             }
+
+            if (dialogProps.chatbotConfig) {
+                setChatbotConfig(JSON.parse(dialogProps.chatbotConfig))
+            } else {
+                setChatbotConfig(null)
+            }
         }
     }, [dialogProps, getAllAPIKeysApi.data])
 
@@ -593,7 +538,6 @@ query({
                             ))}
                         </Tabs>
                     </div>
-                    {value !== 0 && (
                     <div style={{ flex: 20 }}>
                         <Dropdown
                             name='SelectKey'
@@ -603,30 +547,21 @@ query({
                             value={dialogProps.chatflowApiKeyId ?? chatflowApiKeyId ?? 'Choose an API key'}
                         />
                     </div>
-                    )}
                 </div>
                 <div style={{ marginTop: 10 }}></div>
                 {codes.map((codeLang, index) => (
                     <TabPanel key={index} value={value} index={index}>
-                        {value === 0 && (
+                        {(codeLang === 'Embed' || codeLang === 'Share Chatbot') && chatflowApiKeyId && (
                             <>
-                                <span>
+                                <p>You cannot use API key while embedding/sharing chatbot.</p>
-                                    Paste this anywhere in the <code>{`<body>`}</code> tag of your html file.
                                 <p>
-                                        You can also specify a&nbsp;
+                                    Please select <b>&quot;No Authorization&quot;</b> from the dropdown at the top right corner.
-                                        <a
-                                            rel='noreferrer'
-                                            target='_blank'
-                                            href='https://www.npmjs.com/package/flowise-embed?activeTab=versions'
-                                        >
-                                            version
-                                        </a>
-                                        :&nbsp;<code>{`https://cdn.jsdelivr.net/npm/flowise-embed@<version>/dist/web.js`}</code>
                                 </p>
-                                </span>
-                                <div style={{ height: 10 }}></div>
                             </>
                         )}
+                        {codeLang === 'Embed' && !chatflowApiKeyId && <EmbedChat chatflowid={dialogProps.chatflowid} />}
+                        {codeLang !== 'Embed' && codeLang !== 'Share Chatbot' && (
+                            <>
                                 <CopyBlock
                                     theme={atomOneDark}
                                     text={chatflowApiKeyId ? getCodeWithAuthorization(codeLang) : getCode(codeLang)}
@@ -634,8 +569,8 @@ query({
                                     showLineNumbers={false}
                                     wrapLines
                                 />
-                        {value !== 0 && <CheckboxInput label='Show Input Config' value={checkboxVal} onChange={onCheckBoxChanged} />}
+                                <CheckboxInput label='Show Input Config' value={checkboxVal} onChange={onCheckBoxChanged} />
-                        {value !== 0 && checkboxVal && getConfigApi.data && getConfigApi.data.length > 0 && (
+                                {checkboxVal && getConfigApi.data && getConfigApi.data.length > 0 && (
                                     <>
                                         <TableViewOnly rows={getConfigApi.data} columns={Object.keys(getConfigApi.data[0])} />
                                         <CopyBlock
@@ -655,23 +590,7 @@ query({
                                         />
                                     </>
                                 )}
-                        {value === 0 && (
+                                {getIsChatflowStreamingApi.data?.isStreaming && (
-                            <CheckboxInput
-                                label='Show Embed Chat Config'
-                                value={embedChatCheckboxVal}
-                                onChange={onCheckBoxEmbedChatChanged}
-                            />
-                        )}
-                        {value === 0 && embedChatCheckboxVal && (
-                            <CopyBlock
-                                theme={atomOneDark}
-                                text={embedCodeCustomization(dialogProps.chatflowid)}
-                                language={getLang('Embed')}
-                                showLineNumbers={false}
-                                wrapLines
-                            />
-                        )}
-                        {value !== 0 && getIsChatflowStreamingApi.data?.isStreaming && (
                                     <p>
                                         Read&nbsp;
                                         <a rel='noreferrer' target='_blank' href='https://docs.flowiseai.com/how-to-use#streaming'>
@@ -680,6 +599,11 @@ query({
                                         &nbsp;on how to stream response back to application
                                     </p>
                                 )}
+                            </>
+                        )}
+                        {codeLang === 'Share Chatbot' && !chatflowApiKeyId && (
+                            <ShareChatbot chatflowid={dialogProps.chatflowid} chatbotConfig={chatbotConfig} />
+                        )}
                     </TabPanel>
                 ))}
             </DialogContent>

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

@@ -0,0 +1,324 @@
+import { useState } from 'react'
+import PropTypes from 'prop-types'
+
+import { Tabs, Tab, Box } from '@mui/material'
+import { CopyBlock, atomOneDark } from 'react-code-blocks'
+
+// Project import
+import { CheckboxInput } from 'ui-component/checkbox/Checkbox'
+
+// Const
+import { baseURL } from 'store/constant'
+
+function TabPanel(props) {
+    const { children, value, index, ...other } = props
+    return (
+        <div
+            role='tabpanel'
+            hidden={value !== index}
+            id={`attachment-tabpanel-${index}`}
+            aria-labelledby={`attachment-tab-${index}`}
+            {...other}
+        >
+            {value === index && <Box sx={{ p: 1 }}>{children}</Box>}
+        </div>
+    )
+}
+
+TabPanel.propTypes = {
+    children: PropTypes.node,
+    index: PropTypes.number.isRequired,
+    value: PropTypes.number.isRequired
+}
+
+function a11yProps(index) {
+    return {
+        id: `attachment-tab-${index}`,
+        'aria-controls': `attachment-tabpanel-${index}`
+    }
+}
+
+const embedPopupHtmlCode = (chatflowid) => {
+    return `<script type="module">
+    import Chatbot from "https://cdn.jsdelivr.net/npm/flowise-embed/dist/web.js"
+    Chatbot.init({
+        chatflowid: "${chatflowid}",
+        apiHost: "${baseURL}",
+    })
+</script>`
+}
+
+const embedPopupReactCode = (chatflowid) => {
+    return `import { BubbleChat } from 'flowise-embed-react'
+
+const App = () => {
+    return (
+        <BubbleChat chatflowid="${chatflowid}" apiHost="${baseURL}" />
+    );
+};`
+}
+
+const embedFullpageHtmlCode = (chatflowid) => {
+    return `<flowise-fullchatbot></flowise-fullchatbot>
+<script type="module">
+    import Chatbot from "https://cdn.jsdelivr.net/npm/flowise-embed/dist/web.js"
+    Chatbot.initFull({
+        chatflowid: "${chatflowid}",
+        apiHost: "${baseURL}",
+    })
+</script>`
+}
+
+const embedFullpageReactCode = (chatflowid) => {
+    return `import { FullPageChat } from "flowise-embed-react"
+
+const App = () => {
+    return (
+        <FullPageChat
+            chatflowid="${chatflowid}"
+            apiHost="${baseURL}"
+        />
+    );
+};`
+}
+
+const buttonConfig = (isReact = false) => {
+    return isReact
+        ? `button: {
+                    backgroundColor: "#3B81F6",
+                    right: 20,
+                    bottom: 20,
+                    size: "medium",
+                    iconColor: "white",
+                    customIconSrc: "https://raw.githubusercontent.com/walkxcode/dashboard-icons/main/svg/google-messages.svg",
+                }`
+        : `button: {
+                backgroundColor: "#3B81F6",
+                right: 20,
+                bottom: 20,
+                size: "medium",
+                iconColor: "white",
+                customIconSrc: "https://raw.githubusercontent.com/walkxcode/dashboard-icons/main/svg/google-messages.svg",
+            }`
+}
+
+const chatwindowConfig = (isReact = false) => {
+    return isReact
+        ? `chatWindow: {
+                    welcomeMessage: "Hello! This is custom welcome message",
+                    backgroundColor: "#ffffff",
+                    height: 700,
+                    width: 400,
+                    fontSize: 16,
+                    poweredByTextColor: "#303235",
+                    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",
+                    }
+                }`
+        : `chatWindow: {
+                welcomeMessage: "Hello! This is custom welcome message",
+                backgroundColor: "#ffffff",
+                height: 700,
+                width: 400,
+                fontSize: 16,
+                poweredByTextColor: "#303235",
+                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",
+                }
+            }`
+}
+
+const embedPopupHtmlCodeCustomization = (chatflowid) => {
+    return `<script type="module">
+    import Chatbot from "https://cdn.jsdelivr.net/npm/flowise-embed/dist/web.js"
+    Chatbot.init({
+        chatflowid: "${chatflowid}",
+        apiHost: "${baseURL}",
+        chatflowConfig: {
+            // topK: 2
+        },
+        theme: {
+            ${buttonConfig()},
+            ${chatwindowConfig()}
+        }
+    })
+</script>`
+}
+
+const embedPopupReactCodeCustomization = (chatflowid) => {
+    return `import { BubbleChat } from 'flowise-embed-react'
+
+const App = () => {
+    return (
+        <BubbleChat
+            chatflowid="${chatflowid}"
+            apiHost="${baseURL}"
+            theme={{
+                ${buttonConfig(true)},
+                ${chatwindowConfig(true)}
+            }}
+        />
+    );
+};`
+}
+
+const embedFullpageHtmlCodeCustomization = (chatflowid) => {
+    return `<flowise-fullchatbot></flowise-fullchatbot>
+<script type="module">
+    import Chatbot from "https://cdn.jsdelivr.net/npm/flowise-embed/dist/web.js"
+    Chatbot.initFull({
+        chatflowid: "${chatflowid}",
+        apiHost: "${baseURL}",
+        theme: {
+            ${chatwindowConfig()}
+        }
+    })
+</script>`
+}
+
+const embedFullpageReactCodeCustomization = (chatflowid) => {
+    return `import { FullPageChat } from "flowise-embed-react"
+
+const App = () => {
+    return (
+        <FullPageChat
+            chatflowid="${chatflowid}"
+            apiHost="${baseURL}"
+            theme={{
+                ${chatwindowConfig(true)}
+            }}
+        />
+    );
+};`
+}
+
+const EmbedChat = ({ chatflowid }) => {
+    const codes = ['Popup Html', 'Fullpage Html', 'Popup React', 'Fullpage React']
+    const [value, setValue] = useState(0)
+    const [embedChatCheckboxVal, setEmbedChatCheckbox] = useState(false)
+
+    const onCheckBoxEmbedChatChanged = (newVal) => {
+        setEmbedChatCheckbox(newVal)
+    }
+
+    const handleChange = (event, newValue) => {
+        setValue(newValue)
+    }
+
+    const getCode = (codeLang) => {
+        switch (codeLang) {
+            case 'Popup Html':
+                return embedPopupHtmlCode(chatflowid)
+            case 'Fullpage Html':
+                return embedFullpageHtmlCode(chatflowid)
+            case 'Popup React':
+                return embedPopupReactCode(chatflowid)
+            case 'Fullpage React':
+                return embedFullpageReactCode(chatflowid)
+            default:
+                return ''
+        }
+    }
+
+    const getCodeCustomization = (codeLang) => {
+        switch (codeLang) {
+            case 'Popup Html':
+                return embedPopupHtmlCodeCustomization(chatflowid)
+            case 'Fullpage Html':
+                return embedFullpageHtmlCodeCustomization(chatflowid)
+            case 'Popup React':
+                return embedPopupReactCodeCustomization(chatflowid)
+            case 'Fullpage React':
+                return embedFullpageReactCodeCustomization(chatflowid)
+            default:
+                return ''
+        }
+    }
+
+    return (
+        <>
+            <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
+                <div style={{ flex: 80 }}>
+                    <Tabs value={value} onChange={handleChange} aria-label='tabs'>
+                        {codes.map((codeLang, index) => (
+                            <Tab key={index} label={codeLang} {...a11yProps(index)}></Tab>
+                        ))}
+                    </Tabs>
+                </div>
+            </div>
+            <div style={{ marginTop: 10 }}></div>
+            {codes.map((codeLang, index) => (
+                <TabPanel key={index} value={value} index={index}>
+                    {(value === 0 || value === 1) && (
+                        <>
+                            <span>
+                                Paste this anywhere in the <code>{`<body>`}</code> tag of your html file.
+                                <p>
+                                    You can also specify a&nbsp;
+                                    <a
+                                        rel='noreferrer'
+                                        target='_blank'
+                                        href='https://www.npmjs.com/package/flowise-embed?activeTab=versions'
+                                    >
+                                        version
+                                    </a>
+                                    :&nbsp;<code>{`https://cdn.jsdelivr.net/npm/flowise-embed@<version>/dist/web.js`}</code>
+                                </p>
+                            </span>
+                            <div style={{ height: 10 }}></div>
+                        </>
+                    )}
+                    <CopyBlock theme={atomOneDark} text={getCode(codeLang)} language='javascript' showLineNumbers={false} wrapLines />
+
+                    <CheckboxInput label='Show Embed Chat Config' value={embedChatCheckboxVal} onChange={onCheckBoxEmbedChatChanged} />
+
+                    {embedChatCheckboxVal && (
+                        <CopyBlock
+                            theme={atomOneDark}
+                            text={getCodeCustomization(codeLang)}
+                            language='javascript'
+                            showLineNumbers={false}
+                            wrapLines
+                        />
+                    )}
+                </TabPanel>
+            ))}
+        </>
+    )
+}
+
+EmbedChat.propTypes = {
+    chatflowid: PropTypes.string
+}
+
+export default EmbedChat

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

@@ -0,0 +1,420 @@
+import PropTypes from 'prop-types'
+import { useState } from 'react'
+import { useDispatch } from 'react-redux'
+import { enqueueSnackbar as enqueueSnackbarAction, closeSnackbar as closeSnackbarAction } from 'store/actions'
+import { SketchPicker } from 'react-color'
+
+import { Box, Typography, Button, Switch, OutlinedInput, Popover, Stack, IconButton } from '@mui/material'
+import { useTheme } from '@mui/material/styles'
+
+// Project import
+import { StyledButton } from 'ui-component/button/StyledButton'
+
+// Icons
+import { IconX, IconCopy, IconArrowUpRightCircle } from '@tabler/icons'
+
+// API
+import chatflowsApi from 'api/chatflows'
+
+// utils
+import useNotifier from 'utils/useNotifier'
+
+// Const
+import { baseURL } from 'store/constant'
+
+const defaultConfig = {
+    backgroundColor: '#ffffff',
+    fontSize: 16,
+    poweredByTextColor: '#303235',
+    botMessage: {
+        backgroundColor: '#f7f8ff',
+        textColor: '#303235'
+    },
+    userMessage: {
+        backgroundColor: '#3B81F6',
+        textColor: '#ffffff'
+    },
+    textInput: {
+        backgroundColor: '#ffffff',
+        textColor: '#303235',
+        sendButtonColor: '#3B81F6'
+    }
+}
+
+const ShareChatbot = ({ chatflowid, chatbotConfig }) => {
+    const dispatch = useDispatch()
+    const theme = useTheme()
+
+    useNotifier()
+
+    const enqueueSnackbar = (...args) => dispatch(enqueueSnackbarAction(...args))
+    const closeSnackbar = (...args) => dispatch(closeSnackbarAction(...args))
+
+    const [welcomeMessage, setWelcomeMessage] = useState(chatbotConfig?.welcomeMessage ?? '')
+    const [backgroundColor, setBackgroundColor] = useState(chatbotConfig?.backgroundColor ?? defaultConfig.backgroundColor)
+    const [fontSize, setFontSize] = useState(chatbotConfig?.fontSize ?? defaultConfig.fontSize)
+    const [poweredByTextColor, setPoweredByTextColor] = useState(chatbotConfig?.poweredByTextColor ?? defaultConfig.poweredByTextColor)
+
+    const [botMessageBackgroundColor, setBotMessageBackgroundColor] = useState(
+        chatbotConfig?.botMessage?.backgroundColor ?? defaultConfig.botMessage.backgroundColor
+    )
+    const [botMessageTextColor, setBotMessageTextColor] = useState(
+        chatbotConfig?.botMessage?.textColor ?? defaultConfig.botMessage.textColor
+    )
+    const [botMessageAvatarSrc, setBotMessageAvatarSrc] = useState(chatbotConfig?.botMessage?.avatarSrc ?? '')
+    const [botMessageShowAvatar, setBotMessageShowAvatar] = useState(chatbotConfig?.botMessage?.showAvatar ?? false)
+
+    const [userMessageBackgroundColor, setUserMessageBackgroundColor] = useState(
+        chatbotConfig?.userMessage?.backgroundColor ?? defaultConfig.userMessage.backgroundColor
+    )
+    const [userMessageTextColor, setUserMessageTextColor] = useState(
+        chatbotConfig?.userMessage?.textColor ?? defaultConfig.userMessage.textColor
+    )
+    const [userMessageAvatarSrc, setUserMessageAvatarSrc] = useState(chatbotConfig?.userMessage?.avatarSrc ?? '')
+    const [userMessageShowAvatar, setUserMessageShowAvatar] = useState(chatbotConfig?.userMessage?.showAvatar ?? false)
+
+    const [textInputBackgroundColor, setTextInputBackgroundColor] = useState(
+        chatbotConfig?.textInput?.backgroundColor ?? defaultConfig.textInput.backgroundColor
+    )
+    const [textInputTextColor, setTextInputTextColor] = useState(chatbotConfig?.textInput?.textColor ?? defaultConfig.textInput.textColor)
+    const [textInputPlaceholder, setTextInputPlaceholder] = useState(chatbotConfig?.textInput?.placeholder ?? '')
+    const [textInputSendButtonColor, setTextInputSendButtonColor] = useState(
+        chatbotConfig?.textInput?.sendButtonColor ?? defaultConfig.textInput.sendButtonColor
+    )
+
+    const [colorAnchorEl, setColorAnchorEl] = useState(null)
+    const [selectedColorConfig, setSelectedColorConfig] = useState('')
+    const [sketchPickerColor, setSketchPickerColor] = useState('')
+    const openColorPopOver = Boolean(colorAnchorEl)
+
+    const [copyAnchorEl, setCopyAnchorEl] = useState(null)
+    const openCopyPopOver = Boolean(copyAnchorEl)
+
+    const formatObj = () => {
+        const obj = {
+            botMessage: {
+                showAvatar: false
+            },
+            userMessage: {
+                showAvatar: false
+            },
+            textInput: {}
+        }
+        if (welcomeMessage) obj.welcomeMessage = welcomeMessage
+        if (backgroundColor) obj.backgroundColor = backgroundColor
+        if (fontSize) obj.fontSize = fontSize
+        if (poweredByTextColor) obj.poweredByTextColor = poweredByTextColor
+
+        if (botMessageBackgroundColor) obj.botMessage.backgroundColor = botMessageBackgroundColor
+        if (botMessageTextColor) obj.botMessage.textColor = botMessageTextColor
+        if (botMessageAvatarSrc) obj.botMessage.avatarSrc = botMessageAvatarSrc
+        if (botMessageShowAvatar) obj.botMessage.showAvatar = botMessageShowAvatar
+
+        if (userMessageBackgroundColor) obj.userMessage.backgroundColor = userMessageBackgroundColor
+        if (userMessageTextColor) obj.userMessage.textColor = userMessageTextColor
+        if (userMessageAvatarSrc) obj.userMessage.avatarSrc = userMessageAvatarSrc
+        if (userMessageShowAvatar) obj.userMessage.showAvatar = userMessageShowAvatar
+
+        if (textInputBackgroundColor) obj.textInput.backgroundColor = textInputBackgroundColor
+        if (textInputTextColor) obj.textInput.textColor = textInputTextColor
+        if (textInputPlaceholder) obj.textInput.placeholder = textInputPlaceholder
+        if (textInputSendButtonColor) obj.textInput.sendButtonColor = textInputSendButtonColor
+
+        return obj
+    }
+
+    const onSave = async () => {
+        try {
+            const saveResp = await chatflowsApi.updateChatflow(chatflowid, {
+                chatbotConfig: JSON.stringify(formatObj())
+            })
+            if (saveResp.data) {
+                enqueueSnackbar({
+                    message: 'Chatbot Configuration Saved',
+                    options: {
+                        key: new Date().getTime() + Math.random(),
+                        variant: 'success',
+                        action: (key) => (
+                            <Button style={{ color: 'white' }} onClick={() => closeSnackbar(key)}>
+                                <IconX />
+                            </Button>
+                        )
+                    }
+                })
+            }
+        } catch (error) {
+            console.error(error)
+            const errorData = error.response.data || `${error.response.status}: ${error.response.statusText}`
+            enqueueSnackbar({
+                message: `Failed to save Chatbot Configuration: ${errorData}`,
+                options: {
+                    key: new Date().getTime() + Math.random(),
+                    variant: 'error',
+                    persist: true,
+                    action: (key) => (
+                        <Button style={{ color: 'white' }} onClick={() => closeSnackbar(key)}>
+                            <IconX />
+                        </Button>
+                    )
+                }
+            })
+        }
+    }
+
+    const handleClosePopOver = () => {
+        setColorAnchorEl(null)
+    }
+
+    const handleCloseCopyPopOver = () => {
+        setCopyAnchorEl(null)
+    }
+
+    const onColorSelected = (hexColor) => {
+        switch (selectedColorConfig) {
+            case 'backgroundColor':
+                setBackgroundColor(hexColor)
+                break
+            case 'poweredByTextColor':
+                setPoweredByTextColor(hexColor)
+                break
+            case 'botMessageBackgroundColor':
+                setBotMessageBackgroundColor(hexColor)
+                break
+            case 'botMessageTextColor':
+                setBotMessageTextColor(hexColor)
+                break
+            case 'userMessageBackgroundColor':
+                setUserMessageBackgroundColor(hexColor)
+                break
+            case 'userMessageTextColor':
+                setUserMessageTextColor(hexColor)
+                break
+            case 'textInputBackgroundColor':
+                setTextInputBackgroundColor(hexColor)
+                break
+            case 'textInputTextColor':
+                setTextInputTextColor(hexColor)
+                break
+            case 'textInputSendButtonColor':
+                setTextInputSendButtonColor(hexColor)
+                break
+        }
+        setSketchPickerColor(hexColor)
+    }
+
+    const onTextChanged = (value, fieldName) => {
+        switch (fieldName) {
+            case 'welcomeMessage':
+                setWelcomeMessage(value)
+                break
+            case 'fontSize':
+                setFontSize(value)
+                break
+            case 'botMessageAvatarSrc':
+                setBotMessageAvatarSrc(value)
+                break
+            case 'userMessageAvatarSrc':
+                setUserMessageAvatarSrc(value)
+                break
+            case 'textInputPlaceholder':
+                setTextInputPlaceholder(value)
+                break
+        }
+    }
+
+    const onBooleanChanged = (value, fieldName) => {
+        switch (fieldName) {
+            case 'botMessageShowAvatar':
+                setBotMessageShowAvatar(value)
+                break
+            case 'userMessageShowAvatar':
+                setUserMessageShowAvatar(value)
+                break
+        }
+    }
+
+    const colorField = (color, fieldName, fieldLabel) => {
+        return (
+            <Box sx={{ pt: 2, pb: 2 }}>
+                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start' }}>
+                    <Typography sx={{ mb: 1 }}>{fieldLabel}</Typography>
+                    <Box
+                        sx={{
+                            cursor: 'pointer',
+                            width: '30px',
+                            height: '30px',
+                            border: '1px solid #616161',
+                            marginRight: '10px',
+                            backgroundColor: color ?? '#ffffff',
+                            borderRadius: '5px'
+                        }}
+                        onClick={(event) => {
+                            setSelectedColorConfig(fieldName)
+                            setSketchPickerColor(color ?? '#ffffff')
+                            setColorAnchorEl(event.currentTarget)
+                        }}
+                    ></Box>
+                </div>
+            </Box>
+        )
+    }
+
+    const booleanField = (value, fieldName, fieldLabel) => {
+        return (
+            <Box sx={{ pt: 2, pb: 2 }}>
+                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start' }}>
+                    <Typography sx={{ mb: 1 }}>{fieldLabel}</Typography>
+                    <Switch
+                        id={fieldName}
+                        checked={value}
+                        onChange={(event) => {
+                            onBooleanChanged(event.target.checked, fieldName)
+                        }}
+                    />
+                </div>
+            </Box>
+        )
+    }
+
+    const textField = (message, fieldName, fieldLabel, fieldType = 'string', placeholder = '') => {
+        return (
+            <Box sx={{ pt: 2, pb: 2 }}>
+                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start' }}>
+                    <Typography sx={{ mb: 1 }}>{fieldLabel}</Typography>
+                    <OutlinedInput
+                        id={fieldName}
+                        type={fieldType}
+                        fullWidth
+                        value={message}
+                        placeholder={placeholder}
+                        name={fieldName}
+                        onChange={(e) => {
+                            onTextChanged(e.target.value, fieldName)
+                        }}
+                    />
+                </div>
+            </Box>
+        )
+    }
+
+    return (
+        <>
+            <Stack direction='row'>
+                <Typography
+                    sx={{
+                        p: 1,
+                        borderRadius: 10,
+                        backgroundColor: theme.palette.primary.light,
+                        width: 'max-content',
+                        height: 'max-content'
+                    }}
+                    variant='h5'
+                >
+                    {`${baseURL}/chatbot/${chatflowid}`}
+                </Typography>
+                <IconButton
+                    title='Copy Link'
+                    color='success'
+                    onClick={(event) => {
+                        navigator.clipboard.writeText(`${baseURL}/chatbot/${chatflowid}`)
+                        setCopyAnchorEl(event.currentTarget)
+                        setTimeout(() => {
+                            handleCloseCopyPopOver()
+                        }, 1500)
+                    }}
+                >
+                    <IconCopy />
+                </IconButton>
+                <IconButton title='Open New Tab' color='primary' onClick={() => window.open(`${baseURL}/chatbot/${chatflowid}`, '_blank')}>
+                    <IconArrowUpRightCircle />
+                </IconButton>
+            </Stack>
+            {textField(welcomeMessage, 'welcomeMessage', 'Welcome Message', 'string', 'Hello! This is custom welcome message')}
+            {colorField(backgroundColor, 'backgroundColor', 'Background Color')}
+            {textField(fontSize, 'fontSize', 'Font Size', 'number')}
+            {colorField(poweredByTextColor, 'poweredByTextColor', 'PoweredBy TextColor')}
+
+            {/*BOT Message*/}
+            <Typography variant='h4' sx={{ mb: 1, mt: 2 }}>
+                Bot Message
+            </Typography>
+            {colorField(botMessageBackgroundColor, 'botMessageBackgroundColor', 'Background Color')}
+            {colorField(botMessageTextColor, 'botMessageTextColor', 'Text Color')}
+            {textField(
+                botMessageAvatarSrc,
+                'botMessageAvatarSrc',
+                'Avatar Link',
+                'string',
+                `https://raw.githubusercontent.com/zahidkhawaja/langchain-chat-nextjs/main/public/parroticon.png`
+            )}
+            {booleanField(botMessageShowAvatar, 'botMessageShowAvatar', 'Show Avatar')}
+
+            {/*USER Message*/}
+            <Typography variant='h4' sx={{ mb: 1, mt: 2 }}>
+                User Message
+            </Typography>
+            {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')}
+
+            {/*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')}
+
+            <StyledButton style={{ marginBottom: 10, marginTop: 10 }} variant='contained' onClick={() => onSave()}>
+                Save Changes
+            </StyledButton>
+            <Popover
+                open={openColorPopOver}
+                anchorEl={colorAnchorEl}
+                onClose={handleClosePopOver}
+                anchorOrigin={{
+                    vertical: 'top',
+                    horizontal: 'right'
+                }}
+                transformOrigin={{
+                    vertical: 'top',
+                    horizontal: 'left'
+                }}
+            >
+                <SketchPicker color={sketchPickerColor} onChange={(color) => onColorSelected(color.hex)} />
+            </Popover>
+            <Popover
+                open={openCopyPopOver}
+                anchorEl={copyAnchorEl}
+                onClose={handleCloseCopyPopOver}
+                anchorOrigin={{
+                    vertical: 'top',
+                    horizontal: 'right'
+                }}
+                transformOrigin={{
+                    vertical: 'top',
+                    horizontal: 'left'
+                }}
+            >
+                <Typography variant='h6' sx={{ pl: 1, pr: 1, color: 'white', background: theme.palette.success.dark }}>
+                    Copied!
+                </Typography>
+            </Popover>
+        </>
+    )
+}
+
+ShareChatbot.propTypes = {
+    chatflowid: PropTypes.string,
+    chatbotConfig: PropTypes.object
+}
+
+export default ShareChatbot