Change example tasks to fill prompt box when skyvern 2.0 is selected (#1630)

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

@@ -0,0 +1,89 @@
+import { getClient } from "@/api/AxiosClient";
+import { ObserverTask } from "@/api/types";
+import { Button } from "@/components/ui/button";
+import { toast } from "@/components/ui/use-toast";
+import { useCredentialGetter } from "@/hooks/useCredentialGetter";
+import { ReloadIcon } from "@radix-ui/react-icons";
+import { ToastAction } from "@radix-ui/react-toast";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { AxiosError } from "axios";
+import { Link, useNavigate } from "react-router-dom";
+
+type Props = {
+  exampleId: string;
+  version: "v1" | "v2";
+  icon: React.ReactNode;
+  label: string;
+  prompt: string;
+};
+
+function ExampleCasePill({ exampleId, version, icon, label, prompt }: Props) {
+  const credentialGetter = useCredentialGetter();
+  const queryClient = useQueryClient();
+  const navigate = useNavigate();
+
+  const startObserverCruiseMutation = useMutation({
+    mutationFn: async (prompt: string) => {
+      const client = await getClient(credentialGetter, "v2");
+      return client.post<{ user_prompt: string }, { data: ObserverTask }>(
+        "/tasks",
+        { user_prompt: prompt },
+      );
+    },
+    onSuccess: (response) => {
+      toast({
+        variant: "success",
+        title: "Workflow Run Created",
+        description: `Workflow run created successfully.`,
+        action: (
+          <ToastAction altText="View">
+            <Button asChild>
+              <Link
+                to={`/workflows/${response.data.workflow_permanent_id}/${response.data.workflow_run_id}`}
+              >
+                View
+              </Link>
+            </Button>
+          </ToastAction>
+        ),
+      });
+      queryClient.invalidateQueries({
+        queryKey: ["workflowRuns"],
+      });
+      queryClient.invalidateQueries({
+        queryKey: ["workflows"],
+      });
+    },
+    onError: (error: AxiosError) => {
+      toast({
+        variant: "destructive",
+        title: "Error creating workflow run from prompt",
+        description: error.message,
+      });
+    },
+  });
+
+  return (
+    <div
+      className="flex cursor-pointer gap-2 whitespace-normal rounded-sm bg-slate-elevation3 px-4 py-3 hover:bg-slate-elevation5 lg:whitespace-nowrap"
+      onClick={() => {
+        if (version === "v2") {
+          startObserverCruiseMutation.mutate(prompt);
+        } else {
+          navigate(`/tasks/create/${exampleId}`);
+        }
+      }}
+    >
+      <div>
+        {startObserverCruiseMutation.isPending ? (
+          <ReloadIcon className="size-6 animate-spin" />
+        ) : (
+          icon
+        )}
+      </div>
+      <div>{label}</div>
+    </div>
+  );
+}
+
+export { ExampleCasePill };