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

Merge branch 'main' into FEATURE/env-vars

Browse Source
This commit is contained in:
vinodkiran
2023-12-13 22:10:49 +05:30
parent ef3f1b34b1 6a17cdc315
commit 333c834698
10 changed files with 416 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/server/src/index.ts
+20 -2
View File
@@ -140,6 +140,7 @@ export class App {
'/api/v1/verify/apikey/',
'/api/v1/chatflows/apikey/',
'/api/v1/public-chatflows',
'/api/v1/public-chatbotConfig',
'/api/v1/prediction/',
'/api/v1/vector/upsert/',
'/api/v1/node-icon/',
@@ -202,7 +203,7 @@ export class App {
// Get component credential via name
this.app.get('/api/v1/components-credentials/:name', (req: Request, res: Response) => {
if (!req.params.name.includes('&')) {
if (!req.params.name.includes('&')) {
if (Object.prototype.hasOwnProperty.call(this.nodesPool.componentCredentials, req.params.name)) {
return res.json(this.nodesPool.componentCredentials[req.params.name])
} else {
@@ -210,7 +211,7 @@ export class App {
}
} else {
const returnResponse = []
for (const name of req.params.name.split('&')) {
for (const name of req.params.name.split('&')) {
if (Object.prototype.hasOwnProperty.call(this.nodesPool.componentCredentials, name)) {
returnResponse.push(this.nodesPool.componentCredentials[name])
} else {
@@ -330,6 +331,23 @@ export class App {
return res.status(404).send(`Chatflow ${req.params.id} not found`)
})
// Get specific chatflow chatbotConfig via id (PUBLIC endpoint, used to retrieve config for embedded chat)
// Safe as public endpoint as chatbotConfig doesn't contain sensitive credential
this.app.get('/api/v1/public-chatbotConfig/:id', async (req: Request, res: Response) => {
const chatflow = await this.AppDataSource.getRepository(ChatFlow).findOneBy({
id: req.params.id
})
if (chatflow && chatflow.chatbotConfig) {
try {
const parsedConfig = JSON.parse(chatflow.chatbotConfig)
return res.json(parsedConfig)
} catch (e) {
return res.status(500).send(`Error parsing Chatbot Config for Chatflow ${req.params.id}`)
}
}
return res.status(404).send(`Chatbot Config for 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/XSS.ts
+9 -2
View File
@@ -6,8 +6,15 @@ export function sanitizeMiddleware(req: Request, res: Response, next: NextFuncti
const decodedURI = decodeURI(req.url)
req.url = sanitizeHtml(decodedURI)
for (let p in req.query) {
req.query[p] = sanitizeHtml(req.query[p] as string)
if (Array.isArray(req.query[p])) {
const sanitizedQ = []
for (const q of req.query[p] as string[]) {
sanitizedQ.push(sanitizeHtml(q))
}
req.query[p] = sanitizedQ
} else {
req.query[p] = sanitizeHtml(req.query[p] as string)
}
}
next()
}
packages/ui/src/menu-items/settings.js
+9 -2
View File
@@ -1,8 +1,8 @@
// assets
import { IconTrash, IconFileUpload, IconFileExport, IconCopy, IconSearch, IconMessage } from '@tabler/icons'
import { IconTrash, IconFileUpload, IconFileExport, IconCopy, IconSearch, IconMessage, IconPictureInPictureOff } from '@tabler/icons'
// constant
const icons = { IconTrash, IconFileUpload, IconFileExport, IconCopy, IconSearch, IconMessage }
const icons = { IconTrash, IconFileUpload, IconFileExport, IconCopy, IconSearch, IconMessage, IconPictureInPictureOff }
// ==============================|| SETTINGS MENU ITEMS ||============================== //
@@ -11,6 +11,13 @@ const settings = {
title: '',
type: 'group',
children: [
{
id: 'conversationStarters',
title: 'Starter Prompts',
type: 'item',
url: '',
icon: icons.IconPictureInPictureOff
},
{
id: 'viewMessages',
title: 'View Messages',
packages/ui/src/ui-component/button/FlowListMenu.js
+28
View File
@@ -11,6 +11,7 @@ import FileCopyIcon from '@mui/icons-material/FileCopy'
import FileDownloadIcon from '@mui/icons-material/Downloading'
import FileDeleteIcon from '@mui/icons-material/Delete'
import FileCategoryIcon from '@mui/icons-material/Category'
import PictureInPictureAltIcon from '@mui/icons-material/PictureInPictureAlt'
import Button from '@mui/material/Button'
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'
import { IconX } from '@tabler/icons'
@@ -27,6 +28,7 @@ import TagDialog from '../dialog/TagDialog'
import { generateExportFlowData } from '../../utils/genericHelper'
import useNotifier from '../../utils/useNotifier'
import StarterPromptsDialog from '../dialog/StarterPromptsDialog'
const StyledMenu = styled((props) => (
<Menu
@@ -78,6 +80,8 @@ export default function FlowListMenu({ chatflow, updateFlowsApi }) {
const [categoryDialogProps, setCategoryDialogProps] = useState({})
const [anchorEl, setAnchorEl] = useState(null)
const open = Boolean(anchorEl)
const [conversationStartersDialogOpen, setConversationStartersDialogOpen] = useState(false)
const [conversationStartersDialogProps, setConversationStartersDialogProps] = useState({})
const handleClick = (event) => {
setAnchorEl(event.currentTarget)
@@ -92,6 +96,20 @@ export default function FlowListMenu({ chatflow, updateFlowsApi }) {
setFlowDialogOpen(true)
}
const handleFlowStarterPrompts = () => {
setAnchorEl(null)
setConversationStartersDialogProps({
title: 'Starter Prompts - ' + chatflow.name,
chatflow: chatflow
})
setConversationStartersDialogOpen(true)
}
const saveFlowStarterPrompts = async () => {
setConversationStartersDialogOpen(false)
await updateFlowsApi.request()
}
const saveFlowRename = async (chatflowName) => {
const updateBody = {
name: chatflowName,
@@ -253,6 +271,10 @@ export default function FlowListMenu({ chatflow, updateFlowsApi }) {
Export
</MenuItem>
<Divider sx={{ my: 0.5 }} />
<MenuItem onClick={handleFlowStarterPrompts} disableRipple>
<PictureInPictureAltIcon />
Starter Prompts
</MenuItem>
<MenuItem onClick={handleFlowCategory} disableRipple>
<FileCategoryIcon />
Update Category
@@ -279,6 +301,12 @@ export default function FlowListMenu({ chatflow, updateFlowsApi }) {
onClose={() => setCategoryDialogOpen(false)}
onSubmit={saveFlowCategory}
/>
<StarterPromptsDialog
show={conversationStartersDialogOpen}
dialogProps={conversationStartersDialogProps}
onConfirm={saveFlowStarterPrompts}
onCancel={() => setConversationStartersDialogOpen(false)}
/>
</div>
)
}
packages/ui/src/ui-component/cards/StarterPromptsCard.css
+14
View File
@@ -0,0 +1,14 @@
.button-container {
position: absolute;
bottom: 0;
z-index: 1000;
display: flex;
overflow-x: auto;
-webkit-overflow-scrolling: touch; /* For momentum scroll on mobile devices */
scrollbar-width: none; /* For Firefox */
}
.button {
flex: 0 0 auto; /* Don't grow, don't shrink, base width on content */
margin: 5px; /* Adjust as needed for spacing between buttons */
}
packages/ui/src/ui-component/cards/StarterPromptsCard.js
+22
View File
@@ -0,0 +1,22 @@
import Box from '@mui/material/Box'
import PropTypes from 'prop-types'
import { Chip } from '@mui/material'
import './StarterPromptsCard.css'
const StarterPromptsCard = ({ isGrid, starterPrompts, onPromptClick }) => {
return (
<Box className={'button-container'} sx={{ maxWidth: isGrid ? 'inherit' : '400px', m: 1 }}>
{starterPrompts.map((sp, index) => (
<Chip label={sp.prompt} className={'button'} key={index} onClick={(e) => onPromptClick(sp.prompt, e)} />
))}
</Box>
)
}
StarterPromptsCard.propTypes = {
isGrid: PropTypes.bool,
starterPrompts: PropTypes.arrayOf(PropTypes.string),
onPromptClick: PropTypes.func
}
export default StarterPromptsCard
packages/ui/src/ui-component/dialog/StarterPromptsDialog.js
+252
View File
@@ -0,0 +1,252 @@
import { createPortal } from 'react-dom'
import { useDispatch } from 'react-redux'
import { useState, useEffect } from 'react'
import PropTypes from 'prop-types'
import { enqueueSnackbar as enqueueSnackbarAction, closeSnackbar as closeSnackbarAction, SET_CHATFLOW } from 'store/actions'
// material-ui
import {
Button,
IconButton,
Dialog,
DialogContent,
OutlinedInput,
DialogTitle,
DialogActions,
Box,
List,
InputAdornment
} from '@mui/material'
import { IconX, IconTrash, IconPlus, IconBulb } from '@tabler/icons'
// Project import
import { StyledButton } from 'ui-component/button/StyledButton'
// store
import { HIDE_CANVAS_DIALOG, SHOW_CANVAS_DIALOG } from 'store/actions'
import useNotifier from 'utils/useNotifier'
// API
import chatflowsApi from 'api/chatflows'
const StarterPromptsDialog = ({ show, dialogProps, onCancel, onConfirm }) => {
const portalElement = document.getElementById('portal')
const dispatch = useDispatch()
useNotifier()
const enqueueSnackbar = (...args) => dispatch(enqueueSnackbarAction(...args))
const closeSnackbar = (...args) => dispatch(closeSnackbarAction(...args))
const [inputFields, setInputFields] = useState([
{
prompt: ''
}
])
const [chatbotConfig, setChatbotConfig] = useState({})
const addInputField = () => {
setInputFields([
...inputFields,
{
prompt: ''
}
])
}
const removeInputFields = (index) => {
const rows = [...inputFields]
rows.splice(index, 1)
setInputFields(rows)
}
const handleChange = (index, evnt) => {
const { name, value } = evnt.target
const list = [...inputFields]
list[index][name] = value
setInputFields(list)
}
const onSave = async () => {
try {
let value = {
starterPrompts: {
...inputFields
}
}
chatbotConfig.starterPrompts = value.starterPrompts
const saveResp = await chatflowsApi.updateChatflow(dialogProps.chatflow.id, {
chatbotConfig: JSON.stringify(chatbotConfig)
})
if (saveResp.data) {
enqueueSnackbar({
message: 'Conversation Starter Prompts 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 })
}
onConfirm()
} catch (error) {
const errorData = error.response.data || `${error.response.status}: ${error.response.statusText}`
enqueueSnackbar({
message: `Failed to save Conversation Starter Prompts: ${errorData}`,
options: {
key: new Date().getTime() + Math.random(),
variant: 'error',
persist: true,
action: (key) => (
<Button style={{ color: 'white' }} onClick={() => closeSnackbar(key)}>
<IconX />
</Button>
)
}
})
}
}
useEffect(() => {
if (dialogProps.chatflow && dialogProps.chatflow.chatbotConfig) {
try {
let chatbotConfig = JSON.parse(dialogProps.chatflow.chatbotConfig)
setChatbotConfig(chatbotConfig || {})
if (chatbotConfig.starterPrompts) {
let inputFields = []
Object.getOwnPropertyNames(chatbotConfig.starterPrompts).forEach((key) => {
if (chatbotConfig.starterPrompts[key]) {
inputFields.push(chatbotConfig.starterPrompts[key])
}
})
setInputFields(inputFields)
} else {
setInputFields([
{
prompt: ''
}
])
}
} catch (e) {
setInputFields([
{
prompt: ''
}
])
}
}
return () => {}
}, [dialogProps])
useEffect(() => {
if (show) dispatch({ type: SHOW_CANVAS_DIALOG })
else dispatch({ type: HIDE_CANVAS_DIALOG })
return () => dispatch({ type: HIDE_CANVAS_DIALOG })
}, [show, dispatch])
const component = show ? (
<Dialog
onClose={onCancel}
open={show}
fullWidth
maxWidth='sm'
aria-labelledby='alert-dialog-title'
aria-describedby='alert-dialog-description'
>
<DialogTitle sx={{ fontSize: '1rem' }} id='alert-dialog-title'>
{dialogProps.title || 'Conversation Starter Prompts'}
</DialogTitle>
<DialogContent>
<div
style={{
display: 'flex',
flexDirection: 'column',
borderRadius: 10,
background: '#d8f3dc',
padding: 10
}}
>
<div
style={{
display: 'flex',
flexDirection: 'row',
alignItems: 'center'
}}
>
<IconBulb size={30} color='#2d6a4f' />
<span style={{ color: '#2d6a4f', marginLeft: 10, fontWeight: 500 }}>
Starter prompts will only be shown when there is no messages on the chat
</span>
</div>
</div>
<Box sx={{ '& > :not(style)': { m: 1 }, pt: 2 }}>
<List>
{inputFields.map((data, index) => {
return (
<div key={index} style={{ display: 'flex', width: '100%' }}>
<Box sx={{ width: '95%', mb: 1 }}>
<OutlinedInput
sx={{ width: '100%' }}
key={index}
type='text'
onChange={(e) => handleChange(index, e)}
size='small'
value={data.prompt}
name='prompt'
endAdornment={
<InputAdornment position='end' sx={{ padding: '2px' }}>
{inputFields.length > 1 && (
<IconButton
sx={{ height: 30, width: 30 }}
size='small'
color='error'
disabled={inputFields.length === 1}
onClick={() => removeInputFields(index)}
edge='end'
>
<IconTrash />
</IconButton>
)}
</InputAdornment>
}
/>
</Box>
<Box sx={{ width: '5%', mb: 1 }}>
{index === inputFields.length - 1 && (
<IconButton color='primary' onClick={addInputField}>
<IconPlus />
</IconButton>
)}
</Box>
</div>
)
})}
</List>
</Box>
</DialogContent>
<DialogActions>
<Button onClick={onCancel}>Cancel</Button>
<StyledButton variant='contained' onClick={onSave}>
Save
</StyledButton>
</DialogActions>
</Dialog>
) : null
return createPortal(component, portalElement)
}
StarterPromptsDialog.propTypes = {
show: PropTypes.bool,
dialogProps: PropTypes.object,
onCancel: PropTypes.func,
onConfirm: PropTypes.func
}
export default StarterPromptsDialog
packages/ui/src/views/canvas/CanvasHeader.js
+15
View File
@@ -16,6 +16,7 @@ import SaveChatflowDialog from 'ui-component/dialog/SaveChatflowDialog'
import APICodeDialog from 'views/chatflows/APICodeDialog'
import AnalyseFlowDialog from 'ui-component/dialog/AnalyseFlowDialog'
import ViewMessagesDialog from 'ui-component/dialog/ViewMessagesDialog'
import StarterPromptsDialog from 'ui-component/dialog/StarterPromptsDialog'
// API
import chatflowsApi from 'api/chatflows'
@@ -45,6 +46,8 @@ const CanvasHeader = ({ chatflow, handleSaveFlow, handleDeleteFlow, handleLoadFl
const [apiDialogProps, setAPIDialogProps] = useState({})
const [analyseDialogOpen, setAnalyseDialogOpen] = useState(false)
const [analyseDialogProps, setAnalyseDialogProps] = useState({})
const [conversationStartersDialogOpen, setConversationStartersDialogOpen] = useState(false)
const [conversationStartersDialogProps, setConversationStartersDialogProps] = useState({})
const [viewMessagesDialogOpen, setViewMessagesDialogOpen] = useState(false)
const [viewMessagesDialogProps, setViewMessagesDialogProps] = useState({})
@@ -56,6 +59,12 @@ const CanvasHeader = ({ chatflow, handleSaveFlow, handleDeleteFlow, handleLoadFl
if (setting === 'deleteChatflow') {
handleDeleteFlow()
} else if (setting === 'conversationStarters') {
setConversationStartersDialogProps({
title: 'Starter Prompts - ' + chatflow.name,
chatflow: chatflow
})
setConversationStartersDialogOpen(true)
} else if (setting === 'analyseChatflow') {
setAnalyseDialogProps({
title: 'Analyse Chatflow',
@@ -376,6 +385,12 @@ const CanvasHeader = ({ chatflow, handleSaveFlow, handleDeleteFlow, handleLoadFl
/>
<APICodeDialog show={apiDialogOpen} dialogProps={apiDialogProps} onCancel={() => setAPIDialogOpen(false)} />
<AnalyseFlowDialog show={analyseDialogOpen} dialogProps={analyseDialogProps} onCancel={() => setAnalyseDialogOpen(false)} />
<StarterPromptsDialog
show={conversationStartersDialogOpen}
dialogProps={conversationStartersDialogProps}
onConfirm={() => setConversationStartersDialogOpen(false)}
onCancel={() => setConversationStartersDialogOpen(false)}
/>
<ViewMessagesDialog
show={viewMessagesDialogOpen}
dialogProps={viewMessagesDialogProps}
packages/ui/src/views/chatflows/ShareChatbot.js
+2
View File
@@ -135,6 +135,8 @@ const ShareChatbot = ({ isSessionMemory }) => {
if (isSessionMemory) obj.overrideConfig.generateNewSession = generateNewSession
if (chatbotConfig?.starterPrompts) obj.starterPrompts = chatbotConfig.starterPrompts
return obj
}
packages/ui/src/views/chatmessage/ChatMessage.js
+45 -8
View File
@@ -32,6 +32,7 @@ import { baseURL, maxScroll } from 'store/constant'
import robotPNG from 'assets/images/robot.png'
import userPNG from 'assets/images/account.png'
import StarterPromptsCard from '../../ui-component/cards/StarterPromptsCard'
import { isValidURL, removeDuplicateURL, setLocalStorageChatflow } from 'utils/genericHelper'
export const ChatMessage = ({ open, chatflowid, isDialog }) => {
@@ -57,6 +58,9 @@ export const ChatMessage = ({ open, chatflowid, isDialog }) => {
const inputRef = useRef(null)
const getChatmessageApi = useApi(chatmessageApi.getInternalChatmessageFromChatflow)
const getIsChatflowStreamingApi = useApi(chatflowsApi.getIsChatflowStreaming)
const getChatflowConfig = useApi(chatflowsApi.getSpecificChatflow)
const [starterPrompts, setStarterPrompts] = useState([])
const onSourceDialogClick = (data, title) => {
setSourceDialogProps({ data, title })
@@ -104,21 +108,30 @@ export const ChatMessage = ({ open, chatflowid, isDialog }) => {
}, 100)
}
// Handle form submission
const handleSubmit = async (e) => {
e.preventDefault()
const handlePromptClick = async (promptStarterInput) => {
setUserInput(promptStarterInput)
handleSubmit(undefined, promptStarterInput)
}
if (userInput.trim() === '') {
// Handle form submission
const handleSubmit = async (e, promptStarterInput) => {
if (e) e.preventDefault()
if (!promptStarterInput && userInput.trim() === '') {
return
}
let input = userInput
if (promptStarterInput !== undefined && promptStarterInput.trim() !== '') input = promptStarterInput
setLoading(true)
setMessages((prevMessages) => [...prevMessages, { message: userInput, type: 'userMessage' }])
setMessages((prevMessages) => [...prevMessages, { message: input, type: 'userMessage' }])
// Send user question and history to API
try {
const params = {
question: userInput,
question: input,
history: messages.filter((msg) => msg.message !== 'Hi there! How can I help?'),
chatId
}
@@ -223,10 +236,27 @@ export const ChatMessage = ({ open, chatflowid, isDialog }) => {
if (getIsChatflowStreamingApi.data) {
setIsChatFlowAvailableToStream(getIsChatflowStreamingApi.data?.isStreaming ?? false)
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [getIsChatflowStreamingApi.data])
useEffect(() => {
if (getChatflowConfig.data) {
if (getChatflowConfig.data?.chatbotConfig && JSON.parse(getChatflowConfig.data?.chatbotConfig)) {
let config = JSON.parse(getChatflowConfig.data?.chatbotConfig)
if (config.starterPrompts) {
let inputFields = []
Object.getOwnPropertyNames(config.starterPrompts).forEach((key) => {
if (config.starterPrompts[key]) {
inputFields.push(config.starterPrompts[key])
}
})
setStarterPrompts(inputFields)
}
}
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [getChatflowConfig.data])
// Auto scroll chat to bottom
useEffect(() => {
scrollToBottom()
@@ -245,6 +275,7 @@ export const ChatMessage = ({ open, chatflowid, isDialog }) => {
if (open && chatflowid) {
getChatmessageApi.request(chatflowid)
getIsChatflowStreamingApi.request(chatflowid)
getChatflowConfig.request(chatflowid)
scrollToBottom()
socket = socketIOClient(baseURL)
@@ -412,7 +443,13 @@ export const ChatMessage = ({ open, chatflowid, isDialog }) => {
})}
</div>
</div>
<Divider />
<div style={{ position: 'relative' }}>
{messages && messages.length === 1 && (
<StarterPromptsCard starterPrompts={starterPrompts || []} onPromptClick={handlePromptClick} isGrid={isDialog} />
)}
<Divider />
</div>
<div className='center'>
<div style={{ width: '100%' }}>
<form style={{ width: '100%' }} onSubmit={handleSubmit}>