Create variable picker for JSON file

packages/components/nodes/documentloaders/Json/Json.ts

@@ -52,7 +52,8 @@
                 type: 'json',
                 description: 'Additional metadata to be added to the extracted documents',
                 optional: true,
-                additionalParams: true
+                additionalParams: true,
+                acceptVariable: true
             },
             {
                 label: 'Omit Metadata Keys',
@@ -90,6 +91,38 @@
         const _omitMetadataKeys = nodeData.inputs?.omitMetadataKeys as string
         const output = nodeData.outputs?.output as string
 
+        const interpolateVariables = (value: string, variables: ICommonObject): string => {
+            return value.replace(/\{\{([^}]+)\}\}/g, (match, path) => {
+                const parts = path.trim().split('.')
+                let result = variables
+                for (const part of parts) {
+                    if (result && typeof result === 'object' && part in result) {
+                        result = result[part]
+                    } else {
+                        return match
+                    }
+                }
+                return result?.toString() || match
+            })
+        }
+
+        const processMetadata = (metadata: any, variables: ICommonObject): any => {
+            if (typeof metadata === 'string') {
+                return interpolateVariables(metadata, variables)
+            }
+            if (Array.isArray(metadata)) {
+                return metadata.map((item) => processMetadata(item, variables))
+            }
+            if (typeof metadata === 'object' && metadata !== null) {
+                const result: ICommonObject = {}
+                for (const [key, value] of Object.entries(metadata)) {
+                    result[key] = processMetadata(value, variables)
+                }
+                return result
+            }
+            return metadata
+        }
+
         let omitMetadataKeys: string[] = []
         if (_omitMetadataKeys) {
             omitMetadataKeys = _omitMetadataKeys.split(',').map((key) => key.trim())
@@ -104,7 +137,6 @@
         let docs: IDocument[] = []
         let files: string[] = []
 
-        //FILE-STORAGE::["CONTRIBUTING.md","LICENSE.md","README.md"]
         if (jsonFileBase64.startsWith('FILE-STORAGE::')) {
             const fileName = jsonFileBase64.replace('FILE-STORAGE::', '')
             if (fileName.startsWith('[') && fileName.endsWith(']')) {
@@ -113,7 +145,6 @@
                 files = [fileName]
             }
             const chatflowid = options.chatflowid
-
             for (const file of files) {
                 if (!file) continue
                 const fileData = await getFileFromStorage(file, chatflowid)
@@ -152,20 +183,32 @@
                 }
             }
         }
