feat(IOview): add support for rendering IOOutputView component based on selected output type

feat(IOOutputView): create IOOutputView component to render different types of output views based on output type

fix(utils): add helper functions isInputType and isOutputType to check if a type is an input or output type

The changes were made to add support for rendering different types of output views in the IOView component. The IOOutputView component was created to handle rendering of different types of output views based on the output type. Helper functions isInputType and isOutputType were added to the utils file to check if a type is an input or output type.

src/frontend/src/components/IOOutputView/index.tsx

@@ -0,0 +1,47 @@
+import { cloneDeep } from "lodash";
+import useFlowStore from "../../stores/flowStore";
+import { IOOutputProps } from "../../types/components";
+import { Textarea } from "../ui/textarea";
+
+export default function IOOutputView({
+  outputType,
+  outputId,
+}: IOOutputProps): JSX.Element | undefined {
+  const nodes = useFlowStore((state) => state.nodes);
+  const setNode = useFlowStore((state) => state.setNode);
+  const flowPool = useFlowStore((state) => state.flowPool);
+  const node = nodes.find((node) => node.id === outputId);
+  function handleOutputType() {
+    if (!node) return "no node found";
+    switch (outputType) {
+      case "TextOutput":
+        return (
+          <Textarea
+            className="h-full w-full custom-scroll"
+            placeholder={"Enter text..."}
+            // update to real value on flowPool
+            value={flowPool[node.id][flowPool[node.id].length - 1].data.results}
+            readOnly
+          />
+        );
+
+      default:
+        return (
+          <Textarea
+            className="h-full w-full custom-scroll"
+            placeholder={"Enter text..."}
+            value={node.data.node!.template["value"]}
+            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 w-full">{handleOutputType()}</div>;
+}

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

@@ -1,9 +1,11 @@
 import { ReactNode, useState } from "react";
 import useFlowStore from "../../stores/flowStore";
 import { NodeType } from "../../types/flow";
+import { isInputType, isOutputType } from "../../utils/reactflowUtils";
 import { classNames } from "../../utils/utils";
 import AccordionComponent from "../AccordionComponent";
 import IOInputField from "../IOInputField";
+import IOOutputView from "../IOOutputView";
 import IconComponent from "../genericIconComponent";
 import NewChatView from "../newChatView";
 import { Badge } from "../ui/badge";
@@ -43,16 +45,12 @@ export default function IOView(): JSX.Element {
 
   function handleSelectChange(): ReactNode {
     const { type, id } = selectedView;
-    switch (type) {
-      case "ChatOutput":
-        return <NewChatView />;
-        break;
-      case "TextInput":
-        return <IOInputField inputId={id!} inputType={type} />;
-      default:
-        //create empty view output screen
-        return <div>no view selected</div>;
-    }
+    if (type === "ChatOutput") return <NewChatView />;
+    if (isInputType(type))
+      return <IOInputField inputId={id!} inputType={type} />;
+    if (isOutputType(type))
+      return <IOOutputView outputId={id!} outputType={type} />;
+    else return <div>no view selected</div>;
   }
 
   function UpdateAccordion() {

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

@@ -651,6 +651,10 @@ export type IOInputProps = {
   inputType: string;
   inputId: string;
 };
+export type IOOutputProps = {
+  outputType: string;
+  outputId: string;
+};
 
 export type IOFileInputProps = {
   field: TemplateVariableType;

src/frontend/src/utils/reactflowUtils.ts

@@ -1307,3 +1307,11 @@ export function isInputNode(nodeData: NodeDataType): boolean {
 export function isOutputNode(nodeData: NodeDataType): boolean {
   return OUTPUT_TYPES.has(nodeData.type);
 }
+
+export function isInputType(type: string): boolean {
+  return INPUT_TYPES.has(type);
+}
+
+export function isOutputType(type: string): boolean {
+  return OUTPUT_TYPES.has(type);
+}