}
+ */
+export const getApiKey = async (apiKey: string) => {
+ const existingAPIKeys = await getAPIKeys()
+ const keyIndex = existingAPIKeys.findIndex((key) => key.apiKey === apiKey)
+ if (keyIndex < 0) return undefined
+ return existingAPIKeys[keyIndex]
+}
+
/**
* Update existing API key
* @param {string} keyIdToUpdate
diff --git a/packages/ui/craco.config.js b/packages/ui/craco.config.js
new file mode 100644
index 00000000..142305e0
--- /dev/null
+++ b/packages/ui/craco.config.js
@@ -0,0 +1,16 @@
+module.exports = {
+ webpack: {
+ configure: {
+ module: {
+ rules: [
+ {
+ test: /\.m?js$/,
+ resolve: {
+ fullySpecified: false
+ }
+ }
+ ]
+ }
+ }
+ }
+}
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 258b5471..1e55f1c8 100644
--- a/packages/ui/package.json
+++ b/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",
- "dev": "react-scripts start",
- "build": "react-scripts build",
- "test": "react-scripts test",
- "eject": "react-scripts eject"
+ "start": "craco start",
+ "dev": "craco start",
+ "build": "craco build",
+ "test": "craco test",
+ "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",
diff --git a/packages/ui/src/api/chatflows.js b/packages/ui/src/api/chatflows.js
index 1cd1ebb0..8810b5a5 100644
--- a/packages/ui/src/api/chatflows.js
+++ b/packages/ui/src/api/chatflows.js
@@ -4,6 +4,8 @@ const getAllChatflows = () => client.get('/chatflows')
const getSpecificChatflow = (id) => client.get(`/chatflows/${id}`)
+const getSpecificChatflowFromPublicEndpoint = (id) => client.get(`/public-chatflows/${id}`)
+
const createNewChatflow = (body) => client.post(`/chatflows`, body)
const updateChatflow = (id, body) => client.put(`/chatflows/${id}`, body)
@@ -15,6 +17,7 @@ const getIsChatflowStreaming = (id) => client.get(`/chatflows-streaming/${id}`)
export default {
getAllChatflows,
getSpecificChatflow,
+ getSpecificChatflowFromPublicEndpoint,
createNewChatflow,
updateChatflow,
deleteChatflow,
diff --git a/packages/ui/src/assets/images/sharing.png b/packages/ui/src/assets/images/sharing.png
new file mode 100644
index 00000000..1e538f2e
Binary files /dev/null and b/packages/ui/src/assets/images/sharing.png differ
diff --git a/packages/ui/src/routes/ChatbotRoutes.js b/packages/ui/src/routes/ChatbotRoutes.js
new file mode 100644
index 00000000..25d298d6
--- /dev/null
+++ b/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: ,
+ children: [
+ {
+ path: '/chatbot/:id',
+ element:
+ }
+ ]
+}
+
+export default ChatbotRoutes
diff --git a/packages/ui/src/routes/index.js b/packages/ui/src/routes/index.js
index 15fe4dca..ff8c1920 100644
--- a/packages/ui/src/routes/index.js
+++ b/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)
}
diff --git a/packages/ui/src/views/canvas/CanvasHeader.js b/packages/ui/src/views/canvas/CanvasHeader.js
index 1f4a1f93..1c1e5212 100644
--- a/packages/ui/src/views/canvas/CanvasHeader.js
+++ b/packages/ui/src/views/canvas/CanvasHeader.js
@@ -1,6 +1,6 @@
import PropTypes from 'prop-types'
import { useNavigate } from 'react-router-dom'
-import { useSelector } from 'react-redux'
+import { useSelector, useDispatch } from 'react-redux'
import { useEffect, useRef, useState } from 'react'
// material-ui
@@ -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'
@@ -24,11 +24,13 @@ import useApi from 'hooks/useApi'
// utils
import { generateExportFlowData } from 'utils/genericHelper'
import { uiBaseURL } from 'store/constant'
+import { SET_CHATFLOW } from 'store/actions'
// ==============================|| CANVAS HEADER ||============================== //
const CanvasHeader = ({ chatflow, handleSaveFlow, handleDeleteFlow, handleLoadFlow }) => {
const theme = useTheme()
+ const dispatch = useDispatch()
const navigate = useNavigate()
const flowNameRef = useRef()
const settingsRef = useRef()
@@ -125,6 +127,7 @@ const CanvasHeader = ({ chatflow, handleSaveFlow, handleDeleteFlow, handleLoadFl
useEffect(() => {
if (updateChatflowApi.data) {
setFlowName(updateChatflowApi.data.name)
+ dispatch({ type: SET_CHATFLOW, chatflow: updateChatflowApi.data })
}
setEditingFlowName(false)
diff --git a/packages/ui/src/views/canvas/index.js b/packages/ui/src/views/canvas/index.js
index 2d71f03a..03098963 100644
--- a/packages/ui/src/views/canvas/index.js
+++ b/packages/ui/src/views/canvas/index.js
@@ -201,7 +201,7 @@ const Canvas = () => {
if (!chatflow.id) {
const newChatflowBody = {
name: chatflowName,
- deployed: false,
+ isPublic: false,
flowData
}
createNewChatflowApi.request(newChatflowBody)
diff --git a/packages/ui/src/views/chatbot/index.js b/packages/ui/src/views/chatbot/index.js
new file mode 100644
index 00000000..f29c35ee
--- /dev/null
+++ b/packages/ui/src/views/chatbot/index.js
@@ -0,0 +1,109 @@
+import { useEffect, useState } from 'react'
+import { FullPageChat } from 'flowise-embed-react'
+import { useNavigate } from 'react-router-dom'
+
+// Project import
+import LoginDialog from 'ui-component/dialog/LoginDialog'
+
+// API
+import chatflowsApi from 'api/chatflows'
+
+// Hooks
+import useApi from 'hooks/useApi'
+
+//Const
+import { baseURL } from 'store/constant'
+
+// ==============================|| Chatbot ||============================== //
+
+const ChatbotFull = () => {
+ const URLpath = document.location.pathname.toString().split('/')
+ const chatflowId = URLpath[URLpath.length - 1] === 'chatbot' ? '' : URLpath[URLpath.length - 1]
+ const navigate = useNavigate()
+
+ const [chatflow, setChatflow] = useState(null)
+ const [chatbotTheme, setChatbotTheme] = useState({})
+ const [loginDialogOpen, setLoginDialogOpen] = useState(false)
+ const [loginDialogProps, setLoginDialogProps] = useState({})
+ const [isLoading, setLoading] = useState(true)
+
+ const getSpecificChatflowFromPublicApi = useApi(chatflowsApi.getSpecificChatflowFromPublicEndpoint)
+ const getSpecificChatflowApi = useApi(chatflowsApi.getSpecificChatflow)
+
+ const onLoginClick = (username, password) => {
+ localStorage.setItem('username', username)
+ localStorage.setItem('password', password)
+ navigate(0)
+ }
+
+ useEffect(() => {
+ getSpecificChatflowFromPublicApi.request(chatflowId)
+
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [])
+
+ useEffect(() => {
+ if (getSpecificChatflowFromPublicApi.error) {
+ if (getSpecificChatflowFromPublicApi.error?.response?.status === 401) {
+ if (localStorage.getItem('username') && localStorage.getItem('password')) {
+ getSpecificChatflowApi.request(chatflowId)
+ } else {
+ setLoginDialogProps({
+ title: 'Login',
+ confirmButtonName: 'Login'
+ })
+ setLoginDialogOpen(true)
+ }
+ }
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [getSpecificChatflowFromPublicApi.error])
+
+ useEffect(() => {
+ if (getSpecificChatflowApi.error) {
+ if (getSpecificChatflowApi.error?.response?.status === 401) {
+ setLoginDialogProps({
+ title: 'Login',
+ confirmButtonName: 'Login'
+ })
+ setLoginDialogOpen(true)
+ }
+ }
+ }, [getSpecificChatflowApi.error])
+
+ useEffect(() => {
+ if (getSpecificChatflowFromPublicApi.data || getSpecificChatflowApi.data) {
+ const chatflowData = getSpecificChatflowFromPublicApi.data || getSpecificChatflowApi.data
+ setChatflow(chatflowData)
+ if (chatflowData.chatbotConfig) {
+ try {
+ setChatbotTheme(JSON.parse(chatflowData.chatbotConfig))
+ } catch (e) {
+ console.error(e)
+ setChatbotTheme({})
+ }
+ }
+ }
+ }, [getSpecificChatflowFromPublicApi.data, getSpecificChatflowApi.data])
+
+ useEffect(() => {
+ setLoading(getSpecificChatflowFromPublicApi.loading || getSpecificChatflowApi.loading)
+ }, [getSpecificChatflowFromPublicApi.loading, getSpecificChatflowApi.loading])
+
+ return (
+ <>
+ {!isLoading ? (
+ <>
+ {!chatflow || chatflow.apikeyid ? (
+ Invalid Chatbot
+ ) : (
+
+ )}
+
+
+ ) : null}
+
+ )
+}
+
+export default ChatbotFull
diff --git a/packages/ui/src/ui-component/dialog/APICodeDialog.js b/packages/ui/src/views/chatflows/APICodeDialog.js
similarity index 73%
rename from packages/ui/src/ui-component/dialog/APICodeDialog.js
rename to packages/ui/src/views/chatflows/APICodeDialog.js
index e64f4bf8..5e32c1d4 100644
--- a/packages/ui/src/ui-component/dialog/APICodeDialog.js
+++ b/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,18 @@ const getConfigExamplesForCurl = (configData, bodyType) => {
return finalStr
}
-const embedCode = (chatflowid) => {
- return ``
-}
-
-const embedCodeCustomization = (chatflowid) => {
- return ``
-}
-
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 getAllAPIKeysApi = useApi(apiKeyApi.getAllAPIKeys)
const updateChatflowApi = useApi(chatflowsApi.updateChatflow)
@@ -203,10 +147,6 @@ const APICodeDialog = ({ show, dialogProps, onCancel }) => {
}
}
- const onCheckBoxEmbedChatChanged = (newVal) => {
- setEmbedChatCheckbox(newVal)
- }
-
const onApiKeySelected = (keyValue) => {
if (keyValue === 'addnewkey') {
navigate('/apikey')
@@ -265,8 +205,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 +247,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 +254,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 +271,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
}
@@ -593,93 +531,70 @@ query({
))}
- {value !== 0 && (
-
- onApiKeySelected(newValue)}
- value={dialogProps.chatflowApiKeyId ?? chatflowApiKeyId ?? 'Choose an API key'}
- />
-
- )}
+
+ onApiKeySelected(newValue)}
+ value={dialogProps.chatflowApiKeyId ?? chatflowApiKeyId ?? 'Choose an API key'}
+ />
+
{codes.map((codeLang, index) => (
- {value === 0 && (
+ {(codeLang === 'Embed' || codeLang === 'Share Chatbot') && chatflowApiKeyId && (
<>
-
- Paste this anywhere in the {``} tag of your html file.
-
- You can also specify a
-
- version
-
- : {`https://cdn.jsdelivr.net/npm/flowise-embed@/dist/web.js`}
-
-
-
+ You cannot use API key while embedding/sharing chatbot.
+
+ Please select "No Authorization" from the dropdown at the top right corner.
+
)}
-
- {value !== 0 && }
- {value !== 0 && checkboxVal && getConfigApi.data && getConfigApi.data.length > 0 && (
+ {codeLang === 'Embed' && !chatflowApiKeyId && }
+ {codeLang !== 'Embed' && codeLang !== 'Share Chatbot' && (
<>
-
+
+ {checkboxVal && getConfigApi.data && getConfigApi.data.length > 0 && (
+ <>
+
+
+
+ )}
+ {getIsChatflowStreamingApi.data?.isStreaming && (
+
+ Read
+
+ here
+
+ on how to stream response back to application
+
+ )}
)}
- {value === 0 && (
-
- )}
- {value === 0 && embedChatCheckboxVal && (
-
- )}
- {value !== 0 && getIsChatflowStreamingApi.data?.isStreaming && (
-
- Read
-
- here
-
- on how to stream response back to application
-
- )}
+ {codeLang === 'Share Chatbot' && !chatflowApiKeyId && }
))}
diff --git a/packages/ui/src/views/chatflows/EmbedChat.js b/packages/ui/src/views/chatflows/EmbedChat.js
new file mode 100644
index 00000000..c6385efb
--- /dev/null
+++ b/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 (
+
+ {value === index && {children}}
+
+ )
+}
+
+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 ``
+}
+
+const embedPopupReactCode = (chatflowid) => {
+ return `import { BubbleChat } from 'flowise-embed-react'
+
+const App = () => {
+ return (
+
+ );
+};`
+}
+
+const embedFullpageHtmlCode = (chatflowid) => {
+ return `
+`
+}
+
+const embedFullpageReactCode = (chatflowid) => {
+ return `import { FullPageChat } from "flowise-embed-react"
+
+const App = () => {
+ return (
+
+ );
+};`
+}
+
+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 ``
+}
+
+const embedPopupReactCodeCustomization = (chatflowid) => {
+ return `import { BubbleChat } from 'flowise-embed-react'
+
+const App = () => {
+ return (
+
+ );
+};`
+}
+
+const embedFullpageHtmlCodeCustomization = (chatflowid) => {
+ return `
+`
+}
+
+const embedFullpageReactCodeCustomization = (chatflowid) => {
+ return `import { FullPageChat } from "flowise-embed-react"
+
+const App = () => {
+ return (
+
+ );
+};`
+}
+
+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 (
+ <>
+
+
+
+ {codes.map((codeLang, index) => (
+
+ ))}
+
+
+
{``} tag of your html file.
+
+ You can also specify a
+
+ version
+
+ : {`https://cdn.jsdelivr.net/npm/flowise-embed@/dist/web.js`}
+
+
+
+
+ )}
+
+
+
+
+ {embedChatCheckboxVal && (
+
+ )}
+
+ ))}
+
+ )
+}
+
+EmbedChat.propTypes = {
+ chatflowid: PropTypes.string
+}
+
+export default EmbedChat
diff --git a/packages/ui/src/views/chatflows/ShareChatbot.js b/packages/ui/src/views/chatflows/ShareChatbot.js
new file mode 100644
index 00000000..51e12e54
--- /dev/null
+++ b/packages/ui/src/views/chatflows/ShareChatbot.js
@@ -0,0 +1,473 @@
+import { useState } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { enqueueSnackbar as enqueueSnackbarAction, closeSnackbar as closeSnackbarAction, SET_CHATFLOW } 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'
+import { TooltipWithParser } from 'ui-component/tooltip/TooltipWithParser'
+
+// 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 = () => {
+ const dispatch = useDispatch()
+ const theme = useTheme()
+ const chatflow = useSelector((state) => state.canvas.chatflow)
+ const chatflowid = chatflow.id
+ const chatbotConfig = chatflow.chatbotConfig ? JSON.parse(chatflow.chatbotConfig) : {}
+
+ useNotifier()
+
+ const enqueueSnackbar = (...args) => dispatch(enqueueSnackbarAction(...args))
+ const closeSnackbar = (...args) => dispatch(closeSnackbarAction(...args))
+
+ const [isPublicChatflow, setChatflowIsPublic] = useState(chatflow.isPublic ?? false)
+
+ 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) => (
+
+ )
+ }
+ })
+ dispatch({ type: SET_CHATFLOW, chatflow: saveResp.data })
+ }
+ } 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) => (
+
+ )
+ }
+ })
+ }
+ }
+
+ const onSwitchChange = async (checked) => {
+ try {
+ const saveResp = await chatflowsApi.updateChatflow(chatflowid, { isPublic: checked })
+ if (saveResp.data) {
+ enqueueSnackbar({
+ message: 'Chatbot Configuration Saved',
+ options: {
+ key: new Date().getTime() + Math.random(),
+ variant: 'success',
+ action: (key) => (
+
+ )
+ }
+ })
+ dispatch({ type: SET_CHATFLOW, chatflow: saveResp.data })
+ }
+ } 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) => (
+
+ )
+ }
+ })
+ }
+ }
+
+ 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 (
+
+
+ {fieldLabel}
+ {
+ setSelectedColorConfig(fieldName)
+ setSketchPickerColor(color ?? '#ffffff')
+ setColorAnchorEl(event.currentTarget)
+ }}
+ >
+
+
+ )
+ }
+
+ const booleanField = (value, fieldName, fieldLabel) => {
+ return (
+
+
+ {fieldLabel}
+ {
+ onBooleanChanged(event.target.checked, fieldName)
+ }}
+ />
+
+
+ )
+ }
+
+ const textField = (message, fieldName, fieldLabel, fieldType = 'string', placeholder = '') => {
+ return (
+
+
+ {fieldLabel}
+ {
+ onTextChanged(e.target.value, fieldName)
+ }}
+ />
+
+
+ )
+ }
+
+ return (
+ <>
+
+
+ {`${baseURL}/chatbot/${chatflowid}`}
+
+ {
+ navigator.clipboard.writeText(`${baseURL}/chatbot/${chatflowid}`)
+ setCopyAnchorEl(event.currentTarget)
+ setTimeout(() => {
+ handleCloseCopyPopOver()
+ }, 1500)
+ }}
+ >
+
+
+ window.open(`${baseURL}/chatbot/${chatflowid}`, '_blank')}>
+
+
+
+
+ {
+ setChatflowIsPublic(event.target.checked)
+ onSwitchChange(event.target.checked)
+ }}
+ />
+ Make Public
+
+
+
+ {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*/}
+
+ Bot Message
+
+ {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*/}
+
+ User Message
+
+ {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*/}
+
+ Text Input
+
+ {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')}
+
+ onSave()}>
+ Save Changes
+
+
+ onColorSelected(color.hex)} />
+
+
+
+ Copied!
+
+
+
+ )
+}
+
+export default ShareChatbot
