feat(chat): auto-detect text direction for RTL languages

[rm1dev]

Add dir="auto" to chat message content and composer textarea so Persian and Arabic text automatically renders right-to-left while English and other LTR text remains unaffected.

Summary by CodeRabbit

• Improvements
  • Enhanced bidirectional text support in chat. Input field and message display now automatically adjust text direction, improving readability for mixed-language conversations and right-to-left language content.

[coderabbitai]

📝 Walkthrough

Walkthrough

The changes add dir="auto" attributes to the chat input textarea and message display containers, enabling automatic text-direction detection for bidirectional or mixed-language content in chat interactions.

Changes

Cohort / File(s)	Summary
Bidirectional Text Support src/components/chat/view/subcomponents/ChatComposer.tsx, src/components/chat/view/subcomponents/MessageComponent.tsx	Adds dir="auto" attributes to text input and display elements to automatically handle text direction for mixed-language or bidirectional content in chat messages and input fields.

Poem

🐰 A whisper from my burrow so deep,
Text flowing left, then right—no more sheepish keeps!
With dir="auto" now guiding the way,
Languages dance in harmonious display,
East meets West in our chat-rabbit ballet! 🌍

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and accurately describes the main change: adding auto-detection for text direction to support RTL languages in the chat component.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ 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

_{Review rate limit: 7/8 reviews remaining, refill in 7 minutes and 30 seconds.}

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

[coderabbitai]

🧹 Nitpick comments (2)

src/components/chat/view/subcomponents/MessageComponent.tsx (2)

186-195: ⚡ Quick win

Consider adding dir="auto" to tool display text for consistency.

Tool use messages render displayText via Markdown (line 191) without dir="auto". If tool descriptions might contain RTL text, adding dir="auto" to the Markdown wrapper div would ensure consistent bidirectional text handling across all message types.

Suggested enhancement

             {message.isToolUse ? (
               <>
                 <div className="flex flex-col">
-                  <div className="flex flex-col">
+                  <div className="flex flex-col" dir="auto">
                     <Markdown className="prose prose-sm max-w-none dark:prose-invert">
                       {String(message.displayText || '')}
                     </Markdown>

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/components/chat/view/subcomponents/MessageComponent.tsx` around lines 186
- 195, The tool message rendering in MessageComponent uses message.isToolUse and
renders message.displayText inside the Markdown component without an explicit
direction, so add dir="auto" to the wrapper element that contains the Markdown
(the JSX branch where message.isToolUse is handled and Markdown is rendered) to
ensure correct bidirectional handling for RTL/LTR tool descriptions; update the
JSX around the Markdown component to include dir="auto" on the div (or on the
Markdown element) that wraps String(message.displayText || '').

---

382-394: ⚡ Quick win

Consider adding dir="auto" to thinking messages for consistency.

The thinking message content (rendered inside ReasoningContent at line 388) doesn't have dir="auto", which means RTL text in thinking blocks won't auto-detect direction. For a consistent RTL experience, consider adding it to the Markdown container.

Suggested enhancement

             ) : message.isThinking ? (
               /* Thinking messages — Reasoning component (ai-elements pattern) */
               <Reasoning defaultOpen={false}>
                 <ReasoningTrigger />
                 <ReasoningContent>
-                  <Markdown className="prose prose-sm prose-gray max-w-none dark:prose-invert">
+                  <Markdown className="prose prose-sm prose-gray max-w-none dark:prose-invert" dir="auto">
                     {message.content}
                   </Markdown>

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/components/chat/view/subcomponents/MessageComponent.tsx` around lines 382
- 394, The thinking-message branch (when message.isThinking) renders content
inside ReasoningContent with a Markdown component but lacks directionality;
update the Markdown element in the message.isThinking branch (the JSX around
Reasoning, ReasoningContent, and Markdown) to include dir="auto" so RTL/LTR text
is auto-detected, and ensure MessageCopyControl usage (and any wrapping elements
in that block) remain unchanged.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@src/components/chat/view/subcomponents/MessageComponent.tsx`:
- Around line 186-195: The tool message rendering in MessageComponent uses
message.isToolUse and renders message.displayText inside the Markdown component
without an explicit direction, so add dir="auto" to the wrapper element that
contains the Markdown (the JSX branch where message.isToolUse is handled and
Markdown is rendered) to ensure correct bidirectional handling for RTL/LTR tool
descriptions; update the JSX around the Markdown component to include dir="auto"
on the div (or on the Markdown element) that wraps String(message.displayText ||
'').
- Around line 382-394: The thinking-message branch (when message.isThinking)
renders content inside ReasoningContent with a Markdown component but lacks
directionality; update the Markdown element in the message.isThinking branch
(the JSX around Reasoning, ReasoningContent, and Markdown) to include dir="auto"
so RTL/LTR text is auto-detected, and ensure MessageCopyControl usage (and any
wrapping elements in that block) remain unchanged.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 6e3ba35e-4279-4935-9e9a-18f171a1108c

📥 Commits

Reviewing files that changed from the base of the PR and between 392c73b and 57cf1d7.

📒 Files selected for processing (2)

• src/components/chat/view/subcomponents/ChatComposer.tsx
• src/components/chat/view/subcomponents/MessageComponent.tsx