From 16b218e6867cbfe7fca7b6a7a1c2524c24486a56 Mon Sep 17 00:00:00 2001
From: Ido Henri Mamia <idomamia@gmail.com>
Date: Thu, 16 May 2024 23:26:36 +0300
Subject: [PATCH] Add layout direction to all the chat components

---
 src/lib/components/chat/MessageInput.svelte             | 1 +
 src/lib/components/chat/Messages/ResponseMessage.svelte | 2 +-
 src/lib/components/chat/Messages/UserMessage.svelte     | 2 +-
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/chat/MessageInput.svelte b/src/lib/components/chat/MessageInput.svelte
index 6711ea2b5..1b5de5837 100644
--- a/src/lib/components/chat/MessageInput.svelte
+++ b/src/lib/components/chat/MessageInput.svelte
@@ -584,6 +584,7 @@
 						}}
 					/>
 					<form
+						dir={$settings?.chatDirection}
 						class=" flex flex-col relative w-full rounded-3xl px-1.5 border border-gray-100 dark:border-gray-850 bg-white dark:bg-gray-900 dark:text-gray-100"
 						on:submit|preventDefault={() => {
 							submitPrompt(prompt, user);
diff --git a/src/lib/components/chat/Messages/ResponseMessage.svelte b/src/lib/components/chat/Messages/ResponseMessage.svelte
index 82cb7a846..66b4b2bf1 100644
--- a/src/lib/components/chat/Messages/ResponseMessage.svelte
+++ b/src/lib/components/chat/Messages/ResponseMessage.svelte
@@ -332,7 +332,7 @@
 <CitationsModal bind:show={showCitationModal} citation={selectedCitation} />
 
 {#key message.id}
-	<div class=" flex w-full message-{message.id}" id="message-{message.id}">
+	<div class=" flex w-full message-{message.id}" id="message-{message.id}" dir="{$settings.chatDirection}">
 		<ProfileImage
 			src={modelfiles[message.model]?.imageUrl ??
 				($i18n.language === 'dg-DG' ? `/doge.png` : `${WEBUI_BASE_URL}/static/favicon.png`)}
diff --git a/src/lib/components/chat/Messages/UserMessage.svelte b/src/lib/components/chat/Messages/UserMessage.svelte
index f8746e1f2..666b08e4b 100644
--- a/src/lib/components/chat/Messages/UserMessage.svelte
+++ b/src/lib/components/chat/Messages/UserMessage.svelte
@@ -54,7 +54,7 @@
 	};
 </script>
 
-<div class=" flex w-full">
+<div class=" flex w-full" dir="{$settings.chatDirection}">
 	<ProfileImage
 		src={message.user
 			? $modelfiles.find((modelfile) => modelfile.tagName === message.user)?.imageUrl ?? '/user.png'