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 that relies on browser dir="auto" behavior; potential issues are limited to chat text layout in edge cases.

Overview
Improves RTL rendering in chat by adding dir="auto" to key message text containers, including user message bodies (MessagesTimeline.tsx) and common markdown block elements (ChatMarkdown.tsx).

Updates chat markdown styling to use logical CSS properties (padding-inline-start, border-inline-start) so list indentation and blockquote borders adapt correctly to LTR/RTL direction.

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

Note

Add RTL support for chat messages using dir="auto"

• Adds dir="auto" to block-level elements (p, headings, li, blockquote) in ChatMarkdown.tsx, letting the browser detect text direction per element.
• Adds dir="auto" to user message body containers in MessagesTimeline.tsx.
• Replaces padding-left/border-left with logical CSS properties (padding-inline-start, border-inline-start) in index.css so list and blockquote styles adapt to writing direction.

^{Macroscope summarized 0d33c10.}

[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: e41c9b36-520e-4f97-8d88-b0c85546ce3d

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.}

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}