Feat: Add support to another input types on IO

src/frontend/src/components/IOInputField/index.tsx

@@ -0,0 +1,23 @@
+import { Textarea } from "../ui/textarea";
+import InputFileComponent from "../inputFileComponent";
+import { IOInputProps } from "../../types/components";
+
+export default function IOInputField({
+  inputType,
+  value,
+  onChange,
+  styleClasses,
+  placeholder,
+}: IOInputProps): JSX.Element | undefined {
+   switch (inputType) {
+    case "TextInput":
+        return (
+            <Textarea
+              className={styleClasses}
+              placeholder={placeholder}
+              value={value}
+              onChange={onChange}
+            />
+        );
+  }
+}

src/frontend/src/components/IOview/index.tsx

@@ -8,6 +8,7 @@ import IconComponent from "../genericIconComponent";
 import NewChatView from "../newChatView";
 import { Badge } from "../ui/badge";
 import { Textarea } from "../ui/textarea";
+import IOInputField from "../IOInputField";
 
 export default function IOView(): JSX.Element {
   const inputs = useFlowStore((state) => state.inputs);
@@ -17,7 +18,6 @@ export default function IOView(): JSX.Element {
   const nodes = useFlowStore((state) => state.nodes);
   const setNode = useFlowStore((state) => state.setNode);
   const options = inputIds.concat(outputIds);
-  console.log(options);
   const [selectedView, setSelectedView] = useState<ReactNode>(
     handleSelectChange(options[0])
   );
@@ -33,7 +33,7 @@ export default function IOView(): JSX.Element {
         break;
     }
   }
-
+  console.log(inputs)
   return (
     <div className="form-modal-iv-box">
       <div className="mr-6 flex h-full w-2/6 flex-col justify-start overflow-auto scrollbar-hide">
@@ -66,12 +66,11 @@ export default function IOView(): JSX.Element {
                 >
                   {/* TODO: EXTEND AND IMPROVE VIEW MODE AND ADD OTHER TYPES OF VIEWS */}
                   <div className="file-component-tab-column">
-                    <Textarea
+                    <IOInputField
-                      value={
+                      value={nodes.find((node) => node.id === inputId)?.data.node.template.value.value}
-                        nodes.find((node) => node.id === inputId)?.data?.node
+                      styleClasses="custom-scroll"
-                          ?.template?.value.value
+                      placeholder="Enter text..."
-                      }
+                      inputType={inputs.find((input) => input.id === inputId)?.type!}
-                      className="custom-scroll"
                       onChange={(e) => {
                         e.target.value;
                         if (node) {
@@ -81,8 +80,7 @@ export default function IOView(): JSX.Element {
                             setNode(node.id, newNode);
                         }
                         }}
-                      placeholder="Enter text..."
+                    />
-                    ></Textarea>
                   </div>
                 </AccordionComponent>
               </div>

src/frontend/src/controllers/API/index.ts

@@ -856,7 +856,6 @@ export async function requestLogout() {
 export async function getVerticesOrder(
   flowId: string
 ): Promise<AxiosResponse<VerticesOrderTypeAPI>> {
-  console.log;
   return await api.get(`${BASE_URL_API}build/${flowId}/vertices`);
 }
 

src/frontend/src/types/components/index.ts

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode } from "react";
+import { ChangeEvent, ReactElement, ReactNode } from "react";
 import { ReactFlowJsonObject, XYPosition } from "reactflow";
 import { APIClassType, APITemplateType, TemplateVariableType } from "../api";
 import { ChatMessageType } from "../chat";
@@ -645,3 +645,11 @@ export type dropdownButtonPropsType = {
   onFirstBtnClick: () => void;
   options: Array<{ name: string; onBtnClick: () => void }>;
 };
+
+export type IOInputProps = {
+  inputType: string;
+  value: string;
+  onChange: (e: ChangeEvent<HTMLTextAreaElement>) => void;
+  styleClasses: string;
+  placeholder: string;
+}