Add error code mapping to task (#890)

This commit is contained in:
Kerem Yilmaz
2024-09-30 09:08:27 -07:00
committed by GitHub
parent e6ccea1c86
commit 59c28f9a02
9 changed files with 270 additions and 214 deletions

View File

@@ -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 = {

View File

@@ -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 />,

View File

@@ -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"

View File

@@ -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),
}}
/>
);

View File

@@ -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 };

View File

@@ -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"

View File

@@ -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)
: "",
}}
/>
);

View 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>;

View File

@@ -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));
}