1import { useState } from "react";
2import { useAgentPrompt } from "./agentPrompt";
3
4export default function CopyForAgent() {
5 const [copied, setCopied] = useState(false);
6 const PROMPT = useAgentPrompt();
7
8 const onCopy = async () => {
9 try {
10 await navigator.clipboard.writeText(PROMPT);
11 } catch {
12 const ta = document.createElement("textarea");
13 ta.value = PROMPT;
14 ta.style.position = "fixed";
15 ta.style.opacity = "0";
16 document.body.appendChild(ta);
17 ta.select();
18 try {
19 document.execCommand("copy");
20 } finally {
21 document.body.removeChild(ta);
22 }
23 }
24 setCopied(true);
25 window.setTimeout(() => setCopied(false), 1600);
26 };
27
28 return (
29 <div className="alc-copy-agent" data-nosnippet="">
30 <code
31 className="alc-copy-agent__text"
32 tabIndex={0}
33 aria-label="Prompt for your coding agent"
34 >
35 {PROMPT}
36 </code>
37 <button
38 type="button"
39 onClick={onCopy}
40 className="alc-copy-agent__btn"
41 aria-label={copied ? "Copied to clipboard" : "Copy prompt to clipboard"}
42 title={copied ? "Copied" : "Copy prompt"}
43 >
44 {copied ? <CheckIcon /> : <CopyIcon />}
45 </button>
46 </div>
47 );
48}
49
50function CopyIcon() {
51 return (
52 <svg
53 aria-hidden
54 width="14"
55 height="14"
56 viewBox="0 0 24 24"
57 fill="none"
58 stroke="currentColor"
59 strokeWidth="2"
60 strokeLinecap="round"
61 strokeLinejoin="round"
62 >
63 <rect x="9" y="9" width="13" height="13" rx="2" />
64 <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
65 </svg>
66 );
67}
68
69function CheckIcon() {
70 return (
71 <svg
72 aria-hidden
73 width="14"
74 height="14"
75 viewBox="0 0 24 24"
76 fill="none"
77 stroke="currentColor"
78 strokeWidth="2.25"
79 strokeLinecap="round"
80 strokeLinejoin="round"
81 >
82 <path d="M20 6 9 17l-5-5" />
83 </svg>
84 );
85}