-
         if (metadata) {
             const parsedMetadata = typeof metadata === 'object' ? metadata : JSON.parse(metadata)
+
+            // Use whatever variables are passed in options
+            const variables = {
+                ...options
+            }
+
+            console.log('Variables available for interpolation:', variables)
+            console.log('Metadata before interpolation:', parsedMetadata)
+
+            const interpolatedMetadata = processMetadata(parsedMetadata, variables)
+
+            console.log('Interpolated metadata:', interpolatedMetadata)
+
             docs = docs.map((doc) => ({
                 ...doc,
                 metadata:
                     _omitMetadataKeys === '*'
                         ? {
-                              ...parsedMetadata
+                              ...interpolatedMetadata
                           }
                         : omit(
                               {
                                   ...doc.metadata,
-                                  ...parsedMetadata
+                                  ...interpolatedMetadata
                               },
                               omitMetadataKeys
                           )

packages/ui/src/ui-component/dialog/FormatPromptValuesDialog.jsx

@@ -4,7 +4,7 @@ import { useSelector, useDispatch } 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'
+import JsonEditorInput from '@/ui-component/json/JsonEditor'
 import { HIDE_CANVAS_DIALOG, SHOW_CANVAS_DIALOG } from '@/store/actions'
 
 const FormatPromptValuesDialog = ({ show, dialogProps, onChange, onCancel }) => {

packages/ui/src/ui-component/json/JsonEditor.jsx

@@ -1,105 +1,96 @@
-import { useEffect, useState } from 'react'
+import { useState, useEffect } from 'react'
 import PropTypes from 'prop-types'
 import { FormControl, Popover } from '@mui/material'
 import ReactJson from 'flowise-react-json-view'
-import SelectVariable from './SelectVariable'
-import { cloneDeep } from 'lodash'
-import { getAvailableNodesForVariable } from '@/utils/genericHelper'
+import JsonKeySelector from './JsonKeySelector'
 
-export const JsonEditorInput = ({
-    value,
-    onChange,
-    inputParam,
-    nodes,
-    edges,
-    nodeId,
-    disabled = false,
-    isDarkMode = false,
-    isSequentialAgent = false
-}) => {
-    const [myValue, setMyValue] = useState(value ? JSON.parse(value) : {})
-    const [availableNodesForVariable, setAvailableNodesForVariable] = useState([])
-    const [mouseUpKey, setMouseUpKey] = useState('')
+const JsonEditorInput = (props) => {
+    const { value, onChange, inputParam, isDarkMode = false, disabled = false, jsonFileContent } = props
 
     const [anchorEl, setAnchorEl] = useState(null)
+    const [mouseUpKey, setMouseUpKey] = useState('')
+    const [localValue, setLocalValue] = useState(value || '')
+    const [key, setKey] = useState(0)
+    const [localJsonFileContent, setLocalJsonFileContent] = useState(jsonFileContent)
     const openPopOver = Boolean(anchorEl)
 
+    // Debug value changes
+    useEffect(() => {
+        console.log('jsonFileContent changed:', jsonFileContent)
+        if (jsonFileContent) {
+            setLocalJsonFileContent(jsonFileContent)
+        }
+    }, [jsonFileContent])
+
     const handleClosePopOver = () => {
         setAnchorEl(null)
     }
 
-    const setNewVal = (val) => {
-        const newVal = cloneDeep(myValue)
-        newVal[mouseUpKey] = val
-        onChange(JSON.stringify(newVal))
-        setMyValue((params) => ({
-            ...params,
-            [mouseUpKey]: val
-        }))
+    const handleJsonChange = (edit) => {
+        try {
+            const newValue = JSON.stringify(edit.updated_src)
+            console.log('handleJsonChange called with:', newValue)
+            setLocalValue(newValue)
+            onChange(newValue)
+        } catch (error) {
+            console.error('Error updating JSON:', error)
+        }
     }
 
-    const onClipboardCopy = (e) => {
-        const src = e.src
-        if (Array.isArray(src) || typeof src === 'object') {
-            navigator.clipboard.writeText(JSON.stringify(src, null, '  '))
-        } else {
-            navigator.clipboard.writeText(src)
+    const handleVariableSelection = (selectedValue) => {
+        try {
+            console.log('1. Selected value:', selectedValue)
+            console.log('2. Current value:', value)
+
+            const newValue = JSON.stringify(
+                {
+                    [mouseUpKey]: selectedValue
+                },
+                null,
+                2
+            )
+
+            console.log('3. Updated editor with:', newValue)
+            setLocalValue(newValue)
+            onChange(newValue)
+            handleClosePopOver()
+        } catch (error) {
+            console.error('Error in handleVariableSelection:', error)
         }
     }
 
+    // Update local state when prop changes
     useEffect(() => {
-        if (!disabled && nodes && edges && nodeId && inputParam) {
-            const nodesForVariable = inputParam?.acceptVariable ? getAvailableNodesForVariable(nodes, edges, nodeId, inputParam.id) : []
-            setAvailableNodesForVariable(nodesForVariable)
-        }
-    }, [disabled, inputParam, nodes, edges, nodeId])
+        console.log('Value prop changed:', value)
+        setLocalValue(value || '')
+        setKey((prev) => prev + 1) // Force ReactJson to re-render with new key
+    }, [value])
 
     return (
-        <>
-            <FormControl sx={{ mt: 1, width: '100%' }} size='small'>
-                {disabled && (
-                    <ReactJson
-                        theme={isDarkMode ? 'ocean' : 'rjv-default'}
-                        style={{ padding: 10, borderRadius: 10 }}
-                        src={myValue}
-                        name={null}
-                        enableClipboard={(e) => onClipboardCopy(e)}
-                        quotesOnKeys={false}
-                        displayDataTypes={false}
-                    />
-                )}
-                {!disabled && (
-                    <div key={JSON.stringify(myValue)}>
-                        <ReactJson
-                            theme={isDarkMode ? 'ocean' : 'rjv-default'}
-                            style={{ padding: 10, borderRadius: 10 }}
-                            src={myValue}
-                            name={null}
-                            quotesOnKeys={false}
-                            displayDataTypes={false}
-                            enableClipboard={(e) => onClipboardCopy(e)}
-                            onMouseUp={(event) => {
-                                if (inputParam?.acceptVariable) {
-                                    setMouseUpKey(event.name)
-                                    setAnchorEl(event.currentTarget)
-                                }
-                            }}
-                            onEdit={(edit) => {
-                                setMyValue(edit.updated_src)
-                                onChange(JSON.stringify(edit.updated_src))
-                            }}
-                            onAdd={() => {
-                                //console.log(add)
-                            }}
-                            onDelete={(deleteobj) => {
-                                setMyValue(deleteobj.updated_src)
-                                onChange(JSON.stringify(deleteobj.updated_src))
-                            }}
-                        />
-                    </div>
-                )}
-            </FormControl>
-            {inputParam?.acceptVariable && (
+        <div style={{ width: '100%', marginTop: '8px' }}>
+            <ReactJson
+                theme={isDarkMode ? 'ocean' : 'rjv-default'}
+                style={{ padding: 10, borderRadius: 10 }}
+                src={value ? JSON.parse(value) : {}}
+                name={null}
+                collapsed={false}
+                displayDataTypes={false}
+                enableClipboard={false}
+                onEdit={handleJsonChange}
+                onDelete={handleJsonChange}
+                onAdd={handleJsonChange}
+                onSelect={(select) => {
+                    console.log('onSelect called with:', select)
+                    if (inputParam?.acceptVariable && select.name) {
+                        setMouseUpKey(select.name)
+                        const element = document.activeElement
+                        setAnchorEl(element)
+                    }
+                }}
+                displayObjectSize={false}
+                onMouseUp={() => { }}
+            />
+            {inputParam?.acceptVariable && localJsonFileContent && (
                 <Popover
                     open={openPopOver}
                     anchorEl={anchorEl}
@@ -112,30 +103,39 @@
                         vertical: 'top',
                         horizontal: 'left'
                     }}
+                    slotProps={{
+                        paper: {
+                            elevation: 8,
+                            sx: {
+                                overflow: 'visible',
+                                filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))'
+                            }
+                        }
+                    }}
+                    keepMounted
+                    disableEnforceFocus
+                    disableAutoFocus
+                    disableRestoreFocus
                 >
-                    <SelectVariable
+                    {console.log('Popover open:', openPopOver, 'anchorEl:', anchorEl)}
+                    <JsonKeySelector
+                        jsonContent={localJsonFileContent}
+                        onSelectKey={handleVariableSelection}
                         disabled={disabled}
-                        availableNodesForVariable={availableNodesForVariable}
-                        onSelectAndReturnVal={(val) => {
-                            setNewVal(val)
-                            handleClosePopOver()
-                        }}
-                        isSequentialAgent={isSequentialAgent}
                     />
                 </Popover>
             )}
-        </>
+        </div>
     )
 }
 
 JsonEditorInput.propTypes = {
     value: PropTypes.string,
-    onChange: PropTypes.func,
-    disabled: PropTypes.bool,
-    isDarkMode: PropTypes.bool,
+    onChange: PropTypes.func.isRequired,
     inputParam: PropTypes.object,
-    nodes: PropTypes.array,
-    edges: PropTypes.array,
-    nodeId: PropTypes.string,
-    isSequentialAgent: PropTypes.bool
+    isDarkMode: PropTypes.bool,
+    disabled: PropTypes.bool,
+    jsonFileContent: PropTypes.string
 }
+
+export default JsonEditorInput