diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx index 22267534f..80049fec4 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx @@ -22,7 +22,7 @@ import PromptAreaComponent from "../../../../components/promptComponent"; import TextAreaComponent from "../../../../components/textAreaComponent"; import ToggleShadComponent from "../../../../components/toggleShadComponent"; import { Button } from "../../../../components/ui/button"; -import { TOOLTIP_EMPTY } from "../../../../constants/constants"; +import { LANGFLOW_SUPPORTED_TYPES, TOOLTIP_EMPTY } from "../../../../constants/constants"; import { FlowsContext } from "../../../../contexts/flowsContext"; import { typesContext } from "../../../../contexts/typesContext"; import { ParameterComponentType } from "../../../../types/components"; @@ -223,15 +223,7 @@ export default function ParameterComponent({ return !showNode ? ( left && - (type === "str" || - type === "bool" || - type === "float" || - type === "code" || - type === "prompt" || - type === "file" || - type === "int" || - type === "dict" || - type === "NestedDict") && + (LANGFLOW_SUPPORTED_TYPES.has(type??"")) && !optionalHandle ? ( <> ) : ( @@ -306,15 +298,7 @@ export default function ParameterComponent({ {left && - (type === "str" || - type === "bool" || - type === "float" || - type === "code" || - type === "prompt" || - type === "file" || - type === "int" || - type === "dict" || - type === "NestedDict") && + (LANGFLOW_SUPPORTED_TYPES.has(type??"")) && !optionalHandle ? ( <> ) : ( diff --git a/src/frontend/src/components/codeTabsComponent/index.tsx b/src/frontend/src/components/codeTabsComponent/index.tsx index 31b40ca4e..2f52db1f6 100644 --- a/src/frontend/src/components/codeTabsComponent/index.tsx +++ b/src/frontend/src/components/codeTabsComponent/index.tsx @@ -40,6 +40,7 @@ import { classNames } from "../../utils/utils"; import DictComponent from "../dictComponent"; import IconComponent from "../genericIconComponent"; import KeypairListComponent from "../keypairListComponent"; +import { LANGFLOW_SUPPORTED_TYPES } from "../../constants/constants"; export default function CodeTabsComponent({ flow, @@ -218,126 +219,68 @@ export default function CodeTabsComponent({ {tweaks?.tweaksList!.current.includes( node["data"]["id"] ) && ( - -
- - - - - PARAM - - - VALUE - - - - - {Object.keys(node["data"]["node"]["template"]) - .filter( - (templateField) => - templateField.charAt(0) !== "_" && - node.data.node.template[templateField] - .show && - (node.data.node.template[templateField] - .type === "str" || + +
+
+ + + + PARAM + + + VALUE + + + + + {Object.keys(node["data"]["node"]["template"]) + .filter( + (templateField) => + templateField.charAt(0) !== "_" && node.data.node.template[templateField] - .type === "bool" || - node.data.node.template[templateField] - .type === "float" || - node.data.node.template[templateField] - .type === "code" || - node.data.node.template[templateField] - .type === "prompt" || - node.data.node.template[templateField] - .type === "file" || - node.data.node.template[templateField] - .type === "int" || - node.data.node.template[templateField] - .type === "dict" || - node.data.node.template[templateField] - .type === "NestedDict") - ) - .map((templateField, indx) => { - return ( - - - {templateField} - - -
- {node.data.node.template[ - templateField - ].type === "str" && - !node.data.node.template[ - templateField - ].options ? ( -
- {node.data.node.template[ + .show && + (LANGFLOW_SUPPORTED_TYPES.has(node.data.node.template[templateField].type)) + ) + .map((templateField, indx) => { + return ( + + + {templateField} + + +
+ {node.data.node.template[ + templateField + ].type === "str" && + !node.data.node.template[ templateField - ].list ? ( - + {node.data.node.template[ + templateField + ].list ? ( + { - setData((old) => { - let newInputList = - cloneDeep(old); - newInputList![ - i - ].data.node.template[ - templateField - ].value = target; - return newInputList; - }); - tweaks.buildTweakObject!( - node["data"]["id"], - target, - node.data.node.template[ - templateField - ] - ); - }} - /> - ) : node.data.node.template[ - templateField - ].multiline ? ( -
- { setData((old) => { @@ -353,35 +296,183 @@ export default function CodeTabsComponent({ tweaks.buildTweakObject!( node["data"]["id"], target, - node.data.node - .template[ - templateField + node.data.node.template[ + templateField ] ); }} /> -
- ) : ( - + { + setData((old) => { + let newInputList = + cloneDeep(old); + newInputList![ + i + ].data.node.template[ + templateField + ].value = target; + return newInputList; + }); + tweaks.buildTweakObject!( + node["data"]["id"], + target, + node.data.node + .template[ + templateField + ] + ); + }} + /> +
+ ) : ( + { + setData((old) => { + let newInputList = + cloneDeep(old); + newInputList![ + i + ].data.node.template[ + templateField + ].value = target; + return newInputList; + }); + tweaks.buildTweakObject!( + node["data"]["id"], + target, + node.data.node.template[ + templateField + ] + ); + }} + /> + )} +
+ ) : node.data.node.template[ + templateField + ].type === "bool" ? ( +
+ {" "} + { + setData((old) => { + let newInputList = + cloneDeep(old); + newInputList![ + i + ].data.node.template[ + templateField + ].value = e; + return newInputList; + }); + tweaks.buildTweakObject!( + node["data"]["id"], + e, + node.data.node.template[ + templateField + ] + ); + }} + size="small" + disabled={false} + /> +
+ ) : node.data.node.template[ + templateField + ].type === "file" ? ( +
+ { }} + fileTypes={ + node.data.node.template[ + templateField + ].fileTypes + } + suffixes={ + node.data.node.template[ + templateField + ].suffixes + } + onFileChange={( + value: any + ) => { + node.data.node.template[ + templateField + ].file_path = value; + }} + > +
+ ) : node.data.node.template[ + templateField + ].type === "float" ? ( +
+ { setData((old) => { @@ -398,418 +489,311 @@ export default function CodeTabsComponent({ node["data"]["id"], target, node.data.node.template[ - templateField + templateField ] ); }} /> - )} -
- ) : node.data.node.template[ - templateField - ].type === "bool" ? ( -
- {" "} - { - setData((old) => { - let newInputList = - cloneDeep(old); - newInputList![ - i - ].data.node.template[ - templateField - ].value = e; - return newInputList; - }); - tweaks.buildTweakObject!( - node["data"]["id"], - e, - node.data.node.template[ - templateField - ] - ); - }} - size="small" - disabled={false} - /> -
- ) : node.data.node.template[ - templateField - ].type === "file" ? ( -
- {}} - fileTypes={ - node.data.node.template[ - templateField - ].fileTypes - } - suffixes={ - node.data.node.template[ - templateField - ].suffixes - } - onFileChange={( - value: any - ) => { - node.data.node.template[ - templateField - ].file_path = value; - }} - > -
- ) : node.data.node.template[ - templateField - ].type === "float" ? ( -
- { - setData((old) => { - let newInputList = - cloneDeep(old); - newInputList![ - i - ].data.node.template[ - templateField - ].value = target; - return newInputList; - }); - tweaks.buildTweakObject!( - node["data"]["id"], - target, - node.data.node.template[ - templateField - ] - ); - }} - /> -
- ) : node.data.node.template[ +
+ ) : node.data.node.template[ templateField ].type === "str" && - node.data.node.template[ - templateField - ].options ? ( -
- { - setData((old) => { - let newInputList = - cloneDeep(old); - newInputList![ - i - ].data.node.template[ - templateField - ].value = target; - return newInputList; - }); - tweaks.buildTweakObject!( - node["data"]["id"], - target, + node.data.node.template[ + templateField + ].options ? ( +
+ { + setData((old) => { + let newInputList = + cloneDeep(old); + newInputList![ + i + ].data.node.template[ + templateField + ].value = target; + return newInputList; + }); + tweaks.buildTweakObject!( + node["data"]["id"], + target, + node.data.node.template[ + templateField + ] + ); + }} + value={ + !node.data.node.template[ + templateField + ].value || + node.data.node.template[ + templateField + ].value === "" + ? "" + : node.data.node.template[ templateField ].value - } - > -
- ) : node.data.node.template[ + } + > +
+ ) : node.data.node.template[ templateField ].type === "int" ? ( -
- + { - setData((old) => { - let newInputList = - cloneDeep(old); - newInputList![ - i - ].data.node.template[ + } + onChange={(target) => { + setData((old) => { + let newInputList = + cloneDeep(old); + newInputList![ + i + ].data.node.template[ + templateField + ].value = target; + return newInputList; + }); + tweaks.buildTweakObject!( + node["data"]["id"], + target, + node.data.node.template[ templateField - ].value = target; - return newInputList; - }); - tweaks.buildTweakObject!( - node["data"]["id"], - target, - node.data.node.template[ - templateField - ] - ); - }} - /> -
- ) : node.data.node.template[ + ] + ); + }} + /> + + ) : node.data.node.template[ templateField ].type === "prompt" ? ( -
- + { - setData((old) => { - let newInputList = - cloneDeep(old); - newInputList![ - i - ].data.node.template[ + } + onChange={(target) => { + setData((old) => { + let newInputList = + cloneDeep(old); + newInputList![ + i + ].data.node.template[ + templateField + ].value = target; + return newInputList; + }); + tweaks.buildTweakObject!( + node["data"]["id"], + target, + node.data.node.template[ templateField - ].value = target; - return newInputList; - }); - tweaks.buildTweakObject!( - node["data"]["id"], - target, - node.data.node.template[ - templateField - ] - ); - }} - /> -
- ) : node.data.node.template[ + ] + ); + }} + /> + + ) : node.data.node.template[ templateField ].type === "code" ? ( -
- + { - setData((old) => { - let newInputList = - cloneDeep(old); - newInputList![ - i - ].data.node.template[ + } + onChange={(target) => { + setData((old) => { + let newInputList = + cloneDeep(old); + newInputList![ + i + ].data.node.template[ + templateField + ].value = target; + return newInputList; + }); + tweaks.buildTweakObject!( + node["data"]["id"], + target, + node.data.node.template[ templateField - ].value = target; - return newInputList; - }); - tweaks.buildTweakObject!( - node["data"]["id"], - target, - node.data.node.template[ - templateField - ] - ); - }} - /> -
- ) : node.data.node.template[ + ] + ); + }} + /> + + ) : node.data.node.template[ templateField ].type === "dict" ? ( -
- + { - const valueToNumbers = - convertValuesToNumbers( - target + } + duplicateKey={ + errorDuplicateKey + } + onChange={(target) => { + const valueToNumbers = + convertValuesToNumbers( + target + ); + node.data.node!.template[ + templateField + ].value = valueToNumbers; + setErrorDuplicateKey( + hasDuplicateKeys( + valueToNumbers + ) ); - node.data.node!.template[ - templateField - ].value = valueToNumbers; - setErrorDuplicateKey( - hasDuplicateKeys( - valueToNumbers - ) - ); - setData((old) => { - let newInputList = - cloneDeep(old); - newInputList![ - i - ].data.node.template[ + setData((old) => { + let newInputList = + cloneDeep(old); + newInputList![ + i + ].data.node.template[ + templateField + ].value = target; + return newInputList; + }); + tweaks.buildTweakObject!( + node["data"]["id"], + target, + node.data.node.template[ templateField - ].value = target; - return newInputList; - }); - tweaks.buildTweakObject!( - node["data"]["id"], - target, - node.data.node.template[ - templateField - ] - ); - }} - /> -
- ) : node.data.node.template[ + ] + ); + }} + /> + + ) : node.data.node.template[ templateField ].type === "NestedDict" ? ( -
- + { - setData((old) => { - let newInputList = - cloneDeep(old); - newInputList![ - i - ].data.node.template[ + } + onChange={(target) => { + setData((old) => { + let newInputList = + cloneDeep(old); + newInputList![ + i + ].data.node.template[ + templateField + ].value = target; + return newInputList; + }); + tweaks.buildTweakObject!( + node["data"]["id"], + target, + node.data.node.template[ templateField - ].value = target; - return newInputList; - }); - tweaks.buildTweakObject!( - node["data"]["id"], - target, - node.data.node.template[ - templateField - ] - ); - }} - /> -
- ) : node.data.node.template[ + ] + ); + }} + /> + + ) : node.data.node.template[ templateField ].type === "Any" ? ( - "-" - ) : ( -
- )} - - - - ); - })} - -
-
- - )} + "-" + ) : ( +
+ )} + + + + ); + })} + + + + + )} {tweaks?.tweaksList!.current.length === 0 && ( <> diff --git a/src/frontend/src/constants/constants.ts b/src/frontend/src/constants/constants.ts index 234bed6f7..d1e26b4b1 100644 --- a/src/frontend/src/constants/constants.ts +++ b/src/frontend/src/constants/constants.ts @@ -663,3 +663,6 @@ export const LAST_USED_SPAN_1 = "The last time this key was used."; export const LAST_USED_SPAN_2 = "Accurate to within the hour from the most recent usage."; + +export const LANGFLOW_SUPPORTED_TYPES= new Set(["str","bool","float","code", +"prompt","file","int","dict","NestedDict"]) \ No newline at end of file diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx index dde0090c1..7d599ecf9 100644 --- a/src/frontend/src/modals/ApiModal/index.tsx +++ b/src/frontend/src/modals/ApiModal/index.tsx @@ -13,7 +13,7 @@ import { // import "ace-builds/webpack-resolver"; import CodeTabsComponent from "../../components/codeTabsComponent"; import IconComponent from "../../components/genericIconComponent"; -import { EXPORT_CODE_DIALOG } from "../../constants/constants"; +import { EXPORT_CODE_DIALOG, LANGFLOW_SUPPORTED_TYPES } from "../../constants/constants"; import { AuthContext } from "../../contexts/authContext"; import { FlowsContext } from "../../contexts/flowsContext"; import { TemplateVariableType } from "../../types/api"; @@ -99,15 +99,7 @@ const ApiModal = forwardRef( (templateField) => templateField.charAt(0) !== "_" && node.data.node.template[templateField].show && - (node.data.node.template[templateField].type === "str" || - node.data.node.template[templateField].type === "bool" || - node.data.node.template[templateField].type === "float" || - node.data.node.template[templateField].type === "code" || - node.data.node.template[templateField].type === "prompt" || - node.data.node.template[templateField].type === "file" || - node.data.node.template[templateField].type === "int" || - node.data.node.template[templateField].type === "dict" || - node.data.node.template[templateField].type === "NestedDict") + (LANGFLOW_SUPPORTED_TYPES.has(node.data.node.template[templateField].type)) ) .map((n, i) => { arrNodesWithValues.push(node["id"]); @@ -146,9 +138,9 @@ const ApiModal = forwardRef( ); if (existingTweak) { - existingTweak[tw][template["name"]] = changes as string; + existingTweak[tw][template["name"]!] = changes as string; - if (existingTweak[tw][template["name"]] == template.value) { + if (existingTweak[tw][template["name"]!] == template.value) { tweak.current.forEach((element) => { if (element[tw] && Object.keys(element[tw])?.length === 0) { tweak.current = tweak.current.filter((obj) => { @@ -161,7 +153,7 @@ const ApiModal = forwardRef( } else { const newTweak = { [tw]: { - [template["name"]]: changes, + [template["name"]!]: changes, }, } as uniqueTweakType; tweak.current.push(newTweak); diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx index a3817c190..df5618480 100644 --- a/src/frontend/src/modals/EditNodeModal/index.tsx +++ b/src/frontend/src/modals/EditNodeModal/index.tsx @@ -25,7 +25,7 @@ import { TableHeader, TableRow, } from "../../components/ui/table"; -import { limitScrollFieldsModal } from "../../constants/constants"; +import { LANGFLOW_SUPPORTED_TYPES, limitScrollFieldsModal } from "../../constants/constants"; import { FlowsContext } from "../../contexts/flowsContext"; import { typesContext } from "../../contexts/typesContext"; import { NodeDataType } from "../../types/flow"; @@ -145,24 +145,7 @@ const EditNodeModal = forwardRef( (templateParam) => templateParam.charAt(0) !== "_" && myData.current.node?.template[templateParam].show && - (myData.current.node.template[templateParam] - .type === "str" || - myData.current.node.template[templateParam] - .type === "bool" || - myData.current.node.template[templateParam] - .type === "float" || - myData.current.node.template[templateParam] - .type === "code" || - myData.current.node.template[templateParam] - .type === "prompt" || - myData.current.node.template[templateParam] - .type === "file" || - myData.current.node.template[templateParam] - .type === "int" || - myData.current.node.template[templateParam] - .type === "dict" || - myData.current.node.template[templateParam] - .type === "NestedDict") + (LANGFLOW_SUPPORTED_TYPES.has(myData.current.node.template[templateParam].type)) ) .map((templateParam, index) => ( diff --git a/src/frontend/src/utils/reactflowUtils.ts b/src/frontend/src/utils/reactflowUtils.ts index 74b5366f6..4e6e08d6b 100644 --- a/src/frontend/src/utils/reactflowUtils.ts +++ b/src/frontend/src/utils/reactflowUtils.ts @@ -9,7 +9,7 @@ import { XYPosition, } from "reactflow"; import ShortUniqueId from "short-unique-id"; -import { specialCharsRegex } from "../constants/constants"; +import { LANGFLOW_SUPPORTED_TYPES, specialCharsRegex } from "../constants/constants"; import { APITemplateType, TemplateVariableType } from "../types/api"; import { FlowType, @@ -634,15 +634,7 @@ function updateGroupNodeTemplate(template: APITemplateType) { let type = template[key].type; let input_types = template[key].input_types; if ( - (type === "str" || - type === "bool" || - type === "float" || - type === "code" || - type === "prompt" || - type === "file" || - type === "int" || - type === "dict" || - type === "NestedDict") && + LANGFLOW_SUPPORTED_TYPES.has(type) && !template[key].required && !input_types ) {