reuse parameter-patching input (#3271)

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

@@ -180,4 +180,7 @@ export const placeholders = {
       '{\n  "Content-Type": "application/json",\n  "Authorization": "Bearer {{ token }}"\n}',
     body: '{\n  "key": "value",\n  "parameter": "{{ parameter_name }}"\n}',
   },
+  scripts: {
+    scriptKey: "my-{{param1}}-{{param2}}-key",
+  },
 };

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

@@ -12,6 +12,7 @@ import { ProxyLocation } from "@/api/types";
 import { useQuery } from "@tanstack/react-query";
 import { Label } from "@/components/ui/label";
 import { HelpTooltip } from "@/components/HelpTooltip";
+import { WorkflowBlockInputTextarea } from "@/components/WorkflowBlockInputTextarea";
 import { Input } from "@/components/ui/input";
 import { ProxySelector } from "@/components/ProxySelector";
 import { useCredentialGetter } from "@/hooks/useCredentialGetter";
@@ -23,6 +24,7 @@ import { WorkflowModel } from "@/routes/workflows/types/workflowTypes";
 import { MAX_SCREENSHOT_SCROLLS_DEFAULT } from "../Taskv2Node/types";
 import { KeyValueInput } from "@/components/KeyValueInput";
 import { OrgWalled } from "@/components/Orgwalled";
+import { placeholders } from "@/routes/workflows/editor/helpContent";
 import { useWorkflowSettingsStore } from "@/store/WorkflowSettingsStore";
 
 function StartNode({ id, data }: NodeProps<StartNode>) {
@@ -149,21 +151,16 @@ function StartNode({ id, data }: NodeProps<StartNode>) {
                         </div>
                       </div>
                       {inputs.useScriptCache && (
-                        <div className="space-y-2">
+                        <WorkflowBlockInputTextarea
-                          <div className="flex gap-2">
+                          nodeId={id}
-                            <Label>Script Key</Label>
+                          onChange={(value) => {
-                            <HelpTooltip content="A constant string or templated name, comprised of one or more of your parameters. It's the unique key for a workflow script." />
+                            const v = value.length ? value : null;
-                          </div>
+                            handleChange("scriptCacheKey", v);
-                          <Input
+                          }}
-                            value={inputs.scriptCacheKey ?? ""}
+                          value={inputs.scriptCacheKey ?? ""}
-                            placeholder="my-{{param1}}-{{param2}}-key"
+                          placeholder={placeholders["scripts"]["scriptKey"]}
-                            onChange={(event) => {
+                          className="nopan text-xs"
-                              const value = (event.target.value ?? "").trim();
+                        />
-                              const v = value.length ? value : null;
-                              handleChange("scriptCacheKey", v);
-                            }}
-                          />
-                        </div>
                       )}
                     </OrgWalled>
                     <div className="space-y-2">