fix(ui): remove trailing code delimiters from markdown content

[monotykamary]

Context

Trailing code delimiters (like "tool_code" or "xml") are sometimes displayed in the markdown content when rendered in the ChatRowContent component. This is particularly common with content generated by the Gemini 2.0 thinking model. These delimiters are not meant to be displayed to the user and can make the UI look unpolished.

Implementation

The implementation adds a regex-based cleaning function in the Markdown component that removes trailing code block delimiters at the end of markdown strings. The function is implemented using useMemo for performance optimization, ensuring it only runs when the markdown content changes.

The regex pattern /```[a-zA-Z0-9_-]*\s*$/g specifically targets only trailing delimiters at the very end of the content, preserving code blocks in the middle of the content.

Screenshots

Before:

```xml

After:

How to Test

1. Open a chat with Roo using Gemini 2.0 Thinking
2. Ask a question that would result in a code block response (e.g., "Write a React component")
3. Observe that there are no trailing code delimiters at the end of the response
4. For more direct testing, you can modify the markdown content in the ChatRowContent component to include trailing delimiters and verify they are removed

Get in Touch

If you have any questions or need clarification, please reach out on the Roo Code Discord.

[changeset-bot]

⚠️ No Changeset found

Latest commit: c159708

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[cte]

Nice! I like this change, but I'm wondering if we should try to drop in the Markdown component that I added here: https://github.com/RooVetGit/Roo-Code/blob/main/webview-ui/src/components/ui/markdown/Markdown.tsx

I think it might properly parse out the language hint and use the correct syntax highlighting. It also supports themes in it's syntax highlighting. I've been meaning to integrate it but haven't gotten around to it.

[monotykamary]

I did try something like this on the Markdown component, but it didn't remove that pesky line 🤔:

export function Markdown({ content }: { content: string }) {
  // Clean trailing code delimiters internally
  const cleanedContent = content ? content.replace(/```[a-zA-Z0-9_-]*\s*$/g, "") : content;
  
  return (
    <MemoizedReactMarkdown
      remarkPlugins={[remarkGfm]}
      className="custom-markdown break-words"
      components={{
        // ... existing components
      }}>
      {cleanedContent}
    </MemoizedReactMarkdown>
  )
}

[daniel-lxs]

Hey @monotykamary,
Thank you for your contribution, We noticed this PR is stale and will be closed. If you plan to revisit this, please create an issue first as required by our issue-first approach before opening a new PR.