From d3b6c5afc74803fdb948a4033cee560f8b049a1f Mon Sep 17 00:00:00 2001
From: Joseph Roberts <joseph.roberts@usa.com>
Date: Thu, 11 Dec 2025 13:02:05 -0500
Subject: [PATCH] fix: respect RTL text direction in file attachment containers

Fixes #19742 where file attachment containers did not inherit the chat direction setting, causing layout issues when typing in RTL languages like Persian.

Added dir={$settings?.chatDirection ?? 'auto'} to file container divs in:
- MessageInput.svelte (chat input file attachments)
- UserMessage.svelte (user message file display)
- ResponseMessage.svelte (response message file display)
- channel/Messages/Message.svelte (channel message file display)

The fix ensures file containers automatically detect and respect RTL text direction, maintaining proper layout alignment for RTL languages while preserving LTR behavior for Latin text.
---
 src/lib/components/channel/Messages/Message.svelte      | 5 ++++-
 src/lib/components/chat/MessageInput.svelte             | 5 ++++-
 src/lib/components/chat/Messages/ResponseMessage.svelte | 5 ++++-
 src/lib/components/chat/Messages/UserMessage.svelte     | 5 ++++-
 4 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/channel/Messages/Message.svelte b/src/lib/components/channel/Messages/Message.svelte
index ab52a84eb6..cb1d280319 100644
--- a/src/lib/components/channel/Messages/Message.svelte
+++ b/src/lib/components/channel/Messages/Message.svelte
@@ -338,7 +338,10 @@
 						<Skeleton />
 					</div>
 				{:else if (message?.data?.files ?? []).length > 0}
-					<div class="my-2.5 w-full flex overflow-x-auto gap-2 flex-wrap">
+					<div
+						class="my-2.5 w-full flex overflow-x-auto gap-2 flex-wrap"
+						dir={$settings?.chatDirection ?? 'auto'}
+					>
 						{#each message?.data?.files as file}
 							<div>
 								{#if file.type === 'image' || (file?.content_type ?? '').startsWith('image/')}
diff --git a/src/lib/components/chat/MessageInput.svelte b/src/lib/components/chat/MessageInput.svelte
index 0e0d41e4da..ef0bfe0897 100644
--- a/src/lib/components/chat/MessageInput.svelte
+++ b/src/lib/components/chat/MessageInput.svelte
@@ -1139,7 +1139,10 @@
 							{/if}
 
 							{#if files.length > 0}
-								<div class="mx-2 mt-2.5 pb-1.5 flex items-center flex-wrap gap-2">
+								<div
+									class="mx-2 mt-2.5 pb-1.5 flex items-center flex-wrap gap-2"
+									dir={$settings?.chatDirection ?? 'auto'}
+								>
 									{#each files as file, fileIdx}
 										{#if file.type === 'image'}
 											<div class=" relative group">
diff --git a/src/lib/components/chat/Messages/ResponseMessage.svelte b/src/lib/components/chat/Messages/ResponseMessage.svelte
index 5ab220c6ef..1dbf6ac79b 100644
--- a/src/lib/components/chat/Messages/ResponseMessage.svelte
+++ b/src/lib/components/chat/Messages/ResponseMessage.svelte
@@ -666,7 +666,10 @@
 						{/if}
 
 						{#if message?.files && message.files?.filter((f) => f.type === 'image').length > 0}
-							<div class="my-1 w-full flex overflow-x-auto gap-2 flex-wrap">
+							<div
+								class="my-1 w-full flex overflow-x-auto gap-2 flex-wrap"
+								dir={$settings?.chatDirection ?? 'auto'}
+							>
 								{#each message.files as file}
 									<div>
 										{#if file.type === 'image'}
diff --git a/src/lib/components/chat/Messages/UserMessage.svelte b/src/lib/components/chat/Messages/UserMessage.svelte
index f6e431e532..41f205f2d1 100644
--- a/src/lib/components/chat/Messages/UserMessage.svelte
+++ b/src/lib/components/chat/Messages/UserMessage.svelte
@@ -188,7 +188,10 @@
 		<div class="chat-{message.role} w-full min-w-full markdown-prose">
 			{#if edit !== true}
 				{#if message.files}
-					<div class="mb-1 w-full flex flex-col justify-end overflow-x-auto gap-1 flex-wrap">
+					<div
+						class="mb-1 w-full flex flex-col justify-end overflow-x-auto gap-1 flex-wrap"
+						dir={$settings?.chatDirection ?? 'auto'}
+					>
 						{#each message.files as file}
 							<div class={($settings?.chatBubble ?? true) ? 'self-end' : ''}>
 								{#if file.type === 'image'}