From 7796450365034b31cc0b0d01bc62e036e945f633 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Thu, 16 Feb 2023 00:22:02 -0300
Subject: [PATCH] Tooltips added to match the types

---
 .../src/CustomNodes/ChatInputNode/index.tsx   |  3 ++
 .../src/CustomNodes/ChatOutputNode/index.tsx  | 28 +++++++++------
 .../src/CustomNodes/GenericNode/index.tsx     | 34 +++++++++++++------
 3 files changed, 44 insertions(+), 21 deletions(-)

diff --git a/space_flow/src/CustomNodes/ChatInputNode/index.tsx b/space_flow/src/CustomNodes/ChatInputNode/index.tsx
index 1e5a27c65..f607e19af 100644
--- a/space_flow/src/CustomNodes/ChatInputNode/index.tsx
+++ b/space_flow/src/CustomNodes/ChatInputNode/index.tsx
@@ -2,10 +2,12 @@ import { ChatBubbleBottomCenterTextIcon } from "@heroicons/react/24/outline";
 import Input from "../../components/inputComponent";
 import { snakeToNormalCase } from "../../utils";
 import { Handle, Position } from "reactflow";
+import Tooltip from "../../components/TooltipComponent";
 
 export default function ChatInputNode({ data }) {
   return (
     <div className="prompt-node relative rounded-lg solid border flex justify-center align-center py-3 px-6 bg-blue-600">
+        <Tooltip title={"Message: str"}>
       <Handle
         type="target"
         position={Position.Right}
@@ -13,6 +15,7 @@ export default function ChatInputNode({ data }) {
         isValidConnection={({sourceHandle, targetHandle}) => (targetHandle === sourceHandle || data.types[targetHandle] === sourceHandle || sourceHandle === 'str')}
         className="-mr-1 bg-transparent border-solid border-l-8 border-l-blue-600 border-y-transparent border-y-8 border-r-0 rounded-none"
       ></Handle>
+      </Tooltip>
       <div className="flex gap-3 text-lg font-medium text-white items-center">
         <ChatBubbleBottomCenterTextIcon className="h-8 w-8 mt-1" />
         Input
diff --git a/space_flow/src/CustomNodes/ChatOutputNode/index.tsx b/space_flow/src/CustomNodes/ChatOutputNode/index.tsx
index 069308f96..b284f27ea 100644
--- a/space_flow/src/CustomNodes/ChatOutputNode/index.tsx
+++ b/space_flow/src/CustomNodes/ChatOutputNode/index.tsx
@@ -2,23 +2,29 @@ import { ChatBubbleBottomCenterTextIcon } from "@heroicons/react/24/outline";
 import { Handle, Position } from "reactflow";
 import Input from "../../components/inputComponent";
 import { snakeToNormalCase } from "../../utils";
+import Tooltip from "../../components/TooltipComponent";
 
 export default function ChatOutputNode({ data }) {
-
-    return (
-        <div className="prompt-node relative rounded-lg solid border flex justify-center align-center py-3 px-6 bg-blue-600">
+  return (
+    <div className="prompt-node relative rounded-lg solid border flex justify-center align-center py-3 px-6 bg-blue-600">
+      <Tooltip title="Message: str">
         <Handle
           type="source"
-          isConnectable={false}
+          isValidConnection={({ sourceHandle, targetHandle }) =>
+            targetHandle === sourceHandle ||
+            data.types[targetHandle] === sourceHandle ||
+            sourceHandle === "str"
+          }
           position={Position.Left}
           id="str"
           className="ml-1 bg-transparent border-solid border-l-8 border-l-white border-y-transparent border-y-8 border-r-0 rounded-none"
         ></Handle>
-        <div className="flex gap-3 text-lg font-medium text-white items-center">
-          Output
-          <ChatBubbleBottomCenterTextIcon className="h-8 w-8 mt-1" />
-        </div>
-      </div>
-    );
+      </Tooltip>
 
-}
\ No newline at end of file
+      <div className="flex gap-3 text-lg font-medium text-white items-center">
+        Output
+        <ChatBubbleBottomCenterTextIcon className="h-8 w-8 mt-1" />
+      </div>
+    </div>
+  );
+}
diff --git a/space_flow/src/CustomNodes/GenericNode/index.tsx b/space_flow/src/CustomNodes/GenericNode/index.tsx
index 0f155e423..3df3fe8b2 100644
--- a/space_flow/src/CustomNodes/GenericNode/index.tsx
+++ b/space_flow/src/CustomNodes/GenericNode/index.tsx
@@ -34,9 +34,17 @@ export default function GenericNode({ data }) {
                 type="source"
                 position={Position.Left}
                 id={data.node.template[t].type}
+                isValidConnection={({ sourceHandle, targetHandle }) =>
+                  targetHandle === sourceHandle ||
+                  data.types[targetHandle] === sourceHandle ||
+                  sourceHandle === "str"
+                }
                 className="ml-1 bg-transparent border-solid border-l-8 border-y-transparent border-y-8 border-r-0 rounded-none"
-                style={{borderLeftColor: nodeColors[data.type], marginTop: ((idx*30)-50) + "px"}}
-            ></Handle>
+                style={{
+                  borderLeftColor: nodeColors[data.type],
+                  marginTop: idx * 30 - 50 + "px",
+                }}
+              ></Handle>
             </Tooltip>
           </div>
         ))}
@@ -48,14 +56,20 @@ export default function GenericNode({ data }) {
           <TrashIcon className="w-6 h-6 hover:text-red-500"></TrashIcon>
         </button>
       </div>
-      <Handle
-        type="target"
-        position={Position.Right}
-        id={data.name}
-        isValidConnection={({sourceHandle, targetHandle}) => (targetHandle === sourceHandle || data.types[targetHandle] === sourceHandle || sourceHandle === 'str')}
-        className="-mr-1 bg-transparent border-solid border-l-8 border-y-transparent border-y-8 border-r-0 rounded-none"
-        style={{borderLeftColor: nodeColors[data.type]}}
-      ></Handle>
+      <Tooltip title={"Output: " + data.name}>
+        <Handle
+          type="target"
+          position={Position.Right}
+          id={data.name}
+          isValidConnection={({ sourceHandle, targetHandle }) =>
+            targetHandle === sourceHandle ||
+            data.types[targetHandle] === sourceHandle ||
+            sourceHandle === "str"
+          }
+          className="-mr-1 bg-transparent border-solid border-l-8 border-y-transparent border-y-8 border-r-0 rounded-none"
+          style={{ borderLeftColor: nodeColors[data.type] }}
+        ></Handle>
+      </Tooltip>
     </div>
   );
 }