make genai disclaimer acknowledgement part of settings store

Author: jsajal

packages/flowtest-electron/src/ipc/settings.js

@@ -20,6 +20,17 @@ const registerSettingsEventHandlers = (mainWindow) => {
       return Promise.reject(error);
     }
   });
+
+  ipcMain.handle('renderer:add-genAIUsageDisclaimer', async (event, accepted) => {
+    try {
+      settingsStore.addGenAIUsageDisclaimer(accepted);
+      const savedSettings = settingsStore.getAll();
+
+      mainWindow.webContents.send('main:saved-settings', savedSettings);
+    } catch (error) {
+      return Promise.reject(error);
+    }
+  });
 };
 
 module.exports = registerSettingsEventHandlers;

packages/flowtest-electron/src/store/settings.js

@@ -9,14 +9,20 @@ class Settings {
     this.store.set('logSyncConfig', { enabled, hostUrl, accessId, accessKey });
   }
 
+  addGenAIUsageDisclaimer(accepted) {
+    this.store.set('genAIUsageDisclaimer', accepted);
+  }
+
   getAll() {
     return {
       logSyncConfig: this.store.get('logSyncConfig') || {},
+      genAIUsageDisclaimer: this.store.get('genAIUsageDisclaimer') || false,
     };
   }
 
   clearAll() {
     this.store.set('logSyncConfig', {});
+    this.store.set('genAIUsageDisclaimer', false);
   }
 }
 

packages/flowtest-electron/tests/store/settings-store.test.js

@@ -5,14 +5,21 @@ describe('settings-store', () => {
     const store = new Settings();
     store.clearAll();
 
-    expect(store.getAll().logSyncConfig).toEqual({});
+    let settings = store.getAll();
+    expect(settings.logSyncConfig).toEqual({});
+    expect(settings.genAIUsageDisclaimer).toEqual(false);
 
     // adding a collection whose directory doesn't exist
     store.addLogSyncConfig(true, 'http://localhost:3000', 'access_id', 'access_key');
-    const config = store.getAll().logSyncConfig;
+    store.addGenAIUsageDisclaimer(true);
+
+    settings = store.getAll();
+    const config = settings.logSyncConfig;
     expect(config.enabled).toEqual(true);
     expect(config.hostUrl).toEqual('http://localhost:3000');
     expect(config.accessId).toEqual('access_id');
     expect(config.accessKey).toEqual('access_key');
+
+    expect(settings.genAIUsageDisclaimer).toEqual(true);
   });
 });

src/components/molecules/headers/TabPanelHeader.js

@@ -18,14 +18,13 @@ import 'react-json-view-lite/dist/index.css';
 import { LogLevel } from '../flow/graph/GraphLogger';
 import { ShieldCheckIcon, BarsArrowUpIcon, ExclamationTriangleIcon } from '@heroicons/react/24/outline';
 import GenAIUsageDisclaimer from '../modals/GenAIUsageDisclaimer';
