Adds Latex Delimiters Parameter (#4516)

* katex

* changes

* format

* fix test

* remove None

* changelog

* Update gradio/components/chatbot.py

* Update gradio/components/chatbot.py

* tweak

---------

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
Co-authored-by: pngwn <hello@pngwn.io>

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:
 
@@ -49,6 +50,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 @@ class Chatbot(Changeable, Selectable, IOComponent, JSONSerializable):
         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 @@ class Chatbot(Changeable, Selectable, IOComponent, JSONSerializable):
         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 @@ class Chatbot(Changeable, Selectable, IOComponent, JSONSerializable):
             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 (str), "right": close delimiter (str), "display": whether to display in newline (bool)} that will be used to render LaTeX expressions. If not provided, `latex_delimiters` is set to `[{ "left": "$$", "right": "$$", "display": True }]`, so only expressions enclosed in $$ delimiters will be rendered as LaTeX, 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 @@ class Chatbot(Changeable, Selectable, IOComponent, JSONSerializable):
         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 @@ class Chatbot(Changeable, Selectable, IOComponent, JSONSerializable):
     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;
+	}>;
 	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;
+	}>;
 	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 @@ class TestChatbot:
             "height": None,
             "root_url": None,
             "selectable": False,
+            "latex_delimiters": [{"display": True, "left": "$$", "right": "$$"}],
         }