Merge pull request #73 from FlowTestAI/integrate-openai-key

Add timeout to openai call

Author: jsajal

src/components/molecules/flow/flowtestai.js

@@ -62,6 +62,6 @@ export const generateFlowData = async (instruction, modelName, collectionId) =>
       return Promise.reject(new Error('Collection not found'));
     }
   } catch (error) {
-    return Promise.reject(`Error generating flowData: ${error}`);
+    return Promise.reject(error);
   }
 };

src/components/molecules/flow/index.js

@@ -33,13 +33,13 @@ export const init = (flowData) => {
   // Initialization
   if (flowData && flowData.nodes && flowData.edges) {
     return {
-      nodes: flowData.nodes,
-      edges: flowData.edges,
+      nodes: cloneDeep(flowData.nodes),
+      edges: cloneDeep(flowData.edges),
     };
   } else if (flowData && flowData.nodes && !flowData.edges) {
     // AI prompt generated
-    const nodes = initFlowData.nodes;
-    const edges = initFlowData.edges;
+    const nodes = cloneDeep(initFlowData.nodes);
+    const edges = cloneDeep(initFlowData.edges);
     for (let i = 0; i < flowData.nodes.length; i++) {
       nodes.push({
         id: `${i + 2}`,
@@ -61,7 +61,7 @@ export const init = (flowData) => {
       edges,
     };
   } else {
-    return initFlowData;
+    return cloneDeep(initFlowData);
   }
 };
 

src/components/molecules/modals/GenerateFlowTestModal.js

@@ -11,6 +11,8 @@ import useCanvasStore from 'stores/CanvasStore';
 import { toast } from 'react-toastify';
 import { isEqual } from 'lodash';
 import useCommonStore from 'stores/CommonStore';
+import useCollectionStore from 'stores/CollectionStore';
+import { promiseWithTimeout } from 'utils/common';
 
 const GenerateFlowTestModal = ({ closeFn = () => null, open = false, collectionId }) => {
   const setShowLoader = useCommonStore((state) => state.setShowLoader);
@@ -20,6 +22,8 @@ const GenerateFlowTestModal = ({ closeFn = () => null, open = false, collectionI
   const [selectedModel, setSelectedModel] = useState(null);
   const [textareaValue, setTextareaValue] = useState('');
 
+  const collection = useCollectionStore.getState().collections.find((c) => c.id === collectionId);
+
   return (
     <Transition appear show={open} as={Fragment}>
       <Dialog as='div' className='relative z-10' onClose={closeFn}>
@@ -109,7 +113,9 @@ const GenerateFlowTestModal = ({ closeFn = () => null, open = false, collectionI
                         className='nodrag nowheel block w-full p-2.5'
                         name='keyName'
                         placeholder='Enter your Open AI key'
-                        onChange={(e) => console.log(e.target.value)}
+                        value={collection ? collection.dotEnvVariables['OPENAI_APIKEY'] : ''}
+                        readOnly='readonly'
+                        //onChange={(e) => setOpenAIKey(e.target.value)}
                       />
                     </div>
                   ) : (
@@ -139,7 +145,7 @@ const GenerateFlowTestModal = ({ closeFn = () => null, open = false, collectionI
                         toast.info('Please select a model');
                       } else {
                         setShowLoader(true);
-                        generateFlowData(textareaValue, selectedModel, collectionId)
+                        promiseWithTimeout(generateFlowData(textareaValue, selectedModel, collectionId), 30000)
                           .then((flowData) => {
                             setShowLoader(false);
                             if (isEqual(flowData.nodes, [])) {
@@ -153,8 +159,7 @@ const GenerateFlowTestModal = ({ closeFn = () => null, open = false, collectionI
                           })
                           .catch((error) => {
                             setShowLoader(false);
-                            console.log(error);
-                            toast.error(`Error while generating flow data`);
+                            toast.error(`Error while generating flow data ${error}`);
                             closeFn();
                           });
                       }

src/service/collection.js

@@ -7,6 +7,7 @@ import { toast } from 'react-toastify';
 import { useTabStore } from 'stores/TabStore';
 import useCanvasStore from 'stores/CanvasStore';
 import { initFlowData } from 'components/molecules/flow/utils';
+import { cloneDeep } from 'lodash';
 
 export const createCollection = (openAPISpecFilePath, collectionFolderPath) => {
   const { ipcRenderer } = window;
@@ -244,7 +245,10 @@ export const createFlowTest = (name, folderPath, collectionId) => {
         return Promise.reject(new Error('A flowtest with the same name already exists'));
       } else {
         return new Promise((resolve, reject) => {
-          ipcRenderer.invoke('renderer:create-flowtest', name, folderPath, initFlowData).then(resolve).catch(reject);
+          ipcRenderer
+            .invoke('renderer:create-flowtest', name, folderPath, cloneDeep(initFlowData))
+            .then(resolve)
+            .catch(reject);
           useEventStore.getState().addEvent({
             id: uuidv4(),
             type: 'OPEN_NEW_FLOWTEST',

src/utils/common.js

@@ -15,3 +15,16 @@ export const getDefaultValue = (type) => {
     return '';
   }
 };
+
+export const promiseWithTimeout = (promise, ms) => {
+  // Create a new promise that rejects in <ms> milliseconds
+  let timeout = new Promise((resolve, reject) => {
+    let id = setTimeout(() => {
+      clearTimeout(id);
+      reject(new Error('Timed out in ' + ms + 'ms.'));
+    }, ms);
+  });
+
+  // Returns a race between our timeout and the passed in promise
+  return Promise.race([promise, timeout]);
+};