TaxyAI · tobelger · Feb 26, 2024 · Feb 26, 2024 · Feb 26, 2024 · Feb 26, 2024
diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
   "dependencies": {
     "@chakra-ui/icons": "^2.0.16",
     "@chakra-ui/react": "^2.4.8",
+    "@chakra-ui/system": ">=2.0.0",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@mozilla/readability": "^0.4.2",
@@ -28,6 +29,7 @@
     "framer-motion": "^8.4.3",
     "immer": "^9.0.21",
     "lodash": "^4.17.21",
+    "node-fetch": "^3.3.2",
     "openai": "^3.2.1",
     "prettier": "^2.8.4",
     "react": "^18.2.0",
@@ -41,25 +43,30 @@
   },
   "devDependencies": {
     "@babel/core": "^7.20.12",
-    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/eslint-parser": "^7.18.9",
+    "@babel/plugin-syntax-flow": "^7.14.5",
+    "@babel/plugin-transform-class-properties": "^7.18.6",
+    "@babel/plugin-transform-private-methods": "^7.18.6",
+    "@babel/plugin-transform-numeric-separator": "^7.18.6",
+    "@babel/plugin-transform-nullish-coalescing-operator": "^7.18.6",
+    "@babel/plugin-transform-optional-chaining": "^7.21.0",
+    "@babel/plugin-transform-react-jsx": "^7.14.9",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@emotion/babel-preset-css-prop": "^11.10.0",
     "@jest/globals": "^29.5.0",
     "@types/chrome": "^0.0.202",
+    "@types/node-fetch": "^2.6.11",
     "@types/prettier": "^2.7.2",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.10",
     "@types/react-syntax-highlighter": "^15.5.6",
-    "babel-eslint": "^10.1.0",
     "babel-loader": "^8.3.0",
-    "babel-preset-react-app": "^10.0.1",
     "clean-webpack-plugin": "^4.0.0",
     "copy-webpack-plugin": "^7.0.0",
     "css-loader": "^6.7.3",
     "eslint": "^8.31.0",
     "eslint-config-prettier": "^8.8.0",
-    "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-flowtype": "^8.0.3",
     "eslint-plugin-import": "^2.27.4",
     "eslint-plugin-jsx-a11y": "^6.7.1",
@@ -68,19 +75,31 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "file-loader": "^6.2.0",
     "fs-extra": "^10.1.0",
+    "glob": "^9.2.0",
     "html-loader": "^3.1.0",
     "html-webpack-plugin": "^5.5.0",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
-    "node-sass": "^8.0.0",
+    "rimraf": "^4.1.2",
+    "sass": "^1.77.8",
     "sass-loader": "^13.2.0",
     "source-map-loader": "^3.0.1",
     "style-loader": "^3.3.1",
     "terser-webpack-plugin": "^5.3.6",
     "ts-loader": "^9.4.2",
     "typescript": "^4.9.4",
-    "webpack": "^5.75.0",
+    "webpack": "^5.90.3",
     "webpack-cli": "^4.10.0",
     "webpack-dev-server": "^4.11.1"
+  },
+  "resolutions": {
+    "glob": "^9.2.0",
+    "rimraf": "^4.1.2",
+    "abab": "^2.0.6",
+    "@eslint/config-array": "^0.17.0",
+    "@eslint/object-schema": "^2.1.4",
+    "domexception": "^4.0.0",
+    "memfs": "^4.0.0"
   }
 }
