ui tweaks

package.json

@@ -34,6 +34,7 @@
     "react-hot-loader": "^4.13.1",
     "react-icons": "^4.8.0",
     "react-syntax-highlighter": "^15.5.0",
+    "react-textarea-autosize": "^8.4.1",
     "react-use": "^17.4.0",
     "turndown": "^7.1.1",
     "use-async-effect": "^2.2.7",

src/common/App.tsx

@@ -24,7 +24,7 @@ const App = ({ showIntro }: { showIntro?: boolean }) => {
           />
 
           <Heading as="h1" size="lg" flex={1}>
-            Taxy AI
+            Taxy AI Alpha
           </Heading>
           <Box flex={1}>
             <ModelDropdown />

src/common/AutosizeTextarea.tsx

@@ -0,0 +1,22 @@
+import { Textarea, TextareaProps } from '@chakra-ui/react';
+import ResizeTextarea from 'react-textarea-autosize';
+import React from 'react';
+
+const AutosizeTextarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  (props, ref) => {
+    return (
+      <Textarea
+        minH="unset"
+        overflow="hidden"
+        w="100%"
+        resize="none"
+        ref={ref}
+        minRows={1}
+        as={ResizeTextarea}
+        {...props}
+      />
+    );
+  }
+);
+
+export default AutosizeTextarea;

src/common/ModelDropdown.tsx

@@ -8,6 +8,12 @@ const ModelDropdown = () => {
     updateSettings: state.settings.actions.update,
   }));
 
+  const { openAIKey } = useAppState((state) => ({
+    openAIKey: state.settings.openAIKey,
+  }));
+
+  if (!openAIKey) return null;
+
   return (
     // Chakra UI Select component
     <Select

src/common/SetKey.tsx

@@ -14,10 +14,10 @@ const SetKey = () => {
   return (
     <Stack spacing={4}>
       <Text>
-        To use WebAgent, you'll need to enter your OpenAI API key. This is saved
-        in Chrome storage, not on our servers. Once you have an OpenAI account
-        you can create a key{' '}
-        <Link href="https://beta.openai.com/account/api-keys" color="teal.500">
+        To use Taxy, you'll need to enter your OpenAI API key. This is saved in
+        Chrome storage, not on our servers. Once you have an OpenAI account you
+        can create a key{' '}
+        <Link href="https://beta.openai.com/account/api-keys" color="blue.500">
           here
         </Link>
         .
@@ -33,7 +33,7 @@ const SetKey = () => {
           updateSettings({ openAIKey: candidateKey });
         }}
         leftIcon={<CheckIcon />}
-        colorScheme="teal"
+        colorScheme="blue"
         disabled={!candidateKey}
       >
         Save

src/common/TaskUI.tsx

@@ -45,7 +45,6 @@ const TaskUI = () => {
     <>
       <Textarea
         autoFocus
-        noOfLines={2}
         placeholder="Taxy uses OpenAI's GPT-4 API to perform actions on the current page. Try telling it to sign up for a newsletter, or to add an item to your cart."
         value={state.instructions || ''}
         disabled={taskInProgress}

src/manifest.json

@@ -1,6 +1,6 @@
 {
   "manifest_version": 3,
-  "name": "Taxy AI",
+  "name": "Taxy AI Alpha",
   "description": "A chrome extension that executes DOM actions to fulfill natural language commands on any website",
   "options_page": "options.html",
   "background": { "service_worker": "background.bundle.js" },

src/pages/Popup/index.css

@@ -1,5 +1,5 @@
 body {
-  width: 800px;
+  width: 500px;
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',

yarn.lock

@@ -1082,7 +1082,7 @@
   dependencies:
     regenerator-runtime "^0.13.11"
 
-"@babel/runtime@^7.3.1":
+"@babel/runtime@^7.20.13", "@babel/runtime@^7.3.1":
   version "7.21.0"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.21.0.tgz#5b55c9d394e5fcf304909a8b00c07dc217b56673"
   integrity sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==
@@ -8124,6 +8124,15 @@ react-syntax-highlighter@^15.5.0:
     prismjs "^1.27.0"
     refractor "^3.6.0"
 
+react-textarea-autosize@^8.4.1:
+  version "8.4.1"
+  resolved "https://registry.yarnpkg.com/react-textarea-autosize/-/react-textarea-autosize-8.4.1.tgz#bcfc5462727014b808b14ee916c01e275e8a8335"
+  integrity sha512-aD2C+qK6QypknC+lCMzteOdIjoMbNlgSFmJjCV+DrfTPwp59i/it9mMNf2HDzvRjQgKAyBDPyLJhcrzElf2U4Q==
+  dependencies:
+    "@babel/runtime" "^7.20.13"
+    use-composed-ref "^1.3.0"
+    use-latest "^1.2.1"
+
 react-universal-interface@^0.6.2:
   version "0.6.2"
   resolved "https://registry.yarnpkg.com/react-universal-interface/-/react-universal-interface-0.6.2.tgz#5e8d438a01729a4dbbcbeeceb0b86be146fe2b3b"
@@ -9382,6 +9391,23 @@ use-callback-ref@^1.3.0:
   dependencies:
     tslib "^2.0.0"
 
+use-composed-ref@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/use-composed-ref/-/use-composed-ref-1.3.0.tgz#3d8104db34b7b264030a9d916c5e94fbe280dbda"
+  integrity sha512-GLMG0Jc/jiKov/3Ulid1wbv3r54K9HlMW29IWcDFPEqFkSO2nS0MuefWgMJpeHQ9YJeXDL3ZUF+P3jdXlZX/cQ==
+
+use-isomorphic-layout-effect@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz#497cefb13d863d687b08477d9e5a164ad8c1a6fb"
+  integrity sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==
+
+use-latest@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/use-latest/-/use-latest-1.2.1.tgz#d13dfb4b08c28e3e33991546a2cee53e14038cf2"
+  integrity sha512-xA+AVm/Wlg3e2P/JiItTziwS7FK92LWrDB0p+hgXloIMuVCeJJ8v6f0eeHyPZaJrM+usM1FkFfbNCrJGs8A/zw==
+  dependencies:
+    use-isomorphic-layout-effect "^1.1.1"
+
 use-sidecar@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/use-sidecar/-/use-sidecar-1.1.2.tgz#2f43126ba2d7d7e117aa5855e5d8f0276dfe73c2"