Render markdown in questions (#184)

Author: mrubens

apps/web/package.json

@@ -63,6 +63,7 @@
     "react-markdown": "^10.1.0",
     "react-use": "^17.6.0",
     "recharts": "^2.15.3",
+    "rehype-sanitize": "^6.0.0",
     "remark-breaks": "^4.0.0",
     "require-in-the-middle": "^7.5.2",
     "shiki": "^3.7.0",

apps/web/src/app/(authenticated)/usage/Messages.tsx

@@ -1,6 +1,7 @@
 import { useMemo, useEffect, useState } from 'react';
 import ReactMarkdown from 'react-markdown';
 import remarkBreaks from 'remark-breaks';
+import rehypeSanitize from 'rehype-sanitize';
 import { Link2 } from 'lucide-react';
 import { toast } from 'sonner';
 
@@ -284,8 +285,17 @@ export const Messages = ({
                 {isQuestion && questionData ? (
                   <div className="space-y-4">
                     {questionData.question && (
-                      <div className="text-sm leading-relaxed">
-                        {questionData.question}
+                      <div className="text-sm leading-relaxed markdown-prose">
+                        <ReactMarkdown
+                          remarkPlugins={[remarkBreaks]}
+                          rehypePlugins={[rehypeSanitize]}
+                          components={{
+                            a: PlainTextLink,
+                            code: CodeBlock,
+                          }}
+                        >
+                          {questionData.question}
+                        </ReactMarkdown>
                       </div>
                     )}
                     {questionData.suggestions &&
@@ -314,6 +324,7 @@ export const Messages = ({
                   <div className="text-sm leading-relaxed markdown-prose">
                     <ReactMarkdown
                       remarkPlugins={[remarkBreaks]}
+                      rehypePlugins={[rehypeSanitize]}
                       components={{
                         a: PlainTextLink,
                         code: CodeBlock,

apps/web/src/components/ui/__tests__/Messages.test.tsx

@@ -94,4 +94,45 @@ describe('Messages Component - Newline Handling', () => {
     expect(commandContainer).toBeInTheDocument();
     expect(commandContainer.closest('.font-mono')).toBeInTheDocument();
   });
+
+  it('should handle question data with newlines in the question text', () => {
+    const questionMessage: Message = {
+      id: '1',
+      orgId: null,
+      userId: 'test-user',
+      taskId: 'test-task',
+      text: JSON.stringify({
+        question:
+          'What would you like to do?\nPlease choose from the options below:\n\n1. Option A\n2. Option B',
+        suggest: ['Option A', 'Option B'],
+      }),
+      timestamp: Date.now(),
+      ts: Date.now(),
+      type: 'ask',
+      say: null,
+      ask: 'followup',
+      mode: 'code',
+      reasoning: null,
+      partial: null,
+    };
+
+    render(<Messages messages={[questionMessage]} />);
+
+    // Question text should be present and properly formatted
+    expect(screen.getByText(/What would you like to do/)).toBeInTheDocument();
+    expect(
+      screen.getByText(/Please choose from the options below/),
+    ).toBeInTheDocument();
+
+    // Should find both the list items and suggestion buttons (multiple instances expected)
+    const optionAElements = screen.getAllByText(/Option A/);
+    const optionBElements = screen.getAllByText(/Option B/);
+
+    // Should have at least 2 instances of each option (one in markdown list, one in suggestion button)
+    expect(optionAElements.length).toBeGreaterThanOrEqual(2);
+    expect(optionBElements.length).toBeGreaterThanOrEqual(2);
+
+    // Verify the markdown rendered the numbered list properly
+    expect(screen.getByRole('list')).toBeInTheDocument();
+  });
 });