+
diff --git a/simple_ext/manifest.json b/simple_ext/manifest.json
@@ -0,0 +1,11 @@
+{
+    "manifest_version": 3,
+    "name": "Simple Popup Extension",
+    "description": "This is a simple popup extension without icons.",
+    "version": "1.0",
+    "permissions": ["activeTab"],
+    "action": {
+      "default_popup": "popup.html"
+    }
+  }
+
diff --git a/simple_ext/popup.html b/simple_ext/popup.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Simple Popup</title>
+</head>
+<body>
+  <h1>Hello, World!</h1>
+</body>
+</html>
diff --git a/src/common/App.tsx b/src/common/App.tsx
@@ -8,7 +8,12 @@ import OptionsDropdown from './OptionsDropdown';
 import logo from '../assets/img/icon-128.png';
 
 const App = () => {
-  const openAIKey = useAppState((state) => state.settings.openAIKey);
+  const { openAIKey, PGKey } = useAppState((state) => ({
+    openAIKey: state.settings.openAIKey,
+    PGKey: state.settings.PGKey, 
+  }));
+
+  const isApiKeySet = openAIKey || PGKey;
 
   return (
     <ChakraProvider>

diff --git a/src/common/ModelDropdown.tsx b/src/common/ModelDropdown.tsx
@@ -23,7 +23,8 @@ const ModelDropdown = () => {
       <option value="gpt-3.5-turbo">GPT-3.5 Turbo</option>
       <option value="gpt-3.5-turbo-16k">GPT-3.5 Turbo (16k)</option>
       <option value="gpt-4">GPT-4</option>
-      <option value="gpt-4-1106-preview">GPT-4 Turbo</option>
+      <option value="gpt-4-turbo-preview">GPT-4 Turbo</option>
+      <option value="gpt-4o">GPT-4o</option>
     </Select>
   );
 };

diff --git a/src/common/OptionsDropdown.tsx b/src/common/OptionsDropdown.tsx
@@ -10,12 +10,13 @@ import React from 'react';
 import { useAppState } from '../state/store';
 
 const OptionsDropdown = () => {
-  const { openAIKey, updateSettings } = useAppState((state) => ({
+  const { openAIKey, PGKey, updateSettings } = useAppState((state) => ({
     openAIKey: state.settings.openAIKey,
+    PGKey: state.settings.PGKey,
     updateSettings: state.settings.actions.update,
   }));
 
-  if (!openAIKey) return null;
+  if (!openAIKey && !PGKey) return null;
 
   return (
     <Menu>

diff --git a/src/common/SetAPIKey.tsx b/src/common/SetAPIKey.tsx
@@ -7,34 +7,37 @@ const ModelDropdown = () => {
     updateSettings: state.settings.actions.update,
   }));
 
+  // State for both OpenAI and PG API keys
   const [openAIKey, setOpenAIKey] = React.useState('');
+  const [PGKey, setPGKey] = React.useState('');
   const [showPassword, setShowPassword] = React.useState(false);
 
   return (
     <VStack spacing={4}>
       <Text fontSize="sm">
-        You'll need an OpenAI API Key to run the Taxy in developer mode. If you
-        don't already have one available, you can create one in your{' '}
-        <Link
-          href="https://platform.openai.com/account/api-keys"
-          color="blue"
-          isExternal
-        >
-          OpenAI account
-        </Link>
-        .
-        <br />
-        <br />
-        Taxy stores your API key locally and securely, and it is only used to
-        communicate with the OpenAI API.
+        You'll need an OpenAI API Key and optionally a PG API Key to run Taxy in developer mode and check for injections. If you don't already have these keys, you can create them by visiting the respective accounts.
       </Text>
+      <Link href="https://platform.openai.com/account/api-keys" color="blue" isExternal>
+        Get OpenAI API Key
+      </Link>
+      <Link href="https://www.predictionguard.com/getting-started" color="blue" isExternal>
+        Get PG API Key
+      </Link>
       <HStack w="full">
         <Input
           placeholder="OpenAI API Key"
           value={openAIKey}
           onChange={(event) => setOpenAIKey(event.target.value)}
           type={showPassword ? 'text' : 'password'}
         />
+      </HStack>
+      <HStack w="full">
+        <Input
+          placeholder="PG API Key (Optional)"
+          value={PGKey}
+          onChange={(event) => setPGKey(event.target.value)}
+          type={showPassword ? 'text' : 'password'}
+        />
         <Button
           onClick={() => setShowPassword(!showPassword)}
           variant="outline"
@@ -43,15 +46,76 @@ const ModelDropdown = () => {
         </Button>
       </HStack>
       <Button
-        onClick={() => updateSettings({ openAIKey })}
+        onClick={() => updateSettings({ openAIKey, PGKey })} 
         w="full"
-        disabled={!openAIKey}
+        disabled={!openAIKey && !PGKey} 
         colorScheme="blue"
       >
-        Save Key
+        Save Keys
       </Button>
     </VStack>
   );
 };
 
 export default ModelDropdown;
+
+//////////////////////////////////////////////// PREVIOUS CODE /////////////////////////////////////////////////////////////
+
+
+// import { Button, Input, VStack, Text, Link, HStack } from '@chakra-ui/react';
+// import React from 'react';
+// import { useAppState } from '../state/store';
+
+// const ModelDropdown = () => {
+//   const { updateSettings } = useAppState((state) => ({
+//     updateSettings: state.settings.actions.update,
+//   }));
+
+//   const [openAIKey, setOpenAIKey] = React.useState('');
+//   const [showPassword, setShowPassword] = React.useState(false);
+
+//   return (
+//     <VStack spacing={4}>
+//       <Text fontSize="sm">
+//         You'll need an OpenAI API Key to run the Taxy in developer mode. If you
+//         don't already have one available, you can create one in your{' '}
+//         <Link
+//           href="https://platform.openai.com/account/api-keys"
+//           color="blue"
+//           isExternal
+//         >
+//           OpenAI account
+//         </Link>
+//         .
+//         <br />
+//         <br />
+//         Taxy stores your API key locally and securely, and it is only used to
+//         communicate with the OpenAI API.
+//       </Text>
+//       <HStack w="full">
+//         <Input
+//           placeholder="OpenAI API Key"
+//           value={openAIKey}
+//           onChange={(event) => setOpenAIKey(event.target.value)}
+//           type={showPassword ? 'text' : 'password'}
+//         />
+//         <Button
+//           onClick={() => setShowPassword(!showPassword)}
+//           variant="outline"
+//         >
+//           {showPassword ? 'Hide' : 'Show'}
+//         </Button>
+//       </HStack>
+//       <Button
+//         onClick={() => updateSettings({ openAIKey })}
+//         w="full"
+//         disabled={!openAIKey}
+//         colorScheme="blue"
+//       >
+//         Save Key
+//       </Button>
+//     </VStack>
+//   );
+// };
+
+// export default ModelDropdown;
diff --git a/src/common/SetPGAPIKey.tsx b/src/common/SetPGAPIKey.tsx
@@ -0,0 +1,60 @@
+import { Button, Input, VStack, Text, Link, HStack } from '@chakra-ui/react';
+import React from 'react';
+import { useAppState } from '../state/store';
+
+const ModelDropdown = () => {
+  const { updateSettings } = useAppState((state) => ({
+    updateSettings: state.settings.actions.update,
+  }));
+
+  // State for both OpenAI and PG API keys
+  const [openAIKey, setOpenAIKey] = React.useState('');
+  const [PGKey, setPGKey] = React.useState('');
+  const [showPassword, setShowPassword] = React.useState(false);
+
+  return (
+    <VStack spacing={4}>
+      <Text fontSize="sm">
+        You'll need an OpenAI API Key and optionally a PG API Key to run Taxy in developer mode and check for injections. If you don't already have these keys, you can create them by visiting the respective accounts.
+      </Text>
+      <Link href="https://platform.openai.com/account/api-keys" color="blue" isExternal>
+        Get OpenAI API Key
+      </Link>
+      <Link href="https://www.predictionguard.com/getting-started" color="blue" isExternal>
+        Get PG API Key
+      </Link>
+      <HStack w="full">
+        <Input
+          placeholder="OpenAI API Key"
+          value={openAIKey}
+          onChange={(event) => setOpenAIKey(event.target.value)}
+          type={showPassword ? 'text' : 'password'}
+        />
+      </HStack>
+      <HStack w="full">
+        <Input
+          placeholder="PG API Key (Optional)"
+          value={PGKey}
+          onChange={(event) => setPGKey(event.target.value)}
+          type={showPassword ? 'text' : 'password'}
+        />
+        <Button
+          onClick={() => setShowPassword(!showPassword)}
+          variant="outline"
+        >
+          {showPassword ? 'Hide' : 'Show'}
+        </Button>
+      </HStack>
+      <Button
+        onClick={() => updateSettings({ openAIKey, PGKey })} 
+        w="full"
+        disabled={!openAIKey && !PGKey} 
+        colorScheme="blue"
+      >
+        Save Keys
+      </Button>
+    </VStack>
+  );
+};
+
+export default ModelDropdown;