From 90209a30a89dca3c3317b61e18b37504be490f3f Mon Sep 17 00:00:00 2001
From: Joseph Roberts <joseph.roberts@usa.com>
Date: Thu, 11 Dec 2025 20:51:40 -0500
Subject: [PATCH] fix: respect RTL text direction in file attachment containers
 (#19891)

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 ab52a84eb..cb1d28031 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 0e0d41e4d..ef0bfe089 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 5ab220c6e..1dbf6ac79 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 f6e431e53..41f205f2d 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'}