From 2b625ad9403c3449b34a8a3da68ae48c4347c2db Mon Sep 17 00:00:00 2001
From: Hannah <hannahblair@users.noreply.github.com>
Date: Fri, 24 Nov 2023 18:15:32 +0100
Subject: [PATCH] Ensure Chatbot messages are properly aligned when `rtl` is
 true (#6574)

* fix text alignment when rtl is true

* add changeset

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
---
 .changeset/flat-rice-hang.md      |  6 ++++++
 js/chatbot/Chatbot.stories.svelte | 14 ++++++++++++--
 js/chatbot/shared/ChatBot.svelte  |  5 +++--
 3 files changed, 21 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/flat-rice-hang.md

diff --git a/.changeset/flat-rice-hang.md b/.changeset/flat-rice-hang.md
new file mode 100644
index 0000000000..29b0efe767
--- /dev/null
+++ b/.changeset/flat-rice-hang.md
@@ -0,0 +1,6 @@
+---
+"@gradio/chatbot": patch
+"gradio": patch
+---
+
+fix:Ensure Chatbot messages are properly aligned when `rtl` is true
diff --git a/js/chatbot/Chatbot.stories.svelte b/js/chatbot/Chatbot.stories.svelte
index 8a6d750d4c..325289d027 100644
--- a/js/chatbot/Chatbot.stories.svelte
+++ b/js/chatbot/Chatbot.stories.svelte
@@ -29,7 +29,6 @@
 
 <Template let:args>
 	<Chatbot
-		{...args}
 		value={[
 			[
 				"Can you write a function in Python?",
@@ -38,6 +37,7 @@
 			["Can you do math?", "$$1+1=2$$"],
 			["Can you say nothing?", null]
 		]}
+		{...args}
 	/>
 </Template>
 
@@ -55,7 +55,17 @@
 	name="Chatbot with text rendered right-to-left"
 	args={{
 		rtl: true,
-		latex_delimiters: [{ left: "$$", right: "$$", display: true }]
+		latex_delimiters: [{ left: "$$", right: "$$", display: true }],
+		value: [
+			[
+				"حلّت التجارية عرض لم, كرسي قادة دار كل. ما خيار ماذا بمحاولة به،. كما عن تونس إيطاليا. يتم بـ لأداء حادثة معزّزة.",
+				"إعادة احداث اعلان بين قد, ما القوى الحكومة التغييرات جهة. قبل و يذكر الإمتعاض, أوسع وشعار إستعمل بعد تم. سبتمبر الصفحة عل أضف, أي وفي الدمج تشكيل وصافرات. حيث قد بقسوة هاربر بأيدي, أملاً نتيجة الثالث ما على, ثم مدن للسيطرة بالتوقيع. هذه ان حقول أخرى."
+			],
+			[
+				"أي وتنصيب الصعداء انه. تاريخ بالجانب هو فصل, أخذ لمحاكم الإتفاقية ان. كنقطة بالعمل التكاليف شيء مع, وجزر الهادي كان و, أي حدى يطول الحكومة اليابان. حيث كرسي لتقليعة الاندونيسية تم, للصين وبغطاء بال بل. ٣٠ لهذه قتيل، ارتكبها كلا. سابق وبدأت تم ذات.",
+				"اليف نفس. ما يتبقّ لبولندا، استراليا، دول."
+			]
+		]
 	}}
 />
 
diff --git a/js/chatbot/shared/ChatBot.svelte b/js/chatbot/shared/ChatBot.svelte
index 8c19161733..43bcca7739 100644
--- a/js/chatbot/shared/ChatBot.svelte
+++ b/js/chatbot/shared/ChatBot.svelte
@@ -153,6 +153,7 @@
 								class:panel-full-width={layout === "panel"}
 								class:message-bubble-border={layout === "bubble"}
 								class:message-markdown-disabled={!render_markdown}
+								style:text-align={rtl && j == 0 ? "left" : "right"}
 							>
 								<button
 									data-testid={j == 0 ? "user" : "bot"}
@@ -160,7 +161,7 @@
 									class:message-markdown-disabled={!render_markdown}
 									style:user-select="text"
 									class:selectable
-									style:text-align="left"
+									style:text-align={rtl ? "right" : "left"}
 									on:click={() => handle_select(i, j, message)}
 									on:keydown={(e) => {
 										if (e.key === "Enter") {
@@ -301,7 +302,6 @@
 		display: flex;
 		flex-direction: column;
 		align-self: flex-end;
-		text-align: left;
 		background: var(--background-fill-secondary);
 		width: calc(100% - var(--spacing-xxl));
 		color: var(--body-text-color);
@@ -343,6 +343,7 @@
 	}
 	.bot {
 		border-bottom-left-radius: 0;
+		text-align: left;
 	}
 
 	/* Colors */