diff --git a/packages/ui/src/components/tool-call.tsx b/packages/ui/src/components/tool-call.tsx index f03c1695..3d6b9127 100644 --- a/packages/ui/src/components/tool-call.tsx +++ b/packages/ui/src/components/tool-call.tsx @@ -583,6 +583,55 @@ function ToolCallDetails(props: { ) + const renderOutputActions = (options: { + language?: () => string | null | undefined + copyText?: () => string | null | undefined + actions?: () => JSXElement + wrapToggle?: () => boolean | undefined + }) => ( +
+ + {(language) => {language()}} + + + + + {(actions) => {actions()}} + + + + {(copyText) => ( + + )} + + + + + + +
+ ) + const renderToolOutputBody = () => { const body = renderToolBody() const error = renderError() @@ -596,19 +645,14 @@ function ToolCallDetails(props: { if (chrome.wrapToggle) { return (
-
- {renderIoHeader({ - title: () => chrome.title || props.t("toolCall.io.output"), + {renderOutputActions({ language: () => outputChrome().language, - expanded: props.outputSectionExpanded, - onToggle: props.toggleOutputSection, copyText: () => outputChrome().copyText, actions: () => outputChrome().actions, wrapToggle: () => outputChrome().wrapToggle, })} - -
+
{body} {error} @@ -618,8 +662,6 @@ function ToolCallDetails(props: { {props.t("toolCall.pending.waitingToRun")}
-
-
) diff --git a/packages/ui/src/styles/messaging/tool-call.css b/packages/ui/src/styles/messaging/tool-call.css index edfc20bd..5f871b9f 100644 --- a/packages/ui/src/styles/messaging/tool-call.css +++ b/packages/ui/src/styles/messaging/tool-call.css @@ -386,6 +386,47 @@ color: var(--text-primary); } +.tool-call-output-actions { + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--space-xs); + min-height: 1.6rem; + padding-inline-start: var(--space-sm); + padding-inline-end: var(--space-sm); + background-color: var(--surface-secondary); + border-bottom: 1px solid var(--tool-call-body-border-color, var(--border-base)); +} + +.tool-call-output-language { + flex: 0 1 auto; + min-width: 0; + font-family: var(--message-part-header-font-family); + font-size: var(--message-part-header-type-font-size); + font-weight: var(--message-part-header-type-font-weight); + line-height: var(--message-part-header-title-line-height); + color: var(--text-primary); + text-transform: uppercase; + letter-spacing: 0.04em; +} + +.tool-call-output-action-buttons { + display: inline-flex; + align-items: center; + justify-content: flex-end; + gap: var(--space-xs); + flex: 0 0 auto; +} + +.tool-call-output-copy, +.tool-call-output-wrap { + margin-inline-end: 0; +} + +.tool-call-output-wrap.active { + color: var(--text-primary); +} + .tool-call-io-body { background-color: var(--surface-code); }