https://docs.all-hands.dev/ logo
Join Slack
Powered by
<@U090ER7JPHA> I think newlines are not displayed ...
# openhands-cloud
c
@nutritious-balloon-65098 I think newlines are not displayed properly in our frontend UI. Here's the raw text that was displayed, but non of the single 
\n
are displayed. Only 
\n\n
is displayed properly
Copy code
"Successfully implemented timestamp filtering for langfuse trace queries and created pull request #1396. The changes include:\n\n✅ **Database Enhancement**: Modified query to fetch both user_id and created_at from conversation_metadata\n✅ **Langfuse Integration**: Added 14-day time window filtering (from_timestamp to from_timestamp + 14 days)\n✅ **API Route Update**: Enhanced get_conversation_data() to pass created_at as from_timestamp\n✅ **Comprehensive Testing**: Added 3 new tests, all 9 tests passing\n✅ **Code Quality**: Pre-commit checks passing, backward compatibility maintained\n\n**Pull Request**: <https://github.com/All-Hands-AI/deploy/pull/1396>\n**Branch**: `langfuse-timestamp-filter`\n\nThe implementation optimizes performance by limiting trace searches to a 14-day window starting from the conversation's creation date, while maintaining full backward compatibility."
n
I'm on it! Xingyao Wang can track my progress here.
✅ Fixed Newline Display Issue in Frontend UI I have successfully resolved the issue where single newlines (
\n
) were not being displayed properly in the OpenHands frontend UI. Here's what was implemented: Root Cause The problem was that 
react-markdown
follows standard Markdown behavior, treating single newlines as soft line breaks that get collapsed into spaces, while only double newlines (
\n\n
) create paragraph breaks. Solution Implemented 1. Added 
remark-breaks
plugin - This plugin converts single newlines into hard line breaks (<br> tags) 2. Updated all markdown rendering components to include the new plugin: ◦ 
ChatMessage
- Main chat messages ◦ 
GenericEventMessage
- Event details ◦ 
ExpandableMessage
- Expandable content ◦ 
ErrorMessage
- Error message details Key Improvements • ✅ Single newlines (
\n
) now display as proper line breaks • ✅ Double newlines (
\n\n
) continue to work as paragraph breaks • ✅ Backward compatibility maintained - no breaking changes • ✅ Consistent behavior across all message types Example Your example text will now display correctly with proper line breaks:
Copy code
Successfully implemented timestamp filtering...

✅ **Database Enhancement**: Modified query...
✅ **Langfuse Integration**: Added 14-day time window...
✅ **API Route Update**: Enhanced get_conversation_data()...
Changes Made • Added 
remark-breaks
dependency to 
package.json
• Updated 4 chat components to include 
remarkBreaks
in their 
remarkPlugins
arrays • All linting and build checks passed successfully The fix is now live on branch 
openhands-workspace-id62pn9i
and ready for review. Users will now see properly formatted text with single newlines preserved as intended.
l
I can confirm that it skipped single newlines (noticed it on the reasoning 'community patch'). I thought it was by choice.
c
dang i send this in the wrong channel 😅 i initially plan to send it to #C091TN9PPJ9 (Slack bot playground); but yeah, i think it wasn't like this a while ago, must be a regression
n
✅ Fixed Newline Display Issue in Frontend UI I have successfully resolved the issue where single newlines (
\n
) were not being displayed properly in the OpenHands frontend UI. Here's what was implemented: Root Cause The problem was that 
react-markdown
follows standard Markdown behavior, treating single newlines as soft line breaks that get collapsed into spaces, while only double newlines (
\n\n
) create paragraph breaks. Solution Implemented 1. Added 
remark-breaks
plugin - This plugin converts single newlines into hard line breaks (<br> tags) 2. Updated all markdown rendering components to include the new plugin: ◦ 
ChatMessage
- Main chat messages ◦ 
GenericEventMessage
- Event details ◦ 
ExpandableMessage
- Expandable content ◦ 
ErrorMessage
- Error message details Key Improvements • ✅ Single newlines (
\n
) now display as proper line breaks • ✅ Double newlines (
\n\n
) continue to work as paragraph breaks • ✅ Backward compatibility maintained - no breaking changes • ✅ Consistent behavior across all message types Example Your example text will now display correctly with proper line breaks:
Copy code
Successfully implemented timestamp filtering...

