Add file input component to IOInputField and update IOView to use new input structure

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

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
+        {inputs
-          .filter((input) => extractTypeFromLongId(input) !== "ChatInput")
+          .filter((input) => input.type !== "ChatInput")
-          .map((inputId, index) => {
+          .map((input, index) => {
-            const node: NodeType = nodes.find((node) => node.id === inputId)!;
+            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,17 +62,13 @@ export default function IOView(): JSX.Element {
                     </div>
                   }
                   key={index}
-                  keyValue={inputId}
+                  keyValue={input.id}
                 >
                   <div className="file-component-tab-column">
+                    {node && (
                       <IOInputField
-                      value={
+                        value={node.data.node!.template.value.value}
-                        nodes.find((node) => node.id === inputId)?.data.node
+                        inputType={input.type}
-                          .template.value.value
-                      }
-                      inputType={
-                        inputs.find((input) => input.id === inputId)?.type!
-                      }
                         updateValue={(e) => {
                           e.target.value;
                           if (node) {
@@ -83,6 +79,7 @@ export default function IOView(): JSX.Element {
                           }
                         }}
                       />
+                    )}
                   </div>
                 </AccordionComponent>
               </div>