update (#130)

stepwise-studio/components/step-node.tsx

@@ -337,42 +337,22 @@ const StepNode: React.FC<NodeProps<StepNodeProps>> = (prop) => {
 
 	useEffect(() => {
 		if (stepNodeRef.current) {
-			// this usually means that the content of this node has changed
-			// so we want to automatically adjust the weight to present the content in a nicer way
-			// by setting the width to undefined, the prop.data.onResize will be invoked
-			// and the new width will be re-calculated when the node is re-rendered
-			// if (
-			// 	height !== stepNodeRef.current.offsetHeight &&
-			// 	width === stepNodeRef.current.offsetWidth &&
-			// 	width !== undefined
-			// ) {
-			// 	console.log("Setting width to undefined");
-			// 	prop.data.onResize(
-			// 		undefined,
-			// 		undefined,
-			// 	);
-
-			// 	return;
-			// }
-
-			if (
-				height !== stepNodeRef.current.offsetHeight ||
-				width !== stepNodeRef.current.offsetWidth
-			) {
+			if (width === undefined && stepNodeRef.current.offsetWidth) {
+				setWidth(stepNodeRef.current.offsetWidth);
+				setHeight(stepNodeRef.current.offsetHeight);
+			} else {
 				prop.data.onResize(
-					stepNodeRef.current.offsetHeight ?? height,
-					width ?? stepNodeRef.current.offsetWidth,
+					stepNodeRef.current.offsetHeight,
+					stepNodeRef.current.offsetWidth,
 				);
-
-				return;
 			}
 		}
 	}, [
+		width,
+		height,
 		stepNodeRef.current,
 		stepNodeRef.current?.offsetHeight,
 		stepNodeRef.current?.offsetWidth,
-		width,
-		height,
 	]);
 
 	return (
@@ -786,38 +766,4 @@ const StepNode: React.FC<NodeProps<StepNodeProps>> = (prop) => {
 	);
 };
 
-const ResizableStepNode = React.forwardRef<
-	HTMLDivElement,
-	NodeProps<StepNodeProps>
->((props, ref) => {
-	const [width, setWidth] = useState<number | undefined>(props.data.width);
-	const [height, setHeight] = useState<number | undefined>(props.data.height);
-
-	useEffect(() => {
-		if (props.data.width && props.data.height) {
-			console.log(
-				"Setting width and height: ",
-				props.data.width,
-				props.data.height,
-			);
-			setWidth(props.data.width);
-			setHeight(props.data.height);
-		}
-	}, [props.data.width, props.data.height]);
-
-	return height && width ? (
-		<div
-			ref={ref}
-			style={{
-				width: `${width}px`,
-				height: `${height}px`,
-			}}
-		>
-			<StepNode {...props} />
-		</div>
-	) : (
-		<StepNode {...props} />
-	);
-});
-
 export { StepNode };

stepwise-studio/components/step-run-sidebar.tsx

@@ -153,7 +153,7 @@ const StepRunSidebar: React.FC<StepRunSidebarProps> = () => {
 	const { selectedStepRunHistory } = useStepRunHistoryStore();
 	const page = useChatSideBarStore((state) => state.page);
 	return (
-		<div className="flex flex-col border-2 h-screen h-max-screen p-4 shadow-xl gap-2 bg-sidebar rounded-lg">
+		<div className="flex flex-col h-screen h-max-screen p-4 shadow-xl gap-2 bg-sidebar">
 			<ChatNavigationTopBar />
 			{page === "chat" && (
 				<div className="flex flex-col grow overflow-y-auto">

stepwise-studio/components/workflow.tsx

@@ -94,7 +94,7 @@ const WorkflowInner: React.FC<WorkflowProps> = (props) => {
 			var position = workflow.stepPositions[stepNodeID];
 			var size = workflow.stepSizes[stepNodeID];
 			return {
-				id: `${workflow.name}-${step.name}`,
+				id: stepNodeID,
 				type: "stepNode",
 				position: position,
 				...(size ?? { width: 200, height: 100 }), // if size is not defined, use default size
@@ -150,11 +150,12 @@ const WorkflowInner: React.FC<WorkflowProps> = (props) => {
 					},
 					onResize: (height, width) => {
 						if (!selectedWorkflow) return selectedWorkflow;
+						const stepNodeID = `${workflow.name}-${step.name}`;
 						setSelectedWorkflow({
 							...selectedWorkflow,
 							stepSizes: {
 								...selectedWorkflow.stepSizes,
-								[step.name]:
+								[stepNodeID]:
 									height && width
 										? { height, width }
 										: undefined,