ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-03 04:38:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(studio): make prompt modal editable with textarea

Browse Source
This commit is contained in:
Miguel Ángel
2026-05-21 20:31:00 -04:00
parent 300ef395ea
commit cf940326e9
1 changed files with 24 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/studio/src/components/sidebar/BlocksTab.tsx
+24 -17
View File
@@ -492,13 +492,19 @@ function PromptPreviewModal({
prompt: string;
onClose: () => void;
}) {
const [value, setValue] = useState(prompt);
const [copied, setCopied] = useState(false);
const textareaRef = useRef<HTMLTextAreaElement>(null);
useEffect(() => {
requestAnimationFrame(() => textareaRef.current?.focus());
}, []);
const handleCopy = useCallback(() => {
navigator.clipboard.writeText(prompt);
navigator.clipboard.writeText(value);
setCopied(true);
setTimeout(() => setCopied(false), 1500);
}, [prompt]);
}, [value]);
return (
<div
@@ -506,7 +512,7 @@ function PromptPreviewModal({
onClick={onClose}
>
<div
className="w-[520px] max-h-[80vh] flex flex-col rounded-2xl border border-neutral-800 bg-neutral-950 shadow-2xl"
className="w-[560px] max-h-[80vh] flex flex-col rounded-2xl border border-neutral-800 bg-neutral-950 shadow-2xl"
onClick={(e) => e.stopPropagation()}
>
<div className="flex items-center justify-between px-5 py-4 border-b border-neutral-800/60">
@@ -518,15 +524,7 @@ function PromptPreviewModal({
className="p-1 rounded-md text-neutral-500 hover:text-neutral-300 hover:bg-neutral-800/50"
onClick={onClose}
>
<svg
width="14"
height="14"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
<line x1="18" y1="6" x2="6" y2="18" />
<line x1="6" y1="6" x2="18" y2="18" />
</svg>
@@ -534,14 +532,23 @@ function PromptPreviewModal({
</div>
<div className="flex-1 overflow-y-auto px-5 py-4">
<p className="text-[11px] text-neutral-500 mb-2">
Copy this prompt and paste it into your AI agent (Claude Code, Cursor, etc.)
Edit the prompt below, then copy and paste into your AI agent
</p>
<pre className="text-[11px] text-neutral-300 leading-relaxed whitespace-pre-wrap font-mono bg-neutral-900/60 rounded-lg p-3 border border-neutral-800 select-all">
{prompt}
</pre>
<textarea
ref={textareaRef}
value={value}
onChange={(e) => setValue(e.target.value)}
onKeyDown={(e) => {
if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) handleCopy();
if (e.key === "Escape") onClose();
}}
className="w-full min-h-[240px] text-[11px] text-neutral-200 leading-relaxed font-mono bg-neutral-900/60 rounded-lg p-3 border border-neutral-800 resize-y focus:outline-none focus:border-studio-accent/60 focus:ring-1 focus:ring-studio-accent/30"
/>
</div>
<div className="flex items-center justify-between px-5 py-3 border-t border-neutral-800/60">
<span className="text-[11px] text-neutral-600">Paste into your agent after copying</span>
<span className="text-[11px] text-neutral-600">
{navigator.platform.includes("Mac") ? "⌘" : "Ctrl"}+Enter to copy
</span>
<button
className={`px-4 py-1.5 rounded-lg text-xs font-medium transition-colors ${
copied