From 9c389df727c97c429516ed2b7bc8cc21669dc7de Mon Sep 17 00:00:00 2001
From: Ido Henri Mamia <idomamia@gmail.com>
Date: Thu, 16 May 2024 23:14:54 +0300
Subject: [PATCH 1/8] Add chat direction to the settings store

---
 src/lib/stores/index.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/lib/stores/index.ts b/src/lib/stores/index.ts
index c4ccb5eec..90b1844cb 100644
--- a/src/lib/stores/index.ts
+++ b/src/lib/stores/index.ts
@@ -81,6 +81,7 @@ type Settings = {
 	notificationEnabled?: boolean;
 	title?: TitleSettings;
 	splitLargeDeltas?: boolean;
+	chatDirection: 'LTR' | 'RTL';
 
 	system?: string;
 	requestFormat?: string;

From a3a832a9359bc4a51f5fa5498d960b5ce073385d Mon Sep 17 00:00:00 2001
From: Ido Henri Mamia <idomamia@gmail.com>
Date: Thu, 16 May 2024 23:22:30 +0300
Subject: [PATCH 2/8] Add chat direction toggle button in the interface
 settings

---
 .../components/chat/Settings/Interface.svelte | 25 +++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/src/lib/components/chat/Settings/Interface.svelte b/src/lib/components/chat/Settings/Interface.svelte
index 87a8d7ec5..aa072bb72 100644
--- a/src/lib/components/chat/Settings/Interface.svelte
+++ b/src/lib/components/chat/Settings/Interface.svelte
@@ -22,6 +22,7 @@
 	// Interface
 	let promptSuggestions = [];
 	let showUsername = false;
+	let chatDirection: 'LTR' | 'RTL' = 'LTR';
 
 	const toggleSplitLargeChunks = async () => {
 		splitLargeChunks = !splitLargeChunks;
@@ -70,6 +71,11 @@
 		}
 	};
 
+	const toggleChangeChatDirection = async () => {
+		chatDirection = chatDirection === 'LTR' ? 'RTL' : 'LTR';
+		saveSettings({chatDirection});
+	};
+
 	const updateInterfaceHandler = async () => {
 		if ($user.role === 'admin') {
 			promptSuggestions = await setDefaultPromptSuggestions(localStorage.token, promptSuggestions);
@@ -107,6 +113,7 @@
 		showUsername = settings.showUsername ?? false;
 		fullScreenMode = settings.fullScreenMode ?? false;
 		splitLargeChunks = settings.splitLargeChunks ?? false;
+		chatDirection = settings.chatDirection ?? 'LTR';
 	});
 </script>
 
@@ -228,6 +235,24 @@
 			</div>
 		</div>
 
+		<div>
+			<div class=" py-0.5 flex w-full justify-between">
+				<div class=" self-center text-xs font-medium">{$i18n.t('Chat direction')}</div>
+
+				<button
+					class="p-1 px-3 text-xs flex rounded transition"
+					on:click={toggleChangeChatDirection}
+					type="button"
+				>
+					{#if chatDirection === 'LTR'} 
+						<span class="ml-2 self-center">{$i18n.t('LTR')}</span>
+					{:else}
+						<span class="ml-2 self-center">{$i18n.t('RTL')}</span>
+					{/if}
+				</button>
+			</div>
+		</div>
+
 		<hr class=" dark:border-gray-700" />
 
 		<div>

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 3/8] 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'

From 4ccb5d39c7d05f054601e7bc6b7ac6489d4283c2 Mon Sep 17 00:00:00 2001
From: Ido Henri Mamia <idomamia@gmail.com>
Date: Thu, 16 May 2024 23:27:33 +0300
Subject: [PATCH 4/8] Code blocks should be in LTR layout for all layouts

---
 src/lib/components/chat/Messages/CodeBlock.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/chat/Messages/CodeBlock.svelte b/src/lib/components/chat/Messages/CodeBlock.svelte
