@runtypelabs/react-flow 0.1.5 → 0.1.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.turbo/turbo-build.log +7 -7
- package/CHANGELOG.md +14 -0
- package/README.md +21 -21
- package/dist/index.js +152 -52
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +152 -52
- package/dist/index.mjs.map +1 -1
- package/example/CHANGELOG.md +16 -0
- package/example/node_modules/.bin/vite +2 -2
- package/example/package.json +1 -1
- package/example/src/App.tsx +269 -166
- package/example/src/main.tsx +1 -2
- package/example/tsconfig.json +0 -1
- package/example/vite.config.ts +0 -1
- package/package.json +2 -2
- package/src/components/RuntypeFlowEditor.tsx +57 -21
- package/src/components/nodes/BaseNode.tsx +7 -6
- package/src/components/nodes/CodeNode.tsx +9 -3
- package/src/components/nodes/ConditionalNode.tsx +15 -12
- package/src/components/nodes/FetchUrlNode.tsx +10 -8
- package/src/components/nodes/PromptNode.tsx +10 -6
- package/src/components/nodes/SendEmailNode.tsx +2 -5
- package/src/hooks/useFlowValidation.ts +1 -5
- package/src/hooks/useRuntypeFlow.ts +3 -12
- package/src/index.ts +0 -1
- package/src/types/index.ts +1 -2
- package/src/utils/adapter.ts +85 -75
- package/src/utils/layout.ts +21 -25
- package/tsconfig.json +0 -1
- package/tsup.config.ts +0 -1
package/dist/index.mjs
CHANGED
|
@@ -93,7 +93,9 @@ function flowStepsToNodes(steps, options) {
|
|
|
93
93
|
}
|
|
94
94
|
if (maxBranchLength > 0) {
|
|
95
95
|
const advance = BRANCH_OFFSET_X + maxBranchLength * (NODE_WIDTH + NODE_SPACING_X);
|
|
96
|
-
console.log(
|
|
96
|
+
console.log(
|
|
97
|
+
`[flowStepsToNodes] Conditional "${step.name}" has ${maxBranchLength} branch steps, advancing currentX by ${advance}`
|
|
98
|
+
);
|
|
97
99
|
currentX += advance;
|
|
98
100
|
console.log(`[flowStepsToNodes] After conditional, currentX = ${currentX}`);
|
|
99
101
|
} else {
|
|
@@ -106,7 +108,9 @@ function flowStepsToNodes(steps, options) {
|
|
|
106
108
|
return nodes;
|
|
107
109
|
}
|
|
108
110
|
function nodesToFlowSteps(nodes) {
|
|
109
|
-
const topLevelNodes = nodes.filter(
|
|
111
|
+
const topLevelNodes = nodes.filter(
|
|
112
|
+
(n) => !n.parentId && !n.id.includes("-true-") && !n.id.includes("-false-")
|
|
113
|
+
);
|
|
110
114
|
const sortedNodes = [...topLevelNodes].sort((a, b) => a.position.x - b.position.x);
|
|
111
115
|
return sortedNodes.map((node, index) => {
|
|
112
116
|
const step = node.data.step;
|
|
@@ -158,7 +162,9 @@ function createEdgesFromNodes(nodes) {
|
|
|
158
162
|
data: { stepOrder: i }
|
|
159
163
|
});
|
|
160
164
|
}
|
|
161
|
-
const conditionalNodes = nodes.filter(
|
|
165
|
+
const conditionalNodes = nodes.filter(
|
|
166
|
+
(n) => n.data.step.type === "conditional" && !isBranchNode(n)
|
|
167
|
+
);
|
|
162
168
|
for (const conditionalNode of conditionalNodes) {
|
|
163
169
|
const conditionalId = conditionalNode.id;
|
|
164
170
|
const conditionalIndex = topLevelNodes.findIndex((n) => n.id === conditionalId);
|
|
@@ -288,13 +294,13 @@ function createEdgesFromNodes(nodes) {
|
|
|
288
294
|
}
|
|
289
295
|
function getDefaultStepName(type) {
|
|
290
296
|
const names = {
|
|
291
|
-
|
|
297
|
+
prompt: "AI Prompt",
|
|
292
298
|
"fetch-url": "Fetch URL",
|
|
293
299
|
"retrieve-record": "Retrieve Record",
|
|
294
300
|
"fetch-github": "Fetch GitHub",
|
|
295
301
|
"api-call": "API Call",
|
|
296
302
|
"transform-data": "Transform Data",
|
|
297
|
-
|
|
303
|
+
conditional: "Conditional",
|
|
298
304
|
"set-variable": "Set Variable",
|
|
299
305
|
"upsert-record": "Upsert Record",
|
|
300
306
|
"send-email": "Send Email",
|
|
@@ -302,7 +308,7 @@ function getDefaultStepName(type) {
|
|
|
302
308
|
"send-event": "Send Event",
|
|
303
309
|
"send-stream": "Send Stream",
|
|
304
310
|
"update-record": "Update Record",
|
|
305
|
-
|
|
311
|
+
search: "Search",
|
|
306
312
|
"generate-embedding": "Generate Embedding",
|
|
307
313
|
"vector-search": "Vector Search",
|
|
308
314
|
"tool-call": "Tool Call",
|
|
@@ -622,9 +628,7 @@ function useRuntypeFlow(options) {
|
|
|
622
628
|
const handleStepDelete = useCallback(
|
|
623
629
|
(stepId) => {
|
|
624
630
|
setNodes((nds) => nds.filter((node) => node.id !== stepId));
|
|
625
|
-
setEdges(
|
|
626
|
-
(eds) => eds.filter((edge) => edge.source !== stepId && edge.target !== stepId)
|
|
627
|
-
);
|
|
631
|
+
setEdges((eds) => eds.filter((edge) => edge.source !== stepId && edge.target !== stepId));
|
|
628
632
|
setHasUnsavedChanges(true);
|
|
629
633
|
},
|
|
630
634
|
[setNodes, setEdges]
|
|
@@ -1083,10 +1087,7 @@ function useFlowValidation(options) {
|
|
|
1083
1087
|
warnings
|
|
1084
1088
|
};
|
|
1085
1089
|
}, [steps]);
|
|
1086
|
-
const validateStepFn = useCallback(
|
|
1087
|
-
(step) => validateStep(step, steps),
|
|
1088
|
-
[steps]
|
|
1089
|
-
);
|
|
1090
|
+
const validateStepFn = useCallback((step) => validateStep(step, steps), [steps]);
|
|
1090
1091
|
const isStepValid = useCallback(
|
|
1091
1092
|
(stepId) => {
|
|
1092
1093
|
return !result.errors.some((e) => e.stepId === stepId);
|
|
@@ -1540,10 +1541,21 @@ var PromptNode = memo(function PromptNode2(props) {
|
|
|
1540
1541
|
)
|
|
1541
1542
|
] }),
|
|
1542
1543
|
/* @__PURE__ */ jsxs("div", { style: styles2.field, children: [
|
|
1543
|
-
/* @__PURE__ */ jsxs(
|
|
1544
|
-
|
|
1545
|
-
|
|
1546
|
-
|
|
1544
|
+
/* @__PURE__ */ jsxs(
|
|
1545
|
+
"div",
|
|
1546
|
+
{
|
|
1547
|
+
style: {
|
|
1548
|
+
display: "flex",
|
|
1549
|
+
justifyContent: "space-between",
|
|
1550
|
+
alignItems: "center",
|
|
1551
|
+
marginBottom: "4px"
|
|
1552
|
+
},
|
|
1553
|
+
children: [
|
|
1554
|
+
/* @__PURE__ */ jsx("label", { style: styles2.label, children: "Mode" }),
|
|
1555
|
+
/* @__PURE__ */ jsx("span", { style: styles2.modeBadge(isAgentMode), children: isAgentMode ? "Agent" : "Instruction" })
|
|
1556
|
+
]
|
|
1557
|
+
}
|
|
1558
|
+
),
|
|
1547
1559
|
/* @__PURE__ */ jsxs(
|
|
1548
1560
|
"select",
|
|
1549
1561
|
{
|
|
@@ -1819,10 +1831,21 @@ var FetchUrlNode = memo(function FetchUrlNode2(props) {
|
|
|
1819
1831
|
)
|
|
1820
1832
|
] }),
|
|
1821
1833
|
/* @__PURE__ */ jsxs("div", { style: styles3.field, children: [
|
|
1822
|
-
/* @__PURE__ */ jsxs(
|
|
1823
|
-
|
|
1824
|
-
|
|
1825
|
-
|
|
1834
|
+
/* @__PURE__ */ jsxs(
|
|
1835
|
+
"div",
|
|
1836
|
+
{
|
|
1837
|
+
style: {
|
|
1838
|
+
display: "flex",
|
|
1839
|
+
justifyContent: "space-between",
|
|
1840
|
+
alignItems: "center",
|
|
1841
|
+
marginBottom: "4px"
|
|
1842
|
+
},
|
|
1843
|
+
children: [
|
|
1844
|
+
/* @__PURE__ */ jsx("label", { style: styles3.label, children: "Method" }),
|
|
1845
|
+
/* @__PURE__ */ jsx("span", { style: styles3.methodBadge(method), children: method })
|
|
1846
|
+
]
|
|
1847
|
+
}
|
|
1848
|
+
),
|
|
1826
1849
|
/* @__PURE__ */ jsxs(
|
|
1827
1850
|
"select",
|
|
1828
1851
|
{
|
|
@@ -2101,10 +2124,21 @@ var CodeNode = memo(function CodeNode2(props) {
|
|
|
2101
2124
|
)
|
|
2102
2125
|
] }),
|
|
2103
2126
|
/* @__PURE__ */ jsxs("div", { style: styles4.field, children: [
|
|
2104
|
-
/* @__PURE__ */ jsxs(
|
|
2105
|
-
|
|
2106
|
-
|
|
2107
|
-
|
|
2127
|
+
/* @__PURE__ */ jsxs(
|
|
2128
|
+
"div",
|
|
2129
|
+
{
|
|
2130
|
+
style: {
|
|
2131
|
+
display: "flex",
|
|
2132
|
+
justifyContent: "space-between",
|
|
2133
|
+
alignItems: "center",
|
|
2134
|
+
marginBottom: "4px"
|
|
2135
|
+
},
|
|
2136
|
+
children: [
|
|
2137
|
+
/* @__PURE__ */ jsx("label", { style: styles4.label, children: "Code" }),
|
|
2138
|
+
/* @__PURE__ */ jsx("span", { style: styles4.languageBadge(language), children: language })
|
|
2139
|
+
]
|
|
2140
|
+
}
|
|
2141
|
+
),
|
|
2108
2142
|
/* @__PURE__ */ jsx(
|
|
2109
2143
|
"textarea",
|
|
2110
2144
|
{
|
|
@@ -3174,43 +3208,109 @@ function RuntypeFlowEditor({
|
|
|
3174
3208
|
] });
|
|
3175
3209
|
}
|
|
3176
3210
|
function PlusIcon() {
|
|
3177
|
-
return /* @__PURE__ */ jsxs(
|
|
3178
|
-
|
|
3179
|
-
|
|
3180
|
-
|
|
3211
|
+
return /* @__PURE__ */ jsxs(
|
|
3212
|
+
"svg",
|
|
3213
|
+
{
|
|
3214
|
+
width: "14",
|
|
3215
|
+
height: "14",
|
|
3216
|
+
viewBox: "0 0 24 24",
|
|
3217
|
+
fill: "none",
|
|
3218
|
+
stroke: "currentColor",
|
|
3219
|
+
strokeWidth: "2",
|
|
3220
|
+
children: [
|
|
3221
|
+
/* @__PURE__ */ jsx("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
|
|
3222
|
+
/* @__PURE__ */ jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
|
|
3223
|
+
]
|
|
3224
|
+
}
|
|
3225
|
+
);
|
|
3181
3226
|
}
|
|
3182
3227
|
function PromptIcon() {
|
|
3183
|
-
return /* @__PURE__ */ jsxs(
|
|
3184
|
-
|
|
3185
|
-
|
|
3186
|
-
|
|
3228
|
+
return /* @__PURE__ */ jsxs(
|
|
3229
|
+
"svg",
|
|
3230
|
+
{
|
|
3231
|
+
width: "14",
|
|
3232
|
+
height: "14",
|
|
3233
|
+
viewBox: "0 0 24 24",
|
|
3234
|
+
fill: "none",
|
|
3235
|
+
stroke: "currentColor",
|
|
3236
|
+
strokeWidth: "2",
|
|
3237
|
+
children: [
|
|
3238
|
+
/* @__PURE__ */ jsx("path", { d: "M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z" }),
|
|
3239
|
+
/* @__PURE__ */ jsx("path", { d: "M12 5a3 3 0 1 1 5.997.125 4 4 0 0 1 2.526 5.77 4 4 0 0 1-.556 6.588A4 4 0 1 1 12 18Z" })
|
|
3240
|
+
]
|
|
3241
|
+
}
|
|
3242
|
+
);
|
|
3187
3243
|
}
|
|
3188
3244
|
function GlobeIcon2() {
|
|
3189
|
-
return /* @__PURE__ */ jsxs(
|
|
3190
|
-
|
|
3191
|
-
|
|
3192
|
-
|
|
3193
|
-
|
|
3245
|
+
return /* @__PURE__ */ jsxs(
|
|
3246
|
+
"svg",
|
|
3247
|
+
{
|
|
3248
|
+
width: "14",
|
|
3249
|
+
height: "14",
|
|
3250
|
+
viewBox: "0 0 24 24",
|
|
3251
|
+
fill: "none",
|
|
3252
|
+
stroke: "currentColor",
|
|
3253
|
+
strokeWidth: "2",
|
|
3254
|
+
children: [
|
|
3255
|
+
/* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
|
|
3256
|
+
/* @__PURE__ */ jsx("path", { d: "M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" }),
|
|
3257
|
+
/* @__PURE__ */ jsx("path", { d: "M2 12h20" })
|
|
3258
|
+
]
|
|
3259
|
+
}
|
|
3260
|
+
);
|
|
3194
3261
|
}
|
|
3195
3262
|
function CodeIcon2() {
|
|
3196
|
-
return /* @__PURE__ */ jsxs(
|
|
3197
|
-
|
|
3198
|
-
|
|
3199
|
-
|
|
3263
|
+
return /* @__PURE__ */ jsxs(
|
|
3264
|
+
"svg",
|
|
3265
|
+
{
|
|
3266
|
+
width: "14",
|
|
3267
|
+
height: "14",
|
|
3268
|
+
viewBox: "0 0 24 24",
|
|
3269
|
+
fill: "none",
|
|
3270
|
+
stroke: "currentColor",
|
|
3271
|
+
strokeWidth: "2",
|
|
3272
|
+
children: [
|
|
3273
|
+
/* @__PURE__ */ jsx("polyline", { points: "16 18 22 12 16 6" }),
|
|
3274
|
+
/* @__PURE__ */ jsx("polyline", { points: "8 6 2 12 8 18" })
|
|
3275
|
+
]
|
|
3276
|
+
}
|
|
3277
|
+
);
|
|
3200
3278
|
}
|
|
3201
3279
|
function BranchIcon() {
|
|
3202
|
-
return /* @__PURE__ */ jsxs(
|
|
3203
|
-
|
|
3204
|
-
|
|
3205
|
-
|
|
3206
|
-
|
|
3207
|
-
|
|
3280
|
+
return /* @__PURE__ */ jsxs(
|
|
3281
|
+
"svg",
|
|
3282
|
+
{
|
|
3283
|
+
width: "14",
|
|
3284
|
+
height: "14",
|
|
3285
|
+
viewBox: "0 0 24 24",
|
|
3286
|
+
fill: "none",
|
|
3287
|
+
stroke: "currentColor",
|
|
3288
|
+
strokeWidth: "2",
|
|
3289
|
+
children: [
|
|
3290
|
+
/* @__PURE__ */ jsx("line", { x1: "6", y1: "3", x2: "6", y2: "15" }),
|
|
3291
|
+
/* @__PURE__ */ jsx("circle", { cx: "18", cy: "6", r: "3" }),
|
|
3292
|
+
/* @__PURE__ */ jsx("circle", { cx: "6", cy: "18", r: "3" }),
|
|
3293
|
+
/* @__PURE__ */ jsx("path", { d: "M18 9a9 9 0 0 1-9 9" })
|
|
3294
|
+
]
|
|
3295
|
+
}
|
|
3296
|
+
);
|
|
3208
3297
|
}
|
|
3209
3298
|
function MailIcon2() {
|
|
3210
|
-
return /* @__PURE__ */ jsxs(
|
|
3211
|
-
|
|
3212
|
-
|
|
3213
|
-
|
|
3299
|
+
return /* @__PURE__ */ jsxs(
|
|
3300
|
+
"svg",
|
|
3301
|
+
{
|
|
3302
|
+
width: "14",
|
|
3303
|
+
height: "14",
|
|
3304
|
+
viewBox: "0 0 24 24",
|
|
3305
|
+
fill: "none",
|
|
3306
|
+
stroke: "currentColor",
|
|
3307
|
+
strokeWidth: "2",
|
|
3308
|
+
children: [
|
|
3309
|
+
/* @__PURE__ */ jsx("rect", { width: "20", height: "16", x: "2", y: "4", rx: "2" }),
|
|
3310
|
+
/* @__PURE__ */ jsx("path", { d: "m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" })
|
|
3311
|
+
]
|
|
3312
|
+
}
|
|
3313
|
+
);
|
|
3214
3314
|
}
|
|
3215
3315
|
|
|
3216
3316
|
export { BaseNode, CodeNode, ConditionalNode, FetchUrlNode, PromptNode, RuntypeFlowEditor, SUPPORTED_NODE_TYPES, SendEmailNode, autoLayout, centerNodes, cloneStep, createDefaultStep, createEdgesFromNodes, flowStepsToNodes, generateStepId, getDefaultStepName, getNodesBoundingBox, isSupportedNodeType, nodesToFlowSteps, snapToGrid, useFlowValidation, useRuntypeFlow };
|