fix(IOview/index.tsx): import classNames function from utils/utils to fix compilation error

feat(IOview/index.tsx): add support for dynamic categories based on available inputs and outputs
feat(IOview/index.tsx): add functionality to select and display different views based on selected category
fix(flowStore.ts): fix logic for determining if flow has inputs or outputs

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

@@ -2,7 +2,7 @@ import { cloneDeep } from "lodash";
 import { ReactNode, useState } from "react";
 import useFlowStore from "../../stores/flowStore";
 import { NodeType } from "../../types/flow";
-import { extractTypeFromLongId } from "../../utils/utils";
+import { classNames } from "../../utils/utils";
 import AccordionComponent from "../AccordionComponent";
 import IOInputField from "../IOInputField";
 import IconComponent from "../genericIconComponent";
@@ -16,30 +16,65 @@ export default function IOView(): JSX.Element {
   const outputIds = outputs.map((obj) => obj.id);
   const nodes = useFlowStore((state) => state.nodes);
   const setNode = useFlowStore((state) => state.setNode);
-  const options = inputIds.concat(outputIds);
+  const categories = getCategories();
-  //TODO: show output options for view
+  const [selectedCategory, setSelectedCategory] = useState<string>(
-  const [selectedView, setSelectedView] = useState<ReactNode>(
+    categories[0]
-    handleSelectChange(options[0])
   );
-  // if (outputTypes.includes("ChatOutput")) {
+  //TODO: show output options for view
-  //   return <NewChatView />;
+  const [selectedView, setSelectedView] = useState<string>("Chat");
-  // }
+
-  function handleSelectChange(selected: string) {
+  function getCategories() {
-    const type = extractTypeFromLongId(selected);
+    const categories: string[] = [];
-    return <NewChatView />;
+    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 {
+    if (selectedCategory === "Chat") return <NewChatView />;
     switch (type) {
-      case "ChatOutput":
+      case "Chat":
         return <NewChatView />;
         break;
+      // case "TextInput":
+      //   break;
+      default:
+        //create empty view output screen
+        return <div>no view selected</div>;
     }
   }
-  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">
-        <div className="file-component-arrangement">
+        <div className="flex items-start gap-4 py-2">
-          <IconComponent name="Variable" className=" file-component-variable" />
+          {categories.map((category, index) => {
-          <span className="file-component-variables-span text-md">Inputs</span>
+            return (
+              //hide chat button if chat is alredy on the view
+              !(selectedView === category && category === "Chat") && (
+                <button
+                  onClick={() => setSelectedCategory(category)}
+                  className={classNames(
+                    "cursor flex items-center rounded-md rounded-b-none px-1",
+                    category == selectedCategory
+                      ? "border border-b-0 border-muted-foreground"
+                      : "hover:bg-muted-foreground"
+                  )}
+                  key={index}
+                >
+                  <IconComponent
+                    name="Variable"
+                    className=" file-component-variable"
+                  />
+                  <span className="file-component-variables-span text-md">
+                    {category}
+                  </span>
+                </button>
+              )
+            );
+          })}
         </div>
         {inputs
           .filter((input) => input.type !== "ChatInput")
@@ -86,7 +121,7 @@ export default function IOView(): JSX.Element {
             );
           })}
       </div>
-      {selectedView}
+      {handleSelectChange(selectedView)}
     </div>
   );
 }

src/frontend/src/stores/flowStore.ts

@@ -82,7 +82,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
       flowState: undefined,
       inputs,
       outputs,
-      hasIO: inputs.length > 0 && outputs.length > 0,
+      hasIO: inputs.length > 0 || outputs.length > 0,
       flowPool,
     });
     get().reactFlowInstance!.setViewport(viewport);
@@ -124,7 +124,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
       flowState: undefined,
       inputs,
       outputs,
-      hasIO: inputs.length > 0 && outputs.length > 0,
+      hasIO: inputs.length > 0 || outputs.length > 0,
     });
 
     const flowsManager = useFlowsManagerStore.getState();