format prompt values revamp

2026-06-26 07:01:16 +03:00 · 2023-06-28 22:59:56 +01:00
parent dc2f35bfad
commit 511c4995e9
20 changed files with 1014 additions and 910 deletions
@@ -0,0 +1,56 @@
+import { createPortal } from 'react-dom'
+import { useSelector } from 'react-redux'
+import PropTypes from 'prop-types'
+import { Dialog, DialogContent, DialogTitle } from '@mui/material'
+import PerfectScrollbar from 'react-perfect-scrollbar'
+import { JsonEditorInput } from 'ui-component/json/JsonEditor'
+
+const FormatPromptValuesDialog = ({ show, dialogProps, onChange, onCancel }) => {
+    const portalElement = document.getElementById('portal')
+    const customization = useSelector((state) => state.customization)
+
+    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'>
+                Format Prompt Values
+            </DialogTitle>
+            <DialogContent>
+                <PerfectScrollbar
+                    style={{
+                        height: '100%',
+                        maxHeight: 'calc(100vh - 220px)',
+                        overflowX: 'hidden'
+                    }}
+                >
+                    <JsonEditorInput
+                        onChange={(newValue) => onChange(newValue)}
+                        value={dialogProps.value}
+                        isDarkMode={customization.isDarkMode}
+                        inputParam={dialogProps.inputParam}
+                        nodes={dialogProps.nodes}
+                        edges={dialogProps.edges}
+                        nodeId={dialogProps.nodeId}
+                    />
+                </PerfectScrollbar>
+            </DialogContent>
+        </Dialog>
+    ) : null
+
+    return createPortal(component, portalElement)
+}
+
+FormatPromptValuesDialog.propTypes = {
+    show: PropTypes.bool,
+    dialogProps: PropTypes.object,
+    onChange: PropTypes.func,
+    onCancel: PropTypes.func
+}
+
+export default FormatPromptValuesDialog