Prompt to task UI (#455)

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

@@ -10,6 +10,19 @@ import { Separator } from "@/components/ui/separator";
 import { useNavigate } from "react-router-dom";
 import { SavedTasks } from "./SavedTasks";
 import { getSample } from "../data/sampleTaskData";
+import { Textarea } from "@/components/ui/textarea";
+import { useState } from "react";
+import { PaperPlaneIcon, ReloadIcon } from "@radix-ui/react-icons";
+import { useMutation } from "@tanstack/react-query";
+import { useCredentialGetter } from "@/hooks/useCredentialGetter";
+import { getClient } from "@/api/AxiosClient";
+import { AxiosError } from "axios";
+import { toast } from "@/components/ui/use-toast";
+
+const examplePrompts = [
+  "What is the top post on hackernews?",
+  "Navigate to Google Finance and search for AAPL",
+];
 
 const templateSamples: {
   [key in SampleCase]: {
@@ -41,9 +54,74 @@ const templateSamples: {
 
 function TaskTemplates() {
   const navigate = useNavigate();
+  const [prompt, setPrompt] = useState<string>("");
+  const credentialGetter = useCredentialGetter();
+
+  const getTaskFromPromptMutation = useMutation({
+    mutationFn: async (prompt: string) => {
+      const client = await getClient(credentialGetter);
+      return client
+        .post("/generate/task", { prompt })
+        .then((response) => response.data);
+    },
+    onSuccess: (response) => {
+      navigate("/create/sk-prompt", { state: { data: response } });
+    },
+    onError: (error: AxiosError) => {
+      toast({
+        variant: "destructive",
+        title: "Error creating task from prompt",
+        description: error.message,
+      });
+    },
+  });
 
   return (
     <div>
+      <section className="py-4">
+        <header>
+          <h1 className="text-3xl mb-2">Try a prompt</h1>
+        </header>
+        <p className="text-sm">
+          We will generate a task for you automatically.
+        </p>
+        <Separator className="mt-2 mb-8" />
+        <div className="flex border rounded-xl items-center pr-4 max-w-xl mx-auto">
+          <Textarea
+            className="rounded-xl resize-none border-transparent hover:border-transparent focus-visible:ring-0 p-2 font-mono text-sm"
+            value={prompt}
+            onChange={(e) => setPrompt(e.target.value)}
+            placeholder="Enter your prompt..."
+          />
+          <div className="h-full">
+            {getTaskFromPromptMutation.isPending ? (
+              <ReloadIcon className="w-6 h-6 animate-spin" />
+            ) : (
+              <PaperPlaneIcon
+                className="w-6 h-6 cursor-pointer"
+                onClick={() => {
+                  getTaskFromPromptMutation.mutate(prompt);
+                }}
+              />
+            )}
+          </div>
+        </div>
+        <div className="flex flex-wrap gap-4 mt-4 justify-center">
+          {examplePrompts.map((examplePrompt) => {
+            return (
+              <div
+                key={examplePrompt}
+                className="p-2 border rounded-xl cursor-pointer text-muted-foreground text-sm"
+                onClick={() => {
+                  setPrompt(examplePrompt);
+                }}
+              >
+                {examplePrompt}
+              </div>
+            );
+          })}
+        </div>
+      </section>
       <section className="py-4">
         <header>
           <h1 className="text-3xl">Your Templates</h1>