Adds Latex Delimiters Parameter

CHANGELOG.md

@@ -24,6 +24,7 @@ demo.launch()
 - Add `autoplay` kwarg to `Video` and `Audio` components by [@pngwn](https://github.com/pngwn) in [PR 4453](https://github.com/gradio-app/gradio/pull/4453)
 - Add `allow_preview` parameter to `Gallery` to control whether a detailed preview is displayed on click by 
 [@freddyaboulton](https://github.com/freddyaboulton) in [PR 4470](https://github.com/gradio-app/gradio/pull/4470)
+- Add `latex_delimiters` parameter to `Chatbot` to control the delimiters used for LaTeX and to disable LaTeX in the `Chatbot` by [@dawoodkhan82](https://github.com/dawoodkhan82) in [PR 4516](https://github.com/gradio-app/gradio/pull/4516)
 
 ## Bug Fixes:
 
@@ -48,6 +49,7 @@ demo.launch()
 
 - The behavior of the `Clear` button has been changed for `Slider`, `CheckboxGroup`, `Radio`, `Dropdown` components by [@abidlabs](https://github.com/abidlabs) in [PR 4456](https://github.com/gradio-app/gradio/pull/4456). The Clear button now sets the value of these components to be empty as opposed to the original default set by the developer. This is to make them in line with the rest of the Gradio components. 
 - Python 3.7 end of life is June 27 2023. Gradio will no longer support python 3.7 by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 4484](https://github.com/gradio-app/gradio/pull/4484)
+- Removed `$` as a default LaTeX delimiter for the `Chatbot` by [@dawoodkhan82](https://github.com/dawoodkhan82) in [PR 4516](https://github.com/gradio-app/gradio/pull/4516). The specific LaTeX delimeters can be set using the new `latex_delimiters` parameter in `Chatbot`.
 
 # 3.34.0
 

gradio/components/chatbot.py

@@ -37,7 +37,7 @@ def __init__(
         value: list[list[str | tuple[str] | tuple[str, str] | None]]
         | Callable
         | None = None,
-        color_map: dict[str, str] | None = None,  # Parameter moved to Chatbot.style()
+        color_map: dict[str, str] | None = None,
         *,
         label: str | None = None,
         every: float | None = None,
@@ -49,6 +49,7 @@ def __init__(
         elem_id: str | None = None,
         elem_classes: list[str] | str | None = None,
         height: int | None = None,
+        latex_delimiters: list[dict[str, str | bool]] | None = None,
         **kwargs,
     ):
         """
@@ -64,6 +65,7 @@ def __init__(
             elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
             elem_classes: An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.
             height: height of the component in pixels.
+            latex_delimiters: A list of dicts of the form {"left": open_delimiter, "right": close_delimiter, "display": display_in_newline} that will be used to render LaTeX expressions. Setting "display" to `False` means LaTeX will be rendered inline instead of in a newline. If not provided, `latex_delimiters` is set to `[{ "left": "$$", "right": "$$", "display": True }]`, so only LaTeX expressions enclosed in $$ delimiters will be rendered, and in a new line. Pass in an empty list to disable LaTeX rendering. For more information, see the [KaTeX documentation](https://katex.org/docs/autorender.html).
         """
         if color_map is not None:
             warnings.warn(
@@ -76,6 +78,9 @@ def __init__(
         See EventData documentation on how to use this event data.
         """
         self.height = height
+        if latex_delimiters is None:
+            latex_delimiters = [{"left": "$$", "right": "$$", "display": True}]
+        self.latex_delimiters = latex_delimiters
 
         IOComponent.__init__(
             self,
@@ -95,6 +100,7 @@ def __init__(
     def get_config(self):
         return {
             "value": self.value,
+            "latex_delimiters": self.latex_delimiters,
             "selectable": self.selectable,
             "height": self.height,
             **IOComponent.get_config(self),

js/app/src/components/Chatbot/Chatbot.svelte

@@ -15,6 +15,11 @@
 		[string | FileData | null, string | FileData | null]
 	> = [];
 	let _value: Array<[string | FileData | null, string | FileData | null]>;
+	export let latex_delimiters: Array<{
+		left: string;
+		right: string;
+		display: boolean;
+	}> = [{ left: "$$", right: "$$", display: true }];
 	export let container: boolean = false;
 	export let scale: number = 1;
 	export let min_width: number | undefined = undefined;
@@ -74,6 +79,7 @@
 		{selectable}
 		{theme_mode}
 		value={_value}
+		{latex_delimiters}
 		pending_message={loading_status?.status === "pending"}
 		on:change
 		on:select

js/chatbot/src/ChatBot.svelte

@@ -19,6 +19,11 @@
 	let old_value: Array<
 		[string | FileData | null, string | FileData | null]
 	> | null = null;
+	export let latex_delimiters: Array<{
+		left: string;
+		right: string;
+		display: boolean;
+	}> = [{ left: "$$", right: "$$", display: true }];
 	export let pending_message: boolean = false;
 	export let feedback: Array<string> | null = null;
 	export let selectable: boolean = false;
@@ -53,13 +58,12 @@
 			});
 		}
 
-		render_math_in_element(div, {
-			delimiters: [
-				{ left: "$$", right: "$$", display: true },
-				{ left: "$", right: "$", display: false }
-			],
-			throwOnError: false
-		});
+		if (latex_delimiters.length > 0) {
+			render_math_in_element(div, {
+				delimiters: latex_delimiters,
+				throwOnError: false
+			});
+		}
 	});
 
 	$: {

test/test_components.py

@@ -1922,6 +1922,7 @@ def test_component_functions(self):
             "height": None,
             "root_url": None,
             "selectable": False,
+            "latex_delimiters": [{"display": True, "left": "$$", "right": "$$"}],
         }