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

* feat: chat direction

* fix: FileRow

* feat: smooth trigger transition

client/src/components/Chat/Input/AudioRecorder.tsx

@@ -4,16 +4,19 @@ import { ListeningIcon, Spinner } from '~/components/svg';
 import { useLocalize, useSpeechToText } from '~/hooks';
 import { useChatFormContext } from '~/Providers';
 import { globalAudioId } from '~/common';
+import { cn } from '~/utils';
 
 export default function AudioRecorder({
   textAreaRef,
   methods,
   ask,
+  isRTL,
   disabled,
 }: {
   textAreaRef: React.RefObject<HTMLTextAreaElement>;
   methods: ReturnType<typeof useChatFormContext>;
   ask: (data: { text: string }) => void;
+  isRTL: boolean;
   disabled: boolean;
 }) {
   const localize = useLocalize();
@@ -77,7 +80,12 @@ export default function AudioRecorder({
           <button
             onClick={isListening ? handleStopRecording : handleStartRecording}
             disabled={disabled}
-            className="absolute bottom-1.5 right-12 flex h-[30px] w-[30px] items-center justify-center rounded-lg p-0.5 transition-colors hover:bg-gray-200 dark:hover:bg-gray-700 md:bottom-3 md:right-12"
+            className={cn(
+              'absolute flex h-[30px] w-[30px] items-center justify-center rounded-lg p-0.5 transition-colors hover:bg-gray-200 dark:hover:bg-gray-700',
+              isRTL
+                ? 'bottom-1.5 left-4 md:bottom-3 md:left-12'
+                : 'bottom-1.5 right-12 md:bottom-3 md:right-12',
+            )}
             type="button"
           >
             {renderIcon()}

client/src/components/Chat/Input/ChatForm.tsx

@@ -48,6 +48,9 @@ const ChatForm = ({ index = 0 }) => {
     store.showMentionPopoverFamily(index),
   );
 
+  const chatDirection = useRecoilValue(store.chatDirection).toLowerCase();
+  const isRTL = chatDirection === 'rtl';
+
   const { requiresKey } = useRequiresKey();
   const handleKeyUp = useHandleKeyUp({
     index,
@@ -149,6 +152,7 @@ const ChatForm = ({ index = 0 }) => {
               files={files}
               setFiles={setFiles}
               setFilesLoading={setFilesLoading}
+              isRTL={isRTL}
               Wrapper={({ children }) => (
                 <div className="mx-2 mt-2 flex flex-wrap gap-2 px-2.5 md:pl-0 md:pr-4">
                   {children}
@@ -179,7 +183,7 @@ const ChatForm = ({ index = 0 }) => {
                     ? ' pl-10 md:pl-[55px]'
                     : 'pl-3 md:pl-4',
                   'm-0 w-full resize-none border-0 bg-transparent py-[10px] placeholder-black/50 focus:ring-0 focus-visible:ring-0 dark:bg-transparent dark:placeholder-white/50 md:py-3.5  ',
-                  SpeechToText ? 'pr-20 md:pr-[85px]' : 'pr-10 md:pr-12',
+                  SpeechToText && !isRTL ? 'pr-20 md:pr-[85px]' : 'pr-10 md:pr-12',
                   'max-h-[65vh] md:max-h-[75vh]',
                   removeFocusRings,
                 )}
@@ -188,15 +192,21 @@ const ChatForm = ({ index = 0 }) => {
             <AttachFile
               endpoint={_endpoint ?? ''}
               endpointType={endpointType}
+              isRTL={isRTL}
               disabled={disableInputs}
             />
             {(isSubmitting || isSubmittingAdded) && (showStopButton || showStopAdded) ? (
-              <StopButton stop={handleStopGenerating} setShowStopButton={setShowStopButton} />
+              <StopButton
+                stop={handleStopGenerating}
+                setShowStopButton={setShowStopButton}
+                isRTL={isRTL}
+              />
             ) : (
               endpoint && (
                 <SendButton
                   ref={submitButtonRef}
                   control={methods.control}
+                  isRTL={isRTL}
                   disabled={!!(filesLoading || isSubmitting || disableInputs)}
                 />
               )
@@ -206,6 +216,7 @@ const ChatForm = ({ index = 0 }) => {
                 disabled={!!disableInputs}
                 textAreaRef={textAreaRef}
                 ask={submitMessage}
+                isRTL={isRTL}
                 methods={methods}
               />
             )}

client/src/components/Chat/Input/Files/AttachFile.tsx

@@ -9,14 +9,17 @@ import { useGetFileConfig } from '~/data-provider';
 import { AttachmentIcon } from '~/components/svg';
 import { FileUpload } from '~/components/ui';
 import { useFileHandling } from '~/hooks';
+import { cn } from '~/utils';
 
 const AttachFile = ({
   endpoint,
   endpointType,
+  isRTL,
   disabled = false,
 }: {
   endpoint: EModelEndpoint | '';
   endpointType?: EModelEndpoint;
+  isRTL: boolean;
   disabled?: boolean | null;
 }) => {
   const { handleFileChange } = useFileHandling();
@@ -30,7 +33,14 @@ const AttachFile = ({
   }
 
   return (
-    <div className="absolute bottom-2 left-2 md:bottom-3 md:left-4">
+    <div
+      className={cn(
+        'absolute',
+        isRTL
+          ? 'bottom-2 right-14 md:bottom-3.5 md:right-3'
+          : 'bottom-2 left-2 md:bottom-3.5 md:left-4',
+      )}
+    >
       <FileUpload handleFileChange={handleFileChange} className="flex">
         <button
           disabled={!!disabled}

client/src/components/Chat/Input/Files/FileRow.tsx

@@ -13,6 +13,7 @@ export default function FileRow({
   assistant_id,
   tool_resource,
   fileFilter,
+  isRTL,
   Wrapper,
 }: {
   files: Map<string, ExtendedFile>;
@@ -21,6 +22,7 @@ export default function FileRow({
   fileFilter?: (file: ExtendedFile) => boolean;
   assistant_id?: string;
   tool_resource?: EToolResources;
+  isRTL?: boolean;
   Wrapper?: React.FC<{ children: React.ReactNode }>;
 }) {
   const files = Array.from(_files.values()).filter((file) =>
@@ -64,8 +66,11 @@ export default function FileRow({
   }
 
   const renderFiles = () => {
+    // Inline style for RTL
+    const rowStyle = isRTL ? { display: 'flex', flexDirection: 'row-reverse' } : {};
+
     return (
-      <>
+      <div style={rowStyle as React.CSSProperties}>
         {files
           .reduce(
             (acc, current) => {
@@ -90,10 +95,9 @@ export default function FileRow({
                 />
               );
             }
-
             return <FileContainer key={index} file={file} onDelete={handleDelete} />;
           })}
-      </>
+      </div>
     );
   };
 

client/src/components/Chat/Input/SendButton.tsx

@@ -9,42 +9,48 @@ import { cn } from '~/utils';
 type SendButtonProps = {
   disabled: boolean;
   control: Control<{ text: string }>;
+  isRTL: boolean;
 };
 
 const SubmitButton = React.memo(
-  forwardRef((props: { disabled: boolean }, ref: React.ForwardedRef<HTMLButtonElement>) => {
-    const localize = useLocalize();
-    return (
-      <TooltipProvider delayDuration={250}>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <button
-              ref={ref}
-              disabled={props.disabled}
-              className={cn(
-                'absolute bottom-1.5 right-2 rounded-lg border border-black p-0.5 text-white transition-colors enabled:bg-black disabled:bg-black disabled:text-gray-400 disabled:opacity-10 dark:border-white dark:bg-white dark:disabled:bg-white md:bottom-3 md:right-3',
-              )}
-              data-testid="send-button"
-              type="submit"
-            >
-              <span className="" data-state="closed">
-                <SendIcon size={24} />
-              </span>
-            </button>
-          </TooltipTrigger>
-          <TooltipContent side="top" sideOffset={10}>
-            {localize('com_nav_send_message')}
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-    );
-  }),
+  forwardRef(
+    (props: { disabled: boolean; isRTL: boolean }, ref: React.ForwardedRef<HTMLButtonElement>) => {
+      const localize = useLocalize();
+      return (
+        <TooltipProvider delayDuration={250}>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                ref={ref}
+                disabled={props.disabled}
+                className={cn(
+                  'absolute rounded-lg border border-black p-0.5 text-white transition-colors enabled:bg-black disabled:bg-black disabled:text-gray-400 disabled:opacity-10 dark:border-white dark:bg-white dark:disabled:bg-white',
+                  props.isRTL
+                    ? 'bottom-1.5 left-2 md:bottom-3 md:left-3'
+                    : 'bottom-1.5 right-2 md:bottom-3 md:right-3',
+                )}
+                data-testid="send-button"
+                type="submit"
+              >
+                <span className="" data-state="closed">
+                  <SendIcon size={24} />
+                </span>
+              </button>
+            </TooltipTrigger>
+            <TooltipContent side="top" sideOffset={10}>
+              {localize('com_nav_send_message')}
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      );
+    },
+  ),
 );
 
 const SendButton = React.memo(
   forwardRef((props: SendButtonProps, ref: React.ForwardedRef<HTMLButtonElement>) => {
     const data = useWatch({ control: props.control });
-    return <SubmitButton ref={ref} disabled={props.disabled || !data?.text} />;
+    return <SubmitButton ref={ref} disabled={props.disabled || !data?.text} isRTL={props.isRTL} />;
   }),
 );
 

client/src/components/Chat/Input/StopButton.tsx

@@ -1,6 +1,13 @@
-export default function StopButton({ stop, setShowStopButton }) {
+import { cn } from '~/utils';
+
+export default function StopButton({ stop, setShowStopButton, isRTL }) {
   return (
-    <div className="absolute bottom-3 right-2 md:bottom-4 md:right-4">
+    <div
+      className={cn(
+        'absolute',
+        isRTL ? 'bottom-3 left-2 md:bottom-4 md:left-4' : 'bottom-3 right-2 md:bottom-4 md:right-4',
+      )}
+    >
       <button
         type="button"
         className="border-gizmo-gray-900 rounded-full border-2 p-1 dark:border-gray-200"

client/src/components/Nav/Settings.tsx

@@ -11,7 +11,7 @@ import {
   TransitionChild,
 } from '@headlessui/react';
 import { GearIcon, DataIcon, SpeechIcon, UserIcon, ExperimentIcon } from '~/components/svg';
-import { General, Messages, Speech, Beta, Data, Account } from './SettingsTabs';
+import { General, Chat, Speech, Beta, Data, Account } from './SettingsTabs';
 import { useMediaQuery, useLocalize } from '~/hooks';
 import { cn } from '~/utils';
 
@@ -100,7 +100,7 @@ export default function Settings({ open, onOpenChange }: TDialogProps) {
                   >
                     <Tabs.Trigger
                       className={cn(
-                        'group m-1 flex items-center justify-start gap-2 rounded-md px-2 py-1.5 text-sm text-black radix-state-active:bg-white radix-state-active:text-black dark:text-white dark:radix-state-active:bg-gray-600',
+                        'group m-1 flex items-center justify-start gap-2 rounded-md px-2 py-1.5 text-sm text-black transition-all duration-200 ease-in-out radix-state-active:bg-white radix-state-active:text-black dark:text-white dark:radix-state-active:bg-gray-600',
                         isSmallScreen
                           ? 'flex-1 items-center justify-center text-nowrap text-sm dark:text-gray-500 dark:radix-state-active:text-white'
                           : 'bg-white radix-state-active:bg-gray-200',
@@ -114,21 +114,21 @@ export default function Settings({ open, onOpenChange }: TDialogProps) {
                     </Tabs.Trigger>
                     <Tabs.Trigger
                       className={cn(
-                        'group m-1 flex items-center justify-start gap-2 rounded-md px-2 py-1.5 text-sm text-black radix-state-active:bg-white radix-state-active:text-black dark:text-white dark:radix-state-active:bg-gray-600',
+                        'group m-1 flex items-center justify-start gap-2 rounded-md px-2 py-1.5 text-sm text-black transition-all duration-200 ease-in-out radix-state-active:bg-white radix-state-active:text-black dark:text-white dark:radix-state-active:bg-gray-600',
                         isSmallScreen
                           ? 'flex-1 items-center justify-center text-nowrap text-sm dark:text-gray-500 dark:radix-state-active:text-white'
                           : 'bg-white radix-state-active:bg-gray-200',
                         isSmallScreen ? '' : 'dark:bg-gray-700',
                       )}
-                      value={SettingsTabValues.MESSAGES}
+                      value={SettingsTabValues.CHAT}
                       style={{ userSelect: 'none' }}
                     >
                       <MessageSquare className="icon-sm" />
-                      {localize('com_endpoint_messages')}
+                      {localize('com_nav_setting_chat')}
                     </Tabs.Trigger>
                     <Tabs.Trigger
                       className={cn(
-                        'group m-1 flex items-center justify-start gap-2 rounded-md px-2 py-1.5 text-sm text-black radix-state-active:bg-white radix-state-active:text-black dark:text-white dark:radix-state-active:bg-gray-600',
+                        'group m-1 flex items-center justify-start gap-2 rounded-md px-2 py-1.5 text-sm text-black transition-all duration-200 ease-in-out radix-state-active:bg-white radix-state-active:text-black dark:text-white dark:radix-state-active:bg-gray-600',
                         isSmallScreen
                           ? 'flex-1 items-center justify-center text-nowrap text-sm dark:text-gray-500 dark:radix-state-active:text-white'
                           : 'bg-white radix-state-active:bg-gray-200',
@@ -142,7 +142,7 @@ export default function Settings({ open, onOpenChange }: TDialogProps) {
                     </Tabs.Trigger>
                     <Tabs.Trigger
                       className={cn(
-                        'group m-1 flex items-center justify-start gap-2 rounded-md px-2 py-1.5 text-sm text-black radix-state-active:bg-white radix-state-active:text-black dark:text-white dark:radix-state-active:bg-gray-600',
+                        'group m-1 flex items-center justify-start gap-2 rounded-md px-2 py-1.5 text-sm text-black transition-all duration-200 ease-in-out radix-state-active:bg-white radix-state-active:text-black dark:text-white dark:radix-state-active:bg-gray-600',
                         isSmallScreen
                           ? 'flex-1 items-center justify-center text-nowrap text-sm dark:text-gray-500 dark:radix-state-active:text-white'
                           : 'bg-white radix-state-active:bg-gray-200',
@@ -156,7 +156,7 @@ export default function Settings({ open, onOpenChange }: TDialogProps) {
                     </Tabs.Trigger>
                     <Tabs.Trigger
                       className={cn(
-                        'group m-1 flex items-center justify-start gap-2 rounded-md px-2 py-1.5 text-sm text-black radix-state-active:bg-white radix-state-active:text-black dark:text-white dark:radix-state-active:bg-gray-600',
+                        'group m-1 flex items-center justify-start gap-2 rounded-md px-2 py-1.5 text-sm text-black transition-all duration-200 ease-in-out radix-state-active:bg-white radix-state-active:text-black dark:text-white dark:radix-state-active:bg-gray-600',
                         isSmallScreen
                           ? 'flex-1 items-center justify-center text-nowrap text-sm dark:text-gray-500 dark:radix-state-active:text-white'
                           : 'bg-white radix-state-active:bg-gray-200',
@@ -170,7 +170,7 @@ export default function Settings({ open, onOpenChange }: TDialogProps) {
                     </Tabs.Trigger>
                     <Tabs.Trigger
                       className={cn(
-                        'group m-1 flex items-center justify-start gap-2 rounded-md px-2 py-1.5 text-sm text-black radix-state-active:bg-white radix-state-active:text-black dark:text-white dark:radix-state-active:bg-gray-600',
+                        'group m-1 flex items-center justify-start gap-2 rounded-md px-2 py-1.5 text-sm text-black transition-all duration-200 ease-in-out radix-state-active:bg-white radix-state-active:text-black dark:text-white dark:radix-state-active:bg-gray-600',
                         isSmallScreen
                           ? 'flex-1 items-center justify-center text-nowrap text-sm dark:text-gray-500 dark:radix-state-active:text-white'
                           : 'bg-white radix-state-active:bg-gray-200',
@@ -185,7 +185,7 @@ export default function Settings({ open, onOpenChange }: TDialogProps) {
                   </Tabs.List>
                   <div className="max-h-[373px] overflow-auto sm:w-full sm:max-w-none md:pr-0.5 md:pt-0.5">
                     <General />
-                    <Messages />
+                    <Chat />
                     <Beta />
                     <Speech />
                     <Data />

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';

client/src/components/ui/TextareaAutosize.tsx

@@ -1,10 +1,14 @@
+import { useRecoilValue } from 'recoil';
 import { forwardRef, useLayoutEffect, useState } from 'react';
 import ReactTextareaAutosize from 'react-textarea-autosize';
 import type { TextareaAutosizeProps } from 'react-textarea-autosize';
+import store from '~/store';
+
 export const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(
   (props, ref) => {
     const [, setIsRerendered] = useState(false);
+    const chatDirection = useRecoilValue(store.chatDirection).toLowerCase();
     useLayoutEffect(() => setIsRerendered(true), []);
-    return <ReactTextareaAutosize dir="auto" {...props} ref={ref} />;
+    return <ReactTextareaAutosize dir={chatDirection} {...props} ref={ref} />;
   },
 );