Context

The Markdown rendering previously used for chat messages (primarily via ChatRow.tsx) was incomplete and failed to render several standard Markdown elements correctly. Notably, list markers (both unordered bullets and ordered numbers) were not displayed, and GFM elements like tables appeared as unformatted plain text.

After switching to a more standard-compliant Markdown renderer (@/components/ui/markdown/Markdown.tsx) to address these fundamental rendering issues, further visual inconsistencies were observed compared to the previous implementation. These included differences in list indentation depth, bold text weight, and the styling (background, font, padding, border, alignment) of inline code blocks.

The primary root cause was the use of an incomplete and non-standard Markdown renderer (MarkdownBlock.tsx) in the main chat message rendering path. Secondary styling issues arose from the inherent visual differences between the old styled-components -based styling and the new Tailwind CSS-based styling after switching to the standard renderer.

Implementation

• Identified two distinct Markdown rendering implementations:
  • @/components/common/MarkdownBlock.tsx: Used react-remark and styled-components. This implementation lacked complete CommonMark support (missing list markers) and GFM support (no tables). It had custom styling, auto-URL linking, and Mermaid support.
  • @/components/ui/markdown/Markdown.tsx: Uses react-markdown with remark-gfm and Tailwind CSS. Provides more robust and standard-compliant Markdown rendering, including GFM features.
• Determined that ChatRow.tsx, responsible for rendering many chat messages, was incorrectly relying on the limited MarkdownBlock.tsx implementation.
• Solution Part 1 (Core Fix): Refactored ChatRow.tsx to consistently use the shared, standard-compliant @/components/ui/markdown/Markdown.tsx component. This resolved the fundamental rendering issues for lists, tables, and other standard elements.
• Solution Part 2 (Styling Adjustments): Fine-tuned the Tailwind CSS classes within the shared @/components/ui/markdown/Markdown.tsx component to address visual discrepancies introduced by the renderer switch. Adjustments included list indentation (pl-[2.5em]), bold weight (font-semibold), inline code styling (background, color, padding, border, font, alignment), and ensuring the base font size uses var(--vscode-font-size).
• Solution Part 3 (UI Feature Restoration): Re-implemented the hover-to-copy functionality and specific negative vertical margins (originally present in ChatRow.tsx 's local wrapper) by creating a new wrapper component (MarkdownWithCopy) within ChatRow.tsx around the shared <Markdown /> component. This restored specific UI interactions and layout nuances desired for chat messages.

The solution involved replacing the deficient renderer with a standard-compliant one (react-markdown + remark-gfm), unifying the Markdown implementation used by ChatRow.tsx. Subsequently, styles were adjusted in the shared component, and specific UI features/layout wrappers were reintroduced in the calling component (ChatRow.tsx) to achieve functional and visual consistency with the intended design.

Screenshots

before:

after:

before:

after:

How to Test

To Reproduce
Steps to reproduce the behavior:

1. Send a message to the Roo Code assistant containing a Markdown table (e.g., using pipe syntax).
2. Observe the message rendered in the chat view (likely via ChatRow.tsx).
3. Notice the table is not formatted.
4. (After initial fix attempts) Observe other Markdown elements like lists, bold text, and inline code blocks and compare their styling to previous versions or other parts of the UI.

Expected behavior

• Markdown tables should render as structured tables with appropriate borders and padding.
• List indentation should be consistent and sufficiently deep for readability.
• Bold text should have a standard, readable weight (e.g., font-semibold).
• Inline code blocks should have a distinct background color (matching --vscode-textCodeBlock-background), appropriate padding, border, font, and alignment consistent with the surrounding text.

Get in Touch

[email protected]