feat: implemente node configuration registry, execution engine, and d… #83
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| @@ -0,0 +1,102 @@ | ||||||||||
| "use client"; | ||||||||||
| import React, { useRef, useEffect } from 'react'; | ||||||||||
|
|
||||||||||
| export interface AvailableNode { | ||||||||||
| id: string; | ||||||||||
| name: string; | ||||||||||
| } | ||||||||||
|
|
||||||||||
| interface RichVariableInputProps { | ||||||||||
| value: string; | ||||||||||
| onChange: (newValue: string) => void; | ||||||||||
| availableNodes: AvailableNode[]; | ||||||||||
| placeholder?: string; | ||||||||||
| onFocus?: () => void; | ||||||||||
| } | ||||||||||
|
|
||||||||||
| const COLORS = [ | ||||||||||
| "bg-blue-500/20 text-blue-300 border-blue-500/50", | ||||||||||
| "bg-green-500/20 text-green-300 border-green-500/50", | ||||||||||
| "bg-purple-500/20 text-purple-300 border-purple-500/50", | ||||||||||
| "bg-orange-500/20 text-orange-300 border-orange-500/50", | ||||||||||
| "bg-pink-500/20 text-pink-300 border-pink-500/50", | ||||||||||
| "bg-teal-500/20 text-teal-300 border-teal-500/50", | ||||||||||
| ]; | ||||||||||
|
|
||||||||||
| export function getNodeColorClass(nodeId: string): string { | ||||||||||
| if (!nodeId) return COLORS[0]!; | ||||||||||
| let hash = 0; | ||||||||||
| for (let i = 0; i < nodeId.length; i++) { | ||||||||||
| hash = nodeId.charCodeAt(i) + ((hash << 5) - hash); | ||||||||||
| } | ||||||||||
| const index = Math.abs(hash) % COLORS.length; | ||||||||||
| return COLORS[index]!; | ||||||||||
| } | ||||||||||
|
|
||||||||||
| export function parseValueToHtml(rawValue: string, availableNodes: AvailableNode[]): string { | ||||||||||
| if (!rawValue) return ""; | ||||||||||
|
|
||||||||||
| return rawValue.replace(/\{\{([^.]+)\.([^}]+)\}\}/g, (match, nodeId, path) => { | ||||||||||
| const node = availableNodes.find(n => n.id === nodeId); | ||||||||||
| const displayName = node ? node.name : "Unknown Node"; | ||||||||||
| const colorClass = getNodeColorClass(nodeId); | ||||||||||
|
|
||||||||||
| return `<span contenteditable="false" class="inline-flex items-center px-1.5 py-0.5 mx-1 rounded text-[10px] border align-middle font-mono select-all cursor-default ${colorClass}" data-id="${nodeId}" data-path="${path}">${displayName} > ${path}</span>`; | ||||||||||
| }); | ||||||||||
|
Comment on lines
+39
to
+45
There was a problem hiding this comment. 🔒 Security & Privacy | 🔴 Critical | ⚡ Quick win Do not inject configuration values into
🤖 Prompt for AI Agents
Comment on lines
+44
to
+45
There was a problem hiding this comment. 🎯 Functional Correctness | 🟠 Major | ⚡ Quick win Add the
Proposed fix- return `<span contenteditable="false" class="inline-flex items-center px-1.5 py-0.5 mx-1 rounded text-[10px] border align-middle font-mono select-all cursor-default ${colorClass}" data-id="${nodeId}" data-path="${path}">${displayName} > ${path}</span>`;
+ return `<span contenteditable="false" class="pill inline-flex items-center px-1.5 py-0.5 mx-1 rounded text-[10px] border align-middle font-mono select-all cursor-default ${colorClass}" data-id="${nodeId}" data-path="${path}">${displayName} > ${path}</span>`;📝 Committable suggestion
Suggested change
🤖 Prompt for AI Agents |
||||||||||
| } | ||||||||||
|
Comment on lines
+36
to
+46
|
||||||||||
|
|
||||||||||
| export function RichVariableInput({ value, onChange, availableNodes, placeholder, onFocus }: RichVariableInputProps) { | ||||||||||
| const editorRef = useRef<HTMLDivElement>(null); | ||||||||||
| const isInternalUpdate = useRef(false); | ||||||||||
|
|
||||||||||
| // Initial injection of HTML when the external value changes | ||||||||||
| useEffect(() => { | ||||||||||
| if (editorRef.current && !isInternalUpdate.current) { | ||||||||||
| const newHtml = parseValueToHtml(value, availableNodes); | ||||||||||
| if (editorRef.current.innerHTML !== newHtml) { | ||||||||||
| editorRef.current.innerHTML = newHtml; | ||||||||||
| } | ||||||||||
| } | ||||||||||
| isInternalUpdate.current = false; | ||||||||||
| }, [value, availableNodes]); | ||||||||||
|
|
||||||||||
| // Handle user input and serialize back to raw string | ||||||||||
| const handleInput = () => { | ||||||||||
| if (!editorRef.current) return; | ||||||||||
|
|
||||||||||
| let rawString = ""; | ||||||||||
|
|
||||||||||
| // Iterate through the DOM children to reconstruct the string | ||||||||||
| editorRef.current.childNodes.forEach((node) => { | ||||||||||
| if (node.nodeType === Node.TEXT_NODE) { | ||||||||||
| rawString += node.textContent || ""; | ||||||||||
| } else if (node.nodeType === Node.ELEMENT_NODE) { | ||||||||||
| const el = node as HTMLElement; | ||||||||||
| if (el.classList.contains("pill")) { | ||||||||||
| const nodeId = el.getAttribute("data-id"); | ||||||||||
| const path = el.getAttribute("data-path"); | ||||||||||
| if (nodeId && path) { | ||||||||||
| rawString += `{{${nodeId}.${path}}}`; | ||||||||||
| } | ||||||||||
| } else { | ||||||||||
| // For any pasted elements (br, divs), just extract text | ||||||||||
| rawString += el.textContent || ""; | ||||||||||
| } | ||||||||||
|
Comment on lines
+75
to
+84
There was a problem hiding this comment. 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win Preserve line breaks during serialization. A 🤖 Prompt for AI Agents |
||||||||||
| } | ||||||||||
| }); | ||||||||||
|
|
||||||||||
| isInternalUpdate.current = true; | ||||||||||
| onChange(rawString); | ||||||||||
| }; | ||||||||||
|
|
||||||||||
| return ( | ||||||||||
| <div | ||||||||||
| ref={editorRef} | ||||||||||
| contentEditable={true} | ||||||||||
| onInput={handleInput} | ||||||||||
| onFocus={onFocus} | ||||||||||
| data-placeholder={placeholder} | ||||||||||
| className="w-full min-h-[40px] px-3 py-2 rounded-md border border-[#2a3525] bg-[#141a14] text-sm text-[#e8e8d8] focus:outline-none focus:border-[#baf266]/50 empty:before:content-[attr(data-placeholder)] empty:before:text-[#4a5440]" | ||||||||||
| /> | ||||||||||
| ); | ||||||||||
| } | ||||||||||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -62,7 +62,7 @@ export function VariablePanel({ previousNodes, onInsert, activeField, onTestNode | |
| ); | ||
| } | ||
|
|
||
| const formattedNodeName = node.nodeId | ||
|
|
||
|
Comment on lines
+65
to
66
|
||
| const renderRows = (vars: VariableDefinition[], depth: number = 0, currParentPath: string = "") => { | ||
| return vars.map((variable, idx) => { | ||
|
|
@@ -141,8 +141,8 @@ export function VariablePanel({ previousNodes, onInsert, activeField, onTestNode | |
| }; | ||
|
|
||
| // Rendering for Spreadsheet (Arrays of arrays) | ||
| const renderSpreadsheetTable = (nodeName: string, nodeId: string, data: any) => { | ||
| const formattedNodeName = nodeId; | ||
| const rows = data.rows || data; // Handle data directly if it's the 2D array | ||
| if (!Array.isArray(rows) || rows.length === 0) return null; | ||
|
|
||
|
|
@@ -152,7 +152,16 @@ export function VariablePanel({ previousNodes, onInsert, activeField, onTestNode | |
| return ( | ||
| <div className="overflow-x-auto w-full border-t border-gray-800 scrollbar-thin scrollbar-thumb-gray-700 scrollbar-track-transparent"> | ||
| <div className="text-[10px] p-2 bg-gray-800/50 text-gray-400 flex justify-between items-center border-b border-gray-800"> | ||
| <div className="flex items-center gap-2"> | ||
| <span>Spreadsheet Data</span> | ||
| <button | ||
| onClick={() => handleInsert(`{{${formattedNodeName}.rows}}`)} | ||
| className="px-2 py-0.5 bg-blue-500/20 text-blue-400 hover:bg-blue-500/40 rounded transition-colors" | ||
| title="Insert the entire array of data" | ||
| > | ||
| Select Entire Table | ||
| </button> | ||
| </div> | ||
|
Comment on lines
+155
to
+164
There was a problem hiding this comment. 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win 🧩 Analysis chain🏁 Script executed: #!/bin/bash
set -euo pipefail
# Inspect how interpolation resolves node paths and whether it aliases direct arrays as `rows`.
rg -n -C 6 'resolveVariable|rows' \
packages/common/src/interpolation.ts \
apps/web/app/components/ui/variable-panel.tsx \
'apps/web/app/workflows/[id]/components/ConfigModal.tsx'Repository: Dev-Pross/BuildFlow Length of output: 29949 Insert direct-array paths for spreadsheet outputs. When 🤖 Prompt for AI Agents |
||
| <span>{dataRows.length} rows</span> | ||
| </div> | ||
| <table className="w-full text-left text-xs text-gray-300 min-w-max border-collapse"> | ||
|
|
@@ -199,8 +208,8 @@ export function VariablePanel({ previousNodes, onInsert, activeField, onTestNode | |
| }; | ||
|
|
||
| // Rendering for standard array of objects | ||
| const renderArrayTable = (nodeName: string, nodeId: string, dataArray: any[], isTested: boolean) => { | ||
| const formattedNodeName = nodeId; | ||
|
|
||
| // Find all unique keys across objects to form headers | ||
| const keysSet = new Set<string>(); | ||
|
|
@@ -451,17 +460,17 @@ export function VariablePanel({ previousNodes, onInsert, activeField, onTestNode | |
| {/* Try matching Spreadsheet Pattern */} | ||
| {testOutput.data.rows && Array.isArray(testOutput.data.rows) && testOutput.data.rows.length > 0 && Array.isArray(testOutput.data.rows[0]) ? ( | ||
| <div className="bg-[#111620]"> | ||
| {renderSpreadsheetTable(node.nodeName, node.nodeId, testOutput.data)} | ||
| </div> | ||
| ) : Array.isArray(testOutput.data) && testOutput.data.length > 0 && Array.isArray(testOutput.data[0]) ? ( | ||
| <div className="bg-[#111620]"> | ||
| {renderSpreadsheetTable(node.nodeName, node.nodeId, testOutput.data)} | ||
| </div> | ||
| ) : | ||
| /* Try matching Standard Array pattern */ | ||
| Array.isArray(testOutput.data) ? ( | ||
| <div className="bg-[#111620]"> | ||
| {renderArrayTable(node.nodeName, node.nodeId, testOutput.data, isTested)} | ||
| </div> | ||
| ) : ( | ||
| /* Fallback to Tree Table if it's an object or string */ | ||
|
|
||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
Repository: Dev-Pross/BuildFlow
Length of output: 239
🏁 Script executed:
Repository: Dev-Pross/BuildFlow
Length of output: 1511
🌐 Web query:
Tailwind CSS object-center utility object-fit class names💡 Result:
In Tailwind CSS, object-position and object-fit are separate sets of utility classes used to control replaced elements like images and videos [1][2]. Object Position Utilities These classes control the object-position CSS property, which determines how an element is positioned within its container [1][3]. Class | CSS Property --- | --- object-bottom | object-position: bottom; [1] object-bottom-left | object-position: bottom left; [1] object-bottom-right | object-position: bottom right; [1] object-center | object-position: center; [1] object-left | object-position: left; [1] object-right | object-position: right; [1] object-top | object-position: top; [1] object-top-left | object-position: top left; [1] object-top-right | object-position: top right; [1] Object Fit Utilities These classes control the object-fit CSS property, which determines how an element is resized to fit its container [2][4]. Class | CSS Property --- | --- object-contain | object-fit: contain; [2] object-cover | object-fit: cover; [2] object-fill | object-fit: fill; [2] object-none | object-fit: none; [2] object-scale-down | object-fit: scale-down; [2] Both types of utilities support responsive design (using prefixes like md:), arbitrary values (using square brackets like object-[center_bottom]), and state modifiers (like hover:) [1][3][2][5][6].
Citations:
Use the valid Tailwind object-fit utility.
object-obtainis not a Tailwind object-fit class, so the icon image is not constrained. Replace it withobject-contain.🤖 Prompt for AI Agents