vodorod/Dorod-Sky
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Task form redesign (#888)

Browse Source
This commit is contained in:
Kerem Yilmaz
2024-09-30 07:12:01 -07:00
committed by GitHub
parent 0b8f6ac1d8
commit 8b310a464f
8 changed files with 832 additions and 627 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
skyvern-frontend/src/api/types.ts
View File

@@ -77,6 +77,8 @@ export type TaskApiResponse = {
error_code_mapping: null; error_code_mapping: null;
proxy_location: string; proxy_location: string;
extracted_information_schema: string | object; extracted_information_schema: string | object;
totp_verification_url: string | null;
totp_identifier: string | null;
}; };
task_id: string; task_id: string;
status: Status; status: Status;

4
skyvern-frontend/src/components/AutoResizingTextarea/AutoResizingTextarea.tsx
View File

@@ -2,7 +2,7 @@ import { useLayoutEffect, useRef } from "react";
import { Textarea } from "@/components/ui/textarea"; import { Textarea } from "@/components/ui/textarea";
import { cn } from "@/util/utils"; import { cn } from "@/util/utils";
type Props = React.ComponentProps<typeof Textarea>; type Props = React.ComponentPropsWithoutRef<typeof Textarea>;
function AutoResizingTextarea(props: Props) { function AutoResizingTextarea(props: Props) {
const ref = useRef<HTMLTextAreaElement>(null); const ref = useRef<HTMLTextAreaElement>(null);
@@ -26,9 +26,9 @@ function AutoResizingTextarea(props: Props) {
return ( return (
<Textarea <Textarea
{...props} {...props}
ref={ref}
onKeyDown={setSize} onKeyDown={setSize}
onInput={setSize} onInput={setSize}
ref={ref}
rows={1} rows={1}
className={cn("min-h-0 resize-none overflow-y-hidden", props.className)} className={cn("min-h-0 resize-none overflow-y-hidden", props.className)}
/> />

665
skyvern-frontend/src/routes/tasks/create/CreateNewTaskForm.tsx
View File

@@ -1,65 +1,47 @@
import { z } from "zod"; import { getClient } from "@/api/AxiosClient";
import { zodResolver } from "@hookform/resolvers/zod"; import { AutoResizingTextarea } from "@/components/AutoResizingTextarea/AutoResizingTextarea";
import { useForm } from "react-hook-form";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { import {
Form, Form,
FormControl, FormControl,
FormDescription,
FormField, FormField,
FormItem, FormItem,
FormLabel, FormLabel,
FormMessage, FormMessage,
} from "@/components/ui/form"; } from "@/components/ui/form";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import {
dataExtractionGoalDescription,
extractedInformationSchemaDescription,
navigationGoalDescription,
navigationPayloadDescription,
urlDescription,
webhookCallbackUrlDescription,
} from "../data/descriptionHelperContent";
import { Textarea } from "@/components/ui/textarea";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { getClient } from "@/api/AxiosClient";
import { useToast } from "@/components/ui/use-toast"; import { useToast } from "@/components/ui/use-toast";
import { InfoCircledIcon, ReloadIcon } from "@radix-ui/react-icons";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip";
import { ToastAction } from "@radix-ui/react-toast";
import { Link } from "react-router-dom";
import fetchToCurl from "fetch-to-curl";
import { apiBaseUrl } from "@/util/env";
import { useCredentialGetter } from "@/hooks/useCredentialGetter";
import { useApiCredential } from "@/hooks/useApiCredential"; import { useApiCredential } from "@/hooks/useApiCredential";
import { AxiosError } from "axios"; import { useCredentialGetter } from "@/hooks/useCredentialGetter";
import { import { CodeEditor } from "@/routes/workflows/components/CodeEditor";
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@/components/ui/accordion";
import { OrganizationApiResponse } from "@/api/types";
import { Skeleton } from "@/components/ui/skeleton";
import { MAX_STEPS_DEFAULT } from "../constants";
import { copyText } from "@/util/copyText"; import { copyText } from "@/util/copyText";
import { apiBaseUrl } from "@/util/env";
import { zodResolver } from "@hookform/resolvers/zod";
import { ReloadIcon } from "@radix-ui/react-icons";
import { ToastAction } from "@radix-ui/react-toast";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { AxiosError } from "axios";
import fetchToCurl from "fetch-to-curl";
import { useState } from "react";
import { useForm, useFormState } from "react-hook-form";
import { Link } from "react-router-dom";
import { z } from "zod";
import { MAX_STEPS_DEFAULT } from "../constants";
import { TaskFormSection } from "./TaskFormSection";
const createNewTaskFormSchema = z const createNewTaskFormSchema = z
.object({ .object({
url: z.string().url({ url: z.string().url({
message: "Invalid URL", message: "Invalid URL",
}), }),
webhookCallbackUrl: z.string().or(z.null()).optional(), // url maybe, but shouldn't be validated as one webhookCallbackUrl: z.string().or(z.null()).optional(),
navigationGoal: z.string().or(z.null()).optional(), navigationGoal: z.string().or(z.null()).optional(),
dataExtractionGoal: z.string().or(z.null()).optional(), dataExtractionGoal: z.string().or(z.null()).optional(),
navigationPayload: z.string().or(z.null()).optional(), navigationPayload: z.string().or(z.null()).optional(),
extractedInformationSchema: z.string().or(z.null()).optional(), extractedInformationSchema: z.string().or(z.null()).optional(),
maxStepsOverride: z.number().optional(), maxStepsOverride: z.number().optional(),
totpVerificationUrl: z.string().or(z.null()).optional(),
totpIdentifier: z.string().or(z.null()).optional(),
}) })
.superRefine( .superRefine(
( (
@@ -125,6 +107,8 @@ function createTaskRequestObject(formValues: CreateNewTaskFormValues) {
proxy_location: "RESIDENTIAL", proxy_location: "RESIDENTIAL",
navigation_payload: transform(formValues.navigationPayload), navigation_payload: transform(formValues.navigationPayload),
extracted_information_schema: extractedInformationSchema, extracted_information_schema: extractedInformationSchema,
totp_verification_url: transform(formValues.totpVerificationUrl),
totp_identifier: transform(formValues.totpIdentifier),
}; };
} }
@@ -133,36 +117,25 @@ function CreateNewTaskForm({ initialValues }: Props) {
const { toast } = useToast(); const { toast } = useToast();
const credentialGetter = useCredentialGetter(); const credentialGetter = useCredentialGetter();
const apiCredential = useApiCredential(); const apiCredential = useApiCredential();
const [sections, setSections] = useState<
const { data: organizations, isPending } = useQuery< Array<"base" | "extraction" | "advanced">
Array<OrganizationApiResponse> >(["base"]);
>({
queryKey: ["organizations"],
queryFn: async () => {
const client = await getClient(credentialGetter);
return await client
.get("/organizations")
.then((response) => response.data.organizations);
},
});
const organization = organizations?.[0];
const form = useForm<CreateNewTaskFormValues>({ const form = useForm<CreateNewTaskFormValues>({
resolver: zodResolver(createNewTaskFormSchema), resolver: zodResolver(createNewTaskFormSchema),
defaultValues: initialValues, defaultValues: initialValues,
values: { values: {
...initialValues, ...initialValues,
maxStepsOverride: organization?.max_steps_per_run ?? MAX_STEPS_DEFAULT, maxStepsOverride: MAX_STEPS_DEFAULT,
}, },
}); });
const { errors } = useFormState({ control: form.control });
const mutation = useMutation({ const mutation = useMutation({
mutationFn: async (formValues: CreateNewTaskFormValues) => { mutationFn: async (formValues: CreateNewTaskFormValues) => {
const taskRequest = createTaskRequestObject(formValues); const taskRequest = createTaskRequestObject(formValues);
const client = await getClient(credentialGetter); const client = await getClient(credentialGetter);
const includeOverrideHeader = const includeOverrideHeader =
formValues.maxStepsOverride !== organization?.max_steps_per_run &&
formValues.maxStepsOverride !== MAX_STEPS_DEFAULT; formValues.maxStepsOverride !== MAX_STEPS_DEFAULT;
return client.post< return client.post<
ReturnType<typeof createTaskRequestObject>, ReturnType<typeof createTaskRequestObject>,
@@ -222,257 +195,347 @@ function CreateNewTaskForm({ initialValues }: Props) {
mutation.mutate(values); mutation.mutate(values);
} }
function toggleSectionVisibility(
section: "base" | "extraction" | "advanced",
) {
setSections((sections) => {
if (sections.includes(section)) {
return sections.filter((s) => s !== section);
}
return [...sections, section];
});
}
function isActive(section: "base" | "extraction" | "advanced") {
return sections.includes(section);
}
return ( return (
<Form {...form}> <Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8"> <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
<FormField <TaskFormSection
control={form.control} index={1}
name="url" title="Base Content"
render={({ field }) => ( active={isActive("base")}
<FormItem> onClick={() => {
<FormLabel> toggleSectionVisibility("base");
<div className="flex gap-2"> }}
URL * hasError={
<TooltipProvider> typeof errors.url !== "undefined" ||
<Tooltip> typeof errors.navigationGoal !== "undefined"
<TooltipTrigger asChild> }
<InfoCircledIcon /> >
</TooltipTrigger> {isActive("base") && (
<TooltipContent className="max-w-[250px]"> <div className="space-y-6">
<p>{urlDescription}</p> <div className="space-y-4">
</TooltipContent> <FormField
</Tooltip> control={form.control}
</TooltipProvider> name="url"
</div> render={({ field }) => (
</FormLabel>
<FormDescription>The starting URL for the task</FormDescription>
<FormControl>
<Input placeholder="example.com" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="navigationGoal"
render={({ field }) => (
<FormItem>
<FormLabel>
<div className="flex gap-2">
Navigation Goal
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<InfoCircledIcon />
</TooltipTrigger>
<TooltipContent className="max-w-[250px]">
<p>{navigationGoalDescription}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
</FormLabel>
<FormDescription>
How do you want Skyvern to navigate? Use words like COMPLETE and
TERMINATE to let Skyvern know when to finish navigating
</FormDescription>
<FormControl>
<Textarea
rows={5}
placeholder="Navigation Goal"
{...field}
value={field.value === null ? "" : field.value}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="dataExtractionGoal"
render={({ field }) => (
<FormItem>
<FormLabel>
<div className="flex gap-2">
Data Extraction Goal
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<InfoCircledIcon />
</TooltipTrigger>
<TooltipContent className="max-w-[250px]">
<p>{dataExtractionGoalDescription}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
</FormLabel>
<FormDescription>
If you want Skyvern to extract data after it's finished
navigating
</FormDescription>
<FormControl>
<Textarea
rows={5}
placeholder="Data Extraction Goal"
{...field}
value={field.value === null ? "" : field.value}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<Accordion type="single" collapsible>
<AccordionItem value="advanced-settings">
<AccordionTrigger>Advanced Settings</AccordionTrigger>
<AccordionContent className="space-y-8 px-1 py-4">
<FormField
control={form.control}
name="navigationPayload"
render={({ field }) => (
<FormItem>
<FormLabel>
<div className="flex gap-2">
Navigation Payload
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<InfoCircledIcon />
</TooltipTrigger>
<TooltipContent className="max-w-[250px]">
<p>{navigationPayloadDescription}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
</FormLabel>
<FormDescription>
Any context Skyvern needs to complete its actions (ex.
text that may be required to fill out forms)
</FormDescription>
<FormControl>
<Textarea
rows={5}
placeholder="Navigation Payload"
{...field}
value={field.value === null ? "" : field.value}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="extractedInformationSchema"
render={({ field }) => (
<FormItem>
<FormLabel>
<div className="flex gap-2">
Extracted Information Schema
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<InfoCircledIcon />
</TooltipTrigger>
<TooltipContent className="max-w-[250px]">
<p>{extractedInformationSchemaDescription}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
</FormLabel>
<FormDescription>
Jsonc schema to force the json format for extracted
information
</FormDescription>
<FormControl>
<Textarea
placeholder="Extracted Information Schema"
rows={5}
{...field}
value={field.value === null ? "" : field.value}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="webhookCallbackUrl"
render={({ field }) => (
<FormItem>
<FormLabel>
<div className="flex gap-2">
Webhook Callback URL
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<InfoCircledIcon />
</TooltipTrigger>
<TooltipContent className="max-w-[250px]">
<p>{webhookCallbackUrlDescription}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
</FormLabel>
<FormDescription>
The URL of a webhook endpoint to send the extracted
information
</FormDescription>
<FormControl>
<Input
placeholder="example.com"
{...field}
value={field.value === null ? "" : field.value}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="maxStepsOverride"
render={({ field }) => {
return (
<FormItem> <FormItem>
<FormLabel>Max Steps</FormLabel> <div className="flex gap-16">
<FormDescription> <FormLabel>
Max steps for this task. This will override your <div className="w-72">
organization wide setting. <h1 className="text-lg">URL</h1>
</FormDescription> <h2 className="text-base text-slate-400">
<FormControl> The starting URL for the task
{isPending ? ( </h2>
<Skeleton className="h-8" /> </div>
) : ( </FormLabel>
<Input <div className="w-full">
{...field} <FormControl>
type="number" <Input placeholder="https://" {...field} />
min={1} </FormControl>
max={ <FormMessage />
organization?.max_steps_per_run ?? </div>
MAX_STEPS_DEFAULT </div>
}
value={field.value ?? MAX_STEPS_DEFAULT}
onChange={(event) => {
field.onChange(parseInt(event.target.value));
}}
/>
)}
</FormControl>
</FormItem> </FormItem>
); )}
}} />
/> <FormField
</AccordionContent> control={form.control}
</AccordionItem> name="navigationGoal"
</Accordion> render={({ field }) => (
<FormItem>
<div className="flex gap-16">
<FormLabel>
<div className="w-72">
<h1 className="text-lg">Navigation Goal</h1>
<h2 className="text-base text-slate-400">
Where should Skyvern go and what should Skyvern
do?
</h2>
</div>
</FormLabel>
<div className="w-full">
<FormControl>
<AutoResizingTextarea
placeholder="Use terms like complete or terminate to give completion directions"
{...field}
value={field.value === null ? "" : field.value}
/>
</FormControl>
<FormMessage />
</div>
</div>
</FormItem>
)}
/>
</div>
</div>
)}
</TaskFormSection>
<TaskFormSection
index={2}
title="Extraction"
active={isActive("extraction")}
onClick={() => {
toggleSectionVisibility("extraction");
}}
hasError={
typeof errors.dataExtractionGoal !== "undefined" ||
typeof errors.extractedInformationSchema !== "undefined"
}
>
{isActive("extraction") && (
<div className="space-y-6">
<div className="space-y-4">
<FormField
control={form.control}
name="dataExtractionGoal"
render={({ field }) => (
<FormItem>
<div className="flex gap-16">
<FormLabel>
<div className="w-72">
<h1 className="text-lg">Data Extraction Goal</h1>
<h2 className="text-base text-slate-400">
What outputs are you looking to get?
</h2>
</div>
</FormLabel>
<div className="w-full">
<FormControl>
<AutoResizingTextarea
placeholder="e.g. Extract the product price..."
{...field}
value={field.value === null ? "" : field.value}
/>
</FormControl>
<FormMessage />
</div>
</div>
</FormItem>
)}
/>
<FormField
control={form.control}
name="extractedInformationSchema"
render={({ field }) => (
<FormItem>
<div className="flex gap-16">
<FormLabel>
<div className="w-72">
<h1 className="text-lg">Data Schema</h1>
<h2 className="text-base text-slate-400">
Specify the output format in JSON
</h2>
</div>
</FormLabel>
<div className="w-full">
<FormControl>
<CodeEditor
{...field}
language="json"
fontSize={12}
minHeight="96px"
value={
field.value === null ||
typeof field.value === "undefined"
? ""
: field.value
}
/>
</FormControl>
<FormMessage />
</div>
</div>
</FormItem>
)}
/>
</div>
</div>
)}
</TaskFormSection>
<TaskFormSection
index={3}
title="Advanced Settings"
active={isActive("advanced")}
onClick={() => {
toggleSectionVisibility("advanced");
}}
hasError={
typeof errors.navigationPayload !== "undefined" ||
typeof errors.maxStepsOverride !== "undefined" ||
typeof errors.webhookCallbackUrl !== "undefined"
}
>
{isActive("advanced") && (
<div className="space-y-6">
<div className="space-y-4">
<FormField
control={form.control}
name="navigationPayload"
render={({ field }) => (
<FormItem>
<div className="flex gap-16">
<FormLabel>
<div className="w-72">
<h1 className="text-lg">Navigation Payload</h1>
<h2 className="text-base text-slate-400">
Specify important parameters, routes, or states
</h2>
</div>
</FormLabel>
<div className="w-full">
<FormControl>
<CodeEditor
{...field}
language="json"
fontSize={12}
minHeight="96px"
value={
field.value === null ||
typeof field.value === "undefined"
? ""
: field.value
}
/>
</FormControl>
<FormMessage />
</div>
</div>
</FormItem>
)}
/>
<FormField
control={form.control}
name="maxStepsOverride"
render={({ field }) => (
<FormItem>
<div className="flex gap-16">
<FormLabel>
<div className="w-72">
<h1 className="text-lg">Max Steps Override</h1>
<h2 className="text-base text-slate-400">
Want to allow this task to execute more or less
steps than the default?
</h2>
</div>
</FormLabel>
<div className="w-full">
<FormControl>
<Input
{...field}
type="number"
min={1}
value={field.value}
onChange={(event) => {
field.onChange(parseInt(event.target.value));
}}
/>
</FormControl>
<FormMessage />
</div>
</div>
</FormItem>
)}
/>
<FormField
control={form.control}
name="webhookCallbackUrl"
render={({ field }) => (
<FormItem>
<div className="flex gap-16">
<FormLabel>
<div className="w-72">
<h1 className="text-lg">Webhook Callback URL</h1>
<h2 className="text-base text-slate-400">
The URL of a webhook endpoint to send the
extracted information
</h2>
</div>
</FormLabel>
<div className="w-full">
<FormControl>
<Input
placeholder="https://"
{...field}
value={field.value === null ? "" : field.value}
/>
</FormControl>
<FormMessage />
</div>
</div>
</FormItem>
)}
/>
<FormField
control={form.control}
name="totpVerificationUrl"
render={({ field }) => (
<FormItem>
<div className="flex gap-16">
<FormLabel>
<div className="w-72">
<h1 className="text-lg">TOTP Verification URL</h1>
<h2 className="text-base text-slate-400"></h2>
</div>
</FormLabel>
<div className="w-full">
<FormControl>
<Input
placeholder="https://"
{...field}
value={field.value === null ? "" : field.value}
/>
</FormControl>
<FormMessage />
</div>
</div>
</FormItem>
)}
/>
<FormField
control={form.control}
name="totpIdentifier"
render={({ field }) => (
<FormItem>
<div className="flex gap-16">
<FormLabel>
<div className="w-72">
<h1 className="text-lg">TOTP Identifier</h1>
<h2 className="text-base text-slate-400"></h2>
</div>
</FormLabel>
<div className="w-full">
<FormControl>
<Input
placeholder="Idenfitifer"
{...field}
value={field.value === null ? "" : field.value}
/>
</FormControl>
<FormMessage />
</div>
</div>
</FormItem>
)}
/>
</div>
</div>
)}
</TaskFormSection>
<div className="flex justify-end gap-3"> <div className="flex justify-end gap-3">
<Button <Button

3
skyvern-frontend/src/routes/tasks/create/CreateNewTaskFormPage.tsx
View File

@@ -64,6 +64,9 @@ function CreateNewTaskFormPage() {
extractedInformationSchema: JSON.stringify(dataSchema, null, 2), extractedInformationSchema: JSON.stringify(dataSchema, null, 2),
navigationPayload, navigationPayload,
maxSteps, maxSteps,
totpIdentifier: data.workflow_definition.blocks[0].totp_identifier,
totpVerificationUrl:
data.workflow_definition.blocks[0].totp_verification_url,
}} }}
/> />
); );

2
skyvern-frontend/src/routes/tasks/create/CreateNewTaskFromPrompt.tsx
View File

@@ -33,6 +33,8 @@ function CreateNewTaskFromPrompt() {
), ),
navigationPayload: JSON.stringify(state.navigation_payload, null, 2), navigationPayload: JSON.stringify(state.navigation_payload, null, 2),
webhookCallbackUrl: "", webhookCallbackUrl: "",
totpIdentifier: null,
totpVerificationUrl: null,
}} }}
/> />
</section> </section>

716
skyvern-frontend/src/routes/tasks/create/SavedTaskForm.tsx
View File

@@ -1,55 +1,36 @@
import { getClient } from "@/api/AxiosClient"; import { getClient } from "@/api/AxiosClient";
import { AutoResizingTextarea } from "@/components/AutoResizingTextarea/AutoResizingTextarea";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { import {
Form, Form,
FormControl, FormControl,
FormDescription,
FormField, FormField,
FormItem, FormItem,
FormLabel, FormLabel,
FormMessage, FormMessage,
} from "@/components/ui/form"; } from "@/components/ui/form";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea"; import { Separator } from "@/components/ui/separator";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip";
import { useToast } from "@/components/ui/use-toast"; import { useToast } from "@/components/ui/use-toast";
import { useApiCredential } from "@/hooks/useApiCredential"; import { useApiCredential } from "@/hooks/useApiCredential";
import { useCredentialGetter } from "@/hooks/useCredentialGetter"; import { useCredentialGetter } from "@/hooks/useCredentialGetter";
import { CodeEditor } from "@/routes/workflows/components/CodeEditor";
import { SubmitEvent } from "@/types";
import { copyText } from "@/util/copyText";
import { apiBaseUrl } from "@/util/env"; import { apiBaseUrl } from "@/util/env";
import { zodResolver } from "@hookform/resolvers/zod"; import { zodResolver } from "@hookform/resolvers/zod";
import { InfoCircledIcon, ReloadIcon } from "@radix-ui/react-icons"; import { ReloadIcon } from "@radix-ui/react-icons";
import { ToastAction } from "@radix-ui/react-toast"; import { ToastAction } from "@radix-ui/react-toast";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; import { useMutation, useQueryClient } from "@tanstack/react-query";
import { AxiosError } from "axios";
import fetchToCurl from "fetch-to-curl"; import fetchToCurl from "fetch-to-curl";
import { useState } from "react";
import { useForm, useFormState } from "react-hook-form"; import { useForm, useFormState } from "react-hook-form";
import { Link, useParams } from "react-router-dom"; import { Link, useParams } from "react-router-dom";
import { stringify as convertToYAML } from "yaml"; import { stringify as convertToYAML } from "yaml";
import { z } from "zod"; import { z } from "zod";
import {
dataExtractionGoalDescription,
extractedInformationSchemaDescription,
navigationGoalDescription,
navigationPayloadDescription,
urlDescription,
webhookCallbackUrlDescription,
} from "../data/descriptionHelperContent";
import { SubmitEvent } from "@/types";
import { AxiosError } from "axios";
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@/components/ui/accordion";
import { OrganizationApiResponse } from "@/api/types";
import { MAX_STEPS_DEFAULT } from "../constants"; import { MAX_STEPS_DEFAULT } from "../constants";
import { Skeleton } from "@/components/ui/skeleton"; import { TaskFormSection } from "./TaskFormSection";
import { copyText } from "@/util/copyText";
const savedTaskFormSchema = z const savedTaskFormSchema = z
.object({ .object({
@@ -59,12 +40,14 @@ const savedTaskFormSchema = z
message: "Invalid URL", message: "Invalid URL",
}), }),
proxyLocation: z.string().or(z.null()).optional(), proxyLocation: z.string().or(z.null()).optional(),
webhookCallbackUrl: z.string().or(z.null()).optional(), // url maybe, but shouldn't be validated as one webhookCallbackUrl: z.string().or(z.null()).optional(),
navigationGoal: z.string().or(z.null()).optional(), navigationGoal: z.string().or(z.null()).optional(),
dataExtractionGoal: z.string().or(z.null()).optional(), dataExtractionGoal: z.string().or(z.null()).optional(),
navigationPayload: z.string().or(z.null()).optional(), navigationPayload: z.string().or(z.null()).optional(),
extractedInformationSchema: z.string().or(z.null()).optional(), extractedInformationSchema: z.string().or(z.null()).optional(),
maxSteps: z.number().optional(), maxSteps: z.number().optional(),
totpVerificationUrl: z.string().or(z.null()).optional(),
totpIdentifier: z.string().or(z.null()).optional(),
}) })
.superRefine( .superRefine(
( (
@@ -131,6 +114,8 @@ function createTaskRequestObject(formValues: SavedTaskFormValues) {
error_code_mapping: null, error_code_mapping: null,
navigation_payload: transform(formValues.navigationPayload), navigation_payload: transform(formValues.navigationPayload),
extracted_information_schema: extractedInformationSchema, extracted_information_schema: extractedInformationSchema,
totp_verification_url: transform(formValues.totpVerificationUrl),
totp_identifier: transform(formValues.totpIdentifier),
}; };
} }
@@ -170,6 +155,8 @@ function createTaskTemplateRequestObject(values: SavedTaskFormValues) {
data_extraction_goal: values.dataExtractionGoal, data_extraction_goal: values.dataExtractionGoal,
data_schema: extractedInformationSchema, data_schema: extractedInformationSchema,
max_steps_per_run: values.maxSteps, max_steps_per_run: values.maxSteps,
totp_verification_url: values.totpVerificationUrl,
totp_identifier: values.totpIdentifier,
}, },
], ],
}, },
@@ -182,34 +169,20 @@ function SavedTaskForm({ initialValues }: Props) {
const credentialGetter = useCredentialGetter(); const credentialGetter = useCredentialGetter();
const apiCredential = useApiCredential(); const apiCredential = useApiCredential();
const { template } = useParams(); const { template } = useParams();
const [section, setSection] = useState<"base" | "extraction" | "advanced">(
const { data: organizations, isPending: organizationIsPending } = useQuery< "base",
Array<OrganizationApiResponse> );
>({
queryKey: ["organizations"],
queryFn: async () => {
const client = await getClient(credentialGetter);
return await client
.get("/organizations")
.then((response) => response.data.organizations);
},
});
const organization = organizations?.[0];
const form = useForm<SavedTaskFormValues>({ const form = useForm<SavedTaskFormValues>({
resolver: zodResolver(savedTaskFormSchema), resolver: zodResolver(savedTaskFormSchema),
defaultValues: initialValues, defaultValues: initialValues,
values: { values: {
...initialValues, ...initialValues,
maxSteps: maxSteps: initialValues.maxSteps ?? MAX_STEPS_DEFAULT,
initialValues.maxSteps ??
organization?.max_steps_per_run ??
MAX_STEPS_DEFAULT,
}, },
}); });
const { isDirty } = useFormState({ control: form.control }); const { isDirty, errors } = useFormState({ control: form.control });
const createAndSaveTaskMutation = useMutation({ const createAndSaveTaskMutation = useMutation({
mutationFn: async (formValues: SavedTaskFormValues) => { mutationFn: async (formValues: SavedTaskFormValues) => {
@@ -226,7 +199,6 @@ function SavedTaskForm({ initialValues }: Props) {
.then(() => { .then(() => {
const taskRequest = createTaskRequestObject(formValues); const taskRequest = createTaskRequestObject(formValues);
const includeOverrideHeader = const includeOverrideHeader =
formValues.maxSteps !== organization?.max_steps_per_run &&
formValues.maxSteps !== MAX_STEPS_DEFAULT; formValues.maxSteps !== MAX_STEPS_DEFAULT;
return client.post< return client.post<
ReturnType<typeof createTaskRequestObject>, ReturnType<typeof createTaskRequestObject>,
@@ -338,283 +310,379 @@ function SavedTaskForm({ initialValues }: Props) {
form.handleSubmit(handleSave)(event); form.handleSubmit(handleSave)(event);
} }
}} }}
className="space-y-8" className="space-y-4"
> >
<FormField <TaskFormSection
control={form.control} index={1}
name="title" title="Base Content"
render={({ field }) => ( active={section === "base"}
<FormItem> onClick={() => setSection("base")}
<FormLabel>Title *</FormLabel> hasError={
<FormControl> typeof errors.navigationGoal !== "undefined" ||
<Input placeholder="Title" {...field} /> typeof errors.title !== "undefined" ||
</FormControl> typeof errors.url !== "undefined" ||
<FormMessage /> typeof errors.description !== "undefined"
</FormItem> }
)} >
/> {section === "base" && (
<FormField <div className="space-y-6">
control={form.control} <div className="space-y-4">
name="description" <FormField
render={({ field }) => ( control={form.control}
<FormItem> name="title"
<FormLabel>Description</FormLabel> render={({ field }) => (
<FormControl>
<Textarea placeholder="Description" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="url"
render={({ field }) => (
<FormItem>
<FormLabel>
<div className="flex gap-2">
URL *
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<InfoCircledIcon />
</TooltipTrigger>
<TooltipContent className="max-w-[250px]">
<p>{urlDescription}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
</FormLabel>
<FormDescription>The starting URL for the task</FormDescription>
<FormControl>
<Input placeholder="example.com" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="navigationGoal"
render={({ field }) => (
<FormItem>
<FormLabel>
<div className="flex gap-2">
Navigation Goal
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<InfoCircledIcon />
</TooltipTrigger>
<TooltipContent className="max-w-[250px]">
<p>{navigationGoalDescription}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
</FormLabel>
<FormDescription>
How do you want Skyvern to navigate? Use words like COMPLETE and
TERMINATE to let Skyvern know when to finish navigating
</FormDescription>
<FormControl>
<Textarea
rows={5}
placeholder="Navigation Goal"
{...field}
value={field.value === null ? "" : field.value}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="dataExtractionGoal"
render={({ field }) => (
<FormItem>
<FormLabel>
<div className="flex gap-2">
Data Extraction Goal
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<InfoCircledIcon />
</TooltipTrigger>
<TooltipContent className="max-w-[250px]">
<p>{dataExtractionGoalDescription}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
</FormLabel>
<FormDescription>
If you want Skyvern to extract data after it's finished
navigating
</FormDescription>
<FormControl>
<Textarea
rows={5}
placeholder="Data Extraction Goal"
{...field}
value={field.value === null ? "" : field.value}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<Accordion type="single" collapsible>
<AccordionItem value="advanced-settings">
<AccordionTrigger>Advanced Settings</AccordionTrigger>
<AccordionContent className="space-y-8 px-1 py-4">
<FormField
control={form.control}
name="navigationPayload"
render={({ field }) => (
<FormItem>
<FormLabel>
<div className="flex gap-2">
Navigation Payload
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<InfoCircledIcon />
</TooltipTrigger>
<TooltipContent className="max-w-[250px]">
<p>{navigationPayloadDescription}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
</FormLabel>
<FormDescription>
Any context Skyvern needs to complete its actions (ex.
text that may be required to fill out forms)
</FormDescription>
<FormControl>
<Textarea
rows={5}
placeholder="Navigation Payload"
{...field}
value={field.value === null ? "" : field.value}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="extractedInformationSchema"
render={({ field }) => (
<FormItem>
<FormLabel>
<div className="flex gap-2">
Extracted Information Schema
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<InfoCircledIcon />
</TooltipTrigger>
<TooltipContent className="max-w-[250px]">
<p>{extractedInformationSchemaDescription}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
</FormLabel>
<FormDescription>
Jsonc schema to force the json format for extracted
information
</FormDescription>
<FormControl>
<Textarea
placeholder="Extracted Information Schema"
rows={5}
{...field}
value={field.value === null ? "" : field.value}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="webhookCallbackUrl"
render={({ field }) => (
<FormItem>
<FormLabel>
<div className="flex gap-2">
Webhook Callback URL
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<InfoCircledIcon />
</TooltipTrigger>
<TooltipContent className="max-w-[250px]">
<p>{webhookCallbackUrlDescription}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
</FormLabel>
<FormDescription>
The URL of a webhook endpoint to send the extracted
information
</FormDescription>
<FormControl>
<Input
placeholder="example.com"
{...field}
value={field.value === null ? "" : field.value}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="maxSteps"
render={({ field }) => {
return (
<FormItem> <FormItem>
<FormLabel>Max Steps</FormLabel> <div className="flex gap-16">
<FormDescription> <FormLabel>
Max steps for this task. This will override your <div className="w-72">
organization wide setting. <h1 className="text-lg">Title</h1>
</FormDescription> <h2 className="text-base text-slate-400">
<FormControl> Name of your task
{organizationIsPending ? ( </h2>
<Skeleton className="h-8" /> </div>
) : ( </FormLabel>
<Input <div className="w-full">
{...field} <FormControl>
type="number" <Input placeholder="Task Name" {...field} />
min={1} </FormControl>
max={ <FormMessage />
organization?.max_steps_per_run ?? </div>
MAX_STEPS_DEFAULT </div>
}
value={field.value ?? MAX_STEPS_DEFAULT}
onChange={(event) => {
field.onChange(parseInt(event.target.value));
}}
/>
)}
</FormControl>
</FormItem> </FormItem>
); )}
}} />
/> <FormField
</AccordionContent> control={form.control}
</AccordionItem> name="description"
</Accordion> render={({ field }) => (
<FormItem>
<div className="flex gap-16">
<FormLabel>
<div className="w-72">
<h1 className="text-lg">Description</h1>
<h2 className="text-base text-slate-400">
What is the purpose of the task?
</h2>
</div>
</FormLabel>
<div className="w-full">
<FormControl>
<AutoResizingTextarea
placeholder="This template is used to..."
{...field}
/>
</FormControl>
<FormMessage />
</div>
</div>
</FormItem>
)}
/>
<Separator />
<FormField
control={form.control}
name="url"
render={({ field }) => (
<FormItem>
<div className="flex gap-16">
<FormLabel>
<div className="w-72">
<h1 className="text-lg">URL</h1>
<h2 className="text-base text-slate-400">
The starting URL for the task
</h2>
</div>
</FormLabel>
<div className="w-full">
<FormControl>
<Input placeholder="https://" {...field} />
</FormControl>
<FormMessage />
</div>
</div>
</FormItem>
)}
/>
<FormField
control={form.control}
name="navigationGoal"
render={({ field }) => (
<FormItem>
<div className="flex gap-16">
<FormLabel>
<div className="w-72">
<h1 className="text-lg">Navigation Goal</h1>
<h2 className="text-base text-slate-400">
Where should Skyvern go and what should Skyvern
do?
</h2>
</div>
</FormLabel>
<div className="w-full">
<FormControl>
<AutoResizingTextarea
placeholder="Use terms like complete or terminate to give completion directions"
{...field}
value={field.value === null ? "" : field.value}
/>
</FormControl>
<FormMessage />
</div>
</div>
</FormItem>
)}
/>
</div>
</div>
)}
</TaskFormSection>
<TaskFormSection
index={2}
title="Extraction"
active={section === "extraction"}
onClick={() => setSection("extraction")}
hasError={
typeof errors.extractedInformationSchema !== "undefined" ||
typeof errors.dataExtractionGoal !== "undefined"
}
>
{section === "extraction" && (
<div className="space-y-6">
<div className="space-y-4">
<FormField
control={form.control}
name="dataExtractionGoal"
render={({ field }) => (
<FormItem>
<div className="flex gap-16">
<FormLabel>
<div className="w-72">
<h1 className="text-lg">Data Extraction Goal</h1>
<h2 className="text-base text-slate-400">
What outputs are you looking to get?
</h2>
</div>
</FormLabel>
<div className="w-full">
<FormControl>
<AutoResizingTextarea
placeholder="e.g. Extract the product price..."
{...field}
value={field.value === null ? "" : field.value}
/>
</FormControl>
<FormMessage />
</div>
</div>
</FormItem>
)}
/>
<FormField
control={form.control}
name="extractedInformationSchema"
render={({ field }) => (
<FormItem>
<div className="flex gap-16">
<FormLabel>
<div className="w-72">
<h1 className="text-lg">Data Schema</h1>
<h2 className="text-base text-slate-400">
Specify the output format in JSON
</h2>
</div>
</FormLabel>
<div className="w-full">
<FormControl>
<CodeEditor
{...field}
language="json"
fontSize={14}
minHeight="96px"
value={
field.value === null ||
typeof field.value === "undefined"
? ""
: field.value
}
/>
</FormControl>
<FormMessage />
</div>
</div>
</FormItem>
)}
/>
</div>
</div>
)}
</TaskFormSection>
<TaskFormSection
index={3}
title="Advanced Settings"
active={section === "advanced"}
onClick={() => setSection("advanced")}
hasError={
typeof errors.navigationPayload !== "undefined" ||
typeof errors.maxSteps !== "undefined" ||
typeof errors.webhookCallbackUrl !== "undefined"
}
>
{section === "advanced" && (
<div className="space-y-6">
<div className="space-y-4">
<FormField
control={form.control}
name="navigationPayload"
render={({ field }) => (
<FormItem>
<div className="flex gap-16">
<FormLabel>
<div className="w-72">
<h1 className="text-lg">Navigation Payload</h1>
<h2 className="text-base text-slate-400">
Specify important parameters, routes, or states
</h2>
</div>
</FormLabel>
<div className="w-full">
<FormControl>
<CodeEditor
{...field}
language="json"
fontSize={12}
minHeight="96px"
value={
field.value === null ||
typeof field.value === "undefined"
? ""
: field.value
}
/>
</FormControl>
<FormMessage />
</div>
</div>
</FormItem>
)}
/>
<FormField
control={form.control}
name="maxSteps"
render={({ field }) => (
<FormItem>
<div className="flex gap-16">
<FormLabel>
<div className="w-72">
<h1 className="text-lg">Max Steps Override</h1>
<h2 className="text-base text-slate-400">
Want to allow this task to execute more or less
steps than the default?
</h2>
</div>
</FormLabel>
<div className="w-full">
<FormControl>
<Input
{...field}
type="number"
min={1}
value={field.value}
onChange={(event) => {
field.onChange(parseInt(event.target.value));
}}
/>
</FormControl>
<FormMessage />
</div>
</div>
</FormItem>
)}
/>
<FormField
control={form.control}
name="webhookCallbackUrl"
render={({ field }) => (
<FormItem>
<div className="flex gap-16">
<FormLabel>
<div className="w-72">
<h1 className="text-lg">Webhook Callback URL</h1>
<h2 className="text-base text-slate-400">
The URL of a webhook endpoint to send the
extracted information
</h2>
</div>
</FormLabel>
<div className="w-full">
<FormControl>
<Input
placeholder="https://"
{...field}
value={field.value === null ? "" : field.value}
/>
</FormControl>
<FormMessage />
</div>
</div>
</FormItem>
)}
/>
<FormField
control={form.control}
name="totpVerificationUrl"
render={({ field }) => (
<FormItem>
<div className="flex gap-16">
<FormLabel>
<div className="w-72">
<h1 className="text-lg">TOTP Verification URL</h1>
<h2 className="text-base text-slate-400"></h2>
</div>
</FormLabel>
<div className="w-full">
<FormControl>
<Input
placeholder="https://"
{...field}
value={field.value === null ? "" : field.value}
/>
</FormControl>
<FormMessage />
</div>
</div>
</FormItem>
)}
/>
<FormField
control={form.control}
name="totpIdentifier"
render={({ field }) => (
<FormItem>
<div className="flex gap-16">
<FormLabel>
<div className="w-72">
<h1 className="text-lg">TOTP Identifier</h1>
<h2 className="text-base text-slate-400"></h2>
</div>
</FormLabel>
<div className="w-full">
<FormControl>
<Input
placeholder="Idenfitifer"
{...field}
value={field.value === null ? "" : field.value}
/>
</FormControl>
<FormMessage />
</div>
</div>
</FormItem>
)}
/>
</div>
</div>
)}
</TaskFormSection>
<div className="flex justify-end gap-3"> <div className="flex justify-end gap-3">
<Button <Button

65
skyvern-frontend/src/routes/tasks/create/TaskFormSection.tsx Normal file
View File

@@ -0,0 +1,65 @@
import { cn } from "@/util/utils";
import { useState } from "react";
type Props = {
index: number;
title: string;
active: boolean;
hasError?: boolean;
onClick?: () => void;
children?: React.ReactNode;
};
function TaskFormSection({
index,
title,
active,
onClick,
children,
hasError,
}: Props) {
const [hovering, setHovering] = useState(false);
return (
<section
className={cn("space-y-8 rounded-lg bg-slate-elevation3 px-6 py-5", {
"cursor-pointer": !active,
})}
onMouseOver={() => setHovering(true)}
onMouseOut={() => setHovering(false)}
onMouseEnter={() => setHovering(true)}
onMouseLeave={() => setHovering(false)}
onClick={() => onClick && onClick()}
>
<header className="flex h-7 gap-4">
<div
className={cn(
"flex w-7 items-center justify-center rounded-full border border-slate-400",
{
"bg-slate-400": hovering || active,
"border-destructive": !active && hasError,
},
)}
>
<span
className={cn("text-slate-50", {
"text-slate-950": hovering || active,
})}
>
{String(index)}
</span>
</div>
<span
className={cn("text-lg", {
"text-destructive": !active && hasError,
})}
>
{title}
</span>
</header>
{children}
</section>
);
}
export { TaskFormSection };

2
skyvern-frontend/src/routes/tasks/create/retry/RetryTask.tsx
View File

@@ -33,6 +33,8 @@ function RetryTask() {
2, 2,
), ),
webhookCallbackUrl: task.request.webhook_callback_url, webhookCallbackUrl: task.request.webhook_callback_url,
totpIdentifier: task.request.totp_identifier,
totpVerificationUrl: task.request.totp_verification_url,
}} }}
/> />
); );