Add RTL support for chat messages

[gurfi1]

What Changed

Added dir="auto" to message text containers in both user and assistant messages:

• UserMessageBody in MessagesTimeline.tsx (all 3 text rendering paths)
• ChatMarkdown wrapper div in ChatMarkdown.tsx

Before:

After:

Here's a video explaining the changes:

t3code-pr-video.mp4

Why

Messages in RTL languages (Arabic, Hebrew, Persian, etc.) displayed with incorrect LTR alignment, making them hard to read. The HTML dir="auto" attribute uses the browser's built-in Unicode Bidi Algorithm to detect the first strong directional character and set text direction automatically - no custom detection logic needed. LTR messages are unaffected.

Checklist

• Changes are minimal and focused

• No new dependencies added

• Works for both web and desktop (shared components)

• This PR is small and focused

• I explained what changed and why

• I included before/after screenshots for any UI changes

• I included a video for animation/interaction changes

---

Note

Low Risk
Low risk UI-only change: adds dir="auto" to chat message containers to improve RTL rendering without touching message logic or data handling.

Overview
Adds dir="auto" to the top-level assistant markdown wrapper (ChatMarkdown) and to all user message text rendering paths in UserMessageBody (MessagesTimeline).

This enables browser-native bidirectional text detection so RTL messages align/read correctly while leaving existing styling and content rendering intact.

^{Written by Cursor Bugbot for commit 195d2e2. This will update automatically on new commits. Configure here.}

Note

Add RTL support for chat message rendering

Adds dir="auto" to container elements in ChatMarkdown.tsx and MessagesTimeline.tsx so the browser automatically detects text direction for each message. This ensures RTL languages (e.g. Arabic, Hebrew) display correctly without any user configuration.

^{Macroscope summarized 195d2e2.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: ae9c2464-875b-41c2-91e2-759ed2e99951

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}