🔄 feat: chat direction (LTR-RTL) (#3260)

* feat: chat direction

* fix: FileRow

* feat: smooth trigger transition

client/src/components/Nav/SettingsTabs/Chat/Chat.tsx

@@ -4,15 +4,19 @@ import { SettingsTabValues } from 'librechat-data-provider';
 import SendMessageKeyEnter from './EnterToSend';
 import ShowCodeSwitch from './ShowCodeSwitch';
 import { ForkSettings } from './ForkSettings';
+import ChatDirection from './ChatDirection';
 import SaveDraft from './SaveDraft';
 
-function Messages() {
+function Chat() {
   return (
-    <Tabs.Content value={SettingsTabValues.MESSAGES} role="tabpanel" className="md: w-full">
+    <Tabs.Content value={SettingsTabValues.CHAT} role="tabpanel" className="md: w-full">
       <div className="flex flex-col gap-3 text-sm text-black dark:text-gray-50">
         <div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-600">
           <SendMessageKeyEnter />
         </div>
+        <div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-600">
+          <ChatDirection />
+        </div>
         <div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-600">
           <ShowCodeSwitch />
         </div>
@@ -25,4 +29,4 @@ function Messages() {
   );
 }
 
-export default memo(Messages);
+export default memo(Chat);

client/src/components/Nav/SettingsTabs/Chat/ChatDirection.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { useRecoilState } from 'recoil';
+import { useLocalize } from '~/hooks';
+import store from '~/store';
+
+const ChatDirection = () => {
+  const [direction, setDirection] = useRecoilState(store.chatDirection);
+  const localize = useLocalize();
+
+  const toggleChatDirection = () => {
+    setDirection((prev) => (prev === 'LTR' ? 'RTL' : 'LTR'));
+  };
+
+  return (
+    <div className="flex items-center justify-between">
+      <div className="flex items-center space-x-2">
+        <span>{localize('com_nav_chat_direction')}</span>
+      </div>
+      <label
+        onClick={toggleChatDirection}
+        data-testid="chatDirection"
+        className="btn btn-neutral relative"
+        style={{ userSelect: 'none' }}
+      >
+        {direction.toLowerCase()}
+      </label>
+    </div>
+  );
+};
+
+export default ChatDirection;

client/src/components/Nav/SettingsTabs/index.ts

@@ -1,5 +1,5 @@
 export { default as General } from './General/General';
-export { default as Messages } from './Messages/Messages';
+export { default as Chat } from './Chat/Chat';
 export { ClearChatsButton } from './General/General';
 export { default as Data } from './Data/Data';
 export { default as Beta } from './Beta/Beta';