refactor: tooltips and placeholders (#1302)

Co-authored-by: Muhammed Salih Altun <muhammedsalihaltun@gmail.com>

skyvern-frontend/src/routes/workflows/editor/constants.ts

@@ -14,33 +14,3 @@ 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;

skyvern-frontend/src/routes/workflows/editor/helpContent.ts

@@ -0,0 +1,125 @@
+export const baseHelpTooltipContent = {
+  url: "The URL Skyvern is navigating to. Leave this field blank to pick up from where the last block left off.",
+  navigationGoal:
+    "Give Skyvern an objective. Make sure to include when the block is complete, when it should self-terminate, and any guardrails.",
+  parameters:
+    "Define placeholder values using the “parameters” drop down that you predefine or redefine run-to-run.",
+  dataExtractionGoal:
+    "Tell Skyvern what data you would like to scrape at the end of your run.",
+  dataSchema: "Specify a format for extracted data in JSON.",
+  maxRetries:
+    "Specify how many times you would like a block to retry upon failure.",
+  maxStepsOverride:
+    "Specify the maximum number of steps a block can take in total.",
+  completeOnDownload:
+    "Allow Skyvern to auto-complete the block when it downloads a file.",
+  fileSuffix:
+    "A file suffix that's automatically added to all downloaded files.",
+  errorCodeMapping:
+    "Knowing about why a block 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 workflows at once, you will need to give the block an identifier to know that this TOTP goes with this block.",
+  continueOnFailure:
+    "Allow the workflow to continue if it encounters a failure.",
+  cacheActions: "Cache the actions of this block.",
+} as const;
+
+export const basePlaceholderContent = {
+  url: "https://",
+  navigationGoal: "Tell Skyvern what to do.",
+  dataExtractionGoal: "What data do you need to extract?",
+  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 block",
+};
+
+export const helpTooltips = {
+  task: baseHelpTooltipContent,
+  navigation: baseHelpTooltipContent,
+  extraction: {
+    ...baseHelpTooltipContent,
+    dataExtractionGoal:
+      "Tell Skyvern what data you would like to scrape. Use {{ parameter_name }} to specify parameters to use.",
+  },
+  action: {
+    ...baseHelpTooltipContent,
+    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. Use {{ parameter_name }} to specify parameters to use.",
+  },
+  fileDownload: {
+    ...baseHelpTooltipContent,
+    navigationGoal:
+      "Give Skyvern an objective that describes how to download the file.",
+  },
+  validation: baseHelpTooltipContent,
+  textPrompt: {
+    ...baseHelpTooltipContent,
+    prompt:
+      "Write a prompt you would like passed into the LLM and specify the output format, if applicable.",
+  },
+  login: baseHelpTooltipContent,
+  loop: {
+    ...baseHelpTooltipContent,
+    loopValue:
+      "Define this parameterized field with a parameter key to let Skyvern know the core value you're iterating over.",
+  },
+  sendEmail: {
+    ...baseHelpTooltipContent,
+    fileAttachments:
+      "Since we're in beta this section isn't fully customizable yet, contact us if you'd like to integrate it into your workflow.",
+  },
+  upload: {
+    ...baseHelpTooltipContent,
+    path: "Since we're in beta this section isn't fully customizable yet, contact us if you'd like to integrate it into your workflow.",
+  },
+  download: {
+    ...baseHelpTooltipContent,
+    url: "Since we're in beta this section isn't fully customizable yet, contact us if you'd like to integrate it into your workflow.",
+  },
+  codeBlock: baseHelpTooltipContent,
+  fileParser: {
+    ...baseHelpTooltipContent,
+    fileUrl:
+      "Since we're in beta this section isn't fully customizable yet, contact us if you'd like to integrate it into your workflow.",
+  },
+  wait: {
+    ...baseHelpTooltipContent,
+    waitInSeconds:
+      "Specify a number for how many seconds to wait. Value must be between 0 and 300 seconds.",
+  },
+};
+
+export const placeholders = {
+  task: basePlaceholderContent,
+  navigation: {
+    ...basePlaceholderContent,
+    navigationGoal:
+      "Give Skyvern an objective. Make sure to include when the task is complete, when it should self-terminate, and any guardrails.",
+  },
+  extraction: {
+    ...basePlaceholderContent,
+    dataExtractionGoal:
+      "Extract the price of the product with id {{ product_id }}",
+  },
+  action: {
+    ...basePlaceholderContent,
+    navigationGoal: 'Input {{ name }} into "Name" field.',
+  },
+  fileDownload: {
+    navigationGoal: "Tell Skyvern which file to download.",
+  },
+  validation: basePlaceholderContent,
+  textPrompt: basePlaceholderContent,
+  login: basePlaceholderContent,
+  loop: basePlaceholderContent,
+  sendEmail: basePlaceholderContent,
+  upload: basePlaceholderContent,
+  download: basePlaceholderContent,
+  codeBlock: basePlaceholderContent,
+  fileUrl: basePlaceholderContent,
+  wait: basePlaceholderContent,
+};

skyvern-frontend/src/routes/workflows/editor/nodes/ActionNode/ActionNode.tsx

@@ -21,10 +21,7 @@ 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";
+import { placeholders, helpTooltips } from "../../helpContent";
 
 const urlTooltip =
   "The URL Skyvern is navigating to. Leave this field blank to pick up from where the last block left off.";
@@ -113,7 +110,7 @@ function ActionNode({ id, data }: NodeProps<ActionNode>) {
                 handleChange("url", event.target.value);
               }}
               value={inputs.url}
