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

* feat: chat direction

* fix: FileRow

* feat: smooth trigger transition

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