Input and Output handles fixed

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"
+          position={Position.Left}
-          style={{ borderLeftColor: nodeColors[types[data.type]] }}
+          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"}>
+      <Tooltip title={"Message: str"}>
-      <Handle
+        <Handle
-        type="source"
+          type="source"
-        position={Position.Right}
+          isValidConnection={(connection) =>
-        id={'str|str|'+data.id}
+            isValidConnection(data, connection)
-        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"
+          position={Position.Right}
-        style={{borderLeftColor: nodeColors[types[data.type]]}}
+          id={"str|str|" + data.id}
-      ></Handle>
+          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>

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"
+          className={"-ml-0.5 w-3 h-3 rounded-full border-2 bg-white"
-          style={{borderLeftColor: nodeColors['chat']}}
+          }
+          style={{
+            borderColor: nodeColors[types[data.type]],
+          }}
         ></Handle>
       </Tooltip>