Merge pull request #2318 from idomamia/feat/rtl-layout-chat-support

Add RTL layout chat support

src/lib/components/chat/Messages/CodeBlock.svelte

@@ -272,7 +272,7 @@ __builtins__.input = input`);
 </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"
 		>

src/lib/components/chat/Messages/Name.svelte

@@ -1,3 +1,3 @@
-<div class=" self-center font-bold mb-0.5 line-clamp-1">
+<div class=" self-center font-bold mb-0.5 line-clamp-1 contents">
 	<slot />
 </div>

src/lib/components/chat/Messages/ProfileImage.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
+	import { settings } from '$lib/stores';
 	import { WEBUI_BASE_URL } from '$lib/constants';
+  
 	export let src = '/user.png';
 </script>
 
-<div class=" mr-3">
+<div class={$settings?.chatDirection === 'LTR' ? "mr-3" : "ml-3"}>
 	<img
 		crossorigin="anonymous"
 		src={src.startsWith(WEBUI_BASE_URL) ||

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`)}
@@ -495,7 +495,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={() => {

src/lib/components/chat/Messages/UserMessage.svelte

@@ -54,7 +54,7 @@
 	};
 </script>
 
-<div class=" flex w-full user-message">
+<div class=" flex w-full user-message" dir="{$settings.chatDirection}">
 	{#if !($settings?.chatBubble ?? true)}
 		<ProfileImage
 			src={message.user