From 63ed6e2dd69e36e8a8221a8735fa91f18e8b14a4 Mon Sep 17 00:00:00 2001
From: Prakhar Pandey <prakhar9999pandey@gmail.com>
Date: Thu, 16 Jul 2026 14:08:35 +0530
Subject: [PATCH] fix: auto-detect text direction for RTL/BiDi chat content

Refs #749
---
 apps/x/apps/renderer/src/App.css                           | 7 +++++++
 .../src/components/ai-elements/ask-human-request.tsx       | 1 +
 .../x/apps/renderer/src/components/ai-elements/message.tsx | 2 +-
 .../renderer/src/components/ai-elements/prompt-input.tsx   | 2 ++
 4 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/apps/x/apps/renderer/src/App.css b/apps/x/apps/renderer/src/App.css
index 6a7b644a..899aa433 100644
--- a/apps/x/apps/renderer/src/App.css
+++ b/apps/x/apps/renderer/src/App.css
@@ -1445,3 +1445,10 @@
     transform: translateX(-120%);
   }
 }
+
+/* Issue #749: BiDi. unicode-bidi:plaintext resolves direction PER BLOCK from
+   its first strong character, so a message mixing English + RTL paragraphs
+   aligns each block correctly. text-align:start follows the resolved dir. */
+.bidi-auto :is(p,h1,h2,h3,h4,h5,h6,li,blockquote,td,th){unicode-bidi:plaintext;text-align:start;}
+/* Code is inherently LTR — keep it stable inside RTL messages. */
+.bidi-auto :is(pre,code,kbd,samp){direction:ltr;unicode-bidi:isolate;text-align:left;}
diff --git a/apps/x/apps/renderer/src/components/ai-elements/ask-human-request.tsx b/apps/x/apps/renderer/src/components/ai-elements/ask-human-request.tsx
index 6571e54e..e7358dbc 100644
--- a/apps/x/apps/renderer/src/components/ai-elements/ask-human-request.tsx
+++ b/apps/x/apps/renderer/src/components/ai-elements/ask-human-request.tsx
@@ -94,6 +94,7 @@ export const AskHumanRequest = ({
               <div className="space-y-2">
                 <Textarea
                   ref={textareaRef}
+                  dir="auto"
                   value={response}
                   onChange={(e) => setResponse(e.target.value)}
                   onKeyDown={handleKeyDown}
diff --git a/apps/x/apps/renderer/src/components/ai-elements/message.tsx b/apps/x/apps/renderer/src/components/ai-elements/message.tsx
index fcb5250c..8b124b45 100644
--- a/apps/x/apps/renderer/src/components/ai-elements/message.tsx
+++ b/apps/x/apps/renderer/src/components/ai-elements/message.tsx
@@ -349,7 +349,7 @@ export const MessageResponse = memo(
   ({ className, ...props }: MessageResponseProps) => (
     <Streamdown
       className={cn(
-        "size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0",
+        "size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0 bidi-auto",
         className
       )}
       {...props}
diff --git a/apps/x/apps/renderer/src/components/ai-elements/prompt-input.tsx b/apps/x/apps/renderer/src/components/ai-elements/prompt-input.tsx
index 467547b1..14e01135 100644
--- a/apps/x/apps/renderer/src/components/ai-elements/prompt-input.tsx
+++ b/apps/x/apps/renderer/src/components/ai-elements/prompt-input.tsx
@@ -1162,6 +1162,7 @@ export const PromptInputTextarea = ({
         <div
           ref={highlightRef}
           aria-hidden="true"
+          dir="auto"
           className="pointer-events-none absolute inset-0 z-0 overflow-hidden whitespace-pre-wrap break-words text-sm text-transparent"
         >
           {mentionHighlights.segments.map((segment, index) =>
@@ -1180,6 +1181,7 @@ export const PromptInputTextarea = ({
       )}
       <InputGroupTextarea
         ref={textareaRef}
+        dir="auto"
         className={cn("relative z-10 !p-0 field-sizing-content max-h-48 min-h-10", className)}
         name="message"
         onCompositionEnd={() => setIsComposing(false)}