-import { getLocalStorageItem } from 'utils/common';
+import useSettingsStore from 'stores/SettingsStore';
 
 const TabPanelHeader = () => {
   const focusTabId = useTabStore((state) => state.focusTabId);
   const tabs = useTabStore((state) => state.tabs);
   const focusTab = tabs.find((t) => t.id === focusTabId);
 
-  const graphRunLogs = useCanvasStore((state) => state.logs);
   const setTimeout = useCanvasStore((state) => state.setTimeout);
 
   const [slidingPaneState, setSlidingPaneState] = useState({
@@ -146,10 +145,6 @@ const TabPanelHeader = () => {
     }
   };
 
-  const showDisclaimerMsg = () => {
-    return getLocalStorageItem('show_gen_ai_disclaimer');
-  };
-
   return (
     <>
       {focusTab ? (
@@ -233,9 +228,7 @@ const TabPanelHeader = () => {
                     btnType={BUTTON_TYPES.secondary}
                     isDisabled={false}
                     onClickHandle={() => {
-                      const showMsg = showDisclaimerMsg();
-                      console.log(`\n \n showMsg : ${showMsg} \n`);
-                      if (showMsg === 'false') {
+                      if (useSettingsStore.getState().genAIUsageDisclaimer === true) {
                         setGenerateFlowTestModalOpen(true);
                       } else {
                         setGenAiUsageDisclaimerModalOpen(true);
@@ -247,20 +240,16 @@ const TabPanelHeader = () => {
                     <SparklesIcon className='h-5 w-5' />
                     Generate
                   </Button>
-                  {/* ToDo: Discuss: I think having a user profile file on disk for this setting and all the future settings will be better */}
-                  {showDisclaimerMsg() === 'false' ? (
-                    <GenerateFlowTestModal
-                      closeFn={() => setGenerateFlowTestModalOpen(false)}
-                      open={generateFlowTestModalOpen}
-                      collectionId={focusTab.collectionId}
-                    />
-                  ) : (
-                    <GenAIUsageDisclaimer
-                      closeFn={() => setGenAiUsageDisclaimerModalOpen(false)}
-                      open={genAiUsageDisclaimerModalOpen}
-                      collectionId={focusTab.collectionId}
-                    />
-                  )}
+                  <GenerateFlowTestModal
+                    closeFn={() => setGenerateFlowTestModalOpen(false)}
+                    open={generateFlowTestModalOpen}
+                    collectionId={focusTab.collectionId}
+                  />
+                  <GenAIUsageDisclaimer
+                    closeFn={() => setGenAiUsageDisclaimerModalOpen(false)}
+                    open={genAiUsageDisclaimerModalOpen}
+                    openGenerateFlowTestModal={() => setGenerateFlowTestModalOpen(true)}
+                  />
                 </div>
               )}
             </div>

src/components/molecules/modals/GenAIUsageDisclaimer.js

@@ -3,12 +3,9 @@ import { PropTypes } from 'prop-types';
 import { Dialog, Transition } from '@headlessui/react';
 import Button from 'components/atoms/common/Button';
 import { BUTTON_INTENT_TYPES, BUTTON_TYPES } from 'constants/Common';
-import TextInput from 'components/atoms/common/TextInput';
-import GenerateFlowTestModal from './GenerateFlowTestModal';
-import { setLocalStorageItem } from 'utils/common';
+import { addGenAIUsageDisclaimer } from 'service/settings';
 
-const GenAIUsageDisclaimer = ({ closeFn = () => null, open = false, collectionId }) => {
-  const [generateFlowTestModalOpen, setGenerateFlowTestModalOpen] = useState(false);
+const GenAIUsageDisclaimer = ({ closeFn = () => null, open = false, openGenerateFlowTestModal = () => null }) => {
   return (
     <>
       <Transition appear show={open} as={Fragment}>
@@ -48,22 +45,17 @@ const GenAIUsageDisclaimer = ({ closeFn = () => null, open = false, collectionId
                   </Dialog.Title>
                   <div className='flex flex-col pb-6'>
                     <p className='mt-2 text-xl font-semibold italic 2xl:mt-4'>
-                      This tool utilizes OpenAI&#39;s and Amazon Bedrock Claude language model to provide information
+                      This tool utilizes OpenAI&#39;s and Amazon Bedrock&#39;s language models to provide information
                       and assistance. While we strive to ensure the accuracy and reliability of the information
                       provided, the responses generated by the model may not always be accurate, complete, or
                       up-to-date.
                     </p>
                     <ul className='font-montserrat'>
                       <li className='py-2'>
                         <span className='font-semibold'>Information Accuracy:</span> The information and responses
-                        provided by the tool are generated based on the data and patterns recognized by OpenAI&#39;s
-                        language model. Users should independently verify any critical information before relying on it.
-                      </li>
-                      <li className='py-2'>
-                        <span className='font-semibold'>No Professional Advice:</span> The responses generated by the
-                        tool do not constitute professional advice, including but not limited to medical, legal,
-                        financial, or any other professional service. Always seek the advice of a qualified professional
-                        with any questions you may have.
+                        provided by the tool are generated based on the data and patterns recognized by OpenAI&#39;s and
+                        Amazon Bedrock&#39;s language models. Users should independently verify any critical information
+                        before relying on it.
                       </li>
                       <li className='py-2'>
                         <span className='font-semibold'>User Responsibility:</span> Users are responsible for how they
@@ -72,15 +64,15 @@ const GenAIUsageDisclaimer = ({ closeFn = () => null, open = false, collectionId
                       </li>
                       <li className='py-2'>
                         <span className='font-semibold'>Company Policies:</span> If your company has policies or
-                        guidelines related to the use of OpenAI or AI-generated content, please ensure that you adhere
-                        to those policies when using this tool. It is your responsibility to comply with your
-                        company&#39;s regulations and standards.
+                        guidelines related to the use of OpenAI or AWS Bedrock or AI-generated content, please ensure
+                        that you adhere to those policies when using this tool. It is your responsibility to comply with
+                        your company&#39;s regulations and standards.
                       </li>
                       <li className='py-2'>
-                        <span className='font-semibold'>Privacy and Data Use:</span> The tool may collect data input by
-                        users to improve the quality of the service. Please review our privacy policy for more
-                        information on how we handle your data. By using this tool, you acknowledge that you understand
-                        and agree to this disclaimer and our terms of service.
+                        <span className='font-semibold'>Privacy and Data Use:</span> This tool itself DOES NOT collect
+                        any data input by users. Please review the respective LLM&#39;s privacy policy for more
+                        information on how they handle your data. By using this tool, you acknowledge that you
+                        understand and agree to this disclaimer and our terms of service.
                       </li>
                     </ul>
                   </div>
@@ -100,10 +92,10 @@ const GenAIUsageDisclaimer = ({ closeFn = () => null, open = false, collectionId
                       btnType={BUTTON_TYPES.primary}
                       isDisabled={false}
                       fullWidth={true}
-                      onClickHandle={() => {
+                      onClickHandle={async () => {
+                        await addGenAIUsageDisclaimer(true);
                         closeFn();
-                        setGenerateFlowTestModalOpen(true);
-                        setLocalStorageItem('show_gen_ai_disclaimer', false);
+                        openGenerateFlowTestModal();
                       }}
                     >
                       Acknowledge
@@ -115,11 +107,6 @@ const GenAIUsageDisclaimer = ({ closeFn = () => null, open = false, collectionId
           </div>
         </Dialog>
       </Transition>
-      <GenerateFlowTestModal
-        closeFn={() => setGenerateFlowTestModalOpen(false)}
-        open={generateFlowTestModalOpen}
-        collectionId={collectionId}
-      />
     </>
   );
 };

src/components/molecules/workspace/EmptyWorkSpaceContent.js

@@ -10,23 +10,27 @@ import GenerateFlowTestModal from '../modals/GenerateFlowTestModal';
 import NewFlowTestModal from '../modals/flow/NewFlowTestModal';
 import NewEnvironmentFileModal from '../modals/sidebar/NewEnvironmentFileModal';
 import OpenCollectionModal from '../modals/OpenCollectionModal';
+import GenAIUsageDisclaimer from '../modals/GenAIUsageDisclaimer';
+import useSettingsStore from 'stores/SettingsStore';
 
 const EmptyWorkSpaceContent = () => {
   const collections = useCollectionStore((state) => state.collections);
   const [openCollectionModal, setOpenCollectionModal] = useState(false);
   const [importCollectionModal, setImportCollectionModal] = useState(false);
   const [newFlowTestModal, setNewFlowTestModal] = useState(false);
   const [generateFlowTestModalOpen, setGenerateFlowTestModalOpen] = useState(false);
+  const [genAiUsageDisclaimerModalOpen, setGenAiUsageDisclaimerModalOpen] = useState(false);
   const [newEnvironmentFileModal, setNewEnvironmentFileModal] = useState(false);
+
   return (
-    <div className='flex items-center justify-center h-full text-cyan-900'>
-      <div className='flex flex-col max-w-xl gap-8 2xl:gap-10'>
+    <div className='flex h-full items-center justify-center text-cyan-900'>
+      <div className='flex max-w-xl flex-col gap-8 2xl:gap-10'>
         <div className='text-center'>
           <div className='flex items-center justify-center'>
-            <RectangleStackIcon className='w-24 h-24' />
+            <RectangleStackIcon className='h-24 w-24' />
           </div>
           <p className='text-2xl'>
-            A <span className='italic font-semibold font-montserrat'>Collection</span> is a ...
+            A <span className='font-montserrat font-semibold italic'>Collection</span> is a ...
           </p>
           <p className='mt-2 text-sm italic 2xl:mt-4'>
             A Collection is a set of flows where each flow is a set of API requests chained together, along with each
@@ -48,7 +52,13 @@ const EmptyWorkSpaceContent = () => {
                 <Button
                   btnType={BUTTON_TYPES.primary}
                   isDisabled={false}
-                  onClickHandle={() => setGenerateFlowTestModalOpen(true)}
+                  onClickHandle={() => {
+                    if (useSettingsStore.getState().genAIUsageDisclaimer === true) {
+                      setGenerateFlowTestModalOpen(true);
+                    } else {
+                      setGenAiUsageDisclaimerModalOpen(true);
+                    }
+                  }}
                   fullWidth={true}
                 >
                   Generate a Flow
@@ -81,10 +91,10 @@ const EmptyWorkSpaceContent = () => {
             <HorizontalDivider themeColor={'bg-cyan-900'} themeStyles={'opacity-75'} />
             <div className='text-center'>
               <div className='flex items-center justify-center'>
-                <Square3Stack3DIcon className='w-24 h-24' />
+                <Square3Stack3DIcon className='h-24 w-24' />
               </div>
               <p className='text-2xl'>
-                An <span className='italic font-semibold font-montserrat'>Environment</span> is a ...
+                An <span className='font-montserrat font-semibold italic'>Environment</span> is a ...
               </p>
               <p className='mt-2 text-sm italic 2xl:mt-4'>
                 An environment is a set of one or more variables that you can reference when sending API requests using
@@ -113,6 +123,11 @@ const EmptyWorkSpaceContent = () => {
       <ImportCollectionModal closeFn={() => setImportCollectionModal(false)} open={importCollectionModal} />
       <NewFlowTestModal closeFn={() => setNewFlowTestModal(false)} open={newFlowTestModal} />
       <GenerateFlowTestModal closeFn={() => setGenerateFlowTestModalOpen(false)} open={generateFlowTestModalOpen} />
+      <GenAIUsageDisclaimer
+        closeFn={() => setGenAiUsageDisclaimerModalOpen(false)}
+        open={genAiUsageDisclaimerModalOpen}
+        openGenerateFlowTestModal={() => setGenerateFlowTestModalOpen(true)}
+      />
       <NewEnvironmentFileModal closeFn={() => setNewEnvironmentFileModal(false)} open={newEnvironmentFileModal} />
     </div>
   );

src/ipc/settings.js

@@ -3,6 +3,7 @@ import useSettingsStore from 'stores/SettingsStore';
 
 const registerSettingsEventHandlers = () => {
   const _addLogSyncConfig = useSettingsStore((state) => state.addLogSyncConfig);
+  const _addGenAIUsageDisclaimer = useSettingsStore((state) => state.addGenAIUsageDisclaimer);
 
   useEffect(() => {
     const { ipcRenderer } = window;
@@ -12,6 +13,10 @@ const registerSettingsEventHandlers = () => {
         const config = savedSettings.logSyncConfig;
         _addLogSyncConfig(config.enabled || false, config.hostUrl || '', config.accessId || '', config.accessKey || '');
       }
+
+      if (savedSettings.genAIUsageDisclaimer) {
+        _addGenAIUsageDisclaimer(savedSettings.genAIUsageDisclaimer);
+      }
     });
 
     ipcRenderer.invoke('renderer:settings-window-ready');

src/service/settings.js

@@ -1,10 +1,26 @@
 export const addLogSyncConfig = (enabled, hostUrl, accessId, accessKey) => {
-  const { ipcRenderer } = window;
+  try {
+    const { ipcRenderer } = window;
 
-  return new Promise((resolve, reject) => {
-    ipcRenderer
-      .invoke('renderer:add-logsyncconfig', { enabled, hostUrl, accessId, accessKey })
-      .then(resolve)
-      .catch(reject);
-  });
+    return new Promise((resolve, reject) => {
+      ipcRenderer
+        .invoke('renderer:add-logsyncconfig', { enabled, hostUrl, accessId, accessKey })
+        .then(resolve)
+        .catch(reject);
+    });
+  } catch (error) {
+    return Promise.reject(new Error('Unable to update config'));
+  }
+};
+
+export const addGenAIUsageDisclaimer = (accepted) => {
+  try {
+    const { ipcRenderer } = window;
+
+    return new Promise((resolve, reject) => {
+      ipcRenderer.invoke('renderer:add-genAIUsageDisclaimer', accepted).then(resolve).catch(reject);
+    });
+  } catch (error) {
+    return Promise.reject(new Error('Unable to acknowledge'));
+  }
 };

src/stores/SettingsStore.js

@@ -2,9 +2,13 @@ import { create } from 'zustand';
 
 const useSettingsStore = create((set, get) => ({
   logSyncConfig: {},
+  genAIUsageDisclaimer: false,
   addLogSyncConfig: (enabled, hostUrl, accessId, accessKey) => {
     set((state) => ({ logSyncConfig: { ...state.logSyncConfig, ...{ enabled, hostUrl, accessId, accessKey } } }));
   },
+  addGenAIUsageDisclaimer: (accepted) => {
+    set((state) => ({ genAIUsageDisclaimer: accepted }));
+  },
 }));
 
 export default useSettingsStore;

src/utils/common.js

@@ -45,11 +45,3 @@ export const isEmptyObj = (obj) => {
   }
   return JSON.stringify(obj) === JSON.stringify({});
 };
-
-export const setLocalStorageItem = (itemKey, itemValue) => {
-  localStorage.setItem(itemKey, itemValue);
-};
-
-export const getLocalStorageItem = (itemKey) => {
-  return localStorage.getItem(itemKey);
-};