streamline openai key addition/edit flow

jsajal · jsajal · commit c4beff26d886 · 2024-05-10T00:00:08.000-07:00
diff --git a/packages/flowtest-electron/src/ipc/collection.js b/packages/flowtest-electron/src/ipc/collection.js
@@ -206,19 +206,20 @@ const registerRendererEventHandlers = (mainWindow, watcher) => {
     }
   });
 
+  ipcMain.handle('renderer:create-dotenv', async (event, collectionPath, content) => {
+    try {
+      createFile('.env', collectionPath, content || '');
+    } catch (error) {
+      return Promise.reject(error);
+    }
+  });
+
   ipcMain.handle('renderer:addOrUpdate-dotEnvironment', async (event, collectionPath, variables) => {
     try {
       const pathname = path.join(collectionPath, '.env');
       // variables should be of format `k1=v1\nk2=v2`;
 
-      // Append to the .env file or create it if it doesn't exist
-      fs.appendFile(pathname, variables, (err) => {
-        if (err) {
-          console.error('Error writing to .env file:', err);
-          return Promise.reject(error);
-        }
-        console.log('.env file has been updated');
-      });
+      updateFile(pathname, variables);
     } catch (error) {
       return Promise.reject(error);
     }
diff --git a/src/components/molecules/flow/flowtestai.js b/src/components/molecules/flow/flowtestai.js
@@ -1,4 +1,5 @@
 import { GENAI_MODELS } from 'constants/Common';
+import { addOrUpdateDotEnvironmentFile } from 'service/collection';
 import useCollectionStore from 'stores/CollectionStore';
 
 const translateGeneratedNodesToOpenApiNodes = (generatedNodes, openApiNodes) => {
@@ -34,27 +35,32 @@ const translateGeneratedNodesToOpenApiNodes = (generatedNodes, openApiNodes) =>
   return outputNodes;
 };
 
-export const generateFlowData = async (instruction, modelName, collectionId) => {
+export const generateFlowData = async (instruction, modelName, modelKey, collectionId) => {
   try {
     const { ipcRenderer } = window;
 
     const collection = useCollectionStore.getState().collections.find((c) => c.id === collectionId);
     if (collection) {
       if (modelName === GENAI_MODELS.openai) {
-        const apiKey = collection.dotEnvVariables['OPENAI_APIKEY'];
-        if (apiKey) {
-          const generatedNodes = await ipcRenderer.invoke('renderer:generate-nodes-ai', instruction, collectionId, {
-            name: GENAI_MODELS.openai,
-            apiKey,
+        if (!collection.dotEnvVariables) {
+          await ipcRenderer.invoke('renderer:create-dotenv', collection.pathname, `OPENAI_APIKEY=${modelKey}`);
+        } else if (
+          !Object.prototype.hasOwnProperty.call(collection.dotEnvVariables, 'OPENAI_APIKEY') ||
+          modelKey != collection.dotEnvVariables['OPENAI_APIKEY']
+        ) {
+          await addOrUpdateDotEnvironmentFile(collectionId, {
+            ...collection.dotEnvVariables,
+            OPENAI_APIKEY: modelKey,
           });
-          const flowData = {
-            nodes: translateGeneratedNodesToOpenApiNodes(generatedNodes, collection.nodes),
-          };
-          return flowData;
-        } else {
-          // prompt the user to add openai api key
-          return Promise.reject(new Error(`OpenAI api key not added`));
         }
+        const generatedNodes = await ipcRenderer.invoke('renderer:generate-nodes-ai', instruction, collectionId, {
+          name: GENAI_MODELS.openai,
+          apiKey: modelKey,
+        });
+        const flowData = {
+          nodes: translateGeneratedNodesToOpenApiNodes(generatedNodes, collection.nodes),
+        };
+        return flowData;
       } else {
         return Promise.reject(new Error(`model: ${modelName} not supported`));
       }
diff --git a/src/components/molecules/flow/index.js b/src/components/molecules/flow/index.js
@@ -227,7 +227,6 @@ const Flow = ({ tab, collectionId }) => {
           setViewport(data);
         }}
         isValidConnection={isValidConnection}
-        fitView
       >
         <Background variant='dots' gap={12} size={1} />
         <Controls
diff --git a/src/components/molecules/headers/SideBarSubHeader.js b/src/components/molecules/headers/SideBarSubHeader.js
@@ -26,7 +26,7 @@ const SideBarSubHeader = () => {
           btnType={BUTTON_TYPES.tertiary}
           classes={'rounded-none'}
           isDisabled={false}
-          onClickHandle={() => setOpenCollectionModal(true)}
+          onClickHandle={() => setImportCollectionModal(true)}
           fullWidth={true}
         >
           <PlusIcon className='w-4 h-4' />
diff --git a/src/components/molecules/modals/GenerateFlowTestModal.js b/src/components/molecules/modals/GenerateFlowTestModal.js
@@ -21,6 +21,7 @@ const GenerateFlowTestModal = ({ closeFn = () => null, open = false, collectionI
 
   const [selectedModel, setSelectedModel] = useState(null);
   const [textareaValue, setTextareaValue] = useState('');
+  const [modelkey, setModelKey] = useState('');
 
   const collection = useCollectionStore.getState().collections.find((c) => c.id === collectionId);
 
@@ -55,7 +56,21 @@ const GenerateFlowTestModal = ({ closeFn = () => null, open = false, collectionI
                   Use our AI to generate the flow
                 </Dialog.Title>
                 <div className='mt-6'>
-                  <Listbox value={selectedModel} onChange={setSelectedModel}>
+                  <Listbox
+                    value={selectedModel}
+                    onChange={(m) => {
+                      if (GENAI_MODELS.openai) {
+                        if (
+                          collection &&
+                          collection.dotEnvVariables &&
+                          Object.prototype.hasOwnProperty.call(collection.dotEnvVariables, 'OPENAI_APIKEY')
+                        ) {
+                          setModelKey(collection.dotEnvVariables['OPENAI_APIKEY']);
+                        }
+                      }
+                      setSelectedModel(m);
+                    }}
+                  >
                     <div className='relative flex w-full h-full'>
                       <Listbox.Button className='flex items-center justify-between w-full gap-4 px-2 py-4 border rounded cursor-default border-neutral-300'>
                         <div className='pl-2 text-left min-w-32'>{selectedModel ? selectedModel : 'Select model'}</div>
@@ -109,16 +124,10 @@ const GenerateFlowTestModal = ({ closeFn = () => null, open = false, collectionI
                         type='text'
                         className='nodrag nowheel block w-full p-2.5'
                         name='keyName'
-                        placeholder='Enter your Open AI key'
-                        value={
-                          collection &&
-                          collection.dotEnvVariables &&
-                          Object.prototype.hasOwnProperty.call(collection.dotEnvVariables, 'OPENAI_APIKEY')
-                            ? collection.dotEnvVariables['OPENAI_APIKEY']
-                            : 'Enter your OPENAI key: https://flowtestai.gitbook.io/flowtestai/generative-ai'
-                        }
-                        readOnly='readonly'
-                        //onChange={(e) => setOpenAIKey(e.target.value)}
+                        placeholder='Enter your OPENAI api key'
+                        value={modelkey.trim() != '' ? modelkey : 'Enter your OPENAI api key'}
+                        //readOnly='readonly'
+                        onChange={(e) => setModelKey(e.target.value)}
                       />
                     </div>
                   ) : (
@@ -129,6 +138,7 @@ const GenerateFlowTestModal = ({ closeFn = () => null, open = false, collectionI
                       id='gen-ai-text'
                       className='block w-full p-4 text-sm text-gray-900 border border-gray-300 rounded min-h-80 bg-gray-50 outline-blue-300 focus:border-blue-100 focus:ring-blue-100'
                       placeholder='Describe your flow step by step'
+                      value={textareaValue}
                       onChange={(event) => setTextareaValue(event.target.value)}
                     />
                   </div>
@@ -152,9 +162,14 @@ const GenerateFlowTestModal = ({ closeFn = () => null, open = false, collectionI
                         toast.info('Please describe your flow');
                       } else if (selectedModel === null) {
                         toast.info('Please select a model');
+                      } else if (modelkey.trim() === '') {
+                        toast.info(`Please enter ${selectedModel} api key`);
                       } else {
                         setShowLoader(true);
-                        promiseWithTimeout(generateFlowData(textareaValue, selectedModel, collectionId), 30000)
+                        promiseWithTimeout(
+                          generateFlowData(textareaValue, selectedModel, modelkey, collectionId),
+                          30000,
+                        )
                           .then((flowData) => {
                             setShowLoader(false);
                             if (isEqual(flowData.nodes, [])) {
diff --git a/src/service/collection.js b/src/service/collection.js
@@ -216,15 +216,17 @@ export const deleteEnvironmentFile = (name, collectionId) => {
 
 export const addOrUpdateDotEnvironmentFile = (collectionId, variables) => {
   const { ipcRenderer } = window;
+  console.log(variables);
 
   const collection = useCollectionStore.getState().collections.find((c) => c.id === collectionId);
 
   if (collection) {
+    const env = Object.entries(variables)
+      .map(([key, value]) => `${key}: "${value}"`)
+      .join('\n');
+
     return new Promise((resolve, reject) => {
-      ipcRenderer
-        .invoke('renderer:addOrUpdate-dotEnvironment', collection.pathname, variables)
-        .then(resolve)
-        .catch(reject);
+      ipcRenderer.invoke('renderer:addOrUpdate-dotEnvironment', collection.pathname, env).then(resolve).catch(reject);
     });
   } else {
     return Promise.reject(new Error('Collection not found'));

Original file line number	Diff line number	Diff line change
`@@ -227,7 +227,6 @@ const Flow = ({ tab, collectionId }) => {`
`227`	`227`	`setViewport(data);`
`228`	`228`	`}}`
`229`	`229`	`isValidConnection={isValidConnection}`
`230`		`- fitView`
`231`	`230`	`>`
`232`	`231`	`<Background variant='dots' gap={12} size={1} />`
`233`	`232`	`<Controls`
Original file line number	Diff line number	Diff line change
`@@ -26,7 +26,7 @@ const SideBarSubHeader = () => {`
`26`	`26`	`btnType={BUTTON_TYPES.tertiary}`
`27`	`27`	`classes={'rounded-none'}`
`28`	`28`	`isDisabled={false}`
`29`		`- onClickHandle={() => setOpenCollectionModal(true)}`
	`29`	`+ onClickHandle={() => setImportCollectionModal(true)}`
`30`	`30`	`fullWidth={true}`
`31`	`31`	`>`
`32`	`32`	`<PlusIcon className='w-4 h-4' />`