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}