From 3072581814f284a3a092a41d11028eeb29c297b9 Mon Sep 17 00:00:00 2001 From: Charles Teague Date: Wed, 26 Feb 2025 11:42:54 -0500 Subject: [PATCH] Improve tool input / output appearance when rendered in vscode --- CHANGELOG.md | 1 + src/inspect_ai/_view/www/App.css | 4 ++++ src/inspect_ai/_view/www/dist/assets/index.css | 14 +++++++++----- src/inspect_ai/_view/www/dist/assets/index.js | 12 ++++++------ .../_view/www/src/samples/chat/tools/ToolInput.tsx | 2 +- .../src/samples/chat/tools/ToolOutput.module.css | 2 +- .../www/src/samples/chat/tools/ToolOutput.tsx | 2 +- 7 files changed, 23 insertions(+), 14 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 95e221d25..e6fe17789 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -16,6 +16,7 @@ - Bugfix: Fix audio and video inputs for new Google GenAI client. - Bugfix: Ensure that token limits are not enforced during model graded scoring. - Inspect View: Fix layout issues with human agent terminal session playback. +- Inspect View: Improve tool input / output appearance when rendered in VSCode. ## v0.3.70 (25 February 2025) diff --git a/src/inspect_ai/_view/www/App.css b/src/inspect_ai/_view/www/App.css index 94513962e..500569d10 100644 --- a/src/inspect_ai/_view/www/App.css +++ b/src/inspect_ai/_view/www/App.css @@ -805,15 +805,19 @@ table.table.table-sm td { overflow: unset; } +.markdown-content pre[class*="language-"], pre[class*="language-"].tool-output, .tool-output { background-color: #f8f8f8; } + +.vscode-dark .markdown-content pre[class*="language-"], .vscode-dark pre[class*="language-"].tool-output, .vscode-dark .tool-output { background-color: #333333; } +.markdown-content pre[class*="language-"], pre[class*="language-"].tool-output { border: none !important; box-shadow: none !important; diff --git a/src/inspect_ai/_view/www/dist/assets/index.css b/src/inspect_ai/_view/www/dist/assets/index.css index d8f969761..35acbd064 100644 --- a/src/inspect_ai/_view/www/dist/assets/index.css +++ b/src/inspect_ai/_view/www/dist/assets/index.css @@ -15078,15 +15078,19 @@ table.table.table-sm td { overflow: unset; } +.markdown-content pre[class*="language-"], pre[class*="language-"].tool-output, .tool-output { background-color: #f8f8f8; } + +.vscode-dark .markdown-content pre[class*="language-"], .vscode-dark pre[class*="language-"].tool-output, .vscode-dark .tool-output { background-color: #333333; } +.markdown-content pre[class*="language-"], pre[class*="language-"].tool-output { border: none !important; box-shadow: none !important; @@ -15689,23 +15693,23 @@ ul.jsondiffpatch-textdiff { max-width: 800px; border: solid var(--bs-border-color) 1px; } -._toolImage_hw4du_1 { +._toolImage_1j5uu_1 { max-width: 800px; border: solid var(--bs-border-color) 1px; } -._output_hw4du_6 { +._output_1j5uu_6 { display: grid; } -._textOutput_hw4du_10 { - margin-left: 2px; +._textOutput_1j5uu_10 { + padding-left: 2px; padding: 0.5em 0.5em 0.5em 0.5em; white-space: pre-wrap; margin-bottom: 0; } -._textCode_hw4du_17 { +._textCode_1j5uu_17 { word-wrap: anywhere; } ._outputPre_1h1fn_1 { diff --git a/src/inspect_ai/_view/www/dist/assets/index.js b/src/inspect_ai/_view/www/dist/assets/index.js index ad1635d62..f8fe1de8f 100644 --- a/src/inspect_ai/_view/www/dist/assets/index.js +++ b/src/inspect_ai/_view/www/dist/assets/index.js @@ -21335,10 +21335,10 @@ var require_assets = __commonJS({ const styles$11 = { contentImage }; - const toolImage = "_toolImage_hw4du_1"; - const output$1 = "_output_hw4du_6"; - const textOutput = "_textOutput_hw4du_10"; - const textCode = "_textCode_hw4du_17"; + const toolImage = "_toolImage_1j5uu_1"; + const output$1 = "_output_1j5uu_6"; + const textOutput = "_textOutput_1j5uu_10"; + const textCode = "_textCode_1j5uu_17"; const styles$10 = { toolImage, output: output$1, @@ -21380,7 +21380,7 @@ var require_assets = __commonJS({ return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$10.output), children: outputs }); }; const ToolTextOutput = ({ text: text2 }) => { - return /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: clsx(styles$10.textOutput), children: /* @__PURE__ */ jsxRuntimeExports.jsx("code", { className: clsx("sourceCode", styles$10.textCode), children: text2.trim() }) }); + return /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: clsx(styles$10.textOutput, "tool-output"), children: /* @__PURE__ */ jsxRuntimeExports.jsx("code", { className: clsx("sourceCode", styles$10.textCode), children: text2.trim() }) }); }; const MessageContent = ({ contents: contents2 }) => { if (Array.isArray(contents2)) { @@ -21600,7 +21600,7 @@ var require_assets = __commonJS({ { markdown: toolCallView.content, ref: toolViewRef, - className: clsx(styles$$.bottomPadding, "text-size-small") + className: clsx("text-size-small", "tool-output") } ); } diff --git a/src/inspect_ai/_view/www/src/samples/chat/tools/ToolInput.tsx b/src/inspect_ai/_view/www/src/samples/chat/tools/ToolInput.tsx index c474c19ab..d5d82a1f1 100644 --- a/src/inspect_ai/_view/www/src/samples/chat/tools/ToolInput.tsx +++ b/src/inspect_ai/_view/www/src/samples/chat/tools/ToolInput.tsx @@ -49,7 +49,7 @@ export const ToolInput: React.FC = memo((props) => { ); } diff --git a/src/inspect_ai/_view/www/src/samples/chat/tools/ToolOutput.module.css b/src/inspect_ai/_view/www/src/samples/chat/tools/ToolOutput.module.css index 142ac2e35..95764ea55 100644 --- a/src/inspect_ai/_view/www/src/samples/chat/tools/ToolOutput.module.css +++ b/src/inspect_ai/_view/www/src/samples/chat/tools/ToolOutput.module.css @@ -8,7 +8,7 @@ } .textOutput { - margin-left: 2px; + padding-left: 2px; padding: 0.5em 0.5em 0.5em 0.5em; white-space: pre-wrap; margin-bottom: 0; diff --git a/src/inspect_ai/_view/www/src/samples/chat/tools/ToolOutput.tsx b/src/inspect_ai/_view/www/src/samples/chat/tools/ToolOutput.tsx index b508e9fd8..1d2badbcd 100644 --- a/src/inspect_ai/_view/www/src/samples/chat/tools/ToolOutput.tsx +++ b/src/inspect_ai/_view/www/src/samples/chat/tools/ToolOutput.tsx @@ -53,7 +53,7 @@ interface ToolTextOutputProps { */ const ToolTextOutput: React.FC = ({ text }) => { return ( - 
+    
       {text.trim()}
     

   );