From fc89e3b4e6cef45dcff418682f273459f36336cb Mon Sep 17 00:00:00 2001 From: Shuchang Zheng Date: Tue, 15 Oct 2024 07:39:31 -0700 Subject: [PATCH] change appearance of example tasks (#975) --- .../tasks/create/CreateNewTaskFormPage.tsx | 12 ++- .../src/routes/tasks/create/PromptBox.tsx | 87 ++++++++++++------- .../src/routes/tasks/create/SavedTasks.tsx | 18 ++-- .../src/routes/tasks/create/TaskTemplates.tsx | 87 +------------------ .../src/routes/tasks/data/sampleTaskData.ts | 67 ++++++++++++++ skyvern-frontend/src/routes/tasks/types.ts | 4 + 6 files changed, 153 insertions(+), 122 deletions(-) diff --git a/skyvern-frontend/src/routes/tasks/create/CreateNewTaskFormPage.tsx b/skyvern-frontend/src/routes/tasks/create/CreateNewTaskFormPage.tsx index 5733f7d2..3c6aa38f 100644 --- a/skyvern-frontend/src/routes/tasks/create/CreateNewTaskFormPage.tsx +++ b/skyvern-frontend/src/routes/tasks/create/CreateNewTaskFormPage.tsx @@ -7,6 +7,7 @@ import { SampleCase, sampleCases } from "../types"; import { CreateNewTaskForm } from "./CreateNewTaskForm"; import { SavedTaskForm } from "./SavedTaskForm"; import { TaskGenerationApiResponse, WorkflowParameter } from "@/api/types"; +import { Skeleton } from "@/components/ui/skeleton"; function CreateNewTaskFormPage() { const { template } = useParams(); @@ -80,7 +81,16 @@ function CreateNewTaskFormPage() { } if (isFetching) { - return
Loading...
; + return ( +
+
+

Edit Task Template

+
+ + + +
+ ); } const navigationPayload = data.workflow_definition.parameters.find( diff --git a/skyvern-frontend/src/routes/tasks/create/PromptBox.tsx b/skyvern-frontend/src/routes/tasks/create/PromptBox.tsx index 10571600..e43c1faa 100644 --- a/skyvern-frontend/src/routes/tasks/create/PromptBox.tsx +++ b/skyvern-frontend/src/routes/tasks/create/PromptBox.tsx @@ -10,11 +10,6 @@ import { AxiosError } from "axios"; import { useState } from "react"; import { useNavigate } from "react-router-dom"; import { stringify as convertToYAML } from "yaml"; -import { - ScrollArea, - ScrollAreaViewport, - ScrollBar, -} from "@/components/ui/scroll-area"; function createTemplateTaskFromTaskGenerationParameters( values: TaskGenerationApiResponse, @@ -48,12 +43,47 @@ function createTemplateTaskFromTaskGenerationParameters( }; } -const examplePrompts = [ - "What is the top post on hackernews?", - "Navigate to Google Finance and search for AAPL", - "What is the top NYT bestseller?", - "What is the top ranked football team?", - "Find the top selling electrical connector on finditparts", +const exampleCases = [ + { + key: "finditparts", + label: "Find a product and add it to cart", + }, + { + key: "geico", + label: "Geico - generate an insurance quote", + }, + { + key: "job_application", + label: "Apply to a job", + }, + { + key: "california_edd", + label: "California EDD", + }, + { + key: "contact_us_forms", + label: "Fill a contact us form", + }, + { + key: "bci_seguros", + label: "Generate an auto insurance quote", + }, + { + key: "hackernews", + label: "Get the top post on Hackernews", + }, + { + key: "AAPLStockPrice", + label: "Get the stock price of AAPL", + }, + { + key: "NYTBestseller", + label: "Get the top NYT bestseller", + }, + { + key: "topRankedFootballTeam", + label: "Get the top ranked football team", + }, ]; function PromptBox() { @@ -150,26 +180,21 @@ function PromptBox() { - - -
- {examplePrompts.map((examplePrompt) => { - return ( -
{ - setPrompt(examplePrompt); - }} - > - {examplePrompt} -
- ); - })} -
- - - +
+ {exampleCases.map((example) => { + return ( +
{ + navigate(`/create/${example.key}`); + }} + > + {example.label} +
+ ); + })} +
); } diff --git a/skyvern-frontend/src/routes/tasks/create/SavedTasks.tsx b/skyvern-frontend/src/routes/tasks/create/SavedTasks.tsx index 2b9011ec..4e3df237 100644 --- a/skyvern-frontend/src/routes/tasks/create/SavedTasks.tsx +++ b/skyvern-frontend/src/routes/tasks/create/SavedTasks.tsx @@ -17,6 +17,7 @@ import { stringify as convertToYAML } from "yaml"; import { SavedTaskCard } from "./SavedTaskCard"; import { useState } from "react"; import { cn } from "@/util/utils"; +import { Skeleton } from "@/components/ui/skeleton"; function createEmptyTaskTemplate() { return { @@ -53,7 +54,9 @@ function SavedTasks() { const navigate = useNavigate(); const [hovering, setHovering] = useState(false); - const { data } = useQuery>({ + const { data, isLoading: savedTasksIsLoading } = useQuery< + Array + >({ queryKey: ["savedTasks"], queryFn: async () => { const client = await getClient(credentialGetter); @@ -113,10 +116,8 @@ function SavedTasks() { "bg-slate-900": hovering, })} > - New Template - - Create your own template - + New Task + {"https://.."} + {savedTasksIsLoading && ( + <> + + + + + )} {data?.map((workflow) => { return ( ("skyvern"); - return (
-
- -
-
- {templateSwitchValue === "skyvern" ? ( -
- {Object.entries(templateSamples).map(([sampleKey, sample]) => { - return ( - { - navigate(`/create/${sampleKey}`); - }} - /> - ); - })} -
- ) : ( - - )} -
+

My Tasks

+
); } diff --git a/skyvern-frontend/src/routes/tasks/data/sampleTaskData.ts b/skyvern-frontend/src/routes/tasks/data/sampleTaskData.ts index 958f69b1..d9a26fdf 100644 --- a/skyvern-frontend/src/routes/tasks/data/sampleTaskData.ts +++ b/skyvern-frontend/src/routes/tasks/data/sampleTaskData.ts @@ -308,6 +308,61 @@ export const geico = { errorCodeMapping: null, }; +export const hackernews = { + url: "https://news.ycombinator.com", + navigationGoal: + "Navigate to the Hacker News homepage and identify the top post. COMPLETE when the title and URL of the top post are extracted. Ensure that the top post is the first post listed on the page.", + dataExtractionGoal: + "Extract the title and URL of the top post on the Hacker News homepage.", + navigationPayload: null, + extractedInformationSchema: null, + webhookCallbackUrl: null, + totpIdentifier: null, + totpVerificationUrl: null, + errorCodeMapping: null, +}; + +export const AAPLStockPrice = { + url: "https://www.google.com/finance", + navigationGoal: + "Navigate to the search bar on Google Finance, type 'AAPL', and press Enter. COMPLETE when the search results for AAPL are displayed and the stock price is extracted.", + dataExtractionGoal: "Extract the stock price for AAPL", + navigationPayload: null, + extractedInformationSchema: null, + webhookCallbackUrl: null, + totpIdentifier: null, + totpVerificationUrl: null, + errorCodeMapping: null, +}; + +export const NYTBestseller = { + url: "https://www.nytimes.com/books/best-sellers", + navigationGoal: + "Navigate to the NYT Bestsellers page and identify the top book listed. COMPLETE when the title and author of the top book are identified.", + dataExtractionGoal: + "Extract the title, author, and rating of the top NYT Bestseller from the page.", + navigationPayload: null, + extractedInformationSchema: null, + webhookCallbackUrl: null, + totpIdentifier: null, + totpVerificationUrl: null, + errorCodeMapping: null, +}; + +export const topRankedFootballTeam = { + url: "https://www.fifa.com/fifa-world-ranking/", + navigationGoal: + "Navigate to the FIFA World Ranking page and identify the top ranked football team. COMPLETE when the name of the top ranked football team is found and displayed.", + dataExtractionGoal: + "Extract the name of the top ranked football team from the FIFA World Ranking page.", + navigationPayload: null, + extractedInformationSchema: null, + webhookCallbackUrl: null, + totpIdentifier: null, + totpVerificationUrl: null, + errorCodeMapping: null, +}; + export function getSample(sample: SampleCase) { switch (sample) { case "geico": { @@ -338,6 +393,18 @@ export function getSample(sample: SampleCase) { }, }; } + case "hackernews": { + return hackernews; + } + case "AAPLStockPrice": { + return AAPLStockPrice; + } + case "NYTBestseller": { + return NYTBestseller; + } + case "topRankedFootballTeam": { + return topRankedFootballTeam; + } case "blank": { return blank; } diff --git a/skyvern-frontend/src/routes/tasks/types.ts b/skyvern-frontend/src/routes/tasks/types.ts index f6532853..daafbf90 100644 --- a/skyvern-frontend/src/routes/tasks/types.ts +++ b/skyvern-frontend/src/routes/tasks/types.ts @@ -8,6 +8,10 @@ export const sampleCases = [ "bci_seguros", "job_application", "contact_us_forms", + "hackernews", + "AAPLStockPrice", + "NYTBestseller", + "topRankedFootballTeam", ] as const; export type SampleCase = (typeof sampleCases)[number];