From 81292bb4ddf4360aeefa430738c90cd619db6ebf Mon Sep 17 00:00:00 2001
From: Ghaith AlHallak <59054736+GhaithAlHallak8@users.noreply.github.com>
Date: Thu, 27 Jun 2024 18:56:12 +0400
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A1=20fix:=20Rendering=20of=20Bidirect?=
 =?UTF-8?q?ional=20Text=20(#3195)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The fix has been applied only to key components where the rendering issue is significant
---
 client/src/components/Chat/Messages/Content/Container.tsx    | 5 ++++-
 client/src/components/Chat/Messages/Content/EditMessage.tsx  | 1 +
 .../src/components/Chat/Messages/Content/SearchContent.tsx   | 1 +
 client/src/components/Messages/Content/EditMessage.tsx       | 1 +
 client/src/components/Nav/SearchBar.tsx                      | 1 +
 client/src/components/ui/TextareaAutosize.tsx                | 2 +-
 6 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Chat/Messages/Content/Container.tsx b/client/src/components/Chat/Messages/Content/Container.tsx
index bfb2ee2938..cbd085e308 100644
--- a/client/src/components/Chat/Messages/Content/Container.tsx
+++ b/client/src/components/Chat/Messages/Content/Container.tsx
@@ -2,7 +2,10 @@ import { TMessage } from 'librechat-data-provider';
 import Files from './Files';
 
 const Container = ({ children, message }: { children: React.ReactNode; message: TMessage }) => (
-  <div className="text-message flex min-h-[20px] flex-col items-start gap-3 overflow-x-auto [.text-message+&]:mt-5">
+  <div
+    className="text-message flex min-h-[20px] flex-col items-start gap-3 overflow-x-auto [.text-message+&]:mt-5"
+    dir="auto"
+  >
     {message.isCreatedByUser && <Files message={message} />}
     {children}
   </div>
diff --git a/client/src/components/Chat/Messages/Content/EditMessage.tsx b/client/src/components/Chat/Messages/Content/EditMessage.tsx
index 64e3bead67..8d7c9ffee1 100644
--- a/client/src/components/Chat/Messages/Content/EditMessage.tsx
+++ b/client/src/components/Chat/Messages/Content/EditMessage.tsx
@@ -162,6 +162,7 @@ const EditMessage = ({
           contentEditable={true}
           value={editedText}
           suppressContentEditableWarning={true}
+          dir="auto"
         />
       </div>
       <div className="mt-2 flex w-full justify-center text-center">
diff --git a/client/src/components/Chat/Messages/Content/SearchContent.tsx b/client/src/components/Chat/Messages/Content/SearchContent.tsx
index 109bbb1ebf..754b041d2a 100644
--- a/client/src/components/Chat/Messages/Content/SearchContent.tsx
+++ b/client/src/components/Chat/Messages/Content/SearchContent.tsx
@@ -44,6 +44,7 @@ const SearchContent = ({ message }: { message: TMessage }) => {
         'markdown prose dark:prose-invert light w-full break-words',
         message.isCreatedByUser ? 'whitespace-pre-wrap dark:text-gray-20' : 'dark:text-gray-70',
       )}
+      dir="auto"
     >
       <MarkdownLite content={message.text ?? ''} />
     </div>
diff --git a/client/src/components/Messages/Content/EditMessage.tsx b/client/src/components/Messages/Content/EditMessage.tsx
index a53d66acd9..dabe9fe648 100644
--- a/client/src/components/Messages/Content/EditMessage.tsx
+++ b/client/src/components/Messages/Content/EditMessage.tsx
@@ -87,6 +87,7 @@ const EditMessage = ({
         contentEditable={true}
         ref={textEditor}
         suppressContentEditableWarning={true}
+        dir="auto"
       >
         {text}
       </div>
diff --git a/client/src/components/Nav/SearchBar.tsx b/client/src/components/Nav/SearchBar.tsx
index 5eee9cad86..0e8fbe0323 100644
--- a/client/src/components/Nav/SearchBar.tsx
+++ b/client/src/components/Nav/SearchBar.tsx
@@ -72,6 +72,7 @@ const SearchBar = forwardRef((props: SearchBarProps, ref: Ref<HTMLDivElement>) =
         placeholder={localize('com_nav_search_placeholder')}
         onKeyUp={handleKeyUp}
         autoComplete="off"
+        dir="auto"
       />
       <X
         className={cn(
diff --git a/client/src/components/ui/TextareaAutosize.tsx b/client/src/components/ui/TextareaAutosize.tsx
index 2ae914258a..ad1e4d757b 100644
--- a/client/src/components/ui/TextareaAutosize.tsx
+++ b/client/src/components/ui/TextareaAutosize.tsx
@@ -5,6 +5,6 @@ export const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosize
   (props, ref) => {
     const [, setIsRerendered] = useState(false);
     useLayoutEffect(() => setIsRerendered(true), []);
-    return <ReactTextareaAutosize {...props} ref={ref} />;
+    return <ReactTextareaAutosize dir="auto" {...props} ref={ref} />;
   },
 );