Skip to content

fix(ui): preserve user message newlines#1588

Merged
esengine merged 1 commit into
esengine:mainfrom
T1anjiu:fix/user-message-preserve-newlines
May 23, 2026
Merged

fix(ui): preserve user message newlines#1588
esengine merged 1 commit into
esengine:mainfrom
T1anjiu:fix/user-message-preserve-newlines

Conversation

@T1anjiu

@T1anjiu T1anjiu commented May 23, 2026

Copy link
Copy Markdown

Summary

Preserve multiline formatting for user message bubbles in the desktop and dashboard chat UI, so text sent with line breaks continues to display as multiple lines after submission.

Problem

When users send multiline messages, the message content itself is preserved, but the rendered user bubble collapses whitespace because the .msg-text style does not preserve line breaks. As a result, newlines are rendered as spaces and multiline user input appears as a single line.

The issue is in the desktop/dashboard message rendering path:

  • desktop/src/ui/thread.tsx renders user messages through UserMsg
  • dashboard/src/ui/thread.tsx renders user messages through UserMsg
  • desktop/src/styles.css and dashboard/src/styles.css styled .msg-text without white-space: pre-wrap
  • TUI/CLI message storage and rendering paths preserve the original user text and do not apply the same CSS whitespace collapsing behavior

Fix

  • desktop/src/styles.css — Added white-space: pre-wrap for .msg.user .msg-text and .msg.user .msg-text.user-pending, preserving user-entered newlines in desktop message bubbles.
  • dashboard/src/styles.css — Added the same user-message-specific whitespace rule for dashboard message bubbles.
  • tests/user-message-newlines.test.ts — Added a regression test that verifies both desktop and dashboard styles include the user bubble whitespace preservation rule.

Verification

Check Result
npm exec vitest run tests/user-message-newlines.test.ts tests/desktop-user-message.test.ts ✅ passes
npm run verify ✅ passes
Commit pre-commit lint hook ✅ passes

Closed #1567

@esengine esengine merged commit d1ca21f into esengine:main May 23, 2026
4 checks passed
@esengine

Copy link
Copy Markdown
Owner

Merged — thanks. One small follow-up if you do another touch in this area: the regression test could be tightened to pin the rule shape, e.g. expect(desktopCss).toMatch(/\.msg\.user\s+\.msg-text[^{]*\{[^}]*white-space:\s*pre-wrap/) so adding white-space: pre-wrap elsewhere (e.g. for code blocks) doesn't accidentally satisfy the test if the user-bubble rule gets deleted. Not blocking; nice to have.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

桌面端用户消息气泡内文本格式失效

2 participants