Update parameter hint (#1628)

2025-01-24 00:45:48 +08:00
parent 99adf68444
commit a7752de6a9
16 changed files with 224 additions and 141 deletions
--- a/skyvern-frontend/src/components/WorkflowBlockInput.tsx
+++ b/skyvern-frontend/src/components/WorkflowBlockInput.tsx
@@ -3,43 +3,14 @@ import { cn } from "@/util/utils";
 import { Input } from "./ui/input";
 import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
 import { WorkflowBlockParameterSelect } from "@/routes/workflows/editor/nodes/WorkflowBlockParameterSelect";
-import { useEdges, useNodes } from "@xyflow/react";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "./ui/tooltip";

 type Props = Omit<React.ComponentProps<typeof Input>, "onChange"> & {
  onChange: (value: string) => void;
  nodeId: string;
-  isFirstInputInNode?: boolean;
 };

 function WorkflowBlockInput(props: Props) {
  const { nodeId, onChange, ...inputProps } = props;
-  const edges = useEdges();
-  const nodes = useNodes();
-
-  function isInsideFirstNode() {
-    const node = nodes.find((node) => node.id === nodeId);
-    if (!node) {
-      return;
-    }
-    const incomingEdge = edges.find((edge) => edge.target === node.id);
-    if (!incomingEdge) {
-      return;
-    }
-    const source = incomingEdge.source;
-    const sourceNode = nodes.find((node) => node.id === source);
-    if (!sourceNode) {
-      return;
-    }
-    return !node.parentId && sourceNode.type === "start";
-  }
-
-  const showInputTooltip = isInsideFirstNode() && props.isFirstInputInNode;

  return (
    <div className="relative">
@@ -52,19 +23,11 @@ function WorkflowBlockInput(props: Props) {
      />
      <div className="absolute right-0 top-0 flex size-9 cursor-pointer items-center justify-center">
        <Popover>
-          <TooltipProvider>
-            <Tooltip open={showInputTooltip}>
-              <TooltipTrigger asChild>
-                <PopoverTrigger asChild>
-                  <div className="rounded p-1 hover:bg-muted">
-                    <PlusIcon className="size-4" />
-                  </div>
-                </PopoverTrigger>
-              </TooltipTrigger>
-              <TooltipContent>Add parameters using the + button</TooltipContent>
-            </Tooltip>
-          </TooltipProvider>
-
+          <PopoverTrigger asChild>
+            <div className="rounded p-1 hover:bg-muted">
+              <PlusIcon className="size-4" />
+            </div>
+          </PopoverTrigger>
          <PopoverContent>
            <WorkflowBlockParameterSelect
              nodeId={nodeId}
--- a/skyvern-frontend/src/components/WorkflowBlockInputTextarea.tsx
+++ b/skyvern-frontend/src/components/WorkflowBlockInputTextarea.tsx
@@ -3,13 +3,6 @@ import { cn } from "@/util/utils";
 import { AutoResizingTextarea } from "./AutoResizingTextarea/AutoResizingTextarea";
 import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
 import { WorkflowBlockParameterSelect } from "@/routes/workflows/editor/nodes/WorkflowBlockParameterSelect";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "./ui/tooltip";
-import { useEdges, useNodes } from "@xyflow/react";

 type Props = Omit<
  React.ComponentProps<typeof AutoResizingTextarea>,
@@ -17,32 +10,10 @@ type Props = Omit<
 > & {
  onChange: (value: string) => void;
  nodeId: string;
-  isFirstInputInNode?: boolean;
 };

 function WorkflowBlockInputTextarea(props: Props) {
  const { nodeId, onChange, ...textAreaProps } = props;
-  const edges = useEdges();
-  const nodes = useNodes();
-
-  function isInsideFirstNode() {
-    const node = nodes.find((node) => node.id === nodeId);
-    if (!node) {
-      return;
-    }
-    const incomingEdge = edges.find((edge) => edge.target === node.id);
-    if (!incomingEdge) {
-      return;
-    }
-    const source = incomingEdge.source;
-    const sourceNode = nodes.find((node) => node.id === source);
-    if (!sourceNode) {
-      return;
-    }
-    return !node.parentId && sourceNode.type === "start";
-  }
-
-  const showInputTooltip = isInsideFirstNode() && props.isFirstInputInNode;

  return (
    <div className="relative">
@@ -55,18 +26,11 @@ function WorkflowBlockInputTextarea(props: Props) {
      />
      <div className="absolute right-0 top-0 flex size-9 cursor-pointer items-center justify-center">
        <Popover>
-          <TooltipProvider>
-            <Tooltip open={showInputTooltip}>
-              <TooltipTrigger asChild>
-                <PopoverTrigger asChild>
-                  <div className="rounded p-1 hover:bg-muted">
-                    <PlusIcon className="size-4" />
-                  </div>
-                </PopoverTrigger>
-              </TooltipTrigger>
-              <TooltipContent>Add parameters using the + button</TooltipContent>
-            </Tooltip>
-          </TooltipProvider>
+          <PopoverTrigger asChild>
+            <div className="rounded p-1 hover:bg-muted">
+              <PlusIcon className="size-4" />
+            </div>
+          </PopoverTrigger>
          <PopoverContent>
            <WorkflowBlockParameterSelect
              nodeId={nodeId}
--- a/skyvern-frontend/src/routes/workflows/editor/hooks/useIsFirstNodeInWorkflow.tsx
+++ b/skyvern-frontend/src/routes/workflows/editor/hooks/useIsFirstNodeInWorkflow.tsx
@@ -0,0 +1,32 @@
+import { Edge, useEdges, useNodes } from "@xyflow/react";
+import { AppNode } from "../nodes";
+
+function isFirstNode(nodes: Array<AppNode>, edges: Array<Edge>, id: string) {
+  const node = nodes.find((node) => node.id === id);
+  if (!node) {
+    return false; // doesn't make sense but for TS
+  }
+  const incomingEdge = edges.find((edge) => edge.target === node.id);
+  if (!incomingEdge) {
+    return false;
+  }
+  const source = incomingEdge.source;
+  const sourceNode = nodes.find((node) => node.id === source);
+  if (!sourceNode) {
+    return false;
+  }
+  return !node.parentId && sourceNode.type === "start";
+}
+
+type Props = {
+  id: string;
+};
+
+function useIsFirstBlockInWorkflow({ id }: Props): boolean {
+  const nodes = useNodes<AppNode>();
+  const edges = useEdges();
+
+  return isFirstNode(nodes, edges, id);
+}
+
+export { useIsFirstBlockInWorkflow };
--- a/skyvern-frontend/src/routes/workflows/editor/nodes/ActionNode/ActionNode.tsx
+++ b/skyvern-frontend/src/routes/workflows/editor/nodes/ActionNode/ActionNode.tsx
@@ -34,6 +34,7 @@ import { WorkflowBlockTypes } from "@/routes/workflows/types/workflowTypes";
 import { AppNode } from "..";
 import { getAvailableOutputParameterKeys } from "../../workflowEditorUtils";
 import { ParametersMultiSelect } from "../TaskNode/ParametersMultiSelect";
+import { useIsFirstBlockInWorkflow } from "../../hooks/useIsFirstNodeInWorkflow";

 const urlTooltip =
  "The URL Skyvern is navigating to. Leave this field blank to pick up from where the last block left off.";
@@ -75,6 +76,8 @@ function ActionNode({ id, data }: NodeProps<ActionNode>) {
    updateNodeData(id, { [key]: value });
  }

+  const isFirstWorkflowBlock = useIsFirstBlockInWorkflow({ id });
+
  return (
    <div>
      <Handle
@@ -117,12 +120,19 @@ function ActionNode({ id, data }: NodeProps<ActionNode>) {
        </header>
        <div className="space-y-4">
          <div className="space-y-2">
-            <div className="flex gap-2">
-              <Label className="text-xs text-slate-300">URL</Label>
-              <HelpTooltip content={urlTooltip} />
+            <div className="flex justify-between">
+              <div className="flex gap-2">
+                <Label className="text-xs text-slate-300">URL</Label>
+                <HelpTooltip content={urlTooltip} />
+              </div>
+              {isFirstWorkflowBlock ? (
+                <div className="flex justify-end text-xs text-slate-400">
+                  Tip: Use the {"+"} button to add parameters!
+                </div>
+              ) : null}
            </div>
+
            <WorkflowBlockInputTextarea
-              isFirstInputInNode
              nodeId={id}
              onChange={(value) => {
                handleChange("url", value);
--- a/skyvern-frontend/src/routes/workflows/editor/nodes/ExtractionNode/ExtractionNode.tsx
+++ b/skyvern-frontend/src/routes/workflows/editor/nodes/ExtractionNode/ExtractionNode.tsx
@@ -32,6 +32,7 @@ import { AppNode } from "..";
 import { getAvailableOutputParameterKeys } from "../../workflowEditorUtils";
 import { ParametersMultiSelect } from "../TaskNode/ParametersMultiSelect";
 import { WorkflowDataSchemaInputGroup } from "@/components/DataSchemaInputGroup/WorkflowDataSchemaInputGroup";
+import { useIsFirstBlockInWorkflow } from "../../hooks/useIsFirstNodeInWorkflow";

 function ExtractionNode({ id, data }: NodeProps<ExtractionNode>) {
  const { updateNodeData } = useReactFlow();
@@ -54,6 +55,8 @@ function ExtractionNode({ id, data }: NodeProps<ExtractionNode>) {
  const edges = useEdges();
  const outputParameterKeys = getAvailableOutputParameterKeys(nodes, edges, id);

+  const isFirstWorkflowBlock = useIsFirstBlockInWorkflow({ id });
+
  function handleChange(key: string, value: unknown) {
    if (!editable) {
      return;
@@ -100,16 +103,23 @@ function ExtractionNode({ id, data }: NodeProps<ExtractionNode>) {
          />
        </header>
        <div className="space-y-2">
-          <div className="flex gap-2">
-            <Label className="text-xs text-slate-300">
-              Data Extraction Goal
-            </Label>
-            <HelpTooltip
-              content={helpTooltips["extraction"]["dataExtractionGoal"]}
-            />
+          <div className="flex justify-between">
+            <div className="flex gap-2">
+              <Label className="text-xs text-slate-300">
+                Data Extraction Goal
+              </Label>
+              <HelpTooltip
+                content={helpTooltips["extraction"]["dataExtractionGoal"]}
+              />
+            </div>
+            {isFirstWorkflowBlock ? (
+              <div className="flex justify-end text-xs text-slate-400">
+                Tip: Use the {"+"} button to add parameters!
+              </div>
+            ) : null}
          </div>
+
          <WorkflowBlockInputTextarea
-            isFirstInputInNode
            nodeId={id}
            onChange={(value) => {
              if (!editable) {
--- a/skyvern-frontend/src/routes/workflows/editor/nodes/FileDownloadNode/FileDownloadNode.tsx
+++ b/skyvern-frontend/src/routes/workflows/editor/nodes/FileDownloadNode/FileDownloadNode.tsx
@@ -32,6 +32,7 @@ import type { FileDownloadNode } from "./types";
 import { AppNode } from "..";
 import { getAvailableOutputParameterKeys } from "../../workflowEditorUtils";
 import { ParametersMultiSelect } from "../TaskNode/ParametersMultiSelect";
+import { useIsFirstBlockInWorkflow } from "../../hooks/useIsFirstNodeInWorkflow";

 const urlTooltip =
  "The URL Skyvern is navigating to. Leave this field blank to pick up from where the last block left off.";
@@ -65,6 +66,8 @@ function FileDownloadNode({ id, data }: NodeProps<FileDownloadNode>) {
  const edges = useEdges();
  const outputParameterKeys = getAvailableOutputParameterKeys(nodes, edges, id);

+  const isFirstWorkflowBlock = useIsFirstBlockInWorkflow({ id });
+
  function handleChange(key: string, value: unknown) {
    if (!editable) {
      return;
@@ -114,12 +117,18 @@ function FileDownloadNode({ id, data }: NodeProps<FileDownloadNode>) {
        </header>
        <div className="space-y-4">
          <div className="space-y-2">
-            <div className="flex gap-2">
-              <Label className="text-xs text-slate-300">URL</Label>
-              <HelpTooltip content={urlTooltip} />
+            <div className="flex justify-between">
+              <div className="flex gap-2">
+                <Label className="text-xs text-slate-300">URL</Label>
+                <HelpTooltip content={urlTooltip} />
+              </div>
+              {isFirstWorkflowBlock ? (
+                <div className="flex justify-end text-xs text-slate-400">
+                  Tip: Use the {"+"} button to add parameters!
+                </div>
+              ) : null}
            </div>
            <WorkflowBlockInputTextarea
-              isFirstInputInNode
              nodeId={id}
              onChange={(value) => {
                handleChange("url", value);
--- a/skyvern-frontend/src/routes/workflows/editor/nodes/FileParserNode/FileParserNode.tsx
+++ b/skyvern-frontend/src/routes/workflows/editor/nodes/FileParserNode/FileParserNode.tsx
@@ -1,5 +1,4 @@
 import { HelpTooltip } from "@/components/HelpTooltip";
-import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { useDeleteNodeCallback } from "@/routes/workflows/hooks/useDeleteNodeCallback";
 import { useNodeLabelChangeHandler } from "@/routes/workflows/hooks/useLabelChangeHandler";
@@ -11,6 +10,8 @@ import { EditableNodeTitle } from "../components/EditableNodeTitle";
 import { NodeActionMenu } from "../NodeActionMenu";
 import { WorkflowBlockIcon } from "../WorkflowBlockIcon";
 import { type FileParserNode } from "./types";
+import { WorkflowBlockInput } from "@/components/WorkflowBlockInput";
+import { useIsFirstBlockInWorkflow } from "../../hooks/useIsFirstNodeInWorkflow";

 function FileParserNode({ id, data }: NodeProps<FileParserNode>) {
  const { updateNodeData } = useReactFlow();
@@ -23,6 +24,8 @@ function FileParserNode({ id, data }: NodeProps<FileParserNode>) {
    initialValue: data.label,
  });

+  const isFirstWorkflowBlock = useIsFirstBlockInWorkflow({ id });
+
  return (
    <div>
      <Handle
@@ -65,18 +68,27 @@ function FileParserNode({ id, data }: NodeProps<FileParserNode>) {
        </div>
        <div className="space-y-4">
          <div className="space-y-2">
-            <div className="flex gap-2">
-              <Label className="text-xs text-slate-300">File URL</Label>
-              <HelpTooltip content={helpTooltips["fileParser"]["fileUrl"]} />
+            <div className="flex justify-between">
+              <div className="flex gap-2">
+                <Label className="text-xs text-slate-300">File URL</Label>
+                <HelpTooltip content={helpTooltips["fileParser"]["fileUrl"]} />
+              </div>
+              {isFirstWorkflowBlock ? (
+                <div className="flex justify-end text-xs text-slate-400">
+                  Tip: Use the {"+"} button to add parameters!
+                </div>
+              ) : null}
            </div>
-            <Input
+
+            <WorkflowBlockInput
+              nodeId={id}
              value={inputs.fileUrl}
-              onChange={(event) => {
+              onChange={(value) => {
                if (!data.editable) {
                  return;
                }
-                setInputs({ ...inputs, fileUrl: event.target.value });
-                updateNodeData(id, { fileUrl: event.target.value });
+                setInputs({ ...inputs, fileUrl: value });
+                updateNodeData(id, { fileUrl: value });
              }}
              className="nopan text-xs"
            />
--- a/skyvern-frontend/src/routes/workflows/editor/nodes/LoginNode/LoginNode.tsx
+++ b/skyvern-frontend/src/routes/workflows/editor/nodes/LoginNode/LoginNode.tsx
@@ -34,6 +34,7 @@ import type { LoginNode } from "./types";
 import { ParametersMultiSelect } from "../TaskNode/ParametersMultiSelect";
 import { AppNode } from "..";
 import { getAvailableOutputParameterKeys } from "../../workflowEditorUtils";
+import { useIsFirstBlockInWorkflow } from "../../hooks/useIsFirstNodeInWorkflow";

 function LoginNode({ id, data }: NodeProps<LoginNode>) {
  const { updateNodeData } = useReactFlow();
@@ -60,6 +61,7 @@ function LoginNode({ id, data }: NodeProps<LoginNode>) {
  const nodes = useNodes<AppNode>();
  const edges = useEdges();
  const outputParameterKeys = getAvailableOutputParameterKeys(nodes, edges, id);
+  const isFirstWorkflowBlock = useIsFirstBlockInWorkflow({ id });

  function handleChange(key: string, value: unknown) {
    if (!editable) {
@@ -111,12 +113,19 @@ function LoginNode({ id, data }: NodeProps<LoginNode>) {
        </header>
        <div className="space-y-4">
          <div className="space-y-2">
-            <div className="flex gap-2">
-              <Label className="text-xs text-slate-300">URL</Label>
-              <HelpTooltip content={helpTooltips["login"]["url"]} />
+            <div className="flex justify-between">
+              <div className="flex gap-2">
+                <Label className="text-xs text-slate-300">URL</Label>
+                <HelpTooltip content={helpTooltips["login"]["url"]} />
+              </div>
+              {isFirstWorkflowBlock ? (
+                <div className="flex justify-end text-xs text-slate-400">
+                  Tip: Use the {"+"} button to add parameters!
+                </div>
+              ) : null}
            </div>
+
            <WorkflowBlockInputTextarea
-              isFirstInputInNode
              nodeId={id}
              onChange={(value) => {
                handleChange("url", value);
--- a/skyvern-frontend/src/routes/workflows/editor/nodes/LoopNode/LoopNode.tsx
+++ b/skyvern-frontend/src/routes/workflows/editor/nodes/LoopNode/LoopNode.tsx
@@ -19,6 +19,7 @@ import { NodeActionMenu } from "../NodeActionMenu";
 import { WorkflowBlockIcon } from "../WorkflowBlockIcon";
 import type { LoopNode } from "./types";
 import { useState } from "react";
+import { useIsFirstBlockInWorkflow } from "../../hooks/useIsFirstNodeInWorkflow";

 function LoopNode({ id, data }: NodeProps<LoopNode>) {
  const { updateNodeData } = useReactFlow();
@@ -32,6 +33,8 @@ function LoopNode({ id, data }: NodeProps<LoopNode>) {
  });
  const deleteNodeCallback = useDeleteNodeCallback();

+  const isFirstWorkflowBlock = useIsFirstBlockInWorkflow({ id });
+
  const children = nodes.filter((node) => node.parentId === id);
  const furthestDownChild: Node | null = children.reduce(
    (acc, child) => {
@@ -99,12 +102,18 @@ function LoopNode({ id, data }: NodeProps<LoopNode>) {
              />
            </div>
            <div className="space-y-2">
-              <div className="flex gap-2">
-                <Label className="text-xs text-slate-300">Loop Value</Label>
-                <HelpTooltip content={helpTooltips["loop"]["loopValue"]} />
+              <div className="flex justify-between">
+                <div className="flex gap-2">
+                  <Label className="text-xs text-slate-300">Loop Value</Label>
+                  <HelpTooltip content={helpTooltips["loop"]["loopValue"]} />
+                </div>
+                {isFirstWorkflowBlock ? (
+                  <div className="flex justify-end text-xs text-slate-400">
+                    Tip: Use the {"+"} button to add parameters!
+                  </div>
+                ) : null}
              </div>
              <WorkflowBlockInput
-                isFirstInputInNode
                nodeId={id}
                value={inputs.loopVariableReference}
                onChange={(value) => {
--- a/skyvern-frontend/src/routes/workflows/editor/nodes/NavigationNode/NavigationNode.tsx
+++ b/skyvern-frontend/src/routes/workflows/editor/nodes/NavigationNode/NavigationNode.tsx
@@ -34,6 +34,7 @@ import type { NavigationNode } from "./types";
 import { ParametersMultiSelect } from "../TaskNode/ParametersMultiSelect";
 import { AppNode } from "..";
 import { getAvailableOutputParameterKeys } from "../../workflowEditorUtils";
+import { useIsFirstBlockInWorkflow } from "../../hooks/useIsFirstNodeInWorkflow";

 function NavigationNode({ id, data }: NodeProps<NavigationNode>) {
  const { updateNodeData } = useReactFlow();
@@ -63,6 +64,8 @@ function NavigationNode({ id, data }: NodeProps<NavigationNode>) {
  const edges = useEdges();
  const outputParameterKeys = getAvailableOutputParameterKeys(nodes, edges, id);

+  const isFirstWorkflowBlock = useIsFirstBlockInWorkflow({ id });
+
  function handleChange(key: string, value: unknown) {
    if (!editable) {
      return;
@@ -113,12 +116,19 @@ function NavigationNode({ id, data }: NodeProps<NavigationNode>) {
        </header>
        <div className="space-y-4">
          <div className="space-y-2">
-            <div className="flex gap-2">
-              <Label className="text-xs text-slate-300">URL</Label>
-              <HelpTooltip content={helpTooltips["navigation"]["url"]} />
+            <div className="flex justify-between">
+              <div className="flex gap-2">
+                <Label className="text-xs text-slate-300">URL</Label>
+                <HelpTooltip content={helpTooltips["navigation"]["url"]} />
+              </div>
+              {isFirstWorkflowBlock ? (
+                <div className="flex justify-end text-xs text-slate-400">
+                  Tip: Use the {"+"} button to add parameters!
+                </div>
+              ) : null}
            </div>
+
            <WorkflowBlockInputTextarea
-              isFirstInputInNode
              nodeId={id}
              onChange={(value) => {
                handleChange("url", value);
--- a/skyvern-frontend/src/routes/workflows/editor/nodes/PDFParserNode/PDFParserNode.tsx
+++ b/skyvern-frontend/src/routes/workflows/editor/nodes/PDFParserNode/PDFParserNode.tsx
@@ -13,6 +13,7 @@ import { dataSchemaExampleForFileExtraction } from "../types";
 import { WorkflowBlockIcon } from "../WorkflowBlockIcon";
 import { type PDFParserNode } from "./types";
 import { WorkflowDataSchemaInputGroup } from "@/components/DataSchemaInputGroup/WorkflowDataSchemaInputGroup";
+import { useIsFirstBlockInWorkflow } from "../../hooks/useIsFirstNodeInWorkflow";

 function PDFParserNode({ id, data }: NodeProps<PDFParserNode>) {
  const { updateNodeData } = useReactFlow();
@@ -34,6 +35,8 @@ function PDFParserNode({ id, data }: NodeProps<PDFParserNode>) {
    updateNodeData(id, { [key]: value });
  }

+  const isFirstWorkflowBlock = useIsFirstBlockInWorkflow({ id });
+
  return (
    <div>
      <Handle
@@ -76,12 +79,18 @@ function PDFParserNode({ id, data }: NodeProps<PDFParserNode>) {
        </div>
        <div className="space-y-4">
          <div className="space-y-2">
-            <div className="flex gap-2">
-              <Label className="text-xs text-slate-300">File URL</Label>
-              <HelpTooltip content={helpTooltips["pdfParser"]["fileUrl"]} />
+            <div className="flex justify-between">
+              <div className="flex gap-2">
+                <Label className="text-xs text-slate-300">File URL</Label>
+                <HelpTooltip content={helpTooltips["pdfParser"]["fileUrl"]} />
+              </div>
+              {isFirstWorkflowBlock ? (
+                <div className="flex justify-end text-xs text-slate-400">
+                  Tip: Use the {"+"} button to add parameters!
+                </div>
+              ) : null}
            </div>
            <WorkflowBlockInput
-              isFirstInputInNode
              nodeId={id}
              value={inputs.fileUrl}
              onChange={(value) => {
--- a/skyvern-frontend/src/routes/workflows/editor/nodes/SendEmailNode/SendEmailNode.tsx
+++ b/skyvern-frontend/src/routes/workflows/editor/nodes/SendEmailNode/SendEmailNode.tsx
@@ -13,6 +13,7 @@ import { WorkflowBlockIcon } from "../WorkflowBlockIcon";
 import { type SendEmailNode } from "./types";
 import { WorkflowBlockInput } from "@/components/WorkflowBlockInput";
 import { WorkflowBlockInputTextarea } from "@/components/WorkflowBlockInputTextarea";
+import { useIsFirstBlockInWorkflow } from "../../hooks/useIsFirstNodeInWorkflow";

 function SendEmailNode({ id, data }: NodeProps<SendEmailNode>) {
  const { updateNodeData } = useReactFlow();
@@ -36,6 +37,8 @@ function SendEmailNode({ id, data }: NodeProps<SendEmailNode>) {
    updateNodeData(id, { [key]: value });
  }

+  const isFirstWorkflowBlock = useIsFirstBlockInWorkflow({ id });
+
  return (
    <div>
      <Handle
@@ -77,9 +80,15 @@ function SendEmailNode({ id, data }: NodeProps<SendEmailNode>) {
          />
        </div>
        <div className="space-y-2">
-          <Label className="text-xs text-slate-300">Recipients</Label>
+          <div className="flex justify-between">
+            <Label className="text-xs text-slate-300">Recipients</Label>
+            {isFirstWorkflowBlock ? (
+              <div className="flex justify-end text-xs text-slate-400">
+                Tip: Use the {"+"} button to add parameters!
+              </div>
+            ) : null}
+          </div>
          <WorkflowBlockInput
-            isFirstInputInNode
            nodeId={id}
            onChange={(value) => {
              handleChange("recipients", value);
--- a/skyvern-frontend/src/routes/workflows/editor/nodes/TaskNode/TaskNode.tsx
+++ b/skyvern-frontend/src/routes/workflows/editor/nodes/TaskNode/TaskNode.tsx
@@ -35,6 +35,7 @@ import { WorkflowBlockIcon } from "../WorkflowBlockIcon";
 import { ParametersMultiSelect } from "./ParametersMultiSelect";
 import type { TaskNode } from "./types";
 import { WorkflowDataSchemaInputGroup } from "@/components/DataSchemaInputGroup/WorkflowDataSchemaInputGroup";
+import { useIsFirstBlockInWorkflow } from "../../hooks/useIsFirstNodeInWorkflow";

 function TaskNode({ id, data }: NodeProps<TaskNode>) {
  const { updateNodeData } = useReactFlow();
@@ -43,6 +44,7 @@ function TaskNode({ id, data }: NodeProps<TaskNode>) {
  const nodes = useNodes<AppNode>();
  const edges = useEdges();
  const outputParameterKeys = getAvailableOutputParameterKeys(nodes, edges, id);
+  const isFirstWorkflowBlock = useIsFirstBlockInWorkflow({ id });

  const [label, setLabel] = useNodeLabelChangeHandler({
    id,
@@ -121,12 +123,18 @@ function TaskNode({ id, data }: NodeProps<TaskNode>) {
            <AccordionContent className="pl-[1.5rem] pr-1">
              <div className="space-y-4">
                <div className="space-y-2">
-                  <div className="flex gap-2">
-                    <Label className="text-xs text-slate-300">URL</Label>
-                    <HelpTooltip content={helpTooltips["task"]["url"]} />
+                  <div className="flex justify-between">
+                    <div className="flex gap-2">
+                      <Label className="text-xs text-slate-300">URL</Label>
+                      <HelpTooltip content={helpTooltips["task"]["url"]} />
+                    </div>
+                    {isFirstWorkflowBlock ? (
+                      <div className="flex justify-end text-xs text-slate-400">
+                        Tip: Use the {"+"} button to add parameters!
+                      </div>
+                    ) : null}
                  </div>
                  <WorkflowBlockInputTextarea
-                    isFirstInputInNode
                    nodeId={id}
                    onChange={(value) => {
                      handleChange("url", value);
--- a/skyvern-frontend/src/routes/workflows/editor/nodes/TextPromptNode/TextPromptNode.tsx
+++ b/skyvern-frontend/src/routes/workflows/editor/nodes/TextPromptNode/TextPromptNode.tsx
@@ -24,6 +24,7 @@ import { type TextPromptNode } from "./types";
 import { WorkflowBlockInputTextarea } from "@/components/WorkflowBlockInputTextarea";
 import { WorkflowDataSchemaInputGroup } from "@/components/DataSchemaInputGroup/WorkflowDataSchemaInputGroup";
 import { dataSchemaExampleValue } from "../types";
+import { useIsFirstBlockInWorkflow } from "../../hooks/useIsFirstNodeInWorkflow";

 function TextPromptNode({ id, data }: NodeProps<TextPromptNode>) {
  const { updateNodeData } = useReactFlow();
@@ -51,6 +52,8 @@ function TextPromptNode({ id, data }: NodeProps<TextPromptNode>) {
    updateNodeData(id, { [key]: value });
  }

+  const isFirstWorkflowBlock = useIsFirstBlockInWorkflow({ id });
+
  return (
    <div>
      <Handle
@@ -92,12 +95,19 @@ function TextPromptNode({ id, data }: NodeProps<TextPromptNode>) {
          />
        </div>
        <div className="space-y-2">
-          <div className="flex gap-2">
-            <Label className="text-xs text-slate-300">Prompt</Label>
-            <HelpTooltip content={helpTooltips["textPrompt"]["prompt"]} />
+          <div className="flex justify-between">
+            <div className="flex gap-2">
+              <Label className="text-xs text-slate-300">Prompt</Label>
+              <HelpTooltip content={helpTooltips["textPrompt"]["prompt"]} />
+            </div>
+            {isFirstWorkflowBlock ? (
+              <div className="flex justify-end text-xs text-slate-400">
+                Tip: Use the {"+"} button to add parameters!
+              </div>
+            ) : null}
          </div>
+
          <WorkflowBlockInputTextarea
-            isFirstInputInNode
            nodeId={id}
            onChange={(value) => {
              handleChange("prompt", value);
--- a/skyvern-frontend/src/routes/workflows/editor/nodes/ValidationNode/ValidationNode.tsx
+++ b/skyvern-frontend/src/routes/workflows/editor/nodes/ValidationNode/ValidationNode.tsx
@@ -32,6 +32,7 @@ import type { ValidationNode } from "./types";
 import { AppNode } from "..";
 import { getAvailableOutputParameterKeys } from "../../workflowEditorUtils";
 import { ParametersMultiSelect } from "../TaskNode/ParametersMultiSelect";
+import { useIsFirstBlockInWorkflow } from "../../hooks/useIsFirstNodeInWorkflow";

 function ValidationNode({ id, data }: NodeProps<ValidationNode>) {
  const { updateNodeData } = useReactFlow();
@@ -58,6 +59,8 @@ function ValidationNode({ id, data }: NodeProps<ValidationNode>) {
    updateNodeData(id, { [key]: value });
  }

+  const isFirstWorkflowBlock = useIsFirstBlockInWorkflow({ id });
+
  return (
    <div>
      <Handle
@@ -99,9 +102,15 @@ function ValidationNode({ id, data }: NodeProps<ValidationNode>) {
          />
        </header>
        <div className="space-y-2">
-          <Label className="text-xs text-slate-300">Complete if...</Label>
+          <div className="flex justify-between">
+            <Label className="text-xs text-slate-300">Complete if...</Label>
+            {isFirstWorkflowBlock ? (
+              <div className="flex justify-end text-xs text-slate-400">
+                Tip: Use the {"+"} button to add parameters!
+              </div>
+            ) : null}
+          </div>
          <WorkflowBlockInputTextarea
-            isFirstInputInNode
            nodeId={id}
            onChange={(value) => {
              handleChange("completeCriterion", value);
--- a/skyvern-frontend/src/routes/workflows/editor/nodes/WaitNode/WaitNode.tsx
+++ b/skyvern-frontend/src/routes/workflows/editor/nodes/WaitNode/WaitNode.tsx
@@ -11,6 +11,7 @@ import { NodeActionMenu } from "../NodeActionMenu";
 import { WorkflowBlockIcon } from "../WorkflowBlockIcon";
 import type { WaitNode } from "./types";
 import { WorkflowBlockInput } from "@/components/WorkflowBlockInput";
+import { useIsFirstBlockInWorkflow } from "../../hooks/useIsFirstNodeInWorkflow";

 function WaitNode({ id, data }: NodeProps<WaitNode>) {
  const { updateNodeData } = useReactFlow();
@@ -32,6 +33,8 @@ function WaitNode({ id, data }: NodeProps<WaitNode>) {
    updateNodeData(id, { [key]: value });
  }

+  const isFirstWorkflowBlock = useIsFirstBlockInWorkflow({ id });
+
  return (
    <div>
      <Handle
@@ -73,15 +76,22 @@ function WaitNode({ id, data }: NodeProps<WaitNode>) {
          />
        </header>
        <div className="space-y-2">
-          <div className="flex gap-2">
-            <Label className="text-xs text-slate-300">
-              Wait Time (in seconds)
-            </Label>
-            <HelpTooltip content={helpTooltips["wait"]["waitInSeconds"]} />
+          <div className="flex justify-between">
+            <div className="flex gap-2">
+              <Label className="text-xs text-slate-300">
+                Wait Time (in seconds)
+              </Label>
+              <HelpTooltip content={helpTooltips["wait"]["waitInSeconds"]} />
+            </div>
+            {isFirstWorkflowBlock ? (
+              <div className="flex justify-end text-xs text-slate-400">
+                Tip: Use the {"+"} button to add parameters!
+              </div>
+            ) : null}
          </div>
+
          <WorkflowBlockInput
            nodeId={id}
-            isFirstInputInNode
            type="number"
            min="1"
            max="300"