feat: add recommended tasks when instruction is empty

src/common/RecommendedTasks.tsx

@@ -0,0 +1,62 @@
+import { Button, VStack, Text } from "@chakra-ui/react";
+import { useAppState } from "../state/store";
+
+const tasks = [
+  'Post on twitter.com with content "an automated post from WebWand!" If I\'m not logged in, stop and wait for me to log in.',
+  "Find a book about AI and add it to cart on Amazon.com",
+];
+
+const RecommendedTasks = ({
+  runTask,
+}: {
+  runTask: (instructions: string) => void;
+}) => {
+  const state = useAppState((state) => ({
+    instructions: state.ui.instructions,
+  }));
+  if (state.instructions) {
+    return null;
+  }
+
+  const onButtonClick = (idx: number) => {
+    runTask(tasks[idx]);
+  };
+
+  return (
+    <VStack spacing={2} align="stretch">
+      <Text fontSize="large" mt={1}>
+        Examples:
+      </Text>
+      <Button
+        textAlign="left"
+        display="block"
+        variant="outline"
+        height="4rem"
+        onClick={() => onButtonClick(0)}
+      >
+        <Text fontWeight={600} noOfLines={1}>
+          Post on twitter.com
+        </Text>
+        <Text fontWeight={400} noOfLines={1} color="gray">
+          with content &quot;an automated post from WebWand!&quot;
+        </Text>
+      </Button>
+      <Button
+        textAlign="left"
+        display="block"
+        variant="outline"
+        height="4rem"
+        onClick={() => onButtonClick(1)}
+      >
+        <Text fontWeight={600} noOfLines={1}>
+          Find a book about AI
+        </Text>
+        <Text fontWeight={400} noOfLines={1} color="gray">
+          and add it to cart on Amazon.com
+        </Text>
+      </Button>
+    </VStack>
+  );
+};
+
+export default RecommendedTasks;

src/common/TaskUI.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback, useState } from "react";
 import {
   Button,
+  Box,
   HStack,
   Spacer,
   Textarea,
@@ -15,6 +16,7 @@ import RunTaskButton from "./RunTaskButton";
 import VoiceButton from "./VoiceButton";
 import TaskHistory from "./TaskHistory";
 import TaskStatus from "./TaskStatus";
+import RecommendedTasks from "./RecommendedTasks";
 
 function ActionExecutor() {
   const state = useAppState((state) => ({
@@ -30,7 +32,7 @@ function ActionExecutor() {
 }
 `);
   return (
-    <div>
+    <Box mt={4}>
       <Textarea
         value={action}
         onChange={(e) => setAction(e.target.value)}
@@ -48,7 +50,7 @@ function ActionExecutor() {
           Run
         </Button>
       </HStack>
-    </div>
+    </Box>
   );
 }
 
@@ -78,15 +80,16 @@ const TaskUI = () => {
     [toast],
   );
 
-  const runTask = useCallback(() => {
-    state.instructions && state.runTask(toastError);
-    // if (state.instructions) {
-    //   chrome.runtime.sendMessage({
-    //     action: 'runTask',
-    //     task: state.instructions,
-    //   });
-    // }
-  }, [state, toastError]);
+  const runTask = useCallback(
+    (newInstructions: string = "") => {
+      if (newInstructions) {
+        state.setInstructions(newInstructions);
+      }
+      const instructions = newInstructions || state.instructions;
+      instructions && state.runTask(toastError);
+    },
+    [state, toastError],
+  );
 
   const onKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
     if (e.key === "Enter" && !e.shiftKey) {
@@ -127,6 +130,9 @@ const TaskUI = () => {
           </AlertDescription>
         </Alert>
       )}
+      {!state.voiceMode && !state.instructions && (
+        <RecommendedTasks runTask={runTask} />
+      )}
       {debugMode && <ActionExecutor />}
       <TaskHistory />
     </>

src/helpers/vision-agent/determineNavigateAction.ts

@@ -15,6 +15,8 @@ You can use the following tool:
 
 ${navigateSchemaDescription}
 
+You will have access to more tools as you progress through the task.
+
 You will be given a task to perform.
 This is an example of expected response from you: