From 2465acb27fdd5f155d82cfc87dda472608f393f4 Mon Sep 17 00:00:00 2001
From: Mahdi Sheibak <mahdi.zoraghi.sheibak@gmail.com>
Date: Tue, 23 May 2023 13:16:59 +0330
Subject: [PATCH] fix(fuselage): auto messsage direction in ltr & rtl messages

---
 packages/fuselage/src/components/Message/MessageBody.tsx      | 1 +
 .../MessageGenericPreview/MessageGenericPreview.styles.scss   | 2 ++
 .../MessageGenericPreview/MessageGenericPreviewContent.tsx    | 2 +-
 .../MessageGenericPreviewDescription.tsx                      | 1 +
 packages/fuselage/src/components/Message/Messages.styles.scss | 4 ++++
 .../components/Message/ThreadMessage/ThreadMessageBody.tsx    | 1 +
 .../components/Message/ThreadMessage/ThreadMessageOrigin.tsx  | 1 +
 7 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/fuselage/src/components/Message/MessageBody.tsx b/packages/fuselage/src/components/Message/MessageBody.tsx
index 48849ff6d5..006233635f 100644
--- a/packages/fuselage/src/components/Message/MessageBody.tsx
+++ b/packages/fuselage/src/components/Message/MessageBody.tsx
@@ -25,5 +25,6 @@ export const MessageBody = ({
       ) as string
     }
     {...props}
+    dir='auto'
   />
 );
diff --git a/packages/fuselage/src/components/Message/MessageGenericPreview/MessageGenericPreview.styles.scss b/packages/fuselage/src/components/Message/MessageGenericPreview/MessageGenericPreview.styles.scss
index 7cde9e444c..5651127c8c 100644
--- a/packages/fuselage/src/components/Message/MessageGenericPreview/MessageGenericPreview.styles.scss
+++ b/packages/fuselage/src/components/Message/MessageGenericPreview/MessageGenericPreview.styles.scss
@@ -53,6 +53,8 @@ $message-generic-preview-icon-background-color: theme(
     display: flex;
     flex-direction: row;
 
+    text-align: left;
+
     font-size: 0;
 
     &-wrapper {
diff --git a/packages/fuselage/src/components/Message/MessageGenericPreview/MessageGenericPreviewContent.tsx b/packages/fuselage/src/components/Message/MessageGenericPreview/MessageGenericPreviewContent.tsx
index 630f11d07b..39f845fa6d 100644
--- a/packages/fuselage/src/components/Message/MessageGenericPreview/MessageGenericPreviewContent.tsx
+++ b/packages/fuselage/src/components/Message/MessageGenericPreview/MessageGenericPreviewContent.tsx
@@ -10,7 +10,7 @@ export const MessageGenericPreviewContent = ({
   thumb,
   ...props
 }: MessageGenericPreviewContentProps) => (
-  <div className='rcx-message-generic-preview__content'>
+  <div className='rcx-message-generic-preview__content' dir='auto'>
     {thumb}
     <div className='rcx-message-generic-preview__content-wrapper' {...props} />
   </div>
diff --git a/packages/fuselage/src/components/Message/MessageGenericPreview/MessageGenericPreviewDescription.tsx b/packages/fuselage/src/components/Message/MessageGenericPreview/MessageGenericPreviewDescription.tsx
index c4f81603d8..c4a7ee1eac 100644
--- a/packages/fuselage/src/components/Message/MessageGenericPreview/MessageGenericPreviewDescription.tsx
+++ b/packages/fuselage/src/components/Message/MessageGenericPreview/MessageGenericPreviewDescription.tsx
@@ -17,6 +17,7 @@ export const MessageGenericPreviewDescription = ({
     ]
       .filter(Boolean)
       .join(' ')}
+    dir='auto'
   >
     {children}
   </div>
diff --git a/packages/fuselage/src/components/Message/Messages.styles.scss b/packages/fuselage/src/components/Message/Messages.styles.scss
index 59aceeb468..a39831acbd 100644
--- a/packages/fuselage/src/components/Message/Messages.styles.scss
+++ b/packages/fuselage/src/components/Message/Messages.styles.scss
@@ -124,6 +124,10 @@ $message-highlight-colors-background-other-color: theme(
     }
   }
 
+  .rcx-message-body {
+    text-align: left;
+  }
+
   &--sequential {
     padding-block: lengths.padding(4);
   }
diff --git a/packages/fuselage/src/components/Message/ThreadMessage/ThreadMessageBody.tsx b/packages/fuselage/src/components/Message/ThreadMessage/ThreadMessageBody.tsx
index 9263820904..fccbf038da 100644
--- a/packages/fuselage/src/components/Message/ThreadMessage/ThreadMessageBody.tsx
+++ b/packages/fuselage/src/components/Message/ThreadMessage/ThreadMessageBody.tsx
@@ -9,5 +9,6 @@ export const ThreadMessageBody = (props: ThreadMessageBodyProps) => (
   <div
     className='rcx-box rcx-box--full rcx-message-thread__message'
     {...props}
+    dir='auto'
   />
 );
diff --git a/packages/fuselage/src/components/Message/ThreadMessage/ThreadMessageOrigin.tsx b/packages/fuselage/src/components/Message/ThreadMessage/ThreadMessageOrigin.tsx
index ca0d0f7753..2357d95a1d 100644
--- a/packages/fuselage/src/components/Message/ThreadMessage/ThreadMessageOrigin.tsx
+++ b/packages/fuselage/src/components/Message/ThreadMessage/ThreadMessageOrigin.tsx
@@ -17,6 +17,7 @@ export const ThreadMessageOrigin = ({
     ]
       .filter(Boolean)
       .join(' ')}
+    dir='auto'
   >
     {children}
   </div>