[BUG] MDX Code Block Breaks UI Rendering When Closing Code Snippet

[kcsanjeeb]

Bug Description
When generating an MDX file with code snippets, the output causes the MDX format to break, and instead of rendering properly, the raw MDX content is displayed in the UI view. This issue occurs after certain parts of the code snippet are generated, particularly when special characters or multi-line code blocks are involved.

Steps To Reproduce

• Ask the AI to generate an MDX file that explains a process with code snippets included.
• Example question: Generate an MDX file that explains the process of deploying a React app with a Node.js backend, including the code snippets for both parts.
• The AI generates the MDX file with the explanation and code snippets.
• After the code snippet is included, the MDX file structure breaks, and instead of rendering as formatted MDX content, the raw MDX syntax is displayed in the UI, causing it to look unformatted.

Expected behavior

• MDX file generation: The MDX file should not break and should render correctly in the UI. Instead of showing the raw MDX code, the generated content should be structured and formatted as MDX, with the appropriate code snippets properly enclosed.
• The code snippet should start with the correct Markdown syntax with triple backticks (```bash).
• The code block should close properly using the triple backticks (```) at the end of the snippet, ensuring the correct rendering of the code block within the MDX file.
• UI Rendering: The UI should not display raw MDX content. Instead, the code snippet should be displayed properly in the intended layout, with syntax highlighting and proper indentation, just like any other Markdown file. The file should render cleanly in the UI, and the code blocks should be displayed as preformatted text.

Screenshots

Additional context

• Problem Identification: The issue occurs specifically when the AI generates the code block. While the MDX file begins rendering fine with a pre tag and proper indentation, the MDX file breaks when it reaches the code snippet block, especially when the closing backticks ``` are not processed correctly. This causes the entire MDX file to break, and instead of rendering the formatted answer, the UI displays the raw MDX syntax.
• This problem is also with other AI chatbots. But i want deepseek to fix it first.