Skip to content

Commit

Permalink
Add navigation block (#1256)
Browse files Browse the repository at this point in the history 
Co-authored-by: Muhammed Salih Altun <muhammedsalihaltun@gmail.com>
  • Loading branch information
@wintonzheng @msalihaltun
wintonzheng and msalihaltun authored Nov 25, 2024
1 parent 4103b75 commit d520254
Show file tree
Hide file tree
Showing 11 changed files with 650 additions and 57 deletions.
23 changes: 23 additions & 0 deletions skyvern-frontend/src/components/icons/RobotIcon.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
type Props = {
className?: string;
};

function RobotIcon({ className }: Props) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
className={className}
>
<path
d="M13.5 3.50003C13.5 3.94403 13.307 4.34303 13 4.61803V6.50003H18C18.7956 6.50003 19.5587 6.8161 20.1213 7.37871C20.6839 7.94132 21 8.70438 21 9.50003V19.5C21 20.2957 20.6839 21.0587 20.1213 21.6214C19.5587 22.184 18.7956 22.5 18 22.5H6C5.20435 22.5 4.44129 22.184 3.87868 21.6214C3.31607 21.0587 3 20.2957 3 19.5V9.50003C3 8.70438 3.31607 7.94132 3.87868 7.37871C4.44129 6.8161 5.20435 6.50003 6 6.50003H11V4.61803C10.8135 4.45123 10.6717 4.24042 10.5875 4.0048C10.5033 3.76918 10.4794 3.51625 10.5179 3.26902C10.5564 3.02179 10.6562 2.78813 10.8081 2.58931C10.96 2.39049 11.1592 2.23283 11.3876 2.13069C11.6161 2.02854 11.8664 1.98516 12.1159 2.00448C12.3653 2.02381 12.606 2.10523 12.8159 2.24133C13.0259 2.37744 13.1985 2.5639 13.3179 2.78374C13.4374 3.00359 13.5 3.24982 13.5 3.50003ZM6 8.50003C5.73478 8.50003 5.48043 8.60539 5.29289 8.79293C5.10536 8.98046 5 9.23482 5 9.50003V19.5C5 19.7653 5.10536 20.0196 5.29289 20.2071C5.48043 20.3947 5.73478 20.5 6 20.5H18C18.2652 20.5 18.5196 20.3947 18.7071 20.2071C18.8946 20.0196 19 19.7653 19 19.5V9.50003C19 9.23482 18.8946 8.98046 18.7071 8.79293C18.5196 8.60539 18.2652 8.50003 18 8.50003H6ZM2 12.2C2 11.8134 1.6866 11.5 1.3 11.5H0.7C0.313401 11.5 0 11.8134 0 12.2V16.8C0 17.1866 0.313401 17.5 0.7 17.5H1.3C1.6866 17.5 2 17.1866 2 16.8V12.2ZM22 12.2C22 11.8134 22.3134 11.5 22.7 11.5H23.3C23.6866 11.5 24 11.8134 24 12.2V16.8C24 17.1866 23.6866 17.5 23.3 17.5H22.7C22.3134 17.5 22 17.1866 22 16.8V12.2ZM9 16C9.39782 16 9.77936 15.842 10.0607 15.5607C10.342 15.2794 10.5 14.8979 10.5 14.5C10.5 14.1022 10.342 13.7207 10.0607 13.4394C9.77936 13.1581 9.39782 13 9 13C8.60218 13 8.22064 13.1581 7.93934 13.4394C7.65804 13.7207 7.5 14.1022 7.5 14.5C7.5 14.8979 7.65804 15.2794 7.93934 15.5607C8.22064 15.842 8.60218 16 9 16ZM15 16C15.3978 16 15.7794 15.842 16.0607 15.5607C16.342 15.2794 16.5 14.8979 16.5 14.5C16.5 14.1022 16.342 13.7207 16.0607 13.4394C15.7794 13.1581 15.3978 13 15 13C14.6022 13 14.2206 13.1581 13.9393 13.4394C13.658 13.7207 13.5 14.1022 13.5 14.5C13.5 14.8979 13.658 15.2794 13.9393 15.5607C14.2206 15.842 14.6022 16 15 16Z"
fill="#F8FAFC"
/>
</svg>
);
}

export { RobotIcon };
30 changes: 30 additions & 0 deletions skyvern-frontend/src/routes/workflows/editor/constants.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,3 +14,33 @@ export const SMTP_USERNAME_AWS_KEY = "SKYVERN_SMTP_USERNAME_SES";
export const SMTP_PASSWORD_AWS_KEY = "SKYVERN_SMTP_PASSWORD_SES";

export const EMAIL_BLOCK_SENDER = "hello@skyvern.com";

