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

@@ -0,0 +1,6 @@
+---
+"@gradio/chatbot": patch
+"gradio": patch
+---
+
+fix:Ensure Chatbot messages are properly aligned when `rtl` is true

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: [
+			[
+				"حلّت التجارية عرض لم, كرسي قادة دار كل. ما خيار ماذا بمحاولة به،. كما عن تونس إيطاليا. يتم بـ لأداء حادثة معزّزة.",
+				"إعادة احداث اعلان بين قد, ما القوى الحكومة التغييرات جهة. قبل و يذكر الإمتعاض, أوسع وشعار إستعمل بعد تم. سبتمبر الصفحة عل أضف, أي وفي الدمج تشكيل وصافرات. حيث قد بقسوة هاربر بأيدي, أملاً نتيجة الثالث ما على, ثم مدن للسيطرة بالتوقيع. هذه ان حقول أخرى."
+			],
+			[
+				"أي وتنصيب الصعداء انه. تاريخ بالجانب هو فصل, أخذ لمحاكم الإتفاقية ان. كنقطة بالعمل التكاليف شيء مع, وجزر الهادي كان و, أي حدى يطول الحكومة اليابان. حيث كرسي لتقليعة الاندونيسية تم, للصين وبغطاء بال بل. ٣٠ لهذه قتيل، ارتكبها كلا. سابق وبدأت تم ذات.",
+				"اليف نفس. ما يتبقّ لبولندا، استراليا، دول."
+			]
+		]
 	}}
 />
 

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 */