Skip to content

Commit 4b17501

Browse files
j-sanaaj-sanaa
authored
Feat(agentflow) Node version detection and version upgrade support (#6347)
* Implement Node versioning * Add new example for showing outdated versions * Remove header sync button * Test changes * ix lint error * Fix gemini comments * Udpate example to show no verison, outdated and correct version * Add Sync as a FAB button * Increase test coversge * Add 2 sceaniors to exampels to make it clearer * Fix gemini comments * Fix review comments * Fix review comments
1 parent 1449e80 commit 4b17501

19 files changed

Lines changed: 543 additions & 15 deletions

‎packages/agentflow/examples/src/demos/AllNodeTypesExample.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ const allNodesFlow: FlowData = {
2424
id: 'startAgentflow_0',
2525
name: 'startAgentflow',
2626
label: 'Start',
27+
version: 1.3,
2728
color: '#7EE787',
2829
hideInput: true,
2930
outputAnchors: [{ id: 'startAgentflow_0-output-0', name: 'start', label: 'Start', type: 'start' }]
@@ -37,6 +38,7 @@ const allNodesFlow: FlowData = {
3738
id: 'llmAgentflow_0',
3839
name: 'llmAgentflow',
3940
label: 'LLM',
41+
version: 1.1,
4042
color: '#64B5F6',
4143
outputAnchors: [{ id: 'llmAgentflow_0-output-0', name: 'output', label: 'Output', type: 'string' }]
4244
}
@@ -49,6 +51,7 @@ const allNodesFlow: FlowData = {
4951
id: 'agentAgentflow_0',
5052
name: 'agentAgentflow',
5153
label: 'Agent',
54+
version: 3.2,
5255
color: '#4DD0E1',
5356
outputAnchors: [{ id: 'agentAgentflow_0-output-0', name: 'output', label: 'Output', type: 'string' }]
5457
}
@@ -61,6 +64,7 @@ const allNodesFlow: FlowData = {
6164
id: 'directReplyAgentflow_0',
6265
name: 'directReplyAgentflow',
6366
label: 'Direct Reply',
67+
version: 1.0,
6468
color: '#4DDBBB',
6569
outputAnchors: [{ id: 'directReplyAgentflow_0-output-0', name: 'output', label: 'Output', type: 'string' }]
6670
}
@@ -75,6 +79,7 @@ const allNodesFlow: FlowData = {
7579
id: 'conditionAgentflow_0',
7680
name: 'conditionAgentflow',
7781
label: 'Condition',
82+
version: 1.0,
7883
color: '#FFB938',
7984
outputAnchors: [
8085
{ id: 'conditionAgentflow_0-output-0', name: 'true', label: 'True', type: 'boolean' },
@@ -90,6 +95,7 @@ const allNodesFlow: FlowData = {
9095
id: 'conditionAgentAgentflow_0',
9196
name: 'conditionAgentAgentflow',
9297
label: 'Condition Agent',
98+
version: 2.0,
9399
color: '#ff8fab',
94100
outputAnchors: [{ id: 'conditionAgentAgentflow_0-output-0', name: 'output', label: 'Output', type: 'string' }]
95101
}
@@ -102,6 +108,7 @@ const allNodesFlow: FlowData = {
102108
id: 'loopAgentflow_0',
103109
name: 'loopAgentflow',
104110
label: 'Loop',
111+
version: 1.2,
105112
color: '#FFA07A',
106113
outputAnchors: [{ id: 'loopAgentflow_0-output-0', name: 'output', label: 'Output', type: 'string' }]
107114
}
@@ -114,6 +121,7 @@ const allNodesFlow: FlowData = {
114121
id: 'iterationAgentflow_0',
115122
name: 'iterationAgentflow',
116123
label: 'Iteration',
124+
version: 1.0,
117125
color: '#9C89B8',
118126
outputAnchors: [{ id: 'iterationAgentflow_0-output-0', name: 'output', label: 'Output', type: 'string' }]
119127
}
@@ -128,6 +136,7 @@ const allNodesFlow: FlowData = {
128136
id: 'humanInputAgentflow_0',
129137
name: 'humanInputAgentflow',
130138
label: 'Human Input',
139+
version: 1.0,
131140
color: '#6E6EFD',
132141
outputAnchors: [
133142
{ id: 'humanInputAgentflow_0-output-0', name: 'proceed', label: 'Proceed', type: 'string' },
@@ -143,6 +152,7 @@ const allNodesFlow: FlowData = {
143152
id: 'toolAgentflow_0',
144153
name: 'toolAgentflow',
145154
label: 'Tool',
155+
version: 1.2,
146156
color: '#d4a373',
147157
outputAnchors: [{ id: 'toolAgentflow_0-output-0', name: 'output', label: 'Output', type: 'string' }]
148158
}
@@ -155,6 +165,7 @@ const allNodesFlow: FlowData = {
155165
id: 'retrieverAgentflow_0',
156166
name: 'retrieverAgentflow',
157167
label: 'Retriever',
168+
version: 1.1,
158169
color: '#b8bedd',
159170
outputAnchors: [{ id: 'retrieverAgentflow_0-output-0', name: 'output', label: 'Output', type: 'string' }]
160171
}
@@ -167,6 +178,7 @@ const allNodesFlow: FlowData = {
167178
id: 'customFunctionAgentflow_0',
168179
name: 'customFunctionAgentflow',
169180
label: 'Custom Function',
181+
version: 1.1,
170182
color: '#E4B7FF',
171183
outputAnchors: [{ id: 'customFunctionAgentflow_0-output-0', name: 'output', label: 'Output', type: 'string' }]
172184
}
@@ -181,6 +193,7 @@ const allNodesFlow: FlowData = {
181193
id: 'httpAgentflow_0',
182194
name: 'httpAgentflow',
183195
label: 'HTTP Request',
196+
version: 1.1,
184197
color: '#FF7F7F',
185198
outputAnchors: [{ id: 'httpAgentflow_0-output-0', name: 'output', label: 'Output', type: 'string' }]
186199
}
@@ -193,6 +206,7 @@ const allNodesFlow: FlowData = {
193206
id: 'executeFlowAgentflow_0',
194207
name: 'executeFlowAgentflow',
195208
label: 'Execute Flow',
209+
version: 1.2,
196210
color: '#a3b18a',
197211
outputAnchors: [{ id: 'executeFlowAgentflow_0-output-0', name: 'output', label: 'Output', type: 'string' }]
198212
}
@@ -205,6 +219,7 @@ const allNodesFlow: FlowData = {
205219
id: 'stickyNoteAgentflow_0',
206220
name: 'stickyNoteAgentflow',
207221
label: 'Sticky Note',
222+
version: 1.0,
208223
color: '#fee440',
209224
outputAnchors: []
210225
}

‎packages/agentflow/examples/src/demos/BasicExample.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ const initialFlow: FlowData = {
2626
id: 'startAgentflow_0',
2727
name: 'startAgentflow',
2828
label: 'Start',
29+
version: 1.3,
2930
color: '#7EE787',
3031
hideInput: true,
3132
inputs: { startInputType: 'chatInput' },
@@ -40,6 +41,7 @@ const initialFlow: FlowData = {
4041
id: 'agentAgentflow_0',
4142
name: 'agentAgentflow',
4243
label: 'Agent',
44+
version: 1,
4345
color: '#4DD0E1',
4446
outputAnchors: [{ id: 'agentAgentflow_0-output-0', name: 'output', label: 'Output', type: 'string' }]
4547
}

‎packages/agentflow/examples/src/demos/DarkModeExample.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ const sampleFlow: FlowData = {
2424
id: 'startAgentflow_0',
2525
name: 'startAgentflow',
2626
label: 'Start',
27+
version: 1.3,
2728
color: '#7EE787',
2829
hideInput: true,
2930
outputAnchors: [{ id: 'startAgentflow_0-output-0', name: 'start', label: 'Start', type: 'start' }]
@@ -37,6 +38,7 @@ const sampleFlow: FlowData = {
3738
id: 'agentAgentflow_0',
3839
name: 'agentAgentflow',
3940
label: 'AI Assistant',
41+
version: 3.2,
4042
color: '#4DD0E1',
4143
outputAnchors: [{ id: 'agentAgentflow_0-output-0', name: 'output', label: 'Output', type: 'string' }],
4244
inputs: {
@@ -55,6 +57,7 @@ const sampleFlow: FlowData = {
5557
id: 'directReplyAgentflow_0',
5658
name: 'directReplyAgentflow',
5759
label: 'Reply',
60+
version: 1.0,
5861
color: '#4DDBBB',
5962
outputAnchors: [{ id: 'directReplyAgentflow_0-output-0', name: 'output', label: 'Output', type: 'string' }]
6063
}

‎packages/agentflow/examples/src/demos/FilteredComponentsExample.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ const initialFlow: FlowData = {
2222
id: 'startAgentflow_0',
2323
name: 'startAgentflow',
2424
label: 'Start',
25+
version: 1.3,
2526
color: '#7EE787',
2627
hideInput: true,
2728
outputAnchors: [{ id: 'startAgentflow_0-output-0', name: 'start', label: 'Start', type: 'start' }]

‎packages/agentflow/examples/src/demos/MultiNodeFlow.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ const translationFlow: FlowData = {
2323
id: 'startAgentflow_0',
2424
name: 'startAgentflow',
2525
label: 'Start',
26+
version: 1.3,
2627
color: '#7EE787',
2728
hideInput: true,
2829
outputAnchors: [{ id: 'startAgentflow_0-output-0', name: 'start', label: 'Start', type: 'start' }]
@@ -36,6 +37,7 @@ const translationFlow: FlowData = {
3637
id: 'llmAgentflow_0',
3738
name: 'llmAgentflow',
3839
label: 'Translator',
40+
version: 1.1,
3941
color: '#64B5F6',
4042
outputAnchors: [{ id: 'llmAgentflow_0-output-0', name: 'output', label: 'Output', type: 'string' }],
4143
inputs: {
@@ -54,6 +56,7 @@ const translationFlow: FlowData = {
5456
id: 'conditionAgentflow_0',
5557
name: 'conditionAgentflow',
5658
label: 'Check Quality',
59+
version: 1.0,
5760
color: '#FFB938',
5861
outputAnchors: [
5962
{ id: 'conditionAgentflow_0-output-0', name: 'true', label: 'Pass', type: 'boolean' },
@@ -69,6 +72,7 @@ const translationFlow: FlowData = {
6972
id: 'directReplyAgentflow_0',
7073
name: 'directReplyAgentflow',
7174
label: 'Send Response',
75+
version: 1.0,
7276
color: '#4DDBBB',
7377
outputAnchors: [{ id: 'directReplyAgentflow_0-output-0', name: 'output', label: 'Output', type: 'string' }]
7478
}
@@ -81,6 +85,7 @@ const translationFlow: FlowData = {
8185
id: 'humanInputAgentflow_0',
8286
name: 'humanInputAgentflow',
8387
label: 'Review Required',
88+
version: 1.0,
8489
color: '#6E6EFD',
8590
outputAnchors: [
8691
{ id: 'humanInputAgentflow_0-output-0', name: 'proceed', label: 'Proceed', type: 'string' },

‎packages/agentflow/examples/src/demos/StatusIndicatorsExample.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ const initialFlow: FlowData = {
2626
id: 'startAgentflow_0',
2727
name: 'startAgentflow',
2828
label: 'Start',
29+
version: 1.3,
2930
color: '#7EE787',
3031
hideInput: true,
3132
outputAnchors: [{ id: 'startAgentflow_0-output-0', name: 'start', label: 'Start', type: 'start' }]
@@ -39,6 +40,7 @@ const initialFlow: FlowData = {
3940
id: 'llmAgentflow_0',
4041
name: 'llmAgentflow',
4142
label: 'LLM Node',
43+
version: 1.1,
4244
color: '#64B5F6',
4345
outputAnchors: [{ id: 'llmAgentflow_0-output-0', name: 'output', label: 'Output', type: 'string' }]
4446
}
@@ -51,6 +53,7 @@ const initialFlow: FlowData = {
5153
id: 'llmAgentflow_1',
5254
name: 'llmAgentflow',
5355
label: 'Failing Task',
56+
version: 1.1,
5457
color: '#64B5F6',
5558
outputAnchors: [{ id: 'llmAgentflow_1-output-0', name: 'output', label: 'Output', type: 'string' }]
5659
}
@@ -63,6 +66,7 @@ const initialFlow: FlowData = {
6366
id: 'agentAgentflow_0',
6467
name: 'agentAgentflow',
6568
label: 'Agent Node',
69+
version: 3.2,
6670
color: '#4DD0E1',
6771
outputAnchors: [{ id: 'agentAgentflow_0-output-0', name: 'output', label: 'Output', type: 'string' }]
6872
}
@@ -75,6 +79,7 @@ const initialFlow: FlowData = {
7579
id: 'humanInputAgentflow_0',
7680
name: 'humanInputAgentflow',
7781
label: 'Human Input',
82+
version: 1.0,
7883
color: '#6E6EFD',
7984
outputAnchors: [{ id: 'humanInputAgentflow_0-output-0', name: 'proceed', label: 'Proceed', type: 'string' }]
8085
}
@@ -87,6 +92,7 @@ const initialFlow: FlowData = {
8792
id: 'directReplyAgentflow_0',
8893
name: 'directReplyAgentflow',
8994
label: 'Direct Reply',
95+
version: 1.0,
9096
color: '#4DDBBB',
9197
outputAnchors: [{ id: 'directReplyAgentflow_0-output-0', name: 'output', label: 'Output', type: 'string' }]
9298
}

‎packages/agentflow/src/Agentflow.test.tsx‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -452,6 +452,87 @@ describe('Agentflow Component', () => {
452452
})
453453
})
454454

455+
describe('Sync Nodes FAB', () => {
456+
const outdatedFlow: FlowData = {
457+
nodes: [
458+
{
459+
id: 'startAgentflow_0',
460+
type: 'agentflowNode',
461+
position: { x: 0, y: 0 },
462+
data: {
463+
id: 'startAgentflow_0',
464+
name: 'startAgentflow',
465+
label: 'Start',
466+
version: 1.0,
467+
color: '#7EE787',
468+
outputAnchors: []
469+
}
470+
}
471+
],
472+
edges: [],
473+
viewport: { x: 0, y: 0, zoom: 1 }
474+
}
475+
476+
beforeEach(() => {
477+
mockGet.mockImplementation((url: string) => {
478+
if (typeof url === 'string' && url.includes('/nodes')) {
479+
return Promise.resolve({
480+
data: [
481+
{
482+
name: 'startAgentflow',
483+
label: 'Start',
484+
type: 'Start',
485+
category: 'Agent Flows',
486+
description: 'Start node',
487+
baseClasses: ['Start'],
488+
inputs: [],
489+
outputs: [],
490+
version: 2.0 // newer than flow node at 1.0
491+
}
492+
]
493+
})
494+
}
495+
return Promise.resolve({ data: [] })
496+
})
497+
})
498+
499+
afterEach(() => {
500+
mockGet.mockImplementation(() => Promise.resolve({ data: [] }))
501+
})
502+
503+
it('shows Sync Nodes FAB when flow has outdated nodes', async () => {
504+
const { container } = render(<Agentflow apiBaseUrl='https://example.com' initialFlow={outdatedFlow} />)
505+
506+
await waitFor(() => {
507+
expect(container.querySelector('[aria-label="Sync Nodes"]')).toBeInTheDocument()
508+
})
509+
})
510+
511+
it('does not show Sync Nodes FAB in readOnly mode even when nodes are outdated', async () => {
512+
const { container } = render(<Agentflow apiBaseUrl='https://example.com' initialFlow={outdatedFlow} readOnly />)
513+
514+
await waitFor(() => {
515+
expect(container.querySelector('.agentflow-container')).toBeInTheDocument()
516+
})
517+
518+
expect(container.querySelector('[aria-label="Sync Nodes"]')).not.toBeInTheDocument()
519+
})
520+
521+
it('does not show Sync Nodes FAB when all nodes are up to date', async () => {
522+
const upToDateFlow: FlowData = {
523+
...outdatedFlow,
524+
nodes: [{ ...outdatedFlow.nodes[0], data: { ...outdatedFlow.nodes[0].data, version: 2.0 } }]
525+
}
526+
const { container } = render(<Agentflow apiBaseUrl='https://example.com' initialFlow={upToDateFlow} />)
527+
528+
await waitFor(() => {
529+
expect(container.querySelector('.agentflow-container')).toBeInTheDocument()
530+
})
531+
532+
expect(container.querySelector('[aria-label="Sync Nodes"]')).not.toBeInTheDocument()
533+
})
534+
})
535+
455536
describe('Imperative Ref', () => {
456537
it('should expose agentflow instance via ref', async () => {
457538
const ref = createRef<AgentFlowInstance>()

0 commit comments

Comments
 (0)