Merge branch 'main' into feature/ChatHistory2

packages/ui/src/ui-component/input/Input.js

@@ -1,10 +1,39 @@
-import { useState } from 'react'
+import { useState, useEffect, useRef } from 'react'
 import PropTypes from 'prop-types'
-import { FormControl, OutlinedInput } from '@mui/material'
+import { FormControl, OutlinedInput, Popover } from '@mui/material'
 import ExpandTextDialog from 'ui-component/dialog/ExpandTextDialog'
+import SelectVariable from 'ui-component/json/SelectVariable'
+import { getAvailableNodesForVariable } from 'utils/genericHelper'
 
-export const Input = ({ inputParam, value, onChange, disabled = false, showDialog, dialogProps, onDialogCancel, onDialogConfirm }) => {
+export const Input = ({
+    inputParam,
+    value,
+    nodes,
+    edges,
+    nodeId,
+    onChange,
+    disabled = false,
+    showDialog,
+    dialogProps,
+    onDialogCancel,
+    onDialogConfirm
+}) => {
     const [myValue, setMyValue] = useState(value ?? '')
+    const [anchorEl, setAnchorEl] = useState(null)
+    const [availableNodesForVariable, setAvailableNodesForVariable] = useState([])
+    const ref = useRef(null)
+
+    const openPopOver = Boolean(anchorEl)
+
+    const handleClosePopOver = () => {
+        setAnchorEl(null)
+    }
+
+    const setNewVal = (val) => {
+        const newVal = myValue + val.substring(2)
+        onChange(newVal)
+        setMyValue(newVal)
+    }
 
     const getInputType = (type) => {
         switch (type) {
@@ -19,6 +48,19 @@ export const Input = ({ inputParam, value, onChange, disabled = false, showDialo
         }
     }
 
+    useEffect(() => {
+        if (!disabled && nodes && edges && nodeId && inputParam) {
+            const nodesForVariable = inputParam?.acceptVariable ? getAvailableNodesForVariable(nodes, edges, nodeId, inputParam.id) : []
+            setAvailableNodesForVariable(nodesForVariable)
+        }
+    }, [disabled, inputParam, nodes, edges, nodeId])
+
+    useEffect(() => {
+        if (typeof myValue === 'string' && myValue && myValue.endsWith('{{')) {
+            setAnchorEl(ref.current)
+        }
+    }, [myValue])
+
     return (
         <>
             <FormControl sx={{ mt: 1, width: '100%' }} size='small'>
@@ -55,6 +97,31 @@ export const Input = ({ inputParam, value, onChange, disabled = false, showDialo
                     }}
                 ></ExpandTextDialog>
             )}
+            <div ref={ref}></div>
+            {inputParam?.acceptVariable && (
+                <Popover
+                    open={openPopOver}
+                    anchorEl={anchorEl}
+                    onClose={handleClosePopOver}
+                    anchorOrigin={{
+                        vertical: 'bottom',
+                        horizontal: 'left'
+                    }}
+                    transformOrigin={{
+                        vertical: 'top',
+                        horizontal: 'left'
+                    }}
+                >
+                    <SelectVariable
+                        disabled={disabled}
+                        availableNodesForVariable={availableNodesForVariable}
+                        onSelectAndReturnVal={(val) => {
+                            setNewVal(val)
+                            handleClosePopOver()
+                        }}
+                    />
+                </Popover>
+            )}
         </>
     )
 }
@@ -66,6 +133,9 @@ Input.propTypes = {
     disabled: PropTypes.bool,
     showDialog: PropTypes.bool,
     dialogProps: PropTypes.object,
+    nodes: PropTypes.array,
+    edges: PropTypes.array,
+    nodeId: PropTypes.string,
     onDialogCancel: PropTypes.func,
     onDialogConfirm: PropTypes.func
 }

packages/ui/src/views/canvas/NodeInputHandler.js

@@ -265,6 +265,9 @@ const NodeInputHandler = ({ inputAnchor, inputParam, data, disabled = false, isA
                                 inputParam={inputParam}
                                 onChange={(newValue) => (data.inputs[inputParam.name] = newValue)}
                                 value={data.inputs[inputParam.name] ?? inputParam.default ?? ''}
+                                nodes={inputParam?.acceptVariable && reactFlowInstance ? reactFlowInstance.getNodes() : []}
+                                edges={inputParam?.acceptVariable && reactFlowInstance ? reactFlowInstance.getEdges() : []}
+                                nodeId={data.id}
                                 showDialog={showExpandDialog}
                                 dialogProps={expandDialogProps}
                                 onDialogCancel={() => setShowExpandDialog(false)}