From ff112cfd341139a14bda336aa4e799e86d20773b Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Fri, 26 Jan 2024 14:52:00 -0300
Subject: [PATCH] Add file input component to IOInputField and update IOView to
 use new input structure

---
 .../src/components/IOInputField/index.tsx     |  3 ++
 src/frontend/src/components/IOview/index.tsx  | 45 +++++++++----------
 2 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/src/frontend/src/components/IOInputField/index.tsx b/src/frontend/src/components/IOInputField/index.tsx
index e860c922e..f260a2bee 100644
--- a/src/frontend/src/components/IOInputField/index.tsx
+++ b/src/frontend/src/components/IOInputField/index.tsx
@@ -17,6 +17,9 @@ export default function IOInputField({
             onChange={updateValue}
           />
         );
+      case "fileInput":
+        return <div></div>;
+
       default:
         return (
           <Textarea
diff --git a/src/frontend/src/components/IOview/index.tsx b/src/frontend/src/components/IOview/index.tsx
index 654db86ff..f9a8aaf81 100644
--- a/src/frontend/src/components/IOview/index.tsx
+++ b/src/frontend/src/components/IOview/index.tsx
@@ -41,17 +41,17 @@ export default function IOView(): JSX.Element {
           <IconComponent name="Variable" className=" file-component-variable" />
           <span className="file-component-variables-span text-md">Inputs</span>
         </div>
-        {inputIds
-          .filter((input) => extractTypeFromLongId(input) !== "ChatInput")
-          .map((inputId, index) => {
-            const node: NodeType = nodes.find((node) => node.id === inputId)!;
+        {inputs
+          .filter((input) => input.type !== "ChatInput")
+          .map((input, index) => {
+            const node: NodeType = nodes.find((node) => node.id === input.id)!;
             return (
               <div className="file-component-accordion-div" key={index}>
                 <AccordionComponent
                   trigger={
                     <div className="file-component-badge-div">
                       <Badge variant="gray" size="md">
-                        {inputId}
+                        {input.id}
                       </Badge>
                       <div
                         className="-mb-1"
@@ -62,27 +62,24 @@ export default function IOView(): JSX.Element {
                     </div>
                   }
                   key={index}
-                  keyValue={inputId}
+                  keyValue={input.id}
                 >
                   <div className="file-component-tab-column">
-                    <IOInputField
-                      value={
-                        nodes.find((node) => node.id === inputId)?.data.node
-                          .template.value.value
-                      }
-                      inputType={
-                        inputs.find((input) => input.id === inputId)?.type!
-                      }
-                      updateValue={(e) => {
-                        e.target.value;
-                        if (node) {
-                          let newNode = cloneDeep(node);
-                          newNode.data.node!.template["value"].value =
-                            e.target.value;
-                          setNode(node.id, newNode);
-                        }
-                      }}
-                    />
+                    {node && (
+                      <IOInputField
+                        value={node.data.node!.template.value.value}
+                        inputType={input.type}
+                        updateValue={(e) => {
+                          e.target.value;
+                          if (node) {
+                            let newNode = cloneDeep(node);
+                            newNode.data.node!.template["value"].value =
+                              e.target.value;
+                            setNode(node.id, newNode);
+                          }
+                        }}
+                      />
+                    )}
                   </div>
                 </AccordionComponent>
               </div>