Add feature to be able to chain prompt values

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

@@ -1,28 +1,53 @@
 import { useState } from 'react'
 import PropTypes from 'prop-types'
 import { FormControl, OutlinedInput } from '@mui/material'
+import EditPromptValuesDialog from 'ui-component/dialog/EditPromptValuesDialog'
 
-export const Input = ({ inputParam, value, onChange, disabled = false }) => {
+export const Input = ({ inputParam, value, onChange, disabled = false, showDialog, dialogProps, onDialogCancel, onDialogConfirm }) => {
     const [myValue, setMyValue] = useState(value ?? '')
+
+    const getInputType = (type) => {
+        switch (type) {
+            case 'string':
+                return 'text'
+            case 'password':
+                return 'password'
+            case 'number':
+                return 'number'
+            default:
+                return 'text'
+        }
+    }
+
     return (
-        <FormControl sx={{ mt: 1, width: '100%' }} size='small'>
-            <OutlinedInput
-                id={inputParam.name}
-                size='small'
-                disabled={disabled}
-                type={inputParam.type === 'string' ? 'text' : inputParam.type}
-                placeholder={inputParam.placeholder}
-                multiline={!!inputParam.rows}
-                maxRows={inputParam.rows || 0}
-                minRows={inputParam.rows || 0}
-                value={myValue}
-                name={inputParam.name}
-                onChange={(e) => {
-                    setMyValue(e.target.value)
-                    onChange(e.target.value)
+        <>
+            <FormControl sx={{ mt: 1, width: '100%' }} size='small'>
+                <OutlinedInput
+                    id={inputParam.name}
+                    size='small'
+                    disabled={disabled}
+                    type={getInputType(inputParam.type)}
+                    placeholder={inputParam.placeholder}
+                    multiline={!!inputParam.rows}
+                    rows={inputParam.rows ?? 1}
+                    value={myValue}
+                    name={inputParam.name}
+                    onChange={(e) => {
+                        setMyValue(e.target.value)
+                        onChange(e.target.value)
+                    }}
+                />
+            </FormControl>
+            <EditPromptValuesDialog
+                show={showDialog}
+                dialogProps={dialogProps}
+                onCancel={onDialogCancel}
+                onConfirm={(newValue, inputParamName) => {
+                    setMyValue(newValue)
+                    onDialogConfirm(newValue, inputParamName)
                 }}
-            />
-        </FormControl>
+            ></EditPromptValuesDialog>
+        </>
     )
 }
 
@@ -30,5 +55,9 @@ Input.propTypes = {
     inputParam: PropTypes.object,
     value: PropTypes.string,
     onChange: PropTypes.func,
-    disabled: PropTypes.bool
+    disabled: PropTypes.bool,
+    showDialog: PropTypes.bool,
+    dialogProps: PropTypes.object,
+    onDialogCancel: PropTypes.func,
+    onDialogConfirm: PropTypes.func
 }