String and chat nodes added, handles design changed

space_flow/src/CustomNodes/ChatInputNode/index.tsx

@@ -0,0 +1,21 @@
+import { ChatBubbleBottomCenterTextIcon } from "@heroicons/react/24/outline";
+import Input from "../../components/inputComponent";
+import { snakeToNormalCase } from "../../utils";
+import { Handle, Position } from "reactflow";
+
+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">
+      <Handle
+        type="target"
+        position={Position.Right}
+        id="b"
+        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>
+      <div className="flex gap-3 text-lg font-medium text-white items-center">
+        <ChatBubbleBottomCenterTextIcon className="h-8 w-8 mt-1" />
+        Input
+      </div>
+    </div>
+  );
+}

space_flow/src/CustomNodes/ChatOutputNode/index.tsx

@@ -0,0 +1,23 @@
+import { ChatBubbleBottomCenterTextIcon } from "@heroicons/react/24/outline";
+import { Handle, Position } from "reactflow";
+import Input from "../../components/inputComponent";
+import { snakeToNormalCase } from "../../utils";
+
+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">
+        <Handle
+          type="source"
+          position={Position.Left}
+          id="b"
+          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>
+    );
+
+}

space_flow/src/CustomNodes/GenericNode/index.tsx

@@ -18,7 +18,9 @@ export default function GenericNode({ data }) {
           type="source"
           position={Position.Left}
           id="b"
-          className="bg-gray-400 w-4 h-4 rounded-full"
+          isConnectable={false}
+          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]}}
         ></Handle>
       </Tooltip>
       <div className="w-full flex items-center justify-between p-4 bg-gray-50 border-b ">
@@ -29,7 +31,6 @@ export default function GenericNode({ data }) {
           />
           {data.name}
         </div>
-        <ArrowUpRightIcon className="w-4 h-4" />
       </div>
 
       <div className="w-full p-5 h-full">
@@ -46,7 +47,7 @@ export default function GenericNode({ data }) {
                 onSelect={() => {}}
               />
             ) : data.node.template[t].type === "str" ? (
-              <Input title={snakeToNormalCase(t)} value={data.node.template[t].value} placeholder={data.node.template[t].placeholder??"aasas"} onChange={() => {}} />
+              <></>
             ) : (
               <></>
             )}
@@ -59,16 +60,13 @@ export default function GenericNode({ data }) {
         <button onClick={data.onDelete}>
           <TrashIcon className="w-6 h-6 hover:text-red-500"></TrashIcon>
         </button>
-        <button onClick={data.onRun}>
-          <PlayIcon className="w-6 h-6 hover:text-green-500"></PlayIcon>
-        </button>
       </div>
       <Handle
         type="target"
         position={Position.Right}
         id="b"
-        className="bg-gray-400 w-4 h-4 rounded-full"
-        style={{ background: nodeColors[data.type] }}
+        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>
     </div>
   );

space_flow/src/CustomNodes/InputNode/index.tsx

@@ -0,0 +1,41 @@
+import { Bars3CenterLeftIcon, TrashIcon } from "@heroicons/react/24/outline";
+import Input from "../../components/inputComponent";
+import { nodeColors, nodeIcons, snakeToNormalCase } from "../../utils";
+import { Handle, Position } from "reactflow";
+
+export default function InputNode({ data }) {
+  return (
+    <div className="prompt-node relative bg-white w-96 rounded-lg solid border flex flex-col justify-center">
+      <div className="w-full flex items-center justify-between p-4 bg-gray-50 border-b ">
+        <div className="flex items-center gap-4 text-lg">
+          <Bars3CenterLeftIcon
+            className="w-10 h-10 p-1 text-white rounded"
+            style={{ background: nodeColors[data.type] }}
+          />
+          String
+        </div>
+      </div>
+      <div className="w-full p-5 h-full">
+        <Input
+          onChange={(e) => {
+            data.text = e;
+          }}
+        />
+      </div>
+
+      <div className="flex w-full justify-between items-center bg-gray-50 gap-2 border-t text-gray-600 p-4 text-sm">
+        <button onClick={() => {data.onDelete(data)}}>
+          <TrashIcon className="w-6 h-6 hover:text-red-500"></TrashIcon>
+        </button>
+        <button onClick={data.onRun}></button>
+      </div>
+      <Handle
+        type="target"
+        position={Position.Right}
+        id="b"
+        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>
+    </div>
+  );
+}