fix loop bug + credits ui change

eg9y · May 29, 2023 · 8db53ce · 8db53ce · vercel · May 29, 2023
1 parent c8cca72
commit 8db53ce
Show file tree

Hide file tree

Showing 8 changed files with 28 additions and 50 deletions.
diff --git a/packages/server/.vscode/settings.json b/packages/server/.vscode/settings.json
diff --git a/packages/web/src/nodes/ChatPromptNode.tsx b/packages/web/src/nodes/ChatPromptNode.tsx
@@ -12,12 +12,7 @@ const ChatPrompt: FC<NodeProps<ChatPromptNodeDataType>> = (props) => {
 	const [showFullScreen, setShowFullScreen] = useState(false);
 
 	return (
-		<div
-			className={conditionalClassNames(
-				data.isDetailMode && 'h-[40rem] w-[35rem]',
-				`m-3 shadow-lg`,
-			)}
-		>
+		<div className={conditionalClassNames(data.isDetailMode && 'h-[40rem] w-[35rem]', `m-3`)}>
 			<NodeTemplate
 				{...props}
 				title="Chat"

diff --git a/packages/web/src/nodes/ClassifyNode.tsx b/packages/web/src/nodes/ClassifyNode.tsx
@@ -25,7 +25,7 @@ const Classify: FC<NodeProps<ClassifyNodeDataType>> = (props) => {
 	// TODO: Fullscreen button to edit prompts with a larger display
 	return (
 		<>
-			<div className={conditionalClassNames(`m-3 shadow-lg`)}>
+			<div className={conditionalClassNames(`m-3 `)}>
 				{RunnableToolbarTemplate(data, selected, updateNode, id)}
 				{/* how to spread  */}
 				<div className="">

diff --git a/packages/web/src/nodes/LLMPromptNode.tsx b/packages/web/src/nodes/LLMPromptNode.tsx
@@ -26,7 +26,7 @@ const LLMPrompt: FC<NodeProps<LLMPromptNodeDataType>> = (props) => {
 			<div
 				className={conditionalClassNames(
 					data.isDetailMode && 'h-[40rem] w-[35rem]',
-					`m-3 shadow-lg`,
+					`m-3 `,
 				)}
 			>
 				{RunnableToolbarTemplate(data, selected, updateNode, id)}

diff --git a/packages/web/src/nodes/SearchNode.tsx b/packages/web/src/nodes/SearchNode.tsx
@@ -42,7 +42,7 @@ const Search: FC<NodeProps<SearchDataType>> = (props) => {
 			<div
 				className={conditionalClassNames(
 					data.isDetailMode && 'h-[40rem] w-[35rem]',
-					`m-3 shadow-lg `,
+					`m-3 `,
 				)}
 			>
 				<NodeTemplate

diff --git a/packages/web/src/nodes/SingleChatPromptNode.tsx b/packages/web/src/nodes/SingleChatPromptNode.tsx
@@ -21,7 +21,7 @@ const SingleChatPrompt: FC<NodeProps<SingleChatPromptDataType>> = (props) => {
 			<div
 				className={conditionalClassNames(
 					data.isDetailMode && 'h-[40rem] w-[35rem]',
-					`m-3 shadow-lg`,
+					`m-3 `,
 				)}
 			>
 				{/* how to spread  */}

diff --git a/packages/web/src/nodes/templates/NodeTemplate.tsx b/packages/web/src/nodes/templates/NodeTemplate.tsx
@@ -112,28 +112,6 @@ const NodeTemplate: FC<
 			<NodeToolbar position={Position.Top} isVisible={data.isLoading}>
 				<Loading className="h-12 w-12 animate-spin text-green-500" />
 			</NodeToolbar>
-			<NodeToolbar
-				position={Position.Bottom}
-				isVisible={
-					!!type &&
-					[
-						NodeTypesEnum.chatPrompt,
-						NodeTypesEnum.singleChatPrompt,
-						NodeTypesEnum.classify,
-						NodeTypesEnum.llmPrompt,
-						NodeTypesEnum.search,
-					].includes(type as NodeTypesEnum)
-				}
-			>
-				{(data as DefaultNodeDataType & OpenAIAPIRequest).model && data.text.length > 0 && (
-					<div className="flex gap-2">
-						<p className="text-slate-600">
-							{'>'}
-							{calculateCreditsRequired(data, data.text)} credit
-						</p>
-					</div>
-				)}
-			</NodeToolbar>
 			<NodeToolbar
 				position={Position.Right}
 				isVisible={!!data.loopId && data.children.length === 0}
@@ -157,7 +135,7 @@ const NodeTemplate: FC<
 					selected
 						? `${getBorderColor(color)} border-8 border-t-8`
 						: 'border-2 border-slate-400',
-					'flex grow flex-col bg-slate-50',
+					'flex grow flex-col bg-slate-50 shadow-lg',
 				)}
 			>
 				<div
@@ -258,6 +236,22 @@ const NodeTemplate: FC<
 					</>
 				)}
 			</div>
+			{!!type &&
+				[
+					NodeTypesEnum.chatPrompt,
+					NodeTypesEnum.singleChatPrompt,
+					NodeTypesEnum.classify,
+					NodeTypesEnum.llmPrompt,
+					NodeTypesEnum.search,
+				].includes(type as NodeTypesEnum) &&
+				data.text.length > 0 && (
+					<div className="mx-auto flex gap-2 pt-4">
+						<p className="text-3xl font-semibold text-slate-600">
+							{'>'}
+							{calculateCreditsRequired(data, data.text)} credit
+						</p>
+					</div>
+				)}
 		</div>
 	);
 };

diff --git a/packages/web/src/store/onConnect.ts b/packages/web/src/store/onConnect.ts
@@ -35,18 +35,14 @@ function isCycle(nodes: CustomNode[], targetNodeIndex: number): boolean {
 }
 
 // recursively assigning the parentNode and loopId for nodes in a loop
-function assignChildren(
-	nodes: CustomNode[],
-	targetNodeIndex: number,
-	cb: (node: CustomNode) => void,
-) {
+function assignLoopChildren(nodes: CustomNode[], targetNodeIndex: number, loopNodeIndex: number) {
 	// Set target node's position to parent node's position
-	cb(nodes[targetNodeIndex]);
-	// Iterate through target node's children and call assignChildren recursively
+	nodes[targetNodeIndex].data.loopId = nodes[loopNodeIndex].id;
+	// Iterate through target node's children and call assignLoopChildren recursively
 	nodes[targetNodeIndex].data.children.forEach((childId) => {
 		const childNodeIndex = nodes.findIndex((node) => node.id === childId);
 		if (childNodeIndex !== -1) {
-			assignChildren(nodes, childNodeIndex, cb);
+			assignLoopChildren(nodes, childNodeIndex, loopNodeIndex);
 		}
 	});
 	return nodes;
@@ -341,9 +337,7 @@ const onConnect = (
 			return false;
 		}
 		nodes[targetNodeIndex].data.loopId = nodes[sourceNodeIndex].id;
-		nodes = assignChildren(nodes, targetNodeIndex, (node) => {
-			node.data.loopId = node.id;
-		});
+		nodes = assignLoopChildren(nodes, targetNodeIndex, sourceNodeIndex);
 	}
 
 	// if source is part of a loop
@@ -352,9 +346,7 @@ const onConnect = (
 			(node) => node.id === nodes[sourceNodeIndex].data.loopId,
 		);
 		if (loopNodeIndex !== -1) {
-			nodes = assignChildren(nodes, targetNodeIndex, (node) => {
-				node.data.loopId = node.id;
-			});
+			nodes = assignLoopChildren(nodes, targetNodeIndex, loopNodeIndex);
 		}
 		nodes[loopNodeIndex].data.inputs.deleteInputs([nodes[sourceNodeIndex].id]);
 	}