Skip to content

Commit a2c562f

Browse files
jsajaljsajal
committed
integrate generate button with backend
1 parent 7fd8928 commit a2c562f

File tree

5 files changed

+70
-112
lines changed

5 files changed

+70
-112
lines changed

‎src/components/molecules/flow/graph/compute/utils.js‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -46,10 +46,12 @@ const computeNodeVariable = (variable, prevNodeOutputData) => {
4646
};
4747

4848
export const computeNodeVariables = (variables, prevNodeOutputData) => {
49-
let evalVariables = {};
50-
Object.entries(variables).map(([vname, variable]) => {
51-
evalVariables[vname] = computeNodeVariable(variable, prevNodeOutputData);
52-
});
49+
const evalVariables = {};
50+
if (variables) {
51+
Object.entries(variables).map(([vname, variable]) => {
52+
evalVariables[vname] = computeNodeVariable(variable, prevNodeOutputData);
53+
});
54+
}
5355
return evalVariables;
5456
};
5557

‎src/components/molecules/flow/index.js‎

Lines changed: 1 addition & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useCallback, useMemo, useState, useEffect } from 'react';
1+
import React, { useCallback, useMemo, useState } from 'react';
22
import { PropTypes } from 'prop-types';
33
import ReactFlow, { useNodesState, useEdgesState, addEdge, Controls, Background, ControlButton } from 'reactflow';
44
import 'reactflow/dist/style.css';
@@ -8,9 +8,6 @@ import { toast } from 'react-toastify';
88
// css
99
import './index.css';
1010

11-
// notification
12-
import { useSnackbar } from 'notistack';
13-
1411
// ReactFlow Canvas
1512
import CustomEdge from './edges/ButtonEdge';
1613

@@ -20,18 +17,10 @@ import RequestNode from './nodes/RequestNode';
2017
import OutputNode from './nodes/OutputNode';
2118
import EvaluateNode from './nodes/EvaluateNode';
2219
import DelayNode from './nodes/DelayNode';
23-
24-
// file system
2520
import AuthNode from './nodes/AuthNode';
26-
import { useTabStore } from 'stores/TabStore';
2721
import FlowNode from 'components/atoms/flow/FlowNode';
28-
import { Popover } from '@headlessui/react';
29-
import { generateFlowData } from './flowtestai';
30-
import { GENAI_MODELS } from 'constants/Common';
3122
import useCanvasStore from 'stores/CanvasStore';
3223

