Adjust task placeholders (#933)

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

@@ -55,7 +55,7 @@ function DownloadNode({ id, data }: NodeProps<DownloadNode>) {
         <div className="space-y-4">
           <div className="space-y-1">
             <Label className="text-sm text-slate-400">File URL</Label>
-            <Input value={data.url} disabled className="nopan" />
+            <Input value={data.url} disabled className="nopan text-xs" />
           </div>
         </div>
       </div>

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

@@ -68,7 +68,7 @@ function FileParserNode({ id, data }: NodeProps<FileParserNode>) {
                 setInputs({ ...inputs, fileUrl: event.target.value });
                 updateNodeData(id, { fileUrl: event.target.value });
               }}
-              className="nopan"
+              className="nopan text-xs"
             />
           </div>
         </div>

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

@@ -80,7 +80,7 @@ function SendEmailNode({ id, data }: NodeProps<SendEmailNode>) {
             }}
             value={inputs.recipients}
             placeholder="example@gmail.com, example2@gmail.com..."
-            className="nopan"
+            className="nopan text-xs"
           />
         </div>
         <Separator />
@@ -95,7 +95,7 @@ function SendEmailNode({ id, data }: NodeProps<SendEmailNode>) {
             }}
             value={inputs.subject}
             placeholder="What is the gist?"
-            className="nopan"
+            className="nopan text-xs"
           />
         </div>
         <div className="space-y-1">
@@ -109,7 +109,7 @@ function SendEmailNode({ id, data }: NodeProps<SendEmailNode>) {
             }}
             value={inputs.body}
             placeholder="What would you like to say?"
-            className="nopan"
+            className="nopan text-xs"
           />
         </div>
         <Separator />
@@ -124,7 +124,7 @@ function SendEmailNode({ id, data }: NodeProps<SendEmailNode>) {
               handleChange("fileAttachments", event.target.value);
             }}
             disabled
-            className="nopan"
+            className="nopan text-xs"
           />
         </div>
       </div>

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

@@ -30,6 +30,9 @@ import { NodeActionMenu } from "../NodeActionMenu";
 import { TaskNodeDisplayModeSwitch } from "./TaskNodeDisplayModeSwitch";
 import { TaskNodeParametersPanel } from "./TaskNodeParametersPanel";
 import {
+  dataSchemaExampleValue,
+  errorMappingExampleValue,
+  fieldPlaceholders,
   helpTooltipContent,
   type TaskNode,
   type TaskNodeDisplayMode,
@@ -90,7 +93,7 @@ function TaskNode({ id, data }: NodeProps<TaskNode>) {
         <Label className="text-xs text-slate-300">URL</Label>
         <AutoResizingTextarea
           value={inputs.url}
-          className="nopan"
+          className="nopan text-xs"
           name="url"
           onChange={(event) => {
             if (!editable) {
@@ -98,7 +101,7 @@ function TaskNode({ id, data }: NodeProps<TaskNode>) {
             }
             handleChange("url", event.target.value);
           }}
-          placeholder="https://"
+          placeholder={fieldPlaceholders["url"]}
         />
       </div>
       <div className="space-y-1">
@@ -111,8 +114,8 @@ function TaskNode({ id, data }: NodeProps<TaskNode>) {
             handleChange("navigationGoal", event.target.value);
           }}
           value={inputs.navigationGoal}
-          placeholder="What are you looking to do?"
-          className="nopan"
+          placeholder={fieldPlaceholders["navigationGoal"]}
+          className="nopan text-xs"
         />
       </div>
       <div className="space-y-1">
@@ -151,8 +154,8 @@ function TaskNode({ id, data }: NodeProps<TaskNode>) {
                     handleChange("url", event.target.value);
                   }}
                   value={inputs.url}
-                  placeholder="https://"
-                  className="nopan"
+                  placeholder={fieldPlaceholders["url"]}
+                  className="nopan text-xs"
                 />
               </div>
               <div className="space-y-1">
@@ -165,8 +168,8 @@ function TaskNode({ id, data }: NodeProps<TaskNode>) {
                     handleChange("navigationGoal", event.target.value);
                   }}
                   value={inputs.navigationGoal}
-                  placeholder="What are you looking to do?"
-                  className="nopan"
+                  placeholder={fieldPlaceholders["navigationGoal"]}
+                  className="nopan text-xs"
                 />
               </div>
               <div className="space-y-1">
@@ -204,8 +207,8 @@ function TaskNode({ id, data }: NodeProps<TaskNode>) {
                     handleChange("dataExtractionGoal", event.target.value);
                   }}
                   value={inputs.dataExtractionGoal}
-                  placeholder="What outputs are you looking to get?"
-                  className="nopan"
+                  placeholder={fieldPlaceholders["dataExtractionGoal"]}
+                  className="nopan text-xs"
                 />
               </div>
               <div className="space-y-2">
@@ -217,7 +220,12 @@ function TaskNode({ id, data }: NodeProps<TaskNode>) {
                       if (!editable) {
                         return;
                       }
-                      handleChange("dataSchema", checked ? "{}" : "null");
+                      handleChange(
+                        "dataSchema",
+                        checked
+                          ? JSON.stringify(dataSchemaExampleValue, null, 2)
+                          : "null",
+                      );
                     }}
                   />
                 </div>
