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 (
+ + + + e.preventDefault()} + onClick={handleOpenDiffClick} + aria-label={i18n.t("ui.messagePart.openInDiffViewer")} + /> + + + } > diff --git a/packages/ui/src/i18n/en.ts b/packages/ui/src/i18n/en.ts index 4ed9e9c01b6..04f73ba4b93 100644 --- a/packages/ui/src/i18n/en.ts +++ b/packages/ui/src/i18n/en.ts @@ -73,6 +73,7 @@ export const dict: Record = { "ui.messagePart.mcp.output": "Output", "ui.messagePart.title.edit": "Edit", "ui.messagePart.title.write": "Write", + "ui.messagePart.openInDiffViewer": "Open in Diff Viewer", "ui.messagePart.option.typeOwnAnswer": "Type your own answer", "ui.messagePart.review.title": "Review your answers", "ui.messagePart.questions.dismissed": "Questions dismissed",