Add clipboard copy functionality that works over HTTP (#4446)

skyvern-frontend/src/components/BrowserStream.tsx

@@ -37,6 +37,7 @@ import {
   newWssBaseUrl,
   getRuntimeApiKey,
 } from "@/util/env";
+import { copyText } from "@/util/copyText";
 import { cn } from "@/util/utils";
 
 import { RotateThrough } from "./RotateThrough";
@@ -698,14 +699,21 @@ function BrowserStream({
       case "copied-text": {
         const text = message.text;
 
-        navigator.clipboard
-          .writeText(text)
-          .then(() => {
-            toast({
-              title: "Copied to Clipboard",
-              description:
-                "The text has been copied to your clipboard. NOTE: copy-paste only works in the web page - not in the browser (like the address bar).",
-            });
+        copyText(text)
+          .then((success) => {
+            if (success) {
+              toast({
+                title: "Copied to Clipboard",
+                description:
+                  "The text has been copied to your clipboard. NOTE: copy-paste only works in the web page - not in the browser (like the address bar).",
+              });
+            } else {
+              toast({
+                variant: "destructive",
+                title: "Failed to write to Clipboard",
+                description: "The text could not be copied to your clipboard.",
+              });
+            }
           })
           .catch((err) => {
             console.error("Failed to write to clipboard:", err);

skyvern-frontend/src/components/CopyButton.tsx

@@ -2,15 +2,16 @@ import { useState } from "react";
 import { CheckIcon, CopyIcon } from "@radix-ui/react-icons";
 
 import { Button } from "@/components/ui/button";
+import { copyText } from "@/util/copyText";
 
 function CopyButton({ value }: { value: string }) {
   const [copied, setCopied] = useState(false);
 
-  const handleCopy = () => {
+  const handleCopy = async () => {
     if (copied) {
       return;
     }
-    window.navigator.clipboard.writeText(value);
+    await copyText(value);
     setCopied(true);
     setTimeout(() => setCopied(false), 1500);
   };