From f9ecfb528777d01f3d071dfdd508f0490375a0d3 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Wed, 15 Feb 2023 16:34:39 -0300
Subject: [PATCH] updated build for new version of the api

---
 .../src/CustomNodes/GenericNode/index.tsx     |  3 +-
 .../src/components/inputComponent/index.tsx   |  3 +-
 .../FlowPage/components/connection/index.tsx  | 50 +++++++++++++++++++
 space_flow/src/pages/FlowPage/index.tsx       |  3 +-
 4 files changed, 56 insertions(+), 3 deletions(-)
 create mode 100644 space_flow/src/pages/FlowPage/components/connection/index.tsx

diff --git a/space_flow/src/CustomNodes/GenericNode/index.tsx b/space_flow/src/CustomNodes/GenericNode/index.tsx
index 14fa3c04c..165b4789f 100644
--- a/space_flow/src/CustomNodes/GenericNode/index.tsx
+++ b/space_flow/src/CustomNodes/GenericNode/index.tsx
@@ -10,6 +10,7 @@ import { nodeColors, nodeIcons, snakeToNormalCase } from "../../utils";
 import Tooltip from "../../components/TooltipComponent";
 
 export default function GenericNode({ data }) {
+  console.log(data)
   const Icon = nodeIcons[data.type];
   return (
     <div className="prompt-node relative bg-white w-96 rounded-lg solid border flex flex-col justify-center">
@@ -46,7 +47,7 @@ export default function GenericNode({ data }) {
                 onSelect={() => {}}
               />
             ) : data.node.template[t].type === "str" ? (
-              <Input title={snakeToNormalCase(t)} placeholder="pleicerolder" onChange={() => {}} />
+              <Input title={snakeToNormalCase(t)} value={data.node.template[t].value} placeholder={data.node.template[t].placeholder??"aasas"} onChange={() => {}} />
             ) : (
               <></>
             )}
diff --git a/space_flow/src/components/inputComponent/index.tsx b/space_flow/src/components/inputComponent/index.tsx
index 98a8d91a3..cd434a68e 100644
--- a/space_flow/src/components/inputComponent/index.tsx
+++ b/space_flow/src/components/inputComponent/index.tsx
@@ -1,4 +1,4 @@
-export default function Input({title, placeholder, onChange}){
+export default function Input({title, placeholder, onChange, value}){
     return (
         <>
             <div>
@@ -7,6 +7,7 @@ export default function Input({title, placeholder, onChange}){
                 </label>
                 <div className="mt-1">
                     <input
+                    value={(value as string).length>0?value:""}
                     type="text"
                     className="block w-full form-input rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
                     placeholder={placeholder}
diff --git a/space_flow/src/pages/FlowPage/components/connection/index.tsx b/space_flow/src/pages/FlowPage/components/connection/index.tsx
new file mode 100644
index 000000000..bcb657c61
--- /dev/null
+++ b/space_flow/src/pages/FlowPage/components/connection/index.tsx
@@ -0,0 +1,50 @@
+import { CSSProperties, FC } from 'react';
+import { Node } from 'reactflow';
+
+interface ConnectionLineComponentProps {
+	fromX: number;
+	fromY: number;
+	fromPosition: string;
+	toX: number;
+	toY: number;
+  fromNode:Node;
+	toPosition: string;
+	connectionLineType: string;
+	connectionLineStyle: CSSProperties;
+}
+
+const ConnectionLineComponent = ({
+	fromX,
+	fromY,
+	fromPosition,
+	toX,
+	toY,
+	toPosition,
+	connectionLineType,
+  fromNode={},
+	connectionLineStyle = {} // provide a default value for connectionLineStyle
+}) => {
+  console.log(fromNode)
+	return (
+		<g>
+			<path
+				fill="none"
+				stroke="#222"
+				strokeWidth={1.5}
+				className="animated"
+				d={`M${fromX},${fromY} C ${fromX} ${toY} ${fromX} ${toY} ${toX},${toY}`}
+				style={connectionLineStyle}
+			/>
+			<circle
+				cx={toX}
+				cy={toY}
+				fill="#fff"
+				r={3}
+				stroke="#222"
+				strokeWidth={1.5}
+			/>
+		</g>
+	);
+};
+
+export default ConnectionLineComponent;
diff --git a/space_flow/src/pages/FlowPage/index.tsx b/space_flow/src/pages/FlowPage/index.tsx
index d99d8866f..c4ab88369 100644
--- a/space_flow/src/pages/FlowPage/index.tsx
+++ b/space_flow/src/pages/FlowPage/index.tsx
@@ -10,7 +10,7 @@ import { locationContext } from "../../contexts/locationContext";
 import ExtraSidebar from "./components/extraSidebarComponent";
 import Chat from "../../components/chatComponent";
 import GenericNode from "../../CustomNodes/GenericNode";
-
+import connection from "./components/connection";
 const nodeTypes = {
   genericNode:GenericNode,
 };
@@ -83,6 +83,7 @@ export default function FlowPage() {
         onConnect={onConnect}
         onInit={setReactFlowInstance}
         nodeTypes={nodeTypes}
+        connectionLineComponent={connection}
         onDragOver={onDragOver}
         onDrop={onDrop}
         fitView