Add error code mapping to task (#890)
This commit is contained in:
@@ -67,28 +67,31 @@ export type StepApiResponse = {
|
||||
};
|
||||
|
||||
export type TaskApiResponse = {
|
||||
request: {
|
||||
title: string | null;
|
||||
url: string;
|
||||
webhook_callback_url: string;
|
||||
navigation_goal: string | null;
|
||||
data_extraction_goal: string | null;
|
||||
navigation_payload: string | object; // stringified JSON
|
||||
error_code_mapping: null;
|
||||
proxy_location: string;
|
||||
extracted_information_schema: string | object;
|
||||
totp_verification_url: string | null;
|
||||
totp_identifier: string | null;
|
||||
};
|
||||
request: CreateTaskRequest;
|
||||
task_id: string;
|
||||
status: Status;
|
||||
created_at: string; // ISO 8601
|
||||
modified_at: string; // ISO 8601
|
||||
extracted_information: unknown;
|
||||
extracted_information: Record<string, unknown> | string | null;
|
||||
screenshot_url: string | null;
|
||||
recording_url: string | null;
|
||||
failure_reason: string | null;
|
||||
errors: unknown[];
|
||||
errors: Array<Record<string, unknown>>;
|
||||
max_steps_per_run: number | null;
|
||||
};
|
||||
|
||||
export type CreateTaskRequest = {
|
||||
title: string | null;
|
||||
url: string;
|
||||
webhook_callback_url: string | null;
|
||||
navigation_goal: string | null;
|
||||
data_extraction_goal: string | null;
|
||||
navigation_payload: Record<string, unknown> | string | null;
|
||||
extracted_information_schema: Record<string, unknown> | string | null;
|
||||
error_code_mapping: Record<string, string> | null;
|
||||
proxy_location: string | null;
|
||||
totp_verification_url: string | null;
|
||||
totp_identifier: string | null;
|
||||
};
|
||||
|
||||
export type User = {
|
||||
|
||||
@@ -1,24 +1,23 @@
|
||||
import { Navigate, Outlet, createBrowserRouter } from "react-router-dom";
|
||||
import { RootLayout } from "./routes/root/RootLayout";
|
||||
import { TasksPageLayout } from "./routes/tasks/TasksPageLayout";
|
||||
import { TaskTemplates } from "./routes/tasks/create/TaskTemplates";
|
||||
import { TaskList } from "./routes/tasks/list/TaskList";
|
||||
import { Settings } from "./routes/settings/Settings";
|
||||
import { SettingsPageLayout } from "./routes/settings/SettingsPageLayout";
|
||||
import { TaskDetails } from "./routes/tasks/detail/TaskDetails";
|
||||
import { CreateNewTaskLayout } from "./routes/tasks/create/CreateNewTaskLayout";
|
||||
import { TasksPageLayout } from "./routes/tasks/TasksPageLayout";
|
||||
import { CreateNewTaskFormPage } from "./routes/tasks/create/CreateNewTaskFormPage";
|
||||
import { TaskActions } from "./routes/tasks/detail/TaskActions";
|
||||
import { TaskRecording } from "./routes/tasks/detail/TaskRecording";
|
||||
import { TaskParameters } from "./routes/tasks/detail/TaskParameters";
|
||||
import { StepArtifactsLayout } from "./routes/tasks/detail/StepArtifactsLayout";
|
||||
import { CreateNewTaskFromPrompt } from "./routes/tasks/create/CreateNewTaskFromPrompt";
|
||||
import { WorkflowsPageLayout } from "./routes/workflows/WorkflowsPageLayout";
|
||||
import { Workflows } from "./routes/workflows/Workflows";
|
||||
import { WorkflowPage } from "./routes/workflows/WorkflowPage";
|
||||
import { WorkflowRunParameters } from "./routes/workflows/WorkflowRunParameters";
|
||||
import { CreateNewTaskLayout } from "./routes/tasks/create/CreateNewTaskLayout";
|
||||
import { TaskTemplates } from "./routes/tasks/create/TaskTemplates";
|
||||
import { RetryTask } from "./routes/tasks/create/retry/RetryTask";
|
||||
import { StepArtifactsLayout } from "./routes/tasks/detail/StepArtifactsLayout";
|
||||
import { TaskActions } from "./routes/tasks/detail/TaskActions";
|
||||
import { TaskDetails } from "./routes/tasks/detail/TaskDetails";
|
||||
import { TaskParameters } from "./routes/tasks/detail/TaskParameters";
|
||||
import { TaskRecording } from "./routes/tasks/detail/TaskRecording";
|
||||
import { TaskList } from "./routes/tasks/list/TaskList";
|
||||
import { WorkflowPage } from "./routes/workflows/WorkflowPage";
|
||||
import { WorkflowRun } from "./routes/workflows/WorkflowRun";
|
||||
import { WorkflowRunParameters } from "./routes/workflows/WorkflowRunParameters";
|
||||
import { Workflows } from "./routes/workflows/Workflows";
|
||||
import { WorkflowsPageLayout } from "./routes/workflows/WorkflowsPageLayout";
|
||||
import { WorkflowEditor } from "./routes/workflows/editor/WorkflowEditor";
|
||||
|
||||
const router = createBrowserRouter([
|
||||
@@ -74,10 +73,6 @@ const router = createBrowserRouter([
|
||||
index: true,
|
||||
element: <TaskTemplates />,
|
||||
},
|
||||
{
|
||||
path: "sk-prompt",
|
||||
element: <CreateNewTaskFromPrompt />,
|
||||
},
|
||||
{
|
||||
path: ":template",
|
||||
element: <CreateNewTaskFormPage />,
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { getClient } from "@/api/AxiosClient";
|
||||
import { CreateTaskRequest } from "@/api/types";
|
||||
import { AutoResizingTextarea } from "@/components/AutoResizingTextarea/AutoResizingTextarea";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
@@ -10,6 +11,7 @@ import {
|
||||
FormMessage,
|
||||
} from "@/components/ui/form";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { useToast } from "@/components/ui/use-toast";
|
||||
import { useApiCredential } from "@/hooks/useApiCredential";
|
||||
import { useCredentialGetter } from "@/hooks/useCredentialGetter";
|
||||
@@ -25,69 +27,24 @@ 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(),
|
||||
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(
|
||||
(
|
||||
{ navigationGoal, dataExtractionGoal, extractedInformationSchema },
|
||||
ctx,
|
||||
) => {
|
||||
if (!navigationGoal && !dataExtractionGoal) {
|
||||
ctx.addIssue({
|
||||
code: z.ZodIssueCode.custom,
|
||||
message:
|
||||
"At least one of navigation goal or data extraction goal must be provided",
|
||||
path: ["navigationGoal"],
|
||||
});
|
||||
ctx.addIssue({
|
||||
code: z.ZodIssueCode.custom,
|
||||
message:
|
||||
"At least one of navigation goal or data extraction goal must be provided",
|
||||
path: ["dataExtractionGoal"],
|
||||
});
|
||||
return z.NEVER;
|
||||
}
|
||||
if (extractedInformationSchema) {
|
||||
try {
|
||||
JSON.parse(extractedInformationSchema);
|
||||
} catch (e) {
|
||||
ctx.addIssue({
|
||||
code: z.ZodIssueCode.custom,
|
||||
message: "Invalid JSON",
|
||||
path: ["extractedInformationSchema"],
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
export type CreateNewTaskFormValues = z.infer<typeof createNewTaskFormSchema>;
|
||||
import {
|
||||
createNewTaskFormSchema,
|
||||
CreateNewTaskFormValues,
|
||||
} from "./taskFormTypes";
|
||||
|
||||
type Props = {
|
||||
initialValues: CreateNewTaskFormValues;
|
||||
};
|
||||
|
||||
function transform(value: unknown) {
|
||||
function transform<T>(value: T): T | null {
|
||||
return value === "" ? null : value;
|
||||
}
|
||||
|
||||
function createTaskRequestObject(formValues: CreateNewTaskFormValues) {
|
||||
function createTaskRequestObject(
|
||||
formValues: CreateNewTaskFormValues,
|
||||
): CreateTaskRequest {
|
||||
let extractedInformationSchema = null;
|
||||
if (formValues.extractedInformationSchema) {
|
||||
try {
|
||||
@@ -98,8 +55,17 @@ function createTaskRequestObject(formValues: CreateNewTaskFormValues) {
|
||||
extractedInformationSchema = formValues.extractedInformationSchema;
|
||||
}
|
||||
}
|
||||
let errorCodeMapping = null;
|
||||
if (formValues.errorCodeMapping) {
|
||||
try {
|
||||
errorCodeMapping = JSON.parse(formValues.errorCodeMapping);
|
||||
} catch (e) {
|
||||
errorCodeMapping = formValues.errorCodeMapping;
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
title: null,
|
||||
url: formValues.url,
|
||||
webhook_callback_url: transform(formValues.webhookCallbackUrl),
|
||||
navigation_goal: transform(formValues.navigationGoal),
|
||||
@@ -109,6 +75,7 @@ function createTaskRequestObject(formValues: CreateNewTaskFormValues) {
|
||||
extracted_information_schema: extractedInformationSchema,
|
||||
totp_verification_url: transform(formValues.totpVerificationUrl),
|
||||
totp_identifier: transform(formValues.totpIdentifier),
|
||||
error_code_mapping: errorCodeMapping,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -334,12 +301,7 @@ function CreateNewTaskForm({ initialValues }: Props) {
|
||||
language="json"
|
||||
fontSize={12}
|
||||
minHeight="96px"
|
||||
value={
|
||||
field.value === null ||
|
||||
typeof field.value === "undefined"
|
||||
? ""
|
||||
: field.value
|
||||
}
|
||||
value={field.value === null ? "" : field.value}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
@@ -362,7 +324,8 @@ function CreateNewTaskForm({ initialValues }: Props) {
|
||||
hasError={
|
||||
typeof errors.navigationPayload !== "undefined" ||
|
||||
typeof errors.maxStepsOverride !== "undefined" ||
|
||||
typeof errors.webhookCallbackUrl !== "undefined"
|
||||
typeof errors.webhookCallbackUrl !== "undefined" ||
|
||||
typeof errors.errorCodeMapping !== "undefined"
|
||||
}
|
||||
>
|
||||
{section === "advanced" && (
|
||||
@@ -389,12 +352,7 @@ function CreateNewTaskForm({ initialValues }: Props) {
|
||||
language="json"
|
||||
fontSize={12}
|
||||
minHeight="96px"
|
||||
value={
|
||||
field.value === null ||
|
||||
typeof field.value === "undefined"
|
||||
? ""
|
||||
: field.value
|
||||
}
|
||||
value={field.value === null ? "" : field.value}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
@@ -465,6 +423,39 @@ function CreateNewTaskForm({ initialValues }: Props) {
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<Separator />
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="errorCodeMapping"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<div className="flex gap-16">
|
||||
<FormLabel>
|
||||
<div className="w-72">
|
||||
<h1 className="text-lg">Error Messages</h1>
|
||||
<h2 className="text-base text-slate-400">
|
||||
Specify any error outputs you would like to be
|
||||
notified about
|
||||
</h2>
|
||||
</div>
|
||||
</FormLabel>
|
||||
<div className="w-full">
|
||||
<FormControl>
|
||||
<CodeEditor
|
||||
{...field}
|
||||
language="json"
|
||||
fontSize={12}
|
||||
minHeight="96px"
|
||||
value={field.value === null ? "" : field.value}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</div>
|
||||
</div>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<Separator />
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="totpVerificationUrl"
|
||||
|
||||
@@ -47,8 +47,10 @@ function CreateNewTaskFormPage() {
|
||||
).default_value;
|
||||
|
||||
const dataSchema = data.workflow_definition.blocks[0].data_schema;
|
||||
const errorCodeMapping =
|
||||
data.workflow_definition.blocks[0].error_code_mapping;
|
||||
|
||||
const maxSteps = data.workflow_definition.blocks[0].max_steps_per_run;
|
||||
const maxStepsOverride = data.workflow_definition.blocks[0].max_steps_per_run;
|
||||
|
||||
return (
|
||||
<SavedTaskForm
|
||||
@@ -63,10 +65,11 @@ function CreateNewTaskFormPage() {
|
||||
data.workflow_definition.blocks[0].data_extraction_goal,
|
||||
extractedInformationSchema: JSON.stringify(dataSchema, null, 2),
|
||||
navigationPayload,
|
||||
maxSteps,
|
||||
maxStepsOverride,
|
||||
totpIdentifier: data.workflow_definition.blocks[0].totp_identifier,
|
||||
totpVerificationUrl:
|
||||
data.workflow_definition.blocks[0].totp_verification_url,
|
||||
errorCodeMapping: JSON.stringify(errorCodeMapping, null, 2),
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
||||
@@ -1,44 +0,0 @@
|
||||
import { useLocation } from "react-router-dom";
|
||||
import { CreateNewTaskForm } from "./CreateNewTaskForm";
|
||||
import { MagicWandIcon } from "@radix-ui/react-icons";
|
||||
|
||||
function CreateNewTaskFromPrompt() {
|
||||
const location = useLocation();
|
||||
|
||||
const state = location.state.data;
|
||||
return (
|
||||
<section className="space-y-8">
|
||||
<header className="flex flex-col gap-4">
|
||||
<div className="flex items-center gap-4">
|
||||
<MagicWandIcon className="h-6 w-6" />
|
||||
<h1 className="text-3xl font-bold">Create New Task</h1>
|
||||
</div>
|
||||
<p>
|
||||
Prompt: <span>{state.user_prompt}</span>
|
||||
</p>
|
||||
<p>
|
||||
Below are the parameters we generated automatically. You can go ahead
|
||||
and create the task if everything looks correct.
|
||||
</p>
|
||||
</header>
|
||||
<CreateNewTaskForm
|
||||
initialValues={{
|
||||
url: state.url,
|
||||
navigationGoal: state.navigation_goal,
|
||||
dataExtractionGoal: state.data_extraction_goal,
|
||||
extractedInformationSchema: JSON.stringify(
|
||||
state.extracted_information_schema,
|
||||
null,
|
||||
2,
|
||||
),
|
||||
navigationPayload: JSON.stringify(state.navigation_payload, null, 2),
|
||||
webhookCallbackUrl: "",
|
||||
totpIdentifier: null,
|
||||
totpVerificationUrl: null,
|
||||
}}
|
||||
/>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export { CreateNewTaskFromPrompt };
|
||||
@@ -28,62 +28,9 @@ 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 { MAX_STEPS_DEFAULT } from "../constants";
|
||||
import { TaskFormSection } from "./TaskFormSection";
|
||||
|
||||
const savedTaskFormSchema = z
|
||||
.object({
|
||||
title: z.string().min(1, "Title is required"),
|
||||
description: z.string(),
|
||||
url: z.string().url({
|
||||
message: "Invalid URL",
|
||||
}),
|
||||
proxyLocation: z.string().or(z.null()).optional(),
|
||||
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(
|
||||
(
|
||||
{ navigationGoal, dataExtractionGoal, extractedInformationSchema },
|
||||
ctx,
|
||||
) => {
|
||||
if (!navigationGoal && !dataExtractionGoal) {
|
||||
ctx.addIssue({
|
||||
code: z.ZodIssueCode.custom,
|
||||
message:
|
||||
"At least one of navigation goal or data extraction goal must be provided",
|
||||
path: ["navigationGoal"],
|
||||
});
|
||||
ctx.addIssue({
|
||||
code: z.ZodIssueCode.custom,
|
||||
message:
|
||||
"At least one of navigation goal or data extraction goal must be provided",
|
||||
path: ["dataExtractionGoal"],
|
||||
});
|
||||
return z.NEVER;
|
||||
}
|
||||
if (extractedInformationSchema) {
|
||||
try {
|
||||
JSON.parse(extractedInformationSchema);
|
||||
} catch (e) {
|
||||
ctx.addIssue({
|
||||
code: z.ZodIssueCode.custom,
|
||||
message: "Invalid JSON",
|
||||
path: ["extractedInformationSchema"],
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
export type SavedTaskFormValues = z.infer<typeof savedTaskFormSchema>;
|
||||
import { savedTaskFormSchema, SavedTaskFormValues } from "./taskFormTypes";
|
||||
|
||||
type Props = {
|
||||
initialValues: SavedTaskFormValues;
|
||||
@@ -105,17 +52,26 @@ function createTaskRequestObject(formValues: SavedTaskFormValues) {
|
||||
}
|
||||
}
|
||||
|
||||
let errorCodeMapping = null;
|
||||
if (formValues.errorCodeMapping) {
|
||||
try {
|
||||
errorCodeMapping = JSON.parse(formValues.errorCodeMapping);
|
||||
} catch (e) {
|
||||
errorCodeMapping = formValues.errorCodeMapping;
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
url: formValues.url,
|
||||
webhook_callback_url: transform(formValues.webhookCallbackUrl),
|
||||
navigation_goal: transform(formValues.navigationGoal),
|
||||
data_extraction_goal: transform(formValues.dataExtractionGoal),
|
||||
proxy_location: transform(formValues.proxyLocation),
|
||||
error_code_mapping: null,
|
||||
navigation_payload: transform(formValues.navigationPayload),
|
||||
extracted_information_schema: extractedInformationSchema,
|
||||
totp_verification_url: transform(formValues.totpVerificationUrl),
|
||||
totp_identifier: transform(formValues.totpIdentifier),
|
||||
error_code_mapping: errorCodeMapping,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -131,6 +87,15 @@ function createTaskTemplateRequestObject(values: SavedTaskFormValues) {
|
||||
}
|
||||
}
|
||||
|
||||
let errorCodeMapping = null;
|
||||
if (values.errorCodeMapping) {
|
||||
try {
|
||||
errorCodeMapping = JSON.parse(values.errorCodeMapping);
|
||||
} catch (e) {
|
||||
errorCodeMapping = values.errorCodeMapping;
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
title: values.title,
|
||||
description: values.description,
|
||||
@@ -154,9 +119,10 @@ function createTaskTemplateRequestObject(values: SavedTaskFormValues) {
|
||||
navigation_goal: values.navigationGoal,
|
||||
data_extraction_goal: values.dataExtractionGoal,
|
||||
data_schema: extractedInformationSchema,
|
||||
max_steps_per_run: values.maxSteps,
|
||||
max_steps_per_run: values.maxStepsOverride,
|
||||
totp_verification_url: values.totpVerificationUrl,
|
||||
totp_identifier: values.totpIdentifier,
|
||||
error_code_mapping: errorCodeMapping,
|
||||
},
|
||||
],
|
||||
},
|
||||
@@ -178,7 +144,7 @@ function SavedTaskForm({ initialValues }: Props) {
|
||||
defaultValues: initialValues,
|
||||
values: {
|
||||
...initialValues,
|
||||
maxSteps: initialValues.maxSteps ?? MAX_STEPS_DEFAULT,
|
||||
maxStepsOverride: initialValues.maxStepsOverride ?? MAX_STEPS_DEFAULT,
|
||||
},
|
||||
});
|
||||
|
||||
@@ -199,7 +165,7 @@ function SavedTaskForm({ initialValues }: Props) {
|
||||
.then(() => {
|
||||
const taskRequest = createTaskRequestObject(formValues);
|
||||
const includeOverrideHeader =
|
||||
formValues.maxSteps !== MAX_STEPS_DEFAULT;
|
||||
formValues.maxStepsOverride !== MAX_STEPS_DEFAULT;
|
||||
return client.post<
|
||||
ReturnType<typeof createTaskRequestObject>,
|
||||
{ data: { task_id: string } }
|
||||
@@ -207,7 +173,7 @@ function SavedTaskForm({ initialValues }: Props) {
|
||||
...(includeOverrideHeader && {
|
||||
headers: {
|
||||
"x-max-steps-override":
|
||||
formValues.maxSteps ?? MAX_STEPS_DEFAULT,
|
||||
formValues.maxStepsOverride ?? MAX_STEPS_DEFAULT,
|
||||
},
|
||||
}),
|
||||
});
|
||||
@@ -523,8 +489,9 @@ function SavedTaskForm({ initialValues }: Props) {
|
||||
onClick={() => setSection("advanced")}
|
||||
hasError={
|
||||
typeof errors.navigationPayload !== "undefined" ||
|
||||
typeof errors.maxSteps !== "undefined" ||
|
||||
typeof errors.webhookCallbackUrl !== "undefined"
|
||||
typeof errors.maxStepsOverride !== "undefined" ||
|
||||
typeof errors.webhookCallbackUrl !== "undefined" ||
|
||||
typeof errors.errorCodeMapping !== "undefined"
|
||||
}
|
||||
>
|
||||
{section === "advanced" && (
|
||||
@@ -567,7 +534,7 @@ function SavedTaskForm({ initialValues }: Props) {
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="maxSteps"
|
||||
name="maxStepsOverride"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<div className="flex gap-16">
|
||||
@@ -627,6 +594,39 @@ function SavedTaskForm({ initialValues }: Props) {
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<Separator />
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="errorCodeMapping"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<div className="flex gap-16">
|
||||
<FormLabel>
|
||||
<div className="w-72">
|
||||
<h1 className="text-lg">Error Messages</h1>
|
||||
<h2 className="text-base text-slate-400">
|
||||
Specify any error outputs you would like to be
|
||||
notified about
|
||||
</h2>
|
||||
</div>
|
||||
</FormLabel>
|
||||
<div className="w-full">
|
||||
<FormControl>
|
||||
<CodeEditor
|
||||
{...field}
|
||||
language="json"
|
||||
fontSize={12}
|
||||
minHeight="96px"
|
||||
value={field.value === null ? "" : field.value}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</div>
|
||||
</div>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<Separator />
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="totpVerificationUrl"
|
||||
|
||||
@@ -35,6 +35,9 @@ function RetryTask() {
|
||||
webhookCallbackUrl: task.request.webhook_callback_url,
|
||||
totpIdentifier: task.request.totp_identifier,
|
||||
totpVerificationUrl: task.request.totp_verification_url,
|
||||
errorCodeMapping: task.request.error_code_mapping
|
||||
? JSON.stringify(task.request.error_code_mapping, null, 2)
|
||||
: "",
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
||||
81
skyvern-frontend/src/routes/tasks/create/taskFormTypes.ts
Normal file
81
skyvern-frontend/src/routes/tasks/create/taskFormTypes.ts
Normal file
@@ -0,0 +1,81 @@
|
||||
import { z } from "zod";
|
||||
|
||||
const createNewTaskFormSchemaBase = z.object({
|
||||
url: z.string().url({
|
||||
message: "Invalid URL",
|
||||
}),
|
||||
webhookCallbackUrl: z.string().or(z.null()),
|
||||
navigationGoal: z.string().or(z.null()),
|
||||
dataExtractionGoal: z.string().or(z.null()),
|
||||
navigationPayload: z.string().or(z.null()),
|
||||
extractedInformationSchema: z.string().or(z.null()),
|
||||
maxStepsOverride: z.number().optional(),
|
||||
totpVerificationUrl: z.string().or(z.null()),
|
||||
totpIdentifier: z.string().or(z.null()),
|
||||
errorCodeMapping: z.string().or(z.null()),
|
||||
});
|
||||
|
||||
const savedTaskFormSchemaBase = createNewTaskFormSchemaBase.extend({
|
||||
title: z.string().min(1, "Title is required"),
|
||||
description: z.string(),
|
||||
proxyLocation: z.string().or(z.null()),
|
||||
});
|
||||
|
||||
function refineTaskFormValues(
|
||||
values: CreateNewTaskFormValues | SavedTaskFormValues,
|
||||
ctx: z.RefinementCtx,
|
||||
) {
|
||||
const {
|
||||
navigationGoal,
|
||||
dataExtractionGoal,
|
||||
extractedInformationSchema,
|
||||
errorCodeMapping,
|
||||
} = values;
|
||||
if (!navigationGoal && !dataExtractionGoal) {
|
||||
ctx.addIssue({
|
||||
code: z.ZodIssueCode.custom,
|
||||
message:
|
||||
"At least one of navigation goal or data extraction goal must be provided",
|
||||
path: ["navigationGoal"],
|
||||
});
|
||||
ctx.addIssue({
|
||||
code: z.ZodIssueCode.custom,
|
||||
message:
|
||||
"At least one of navigation goal or data extraction goal must be provided",
|
||||
path: ["dataExtractionGoal"],
|
||||
});
|
||||
}
|
||||
if (extractedInformationSchema) {
|
||||
try {
|
||||
JSON.parse(extractedInformationSchema);
|
||||
} catch (e) {
|
||||
ctx.addIssue({
|
||||
code: z.ZodIssueCode.custom,
|
||||
message: "Invalid JSON",
|
||||
path: ["extractedInformationSchema"],
|
||||
});
|
||||
}
|
||||
}
|
||||
if (errorCodeMapping) {
|
||||
try {
|
||||
JSON.parse(errorCodeMapping);
|
||||
} catch (e) {
|
||||
ctx.addIssue({
|
||||
code: z.ZodIssueCode.custom,
|
||||
message: "Invalid JSON",
|
||||
path: ["errorCodeMapping"],
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const createNewTaskFormSchema =
|
||||
createNewTaskFormSchemaBase.superRefine(refineTaskFormValues);
|
||||
|
||||
export const savedTaskFormSchema =
|
||||
savedTaskFormSchemaBase.superRefine(refineTaskFormValues);
|
||||
|
||||
export type CreateNewTaskFormValues = z.infer<
|
||||
typeof createNewTaskFormSchemaBase
|
||||
>;
|
||||
export type SavedTaskFormValues = z.infer<typeof savedTaskFormSchemaBase>;
|
||||
@@ -1,11 +1,16 @@
|
||||
import { CreateNewTaskFormValues } from "../create/taskFormTypes";
|
||||
import { SampleCase } from "../types";
|
||||
|
||||
export const blank = {
|
||||
url: "https://www.example.com",
|
||||
navigationGoal: null,
|
||||
dataExtractionGoal: null,
|
||||
navigationGoal: "",
|
||||
dataExtractionGoal: "",
|
||||
navigationPayload: null,
|
||||
extractedInformationSchema: null,
|
||||
webhookCallbackUrl: null,
|
||||
totpIdentifier: null,
|
||||
totpVerificationUrl: null,
|
||||
errorCodeMapping: null,
|
||||
};
|
||||
|
||||
export const bci_seguros = {
|
||||
@@ -30,6 +35,10 @@ export const bci_seguros = {
|
||||
"km approx a recorrer": "28,000",
|
||||
},
|
||||
extractedInformationSchema: null,
|
||||
webhookCallbackUrl: null,
|
||||
totpIdentifier: null,
|
||||
totpVerificationUrl: null,
|
||||
errorCodeMapping: null,
|
||||
};
|
||||
|
||||
export const california_edd = {
|
||||
@@ -47,6 +56,10 @@ export const california_edd = {
|
||||
phone_number: "412-444-1234",
|
||||
},
|
||||
extractedInformationSchema: null,
|
||||
webhookCallbackUrl: null,
|
||||
totpIdentifier: null,
|
||||
totpVerificationUrl: null,
|
||||
errorCodeMapping: null,
|
||||
};
|
||||
|
||||
export const finditparts = {
|
||||
@@ -59,6 +72,10 @@ export const finditparts = {
|
||||
product_id: "W01-377-8537",
|
||||
},
|
||||
extractedInformationSchema: null,
|
||||
webhookCallbackUrl: null,
|
||||
totpIdentifier: null,
|
||||
totpVerificationUrl: null,
|
||||
errorCodeMapping: null,
|
||||
};
|
||||
|
||||
export const job_application = {
|
||||
@@ -73,6 +90,10 @@ export const job_application = {
|
||||
"https://writing.colostate.edu/guides/documents/resume/functionalSample.pdf",
|
||||
cover_letter: "Generate a compelling cover letter for me",
|
||||
},
|
||||
webhookCallbackUrl: null,
|
||||
totpIdentifier: null,
|
||||
totpVerificationUrl: null,
|
||||
errorCodeMapping: null,
|
||||
};
|
||||
|
||||
export const geico = {
|
||||
@@ -263,6 +284,10 @@ export const geico = {
|
||||
},
|
||||
type: "object",
|
||||
},
|
||||
webhookCallbackUrl: null,
|
||||
totpIdentifier: null,
|
||||
totpVerificationUrl: null,
|
||||
errorCodeMapping: null,
|
||||
};
|
||||
|
||||
export function getSample(sample: SampleCase) {
|
||||
@@ -329,15 +354,14 @@ function generatePhoneNumber() {
|
||||
}
|
||||
|
||||
function transformKV([key, value]: [string, unknown]) {
|
||||
if (value === null) {
|
||||
return [key, ""];
|
||||
}
|
||||
if (typeof value === "object") {
|
||||
if (value !== null && typeof value === "object") {
|
||||
return [key, JSON.stringify(value, null, 2)];
|
||||
}
|
||||
return [key, value];
|
||||
}
|
||||
|
||||
export function getSampleForInitialFormValues(sample: SampleCase) {
|
||||
export function getSampleForInitialFormValues(
|
||||
sample: SampleCase,
|
||||
): CreateNewTaskFormValues {
|
||||
return Object.fromEntries(Object.entries(getSample(sample)).map(transformKV));
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user