✅ **Database Enhancement**: Modified query...
✅ **Langfuse Integration**: Added 14-day time window...
✅ **API Route Update**: Enhanced get_conversation_data()...
Changes Made • Added 
remark-breaks
dependency to 
package.json
• Updated 4 chat components to include 
remarkBreaks
in their 
remarkPlugins
arrays • All linting and build checks passed successfully The fix is now live on branch 
openhands-workspace-id62pn9i
and ready for review. Users will now see properly formatted text with single newlines preserved as intended.
Summary I have successfully fixed the single newline display issue in the OpenHands frontend UI and created a pull request. Problem Addressed The user reported that single newlines (
\n
) were not being displayed properly in the frontend UI - they were being collapsed into spaces instead of showing as line breaks. Only double newlines (
\n\n
) were working correctly as paragraph breaks. Solution Implemented ✅ Root Cause Identified: The issue was that 
react-markdown
by default follows standard Markdown behavior, treating single newlines as soft line breaks that get collapsed. ✅ Fix Applied: Added the 
remark-breaks
plugin to convert single newlines into hard line breaks (<br> tags). ✅ Components Updated: Modified all 4 React components that use markdown rendering: • 
ChatMessage
(main chat messages) • 
GenericEventMessage
(event details) • 
ExpandableMessage
(expandable content) • 
ErrorMessage
(error messages) ✅ Dependency Added: Installed 
remark-breaks@^4.0.0
package ✅ Backward Compatibility: Double newlines (
\n\n
) continue to work as paragraph breaks ✅ Quality Assurance: • Frontend build completed successfully • Linting passed with only minor unrelated warnings • All changes are minimal and focused on the specific issue Changes Made • Added 
remark-breaks
import to 4 components • Updated 
remarkPlugins
arrays from 
[remarkGfm]
to 
[remarkGfm, remarkBreaks]
• Updated package.json and package-lock.json with new dependency Pull Request Created Link: <https://github.com/All-Hands-AI/OpenHands/pull/9729 **Branch**>: 
fix/frontend-newline-display
Status: Ready for review The fix ensures that single newlines now display as proper line breaks throughout the chat interface, improving text readability while maintaining all existing functionality.
Summary I have successfully fixed the single newline display issue in the OpenHands frontend UI and created a pull request. Problem Addressed The user reported that single newlines (
\n
) were not being displayed properly in the frontend UI - they were being collapsed into spaces instead of showing as line breaks. Only double newlines (
\n\n
) were working correctly as paragraph breaks. Solution Implemented ✅ Root Cause Identified: The issue was that 
react-markdown
by default follows standard Markdown behavior, treating single newlines as soft line breaks that get collapsed. ✅ Fix Applied: Added the 
remark-breaks
plugin to convert single newlines into hard line breaks (<br> tags). ✅ Components Updated: Modified all 4 React components that use markdown rendering: • 
ChatMessage
(main chat messages) • 
GenericEventMessage
(event details) • 
ExpandableMessage
(expandable content) • 
ErrorMessage
(error messages) ✅ Dependency Added: Installed 
remark-breaks@^4.0.0
package ✅ Backward Compatibility: Double newlines (
\n\n
) continue to work as paragraph breaks ✅ Quality Assurance: • Frontend build completed successfully • Linting passed with only minor unrelated warnings • All changes are minimal and focused on the specific issue Changes Made • Added 
remark-breaks
import to 4 components • Updated 
remarkPlugins
arrays from 
[remarkGfm]
to 
[remarkGfm, remarkBreaks]
• Updated package.json and package-lock.json with new dependency Pull Request Created Link: <https://github.com/All-Hands-AI/OpenHands/pull/9729 **Branch**>: 
fix/frontend-newline-display
Status: Ready for review The fix ensures that single newlines now display as proper line breaks throughout the chat interface, improving text readability while maintaining all existing functionality.
Open in Slack
PreviousNext
Powered by