add cache key input to workflow settings (#3131)

skyvern-frontend/src/routes/workflows/editor/FlowRenderer.tsx

@@ -350,6 +350,7 @@ function FlowRenderer({
         totp_verification_url: workflow.totp_verification_url,
         extra_http_headers: extraHttpHeaders,
         use_cache: data.settings.useScriptCache,
+        cache_key: data.settings.scriptCacheKey,
         workflow_definition: {
           parameters: data.parameters,
           blocks: data.blocks,

skyvern-frontend/src/routes/workflows/editor/WorkflowDebugger.tsx

@@ -154,6 +154,7 @@ function WorkflowDebugger() {
       ? JSON.stringify(workflow.extra_http_headers)
       : null,
     useScriptCache: workflow.use_cache,
+    scriptCacheKey: workflow.cache_key,
   };
 
   const elements = getElements(

skyvern-frontend/src/routes/workflows/editor/WorkflowEditor.tsx

@@ -59,6 +59,7 @@ function WorkflowEditor() {
       ? JSON.stringify(workflow.extra_http_headers)
       : null,
     useScriptCache: workflow.use_cache,
+    scriptCacheKey: workflow.cache_key,
   };
 
   const elements = getElements(

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

@@ -61,6 +61,7 @@ function StartNode({ id, data }: NodeProps<StartNode>) {
       : null,
     extraHttpHeaders: data.withWorkflowSettings ? data.extraHttpHeaders : null,
     useScriptCache: data.withWorkflowSettings ? data.useScriptCache : false,
+    scriptCacheKey: data.withWorkflowSettings ? data.scriptCacheKey : null,
   });
 
   useEffect(() => {
@@ -133,11 +134,11 @@ function StartNode({ id, data }: NodeProps<StartNode>) {
                         }}
                       />
                     </div>
-                    <OrgWalled>
+                    <OrgWalled className="flex flex-col gap-4">
                       <div className="space-y-2">
                         <div className="flex items-center gap-2">
                           <Label>Use Script Cache</Label>
-                          <HelpTooltip content="Generate & use cached scripts for faster execution" />
+                          <HelpTooltip content="Generate & use cached scripts for faster execution." />
                           <Switch
                             className="ml-auto"
                             checked={inputs.useScriptCache}
@@ -147,6 +148,21 @@ function StartNode({ id, data }: NodeProps<StartNode>) {
                           />
                         </div>
                       </div>
+                      <div className="space-y-2">
+                        <div className="flex gap-2">
+                          <Label>Script Cache Key</Label>
+                          <HelpTooltip content="A templated name, comprised of one or more of your parameters, that defines the key for your script cache." />
+                        </div>
+                        <Input
+                          value={inputs.scriptCacheKey ?? ""}
+                          placeholder="my-{param1}-{param2}-key"
+                          onChange={(event) => {
+                            const value = (event.target.value ?? "").trim();
+                            const v = value.length ? value : null;
+                            handleChange("scriptCacheKey", v);
+                          }}
+                        />
+                      </div>
                     </OrgWalled>
                     <div className="space-y-2">
                       <div className="flex items-center gap-2">

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

@@ -13,6 +13,7 @@ export type WorkflowStartNodeData = {
   extraHttpHeaders: string | null;
   editable: boolean;
   useScriptCache: boolean;
+  scriptCacheKey: string | null;
 };
 
 export type OtherStartNodeData = {

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

@@ -699,6 +699,7 @@ function getElements(
       extraHttpHeaders: settings.extraHttpHeaders,
       editable,
       useScriptCache: settings.useScriptCache,
+      scriptCacheKey: settings.scriptCacheKey,
     }),
   );
 
@@ -1402,6 +1403,7 @@ function getWorkflowSettings(nodes: Array<AppNode>): WorkflowSettings {
     maxScreenshotScrolls: null,
     extraHttpHeaders: null,
     useScriptCache: false,
+    scriptCacheKey: null,
   };
   const startNodes = nodes.filter(isStartNode);
   const startNodeWithWorkflowSettings = startNodes.find(
@@ -1420,6 +1422,7 @@ function getWorkflowSettings(nodes: Array<AppNode>): WorkflowSettings {
       maxScreenshotScrolls: data.maxScreenshotScrolls,
       extraHttpHeaders: data.extraHttpHeaders,
       useScriptCache: data.useScriptCache,
+      scriptCacheKey: data.scriptCacheKey,
     };
   }
   return defaultSettings;

skyvern-frontend/src/routes/workflows/types/workflowTypes.ts

@@ -502,6 +502,7 @@ export type WorkflowApiResponse = {
   modified_at: string;
   deleted_at: string | null;
   use_cache: boolean;
+  cache_key: string | null;
 };
 
 export type WorkflowSettings = {
@@ -512,6 +513,7 @@ export type WorkflowSettings = {
   maxScreenshotScrolls: number | null;
   extraHttpHeaders: string | null;
   useScriptCache: boolean;
+  scriptCacheKey: string | null;
 };
 
 export type WorkflowModel = JsonObjectExtendable<{ model_name: string }>;

skyvern-frontend/src/routes/workflows/types/workflowYamlTypes.ts

@@ -15,6 +15,7 @@ export type WorkflowCreateYAMLRequest = {
   max_screenshot_scrolls?: number | null;
   extra_http_headers?: Record<string, string> | null;
   use_cache?: boolean;
+  cache_key?: string | null;
 };
 
 export type WorkflowDefinitionYAML = {