feat: add remark-breaks plugin to preserve single newlines in markdown (#4217)

Signed-off-by: Abhijay007 <Abhijay007j@gmail.com>

ui/desktop/src/components/MarkdownContent.test.tsx

@@ -260,4 +260,66 @@ Unclosed code block`;
       });
     });
   });
+
+  describe('Line Break Functionality', () => {
+    it('preserves single line breaks with remark-breaks plugin', async () => {
+      const content = `First line
+Second line
+Third line`;
+
+      const { container } = render(<MarkdownContent content={content} />);
+
+      await waitFor(() => {
+        // Check that all text content is present (text may be split by <br> tags)
+        expect(container).toHaveTextContent('First line');
+        expect(container).toHaveTextContent('Second line');
+        expect(container).toHaveTextContent('Third line');
+      });
+
+      // Check that line breaks are preserved (rendered as <br> tags)
+      const brElements = container.querySelectorAll('br');
+      expect(brElements.length).toBeGreaterThan(0);
+    });
+
+    it('handles mixed content with line breaks', async () => {
+      const content = `# Header
+Paragraph with
+line breaks.
+
+- List item 1
+- List item 2`;
+
+      const { container } = render(<MarkdownContent content={content} />);
+
+      await waitFor(() => {
+        expect(screen.getByRole('heading', { level: 1, name: 'Header' })).toBeInTheDocument();
+
+        // Check that text content is present (text may be split by <br> tags)
+        expect(container).toHaveTextContent('Paragraph with');
+        expect(container).toHaveTextContent('line breaks.');
+        expect(screen.getByText('List item 1')).toBeInTheDocument();
+        expect(screen.getByText('List item 2')).toBeInTheDocument();
+      });
+    });
+
+    it('maintains existing markdown features with line breaks', async () => {
+      const content = `**Bold text**
+with line break
+
+\`code\` and
+more text`;
+
+      const { container } = render(<MarkdownContent content={content} />);
+
+      await waitFor(() => {
+        // Bold text should still work
+        const boldElement = container.querySelector('strong');
+        expect(boldElement).toBeInTheDocument();
+        expect(boldElement).toHaveTextContent('Bold text');
+
+        // Code should still work
+        expect(screen.getByText('code')).toBeInTheDocument();
+      });
+    });
+  });
 });

ui/desktop/src/components/MarkdownContent.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useRef } from 'react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
+import remarkBreaks from 'remark-breaks';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
 import { Check, Copy } from './icons';
@@ -126,7 +127,7 @@ export default function MarkdownContent({ content, className = '' }: MarkdownCon
       prose-li:m-0prose-li:font-sans ${className}`}
     >
       <ReactMarkdown
-        remarkPlugins={[remarkGfm]}
+        remarkPlugins={[remarkGfm, remarkBreaks]}
         components={{
           a: ({ ...props }) => <a {...props} target="_blank" rel="noopener noreferrer" />,
           code: MarkdownCode,