tree d606847a802b46013eb99f6881084498c774beb3
parent c3ecabb720cbf3fa7bf1372ec8ed449f0b9a4b91
author Philip Zeyliger <philip@bold.dev> 1749254720 +0000
committer Philip Zeyliger <philip@bold.dev> 1749269573 +0000

webui: add markdown rendering to mobile chat messages

Add comprehensive markdown support to mobile agent messages matching
desktop functionality with mobile-optimized styling and performance.

Problem Analysis:
Mobile webui was displaying agent messages as plain text while desktop
version rendered rich markdown content including code blocks, headers,
lists, and formatting. This created inconsistent user experience where
mobile users lost important formatting context, making code examples
and structured responses harder to read and understand.

Implementation Changes:

1. Markdown Library Integration:
   - Added marked library import for markdown parsing
   - Integrated DOMPurify for HTML sanitization security
   - Added unsafeHTML directive for rendering parsed content
   - Reused desktop markdown parsing patterns for consistency

2. Mobile-Optimized Rendering:
   - Created simplified renderer without complex features like Mermaid
   - Focused on essential markdown elements: headers, code, lists, links
   - Maintained security through DOMPurify sanitization
   - Preserved plain text rendering for user messages

3. Responsive Typography:
   - Mobile-specific font sizes for headers (1.05em - 1.2em range)
   - Optimized code block styling with horizontal scroll
   - Touch-friendly spacing and line heights
   - Compact margins for small screen readability

4. Content Styling:
   - Subtle code highlighting with background colors
   - Proper blockquote styling with left border
   - List indentation optimized for mobile viewing
   - Link styling that maintains message bubble aesthetics

Technical Details:
- Uses marked.parse() with GFM and breaks enabled for GitHub compatibility
- DOMPurify whitelist approach for security (HTML tags and attributes)
- Conditional rendering: markdown for assistant, plain text for user
- CSS optimized for mobile viewport constraints and touch interaction

Benefits:
- Consistent markdown experience across desktop and mobile
- Improved readability of code examples and structured content
- Maintained security through proper HTML sanitization
- Mobile-optimized styling for touch interfaces
- Better user experience for technical discussions

Testing:
- Verified markdown parsing works with common elements
- Confirmed code blocks render properly with scroll
- Tested security sanitization prevents XSS
- Validated mobile typography and spacing

This enhancement brings mobile webui markdown rendering to feature
parity with desktop while maintaining mobile-specific optimizations.

Co-Authored-By: sketch <hello@sketch.dev>
Change-ID: s99e90082addd4eadk