diff --git a/src/components/file-preview/MarkdownPreview.tsx b/src/components/file-preview/MarkdownPreview.tsx index c136d1a5..ee421168 100644 --- a/src/components/file-preview/MarkdownPreview.tsx +++ b/src/components/file-preview/MarkdownPreview.tsx @@ -90,7 +90,7 @@ export default function MarkdownPreview({ source, className }: MarkdownPreviewPr ), code: ({ className: codeClass, children, ...props }) => { const match = /language-(\w+)/.exec(codeClass || ''); - const isInline = !match && !codeClass; + const isInline = !match && !codeClass && !String(children).includes('\n'); if (isInline) { return ( + {children} ); diff --git a/src/pages/Chat/ChatMessage.tsx b/src/pages/Chat/ChatMessage.tsx index 3f00449f..41941c04 100644 --- a/src/pages/Chat/ChatMessage.tsx +++ b/src/pages/Chat/ChatMessage.tsx @@ -654,10 +654,10 @@ function AssistantMarkdown({ components={{ code({ className, children, ...props }) { const match = /language-(\w+)/.exec(className || ''); - const isInline = !match && !className; + const isInline = !match && !className && !String(children).includes('\n'); if (isInline) { return ( - + {children} ); diff --git a/tests/e2e/chat-assistant-markdown-plain.spec.ts b/tests/e2e/chat-assistant-markdown-plain.spec.ts index 3d4099d1..086e7eae 100644 --- a/tests/e2e/chat-assistant-markdown-plain.spec.ts +++ b/tests/e2e/chat-assistant-markdown-plain.spec.ts @@ -144,7 +144,10 @@ test.describe('ClawX assistant reply Markdown styling', () => { const assistantProse = page.getByTestId('acp-assistant-message').filter({ hasText: 'Plain Markdown reply' }).locator('.prose').first(); await expect(assistantProse).toBeVisible({ timeout: 30_000 }); await expect(assistantProse.locator('strong')).toHaveText('works'); - await expect(assistantProse.locator('code')).toHaveText('worksToo()'); + const inlineCode = assistantProse.locator('code'); + await expect(inlineCode).toHaveText('worksToo()'); + await expect.poll(() => inlineCode.evaluate((el) => window.getComputedStyle(el).backgroundColor)) + .toBe('rgba(0, 0, 0, 0)'); const assistantStyles = await assistantProse.evaluate((el) => { const style = window.getComputedStyle(el); diff --git a/tests/e2e/chat-code-block-wrap.spec.ts b/tests/e2e/chat-code-block-wrap.spec.ts index 06b6514f..796235bb 100644 --- a/tests/e2e/chat-code-block-wrap.spec.ts +++ b/tests/e2e/chat-code-block-wrap.spec.ts @@ -137,6 +137,8 @@ test.describe('ClawX chat code block wrapping', () => { const codeBlock = assistantProse.locator('pre').first(); await expect(codeBlock).toBeVisible(); + const code = codeBlock.locator('code'); + await expect(code).not.toHaveClass(/bg-black\/5/); const metrics = await codeBlock.evaluate((el) => { const style = window.getComputedStyle(el); @@ -160,6 +162,8 @@ test.describe('ClawX chat code block wrapping', () => { await expect(codeBlock).toContainText(LONG_LOG_LINE); await expect(codeBlock).toContainText(LONG_PATH); + await expect.poll(() => code.evaluate((el) => window.getComputedStyle(el).backgroundColor)) + .toBe('rgba(0, 0, 0, 0)'); } finally { await closeElectronApp(app); } diff --git a/tests/unit/acp-chat-components.test.tsx b/tests/unit/acp-chat-components.test.tsx index 89647749..83481c60 100644 --- a/tests/unit/acp-chat-components.test.tsx +++ b/tests/unit/acp-chat-components.test.tsx @@ -89,6 +89,29 @@ describe('ACP chat timeline components', () => { useArtifactPanel.setState({ open: false, tab: 'changes', focusedFile: null }); }); + it('does not apply background highlighting to chat code', () => { + const state = snapshot({ + itemOrder: ['msg-a:0'], + itemsById: { + 'msg-a:0': { + kind: 'message-segment', + id: 'msg-a:0', + role: 'assistant', + messageId: 'msg-a', + segmentIndex: 0, + parts: [{ kind: 'markdown', text: '```\nAGENTS\n├── raw/\n└── wiki/\n```\n\nand `inline`' }], + }, + }, + }); + + const { container } = render(); + const blockCode = container.querySelector('pre code'); + const inlineCode = Array.from(container.querySelectorAll('code')).find((element) => element.textContent === 'inline'); + + expect(blockCode).not.toHaveClass('bg-black/5'); + expect(inlineCode).not.toHaveClass('bg-black/5'); + }); + it('renders tool-only turn file controls once after timeline items and routes preview and changes', () => { const state = snapshot({ itemOrder: ['tool:write-file'],