+
- Run
+ Playground
) : (
diff --git a/src/frontend/src/components/codeTabsComponent/index.tsx b/src/frontend/src/components/codeTabsComponent/index.tsx
index 0a19ec273..3d1c3af82 100644
--- a/src/frontend/src/components/codeTabsComponent/index.tsx
+++ b/src/frontend/src/components/codeTabsComponent/index.tsx
@@ -2,7 +2,6 @@ import { cloneDeep } from "lodash";
import { useEffect, useState } from "react";
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { oneDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
-import AccordionComponent from "../../components/AccordionComponent";
import CodeAreaComponent from "../../components/codeAreaComponent";
import Dropdown from "../../components/dropdownComponent";
import FloatComponent from "../../components/floatComponent";
@@ -36,11 +35,12 @@ import {
hasDuplicateKeys,
} from "../../utils/reactflowUtils";
import { classNames } from "../../utils/utils";
-import ShadTooltip from "../ShadTooltipComponent";
+import AccordionComponent from "../accordionComponent";
import DictComponent from "../dictComponent";
import IconComponent from "../genericIconComponent";
-import KeypairListComponent from "../keypairListComponent";
import InputComponent from "../inputComponent";
+import KeypairListComponent from "../keypairListComponent";
+import ShadTooltip from "../shadTooltipComponent";
export default function CodeTabsComponent({
flow,
@@ -267,7 +267,7 @@ export default function CodeTabsComponent({
{node.data.node.template[
templateField
- ].list ? (
+ ]?.list ? (
diff --git a/src/frontend/src/components/CrashErrorComponent/index.tsx b/src/frontend/src/components/crashErrorComponent/index.tsx
similarity index 100%
rename from src/frontend/src/components/CrashErrorComponent/index.tsx
rename to src/frontend/src/components/crashErrorComponent/index.tsx
diff --git a/src/frontend/src/components/DropdownButtonComponent/index.tsx b/src/frontend/src/components/dropdownButtonComponent/index.tsx
similarity index 100%
rename from src/frontend/src/components/DropdownButtonComponent/index.tsx
rename to src/frontend/src/components/dropdownButtonComponent/index.tsx
diff --git a/src/frontend/src/components/dropdownComponent/index.tsx b/src/frontend/src/components/dropdownComponent/index.tsx
index 67b9c5d82..b17332268 100644
--- a/src/frontend/src/components/dropdownComponent/index.tsx
+++ b/src/frontend/src/components/dropdownComponent/index.tsx
@@ -1,3 +1,4 @@
+import { PopoverAnchor } from "@radix-ui/react-popover";
import { useRef, useState } from "react";
import { DropDownComponentType } from "../../types/components";
import { cn } from "../../utils/utils";
@@ -13,6 +14,7 @@ import {
} from "../ui/command";
import {
Popover,
+ PopoverContent,
PopoverContentWithoutPortal,
PopoverTrigger,
} from "../ui/popover";
@@ -25,50 +27,63 @@ export default function Dropdown({
onSelect,
editNode = false,
id = "",
+ children,
}: DropDownComponentType): JSX.Element {
- const [open, setOpen] = useState(false);
+ const [open, setOpen] = useState(children ? true : false);
const refButton = useRef
(null);
+ const PopoverContentDropdown = children
+ ? PopoverContent
+ : PopoverContentWithoutPortal;
+
return (
<>
{Object.keys(options)?.length > 0 ? (
<>
-
-
-
+
+ )}
+
@@ -98,7 +113,7 @@ export default function Dropdown({
-
+
) : (
diff --git a/src/frontend/src/components/EditFlowSettingsComponent/index.tsx b/src/frontend/src/components/editFlowSettingsComponent/index.tsx
similarity index 100%
rename from src/frontend/src/components/EditFlowSettingsComponent/index.tsx
rename to src/frontend/src/components/editFlowSettingsComponent/index.tsx
diff --git a/src/frontend/src/components/exampleComponent/index.tsx b/src/frontend/src/components/exampleComponent/index.tsx
index 347797c47..8df1c2d05 100644
--- a/src/frontend/src/components/exampleComponent/index.tsx
+++ b/src/frontend/src/components/exampleComponent/index.tsx
@@ -3,8 +3,8 @@ import useFlowsManagerStore from "../../stores/flowsManagerStore";
import { FlowType } from "../../types/flow";
import { updateIds } from "../../utils/reactflowUtils";
import { cn } from "../../utils/utils";
-import ShadTooltip from "../ShadTooltipComponent";
import IconComponent from "../genericIconComponent";
+import ShadTooltip from "../shadTooltipComponent";
import { Button } from "../ui/button";
import {
Card,
diff --git a/src/frontend/src/components/gradientChooserComponent/index.tsx b/src/frontend/src/components/gradientChooserComponent/index.tsx
index bff1fbd51..3467aedb8 100644
--- a/src/frontend/src/components/gradientChooserComponent/index.tsx
+++ b/src/frontend/src/components/gradientChooserComponent/index.tsx
@@ -2,7 +2,7 @@ import { gradients } from "../../utils/styleUtils";
export default function GradientChooserComponent({ value, onChange }) {
return (
-
+
{gradients.map((gradient, idx) => (
{
diff --git a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
index d61f64620..85a586b16 100644
--- a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
+++ b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
@@ -17,8 +17,8 @@ import useAlertStore from "../../../../stores/alertStore";
import useFlowStore from "../../../../stores/flowStore";
import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
import { cn } from "../../../../utils/utils";
-import ShadTooltip from "../../../ShadTooltipComponent";
import IconComponent from "../../../genericIconComponent";
+import ShadTooltip from "../../../shadTooltipComponent";
import { Button } from "../../../ui/button";
export const MenuBar = ({
diff --git a/src/frontend/src/components/headerComponent/index.tsx b/src/frontend/src/components/headerComponent/index.tsx
index 2973fe61a..bc2537ea2 100644
--- a/src/frontend/src/components/headerComponent/index.tsx
+++ b/src/frontend/src/components/headerComponent/index.tsx
@@ -168,50 +168,57 @@ export default function Header(): JSX.Element {
/>
)}
- {!autoLogin && (
- <>
-
-
-
-
-
-
- My Account
-
- {isAdmin && (
+
+ <>
+
+
+
+
+
+
+ General
+ navigate("/settings")}
+ >
+ Settings
+
+ {!autoLogin && (
+ <>
+
+ My Account
+ {isAdmin && (
+ navigate("/admin")}
+ >
+ Admin Page
+
+ )}
navigate("/admin")}
+ onClick={() => {
+ logout();
+ }}
>
- Admin Page
+ Sign Out
- )}
- navigate("/account/settings")}
- >
- Profile Settings
-
- {
- logout();
- }}
- >
- Sign Out
-
-
-
-
- )}
+
+ )}
+
+
+
@@ -192,7 +212,8 @@ export default function InputComponent({
{
setShowOptions((old) => !old);
e.preventDefault();
@@ -245,7 +271,7 @@ export default function InputComponent({
)}
- {setSelectedOption && (
+ {(setSelectedOption || setSelectedOptions) && (
state.getVariableId);
+ const unavaliableFields = useGlobalVariablesStore(
+ (state) => state.unavaliableFields
+ );
const removeGlobalVariable = useGlobalVariablesStore(
(state) => state.removeGlobalVariable
);
@@ -35,16 +37,35 @@ export default function InputGlobalComponent({
!globalVariablesEntries.includes(data.node?.template[name].value) &&
data.node?.template[name].load_from_db
) {
- onChange("");
- setDb(false);
+ setTimeout(() => {
+ onChange("");
+ setDb(false);
+ }, 100);
}
}, [globalVariablesEntries]);
- function handleDelete(key: string) {
+ useEffect(() => {
+ if (
+ !data.node?.template[name].value &&
+ data.node?.template[name].display_name
+ ) {
+ if (
+ unavaliableFields[data.node?.template[name].display_name!] &&
+ !disabled
+ ) {
+ setTimeout(() => {
+ setDb(true);
+ onChange(unavaliableFields[data.node?.template[name].display_name!]);
+ }, 100);
+ }
+ }
+ }, [unavaliableFields]);
+
+ async function handleDelete(key: string) {
const id = getVariableId(key);
if (id !== undefined) {
- deleteGlobalVariable(id)
- .then((_) => {
+ await deleteGlobalVariable(id)
+ .then(() => {
removeGlobalVariable(key);
if (
data?.node?.template[name].value === key &&
@@ -54,11 +75,10 @@ export default function InputGlobalComponent({
setDb(false);
}
})
- .catch((error) => {
- let responseError = error as ResponseErrorDetailAPI;
+ .catch(() => {
setErrorData({
title: "Error deleting variable",
- list: [responseError.response.data.detail ?? "Unknown error"],
+ list: [cn("ID not found for variable: ", key)],
});
});
} else {
@@ -117,7 +137,8 @@ export default function InputGlobalComponent({
)}
selectedOption={
- data?.node?.template[name].load_from_db ?? false
+ data?.node?.template[name].load_from_db &&
+ globalVariablesEntries.includes(data?.node?.template[name].value ?? "")
? data?.node?.template[name].value
: ""
}
diff --git a/src/frontend/src/components/inputListComponent/index.tsx b/src/frontend/src/components/inputListComponent/index.tsx
index b43c6df86..f0aa8cca7 100644
--- a/src/frontend/src/components/inputListComponent/index.tsx
+++ b/src/frontend/src/components/inputListComponent/index.tsx
@@ -12,6 +12,7 @@ export default function InputListComponent({
disabled,
editNode = false,
componentName,
+ playgroundDisabled,
}: InputListComponentType): JSX.Element {
useEffect(() => {
if (disabled && value.length > 0 && value[0] !== "") {
@@ -24,7 +25,7 @@ export default function InputListComponent({
value = [value];
}
- if (!value.length) value = [""];
+ if (!value?.length) value = [""];
return (
)}
diff --git a/src/frontend/src/components/keypairListComponent/index.tsx b/src/frontend/src/components/keypairListComponent/index.tsx
index fcd35e01e..2fa12e3b8 100644
--- a/src/frontend/src/components/keypairListComponent/index.tsx
+++ b/src/frontend/src/components/keypairListComponent/index.tsx
@@ -20,7 +20,13 @@ export default function KeypairListComponent({
}
}, [disabled]);
- const ref = useRef(value.length === 0 ? [{ "": "" }] : value);
+ const checkValueType = (value) => {
+ return Array.isArray(value) ? value : [value];
+ };
+
+ const ref = useRef([]);
+ ref.current =
+ !value || value?.length === 0 ? [{ "": "" }] : checkValueType(value);
useEffect(() => {
if (JSON.stringify(value) !== JSON.stringify(ref.current)) {
diff --git a/src/frontend/src/components/PaginatorComponent/index.tsx b/src/frontend/src/components/paginatorComponent/index.tsx
similarity index 100%
rename from src/frontend/src/components/PaginatorComponent/index.tsx
rename to src/frontend/src/components/paginatorComponent/index.tsx
diff --git a/src/frontend/src/components/SanitizedHTMLWrapper/index.tsx b/src/frontend/src/components/sanitizedHTMLWrapper/index.tsx
similarity index 100%
rename from src/frontend/src/components/SanitizedHTMLWrapper/index.tsx
rename to src/frontend/src/components/sanitizedHTMLWrapper/index.tsx
diff --git a/src/frontend/src/components/ShadTooltipComponent/index.tsx b/src/frontend/src/components/shadTooltipComponent/index.tsx
similarity index 100%
rename from src/frontend/src/components/ShadTooltipComponent/index.tsx
rename to src/frontend/src/components/shadTooltipComponent/index.tsx
diff --git a/src/frontend/src/components/tableComponent/index.tsx b/src/frontend/src/components/tableComponent/index.tsx
new file mode 100644
index 000000000..300aa5cc3
--- /dev/null
+++ b/src/frontend/src/components/tableComponent/index.tsx
@@ -0,0 +1,29 @@
+import "ag-grid-community/styles/ag-grid.css"; // Mandatory CSS required by the grid
+import "ag-grid-community/styles/ag-theme-quartz.css"; // Optional Theme applied to the grid
+import { AgGridReact } from "ag-grid-react";
+import { ComponentPropsWithoutRef, ElementRef, forwardRef } from "react";
+import { useDarkStore } from "../../stores/darkStore";
+import "../../style/ag-theme-shadcn.css"; // Custom CSS applied to the grid
+import { cn } from "../../utils/utils";
+
+const TableComponent = forwardRef<
+ ElementRef,
+ ComponentPropsWithoutRef
+>(({ pagination = true, ...props }, ref) => {
+ const dark = useDarkStore((state) => state.dark);
+
+ return (
+
+ );
+});
+
+export default TableComponent;
diff --git a/src/frontend/src/components/ViewTriggers/chat/index.tsx b/src/frontend/src/components/viewTriggers/chat/index.tsx
similarity index 100%
rename from src/frontend/src/components/ViewTriggers/chat/index.tsx
rename to src/frontend/src/components/viewTriggers/chat/index.tsx
diff --git a/src/frontend/src/constants/constants.ts b/src/frontend/src/constants/constants.ts
index 49483875c..6893d0d03 100644
--- a/src/frontend/src/constants/constants.ts
+++ b/src/frontend/src/constants/constants.ts
@@ -711,13 +711,22 @@ export const LANGFLOW_SUPPORTED_TYPES = new Set([
export const priorityFields = new Set(["code", "template"]);
-export const INPUT_TYPES = new Set(["ChatInput", "TextInput", "KeyPairInput"]);
+export const INPUT_TYPES = new Set([
+ "ChatInput",
+ "TextInput",
+ "KeyPairInput",
+ "JsonInput",
+ "StringListInput",
+]);
export const OUTPUT_TYPES = new Set([
"ChatOutput",
"TextOutput",
"PDFOutput",
"ImageOutput",
"CSVOutput",
+ "JsonOutput",
+ "KeyPairOutput",
+ "StringListOutput",
]);
export const CHAT_FIRST_INITIAL_TEXT =
diff --git a/src/frontend/src/controllers/API/index.ts b/src/frontend/src/controllers/API/index.ts
index b7746f826..787dc7664 100644
--- a/src/frontend/src/controllers/API/index.ts
+++ b/src/frontend/src/controllers/API/index.ts
@@ -1,5 +1,5 @@
-import { AxiosResponse } from "axios";
-import { ReactFlowJsonObject } from "reactflow";
+import { AxiosRequestConfig, AxiosResponse } from "axios";
+import { Edge, ReactFlowJsonObject,Node } from "reactflow";
import { BASE_URL_API } from "../../constants/constants";
import { api } from "../../controllers/API/api";
import {
@@ -862,13 +862,14 @@ export async function requestLogout() {
}
export async function getGlobalVariables(): Promise<{
- [key: string]: { id: string; type: string };
+ [key: string]: { id: string; type: string; default_fields: string[] };
}> {
const globalVariables = {};
(await api.get(`${BASE_URL_API}variables/`)).data.forEach((element) => {
globalVariables[element.name] = {
id: element.id,
type: element.type,
+ default_fields: element.default_fields,
};
});
return globalVariables;
@@ -878,20 +879,33 @@ export async function registerGlobalVariable({
name,
value,
type,
+ default_fields = [],
}: {
name: string;
value: string;
type?: string;
+ default_fields?: string[];
}): Promise> {
- return await api.post(`${BASE_URL_API}variables/`, {
- name,
- value,
- type,
- });
+ try {
+ const response = await api.post(`${BASE_URL_API}variables/`, {
+ name,
+ value,
+ type,
+ default_fields: default_fields,
+ });
+ return response;
+ } catch (error) {
+ throw error;
+ }
}
export async function deleteGlobalVariable(id: string) {
- api.delete(`${BASE_URL_API}variables/${id}`);
+ try {
+ const response = await api.delete(`${BASE_URL_API}variables/${id}`);
+ return response;
+ } catch (error) {
+ throw error;
+ }
}
export async function updateGlobalVariable(
@@ -899,26 +913,41 @@ export async function updateGlobalVariable(
value: string,
id: string
) {
- api.patch(`${BASE_URL_API}variables/${id}`, {
- name,
- value,
- });
+ try {
+ const response = api.patch(`${BASE_URL_API}variables/${id}`, {
+ name,
+ value,
+ });
+
+ return response;
+ } catch (error) {
+ throw error;
+ }
}
export async function getVerticesOrder(
flowId: string,
startNodeId?: string | null,
- stopNodeId?: string | null
+ stopNodeId?: string | null,
+ nodes?:Node[],
+ Edges?:Edge[]
): Promise> {
// nodeId is optional and is a query parameter
// if nodeId is not provided, the API will return all vertices
- const config = {};
+ const config:AxiosRequestConfig = {};
if (stopNodeId) {
config["params"] = { stop_component_id: stopNodeId };
} else if (startNodeId) {
config["params"] = { start_component_id: startNodeId };
}
- return await api.get(`${BASE_URL_API}build/${flowId}/vertices`, config);
+ const data = {
+ data:{}
+ }
+ if(nodes && Edges){
+ data["data"]["nodes"] = nodes
+ data["data"]["edges"] = Edges
+ }
+ return await api.post(`${BASE_URL_API}build/${flowId}/vertices`,data, config);
}
export async function postBuildVertex(
diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/customNodes/genericNode/components/parameterComponent/index.tsx
similarity index 99%
rename from src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
rename to src/frontend/src/customNodes/genericNode/components/parameterComponent/index.tsx
index eef861758..3fe99b89e 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/customNodes/genericNode/components/parameterComponent/index.tsx
@@ -1,7 +1,6 @@
import { cloneDeep } from "lodash";
import React, { ReactNode, useEffect, useRef, useState } from "react";
import { Handle, Position, useUpdateNodeInternals } from "reactflow";
-import ShadTooltip from "../../../../components/ShadTooltipComponent";
import CodeAreaComponent from "../../../../components/codeAreaComponent";
import DictComponent from "../../../../components/dictComponent";
import Dropdown from "../../../../components/dropdownComponent";
@@ -13,6 +12,7 @@ import InputListComponent from "../../../../components/inputListComponent";
import IntComponent from "../../../../components/intComponent";
import KeypairListComponent from "../../../../components/keypairListComponent";
import PromptAreaComponent from "../../../../components/promptComponent";
+import ShadTooltip from "../../../../components/shadTooltipComponent";
import TextAreaComponent from "../../../../components/textAreaComponent";
import ToggleShadComponent from "../../../../components/toggleShadComponent";
import { Button } from "../../../../components/ui/button";
@@ -618,7 +618,7 @@ export default function ParameterComponent({
diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/customNodes/genericNode/index.tsx
similarity index 99%
rename from src/frontend/src/CustomNodes/GenericNode/index.tsx
rename to src/frontend/src/customNodes/genericNode/index.tsx
index 29673fdb8..044d8cca4 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/customNodes/genericNode/index.tsx
@@ -1,9 +1,9 @@
import { cloneDeep } from "lodash";
import { useCallback, useEffect, useMemo, useState } from "react";
import { NodeToolbar, useUpdateNodeInternals } from "reactflow";
-import ShadTooltip from "../../components/ShadTooltipComponent";
import IconComponent from "../../components/genericIconComponent";
import InputComponent from "../../components/inputComponent";
+import ShadTooltip from "../../components/shadTooltipComponent";
import { Button } from "../../components/ui/button";
import Checkmark from "../../components/ui/checkmark";
import Loading from "../../components/ui/loading";
@@ -645,7 +645,11 @@ export default function GenericNode({
variant="secondary"
className={"group h-9 px-1.5"}
>
-
+
{renderIconStatus(buildStatus, validationStatus)}
diff --git a/src/frontend/src/modals/IOModal/components/IOFieldView/components/JSONInput/index.tsx b/src/frontend/src/modals/IOModal/components/IOFieldView/components/JSONInput/index.tsx
new file mode 100644
index 000000000..25ed5a099
--- /dev/null
+++ b/src/frontend/src/modals/IOModal/components/IOFieldView/components/JSONInput/index.tsx
@@ -0,0 +1,45 @@
+import { useEffect, useRef } from "react";
+import JsonView from "react18-json-view";
+import { useDarkStore } from "../../../../../../stores/darkStore";
+import { DictComponentType } from "../../../../../../types/components";
+
+export default function IoJsonInput({
+ value = [],
+ onChange,
+ left,
+ output,
+}: DictComponentType): JSX.Element {
+ useEffect(() => {
+ if (value) onChange(value);
+ }, [value]);
+ const isDark = useDarkStore((state) => state.dark);
+
+ const ref = useRef
(null);
+ ref.current = value;
+
+ const getClassNames = () => {
+ if (!isDark && !left) return "json-view-playground-white";
+ if (!isDark && left) return "json-view-playground-white-left";
+ if (isDark && left) return "json-view-playground-dark-left";
+ if (isDark && !left) return "json-view-playground-dark";
+ };
+
+ return (
+
+ {
+ ref.current = edit["src"];
+ }}
+ onChange={(edit) => {
+ ref.current = edit["src"];
+ }}
+ src={ref.current}
+ />
+
+ );
+}
diff --git a/src/frontend/src/modals/IOModal/components/IOFieldView/components/keyPairInput/index.tsx b/src/frontend/src/modals/IOModal/components/IOFieldView/components/keyPairInput/index.tsx
new file mode 100644
index 000000000..2e95e78ef
--- /dev/null
+++ b/src/frontend/src/modals/IOModal/components/IOFieldView/components/keyPairInput/index.tsx
@@ -0,0 +1,107 @@
+import _ from "lodash";
+import { useRef } from "react";
+import IconComponent from "../../../../../../components/genericIconComponent";
+import { Input } from "../../../../../../components/ui/input";
+import { classNames } from "../../../../../../utils/utils";
+
+export type IOKeyPairInputProps = {
+ value: any;
+ onChange: (value: any) => void;
+ duplicateKey: boolean;
+ isList: boolean;
+ isInputField?: boolean;
+};
+
+const IOKeyPairInput = ({
+ value,
+ onChange,
+ duplicateKey,
+ isList = true,
+ isInputField,
+}: IOKeyPairInputProps) => {
+ const checkValueType = (value) => {
+ return Array.isArray(value) ? value : [value];
+ };
+
+ const ref = useRef([]);
+ ref.current =
+ !value || value?.length === 0 ? [{ "": "" }] : checkValueType(value);
+
+ const handleChangeKey = (event, idx) => {
+ const oldKey = Object.keys(ref.current[idx])[0];
+ const updatedObj = { [event.target.value]: ref.current[idx][oldKey] };
+ ref.current[idx] = updatedObj;
+ onChange(ref.current);
+ };
+
+ const handleChangeValue = (newValue, idx) => {
+ const key = Object.keys(ref.current[idx])[0];
+ ref.current[idx][key] = newValue;
+ onChange(ref.current);
+ };
+
+ return (
+ <>
+
+
+ );
+};
+
+export default IOKeyPairInput;
diff --git a/src/frontend/src/modals/IOModal/components/IOFieldView/index.tsx b/src/frontend/src/modals/IOModal/components/IOFieldView/index.tsx
index dd02d19ca..36d8be382 100644
--- a/src/frontend/src/modals/IOModal/components/IOFieldView/index.tsx
+++ b/src/frontend/src/modals/IOModal/components/IOFieldView/index.tsx
@@ -1,6 +1,8 @@
import { cloneDeep } from "lodash";
+import { useState } from "react";
import ImageViewer from "../../../../components/ImageViewer";
import CsvOutputComponent from "../../../../components/csvOutputComponent";
+import InputListComponent from "../../../../components/inputListComponent";
import PdfViewer from "../../../../components/pdfViewer";
import {
Select,
@@ -15,7 +17,13 @@ import { PDFViewConstant } from "../../../../constants/constants";
import { InputOutput } from "../../../../constants/enums";
import useFlowStore from "../../../../stores/flowStore";
import { IOFieldViewProps } from "../../../../types/components";
+import {
+ convertValuesToNumbers,
+ hasDuplicateKeys,
+} from "../../../../utils/reactflowUtils";
import IOFileInput from "./components/FileInput";
+import IoJsonInput from "./components/JSONInput";
+import IOKeyPairInput from "./components/keyPairInput";
export default function IOFieldView({
type,
@@ -39,6 +47,7 @@ export default function IOFieldView({
}
}
};
+ const [errorDuplicateKey, setErrorDuplicateKey] = useState(false);
function handleOutputType() {
if (!node) return <>"No node found!";
@@ -78,6 +87,57 @@ export default function IOFieldView({
/>
);
+ case "KeyPairInput":
+ return (
+ {
+ if (node) {
+ let newNode = cloneDeep(node);
+ newNode.data.node!.template["input_value"].value = e;
+ setNode(node.id, newNode);
+ }
+ const valueToNumbers = convertValuesToNumbers(e);
+ setErrorDuplicateKey(hasDuplicateKeys(valueToNumbers));
+ }}
+ duplicateKey={errorDuplicateKey}
+ isList={node.data.node!.template["input_value"]?.list ?? false}
+ isInputField
+ />
+ );
+
+ case "JsonInput":
+ return (
+ {
+ if (node) {
+ let newNode = cloneDeep(node);
+ newNode.data.node!.template["input_value"].value = e;
+ setNode(node.id, newNode);
+ }
+ }}
+ left={left}
+ />
+ );
+
+ case "StringListInput":
+ return (
+ <>
+ {
+ if (node) {
+ let newNode = cloneDeep(node);
+ newNode.data.node!.template["input_value"].value = e;
+ setNode(node.id, newNode);
+ }
+ }}
+ disabled={false}
+ />
+
+ );
+
default:
return (
);
+ case "JsonOutput":
+ return (
+ {
+ if (node) {
+ let newNode = cloneDeep(node);
+ newNode.data.node!.template["input_value"].value = e;
+ setNode(node.id, newNode);
+ }
+ }}
+ left={left}
+ output
+ />
+ );
+
+ case "KeyPairOutput":
+ return (
+ {
+ if (node) {
+ let newNode = cloneDeep(node);
+ newNode.data.node!.template["input_value"].value = e;
+ setNode(node.id, newNode);
+ }
+ const valueToNumbers = convertValuesToNumbers(e);
+ setErrorDuplicateKey(hasDuplicateKeys(valueToNumbers));
+ }}
+ duplicateKey={errorDuplicateKey}
+ isList={node.data.node!.template["input_value"]?.list ?? false}
+ />
+ );
+
+ case "StringListOutput":
+ return (
+ <>
+ {
+ if (node) {
+ let newNode = cloneDeep(node);
+ newNode.data.node!.template["input_value"].value = e;
+ setNode(node.id, newNode);
+ }
+ }}
+ playgroundDisabled
+ disabled={false}
+ />
+
+ );
+
default:
return (