From 160aa47e26c76e628a966b32622f5150b11e1747 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Mon, 26 Feb 2024 21:44:44 +0100
Subject: [PATCH] Made back button on chat and fixed output and input exibition

---
 .../src/CustomNodes/GenericNode/index.tsx     |   4 +-
 .../src/components/IOInputField/index.tsx     |  13 +--
 .../src/components/IOOutputView/index.tsx     |  16 +--
 src/frontend/src/components/IOview/index.tsx  | 101 +++++++++++-------
 src/frontend/src/utils/styleUtils.ts          |   2 +
 5 files changed, 77 insertions(+), 59 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index 18ce539c6..733484845 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -477,11 +477,11 @@ export default function GenericNode({
                       ) : (
                         <div className="max-h-96 overflow-auto">
                           {typeof validationStatus.params === "string"
-                            ? `${durationString}\n${validationStatus.params}`
+                            ? (`${durationString}\n${validationStatus.params}`
                                 .split("\n")
                                 .map((line, index) => (
                                   <div key={index}>{line}</div>
-                                ))
+                                )))
                             : durationString}
                         </div>
                       )
diff --git a/src/frontend/src/components/IOInputField/index.tsx b/src/frontend/src/components/IOInputField/index.tsx
index e5b661927..e7aac5928 100644
--- a/src/frontend/src/components/IOInputField/index.tsx
+++ b/src/frontend/src/components/IOInputField/index.tsx
@@ -12,12 +12,12 @@ export default function IOInputField({
   const setNode = useFlowStore((state) => state.setNode);
   const node = nodes.find((node) => node.id === inputId);
   function handleInputType() {
-    if (!node) return "no node found";
+    if (!node) return <>"No node found!"</>;
     switch (inputType) {
       case "TextInput":
         return (
           <Textarea
-            className="h-full w-full custom-scroll"
+            className="w-full"
             placeholder={"Enter text..."}
             value={node.data.node!.template["value"].value}
             onChange={(e) => {
@@ -47,7 +47,7 @@ export default function IOInputField({
       default:
         return (
           <Textarea
-            className="h-full w-full custom-scroll"
+            className="w-full custom-scroll"
             placeholder={"Enter text..."}
             value={node.data.node!.template["value"]}
             onChange={(e) => {
@@ -62,10 +62,5 @@ export default function IOInputField({
         );
     }
   }
-  return (
-    <div className="font-xl flex h-full w-full flex-col items-start gap-4 p-4 font-semibold">
-      {inputType}
-      {handleInputType()}
-    </div>
-  );
+  return handleInputType();
 }
diff --git a/src/frontend/src/components/IOOutputView/index.tsx b/src/frontend/src/components/IOOutputView/index.tsx
index a31ac2796..acf041356 100644
--- a/src/frontend/src/components/IOOutputView/index.tsx
+++ b/src/frontend/src/components/IOOutputView/index.tsx
@@ -11,17 +11,16 @@ export default function IOOutputView({
   const setNode = useFlowStore((state) => state.setNode);
   const flowPool = useFlowStore((state) => state.flowPool);
   const node = nodes.find((node) => node.id === outputId);
-  console.log(flowPool[node!.id][flowPool[node!.id].length - 1])
   function handleOutputType() {
-    if (!node) return "no node found";
+    if (!node) return <>"No node found!"</>;
     switch (outputType) {
       case "TextOutput":
         return (
           <Textarea
-            className="h-full w-full custom-scroll"
+            className="w-full custom-scroll"
             placeholder={"Empty"}
             // update to real value on flowPool
-            value={flowPool[node.id][flowPool[node.id].length - 1].params}
+            value={((flowPool[node.id] ?? [])[(flowPool[node.id]?.length ?? 1) - 1])?.params ?? ""}
             readOnly
           />
         );
@@ -29,7 +28,7 @@ export default function IOOutputView({
       default:
         return (
           <Textarea
-            className="h-full w-full custom-scroll"
+            className="w-full custom-scroll"
             placeholder={"Enter text..."}
             value={node.data.node!.template["value"]}
             onChange={(e) => {
@@ -44,10 +43,5 @@ export default function IOOutputView({
         );
     }
   }
-  return (
-    <div className="font-xl flex h-full w-full flex-col items-start gap-4 p-4 font-semibold">
-      {outputType}
-      {handleOutputType()}
-    </div>
-  );
+  return handleOutputType();
 }
diff --git a/src/frontend/src/components/IOview/index.tsx b/src/frontend/src/components/IOview/index.tsx
index d745ca1b4..3b1059fe4 100644
--- a/src/frontend/src/components/IOview/index.tsx
+++ b/src/frontend/src/components/IOview/index.tsx
@@ -50,23 +50,22 @@ export default function IOView({ children, open, setOpen }): JSX.Element {
   async function sendMessage(count = 1): Promise<void> {
     if (isBuilding) return;
     const { nodes, edges } = getFlow();
-      setIsBuilding(true);
-      setLockChat(true);
-      setChatValue("");
-      const chatInputNode = nodes.find((node) => node.id === chatInput?.id);
-      if (chatInputNode) {
-        let newNode = cloneDeep(chatInputNode);
-        newNode.data.node!.template["message"].value = chatValue;
-        setNode(chatInput!.id, newNode);
-      }
-      for (let i = 0; i < count; i++) {
-        await buildFlow().catch((err) => {
-          console.error(err);
-          setLockChat(false);
-        });
-      }
-      setLockChat(false);
-
+    setIsBuilding(true);
+    setLockChat(true);
+    setChatValue("");
+    const chatInputNode = nodes.find((node) => node.id === chatInput?.id);
+    if (chatInputNode) {
+      let newNode = cloneDeep(chatInputNode);
+      newNode.data.node!.template["message"].value = chatValue;
+      setNode(chatInput!.id, newNode);
+    }
+    for (let i = 0; i < count; i++) {
+      await buildFlow().catch((err) => {
+        console.error(err);
+        setLockChat(false);
+      });
+    }
+    setLockChat(false);
   }
 
   useEffect(() => {
@@ -249,27 +248,55 @@ export default function IOView({ children, open, setOpen }): JSX.Element {
             )}
 
             {haveChat ? (
-              selectedViewField ? (
-                inputs.some((input) => input.id === selectedViewField.id) ? (
-                  <IOInputField
-                    inputType={selectedViewField.type!}
-                    inputId={selectedViewField.id!}
+              <div className="flex h-full w-full">
+                {selectedViewField && (
+                  <div
+                    className={cn(
+                      "flex h-full w-full flex-col items-start gap-4 p-4",
+                      !selectedViewField ? "hidden" : ""
+                    )}
+                  >
+                    <div className="font-xl flex items-center justify-center gap-3 font-semibold">
+                      <button onClick={() => setSelectedViewField(undefined)}>
+                        <IconComponent
+                          name={"ArrowLeft"}
+                          className="h-6 w-6"
+                        ></IconComponent>
+                      </button>
+                      {selectedViewField.type}
+                    </div>
+                    <div className="flex h-full w-full">
+                      {inputs.some(
+                        (input) => input.id === selectedViewField.id
+                      ) ? (
+                        <IOInputField
+                          inputType={selectedViewField.type!}
+                          inputId={selectedViewField.id!}
+                        />
+                      ) : (
+                        <IOOutputView
+                          outputType={selectedViewField.type!}
+                          outputId={selectedViewField.id!}
+                        />
+                      )}
+                    </div>
+                  </div>
+                )}
+                <div
+                  className={cn(
+                    "flex h-full w-full",
+                    selectedViewField ? "hidden" : ""
+                  )}
+                >
+                  <NewChatView
+                    sendMessage={sendMessage}
+                    chatValue={chatValue}
+                    setChatValue={setChatValue}
+                    lockChat={lockChat}
+                    setLockChat={setLockChat}
                   />
-                ) : (
-                  <IOOutputView
-                    outputType={selectedViewField.type!}
-                    outputId={selectedViewField.id!}
-                  />
-                )
-              ) : (
-                <NewChatView
-                  sendMessage={sendMessage}
-                  chatValue={chatValue}
-                  setChatValue={setChatValue}
-                  lockChat={lockChat}
-                  setLockChat={setLockChat}
-                />
-              )
+                </div>
+              </div>
             ) : (
               <div className="absolute bottom-8 right-8"></div>
             )}
diff --git a/src/frontend/src/utils/styleUtils.ts b/src/frontend/src/utils/styleUtils.ts
index 347078d3a..2f9907965 100644
--- a/src/frontend/src/utils/styleUtils.ts
+++ b/src/frontend/src/utils/styleUtils.ts
@@ -1,5 +1,6 @@
 import {
   AlertCircle,
+  ArrowLeft,
   ArrowUpToLine,
   Bell,
   BookMarked,
@@ -340,6 +341,7 @@ export const nodeIconsLucide: iconsType = {
   Bell,
   ChevronLeft,
   ChevronDown,
+  ArrowLeft,
   Shield,
   Plus,
   Redo,