From 48995bc3958dff55e63a07de4b11e9c14f59d0df Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Wed, 29 Mar 2023 20:27:39 -0300
Subject: [PATCH] implemented inputFile component

---
 .../components/parameterComponent/index.tsx   | 16 ++++-
 .../components/inputFileComponent/index.tsx   | 58 +++++++++++++++++++
 src/frontend/src/contexts/tabsContext.tsx     |  3 +-
 src/frontend/src/types/flow/index.ts          |  1 +
 4 files changed, 76 insertions(+), 2 deletions(-)
 create mode 100644 src/frontend/src/components/inputFileComponent/index.tsx

diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index c4b4346fa..203907ff1 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -11,6 +11,7 @@ import { ParameterComponentType } from "../../../../types/components";
 import FloatComponent from "../../../../components/floatComponent";
 import Dropdown from "../../../../components/dropdownComponent";
 import CodeAreaComponent from "../../../../components/codeAreaComponent";
+import InputFileComponent from "../../../../components/inputFileComponent";
 
 export default function ParameterComponent({
 	left,
@@ -54,7 +55,12 @@ export default function ParameterComponent({
 					{title}
 					<span className="text-red-600">{required ? " *" : ""}</span>
 				</div>
-				{left && (type === "str" || type === "bool" || type === "float"||type=="code") ? (
+				{left &&
+				(type === "str" ||
+					type === "bool" ||
+					type === "float" ||
+					type === "code" ||
+					type === "file") ? (
 					<></>
 				) : (
 					<Tooltip title={tooltipTitle + (required ? " (required)" : "")}>
@@ -148,6 +154,14 @@ export default function ParameterComponent({
 							data.node.template[name].value = t;
 						}}
 					/>
+				) : left === true && type === "file" ? (
+					<InputFileComponent
+						disabled={disabled}
+						value={data.node.template[name].value ?? ""}
+						onChange={(t: string) => {
+							data.node.template[name].value = t;
+						}}
+					></InputFileComponent>
 				) : (
 					<></>
 				)}
diff --git a/src/frontend/src/components/inputFileComponent/index.tsx b/src/frontend/src/components/inputFileComponent/index.tsx
new file mode 100644
index 000000000..c1dfae10c
--- /dev/null
+++ b/src/frontend/src/components/inputFileComponent/index.tsx
@@ -0,0 +1,58 @@
+import { DocumentMagnifyingGlassIcon } from "@heroicons/react/24/outline";
+import { useContext, useEffect, useState } from "react";
+import { TextAreaComponentType } from "../../types/components";
+
+export default function InputFileComponent({
+	value,
+	onChange,
+	disabled,
+}: TextAreaComponentType) {
+	const [myValue, setMyValue] = useState(value);
+	useEffect(() => {
+		if (disabled) {
+			setMyValue("");
+			onChange("");
+		}
+	}, [disabled, onChange]);
+
+	const handleButtonClick = () => {
+		const input = document.createElement("input");
+		input.type = "file";
+		// input.accept = ".yaml";
+		input.style.display = "none";
+		input.onchange = (e: Event) => {
+			const file = (e.target as HTMLInputElement).files?.[0];
+			//check file type
+            // file.name.endsWith(".yaml")
+            if (file) {
+				setMyValue(file.name);
+				onChange(file.name);
+			}
+		};
+		input.click();
+	};
+
+	return (
+		<div
+			className={
+				disabled ? "pointer-events-none cursor-not-allowed w-full" : "w-full"
+			}
+		>
+			<div className="w-full flex items-center gap-3">
+				<span
+					className={
+						"truncate block max-w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
+						(disabled ? " bg-gray-200" : "")
+					}
+				>
+					{myValue !== "" ? myValue : "No file"}
+				</span>
+				<button
+                onClick={handleButtonClick}
+                >
+					<DocumentMagnifyingGlassIcon className="w-6 h-6 hover:text-blue-600" />
+				</button>
+			</div>
+		</div>
+	);
+}
diff --git a/src/frontend/src/contexts/tabsContext.tsx b/src/frontend/src/contexts/tabsContext.tsx
index 10c0b943e..1c75a1466 100644
--- a/src/frontend/src/contexts/tabsContext.tsx
+++ b/src/frontend/src/contexts/tabsContext.tsx
@@ -16,7 +16,7 @@ const TabsContextInitialValue: TabsContextType = {
 	uploadFlow: () => {},
 	lockChat: false,
 	setLockChat:(prevState:boolean)=>{},
-	hardReset:()=>{}
+	hardReset:()=>{},
 };
 
 export const TabsContext = createContext<TabsContextType>(
@@ -142,6 +142,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
 			id: id.toString(),
 			data,
 			chat: flow ? flow.chat : [],
+			files:{}
 		};
 
 		// Increment the ID counter.
diff --git a/src/frontend/src/types/flow/index.ts b/src/frontend/src/types/flow/index.ts
index 50b0cab7a..90dc6ac5f 100644
--- a/src/frontend/src/types/flow/index.ts
+++ b/src/frontend/src/types/flow/index.ts
@@ -8,6 +8,7 @@ export type FlowType = {
 	data: ReactFlowJsonObject;
 	chat: Array<ChatMessageType>;
 	description:string;
+	files:{[char: string]: string};
 };
 export type NodeType = {id:string,type:string,position:XYPosition,data:NodeDataType}
 export type NodeDataType = {type:string,node?:APIClassType,id:string,value:any}
\ No newline at end of file