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

Add feature to be able to chain prompt values

Browse Source
This commit is contained in:
Henry
2023-04-16 23:17:08 +01:00
parent 0681a34408
commit 4b9c39cf54
25 changed files with 1496 additions and 246 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/views/canvas/NodeOutputHandler.js
+71 -20
View File
@@ -8,6 +8,7 @@ import { Box, Typography, Tooltip } from '@mui/material'
import { tooltipClasses } from '@mui/material/Tooltip'
import { flowContext } from 'store/context/ReactFlowContext'
import { isValidConnection } from 'utils/genericHelper'
import { Dropdown } from 'ui-component/dropdown/Dropdown'
const CustomWidthTooltip = styled(({ className, ...props }) => <Tooltip {...props} classes={{ popper: className }} />)({
[`& .${tooltipClasses.tooltip}`]: {
@@ -17,11 +18,12 @@ const CustomWidthTooltip = styled(({ className, ...props }) => <Tooltip {...prop
// ===========================|| NodeOutputHandler ||=========================== //
const NodeOutputHandler = ({ outputAnchor, data }) => {
const NodeOutputHandler = ({ outputAnchor, data, disabled = false }) => {
const theme = useTheme()
const ref = useRef(null)
const updateNodeInternals = useUpdateNodeInternals()
const [position, setPosition] = useState(0)
const [dropdownValue, setDropdownValue] = useState(null)
const { reactFlowInstance } = useContext(flowContext)
useEffect(() => {
@@ -39,33 +41,82 @@ const NodeOutputHandler = ({ outputAnchor, data }) => {
}, 0)
}, [data.id, position, updateNodeInternals])
useEffect(() => {
if (dropdownValue) {
setTimeout(() => {
updateNodeInternals(data.id)
}, 0)
}
}, [data.id, dropdownValue, updateNodeInternals])
return (
<div ref={ref}>
<CustomWidthTooltip placement='right' title={outputAnchor.type}>
<Handle
type='source'
position={Position.Right}
key={outputAnchor.id}
id={outputAnchor.id}
isValidConnection={(connection) => isValidConnection(connection, reactFlowInstance)}
style={{
height: 10,
width: 10,
backgroundColor: data.selected ? theme.palette.primary.main : theme.palette.text.secondary,
top: position
}}
/>
</CustomWidthTooltip>
<Box sx={{ p: 2, textAlign: 'end' }}>
<Typography>{outputAnchor.label}</Typography>
</Box>
{outputAnchor.type !== 'options' && !outputAnchor.options && (
<>
<CustomWidthTooltip placement='right' title={outputAnchor.type}>
<Handle
type='source'
position={Position.Right}
key={outputAnchor.id}
id={outputAnchor.id}
isValidConnection={(connection) => isValidConnection(connection, reactFlowInstance)}
style={{
height: 10,
width: 10,
backgroundColor: data.selected ? theme.palette.primary.main : theme.palette.text.secondary,
top: position
}}
/>
</CustomWidthTooltip>
<Box sx={{ p: 2, textAlign: 'end' }}>
<Typography>{outputAnchor.label}</Typography>
</Box>
</>
)}
{outputAnchor.type === 'options' && outputAnchor.options && outputAnchor.options.length > 0 && (
<>
<CustomWidthTooltip
placement='right'
title={
outputAnchor.options.find((opt) => opt.name === data.outputs?.[outputAnchor.name])?.type ?? outputAnchor.type
}
>
<Handle
type='source'
position={Position.Right}
id={outputAnchor.options.find((opt) => opt.name === data.outputs?.[outputAnchor.name])?.id ?? ''}
isValidConnection={(connection) => isValidConnection(connection, reactFlowInstance)}
style={{
height: 10,
width: 10,
backgroundColor: data.selected ? theme.palette.primary.main : theme.palette.text.secondary,
top: position
}}
/>
</CustomWidthTooltip>
<Box sx={{ p: 2, textAlign: 'end' }}>
<Dropdown
disabled={disabled}
disableClearable={true}
name={outputAnchor.name}
options={outputAnchor.options}
onSelect={(newValue) => {
setDropdownValue(newValue)
data.outputs[outputAnchor.name] = newValue
}}
value={data.outputs[outputAnchor.name] ?? outputAnchor.default ?? 'choose an option'}
/>
</Box>
</>
)}
</div>
)
}
NodeOutputHandler.propTypes = {
outputAnchor: PropTypes.object,
data: PropTypes.object
data: PropTypes.object,
disabled: PropTypes.bool
}
export default NodeOutputHandler