Refactor IOInputField component and update dependencies

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

@@ -1,36 +1,54 @@
+import { cloneDeep } from "lodash";
+import useFlowStore from "../../stores/flowStore";
 import { IOInputProps } from "../../types/components";
-import IOFileInput from "../IOInputs/FileInput";
 import { Textarea } from "../ui/textarea";
 
 export default function IOInputField({
   inputType,
-  field,
+  inputId,
-  updateValue,
 }: IOInputProps): JSX.Element | undefined {
+  const nodes = useFlowStore((state) => state.nodes);
+  const setNode = useFlowStore((state) => state.setNode);
+  const node = nodes.find((node) => node.id === inputId);
   function handleInputType() {
+    if (!node) return "no node found";
     switch (inputType) {
       case "TextInput":
         return (
           <Textarea
-            className="custom-scroll"
+            className="h-full w-full custom-scroll"
             placeholder={"Enter text..."}
-            value={field.value}
+            value={node.data.node!.template["value"].value}
-            onChange={updateValue}
+            onChange={(e) => {
+              e.target.value;
+              if (node) {
+                let newNode = cloneDeep(node);
+                newNode.data.node!.template["value"].value = e.target.value;
+                setNode(node.id, newNode);
+              }
+            }}
           />
         );
       case "fileLoader":
-        return <IOFileInput field={field} updateValue={updateValue} />;
+      // return <IOFileInput />;
 
       default:
         return (
           <Textarea
-            className="custom-scroll"
+            className="h-full w-full custom-scroll"
             placeholder={"Enter text..."}
-            value={field.value}
+            value={node.data.node!.template["value"]}
-            onChange={updateValue}
+            onChange={(e) => {
+              e.target.value;
+              if (node) {
+                let newNode = cloneDeep(node);
+                newNode.data.node!.template["value"].value = e.target.value;
+                setNode(node.id, newNode);
+              }
+            }}
           />
         );
     }
   }
-  return <div className="h-full">{handleInputType()}</div>;
+  return <div className="h-full w-full">{handleInputType()}</div>;
 }

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

@@ -1,4 +1,3 @@
-import { cloneDeep } from "lodash";
 import { ReactNode, useState } from "react";
 import useFlowStore from "../../stores/flowStore";
 import { NodeType } from "../../types/flow";
@@ -20,32 +19,47 @@ export default function IOView(): JSX.Element {
   const [selectedCategory, setSelectedCategory] = useState<string>(
     categories[0]
   );
+  const [showChat, setShowChat] = useState<boolean>(false);
   //TODO: show output options for view
-  const [selectedView, setSelectedView] = useState<string>("Chat");
+  const [selectedView, setSelectedView] = useState<{
+    type: string;
+    id?: string;
+  }>(handleInitialView());
+
+  function handleInitialView() {
+    if (outputs.map((output) => output.type).includes("ChatOutput")) {
+      return { type: "ChatOutput" };
+    }
+    return { type: "" };
+  }
 
   function getCategories() {
     const categories: string[] = [];
     if (inputs.length > 0) categories.push("Inputs");
     if (outputs.filter((output) => output.type !== "ChatOutput").length > 0)
       categories.push("Outputs");
-    if (outputs.map((output) => output.type).includes("ChatOutput"))
-      categories.push("Chat");
     return categories;
   }
 
-  function handleSelectChange(type?: string): ReactNode {
+  function handleSelectChange(): ReactNode {
-    if (selectedCategory === "Chat") return <NewChatView />;
+    const { type, id } = selectedView;
     switch (type) {
-      case "Chat":
+      case "ChatOutput":
         return <NewChatView />;
         break;
-      // case "TextInput":
+      case "TextInput":
-      //   break;
+        console.log("rodoussss");
+        return <IOInputField inputId={id!} inputType={type} />;
       default:
         //create empty view output screen
         return <div>no view selected</div>;
     }
   }
+
+  function UpdateAccordion() {
+    return selectedCategory === "Inputs" ? inputs : outputs;
+  }
+
   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">
@@ -53,28 +67,43 @@ export default function IOView(): JSX.Element {
           {categories.map((category, index) => {
             return (
               //hide chat button if chat is alredy on the view
-              !(selectedView === category && category === "Chat") && (
+              <button
-                <button
+                onClick={() => setSelectedCategory(category)}
-                  onClick={() => setSelectedCategory(category)}
+                className={classNames(
-                  className={classNames(
+                  "cursor flex items-center rounded-md rounded-b-none px-1",
-                    "cursor flex items-center rounded-md rounded-b-none px-1",
+                  category == selectedCategory
-                    category == selectedCategory
+                    ? "border border-b-0 border-muted-foreground"
-                      ? "border border-b-0 border-muted-foreground"
+                    : "hover:bg-muted-foreground"
-                      : "hover:bg-muted-foreground"
+                )}
-                  )}
+                key={index}
-                  key={index}
+              >
-                >
+                <IconComponent
-                  <IconComponent
+                  name="Variable"
-                    name="Variable"
+                  className=" file-component-variable"
-                    className=" file-component-variable"
+                />
-                  />
+                <span className="file-component-variables-span text-md">
-                  <span className="file-component-variables-span text-md">
+                  {category}
-                    {category}
+                </span>
-                  </span>
+              </button>
-                </button>
-              )
             );
           })}
+          {selectedView.type !== "ChatOutput" && (
+            <button
+              onClick={() => setSelectedView({ type: "ChatOutput" })}
+              className={
+                "cursor flex items-center rounded-md rounded-b-none px-1 hover:bg-muted-foreground"
+              }
+              key={"chat"}
+            >
+              <IconComponent
+                name="Variable"
+                className=" file-component-variable"
+              />
+              <span className="file-component-variables-span text-md">
+                Chat
+              </span>
+            </button>
+          )}
         </div>
         {inputs
           .filter((input) => input.type !== "ChatInput")
@@ -89,11 +118,17 @@ export default function IOView(): JSX.Element {
                         {input.id}
                       </Badge>
                       <div
-                        className="-mb-1"
+                        className="-mb-1 pr-4"
                         onClick={(event) => {
                           event.stopPropagation();
+                          setSelectedView({ type: input.type, id: input.id });
                         }}
-                      ></div>
+                      >
+                        <IconComponent
+                          className="h-4 w-4"
+                          name="ScreenShare"
+                        ></IconComponent>
+                      </div>
                     </div>
                   }
                   key={index}
@@ -101,19 +136,7 @@ export default function IOView(): JSX.Element {
                 >
                   <div className="file-component-tab-column">
                     {node && (
-                      <IOInputField
+                      <IOInputField inputType={input.type} inputId={input.id} />
-                        field={node.data.node!.template["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>
@@ -121,7 +144,7 @@ export default function IOView(): JSX.Element {
             );
           })}
       </div>
-      {handleSelectChange(selectedView)}
+      {handleSelectChange()}
     </div>
   );
 }

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

@@ -649,8 +649,7 @@ export type dropdownButtonPropsType = {
 
 export type IOInputProps = {
   inputType: string;
-  field: TemplateVariableType;
+  inputId: string;
-  updateValue: (e: any) => void;
 };
 
 export type IOFileInputProps = {

src/frontend/src/utils/styleUtils.ts

@@ -77,6 +77,7 @@ import {
   Save,
   SaveAll,
   Scissors,
+  ScreenShare,
   Search,
   Settings2,
   Share,
@@ -388,4 +389,5 @@ export const nodeIconsLucide: iconsType = {
   TerminalIcon,
   Repeat,
   io: ArrowDownUp,
+  ScreenShare,
 };