export const commonHelpTooltipContent = {
maxRetries:
"Specify how many times you would like a task to retry upon failure.",
maxStepsOverride:
"Specify the maximum number of steps a task can take in total.",
completeOnDownload:
"Allow Skyvern to auto-complete the task when it downloads a file.",
fileSuffix:
"A file suffix that's automatically added to all downloaded files.",
errorCodeMapping:
"Knowing about why a task terminated can be important, specify error messages here.",
totpVerificationUrl:
"If you have an internal system for storing TOTP codes, link the endpoint here.",
totpIdentifier:
"If you are running multiple tasks or workflows at once, you will need to give the task an identifier to know that this TOTP goes with this task.",
continueOnFailure:
"Allow the workflow to continue if it encounters a failure.",
cacheActions: "Cache the actions of this task.",
} as const;

export const commonFieldPlaceholders = {
url: "https://",
navigationGoal: 'Input text into "Name" field.',
maxRetries: "Default: 3",
maxStepsOverride: "Default: 10",
downloadSuffix: "Add an ID for downloaded files",
totpVerificationUrl: "Provide your 2FA endpoint",
totpIdentifier: "Add an ID that links your TOTP to the task",
} as const;
45 changes: 30 additions & 15 deletions skyvern-frontend/src/routes/workflows/editor/nodes/ActionNode/ActionNode.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,23 @@ import { Handle, NodeProps, Position, useReactFlow } from "@xyflow/react";
import { useState } from "react";
import { EditableNodeTitle } from "../components/EditableNodeTitle";
import { NodeActionMenu } from "../NodeActionMenu";
import { helpTooltipContent, type ActionNode } from "./types";
import type { ActionNode } from "./types";
import { HelpTooltip } from "@/components/HelpTooltip";
import { Input } from "@/components/ui/input";
import { fieldPlaceholders } from "./types";
import { Checkbox } from "@/components/ui/checkbox";
import { errorMappingExampleValue } from "../types";
import { CodeEditor } from "@/routes/workflows/components/CodeEditor";
import { Switch } from "@/components/ui/switch";
import { ClickIcon } from "@/components/icons/ClickIcon";
import {
commonFieldPlaceholders,
commonHelpTooltipContent,
} from "../../constants";

const navigationGoalTooltip =
"Specify a single step or action you'd like Skyvern to complete. Actions are one-off tasks like filling a field or interacting with a specific element on the page.\n\nCurrently supported actions are click, input text, upload file, and select.";

const navigationGoalPlaceholder = 'Input text into "Name" field.';

