Add instruction for running generated code locally (#3739)

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

@@ -13,6 +13,7 @@ import {
   ChevronLeftIcon,
   CopyIcon,
   GlobeIcon,
+  PlayIcon,
   ReloadIcon,
 } from "@radix-ui/react-icons";
 import { useParams, useSearchParams } from "react-router-dom";
@@ -40,12 +41,13 @@ import {
 import { Splitter } from "@/components/Splitter";
 import {
   Dialog,
+  DialogClose,
   DialogContent,
   DialogDescription,
   DialogFooter,
   DialogHeader,
   DialogTitle,
-  DialogClose,
+  DialogTrigger,
 } from "@/components/ui/dialog";
 import { toast } from "@/components/ui/use-toast";
 import { BrowserStream } from "@/components/BrowserStream";
@@ -108,6 +110,65 @@ interface Dom {
   splitLeft: MutableRefObject<HTMLInputElement | null>;
 }
 
+function bash(text: string, alternateText?: string) {
+  return (
+    <div className="flex items-center justify-start gap-1">
+      <CopyText className="min-w-[2.25rem]" text={alternateText ?? text} />
+      <code className="text-xs text-[lightblue]">{text}</code>
+    </div>
+  );
+}
+
+function CopyAndExplainCode({ code }: { code: string }) {
+  const [isOpen, setIsOpen] = useState(false);
+  const numCodeLines = code.split("\n").length;
+
+  return (
+    <div className="flex items-center justify-end">
+      <Dialog open={isOpen} onOpenChange={setIsOpen}>
+        <DialogTrigger asChild>
+          <Button variant="tertiary" size="sm">
+            <div className="flex items-center justify-center gap-2">
+              <div>Run Locally</div>
+              <PlayIcon />
+            </div>
+          </Button>
+        </DialogTrigger>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Run This Code</DialogTitle>
+            <DialogDescription>
+              Set up skyvern in your environment and run the code on your own.
+            </DialogDescription>
+          </DialogHeader>
+          <div>
+            <div>1. Install skyvern: {bash("pip install skyvern")}</div>
+            <div>2. Set up skyvern: {bash("skyvern quickstart")}</div>
+            <div>
+              3. Copy-paste the code and save it in a file, for example{" "}
+              <code>main.py</code>{" "}
+              {bash(`copy code [${numCodeLines} line(s)]`, code)}
+            </div>
+            <div>
+              4. Run the code:{" "}
+              {bash(
+                'skyvern run code --params \'{"param1": "val1", "param2": "val2"}\' main.py',
+              )}
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsOpen(false)}>
+              Ok
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+      <CopyText text={code} />
+    </div>
+  );
+}
+
 function CopyText({ className, text }: { className?: string; text: string }) {
   const [wasCopied, setWasCopied] = useState(false);
 
@@ -132,8 +193,6 @@ function CopyText({ className, text }: { className?: string; text: string }) {
   );
 }
 
-export { CopyText };
-
 function Workspace({
   initialNodes,
   initialEdges,
@@ -1209,8 +1268,8 @@ function Workspace({
                   })}
                 >
                   <div className="relative mt-[8.5rem] w-full p-6 pr-5 pt-0">
-                    <div className="absolute right-[1.25rem] top-0 z-20">
-                      <CopyText text={code} />
+                    <div className="absolute right-[2rem] top-[0.75rem] z-20">
+                      <CopyAndExplainCode code={code} />
                     </div>
                     <CodeEditor
                       className={cn("w-full overflow-y-scroll", {
@@ -1428,4 +1487,4 @@ function Workspace({
   );
 }
 
-export { Workspace };
+export { CopyText, CopyAndExplainCode, Workspace };

skyvern-frontend/src/routes/workflows/workflowRun/WorkflowRunCode.tsx

@@ -21,6 +21,8 @@ import { constructCacheKeyValue } from "@/routes/workflows/editor/utils";
 import { getCode, getOrderedBlockLabels } from "@/routes/workflows/utils";
 import { cn } from "@/util/utils";
 
+import { CopyAndExplainCode } from "../editor/Workspace";
+
 interface Props {
   showCacheKeyValueSelector?: boolean;
 }
@@ -152,7 +154,7 @@ function WorkflowRunCode(props?: Props) {
   }
 
   return (
-    <div className="flex h-full w-full flex-col items-end justify-center gap-2">
+    <div className="relative flex h-full w-full flex-col items-end justify-center gap-2">
       {cacheKeyValueSet.size > 0 ? (
         <div className="flex w-full justify-end gap-4">
           <div className="flex items-center justify-around gap-2">
@@ -209,6 +211,9 @@ function WorkflowRunCode(props?: Props) {
         readOnly
         fontSize={10}
       />
+      <div className="absolute right-[0.75rem] top-[3.5rem] flex items-center justify-end">
+        <CopyAndExplainCode code={code} />
+      </div>
     </div>
   );
 }