fix bug where share chatflow is not able to open on any other browser

packages/server/.env.example

@@ -3,4 +3,5 @@ PORT=3000
 # FLOWISE_PASSWORD=1234
 # DEBUG=true
 # DATABASE_PATH=/your_database_path/.flowise
+# APIKEY_PATH=/your_api_key_path/.flowise
 # EXECUTION_MODE=child or main

packages/server/src/Interface.ts

@@ -9,10 +9,10 @@ export interface IChatFlow {
     id: string
     name: string
     flowData: string
-    apikeyid: string
+    isPublic: boolean
-    deployed: boolean
     updatedDate: Date
     createdDate: Date
+    apikeyid?: string
     chatbotConfig?: string
 }
 
@@ -22,7 +22,7 @@ export interface IChatMessage {
     content: string
     chatflowid: string
     createdDate: Date
-    sourceDocuments: string
+    sourceDocuments?: string
 }
 
 export interface ITool {
@@ -30,8 +30,8 @@ export interface ITool {
     name: string
     description: string
     color: string
-    schema: string
+    schema?: string
-    func: string
+    func?: string
     updatedDate: Date
     createdDate: Date
 }

packages/server/src/entity/ChatFlow.ts

@@ -13,11 +13,11 @@ export class ChatFlow implements IChatFlow {
     @Column()
     flowData: string
 
-    @Column({ nullable: true })
-    apikeyid: string
-
     @Column()
-    deployed: boolean
+    isPublic: boolean
+
+    @Column({ nullable: true })
+    apikeyid?: string
 
     @Column({ nullable: true })
     chatbotConfig?: string

packages/server/src/entity/ChatMessage.ts

@@ -18,7 +18,7 @@ export class ChatMessage implements IChatMessage {
     content: string
 
     @Column({ nullable: true })
-    sourceDocuments: string
+    sourceDocuments?: string
 
     @CreateDateColumn()
     createdDate: Date

packages/server/src/entity/Tool.ts

@@ -17,10 +17,10 @@ export class Tool implements ITool {
     color: string
 
     @Column({ nullable: true })
-    schema: string
+    schema?: string
 
     @Column({ nullable: true })
-    func: string
+    func?: string
 
     @CreateDateColumn()
     createdDate: Date

packages/server/src/index.ts

@@ -92,7 +92,7 @@ export class App {
             const basicAuthMiddleware = basicAuth({
                 users: { [username]: password }
             })
-            const whitelistURLs = ['/api/v1/prediction/', '/api/v1/node-icon/', '/api/v1/chatflows-streaming']
+            const whitelistURLs = ['/api/v1/public-chatflows', '/api/v1/prediction/', '/api/v1/node-icon/', '/api/v1/chatflows-streaming']
             this.app.use((req, res, next) => {
                 if (req.url.includes('/api/v1/')) {
                     whitelistURLs.some((url) => req.url.includes(url)) ? next() : basicAuthMiddleware(req, res, next)
@@ -186,6 +186,16 @@ export class App {
             return res.status(404).send(`Chatflow ${req.params.id} not found`)
         })
 
+        // Get specific chatflow via id (PUBLIC endpoint, used when sharing chatbot link)
+        this.app.get('/api/v1/public-chatflows/:id', async (req: Request, res: Response) => {
+            const chatflow = await this.AppDataSource.getRepository(ChatFlow).findOneBy({
+                id: req.params.id
+            })
+            if (chatflow && chatflow.isPublic) return res.json(chatflow)
+            else if (chatflow && !chatflow.isPublic) return res.status(401).send(`Unauthorized`)
+            return res.status(404).send(`Chatflow ${req.params.id} not found`)
+        })
+
         // Save chatflow
         this.app.post('/api/v1/chatflows', async (req: Request, res: Response) => {
             const body = req.body

packages/server/src/utils/index.ts

@@ -463,7 +463,7 @@ export const isSameOverrideConfig = (
  * @returns {string}
  */
 export const getAPIKeyPath = (): string => {
-    return path.join(__dirname, '..', '..', 'api.json')
+    return process.env.APIKEY_PATH ? path.join(process.env.APIKEY_PATH, 'api.json') : path.join(__dirname, '..', '..', 'api.json')
 }
 
 /**

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,

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
@@ -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()
@@ -107,8 +109,7 @@ 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)
     }
@@ -126,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)
 

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)

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

@@ -1,57 +1,107 @@
 import { useEffect, useState } from 'react'
-import { baseURL } from 'store/constant'
-import axios from 'axios'
 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 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 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(() => {
-        ;(async () => {
+        getSpecificChatflowFromPublicApi.request(chatflowId)
-            const fetchData = async () => {
+
-                let response = await fetchChatflow({ chatflowId })
+        // eslint-disable-next-line react-hooks/exhaustive-deps
-                setChatflow(response)
+    }, [])
-                if (response.chatbotConfig) {
+
-                    try {
+    useEffect(() => {
-                        setChatbotTheme(JSON.parse(response.chatbotConfig))
+        if (getSpecificChatflowFromPublicApi.error) {
-                    } catch (e) {
+            if (getSpecificChatflowFromPublicApi.error?.response?.status === 401) {
-                        console.error(e)
+                if (localStorage.getItem('username') && localStorage.getItem('password')) {
-                        setChatbotTheme({})
+                    getSpecificChatflowApi.request(chatflowId)
-                    }
+                } else {
+                    setLoginDialogProps({
+                        title: 'Login',
+                        confirmButtonName: 'Login'
+                    })
+                    setLoginDialogOpen(true)
                 }
             }
-            fetchData()
+        }
-        })()
+        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [chatflowId])
+    }, [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 (
         <>
-            {!chatflow || chatflow.apikeyid ? (
+            {!isLoading ? (
-                <p>Invalid Chatbot</p>
+                <>
-            ) : (
+                    {!chatflow || chatflow.apikeyid ? (
-                <FullPageChat chatflowid={chatflow.id} apiHost={baseURL} theme={{ chatWindow: chatbotTheme }} />
+                        <p>Invalid Chatbot</p>
-            )}
+                    ) : (
+                        <FullPageChat chatflowid={chatflow.id} apiHost={baseURL} theme={{ chatWindow: chatbotTheme }} />
+                    )}
+                    <LoginDialog show={loginDialogOpen} dialogProps={loginDialogProps} onConfirm={onLoginClick} />
+                </>
+            ) : null}
         </>
     )
 }

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

@@ -134,7 +134,6 @@ const APICodeDialog = ({ show, dialogProps, onCancel }) => {
     const [chatflowApiKeyId, setChatflowApiKeyId] = useState('')
     const [selectedApiKey, setSelectedApiKey] = useState({})
     const [checkboxVal, setCheckbox] = useState(false)
-    const [chatbotConfig, setChatbotConfig] = useState(null)
 
     const getAllAPIKeysApi = useApi(apiKeyApi.getAllAPIKeys)
     const updateChatflowApi = useApi(chatflowsApi.updateChatflow)
@@ -491,12 +490,6 @@ 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])
 
@@ -601,9 +594,7 @@ query({
                                 )}
                             </>
                         )}
-                        {codeLang === 'Share Chatbot' && !chatflowApiKeyId && (
+                        {codeLang === 'Share Chatbot' && !chatflowApiKeyId && <ShareChatbot />}
-                            <ShareChatbot chatflowid={dialogProps.chatflowid} chatbotConfig={chatbotConfig} />
-                        )}
                     </TabPanel>
                 ))}
             </DialogContent>

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

@@ -1,7 +1,6 @@
-import PropTypes from 'prop-types'
 import { useState } from 'react'
-import { useDispatch } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
-import { enqueueSnackbar as enqueueSnackbarAction, closeSnackbar as closeSnackbarAction } from 'store/actions'
+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'
@@ -9,6 +8,7 @@ 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'
@@ -41,15 +41,20 @@ const defaultConfig = {
     }
 }
 
-const ShareChatbot = ({ chatflowid, chatbotConfig }) => {
+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)
@@ -141,6 +146,44 @@ const ShareChatbot = ({ chatflowid, chatbotConfig }) => {
                         )
                     }
                 })
+                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) => (
+                        <Button style={{ color: 'white' }} onClick={() => closeSnackbar(key)}>
+                            <IconX />
+                        </Button>
+                    )
+                }
+            })
+        }
+    }
+
+    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) => (
+                            <Button style={{ color: 'white' }} onClick={() => closeSnackbar(key)}>
+                                <IconX />
+                            </Button>
+                        )
+                    }
+                })
+                dispatch({ type: SET_CHATFLOW, chatflow: saveResp.data })
             }
         } catch (error) {
             console.error(error)
@@ -328,6 +371,21 @@ const ShareChatbot = ({ chatflowid, chatbotConfig }) => {
                 <IconButton title='Open New Tab' color='primary' onClick={() => window.open(`${baseURL}/chatbot/${chatflowid}`, '_blank')}>
                     <IconArrowUpRightCircle />
                 </IconButton>
+                <div style={{ flex: 1 }} />
+                <div style={{ display: 'flex', alignItems: 'center' }}>
+                    <Switch
+                        checked={isPublicChatflow}
+                        onChange={(event) => {
+                            setChatflowIsPublic(event.target.checked)
+                            onSwitchChange(event.target.checked)
+                        }}
+                    />
+                    <Typography>Make Public</Typography>
+                    <TooltipWithParser
+                        style={{ marginLeft: 10 }}
+                        title={'Making public will allow anyone to access the chatbot without username & password'}
+                    />
+                </div>
             </Stack>
             {textField(welcomeMessage, 'welcomeMessage', 'Welcome Message', 'string', 'Hello! This is custom welcome message')}
             {colorField(backgroundColor, 'backgroundColor', 'Background Color')}
@@ -412,9 +470,4 @@ const ShareChatbot = ({ chatflowid, chatbotConfig }) => {
     )
 }
 
-ShareChatbot.propTypes = {
-    chatflowid: PropTypes.string,
-    chatbotConfig: PropTypes.object
-}
-
 export default ShareChatbot