Add help text to other nodes (#967)

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

@@ -57,7 +57,7 @@ function CodeBlockNode({ id, data }: NodeProps<CodeBlockNode>) {
             }}
           />
         </div>
-        <div className="space-y-1">
+        <div className="space-y-2">
           <Label className="text-xs text-slate-300">Code Input</Label>
           <CodeEditor
             language="python"

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

@@ -11,5 +11,5 @@ export type CodeBlockNode = Node<CodeBlockNodeData, "codeBlock">;
 export const codeBlockNodeDefaultData: CodeBlockNodeData = {
   editable: true,
   label: "",
-  code: "",
+  code: `# To assign a value to the output of this block,\n# assign the value to the variable 'result'\n# The final value of 'result' will be used as the output of this block\n\nresult = 5`,
 } as const;

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

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

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

@@ -14,3 +14,7 @@ export const downloadNodeDefaultData: DownloadNodeData = {
   label: "",
   url: SKYVERN_DOWNLOAD_DIRECTORY,
 } 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;

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

@@ -6,7 +6,9 @@ import { Handle, NodeProps, Position, useReactFlow } from "@xyflow/react";
 import { useState } from "react";
 import { EditableNodeTitle } from "../components/EditableNodeTitle";
 import { NodeActionMenu } from "../NodeActionMenu";
