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;
proxy_location: string;
extracted_information_schema: string | object;
totp_verification_url: string | null;
totp_identifier: string | null;
};
task_id: string;
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 { cn } from "@/util/utils";
type Props = React.ComponentProps<typeof Textarea>;
type Props = React.ComponentPropsWithoutRef<typeof Textarea>;
function AutoResizingTextarea(props: Props) {
const ref = useRef<HTMLTextAreaElement>(null);
@@ -26,9 +26,9 @@ function AutoResizingTextarea(props: Props) {
return (
<Textarea
{...props}
ref={ref}
onKeyDown={setSize}
onInput={setSize}
ref={ref}
rows={1}
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 { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { getClient } from "@/api/AxiosClient";
import { AutoResizingTextarea } from "@/components/AutoResizingTextarea/AutoResizingTextarea";
import { Button } from "@/components/ui/button";
import {
Form,
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
FormMessage,
} from "@/components/ui/form";
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 { 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 { AxiosError } from "axios";
import {
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 { useCredentialGetter } from "@/hooks/useCredentialGetter";
import { CodeEditor } from "@/routes/workflows/components/CodeEditor";
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
.object({
url: z.string().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(),
dataExtractionGoal: z.string().or(z.null()).optional(),
navigationPayload: z.string().or(z.null()).optional(),
extractedInformationSchema: z.string().or(z.null()).optional(),
maxStepsOverride: z.number().optional(),
totpVerificationUrl: z.string().or(z.null()).optional(),
totpIdentifier: z.string().or(z.null()).optional(),
})
.superRefine(
(
@@ -125,6 +107,8 @@ function createTaskRequestObject(formValues: CreateNewTaskFormValues) {
proxy_location: "RESIDENTIAL",
navigation_payload: transform(formValues.navigationPayload),
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 credentialGetter = useCredentialGetter();
const apiCredential = useApiCredential();
const { data: organizations, isPending } = useQuery<
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 [sections, setSections] = useState<
Array<"base" | "extraction" | "advanced">
>(["base"]);
const form = useForm<CreateNewTaskFormValues>({
resolver: zodResolver(createNewTaskFormSchema),
defaultValues: initialValues,
values: {
...initialValues,
maxStepsOverride: organization?.max_steps_per_run ?? MAX_STEPS_DEFAULT,
maxStepsOverride: MAX_STEPS_DEFAULT,
},
});
const { errors } = useFormState({ control: form.control });
const mutation = useMutation({
mutationFn: async (formValues: CreateNewTaskFormValues) => {
const taskRequest = createTaskRequestObject(formValues);
const client = await getClient(credentialGetter);
const includeOverrideHeader =
formValues.maxStepsOverride !== organization?.max_steps_per_run &&
formValues.maxStepsOverride !== MAX_STEPS_DEFAULT;
return client.post<
ReturnType<typeof createTaskRequestObject>,
@@ -222,257 +195,347 @@ function CreateNewTaskForm({ initialValues }: Props) {
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 (
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
<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="maxStepsOverride"
render={({ field }) => {
return (
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
<TaskFormSection
index={1}
title="Base Content"
active={isActive("base")}
onClick={() => {
toggleSectionVisibility("base");
}}
hasError={
typeof errors.url !== "undefined" ||
typeof errors.navigationGoal !== "undefined"
}
>
{isActive("base") && (
<div className="space-y-6">
<div className="space-y-4">
<FormField
control={form.control}
name="url"
render={({ field }) => (
<FormItem>
<FormLabel>Max Steps</FormLabel>
<FormDescription>
Max steps for this task. This will override your
organization wide setting.
</FormDescription>
<FormControl>
{isPending ? (
<Skeleton className="h-8" />
) : (
<Input
{...field}
type="number"
min={1}
max={
organization?.max_steps_per_run ??
MAX_STEPS_DEFAULT
}
value={field.value ?? MAX_STEPS_DEFAULT}
onChange={(event) => {
field.onChange(parseInt(event.target.value));
}}
/>
)}
</FormControl>
<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>
);
}}
/>
</AccordionContent>
</AccordionItem>
</Accordion>
)}
/>
<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={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">
<Button

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

@@ -64,6 +64,9 @@ function CreateNewTaskFormPage() {
extractedInformationSchema: JSON.stringify(dataSchema, null, 2),
navigationPayload,
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),
webhookCallbackUrl: "",
totpIdentifier: null,
totpVerificationUrl: null,
}}
/>
</section>

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

@@ -1,55 +1,36 @@
import { getClient } from "@/api/AxiosClient";
import { AutoResizingTextarea } from "@/components/AutoResizingTextarea/AutoResizingTextarea";
import { Button } from "@/components/ui/button";
import {
Form,
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip";
import { Separator } from "@/components/ui/separator";
import { useToast } from "@/components/ui/use-toast";
import { useApiCredential } from "@/hooks/useApiCredential";
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 { 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 { 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 { useState } from "react";
import { useForm, useFormState } from "react-hook-form";
import { Link, useParams } from "react-router-dom";
import { stringify as convertToYAML } from "yaml";
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 { Skeleton } from "@/components/ui/skeleton";
import { copyText } from "@/util/copyText";
import { TaskFormSection } from "./TaskFormSection";
const savedTaskFormSchema = z
.object({
@@ -59,12 +40,14 @@ const savedTaskFormSchema = z
message: "Invalid URL",
}),
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(),
dataExtractionGoal: z.string().or(z.null()).optional(),
navigationPayload: z.string().or(z.null()).optional(),
extractedInformationSchema: z.string().or(z.null()).optional(),
maxSteps: z.number().optional(),
totpVerificationUrl: z.string().or(z.null()).optional(),
totpIdentifier: z.string().or(z.null()).optional(),
})
.superRefine(
(
@@ -131,6 +114,8 @@ function createTaskRequestObject(formValues: SavedTaskFormValues) {
error_code_mapping: null,
navigation_payload: transform(formValues.navigationPayload),
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_schema: extractedInformationSchema,
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 apiCredential = useApiCredential();
const { template } = useParams();
const { data: organizations, isPending: organizationIsPending } = useQuery<
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 [section, setSection] = useState<"base" | "extraction" | "advanced">(
"base",
);
const form = useForm<SavedTaskFormValues>({
resolver: zodResolver(savedTaskFormSchema),
defaultValues: initialValues,
values: {
...initialValues,
maxSteps:
initialValues.maxSteps ??
organization?.max_steps_per_run ??
MAX_STEPS_DEFAULT,
maxSteps: initialValues.maxSteps ?? MAX_STEPS_DEFAULT,
},
});
const { isDirty } = useFormState({ control: form.control });
const { isDirty, errors } = useFormState({ control: form.control });
const createAndSaveTaskMutation = useMutation({
mutationFn: async (formValues: SavedTaskFormValues) => {
@@ -226,7 +199,6 @@ function SavedTaskForm({ initialValues }: Props) {
.then(() => {
const taskRequest = createTaskRequestObject(formValues);
const includeOverrideHeader =
formValues.maxSteps !== organization?.max_steps_per_run &&
formValues.maxSteps !== MAX_STEPS_DEFAULT;
return client.post<
ReturnType<typeof createTaskRequestObject>,
@@ -338,283 +310,379 @@ function SavedTaskForm({ initialValues }: Props) {
form.handleSubmit(handleSave)(event);
}
}}
className="space-y-8"
className="space-y-4"
>
<FormField
control={form.control}
name="title"
render={({ field }) => (
<FormItem>
<FormLabel>Title *</FormLabel>
<FormControl>
<Input placeholder="Title" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="description"
render={({ field }) => (
<FormItem>
<FormLabel>Description</FormLabel>
<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 (
<TaskFormSection
index={1}
title="Base Content"
active={section === "base"}
onClick={() => setSection("base")}
hasError={
typeof errors.navigationGoal !== "undefined" ||
typeof errors.title !== "undefined" ||
typeof errors.url !== "undefined" ||
typeof errors.description !== "undefined"
}
>
{section === "base" && (
<div className="space-y-6">
<div className="space-y-4">
<FormField
control={form.control}
name="title"
render={({ field }) => (
<FormItem>
<FormLabel>Max Steps</FormLabel>
<FormDescription>
Max steps for this task. This will override your
organization wide setting.
</FormDescription>
<FormControl>
{organizationIsPending ? (
<Skeleton className="h-8" />
) : (
<Input
{...field}
type="number"
min={1}
max={
organization?.max_steps_per_run ??
MAX_STEPS_DEFAULT
}
value={field.value ?? MAX_STEPS_DEFAULT}
onChange={(event) => {
field.onChange(parseInt(event.target.value));
}}
/>
)}
</FormControl>
<div className="flex gap-16">
<FormLabel>
<div className="w-72">
<h1 className="text-lg">Title</h1>
<h2 className="text-base text-slate-400">
Name of your task
</h2>
</div>
</FormLabel>
<div className="w-full">
<FormControl>
<Input placeholder="Task Name" {...field} />
</FormControl>
<FormMessage />
</div>
</div>
</FormItem>
);
}}
/>
</AccordionContent>
</AccordionItem>
</Accordion>
)}
/>
<FormField
control={form.control}
name="description"
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">
<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,
),
webhookCallbackUrl: task.request.webhook_callback_url,
totpIdentifier: task.request.totp_identifier,
totpVerificationUrl: task.request.totp_verification_url,
}}
/>
);