33-
import { shallow } from 'zustand/shallow';
34-
3524
const StartNode = () => (
3625
<FlowNode title='Start' handleLeft={false} handleRight={true} handleRightData={{ type: 'source' }}></FlowNode>
3726
);
@@ -115,10 +104,6 @@ const Flow = ({ collectionId }) => {
115104
useCanvasStore(selector);
116105
//console.log(nodes);
117106

118-
// notification
119-
// eslint-disable-next-line no-unused-vars
120-
const { enqueueSnackbar, closeSnackbar } = useSnackbar();
121-
122107
const [reactFlowInstance, setReactFlowInstance] = useState(null);
123108

124109
const nodeTypes = useMemo(
@@ -214,16 +199,8 @@ const Flow = ({ collectionId }) => {
214199
return canConnect;
215200
};
216201

217-
// graph
218-
// eslint-disable-next-line no-unused-vars
219-
// const [graphRun, setGraphRun] = useState(false);
220-
// // eslint-disable-next-line no-unused-vars
221-
// const [graphRunLogs, setGraphRunLogs] = useState(undefined);
222-
223202
const onGraphComplete = (result, logs) => {
224203
console.debug('Graph complete callback: ', result);
225-
// setGraphRun(true);
226-
// setGraphRunLogs(logs);
227204
setLogs(logs);
228205
if (result[0] == 'Success') {
229206
toast.success('FlowTest Run Success! View Logs');
@@ -268,26 +245,6 @@ const Flow = ({ collectionId }) => {
268245
</ControlButton>
269246
</Controls>
270247
<Background variant='dots' gap={12} size={1} />
271-
<div className='absolute right-4 z-[2000] max-w-sm px-4 '>
272-
<button
273-
type='button'
274-
onClick={() => {
275-
generateFlowData('Add a pet then get all pets with status available', GENAI_MODELS.openai, collectionId)
276-
.then((flowData) => {
277-
const result = init(flowData);
278-
console.log(result);
279-
setNodes(result.nodes);
280-
setEdges(result.edges);
281-
})
282-
.catch((error) => {
283-
console.log(error);
284-
toast.error(`Error while generating flow data`);
285-
});
286-
}}
287-
>
288-
FlowTestAI
289-
</button>
290-
</div>
291248
<AddNodes collectionId={collectionId} />
292249
</ReactFlow>
293250
</div>

‎src/components/molecules/flow/nodes/RequestNode.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ const RequestNode = ({ id, data }) => {
3838
{data.variables &&
3939
Object.keys(data.variables).map((id) => (
4040
<div className='flex items-center justify-between pb-2' key={id}>
41-
<div className='flex items-center justify-between rounded-md border border-neutral-500 text-sm text-neutral-500 outline-0 focus:ring-0'>
41+
<div className='flex items-center justify-between text-sm border rounded-md border-neutral-500 text-neutral-500 outline-0 focus:ring-0'>
4242
{data.variables[id].type === 'Boolean' ? (
4343
<select
4444
onChange={(e) => handleVariableChange(e, id)}
@@ -60,12 +60,12 @@ const RequestNode = ({ id, data }) => {
6060
/>
6161
)}
6262
<label>{id}</label>
63-
<div className='rounded-br-md rounded-tr-md border-l border-l-neutral-500 px-4 py-2'>
63+
<div className='px-4 py-2 border-l rounded-br-md rounded-tr-md border-l-neutral-500'>
6464
{data.variables[id].type}
6565
</div>
6666
</div>
6767
<div onClick={(e) => handleDeleteVariable(e, id)} className='p-2 text-neutral-500'>
68-
<TrashIcon className='h-4 w-4' />
68+
<TrashIcon className='w-4 h-4' />
6969
</div>
7070
</div>
7171
))}
@@ -89,18 +89,18 @@ const RequestNode = ({ id, data }) => {
8989
className='nodrag nowheel mb-2 block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 outline-blue-300 focus:border-blue-100 focus:ring-blue-100'
9090
name='username'
9191
onChange={handleUrlInputChange}
92-
defaultValue={data.url ? data.url : ''}
92+
value={data.url ? data.url : ''}
9393
/>
9494
</div>
9595
<RequestBody nodeId={id} nodeData={data} />
9696
<div className='border-t border-neutral-300 bg-slate-100'>
9797
<div className='flex items-center justify-between px-2 py-4 font-medium'>
9898
<h3>Variables</h3>
9999
<button className='p-2' onClick={() => setVariableDialogOpen(true)}>
100-
<PlusIcon className='h-4 w-4' />
100+
<PlusIcon className='w-4 h-4' />
101101
</button>
102102
</div>
103-
<div className='border-t border-neutral-300 bg-slate-50 p-2 pt-4'>{renderVariables()}</div>
103+
<div className='p-2 pt-4 border-t border-neutral-300 bg-slate-50'>{renderVariables()}</div>
104104
</div>
105105
</div>
106106
<AddVariableModal

‎src/components/molecules/headers/TabPanelHeader.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ const TabPanelHeader = () => {
2020
const tabs = useTabStore((state) => state.tabs);
2121
const focusTab = tabs.find((t) => t.id === focusTabId);
2222
const graphRunLogs = useCanvasStore((state) => state.logs);
23-
console.log('graph logs: ', graphRunLogs);
2423

2524
const [generateFlowTestModalOpen, setGenerateFlowTestModalOpen] = useState(false);
2625

@@ -53,7 +52,6 @@ const TabPanelHeader = () => {
5352
<ul className='min-h-full p-4 menu w-80 bg-base-200 text-base-content'>
5453
{graphRunLogs.map((item, index) => (
5554
<li key={index}>
56-
<div>{console.log(item)}</div>
5755
<a>{item}</a>
5856
</li>
5957
))}
@@ -88,6 +86,7 @@ const TabPanelHeader = () => {
8886
<GenerateFlowTestModal
8987
closeFn={() => setGenerateFlowTestModalOpen(false)}
9088
open={generateFlowTestModalOpen}
89+
collectionId={focusTab.collectionId}
9190
/>
9291
</div>
9392
</div>

‎src/components/molecules/modals/GenerateFlowTestModal.js‎

Lines changed: 56 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,18 @@ import React, { Fragment, useState } from 'react';
22
import { PropTypes } from 'prop-types';
33
import { Dialog, Transition, Listbox } from '@headlessui/react';
44
import Button from 'components/atoms/common/Button';
5-
import { BUTTON_TYPES } from 'constants/Common';
5+
import { BUTTON_TYPES, GENAI_MODELS } from 'constants/Common';
66
import { CheckIcon, ChevronUpDownIcon } from '@heroicons/react/20/solid';
77
import { Square3Stack3DIcon } from '@heroicons/react/24/outline';
8+
import { generateFlowData } from '../flow/flowtestai';
9+
import { init } from '../flow';
10+
import useCanvasStore from 'stores/CanvasStore';
11+
import { toast } from 'react-toastify';
12+
13+
const GenerateFlowTestModal = ({ closeFn = () => null, open = false, collectionId }) => {
14+
const setNodes = useCanvasStore((state) => state.setNodes);
15+
const setEdges = useCanvasStore((state) => state.setEdges);
816

9-
const GenerateFlowTestModal = ({ closeFn = () => null, open = false }) => {
1017
const [selectedModel, setSelectedModel] = useState(null);
1118
const [textareaValue, setTextareaValue] = useState('');
1219

@@ -26,7 +33,7 @@ const GenerateFlowTestModal = ({ closeFn = () => null, open = false }) => {
2633
</Transition.Child>
2734

2835
<div className='fixed inset-0 overflow-y-auto'>
29-
<div className='flex min-h-full items-center justify-center p-4 text-center'>
36+
<div className='flex items-center justify-center min-h-full p-4 text-center'>
3037
<Transition.Child
3138
as={Fragment}
3239
enter='ease-out duration-300'
@@ -36,69 +43,51 @@ const GenerateFlowTestModal = ({ closeFn = () => null, open = false }) => {
3643
leaveFrom='opacity-100 scale-100'
3744
leaveTo='opacity-0 scale-95'
3845
>
39-
<Dialog.Panel className='w-full max-w-md transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all'>
46+
<Dialog.Panel className='w-full max-w-md p-6 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded-2xl'>
4047
<Dialog.Title
4148
as='h3'
42-
className='border-b border-neutral-300 pb-4 text-center text-lg font-semibold text-gray-900'
49+
className='pb-4 text-lg font-semibold text-center text-gray-900 border-b border-neutral-300'
4350
>
44-
Use our AI to generate the flowtest
51+
Use our AI to generate the flow
4552
</Dialog.Title>
4653
<div className='mt-6'>
4754
<Listbox value={selectedModel} onChange={setSelectedModel}>
48-
<div className='relative flex h-full w-full'>
49-
<Listbox.Button className='flex w-full cursor-default items-center justify-between gap-4 rounded border border-neutral-300 py-4'>
50-
<div className='min-w-32 pl-2 text-left'>{selectedModel ? selectedModel : 'Select model'}</div>
51-
<ChevronUpDownIcon className='h-5 w-5' aria-hidden='true' />
55+
<div className='relative flex w-full h-full'>
56+
<Listbox.Button className='flex items-center justify-between w-full gap-4 py-4 border rounded cursor-default border-neutral-300'>
57+
<div className='pl-2 text-left min-w-32'>{selectedModel ? selectedModel : 'Select model'}</div>
58+
<ChevronUpDownIcon className='w-5 h-5' aria-hidden='true' />
5259
</Listbox.Button>
5360
<Transition
5461
as={Fragment}
5562
leave='transition ease-in duration-100'
5663
leaveFrom='opacity-100'
5764
leaveTo='opacity-0'
5865
>
59-
<Listbox.Options className='absolute right-0 top-6 z-10 mt-1 max-h-60 w-full overflow-auto rounded bg-white py-1 text-base shadow-lg ring-1 ring-black/5'>
60-
<Listbox.Option
61-
className={({ active }) =>
62-
`relative cursor-default select-none py-2 pl-10 pr-4 ${
63-
active ? 'bg-amber-100 text-amber-900' : 'text-gray-900'
64-
}`
65-
}
66-
value={'Model 1'}
67-
>
68-
{({ selected }) => (
69-
<>
70-
<span className={`block truncate ${selected ? 'font-medium' : 'font-normal'}`}>
71-
Model 1
72-
</span>
73-
{selected ? (
74-
<span className='absolute inset-y-0 left-0 flex items-center pl-3 text-amber-600'>
75-
<CheckIcon className='h-5 w-5' aria-hidden='true' />
76-
</span>
77-
) : null}
78-
</>
79-
)}
80-
</Listbox.Option>
81-
<Listbox.Option
82-
className={({ active }) =>
83-
`relative cursor-default select-none py-2 pl-10 pr-4 ${
84-
active ? 'bg-amber-100 text-amber-900' : 'text-gray-900'
85-
}`
86-
}
87-
value={'Model 2'}
88-
>
89-
{({ selected }) => (
90-
<>
91-
<span className={`block truncate ${selected ? 'font-medium' : 'font-normal'}`}>
92-
Model 2
93-
</span>
94-
{selected ? (
95-
<span className='absolute inset-y-0 left-0 flex items-center pl-3 text-amber-600'>
96-
<CheckIcon className='h-5 w-5' aria-hidden='true' />
66+
<Listbox.Options className='absolute right-0 z-10 w-full py-1 mt-1 overflow-auto text-base bg-white rounded shadow-lg top-6 max-h-60 ring-1 ring-black/5'>
67+
{Object.values(GENAI_MODELS).map((modelType) => (
68+
<Listbox.Option
69+
key={modelType}
70+
className={({ active }) =>
71+
`relative cursor-default select-none py-2 pl-10 pr-4 ${
72+
active ? 'bg-amber-100 text-amber-900' : 'text-gray-900'
73+
}`
74+
}
75+
value={modelType}
76+
>
77+
{({ selected }) => (
78+
<>
79+
<span className={`block truncate ${selected ? 'font-medium' : 'font-normal'}`}>
80+
{modelType}
9781
</span>
98-
) : null}
99-
</>
100-
)}
101-
</Listbox.Option>
82+
{selected ? (
83+
<span className='absolute inset-y-0 left-0 flex items-center pl-3 text-amber-600'>
84+
<CheckIcon className='w-5 h-5' aria-hidden='true' />
85+
</span>
86+
) : null}
87+
</>
88+
)}
89+
</Listbox.Option>
90+
))}
10291
</Listbox.Options>
10392
</Transition>
10493
</div>
@@ -107,12 +96,12 @@ const GenerateFlowTestModal = ({ closeFn = () => null, open = false }) => {
10796
<textarea
10897
id='gen-ai-text'
10998
className='block w-full rounded border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 outline-blue-300 focus:border-blue-100 focus:ring-blue-100'
110-
placeholder='Text'
99+
placeholder='Describe your flow step by step'
111100
onChange={(event) => setTextareaValue(event.target.value)}
112101
/>
113102
</div>
114103
</div>
115-
<div className='mt-6 flex items-center gap-2'>
104+
<div className='flex items-center gap-2 mt-6'>
116105
<Button btnType={BUTTON_TYPES.error} isDisabled={false} onClickHandle={closeFn} fullWidth={true}>
117106
Cancel
118107
</Button>
@@ -121,8 +110,19 @@ const GenerateFlowTestModal = ({ closeFn = () => null, open = false }) => {
121110
isDisabled={false}
122111
fullWidth={true}
123112
onClickHandle={() => {
124-
console.log(`\n Model selected : ${selectedModel} \n`);
125-
console.log(`\n Model Text : ${textareaValue} \n`);
113+
generateFlowData(textareaValue, selectedModel, collectionId)
114+
.then((flowData) => {
115+
const result = init(flowData);
116+
console.log(result);
117+
setNodes(result.nodes);
118+
setEdges(result.edges);
119+
closeFn();
120+
})
121+
.catch((error) => {
122+
console.log(error);
123+
toast.error(`Error while generating flow data`);
124+
closeFn();
125+
});
126126
}}
127127
>
128128
Generate

0 commit comments

Comments
 (0)