farcasclaudiu/Flowise
1
0
Fork 0
mirror of https://github.com/farcasclaudiu/Flowise.git synced 2026-06-28 17:01:00 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #449 from FlowiseAI/feature/FullPageChatbot-and-ReactChatbot

Browse Source 
Bugfix/Share Chatbot
This commit is contained in:
Henry Heng
2023-06-30 00:54:51 +01:00
committed by GitHub
parent 695deac9c9 7141401e26
commit 0b445acce8
13 changed files with 183 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/server/.env.example
+1
View File
@@ -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
+5 -5
View File
@@ -9,10 +9,10 @@ export interface IChatFlow {
id: string
name: string
flowData: string
apikeyid: string
deployed: boolean
isPublic: 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
func: string
schema?: string
func?: string
updatedDate: Date
createdDate: Date
}
packages/server/src/entity/ChatFlow.ts
+4 -4
View File
@@ -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
+1 -1
View File
@@ -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
+2 -2
View File
@@ -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
+11 -1
View File
@@ -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
+1 -1
View File
@@ -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
+3
View File
@@ -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
+5 -3
View File
@@ -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,
chatbotConfig: chatflow.chatbotConfig
isFormDataRequired
})
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
+1 -1
View File
@@ -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
+86 -36
View File
@@ -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 () => {
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({})
}
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)
}
}
fetchData()
})()
}, [chatflowId])
}
// 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 (
<>
{!chatflow || chatflow.apikeyid ? (
<p>Invalid Chatbot</p>
) : (
<FullPageChat chatflowid={chatflow.id} apiHost={baseURL} theme={{ chatWindow: chatbotTheme }} />
)}
{!isLoading ? (
<>
{!chatflow || chatflow.apikeyid ? (
<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
+1 -10
View File
@@ -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 && (
<ShareChatbot chatflowid={dialogProps.chatflowid} chatbotConfig={chatbotConfig} />
)}
{codeLang === 'Share Chatbot' && !chatflowApiKeyId && <ShareChatbot />}
</TabPanel>
))}
</DialogContent>
packages/ui/src/views/chatflows/ShareChatbot.js
+62 -9
View File
@@ -1,7 +1,6 @@
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 { 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'
@@ -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