{
+ 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 [chatbotOverrideConfig, setChatbotOverrideConfig] = useState({})
+
+ 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 {
+ const parsedConfig = JSON.parse(chatflowData.chatbotConfig)
+ setChatbotTheme(parsedConfig)
+ if (parsedConfig.overrideConfig) {
+ // Generate new sessionId
+ if (parsedConfig.overrideConfig.generateNewSession) {
+ parsedConfig.overrideConfig.sessionId = Date.now().toString()
+ }
+ setChatbotOverrideConfig(parsedConfig.overrideConfig)
+ }
+ } catch (e) {
+ console.error(e)
+ setChatbotTheme({})
+ setChatbotOverrideConfig({})
+ }
+ }
+ }
+ }, [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 70%
rename from packages/ui/src/ui-component/dialog/APICodeDialog.js
rename to packages/ui/src/views/chatflows/APICodeDialog.js
index e64f4bf8..6ca605cd 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'
@@ -94,7 +97,7 @@ const getConfigExamplesForPython = (configData, bodyType) => {
if (config.type === 'string') exampleVal = `"example"`
else if (config.type === 'boolean') exampleVal = `true`
else if (config.type === 'number') exampleVal = `1`
- else if (config.name === 'files') exampleVal = `('example${config.type}', open('example${config.type}', 'rb'))`
+ else if (config.name === 'files') continue
finalStr += bodyType === 'json' ? `\n "${config.name}": ${exampleVal},` : `\n "${config.name}": ${exampleVal},`
if (i === loop - 1 && bodyType !== 'json') finalStr += `\n "question": "Hey, how are you?"\n`
}
@@ -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')
@@ -250,7 +190,10 @@ output = query({
"${baseURL}/api/v1/prediction/${dialogProps.chatflowid}",
{
method: "POST",
- body: data
+ headers: {
+ "Content-Type": "application/json"
+ },
+ body: JSON.stringify(data)
}
);
const result = await response.json();
@@ -264,9 +207,8 @@ query({"question": "Hey, how are you?"}).then((response) => {
} else if (codeLang === 'cURL') {
return `curl ${baseURL}/api/v1/prediction/${dialogProps.chatflowid} \\
-X POST \\
- -d '{"question": "Hey, how are you?"}'`
- } else if (codeLang === 'Embed') {
- return embedCode(dialogProps.chatflowid)
+ -d '{"question": "Hey, how are you?"}' \\
+ -H "Content-Type: application/json"`
}
return ''
}
@@ -291,9 +233,12 @@ output = query({
const response = await fetch(
"${baseURL}/api/v1/prediction/${dialogProps.chatflowid}",
{
- headers: { Authorization: "Bearer ${selectedApiKey?.apiKey}" },
+ headers: {
+ Authorization: "Bearer ${selectedApiKey?.apiKey}",
+ "Content-Type": "application/json"
+ },
method: "POST",
- body: data
+ body: JSON.stringify(data)
}
);
const result = await response.json();
@@ -308,9 +253,8 @@ query({"question": "Hey, how are you?"}).then((response) => {
return `curl ${baseURL}/api/v1/prediction/${dialogProps.chatflowid} \\
-X POST \\
-d '{"question": "Hey, how are you?"}' \\
+ -H "Content-Type: application/json" \\
-H "Authorization: Bearer ${selectedApiKey?.apiKey}"`
- } else if (codeLang === 'Embed') {
- return embedCode(dialogProps.chatflowid)
}
return ''
}
@@ -318,7 +262,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 +279,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
}
@@ -343,15 +289,20 @@ query({"question": "Hey, how are you?"}).then((response) => {
const getConfigCodeWithFormData = (codeLang, configData) => {
if (codeLang === 'Python') {
+ configData = unshiftFiles(configData)
+ const fileType = configData[0].type
return `import requests
API_URL = "${baseURL}/api/v1/prediction/${dialogProps.chatflowid}"
# use form data to upload files
-form_data = {${getConfigExamplesForPython(configData, 'formData')}}
+form_data = {
+ "files": ${`('example${fileType}', open('example${fileType}', 'rb'))`}
+}
+body_data = {${getConfigExamplesForPython(configData, 'formData')}}
def query(form_data):
- response = requests.post(API_URL, files=form_data)
+ response = requests.post(API_URL, files=form_data, data=body_data)
return response.json()
output = query(form_data)
@@ -378,7 +329,8 @@ query(formData).then((response) => {
`
} else if (codeLang === 'cURL') {
return `curl ${baseURL}/api/v1/prediction/${dialogProps.chatflowid} \\
- -X POST \\${getConfigExamplesForCurl(configData, 'formData')}`
+ -X POST \\${getConfigExamplesForCurl(configData, 'formData')} \\
+ -H "Content-Type: multipart/form-data"`
}
return ''
}
@@ -387,16 +339,21 @@ query(formData).then((response) => {
const getConfigCodeWithFormDataWithAuth = (codeLang, configData) => {
if (codeLang === 'Python') {
+ configData = unshiftFiles(configData)
+ const fileType = configData[0].type
return `import requests
API_URL = "${baseURL}/api/v1/prediction/${dialogProps.chatflowid}"
headers = {"Authorization": "Bearer ${selectedApiKey?.apiKey}"}
# use form data to upload files
-form_data = {${getConfigExamplesForPython(configData, 'formData')}}
+form_data = {
+ "files": ${`('example${fileType}', open('example${fileType}', 'rb'))`}
+}
+body_data = {${getConfigExamplesForPython(configData, 'formData')}}
def query(form_data):
- response = requests.post(API_URL, headers=headers, files=form_data)
+ response = requests.post(API_URL, headers=headers, files=form_data, data=body_data)
return response.json()
output = query(form_data)
@@ -425,6 +382,7 @@ query(formData).then((response) => {
} else if (codeLang === 'cURL') {
return `curl ${baseURL}/api/v1/prediction/${dialogProps.chatflowid} \\
-X POST \\${getConfigExamplesForCurl(configData, 'formData')} \\
+ -H "Content-Type: multipart/form-data" \\
-H "Authorization: Bearer ${selectedApiKey?.apiKey}"`
}
return ''
@@ -454,7 +412,10 @@ output = query({
"${baseURL}/api/v1/prediction/${dialogProps.chatflowid}",
{
method: "POST",
- body: data
+ headers: {
+ "Content-Type": "application/json"
+ },
+ body: JSON.stringify(data)
}
);
const result = await response.json();
@@ -472,7 +433,8 @@ query({
} else if (codeLang === 'cURL') {
return `curl ${baseURL}/api/v1/prediction/${dialogProps.chatflowid} \\
-X POST \\
- -d '{"question": "Hey, how are you?", "overrideConfig": {${getConfigExamplesForCurl(configData, 'json')}}'`
+ -d '{"question": "Hey, how are you?", "overrideConfig": {${getConfigExamplesForCurl(configData, 'json')}}' \\
+ -H "Content-Type: application/json"`
}
return ''
}
@@ -501,9 +463,12 @@ output = query({
const response = await fetch(
"${baseURL}/api/v1/prediction/${dialogProps.chatflowid}",
{
- headers: { Authorization: "Bearer ${selectedApiKey?.apiKey}" },
+ headers: {
+ Authorization: "Bearer ${selectedApiKey?.apiKey}",
+ "Content-Type": "application/json"
+ },
method: "POST",
- body: data
+ body: JSON.stringify(data)
}
);
const result = await response.json();
@@ -522,6 +487,7 @@ query({
return `curl ${baseURL}/api/v1/prediction/${dialogProps.chatflowid} \\
-X POST \\
-d '{"question": "Hey, how are you?", "overrideConfig": {${getConfigExamplesForCurl(configData, 'json')}}' \\
+ -H "Content-Type: application/json" \\
-H "Authorization: Bearer ${selectedApiKey?.apiKey}"`
}
return ''
@@ -593,92 +559,71 @@ 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..0f05c28a
--- /dev/null
+++ b/packages/ui/src/views/chatflows/ShareChatbot.js
@@ -0,0 +1,495 @@
+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 PropTypes from 'prop-types'
+
+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 = ({ isSessionMemory }) => {
+ 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 [generateNewSession, setGenerateNewSession] = useState(chatbotConfig?.generateNewSession ?? 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: {},
+ overrideConfig: {}
+ }
+ 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
+
+ if (isSessionMemory) obj.overrideConfig.generateNewSession = generateNewSession
+
+ 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
+ case 'generateNewSession':
+ setGenerateNewSession(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')}
+
+ {/*Session Memory Input*/}
+ {isSessionMemory && (
+ <>
+
+ Session Memory
+
+ {booleanField(generateNewSession, 'generateNewSession', 'Start new session when chatbot link is opened or refreshed')}
+
+ )}
+
+ onSave()}>
+ Save Changes
+
+
+ onColorSelected(color.hex)} />
+
+
+
+ Copied!
+
+
+
+ )
+}
+
+ShareChatbot.propTypes = {
+ isSessionMemory: PropTypes.bool
+}
+
+export default ShareChatbot
diff --git a/packages/ui/src/views/chatmessage/ChatExpandDialog.js b/packages/ui/src/views/chatmessage/ChatExpandDialog.js
index aa5cd504..1b2037a8 100644
--- a/packages/ui/src/views/chatmessage/ChatExpandDialog.js
+++ b/packages/ui/src/views/chatmessage/ChatExpandDialog.js
@@ -43,7 +43,7 @@ const ChatExpandDialog = ({ show, dialogProps, onClear, onCancel }) => {
)}
-
+
+# Flowise - Build LLM Apps Easily
+
+[](https://github.com/FlowiseAI/Flowise/releases)
+[](https://discord.gg/jbaHfsRVBW)
+[](https://twitter.com/FlowiseAI)
+[](https://star-history.com/#FlowiseAI/Flowise)
+[](https://github.com/FlowiseAI/Flowise/fork)
+
+
+ 
+