From ec313e4f3b9c61a36943e0e09d31f1c9525604ee Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Tue, 30 Jan 2024 15:55:25 -0300
Subject: [PATCH] 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/components/IOOutputView/index.tsx     | 47 +++++++++++++++++++
 src/frontend/src/components/IOview/index.tsx  | 18 ++++---
 src/frontend/src/types/components/index.ts    |  4 ++
 src/frontend/src/utils/reactflowUtils.ts      |  8 ++++
 4 files changed, 67 insertions(+), 10 deletions(-)
 create mode 100644 src/frontend/src/components/IOOutputView/index.tsx

diff --git a/src/frontend/src/components/IOOutputView/index.tsx b/src/frontend/src/components/IOOutputView/index.tsx
new file mode 100644
index 000000000..aed4317b8
--- /dev/null
+++ b/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>;
+}
diff --git a/src/frontend/src/components/IOview/index.tsx b/src/frontend/src/components/IOview/index.tsx
index cff0f8b16..3ffc61964 100644
--- a/src/frontend/src/components/IOview/index.tsx
+++ b/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() {
diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts
index d5f7cc665..77ab541ba 100644
--- a/src/frontend/src/types/components/index.ts
+++ b/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;
diff --git a/src/frontend/src/utils/reactflowUtils.ts b/src/frontend/src/utils/reactflowUtils.ts
index 94bd9d6dc..2c525ce7e 100644
--- a/src/frontend/src/utils/reactflowUtils.ts
+++ b/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);
+}