current viewpoint screenshot and scrolling n screenshot (#2716)

Co-authored-by: lawyzheng <lawyzheng1106@gmail.com>

skyvern-frontend/src/routes/tasks/create/CreateNewTaskForm.tsx

@@ -39,6 +39,7 @@ import {
 } from "./taskFormTypes";
 import { ProxySelector } from "@/components/ProxySelector";
 import { Switch } from "@/components/ui/switch";
+import { MAX_SCREENSHOT_SCROLLING_TIMES_DEFAULT } from "@/routes/workflows/editor/nodes/Taskv2Node/types";
 type Props = {
   initialValues: CreateNewTaskFormValues;
 };
@@ -80,6 +81,7 @@ function createTaskRequestObject(
     extracted_information_schema: extractedInformationSchema,
     totp_identifier: transform(formValues.totpIdentifier),
     error_code_mapping: errorCodeMapping,
+    max_screenshot_scrolling_times: formValues.maxScreenshotScrollingTimes,
     include_action_history_in_verification:
       formValues.includeActionHistoryInVerification,
   };
@@ -114,6 +116,8 @@ function CreateNewTaskForm({ initialValues }: Props) {
       ...initialValues,
       maxStepsOverride: initialValues.maxStepsOverride ?? null,
       proxyLocation: initialValues.proxyLocation ?? ProxyLocation.Residential,
+      maxScreenshotScrollingTimes:
+        initialValues.maxScreenshotScrollingTimes ?? null,
     },
   });
   const { errors } = useFormState({ control: form.control });
@@ -557,6 +561,45 @@ function CreateNewTaskForm({ initialValues }: Props) {
                     );
                   }}
                 />
+                <FormField
+                  control={form.control}
+                  name="maxScreenshotScrollingTimes"
+                  render={({ field }) => (
+                    <FormItem>
+                      <div className="flex gap-16">
+                        <FormLabel>
+                          <div className="w-72">
+                            <h1 className="text-lg">
+                              Max Scrolling Screenshots
+                            </h1>
+                            <h2 className="text-base text-slate-400">
+                              {`The maximum number of times to scroll down the page to take merged screenshots after action. Default is ${MAX_SCREENSHOT_SCROLLING_TIMES_DEFAULT}. If it's set to 0, it will take the current viewport screenshot.`}
+                            </h2>
+                          </div>
+                        </FormLabel>
+                        <div className="w-full">
+                          <FormControl>
+                            <Input
+                              {...field}
+                              type="number"
+                              min={0}
+                              value={field.value ?? ""}
+                              placeholder={`Default: ${MAX_SCREENSHOT_SCROLLING_TIMES_DEFAULT}`}
+                              onChange={(event) => {
+                                const value =
+                                  event.target.value === ""
+                                    ? null
+                                    : Number(event.target.value);
+                                field.onChange(value);
+                              }}
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </div>
+                      </div>
+                    </FormItem>
+                  )}
+                />
                 <Separator />
                 <FormField
                   control={form.control}

skyvern-frontend/src/routes/tasks/create/CreateNewTaskFormPage.tsx

@@ -62,6 +62,7 @@ function CreateNewTaskFormPage() {
             webhookCallbackUrl: null,
             proxyLocation: null,
             includeActionHistoryInVerification: null,
+            maxScreenshotScrollingTimes: null,
           }}
         />
       </div>
@@ -131,6 +132,7 @@ function CreateNewTaskFormPage() {
           includeActionHistoryInVerification:
             data.workflow_definition.blocks[0]
               .include_action_history_in_verification,
+          maxScreenshotScrollingTimes: data.max_screenshot_scrolling_times,
         }}
       />
     </div>

skyvern-frontend/src/routes/tasks/create/PromptBox.tsx

@@ -43,7 +43,10 @@ import {
   generateUniqueEmail,
 } from "../data/sampleTaskData";
 import { ExampleCasePill } from "./ExampleCasePill";
-import { MAX_STEPS_DEFAULT } from "@/routes/workflows/editor/nodes/Taskv2Node/types";
+import {
+  MAX_SCREENSHOT_SCROLLING_TIMES_DEFAULT,
+  MAX_STEPS_DEFAULT,
+} from "@/routes/workflows/editor/nodes/Taskv2Node/types";
 
 function createTemplateTaskFromTaskGenerationParameters(
   values: TaskGenerationApiResponse,
@@ -153,6 +156,8 @@ function PromptBox() {
   const [publishWorkflow, setPublishWorkflow] = useState(false);
   const [totpIdentifier, setTotpIdentifier] = useState("");
   const [maxStepsOverride, setMaxStepsOverride] = useState<string | null>(null);
+  const [maxScreenshotScrollingTimes, setMaxScreenshotScrollingTimes] =
+    useState<string | null>(null);
   const [showAdvancedSettings, setShowAdvancedSettings] = useState(false);
   const [dataSchema, setDataSchema] = useState<string | null>(null);
 
@@ -167,6 +172,7 @@ function PromptBox() {
           proxy_location: proxyLocation,
           totp_identifier: totpIdentifier,
           publish_workflow: publishWorkflow,
+          max_screenshot_scrolling_times: maxScreenshotScrollingTimes,
           extracted_information_schema: dataSchema
             ? (() => {
                 try {
@@ -438,6 +444,21 @@ function PromptBox() {
                       />
                     </div>
                   </div>
+                  <div className="flex gap-16">
+                    <div className="w-48 shrink-0">
+                      <div className="text-sm">Max Scrolling Screenshots</div>
+                      <div className="text-xs text-slate-400">
+                        {`The maximum number of times to scroll down the page to take merged screenshots after action. Default is ${MAX_SCREENSHOT_SCROLLING_TIMES_DEFAULT}. If it's set to 0, it will take the current viewport screenshot.`}
+                      </div>
+                    </div>
+                    <Input
+                      value={maxScreenshotScrollingTimes ?? ""}
+                      placeholder={`Default: ${MAX_SCREENSHOT_SCROLLING_TIMES_DEFAULT}`}
+                      onChange={(event) => {
+                        setMaxScreenshotScrollingTimes(event.target.value);
+                      }}
+                    />
+                  </div>
                 </div>
               </div>
             ) : null}

skyvern-frontend/src/routes/tasks/create/retry/RetryTask.tsx

@@ -44,6 +44,8 @@ function RetryTask() {
           proxyLocation: task.request.proxy_location ?? null,
           includeActionHistoryInVerification:
             task.request.include_action_history_in_verification ?? false,
+          maxScreenshotScrollingTimes:
+            task.request.max_screenshot_scrolling_times ?? null,
         }}
       />
     </div>

skyvern-frontend/src/routes/tasks/create/taskFormTypes.ts

@@ -15,6 +15,7 @@ const createNewTaskFormSchemaBase = z.object({
   errorCodeMapping: z.string().or(z.null()),
   proxyLocation: z.nativeEnum(ProxyLocation).or(z.null()),
   includeActionHistoryInVerification: z.boolean().or(z.null()).default(false),
+  maxScreenshotScrollingTimes: z.number().or(z.null()).default(null),
 });
 
 const savedTaskFormSchemaBase = createNewTaskFormSchemaBase.extend({