-              placeholder={commonFieldPlaceholders["url"]}
+              placeholder={placeholders["action"]["url"]}
               className="nopan text-xs"
             />
           </div>
@@ -151,12 +148,12 @@ function ActionNode({ id, data }: NodeProps<ActionNode>) {
                       Max Retries
                     </Label>
                     <HelpTooltip
-                      content={commonHelpTooltipContent["maxRetries"]}
+                      content={helpTooltips["action"]["maxRetries"]}
                     />
                   </div>
                   <Input
                     type="number"
-                    placeholder={commonFieldPlaceholders["maxRetries"]}
+                    placeholder={placeholders["action"]["maxRetries"]}
                     className="nopan w-52 text-xs"
                     min="0"
                     value={inputs.maxRetries ?? ""}
@@ -179,7 +176,7 @@ function ActionNode({ id, data }: NodeProps<ActionNode>) {
                         Error Messages
                       </Label>
                       <HelpTooltip
-                        content={commonHelpTooltipContent["errorCodeMapping"]}
+                        content={helpTooltips["action"]["errorCodeMapping"]}
                       />
                     </div>
                     <Checkbox
@@ -222,7 +219,7 @@ function ActionNode({ id, data }: NodeProps<ActionNode>) {
                       Continue on Failure
                     </Label>
                     <HelpTooltip
-                      content={commonHelpTooltipContent["continueOnFailure"]}
+                      content={helpTooltips["action"]["continueOnFailure"]}
                     />
                   </div>
                   <div className="w-52">
@@ -243,7 +240,7 @@ function ActionNode({ id, data }: NodeProps<ActionNode>) {
                       Cache Actions
                     </Label>
                     <HelpTooltip
-                      content={commonHelpTooltipContent["cacheActions"]}
+                      content={helpTooltips["action"]["cacheActions"]}
                     />
                   </div>
                   <div className="w-52">
@@ -265,7 +262,7 @@ function ActionNode({ id, data }: NodeProps<ActionNode>) {
                       Complete on Download
                     </Label>
                     <HelpTooltip
-                      content={commonHelpTooltipContent["completeOnDownload"]}
+                      content={helpTooltips["action"]["completeOnDownload"]}
                     />
                   </div>
                   <div className="w-52">
@@ -286,12 +283,12 @@ function ActionNode({ id, data }: NodeProps<ActionNode>) {
                       File Suffix
                     </Label>
                     <HelpTooltip
-                      content={commonHelpTooltipContent["fileSuffix"]}
+                      content={helpTooltips["action"]["fileSuffix"]}
                     />
                   </div>
                   <Input
                     type="text"
-                    placeholder={commonFieldPlaceholders["downloadSuffix"]}
+                    placeholder={placeholders["action"]["downloadSuffix"]}
                     className="nopan w-52 text-xs"
                     value={inputs.downloadSuffix ?? ""}
                     onChange={(event) => {
@@ -309,7 +306,7 @@ function ActionNode({ id, data }: NodeProps<ActionNode>) {
                       2FA Verification URL
                     </Label>
                     <HelpTooltip
-                      content={commonHelpTooltipContent["totpVerificationUrl"]}
+                      content={helpTooltips["action"]["totpVerificationUrl"]}
                     />
                   </div>
                   <AutoResizingTextarea
@@ -320,7 +317,7 @@ function ActionNode({ id, data }: NodeProps<ActionNode>) {
                       handleChange("totpVerificationUrl", event.target.value);
                     }}
                     value={inputs.totpVerificationUrl ?? ""}
-                    placeholder={commonFieldPlaceholders["totpVerificationUrl"]}
+                    placeholder={placeholders["action"]["totpVerificationUrl"]}
                     className="nopan text-xs"
                   />
                 </div>
@@ -330,7 +327,7 @@ function ActionNode({ id, data }: NodeProps<ActionNode>) {
                       2FA Identifier
                     </Label>
                     <HelpTooltip
-                      content={commonHelpTooltipContent["totpIdentifier"]}
+                      content={helpTooltips["action"]["totpIdentifier"]}
                     />
                   </div>
                   <AutoResizingTextarea
@@ -341,7 +338,7 @@ function ActionNode({ id, data }: NodeProps<ActionNode>) {
                       handleChange("totpIdentifier", event.target.value);
                     }}
                     value={inputs.totpIdentifier ?? ""}
-                    placeholder={commonFieldPlaceholders["totpIdentifier"]}
+                    placeholder={placeholders["action"]["totpIdentifier"]}
                     className="nopan text-xs"
                   />
                 </div>

skyvern-frontend/src/routes/workflows/editor/nodes/DownloadNode/DownloadNode.tsx

@@ -6,8 +6,9 @@ import { DownloadIcon } from "@radix-ui/react-icons";
 import { Handle, NodeProps, Position } from "@xyflow/react";
 import { EditableNodeTitle } from "../components/EditableNodeTitle";
 import { NodeActionMenu } from "../NodeActionMenu";
-import { helpTooltipContent, type DownloadNode } from "./types";
+import type { DownloadNode } from "./types";
 import { HelpTooltip } from "@/components/HelpTooltip";
+import { helpTooltips } from "../../helpContent";
 
 function DownloadNode({ id, data }: NodeProps<DownloadNode>) {
   const [label, setLabel] = useNodeLabelChangeHandler({
@@ -57,7 +58,7 @@ function DownloadNode({ id, data }: NodeProps<DownloadNode>) {
           <div className="space-y-2">
             <div className="flex items-center gap-2">
               <Label className="text-sm text-slate-400">File Path</Label>
-              <HelpTooltip content={helpTooltipContent["url"]} />
+              <HelpTooltip content={helpTooltips["download"]["url"]} />
             </div>
             <Input value={data.url} disabled className="nopan text-xs" />
           </div>

skyvern-frontend/src/routes/workflows/editor/nodes/DownloadNode/types.ts

@@ -14,7 +14,3 @@ export const downloadNodeDefaultData: DownloadNodeData = {
   url: SKYVERN_DOWNLOAD_DIRECTORY,
   continueOnFailure: false,
 } as const;
-
-export const helpTooltipContent = {
-  url: "Since we're in beta this section isn't fully customizable yet, contact us if you'd like to integrate it into your workflow.",
-} as const;