Browse Source

fix: make LLM node body draggable and show action buttons on hover

Remove nodrag/nopan from the text output area so the node can be
dragged from the body (text is read-only, not editable). Move
nodrag/nopan to the individual action buttons instead. Hide
copy/regenerate/clear buttons by default, showing them only on
hover of the text area to prevent overlapping content.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
handoff-20260429-1057
shrimbly 4 months ago
parent
commit
d962ee1eac
  1. 12
      src/components/nodes/LLMGenerateNode.tsx

12
src/components/nodes/LLMGenerateNode.tsx

@ -106,14 +106,14 @@ export function LLMGenerateNode({ id, data, selected }: NodeProps<LLMGenerateNod
<span className="text-white text-xs font-medium">Generation failed</span> <span className="text-white text-xs font-medium">Generation failed</span>
</div> </div>
) : nodeData.outputText ? ( ) : nodeData.outputText ? (
<div className="relative w-full h-full bg-neutral-900/40 p-2 overflow-auto nodrag nopan nowheel"> <div className="group/text relative w-full h-full bg-neutral-900/40 p-2 overflow-auto nowheel">
<p className="text-[10px] text-neutral-300 whitespace-pre-wrap break-words pr-6"> <p className="text-[10px] text-neutral-300 whitespace-pre-wrap break-words">
{nodeData.outputText} {nodeData.outputText}
</p> </p>
<div className="absolute top-1 right-1 flex gap-1"> <div className="absolute top-1 right-1 flex gap-1 opacity-0 group-hover/text:opacity-100 transition-opacity">
<button <button
onClick={handleCopyOutput} onClick={handleCopyOutput}
className={`w-5 h-5 ${copied ? "bg-green-600/80" : "bg-neutral-900/80 hover:bg-neutral-700/80"} rounded flex items-center justify-center text-neutral-400 hover:text-white transition-colors`} className={`nodrag nopan w-5 h-5 ${copied ? "bg-green-600/80" : "bg-neutral-900/80 hover:bg-neutral-700/80"} rounded flex items-center justify-center text-neutral-400 hover:text-white transition-colors`}
title={copied ? "Copied!" : "Copy to clipboard"} title={copied ? "Copied!" : "Copy to clipboard"}
> >
{copied ? ( {copied ? (
@ -129,7 +129,7 @@ export function LLMGenerateNode({ id, data, selected }: NodeProps<LLMGenerateNod
<button <button
onClick={handleRegenerate} onClick={handleRegenerate}
disabled={isRunning} disabled={isRunning}
className="w-5 h-5 bg-neutral-900/80 hover:bg-blue-600/80 disabled:opacity-50 disabled:cursor-not-allowed rounded flex items-center justify-center text-neutral-400 hover:text-white transition-colors" className="nodrag nopan w-5 h-5 bg-neutral-900/80 hover:bg-blue-600/80 disabled:opacity-50 disabled:cursor-not-allowed rounded flex items-center justify-center text-neutral-400 hover:text-white transition-colors"
title="Regenerate" title="Regenerate"
> >
<svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}> <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
@ -138,7 +138,7 @@ export function LLMGenerateNode({ id, data, selected }: NodeProps<LLMGenerateNod
</button> </button>
<button <button
onClick={handleClearOutput} onClick={handleClearOutput}
className="w-5 h-5 bg-neutral-900/80 hover:bg-red-600/80 rounded flex items-center justify-center text-neutral-400 hover:text-white transition-colors" className="nodrag nopan w-5 h-5 bg-neutral-900/80 hover:bg-red-600/80 rounded flex items-center justify-center text-neutral-400 hover:text-white transition-colors"
title="Clear output" title="Clear output"
> >
<svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}> <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>

Loading…
Cancel
Save