From 8223ff5d32493bc68befdb940be145e448b685b3 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Mon, 20 Feb 2023 21:53:53 -0300
Subject: [PATCH] Input and Output handles fixed

---
 .../src/CustomNodes/ChatInputNode/index.tsx   | 49 ++++++++++++-------
 .../src/CustomNodes/ChatOutputNode/index.tsx  |  7 ++-
 2 files changed, 37 insertions(+), 19 deletions(-)

diff --git a/space_flow/src/CustomNodes/ChatInputNode/index.tsx b/space_flow/src/CustomNodes/ChatInputNode/index.tsx
index eeefe8acd..db0852907 100644
--- a/space_flow/src/CustomNodes/ChatInputNode/index.tsx
+++ b/space_flow/src/CustomNodes/ChatInputNode/index.tsx
@@ -1,4 +1,7 @@
-import { Bars3CenterLeftIcon, ChatBubbleBottomCenterTextIcon } from "@heroicons/react/24/outline";
+import {
+  Bars3CenterLeftIcon,
+  ChatBubbleBottomCenterTextIcon,
+} from "@heroicons/react/24/outline";
 import InputComponent from "../../components/inputComponent";
 import { isValidConnection, nodeColors, snakeToNormalCase } from "../../utils";
 import { Handle, Position } from "reactflow";
@@ -7,32 +10,44 @@ import { typesContext } from "../../contexts/typesContext";
 import { useContext } from "react";
 
 export default function ChatInputNode({ data }) {
-  const {types} = useContext(typesContext);
+  const { types } = useContext(typesContext);
   return (
-    <div className="prompt-node relative rounded-lg solid border flex justify-center align-center py-3 px-6 bg-gray-50" style={{color: nodeColors[types[data.type]]}}>
+    <div
+      className="prompt-node relative rounded-lg solid border flex justify-center align-center py-3 px-6 bg-gray-50"
+      style={{ color: nodeColors[types[data.type]] }}
+    >
       <Tooltip title="Prefix: str">
         <Handle
           type="target"
-          position={Position.Left}
-          id={"str|Prefix|" + data.id}
           isValidConnection={(connection) =>
             isValidConnection(data, connection)
           }
-          className="ml-1 bg-transparent border-solid border-l-8 border-y-transparent border-y-8 border-r-0 rounded-none"
-          style={{ borderLeftColor: nodeColors[types[data.type]] }}
+          position={Position.Left}
+          id={"str|Prefix|" + data.id}
+          className={"-ml-0.5 w-3 h-3 rounded-full border-2 bg-white"}
+          style={{
+            borderColor: nodeColors[types[data.type]],
+          }}
         ></Handle>
       </Tooltip>
-        <Tooltip title={"Message: str"}>
-      <Handle
-        type="source"
-        position={Position.Right}
-        id={'str|str|'+data.id}
-        isValidConnection={(connection) => isValidConnection(data,connection)}
-        className="-mr-1 bg-transparent border-solid border-l-8 border-y-transparent border-y-8 border-r-0 rounded-none"
-        style={{borderLeftColor: nodeColors[types[data.type]]}}
-      ></Handle>
+      <Tooltip title={"Message: str"}>
+        <Handle
+          type="source"
+          isValidConnection={(connection) =>
+            isValidConnection(data, connection)
+          }
+          position={Position.Right}
+          id={"str|str|" + data.id}
+          className={"-mr-0.5  w-3 h-3 rounded-full border-2 bg-white"}
+          style={{
+            borderColor: nodeColors[types[data.type]],
+          }}
+        ></Handle>
       </Tooltip>
-      <div className="flex gap-3 text-lg font-medium items-center" style={{color: nodeColors[types[data.type]]}}>
+      <div
+        className="flex gap-3 text-lg font-medium items-center"
+        style={{ color: nodeColors[types[data.type]] }}
+      >
         <Bars3CenterLeftIcon className="h-8 w-8 mt-1" />
         Input
       </div>
diff --git a/space_flow/src/CustomNodes/ChatOutputNode/index.tsx b/space_flow/src/CustomNodes/ChatOutputNode/index.tsx
index c85d5b969..b5445860d 100644
--- a/space_flow/src/CustomNodes/ChatOutputNode/index.tsx
+++ b/space_flow/src/CustomNodes/ChatOutputNode/index.tsx
@@ -16,8 +16,11 @@ export default function ChatOutputNode({ data }) {
           isValidConnection={(connection) => isValidConnection(data,connection)}
           position={Position.Left}
           id={"str|output|"+data.id}
-          className="ml-1 bg-transparent border-solid border-l-8 border-y-transparent border-y-8 border-r-0 rounded-none"
-          style={{borderLeftColor: nodeColors['chat']}}
+          className={"-ml-0.5 w-3 h-3 rounded-full border-2 bg-white"
+          }
+          style={{
+            borderColor: nodeColors[types[data.type]],
+          }}
         ></Handle>
       </Tooltip>