Merge pull request #103 from FlowTestAI/streamline-openai-flow

chore: streamline openai flow and integrate some ux feedbacks

Author: jsajal

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);
     }

src/components/atoms/Editor.css

@@ -1,6 +1,9 @@
 .cm-editor {
-  height: 380px;
-  width: 380px;
+  height: 100%;
+  width: 100%;
+  min-width: 288px;
+  resize: both;
+  overflow: auto !important;
 }
 .cm-scroller {
   overflow: auto;

src/components/atoms/Editor.js

@@ -11,7 +11,13 @@ import 'components/atoms/Editor.css';
 
 export const Editor = ({ ...props }) => {
   const editor = useRef();
-  //const [code, setCode] = useState('{}');
+  const [view, setView] = useState(null);
+
+  if (view) {
+    if (props.value != view.state.doc.toString()) {
+      view.dispatch({ changes: { from: 0, to: view.state.doc.length, insert: props.value } });
+    }
+  }
 
   const onUpdate = EditorView.updateListener.of((v) => {
     if (props.onChange) {
@@ -34,9 +40,11 @@ export const Editor = ({ ...props }) => {
     });
 
     const view = new EditorView({ state, parent: editor.current });
+    setView(view);
 
     return () => {
       view.destroy();
+      setView(null);
     };
   }, []);
 

src/components/atoms/Tabs.js

@@ -4,28 +4,16 @@ import { useTabStore } from 'stores/TabStore';
 import ConfirmActionModal from 'components/molecules/modals/ConfirmActionModal';
 import { isEqual } from 'lodash';
 import { OBJ_TYPES } from 'constants/Common';
-import { compare } from './util';
+import { isSaveNeeded } from './util';
+import { saveHandle } from 'components/molecules/modals/SaveFlowModal';
 
 const tabUnsavedChanges = (tab) => {
   if (tab.type === OBJ_TYPES.flowtest && tab.flowDataDraft) {
-    const draftNodesSansOutput = tab.flowDataDraft.nodes.map((node) => {
-      if (node.type === 'outputNode' && node.data.output) {
-        const { ['output']: _, ...data } = node.data;
-        return {
-          ...node,
-          data,
-        };
-      }
-      return node;
-    });
-    if (!isEqual(tab.flowData.nodes, draftNodesSansOutput) || !isEqual(tab.flowData.edges, tab.flowDataDraft.edges)) {
-      console.log('Detected unsaved changes: ', compare(tab.flowData, tab.flowDataDraft));
-      return true;
-    }
+    return isSaveNeeded(tab.flowData, tab.flowDataDraft);
   } else if (tab.type === OBJ_TYPES.environment && tab.variablesDraft && !isEqual(tab.variables, tab.variablesDraft)) {
     return true;
   } else {
-    false;
+    return false;
   }
 };
 
@@ -36,7 +24,7 @@ const Tabs = () => {
   const focusTab = tabs.find((t) => t.id === focusTabId);
   const [confirmActionModalOpen, setConfirmActionModalOpen] = useState(false);
   const closeTab = useTabStore((state) => state.closeTab);
-  const [closingTabId, setClosingTabId] = useState('');
+  const [closingTab, setClosingTab] = useState('');
   const [closingCollectionId, setClosingCollectionId] = useState('');
   // ToDo: change color according to theme
   const activeTabStyles = 'bg-cyan-900 text-white';
@@ -48,7 +36,7 @@ const Tabs = () => {
     event.stopPropagation();
     event.preventDefault();
 
-    setClosingTabId(tab.id);
+    setClosingTab(tab);
     setClosingCollectionId(tab.collectionId);
 
     if (tabUnsavedChanges(tab)) {
@@ -94,13 +82,20 @@ const Tabs = () => {
           );
         })}
       <ConfirmActionModal
-        closeFn={() => setConfirmActionModalOpen(false)}
+        closeFn={() => {
+          closeTab(closingTab.id, closingCollectionId);
+          setConfirmActionModalOpen(false);
+        }}
         open={confirmActionModalOpen}
         message={messageForConfirmActionModal}
         actionFn={() => {
-          closeTab(closingTabId, closingCollectionId);
+          saveHandle(closingTab);
+          closeTab(closingTab.id, closingCollectionId);
           setConfirmActionModalOpen(false);
         }}
+        closeModal={() => setConfirmActionModalOpen(false)}
+        leftButtonMessage={'Close Withuout Saving'}
+        rightButtonMessage={'Save And Close'}
       />
     </div>
   );

src/components/atoms/util.js

@@ -63,3 +63,50 @@ export const compare = (a, b) => {
 
   return result;
 };
+
+export const isSaveNeeded = (flowData, flowDataDraft) => {
+  if (flowData.nodes.length != flowDataDraft.nodes.length) {
+    console.log('Detected unsaved changes: node count');
+    return true;
+  }
+
+  if (flowData.edges.length != flowDataDraft.edges.length) {
+    console.log('Detected unsaved changes: edges count');
+    return true;
+  }
+
+  const unwrapEdge = function ({ source, sourceHandle, target, targetHandle }) {
+    return { source, sourceHandle, target, targetHandle };
+  };
+
+  const edges = flowData.edges.map((e) => unwrapEdge(e));
+  const edgesDraft = flowDataDraft.edges.map((e) => unwrapEdge(e));
+
+  if (!isEqual(edges, edgesDraft)) {
+    console.log('Detected unsaved changes: ', compare(edges, edgesDraft));
+    return true;
+  }
+
+  const unwrapNode = function ({ id, type, data, position }) {
+    return { id, type, data, position };
+  };
+
+  const nodes = flowData.nodes.map((e) => unwrapNode(e));
+  const nodesDraft = flowDataDraft.nodes.map((node) => {
+    if (node.type === 'outputNode' && node.data.output) {
+      const { ['output']: _, ...data } = node.data;
+      return unwrapNode({
+        ...node,
+        data,
+      });
+    }
+    return unwrapNode(node);
+  });
+
+  if (!isEqual(nodes, nodesDraft)) {
+    console.log('Detected unsaved changes: ', compare(nodes, nodesDraft));
+    return true;
+  }
+
+  return false;
+};

src/components/molecules/flow/AddNodes.js

@@ -1,10 +1,10 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { PropTypes } from 'prop-types';
 import { Popover, Transition } from '@headlessui/react';
 import { PlusIcon, MinusIcon } from '@heroicons/react/20/solid';
 import { Fragment } from 'react';
 import { Disclosure } from '@headlessui/react';
-import { ChevronUpIcon } from '@heroicons/react/20/solid';
+import { ChevronDownIcon } from '@heroicons/react/20/solid';
 import useCollectionStore from 'stores/CollectionStore';
 import { orderNodesByTags } from './utils';
 import HorizontalDivider from 'components/atoms/common/HorizontalDivider';
@@ -64,9 +64,7 @@ const setVarNode = {
 };
 
 const AddNodes = ({ collectionId }) => {
-  // const [open, setOpen] = useState(false);
-  // const anchorRef = useRef(null);
-  // const ps = useRef();
+  const [searchFilter, setSearchFilter] = useState('');
 
   const onDragStart = (event, node) => {
     event.dataTransfer.setData('application/reactflow', JSON.stringify(node));
@@ -75,7 +73,7 @@ const AddNodes = ({ collectionId }) => {
 
   // Get all requests of this collections
   const collection = useCollectionStore.getState().collections.find((c) => c.id === collectionId);
-  const nodesByTags = orderNodesByTags(collection.nodes);
+  const nodesByTags = orderNodesByTags(collection.nodes, searchFilter);
 
   return (
     <div className='absolute bottom-4 right-4 z-[2000]'>
@@ -110,7 +108,7 @@ const AddNodes = ({ collectionId }) => {
                           <>
                             <Disclosure.Button className='flex justify-between w-full px-4 py-2 text-lg font-medium text-left border-t border-b bg-gray-50 hover:bg-gray-100 focus:outline-none focus-visible:ring'>
                               <span>Requests</span>
-                              <ChevronUpIcon className={`${open ? 'rotate-180 transform' : ''} h-5 w-5`} />
+                              <ChevronDownIcon className={`${open ? 'rotate-180 transform' : ''} h-5 w-5`} />
                             </Disclosure.Button>
 
                             <Disclosure.Panel className='px-4 pt-4 pb-2 text-sm border-l border-r'>
@@ -137,17 +135,28 @@ const AddNodes = ({ collectionId }) => {
                             <>
                               <Disclosure.Button className='flex justify-between w-full px-4 py-2 text-lg font-medium text-left border-t border-b bg-gray-50 hover:bg-gray-100 focus:outline-none focus-visible:ring'>
                                 <span>{collection.name}</span>
-                                <ChevronUpIcon className={`${open ? 'rotate-180 transform' : ''} h-5 w-5 `} />
+                                <ChevronDownIcon className={`${open ? 'rotate-180 transform' : ''} h-5 w-5 `} />
                               </Disclosure.Button>
                               <Disclosure.Panel className='px-4 pt-4 pb-2 text-sm border-l border-r'>
                                 <div>
+                                  <div className='flex items-center justify-between text-sm border rounded-md border-neutral-500 text-neutral-500 outline-0 focus:ring-0'>
+                                    <input
+                                      type='text'
+                                      className='nodrag nowheel block h-9 w-full min-w-40 rounded-bl-md rounded-tl-md p-2.5'
+                                      name='search-nodes'
+                                      placeholder='Search Nodes'
+                                      onChange={(e) => setSearchFilter(e.target.value)}
+                                      value={searchFilter}
+                                    />
+                                  </div>
+                                  <HorizontalDivider />
                                   {Object.entries(nodesByTags).map(([tag, nodes], index) => (
                                     <Disclosure as='div' key={index}>
                                       {({ open }) => (
                                         <>
                                           <Disclosure.Button className='flex justify-between w-full px-4 py-2 text-lg font-medium text-left border-t border-b bg-gray-50 hover:bg-gray-100 focus:outline-none focus-visible:ring'>
                                             <span>{tag}</span>
-                                            <ChevronUpIcon
+                                            <ChevronDownIcon
                                               className={`${open ? 'rotate-180 transform' : ''} h-5 w-5 `}
                                             />
                                           </Disclosure.Button>
@@ -189,7 +198,7 @@ const AddNodes = ({ collectionId }) => {
                           <>
                             <Disclosure.Button className='flex justify-between w-full px-4 py-2 text-lg font-medium text-left border-t border-b bg-gray-50 hover:bg-gray-100 focus:outline-none focus-visible:ring'>
                               <span>Output</span>
-                              <ChevronUpIcon className={`${open ? 'rotate-180 transform' : ''} h-5 w-5 `} />
+                              <ChevronDownIcon className={`${open ? 'rotate-180 transform' : ''} h-5 w-5 `} />
                             </Disclosure.Button>
                             <Disclosure.Panel className='px-4 pt-4 pb-2 text-sm border-l border-r'>
                               <div
@@ -212,7 +221,7 @@ const AddNodes = ({ collectionId }) => {
                           <>
                             <Disclosure.Button className='flex justify-between w-full px-4 py-2 text-lg font-medium text-left border-t border-b bg-gray-50 hover:bg-gray-100 focus:outline-none focus-visible:ring'>
                               <span>Assert</span>
-                              <ChevronUpIcon className={`${open ? 'rotate-180 transform' : ''} h-5 w-5 `} />
+                              <ChevronDownIcon className={`${open ? 'rotate-180 transform' : ''} h-5 w-5 `} />
                             </Disclosure.Button>
                             <Disclosure.Panel className='px-4 pt-4 pb-2 text-sm border-l border-r'>
                               <div
@@ -235,7 +244,7 @@ const AddNodes = ({ collectionId }) => {
                           <>
                             <Disclosure.Button className='flex justify-between w-full px-4 py-2 text-lg font-medium text-left border-t border-b bg-gray-50 hover:bg-gray-100 focus:outline-none focus-visible:ring'>
                               <span>Delay</span>
-                              <ChevronUpIcon className={`${open ? 'rotate-180 transform' : ''} h-5 w-5 `} />
+                              <ChevronDownIcon className={`${open ? 'rotate-180 transform' : ''} h-5 w-5 `} />
                             </Disclosure.Button>
                             <Disclosure.Panel className='px-4 pt-4 pb-2 text-sm border-l border-r'>
                               <div
@@ -258,7 +267,7 @@ const AddNodes = ({ collectionId }) => {
                           <>
                             <Disclosure.Button className='flex justify-between w-full px-4 py-2 text-lg font-medium text-left border-t border-b bg-gray-50 hover:bg-gray-100 focus:outline-none focus-visible:ring'>
                               <span>Authentication</span>
-                              <ChevronUpIcon className={`${open ? 'rotate-180 transform' : ''} h-5 w-5 `} />
+                              <ChevronDownIcon className={`${open ? 'rotate-180 transform' : ''} h-5 w-5 `} />
                             </Disclosure.Button>
                             <Disclosure.Panel className='px-4 pt-4 pb-2 text-sm border-l border-r'>
                               <div
@@ -281,7 +290,7 @@ const AddNodes = ({ collectionId }) => {
                           <>
                             <Disclosure.Button className='flex justify-between w-full px-4 py-2 text-lg font-medium text-left border-t border-b bg-gray-50 hover:bg-gray-100 focus:outline-none focus-visible:ring'>
                               <span>Complex</span>
-                              <ChevronUpIcon className={`${open ? 'rotate-180 transform' : ''} h-5 w-5 `} />
+                              <ChevronDownIcon className={`${open ? 'rotate-180 transform' : ''} h-5 w-5 `} />
                             </Disclosure.Button>
                             <Disclosure.Panel className='px-4 pt-4 pb-2 text-sm border-l border-r'>
                               <div
@@ -304,7 +313,7 @@ const AddNodes = ({ collectionId }) => {
                           <>
                             <Disclosure.Button className='flex justify-between w-full px-4 py-2 text-lg font-medium text-left border-t border-b bg-gray-50 hover:bg-gray-100 focus:outline-none focus-visible:ring'>
                               <span>Set Variable</span>
-                              <ChevronUpIcon className={`${open ? 'rotate-180 transform' : ''} h-5 w-5 `} />
+                              <ChevronDownIcon className={`${open ? 'rotate-180 transform' : ''} h-5 w-5 `} />
                             </Disclosure.Button>
                             <Disclosure.Panel className='px-4 pt-4 pb-2 text-sm border-l border-r'>
                               <div

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`));
       }

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

src/components/molecules/flow/nodes/OutputNode.js

@@ -12,7 +12,7 @@ const OutputNode = ({ id, data }) => {
       handleRight={true}
       handleRightData={{ type: 'source' }}
     >
-      <div className='w-full text-xs text-gray-900 border border-gray-300 rounded-lg nodrag nowheel min-h-96 min-w-96 bg-gray-50 outline-blue-300 focus:border-blue-100 focus:ring-blue-100'>
+      <div className='w-full text-xs text-gray-900 border border-gray-300 rounded-lg nodrag nowheel min-w-72 bg-gray-50 outline-blue-300 focus:border-blue-100 focus:ring-blue-100'>
         {data.output ? (
           <Editor name='output-text' value={JSON.stringify(data.output, null, 2)} readOnly={true} />
         ) : (