mirror of
https://github.com/farcasclaudiu/Flowise.git
synced 2026-06-28 13:00:56 +03:00
Feature/Custom MCP vars (#4527)
* add input vars to custom mcp * add ability to specify vars in custom mcp, fix other ui issues * update setup org ui
This commit is contained in:
Henry Heng
@@ -743,9 +743,9 @@ export const ExecutionDetails = ({ open, isPublic, execution, metadata, onClose,
|
||||
sx={{ pl: 1 }}
|
||||
icon={<IconExternalLink size={15} />}
|
||||
variant='outlined'
|
||||
label={metadata?.agentflow?.name || metadata?.agentflow?.id || 'Go to AgentFlow'}
|
||||
label={localMetadata?.agentflow?.name || localMetadata?.agentflow?.id || 'Go to AgentFlow'}
|
||||
className={'button'}
|
||||
onClick={() => window.open(`/v2/agentcanvas/${metadata?.agentflow?.id}`, '_blank')}
|
||||
onClick={() => window.open(`/v2/agentcanvas/${localMetadata?.agentflow?.id}`, '_blank')}
|
||||
/>
|
||||
)}
|
||||
|
||||
|
||||
@@ -38,8 +38,16 @@ const PublicExecutionDetails = () => {
|
||||
const executionDetails =
|
||||
typeof execution.executionData === 'string' ? JSON.parse(execution.executionData) : execution.executionData
|
||||
setExecution(executionDetails)
|
||||
setSelectedMetadata(omit(execution, ['executionData']))
|
||||
const newMetadata = {
|
||||
...omit(execution, ['executionData']),
|
||||
agentflow: {
|
||||
...selectedMetadata.agentflow
|
||||
}
|
||||
}
|
||||
setSelectedMetadata(newMetadata)
|
||||
}
|
||||
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [getExecutionByIdPublicApi.data])
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
@@ -225,8 +225,16 @@ const AgentExecutions = () => {
|
||||
const executionDetails =
|
||||
typeof execution.executionData === 'string' ? JSON.parse(execution.executionData) : execution.executionData
|
||||
setSelectedExecutionData(executionDetails)
|
||||
setSelectedMetadata(omit(execution, ['executionData']))
|
||||
const newMetadata = {
|
||||
...omit(execution, ['executionData']),
|
||||
agentflow: {
|
||||
...selectedMetadata.agentflow
|
||||
}
|
||||
}
|
||||
setSelectedMetadata(newMetadata)
|
||||
}
|
||||
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [getExecutionByIdApi.data])
|
||||
|
||||
return (
|
||||
|
||||
@@ -421,23 +421,17 @@ const AgentFlowNode = ({ data }) => {
|
||||
return (
|
||||
<Box
|
||||
key={`tool-${configIndex}-${toolIndex}-${propIndex}`}
|
||||
component='img'
|
||||
src={`${baseURL}/api/v1/node-icon/${toolName}`}
|
||||
alt={toolName}
|
||||
sx={{
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.2)',
|
||||
width: 20,
|
||||
height: 20,
|
||||
borderRadius: '50%',
|
||||
width: 24,
|
||||
height: 24,
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
padding: '4px'
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.2)',
|
||||
padding: 0.3
|
||||
}}
|
||||
>
|
||||
<img
|
||||
style={{ width: '100%', height: '100%', objectFit: 'contain' }}
|
||||
src={`${baseURL}/api/v1/node-icon/${toolName}`}
|
||||
alt={toolName}
|
||||
/>
|
||||
</Box>
|
||||
/>
|
||||
)
|
||||
})
|
||||
} else {
|
||||
@@ -447,23 +441,17 @@ const AgentFlowNode = ({ data }) => {
|
||||
return [
|
||||
<Box
|
||||
key={`tool-${configIndex}-${toolIndex}`}
|
||||
component='img'
|
||||
src={`${baseURL}/api/v1/node-icon/${toolName}`}
|
||||
alt={toolName}
|
||||
sx={{
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.2)',
|
||||
width: 20,
|
||||
height: 20,
|
||||
borderRadius: '50%',
|
||||
width: 24,
|
||||
height: 24,
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
padding: '4px'
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.2)',
|
||||
padding: 0.3
|
||||
}}
|
||||
>
|
||||
<img
|
||||
style={{ width: '100%', height: '100%', objectFit: 'contain' }}
|
||||
src={`${baseURL}/api/v1/node-icon/${toolName}`}
|
||||
alt={toolName}
|
||||
/>
|
||||
</Box>
|
||||
/>
|
||||
]
|
||||
}
|
||||
})}
|
||||
|
||||
@@ -1069,7 +1069,7 @@ const NodeInputHandler = ({
|
||||
)}
|
||||
|
||||
{(inputParam.type === 'string' || inputParam.type === 'password' || inputParam.type === 'number') &&
|
||||
(inputParam?.acceptVariable ? (
|
||||
(inputParam?.acceptVariable && window.location.href.includes('v2/agentcanvas') ? (
|
||||
<RichInput
|
||||
key={data.inputs[inputParam.name]}
|
||||
placeholder={inputParam.placeholder}
|
||||
|
||||
@@ -3,7 +3,7 @@ import { useContext, useState, memo } from 'react'
|
||||
import { useSelector } from 'react-redux'
|
||||
|
||||
// material-ui
|
||||
import { useTheme } from '@mui/material/styles'
|
||||
import { useTheme, darken, lighten } from '@mui/material/styles'
|
||||
|
||||
// project imports
|
||||
import NodeCardWrapper from '@/ui-component/cards/NodeCardWrapper'
|
||||
@@ -18,6 +18,7 @@ import { flowContext } from '@/store/context/ReactFlowContext'
|
||||
const StickyNote = ({ data }) => {
|
||||
const theme = useTheme()
|
||||
const canvas = useSelector((state) => state.canvas)
|
||||
const customization = useSelector((state) => state.customization)
|
||||
const { deleteNode, duplicateNode } = useContext(flowContext)
|
||||
const [inputParam] = data.inputParams
|
||||
|
||||
@@ -31,12 +32,23 @@ const StickyNote = ({ data }) => {
|
||||
setOpen(true)
|
||||
}
|
||||
|
||||
const defaultColor = '#FFE770' // fallback color if data.color is not present
|
||||
const nodeColor = data.color || defaultColor
|
||||
|
||||
const getBorderColor = () => {
|
||||
if (data.selected) return theme.palette.primary.main
|
||||
else if (theme?.customization?.isDarkMode) return theme.palette.grey[900] + 25
|
||||
else if (customization?.isDarkMode) return theme.palette.grey[700]
|
||||
else return theme.palette.grey[900] + 50
|
||||
}
|
||||
|
||||
const getBackgroundColor = () => {
|
||||
if (customization?.isDarkMode) {
|
||||
return data.selected ? darken(nodeColor, 0.7) : darken(nodeColor, 0.8)
|
||||
} else {
|
||||
return data.selected ? lighten(nodeColor, 0.1) : lighten(nodeColor, 0.2)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<NodeCardWrapper
|
||||
@@ -44,7 +56,7 @@ const StickyNote = ({ data }) => {
|
||||
sx={{
|
||||
padding: 0,
|
||||
borderColor: getBorderColor(),
|
||||
backgroundColor: data.selected ? '#FFDC00' : '#FFE770'
|
||||
backgroundColor: getBackgroundColor()
|
||||
}}
|
||||
border={false}
|
||||
>
|
||||
@@ -66,8 +78,12 @@ const StickyNote = ({ data }) => {
|
||||
onClick={() => {
|
||||
duplicateNode(data.id)
|
||||
}}
|
||||
sx={{ height: '35px', width: '35px', '&:hover': { color: theme?.palette.primary.main } }}
|
||||
color={theme?.customization?.isDarkMode ? theme.colors?.paper : 'inherit'}
|
||||
sx={{
|
||||
height: '35px',
|
||||
width: '35px',
|
||||
color: customization?.isDarkMode ? 'white' : 'inherit',
|
||||
'&:hover': { color: theme?.palette.primary.main }
|
||||
}}
|
||||
>
|
||||
<IconCopy />
|
||||
</IconButton>
|
||||
@@ -76,8 +92,12 @@ const StickyNote = ({ data }) => {
|
||||
onClick={() => {
|
||||
deleteNode(data.id)
|
||||
}}
|
||||
sx={{ height: '35px', width: '35px', '&:hover': { color: 'red' } }}
|
||||
color={theme?.customization?.isDarkMode ? theme.colors?.paper : 'inherit'}
|
||||
sx={{
|
||||
height: '35px',
|
||||
width: '35px',
|
||||
color: customization?.isDarkMode ? 'white' : 'inherit',
|
||||
'&:hover': { color: theme?.palette.error.main }
|
||||
}}
|
||||
>
|
||||
<IconTrash />
|
||||
</IconButton>
|
||||
|
||||
@@ -287,7 +287,7 @@ const OrganizationSetupPage = () => {
|
||||
<>
|
||||
<Box>
|
||||
<div style={{ display: 'flex', flexDirection: 'row' }}>
|
||||
<Typography>
|
||||
<Typography sx={{ mb: 1 }}>
|
||||
Existing Username<span style={{ color: 'red' }}> *</span>
|
||||
</Typography>
|
||||
<div style={{ flexGrow: 1 }}></div>
|
||||
@@ -304,7 +304,7 @@ const OrganizationSetupPage = () => {
|
||||
</Box>
|
||||
<Box>
|
||||
<div style={{ display: 'flex', flexDirection: 'row' }}>
|
||||
<Typography>
|
||||
<Typography sx={{ mb: 1 }}>
|
||||
Existing Password<span style={{ color: 'red' }}> *</span>
|
||||
</Typography>
|
||||
<div style={{ flexGrow: 1 }}></div>
|
||||
|
||||
Reference in New Issue
Block a user