index 18ee9f541..892fff119 100644
--- a/src/lib/components/chat/Messages/CodeBlock.svelte
+++ b/src/lib/components/chat/Messages/CodeBlock.svelte
@@ -21,7 +21,7 @@
 </script>
 
 {#if code}
-	<div class="mb-4">
+	<div class="mb-4" dir="ltr">
 		<div
 			class="flex justify-between bg-[#202123] text-white text-xs px-4 pt-1 pb-0.5 rounded-t-lg overflow-x-auto"
 		>

From 97f1d1665aab37dbec1f9ed20604ce0bb44acbd0 Mon Sep 17 00:00:00 2001
From: Ido Henri Mamia <idomamia@gmail.com>
Date: Thu, 16 May 2024 23:28:44 +0300
Subject: [PATCH 5/8] Add to the i18n the chat direction text

---
 src/lib/i18n/locales/en-US/translation.json | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/lib/i18n/locales/en-US/translation.json b/src/lib/i18n/locales/en-US/translation.json
index 20458ca00..4a291eda6 100644
--- a/src/lib/i18n/locales/en-US/translation.json
+++ b/src/lib/i18n/locales/en-US/translation.json
@@ -66,6 +66,7 @@
 	"Categories": "",
 	"Change Password": "",
 	"Chat": "",
+	"Chat direction": "",
 	"Chat History": "",
 	"Chat History is off for this browser.": "",
 	"Chats": "",
@@ -244,6 +245,7 @@
 	"Light": "",
 	"Listening...": "",
 	"LLMs can make mistakes. Verify important information.": "",
+	"LTR": "",
 	"Made by OpenWebUI Community": "",
 	"Make sure to enclose them with": "",
 	"Manage LiteLLM Models": "",
@@ -360,6 +362,7 @@
 	"Role": "",
 	"Rosé Pine": "",
 	"Rosé Pine Dawn": "",
+	"RTL": "",
 	"Save": "",
 	"Save & Create": "",
 	"Save & Submit": "",

From 2e77ad87ccdd1eab1b06ce4d7b01a885c1f1dd65 Mon Sep 17 00:00:00 2001
From: Ido Henri Mamia <idomamia@gmail.com>
Date: Thu, 16 May 2024 23:29:33 +0300
Subject: [PATCH 6/8] Make the margin and avatar support both LTR and RTL

---
 src/lib/components/chat/Messages/Name.svelte         | 2 +-
 src/lib/components/chat/Messages/ProfileImage.svelte | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/chat/Messages/Name.svelte b/src/lib/components/chat/Messages/Name.svelte
index dea6ef84e..ac8e7267e 100644
--- a/src/lib/components/chat/Messages/Name.svelte
+++ b/src/lib/components/chat/Messages/Name.svelte
@@ -1,3 +1,3 @@
-<div class=" self-center font-bold mb-0.5 capitalize line-clamp-1">
+<div class=" self-center font-bold mb-0.5 capitalize line-clamp-1 contents">
 	<slot />
 </div>
diff --git a/src/lib/components/chat/Messages/ProfileImage.svelte b/src/lib/components/chat/Messages/ProfileImage.svelte
index 84410d91e..7c44d7530 100644
--- a/src/lib/components/chat/Messages/ProfileImage.svelte
+++ b/src/lib/components/chat/Messages/ProfileImage.svelte
@@ -1,7 +1,9 @@
 <script lang="ts">
+	import { settings } from '$lib/stores';
+
 	export let src = '/user.png';
 </script>
 
-<div class=" mr-4">
+<div class={$settings?.chatDirection === 'LTR' ? "mr-4" : "ml-4"}>
 	<img {src} class=" max-w-[28px] object-cover rounded-full" alt="profile" draggable="false" />
 </div>

From 34dd32d48f161ca2b8769ead52832f96990b292e Mon Sep 17 00:00:00 2001
From: Ido Henri Mamia <idomamia@gmail.com>
Date: Fri, 17 May 2024 01:22:46 +0300
Subject: [PATCH 7/8] Merge branch 'dev' of
 https://github.com/open-webui/open-webui into feat/rtl-layout-chat-support

---
 src/lib/components/chat/Messages/ProfileImage.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/chat/Messages/ProfileImage.svelte b/src/lib/components/chat/Messages/ProfileImage.svelte
index 938bf42b5..94f30bfdf 100644
--- a/src/lib/components/chat/Messages/ProfileImage.svelte
+++ b/src/lib/components/chat/Messages/ProfileImage.svelte
@@ -4,6 +4,6 @@
 	export let src = '/user.png';
 </script>
 
-<div class={$settings?.chatDirection === 'LTR' ? "mr-3" : "ml-3"}>>
+<div class={$settings?.chatDirection === 'LTR' ? "mr-3" : "ml-3"}>
 	<img {src} class=" w-8 object-cover rounded-full" alt="profile" draggable="false" />
 </div>

From 92c694e8ace677442107e1d6e667c616fc1f6319 Mon Sep 17 00:00:00 2001
From: Ido Henri Mamia <idomamia@gmail.com>
Date: Fri, 17 May 2024 13:00:31 +0300
Subject: [PATCH 8/8] Fix arrows to be in LTR layout for all layouts

---
 src/lib/components/chat/Messages/ResponseMessage.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/chat/Messages/ResponseMessage.svelte b/src/lib/components/chat/Messages/ResponseMessage.svelte
index e3a8346a0..ede031dc6 100644
--- a/src/lib/components/chat/Messages/ResponseMessage.svelte
+++ b/src/lib/components/chat/Messages/ResponseMessage.svelte
@@ -494,7 +494,7 @@
 									class=" flex justify-start overflow-x-auto buttons text-gray-600 dark:text-gray-500"
 								>
 									{#if siblings.length > 1}
-										<div class="flex self-center">
+										<div class="flex self-center" dir="ltr">
 											<button
 												class="self-center p-1 hover:bg-black/5 dark:hover:bg-white/5 dark:hover:text-white hover:text-black rounded-md transition"
 												on:click={() => {