|
1 | | -import { CheckIcon } from "@heroicons/react/20/solid"; |
2 | | -import { createContext, useContext, useMemo, useRef, useState } from "react"; |
| 1 | +import { createContext, useContext, useMemo, useState } from "react"; |
3 | 2 | import { useAppOrigin } from "~/hooks/useAppOrigin"; |
4 | 3 | import { useProject } from "~/hooks/useProject"; |
5 | 4 | import { useTriggerCliTag } from "~/hooks/useTriggerCliTag"; |
6 | | -import { Button } from "./primitives/Buttons"; |
7 | 5 | import { |
8 | 6 | ClientTabs, |
9 | 7 | ClientTabsContent, |
10 | 8 | ClientTabsList, |
11 | 9 | ClientTabsTrigger, |
12 | 10 | } from "./primitives/ClientTabs"; |
13 | 11 | import { ClipboardField } from "./primitives/ClipboardField"; |
| 12 | +import { CopyAgentPromptButton } from "./primitives/CopyButton"; |
14 | 13 | import { Header3 } from "./primitives/Headers"; |
15 | | -import { SimpleTooltip } from "./primitives/Tooltip"; |
16 | 14 |
|
17 | 15 | type PackageManagerContextType = { |
18 | 16 | activePackageManager: string; |
@@ -165,43 +163,12 @@ export function InitAgentPromptV3() { |
165 | 163 | const project = useProject(); |
166 | 164 | const apiUrl = useApiUrl(); |
167 | 165 | const cliTag = useTriggerCliTag(); |
168 | | - const [copied, setCopied] = useState(false); |
169 | | - const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null); |
170 | | - |
171 | | - const onCopy = () => { |
172 | | - const prompt = buildAgentSetupPrompt({ |
173 | | - projectRef: project.externalRef, |
174 | | - apiUrl, |
175 | | - cliTag, |
176 | | - }); |
177 | | - setCopied(true); |
178 | | - if (timeoutRef.current) clearTimeout(timeoutRef.current); |
179 | | - timeoutRef.current = setTimeout(() => setCopied(false), 2000); |
180 | | - void navigator.clipboard.writeText(prompt).catch(() => {}); |
181 | | - }; |
182 | | - |
183 | | - // The idle label is the longest, so reserve its width to stop the button from |
184 | | - // resizing when it briefly swaps to the shorter "Copied prompt". |
185 | | - const idleLabel = "Copy AI agent prompt"; |
186 | 166 |
|
187 | 167 | return ( |
188 | | - <SimpleTooltip |
189 | | - asChild |
190 | | - tabbable |
191 | | - button={ |
192 | | - <Button type="button" variant="primary/medium" onClick={onCopy}> |
193 | | - <span className="grid justify-items-center"> |
194 | | - <span className="col-start-1 row-start-1 flex items-center gap-x-1.5"> |
195 | | - {copied && <CheckIcon className="size-4 shrink-0 text-text-bright" />} |
196 | | - <span>{copied ? "Copied prompt" : idleLabel}</span> |
197 | | - </span> |
198 | | - <span aria-hidden className="invisible col-start-1 row-start-1"> |
199 | | - {idleLabel} |
200 | | - </span> |
201 | | - </span> |
202 | | - </Button> |
203 | | - } |
204 | | - content="Copies a setup prompt to paste into Claude Code, Cursor, or any coding agent" |
| 168 | + <CopyAgentPromptButton |
| 169 | + prompt={buildAgentSetupPrompt({ projectRef: project.externalRef, apiUrl, cliTag })} |
| 170 | + label="Copy AI agent prompt" |
| 171 | + tooltip="Copies a setup prompt to paste into Claude Code, Cursor, or any coding agent" |
205 | 172 | /> |
206 | 173 | ); |
207 | 174 | } |
|
0 commit comments