Add rtl to gr.HighlightedText

.changeset/long-candies-arrive.md

@@ -0,0 +1,7 @@
+---
+"@gradio/atoms": minor
+"@gradio/highlightedtext": minor
+"gradio": minor
+---
+
+feat:Add `rtl` to gr.HighlightedText

gradio/components/highlighted_text.py

@@ -59,6 +59,7 @@ def __init__(
         render: bool = True,
         key: int | str | None = None,
         interactive: bool | None = None,
+        rtl: bool = False,
     ):
         """
         Parameters:
@@ -81,12 +82,14 @@ def __init__(
             render: If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.
             key: if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved.
             interactive: If True, the component will be editable, and allow user to select spans of text and label them.
+            rtl: If True, will display the text in right-to-left direction, and the labels in the legend will also be aligned to the right.
         """
         self.color_map = color_map
         self.show_legend = show_legend
         self.show_inline_category = show_inline_category
         self.combine_adjacent = combine_adjacent
         self.adjacent_separator = adjacent_separator
+        self.rtl = rtl
         super().__init__(
             label=label,
             every=every,

js/atoms/src/Block.svelte

@@ -19,6 +19,8 @@
 	export let min_width = 0;
 	export let flex = false;
 	export let resizable = false;
+	export let rtl = false;
+
 	let element: HTMLElement;
 
 	let tag = type === "fieldset" ? "fieldset" : "div";
@@ -80,6 +82,7 @@
 	style:min-width={`calc(min(${min_width}px, 100%))`}
 	style:border-width="var(--block-border-width)"
 	class:auto-margin={scale === null}
+	dir={rtl ? "rtl" : "ltr"}
 >
 	<slot />
 	{#if resizable}

js/highlightedtext/HighlightedText.stories.svelte

@@ -111,3 +111,16 @@
 		interactive: false
 	}}
 />
+
+<Story
+	name="Highlighted Text with RTL"
+	args={{
+		value: [
+			{ token: "مرحبا", class_or_confidence: "greeting" },
+			{ token: " ", class_or_confidence: null },
+			{ token: "بالعالم", class_or_confidence: "subject" }
+		],
+		rtl: true,
+		color_map: { greeting: "green", subject: "blue" }
+	}}
+/>

js/highlightedtext/Index.svelte

@@ -37,6 +37,7 @@
 	export let combine_adjacent = false;
 	export let interactive: boolean;
 	export let show_label = true;
+	export let rtl = false;
 
 	$: if (!color_map && Object.keys(color_map).length) {
 		color_map = color_map;
@@ -67,6 +68,7 @@
 		{container}
 		{scale}
 		{min_width}
+		{rtl}
 	>
 		<StatusTracker
 			autoscroll={gradio.autoscroll}

test/components/test_highlighted_text.py

@@ -116,6 +116,7 @@ def test_component_functions(self):
             "visible": True,
             "value": None,
             "proxy_url": None,
+            "rtl": False,
             "_selectable": False,
             "key": None,
             "combine_adjacent": False,