diff --git a/packages/kilo-ui/src/components/message-part.css b/packages/kilo-ui/src/components/message-part.css index 5b90068c9c6..ba79eec6359 100644 --- a/packages/kilo-ui/src/components/message-part.css +++ b/packages/kilo-ui/src/components/message-part.css @@ -33,6 +33,39 @@ } } +/* Hover-revealed "Open in Diff Viewer" icon button in the edit-tool header */ +[data-component="tool-trigger"] [data-slot="basic-tool-tool-info"]:has([data-component="edit-trigger"]) { + flex: 1 1 auto; +} + +[data-component="edit-trigger"] { + display: flex; + align-items: center; + gap: 8px; + width: 100%; + min-width: 0; + + [data-slot="message-part-title-area"] { + flex: 0 1 auto; + min-width: 0; + overflow: hidden; + } + + [data-slot="edit-trigger-actions"] { + flex-shrink: 0; + margin-left: auto; + display: inline-flex; + align-items: center; + opacity: 0; + transition: opacity 0.15s ease; + } +} + +[data-component="tool-trigger"]:hover [data-slot="edit-trigger-actions"], +[data-slot="edit-trigger-actions"]:focus-within { + opacity: 1; +} + /* Prevent long title/path from hiding the collapsible expand arrow */ [data-component="edit-trigger"], [data-component="write-trigger"] { diff --git a/packages/kilo-ui/src/components/message-part.tsx b/packages/kilo-ui/src/components/message-part.tsx index a41c950863f..3382afade68 100644 --- a/packages/kilo-ui/src/components/message-part.tsx +++ b/packages/kilo-ui/src/components/message-part.tsx @@ -2039,17 +2039,22 @@ ToolRegistry.register({ const canOpenDiff = () => !!data.openDiff && !!path() && (before() !== "" || after() !== "") const canOpenFile = () => !!data.openFile && !!path() + const openDiff = () => { + if (!canOpenDiff()) return + data.openDiff!({ + file: path(), + before: before(), + after: after(), + additions: props.metadata?.filediff?.additions ?? 0, + deletions: props.metadata?.filediff?.deletions ?? 0, + }) + } + const handleFileClick = (e: MouseEvent) => { e.stopPropagation() if (canOpenDiff()) { - data.openDiff!({ - file: path(), - before: before(), - after: after(), - additions: props.metadata?.filediff?.additions ?? 0, - deletions: props.metadata?.filediff?.deletions ?? 0, - }) + openDiff() return } @@ -2058,6 +2063,11 @@ ToolRegistry.register({ } } + const handleOpenDiffClick = (e: MouseEvent) => { + e.stopPropagation() + openDiff() + } + return (