🔡 fix: Rendering of Bidirectional Text (#3195)

The fix has been applied only to key components where the rendering issue is significant

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>

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">

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>

client/src/components/Messages/Content/EditMessage.tsx

@@ -87,6 +87,7 @@ const EditMessage = ({
         contentEditable={true}
         ref={textEditor}
         suppressContentEditableWarning={true}
+        dir="auto"
       >
         {text}
       </div>

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(

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} />;
   },
 );