function ActionNode({ id, data }: NodeProps<ActionNode>) {
const { updateNodeData } = useReactFlow();
Expand Down Expand Up @@ -91,7 +99,7 @@ function ActionNode({ id, data }: NodeProps<ActionNode>) {
<div className="space-y-2">
<div className="flex gap-2">
<Label className="text-xs text-slate-300">Action Instruction</Label>
<HelpTooltip content={helpTooltipContent["navigationGoal"]} />
<HelpTooltip content={navigationGoalTooltip} />
</div>
<AutoResizingTextarea
onChange={(event) => {
Expand All @@ -101,6 +109,7 @@ function ActionNode({ id, data }: NodeProps<ActionNode>) {
handleChange("navigationGoal", event.target.value);
}}
value={inputs.navigationGoal}
placeholder={navigationGoalPlaceholder}
className="nopan text-xs"
/>
</div>
Expand All @@ -117,11 +126,13 @@ function ActionNode({ id, data }: NodeProps<ActionNode>) {
<Label className="text-xs font-normal text-slate-300">
Max Retries
</Label>
<HelpTooltip content={helpTooltipContent["maxRetries"]} />
<HelpTooltip
content={commonHelpTooltipContent["maxRetries"]}
/>
</div>
<Input
type="number"
placeholder={fieldPlaceholders["maxRetries"]}
placeholder={commonFieldPlaceholders["maxRetries"]}
className="nopan w-52 text-xs"
min="0"
value={inputs.maxRetries ?? ""}
Expand All @@ -144,7 +155,7 @@ function ActionNode({ id, data }: NodeProps<ActionNode>) {
Error Messages
</Label>
<HelpTooltip
content={helpTooltipContent["errorCodeMapping"]}
content={commonHelpTooltipContent["errorCodeMapping"]}
/>
</div>
<Checkbox
Expand Down Expand Up @@ -187,7 +198,7 @@ function ActionNode({ id, data }: NodeProps<ActionNode>) {
Continue on Failure
</Label>
<HelpTooltip
content={helpTooltipContent["continueOnFailure"]}
content={commonHelpTooltipContent["continueOnFailure"]}
/>
</div>
<div className="w-52">
Expand All @@ -207,7 +218,9 @@ function ActionNode({ id, data }: NodeProps<ActionNode>) {
<Label className="text-xs font-normal text-slate-300">
Cache Actions
</Label>
<HelpTooltip content={helpTooltipContent["cacheActions"]} />
<HelpTooltip
content={commonHelpTooltipContent["cacheActions"]}
/>
</div>
<div className="w-52">
<Switch
Expand All @@ -228,7 +241,7 @@ function ActionNode({ id, data }: NodeProps<ActionNode>) {
Complete on Download
</Label>
<HelpTooltip
content={helpTooltipContent["completeOnDownload"]}
content={commonHelpTooltipContent["completeOnDownload"]}
/>
</div>
<div className="w-52">
Expand All @@ -248,11 +261,13 @@ function ActionNode({ id, data }: NodeProps<ActionNode>) {
<Label className="text-xs font-normal text-slate-300">
File Suffix
</Label>
<HelpTooltip content={helpTooltipContent["fileSuffix"]} />
<HelpTooltip
content={commonHelpTooltipContent["fileSuffix"]}
/>
</div>
<Input
type="text"
placeholder={fieldPlaceholders["downloadSuffix"]}
placeholder={commonFieldPlaceholders["downloadSuffix"]}
className="nopan w-52 text-xs"
value={inputs.downloadSuffix ?? ""}
onChange={(event) => {
Expand All @@ -270,7 +285,7 @@ function ActionNode({ id, data }: NodeProps<ActionNode>) {
2FA Verification URL
</Label>
<HelpTooltip
content={helpTooltipContent["totpVerificationUrl"]}
content={commonHelpTooltipContent["totpVerificationUrl"]}
/>
</div>
<AutoResizingTextarea
Expand All @@ -281,7 +296,7 @@ function ActionNode({ id, data }: NodeProps<ActionNode>) {
handleChange("totpVerificationUrl", event.target.value);
}}
value={inputs.totpVerificationUrl ?? ""}
placeholder={fieldPlaceholders["totpVerificationUrl"]}
placeholder={commonFieldPlaceholders["totpVerificationUrl"]}
className="nopan text-xs"
/>
</div>
Expand All @@ -291,7 +306,7 @@ function ActionNode({ id, data }: NodeProps<ActionNode>) {
2FA Identifier
</Label>
<HelpTooltip
content={helpTooltipContent["totpIdentifier"]}
content={commonHelpTooltipContent["totpIdentifier"]}
/>
</div>
<AutoResizingTextarea
Expand All @@ -302,7 +317,7 @@ function ActionNode({ id, data }: NodeProps<ActionNode>) {
handleChange("totpIdentifier", event.target.value);
}}
value={inputs.totpIdentifier ?? ""}
placeholder={fieldPlaceholders["totpIdentifier"]}
placeholder={commonFieldPlaceholders["totpIdentifier"]}
className="nopan text-xs"
/>
</div>
Expand Down
31 changes: 0 additions & 31 deletions skyvern-frontend/src/routes/workflows/editor/nodes/ActionNode/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,34 +35,3 @@ export const actionNodeDefaultData: ActionNodeData = {
export function isActionNode(node: Node): node is ActionNode {
return node.type === "action";
}

export const helpTooltipContent = {
navigationGoal:
"Specify a single step or action you'd like Skyvern to complete. Actions are one-off tasks like filling a field or interacting with a specific element on the page.\n\nCurrently supported actions are click, input text, upload file, and select.",
maxRetries:
"Specify how many times you would like a task to retry upon failure.",
maxStepsOverride:
"Specify the maximum number of steps a task can take in total.",
completeOnDownload:
"Allow Skyvern to auto-complete the task when it downloads a file.",
fileSuffix:
"A file suffix that's automatically added to all downloaded files.",
errorCodeMapping:
"Knowing about why a task terminated can be important, specify error messages here.",
totpVerificationUrl:
"If you have an internal system for storing TOTP codes, link the endpoint here.",
totpIdentifier:
"If you are running multiple tasks or workflows at once, you will need to give the task an identifier to know that this TOTP goes with this task.",
continueOnFailure:
"Allow the workflow to continue if it encounters a failure.",
cacheActions: "Cache the actions of this task.",
} as const;

export const fieldPlaceholders = {
navigationGoal: 'Input text into "Name" field.',
maxRetries: "Default: 3",
maxStepsOverride: "Default: 10",
downloadSuffix: "Add an ID for downloaded files",
totpVerificationUrl: "Provide your 2FA endpoint",
totpIdentifier: "Add an ID that links your TOTP to the task",
};
Loading

0 comments on commit d520254

Please sign in to comment.