-import type { FileParserNode } from "./types";
+import { helpTooltipContent, type FileParserNode } from "./types";
+import { Label } from "@/components/ui/label";
+import { HelpTooltip } from "@/components/HelpTooltip";
 
 function FileParserNode({ id, data }: NodeProps<FileParserNode>) {
   const { updateNodeData } = useReactFlow();
@@ -57,8 +59,11 @@ function FileParserNode({ id, data }: NodeProps<FileParserNode>) {
           />
         </div>
         <div className="space-y-4">
-          <div className="space-y-1">
+          <div className="space-y-2">
-            <span className="text-sm text-slate-400">File URL</span>
+            <div className="flex gap-2">
+              <Label className="text-xs text-slate-300">File URL</Label>
+              <HelpTooltip content={helpTooltipContent["fileUrl"]} />
+            </div>
             <Input
               value={inputs.fileUrl}
               onChange={(event) => {

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

@@ -13,3 +13,8 @@ export const fileParserNodeDefaultData: FileParserNodeData = {
   label: "",
   fileUrl: "",
 } as const;
+
+export const helpTooltipContent = {
+  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.",
+} as const;

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

@@ -23,7 +23,8 @@ import { useWorkflowParametersState } from "../../useWorkflowParametersState";
 import { getAvailableOutputParameterKeys } from "../../workflowEditorUtils";
 import { EditableNodeTitle } from "../components/EditableNodeTitle";
 import { NodeActionMenu } from "../NodeActionMenu";
-import type { LoopNode } from "./types";
+import { helpTooltipContent, type LoopNode } from "./types";
+import { HelpTooltip } from "@/components/HelpTooltip";
 
 function LoopNode({ id, data }: NodeProps<LoopNode>) {
   const { updateNodeData } = useReactFlow();
@@ -105,10 +106,13 @@ function LoopNode({ id, data }: NodeProps<LoopNode>) {
                 }}
               />
             </div>
-            <div className="space-y-1">
+            <div className="space-y-2">
-              <Label className="text-xs text-slate-300">
+              <div className="flex gap-2">
-                Loop Value Parameter
+                <Label className="text-xs text-slate-300">
-              </Label>
+                  Loop Value Parameter
+                </Label>
+                <HelpTooltip content={helpTooltipContent["loopValue"]} />
+              </div>
               <Select
                 value={data.loopValue}
                 onValueChange={(value) => {
@@ -116,7 +120,7 @@ function LoopNode({ id, data }: NodeProps<LoopNode>) {
                 }}
               >
                 <SelectTrigger>
-                  <SelectValue placeholder="Select a parameter" />
+                  <SelectValue placeholder="Select the parameter to iterate over" />
                 </SelectTrigger>
                 <SelectContent>
                   {[...parameterKeys, ...outputParameterKeys].map(

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

@@ -17,3 +17,8 @@ export const loopNodeDefaultData: LoopNodeData = {
 export function isLoopNode(node: Node): node is LoopNode {
   return node.type === "loop";
 }
+
+export const helpTooltipContent = {
+  loopValue:
+    "Define this parameterized field with a parameter key to let Skyvern know the core value you're iterating over.",
+} as const;

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

@@ -8,7 +8,8 @@ import { Handle, NodeProps, Position, useReactFlow } from "@xyflow/react";
 import { useState } from "react";
 import { EditableNodeTitle } from "../components/EditableNodeTitle";
 import { NodeActionMenu } from "../NodeActionMenu";
-import type { SendEmailNode } from "./types";
+import { helpTooltipContent, type SendEmailNode } from "./types";
+import { HelpTooltip } from "@/components/HelpTooltip";
 
 function SendEmailNode({ id, data }: NodeProps<SendEmailNode>) {
   const { updateNodeData } = useReactFlow();
@@ -69,7 +70,7 @@ function SendEmailNode({ id, data }: NodeProps<SendEmailNode>) {
             }}
           />
         </div>
-        <div className="space-y-1">
+        <div className="space-y-2">
           <Label className="text-xs text-slate-300">Recipients</Label>
           <Input
             onChange={(event) => {
@@ -84,7 +85,7 @@ function SendEmailNode({ id, data }: NodeProps<SendEmailNode>) {
           />
         </div>
         <Separator />
-        <div className="space-y-1">
+        <div className="space-y-2">
           <Label className="text-xs text-slate-300">Subject</Label>
           <Input
             onChange={(event) => {
@@ -98,7 +99,7 @@ function SendEmailNode({ id, data }: NodeProps<SendEmailNode>) {
             className="nopan text-xs"
           />
         </div>
-        <div className="space-y-1">
+        <div className="space-y-2">
           <Label className="text-xs text-slate-300">Body</Label>
           <Input
             onChange={(event) => {
@@ -113,8 +114,11 @@ function SendEmailNode({ id, data }: NodeProps<SendEmailNode>) {
           />
         </div>
         <Separator />
-        <div className="space-y-1">
+        <div className="space-y-2">
-          <Label className="text-xs text-slate-300">File Attachments</Label>
+          <div className="flex gap-2">
+            <Label className="text-xs text-slate-300">File Attachments</Label>
+            <HelpTooltip content={helpTooltipContent["fileAttachments"]} />
+          </div>
           <Input
             value={inputs.fileAttachments}
             onChange={(event) => {

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

@@ -37,3 +37,8 @@ export const sendEmailNodeDefaultData: SendEmailNodeData = {
   smtpUsernameSecretParameterKey: SMTP_USERNAME_PARAMETER_KEY,
   smtpPasswordSecretParameterKey: SMTP_PASSWORD_PARAMETER_KEY,
 } as const;
+
+export const helpTooltipContent = {
+  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.",
+} as const;

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

@@ -480,23 +480,18 @@ function TaskNode({ id, data }: NodeProps<TaskNode>) {
             }}
           />
         </div>
-        <div className="flex items-center justify-between">
+        <TaskNodeDisplayModeSwitch
-          <TaskNodeDisplayModeSwitch
+          value={displayMode}
-            value={displayMode}
+          onChange={(mode) => {
-            onChange={(mode) => {
+            setDisplayMode(mode);
-              setDisplayMode(mode);
+            if (workflowPermanentId) {
-              if (workflowPermanentId) {
+              localStorage.setItem(
-                localStorage.setItem(
+                getLocalStorageKey(workflowPermanentId, label),
-                  getLocalStorageKey(workflowPermanentId, label),
+                mode,
-                  mode,
+              );
-                );
+            }
-              }
+          }}
-            }}
+        />
-          />
-          {displayMode === "basic" && (
-            <HelpTooltip content={helpTooltipContent["base"]} />
-          )}
-        </div>
         {displayMode === "basic" && basicContent}
         {displayMode === "advanced" && advancedContent}
       </div>

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

@@ -10,7 +10,8 @@ import { Handle, NodeProps, Position, useReactFlow } from "@xyflow/react";
 import { useState } from "react";
 import { EditableNodeTitle } from "../components/EditableNodeTitle";
 import { NodeActionMenu } from "../NodeActionMenu";
-import type { TextPromptNode } from "./types";
+import { helpTooltipContent, type TextPromptNode } from "./types";
+import { HelpTooltip } from "@/components/HelpTooltip";
 
 function TextPromptNode({ id, data }: NodeProps<TextPromptNode>) {
   const { updateNodeData } = useReactFlow();
@@ -63,8 +64,11 @@ function TextPromptNode({ id, data }: NodeProps<TextPromptNode>) {
             }}
           />
         </div>
-        <div className="space-y-1">
+        <div className="space-y-2">
-          <Label className="text-xs text-slate-300">Prompt</Label>
+          <div className="flex gap-2">
+            <Label className="text-xs text-slate-300">Prompt</Label>
+            <HelpTooltip content={helpTooltipContent["prompt"]} />
+          </div>
           <AutoResizingTextarea
             onChange={(event) => {
               if (!editable) {

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

@@ -15,3 +15,8 @@ export const textPromptNodeDefaultData: TextPromptNodeData = {
   prompt: "",
   jsonSchema: "null",
 } as const;
+
+export const helpTooltipContent = {
+  prompt:
+    "Write a prompt you would like passed into the LLM and specify the output format, if applicable.",
+};

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

@@ -6,7 +6,8 @@ import { UploadIcon } from "@radix-ui/react-icons";
 import { Handle, NodeProps, Position } from "@xyflow/react";
 import { EditableNodeTitle } from "../components/EditableNodeTitle";
 import { NodeActionMenu } from "../NodeActionMenu";
-import type { UploadNode } from "./types";
+import { helpTooltipContent, type UploadNode } from "./types";
+import { HelpTooltip } from "@/components/HelpTooltip";
 
 function UploadNode({ id, data }: NodeProps<UploadNode>) {
   const deleteNodeCallback = useDeleteNodeCallback();
@@ -53,8 +54,11 @@ function UploadNode({ id, data }: NodeProps<UploadNode>) {
           />
         </div>
         <div className="space-y-4">
-          <div className="space-y-1">
+          <div className="space-y-2">
-            <Label className="text-sm text-slate-400">File Path</Label>
+            <div className="flex items-center gap-2">
+              <Label className="text-sm text-slate-400">File Path</Label>
+              <HelpTooltip content={helpTooltipContent["path"]} />
+            </div>
             <Input value={data.path} className="nopan text-xs" disabled />
           </div>
         </div>

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

@@ -14,3 +14,7 @@ export const uploadNodeDefaultData: UploadNodeData = {
   label: "",
   path: SKYVERN_DOWNLOAD_DIRECTORY,
 } as const;
+
+export const helpTooltipContent = {
+  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.",
+} as const;