26069682ee
## Thinking Path
> - Paperclip orchestrates AI agents for zero-human companies
> - The UI serves agent management pages including an instructions editor with copy-to-clipboard buttons
> - The Clipboard API (`navigator.clipboard.writeText`) requires a secure context (HTTPS or localhost)
> - Users accessing the UI over HTTP on a LAN IP get "Copy failed" when clicking the copy icon
> - This pull request adds an `execCommand("copy")` fallback in `CopyText` for non-secure contexts
> - The benefit is that copy buttons work reliably regardless of whether the page is served over HTTPS or plain HTTP
## What Changed
- `ui/src/components/CopyText.tsx`: Added `window.isSecureContext` check before using `navigator.clipboard`. When unavailable, falls back to creating a temporary `<textarea>`, selecting its content, and using `document.execCommand("copy")`. The return value is checked and the DOM element is cleaned up via `try/finally`.
## Verification
- Access the UI over HTTP on a non-localhost IP (e.g. `http://[local-ip]:3100`)
- Navigate to any agent's instructions page → Advanced → click the copy icon next to Root path
- Should show "Copied!" tooltip and the path should be on the clipboard
## Risks
- Low risk. `execCommand("copy")` is deprecated in the spec but universally supported by all major browsers. The fallback only activates in non-secure contexts where the modern API is unavailable. If/when HTTPS is enabled, the modern `navigator.clipboard` path is used automatically.
## Checklist
- [x] I have included a thinking path that traces from project context to this change
- [ ] I have run tests locally and they pass
- [ ] I have added or updated tests where applicable
- [ ] If this change affects the UI, I have included before/after screenshots
- [ ] I have updated relevant documentation to reflect my changes
- [x] I have considered and documented any risks above
- [x] I will address all Greptile and reviewer comments before requesting merge
72 lines
2.3 KiB
TypeScript
72 lines
2.3 KiB
TypeScript
import { useCallback, useRef, useState } from "react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface CopyTextProps {
|
|
text: string;
|
|
/** What to display. Defaults to `text`. */
|
|
children?: React.ReactNode;
|
|
className?: string;
|
|
/** Tooltip message shown after copying. Default: "Copied!" */
|
|
copiedLabel?: string;
|
|
}
|
|
|
|
export function CopyText({ text, children, className, copiedLabel = "Copied!" }: CopyTextProps) {
|
|
const [visible, setVisible] = useState(false);
|
|
const [label, setLabel] = useState(copiedLabel);
|
|
const timerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
|
|
const triggerRef = useRef<HTMLButtonElement>(null);
|
|
|
|
const handleClick = useCallback(async () => {
|
|
try {
|
|
if (navigator.clipboard && window.isSecureContext) {
|
|
await navigator.clipboard.writeText(text);
|
|
} else {
|
|
// Fallback for non-secure contexts (e.g. HTTP on non-localhost)
|
|
const textarea = document.createElement("textarea");
|
|
textarea.value = text;
|
|
textarea.style.position = "fixed";
|
|
textarea.style.left = "-9999px";
|
|
document.body.appendChild(textarea);
|
|
try {
|
|
textarea.select();
|
|
const success = document.execCommand("copy");
|
|
if (!success) throw new Error("execCommand copy failed");
|
|
} finally {
|
|
document.body.removeChild(textarea);
|
|
}
|
|
}
|
|
setLabel(copiedLabel);
|
|
} catch {
|
|
setLabel("Copy failed");
|
|
}
|
|
clearTimeout(timerRef.current);
|
|
setVisible(true);
|
|
timerRef.current = setTimeout(() => setVisible(false), 1500);
|
|
}, [copiedLabel, text]);
|
|
|
|
return (
|
|
<span className="relative inline-flex">
|
|
<button
|
|
ref={triggerRef}
|
|
type="button"
|
|
className={cn(
|
|
"cursor-copy hover:text-foreground transition-colors",
|
|
className,
|
|
)}
|
|
onClick={handleClick}
|
|
>
|
|
{children ?? text}
|
|
</button>
|
|
<span
|
|
role="status"
|
|
aria-live="polite"
|
|
className={cn(
|
|
"pointer-events-none absolute left-1/2 -translate-x-1/2 bottom-full mb-1.5 rounded-md bg-foreground text-background px-2 py-1 text-xs whitespace-nowrap transition-opacity duration-300",
|
|
visible ? "opacity-100" : "opacity-0",
|
|
)}
|
|
>
|
|
{label}
|
|
</span>
|
|
</span>
|
|
);
|
|
}
|