tree 7a359884219f736a0da706f098d277d6713d8fad
parent 209ea91bc220b945936250f8aecd9d69974e0ada
author philip.zeyliger <philip.zeyliger@gmail.com> 1749507805 +0000
committer Autoformatter <bot@sketch.dev> 1749507872 +0000

webui: fix mobile error message styling to display in red

Add proper red styling for error messages in mobile chat interface to match
desktop behavior and fix GitHub issue #141.

Problem Analysis:
Mobile error messages lacked visual distinction from regular messages, appearing
with the same gray background as assistant messages. The desktop interface
properly displays error messages with red background (#ffebee) and red text
(#d32f2f), but the mobile-chat component was missing this styling, creating
inconsistent user experience across interfaces.

The mobile chat component correctly filtered error messages (type: 'error')
and displayed them, but the getMessageRole() method didn't handle error types,
defaulting them to 'assistant' styling.

Implementation Changes:

1. CSS Error Message Styling:
   - Added .message.error .message-bubble styles with red theme
   - Background: #ffebee (light red background matching desktop)
   - Text color: #d32f2f (dark red text for readability)
   - Border-radius: 18px (uniform rounding for clean appearance)
   - Maintains mobile-optimized layout and touch-friendly design

2. Message Role Classification:
   - Enhanced getMessageRole() method to properly handle error message types
   - Added explicit 'error' case returning 'error' class name
   - Ensures error messages receive proper CSS class assignment

3. Test Coverage:
   - Added comprehensive mobile-chat component tests
   - Specific test for error message red styling verification
   - CSS color validation using computed styles
   - Message filtering and rendering tests for all message types

Technical Details:
- Styling follows existing mobile component patterns with touch-friendly design
- Color scheme matches desktop timeline-message component for consistency
- Error messages maintain left alignment like other system messages
- Clean, uniformly rounded corners without extra borders for polished appearance

Benefits:
- Visual consistency between desktop and mobile error message presentation
- Clear error message identification for mobile users
- Improved accessibility with distinct error styling
- Maintains touch-friendly mobile design principles
- Clean, professional appearance without visual clutter
- Resolves GitHub issue #141 mobile error visibility

Testing:
- Added mobile-chat.test.ts with error message styling verification
- TypeScript compilation successful with no type errors
- Build process completes without warnings
- CSS computed style validation confirms red color application

This fix ensures error messages are visually distinctive on mobile devices,
providing users with clear feedback when errors occur while maintaining
the clean, touch-optimized mobile interface design.

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