feat: display status during task execution (#141)

* feat: displaying status * fix: update name * fix: updated name
normal-computing · Apr 25, 2024 · 00cc6a5 · 00cc6a5
1 parent 3aba643
commit 00cc6a5
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 12 deletions.
diff --git a/src/common/TaskStatus.tsx b/src/common/TaskStatus.tsx
@@ -14,17 +14,18 @@ export default function TaskStatus() {
   }
 
   const displayedStatus: Record<CurrentTaskSlice["actionStatus"], string> = {
-    idle: "Idle",
-    "attaching-debugger": "Attaching Debugger",
-    "pulling-dom": "Reading Page",
-    "transforming-dom": "Reading Page",
-    "performing-query": "Running GPT",
-    "performing-action": "Performing Action",
-    waiting: "Waiting",
+    idle: "💤 Idle",
+    "attaching-debugger": "🔗 Attaching Debugger",
+    "pulling-dom": "🌐 Understanding Website",
+    "annotating-page": "🌐 Understanding Website",
+    "fetching-knoweldge": "🧠 Getting Instructions",
+    "generating-action": "🤔 Thinking and planning",
+    "performing-action": "🚀 Performing Action",
+    waiting: "⏳ Waiting",
   };
 
   return (
-    <Box textColor="gray.500" textAlign="center" mb={8} fontSize="sm">
+    <Box textColor="gray.500" textAlign="center" mt={4} mb={-4} fontSize="sm">
       {displayedStatus[actionStatus]}
     </Box>
   );

diff --git a/src/common/TaskUI.tsx b/src/common/TaskUI.tsx
@@ -123,7 +123,6 @@ const TaskUI = () => {
           />
         )}
         <Spacer />
-        {debugMode && <TaskStatus />}
       </HStack>
       {state.voiceMode && (
         <Alert status="info" borderRadius="lg">
@@ -140,6 +139,7 @@ const TaskUI = () => {
       )}
       {debugMode && <ActionExecutor />}
       <MatchedNotes />
+      <TaskStatus />
       <TaskHistory />
     </>
   );

diff --git a/src/state/currentTask.ts b/src/state/currentTask.ts
@@ -46,8 +46,9 @@ export type CurrentTaskSlice = {
     | "idle"
     | "attaching-debugger"
     | "pulling-dom"
-    | "transforming-dom"
-    | "performing-query"
+    | "annotating-page"
+    | "fetching-knoweldge"
+    | "generating-action"
     | "performing-action"
     | "waiting";
   actions: {
@@ -168,11 +169,11 @@ export const createCurrentTaskSlice: MyStateCreator<CurrentTaskSlice> = (
             return true;
           };
 
-          setActionStatus("performing-query");
           let query: QueryResult | null = null;
 
           // check if the tab does not allow attaching debugger, e.g. chrome:// pages
           if (activeTab.url?.startsWith("chrome")) {
+            setActionStatus("generating-action");
             query = await determineNavigateAction(instructions);
 
             if (wasStopped()) break;
@@ -198,13 +199,15 @@ export const createCurrentTaskSlice: MyStateCreator<CurrentTaskSlice> = (
             .filter(truthyFilter);
 
           if (isVisionModel) {
+            setActionStatus("fetching-knoweldge");
             const url = new URL(activeTab.url ?? "");
             const customKnowledgeBase = get().settings.customKnowledgeBase;
             const knowledge = await fetchKnowledge(url, customKnowledgeBase);
             set((state) => {
               state.currentTask.knowledgeInUse = knowledge;
             });
 
+            setActionStatus("annotating-page");
             const [imgData, labelData] = await buildAnnotatedScreenshots(
               tabId,
               knowledge,
@@ -215,6 +218,7 @@ export const createCurrentTaskSlice: MyStateCreator<CurrentTaskSlice> = (
               [],
             );
             if (wasStopped()) break;
+            setActionStatus("generating-action");
             query = await determineNextActionWithVision(
               instructions,
               url,
@@ -237,6 +241,7 @@ export const createCurrentTaskSlice: MyStateCreator<CurrentTaskSlice> = (
             }
 
             if (wasStopped()) break;
+            setActionStatus("generating-action");
             query = await determineNextAction(
               instructions,
               previousActions,