@@ -257,15 +265,19 @@ function TaskNode({ id, data }: NodeProps<TaskNode>) {
                 </Label>
                 <Input
                   type="number"
-                  placeholder="0"
-                  className="nopan w-44"
+                  placeholder={fieldPlaceholders["maxRetries"]}
+                  className="nopan w-44 text-xs"
                   min="0"
-                  value={inputs.maxRetries ?? 0}
+                  value={inputs.maxRetries ?? ""}
                   onChange={(event) => {
                     if (!editable) {
                       return;
                     }
-                    handleChange("maxRetries", Number(event.target.value));
+                    const value =
+                      event.target.value === ""
+                        ? null
+                        : Number(event.target.value);
+                    handleChange("maxRetries", value);
                   }}
                 />
               </div>
@@ -275,18 +287,19 @@ function TaskNode({ id, data }: NodeProps<TaskNode>) {
                 </Label>
                 <Input
                   type="number"
-                  placeholder="0"
-                  className="nopan w-44"
+                  placeholder={fieldPlaceholders["maxStepsOverride"]}
+                  className="nopan w-44 text-xs"
                   min="0"
-                  value={inputs.maxStepsOverride ?? 0}
+                  value={inputs.maxStepsOverride ?? ""}
                   onChange={(event) => {
                     if (!editable) {
                       return;
                     }
-                    handleChange(
-                      "maxStepsOverride",
-                      Number(event.target.value),
-                    );
+                    const value =
+                      event.target.value === ""
+                        ? null
+                        : Number(event.target.value);
+                    handleChange("maxStepsOverride", value);
                   }}
                 />
               </div>
@@ -308,12 +321,12 @@ function TaskNode({ id, data }: NodeProps<TaskNode>) {
               </div>
               <div className="flex items-center justify-between">
                 <Label className="text-xs font-normal text-slate-300">
-                  Download Suffix
+                  File Suffix
                 </Label>
                 <Input
                   type="text"
-                  placeholder="Suffix"
-                  className="nopan w-44"
+                  placeholder={fieldPlaceholders["downloadSuffix"]}
+                  className="nopan w-44 text-xs"
                   value={inputs.downloadSuffix ?? ""}
                   onChange={(event) => {
                     if (!editable) {
@@ -335,7 +348,12 @@ function TaskNode({ id, data }: NodeProps<TaskNode>) {
                       if (!editable) {
                         return;
                       }
-                      handleChange("errorCodeMapping", checked ? "{}" : "null");
+                      handleChange(
+                        "errorCodeMapping",
+                        checked
+                          ? JSON.stringify(errorMappingExampleValue, null, 2)
+                          : "null",
+                      );
                     }}
                   />
                 </div>
@@ -381,8 +399,8 @@ function TaskNode({ id, data }: NodeProps<TaskNode>) {
                     handleChange("totpVerificationUrl", event.target.value);
                   }}
                   value={inputs.totpVerificationUrl ?? ""}
-                  placeholder="Link your 2FA storage endpoint"
-                  className="nopan"
+                  placeholder={fieldPlaceholders["totpVerificationUrl"]}
+                  className="nopan text-xs"
                 />
               </div>
               <div className="space-y-1">
@@ -397,8 +415,8 @@ function TaskNode({ id, data }: NodeProps<TaskNode>) {
                     handleChange("totpIdentifier", event.target.value);
                   }}
                   value={inputs.totpIdentifier ?? ""}
-                  placeholder="Add an ID that links your TOTP to the task"
-                  className="nopan"
+                  placeholder={fieldPlaceholders["totpIdentifier"]}
+                  className="nopan text-xs"
                 />
               </div>
             </div>

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

@@ -41,6 +41,7 @@ export const taskNodeDefaultData: TaskNodeData = {
 export function isTaskNode(node: Node): node is TaskNode {
   return node.type === "task";
 }
+
 export const helpTooltipContent = {
   base: "Tell Skyvern what to do. This is the core of your task block, so make sure your prompt tells Skyvern when it has completed its task, any guardrails, and if there are cases where it should terminate the task early. Define placeholder values using the “parameters” drop down that you predefine or redefine run-to-run. This allows you to make a workflow generalizable to a variety of use cases that change with every run.",
   extraction:
@@ -48,4 +49,27 @@ export const helpTooltipContent = {
   limits:
     "Give Skyvern limitations, such as number of retries on failure, the number of maximum steps, the option to download and append suffix identifiers, and return message for errors Skyvern encounters.",
   totp: "Link your internal TOTP storage system to relay 2FA codes we encounter straight to Skyvern. If you have multiple tasks running simultaneously, make sure to link an identifier so Skyvern knows which TOTP URL goes with which task.",
+} as const;
+
+export const fieldPlaceholders = {
+  url: "https://",
+  navigationGoal: "Tell Skyvern what to do.",
+  dataExtractionGoal: "What data do you need to extract?",
+  maxRetries: "Default: 3",
+  maxStepsOverride: "Default: 10",
+  downloadSuffix: "Suffix for file downloads",
+  label: "Task",
+  totpVerificationUrl: "Provide your 2FA endpoint",
+  totpIdentifier: "Add an ID that links your TOTP to the task",
+};
+
+export const errorMappingExampleValue = {
+  sample_invalid_credentials: "if the credentials are incorrect, terminate",
+};
+
+export const dataSchemaExampleValue = {
+  type: "object",
+  properties: {
+    sample: { type: "string" },
+  },
 };

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

@@ -75,7 +75,7 @@ function TextPromptNode({ id, data }: NodeProps<TextPromptNode>) {
             }}
             value={inputs.prompt}
             placeholder="What do you want to generate?"
-            className="nopan"
+            className="nopan text-xs"
           />
         </div>
         <Separator />

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

@@ -55,7 +55,7 @@ function UploadNode({ id, data }: NodeProps<UploadNode>) {
         <div className="space-y-4">
           <div className="space-y-1">
             <Label className="text-sm text-slate-400">File Path</Label>
-            <Input value={data.path} className="nopan" disabled />
+            <Input value={data.path} className="nopan text-xs" disabled />
           </div>
         </div>
       </div>