diff --git a/skyvern-frontend/src/components/icons/BookIcon.tsx b/skyvern-frontend/src/components/icons/BookIcon.tsx new file mode 100644 index 00000000..34208075 --- /dev/null +++ b/skyvern-frontend/src/components/icons/BookIcon.tsx @@ -0,0 +1,26 @@ +type Props = { + className?: string; +}; + +function BookIcon({ className }: Props) { + return ( + + + + ); +} + +export { BookIcon }; diff --git a/skyvern-frontend/src/components/icons/CartIcon.tsx b/skyvern-frontend/src/components/icons/CartIcon.tsx new file mode 100644 index 00000000..f1cafdc5 --- /dev/null +++ b/skyvern-frontend/src/components/icons/CartIcon.tsx @@ -0,0 +1,26 @@ +type Props = { + className?: string; +}; + +function CartIcon({ className }: Props) { + return ( + + + + ); +} + +export { CartIcon }; diff --git a/skyvern-frontend/src/components/icons/GraphIcon.tsx b/skyvern-frontend/src/components/icons/GraphIcon.tsx new file mode 100644 index 00000000..201a82ed --- /dev/null +++ b/skyvern-frontend/src/components/icons/GraphIcon.tsx @@ -0,0 +1,26 @@ +type Props = { + className?: string; +}; + +function GraphIcon({ className }: Props) { + return ( + + + + ); +} + +export { GraphIcon }; diff --git a/skyvern-frontend/src/components/icons/InboxIcon.tsx b/skyvern-frontend/src/components/icons/InboxIcon.tsx new file mode 100644 index 00000000..eeb08afa --- /dev/null +++ b/skyvern-frontend/src/components/icons/InboxIcon.tsx @@ -0,0 +1,26 @@ +type Props = { + className?: string; +}; + +function InboxIcon({ className }: Props) { + return ( + + + + ); +} + +export { InboxIcon }; diff --git a/skyvern-frontend/src/components/icons/MessageIcon.tsx b/skyvern-frontend/src/components/icons/MessageIcon.tsx new file mode 100644 index 00000000..3342a522 --- /dev/null +++ b/skyvern-frontend/src/components/icons/MessageIcon.tsx @@ -0,0 +1,26 @@ +type Props = { + className?: string; +}; + +function MessageIcon({ className }: Props) { + return ( + + + + ); +} + +export { MessageIcon }; diff --git a/skyvern-frontend/src/components/icons/TranslateIcon.tsx b/skyvern-frontend/src/components/icons/TranslateIcon.tsx new file mode 100644 index 00000000..06d72b1f --- /dev/null +++ b/skyvern-frontend/src/components/icons/TranslateIcon.tsx @@ -0,0 +1,26 @@ +type Props = { + className?: string; +}; + +function TranslateIcon({ className }: Props) { + return ( + + + + ); +} + +export { TranslateIcon }; diff --git a/skyvern-frontend/src/components/icons/TrophyIcon.tsx b/skyvern-frontend/src/components/icons/TrophyIcon.tsx new file mode 100644 index 00000000..ca713673 --- /dev/null +++ b/skyvern-frontend/src/components/icons/TrophyIcon.tsx @@ -0,0 +1,26 @@ +type Props = { + className?: string; +}; + +function TrophyIcon({ className }: Props) { + return ( + + + + ); +} + +export { TrophyIcon }; diff --git a/skyvern-frontend/src/routes/tasks/create/PromptBox.tsx b/skyvern-frontend/src/routes/tasks/create/PromptBox.tsx index c84ed614..e4c7ad87 100644 --- a/skyvern-frontend/src/routes/tasks/create/PromptBox.tsx +++ b/skyvern-frontend/src/routes/tasks/create/PromptBox.tsx @@ -1,10 +1,23 @@ import { getClient } from "@/api/AxiosClient"; import { TaskGenerationApiResponse } from "@/api/types"; import img from "@/assets/promptBoxBg.png"; +import { BookIcon } from "@/components/icons/BookIcon"; +import { CartIcon } from "@/components/icons/CartIcon"; +import { GraphIcon } from "@/components/icons/GraphIcon"; +import { InboxIcon } from "@/components/icons/InboxIcon"; +import { MessageIcon } from "@/components/icons/MessageIcon"; +import { TranslateIcon } from "@/components/icons/TranslateIcon"; +import { TrophyIcon } from "@/components/icons/TrophyIcon"; import { Textarea } from "@/components/ui/textarea"; import { toast } from "@/components/ui/use-toast"; import { useCredentialGetter } from "@/hooks/useCredentialGetter"; -import { PaperPlaneIcon, ReloadIcon } from "@radix-ui/react-icons"; +import { + FileTextIcon, + GearIcon, + PaperPlaneIcon, + Pencil1Icon, + ReloadIcon, +} from "@radix-ui/react-icons"; import { useMutation, useQueryClient } from "@tanstack/react-query"; import { AxiosError } from "axios"; import { useState } from "react"; @@ -46,47 +59,58 @@ function createTemplateTaskFromTaskGenerationParameters( const exampleCases = [ { key: "finditparts", - label: "Find a product and add it to cart", + label: "Add a product to cart", + icon: , }, { key: "geico", - label: "Generate an insurance quote", + label: "Get an insurance quote", + icon: , }, { key: "job_application", - label: "Apply to a job", + label: "Apply for a job", + icon: , }, { key: "california_edd", - label: "Fill an online enrollment form", + label: "Fill out CA's online EDD", + icon: , }, { key: "contact_us_forms", label: "Fill a contact us form", + icon: , }, { key: "bci_seguros", - label: "Generate an auto insurance quote in spanish", + label: "Get an auto insurance quote in spanish", + icon: , }, { key: "hackernews", - label: "Get the top post on Hackernews", + label: "What's the top post on hackernews", + icon: , }, { key: "AAPLStockPrice", - label: "Get the stock price of AAPL", + label: "Search for AAPL on Google Finance", + icon: , }, { key: "NYTBestseller", label: "Get the top NYT bestseller", + icon: , }, { key: "topRankedFootballTeam", label: "Get the top ranked football team", + icon: , }, { key: "extractIntegrationsFromGong", - label: "Extract Integrations from Gong", + label: "Extract Integrations from Gong.io", + icon: , }, ]; @@ -189,12 +213,13 @@ function PromptBox() { return (
{ navigate(`/create/${example.key}`); }} > - {example.label} +
{example.icon}
+
{example.label}
); })}