Katex support in chatbot (#4285)

* katex

* katex support

* changelog

* fixes

* pr fixes

---------

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

CHANGELOG.md

@@ -16,6 +16,7 @@ No changes to highlight.
 - Refactor web component `initial_height` attribute by [@whitphx](https://github.com/whitphx) in [PR 4223](https://github.com/gradio-app/gradio/pull/4223)
 - Relocate `mount_css` fn to remove circular dependency [@whitphx](https://github.com/whitphx) in [PR 4222](https://github.com/gradio-app/gradio/pull/4222)
 - Upgrade Black to 23.3 by [@akx](https://github.com/akx) in [PR 4259](https://github.com/gradio-app/gradio/pull/4259)
+- Add frontend LaTeX support in `gr.Chatbot()` using `KaTeX` by [@dawoodkhan82](https://github.com/dawoodkhan82) in [PR 4285](https://github.com/gradio-app/gradio/pull/4285).
 - `Interface.launch()` and `Blocks.launch()` now accept an `app_kwargs` argument to allow customizing the configuration of the underlying FastAPI app, by [@akx](https://github.com/akx) in [PR 4282](https://github.com/gradio-app/gradio/pull/4282)
 
 ## Breaking Changes:

js/chatbot/package.json

@@ -15,6 +15,8 @@
 		"marked": "^5.0.1",
 		"@types/marked": "^4.3.0",
 		"prismjs": "1.29.0",
-		"@types/prismjs": "1.26.0"
+		"@types/prismjs": "1.26.0",
+		"katex": "^0.16.7",
+		"@types/katex": "^0.16.0"
 	}
 }

js/chatbot/src/ChatBot.svelte

@@ -2,6 +2,9 @@
 	import { marked } from "marked";
 	import Prism from "prismjs";
 	import "prismjs/components/prism-python";
+	import "prismjs/components/prism-latex";
+	import "katex/dist/katex.min.css";
+	import render_math_in_element from "katex/dist/contrib/auto-render.js";
 	import { beforeUpdate, afterUpdate, createEventDispatcher } from "svelte";
 	import type { Styles, SelectData } from "@gradio/utils";
 	import type { ThemeMode } from "js/app/src/components/types";
@@ -30,8 +33,9 @@
 	} else {
 		code_highlight_css.light();
 	}
+	const marked_renderer = new marked.Renderer();
 	marked.setOptions({
-		renderer: new marked.Renderer(),
+		renderer: marked_renderer,
 		gfm: true,
 		breaks: true,
 		pedantic: false,
@@ -91,6 +95,14 @@
 			node.style.position = "relative";
 			node.appendChild(copy_div);
 		});
+
+		render_math_in_element(div, {
+			delimiters: [
+				{ left: "$$", right: "$$", display: true },
+				{ left: "$", right: "$", display: false }
+			],
+			throwOnError: false
+		});
 	});
 
 	$: {
@@ -353,4 +365,9 @@
 	.message-wrap :global(ul) {
 		padding-inline-start: 2em;
 	}
+
+	/* KaTeX */
+	.message-wrap :global(span.katex) {
+		font-size: var(--text-lg);
+	}
 </style>

js/chatbot/src/autorender.d.ts

@@ -0,0 +1 @@
+declare module "katex/dist/contrib/auto-render.js";

pnpm-lock.yaml

@@ -370,12 +370,18 @@ importers:
       '@gradio/utils':
         specifier: workspace:^0.0.1
         version: link:../utils
+      '@types/katex':
+        specifier: ^0.16.0
+        version: 0.16.0
       '@types/marked':
         specifier: ^4.3.0
         version: 4.3.0
       '@types/prismjs':
         specifier: 1.26.0
         version: 1.26.0
+      katex:
+        specifier: ^0.16.7
+        version: 0.16.7
       marked:
         specifier: ^5.0.1
         version: 5.0.1
@@ -1920,6 +1926,10 @@ packages:
     resolution: {integrity: sha512-qC4bCqYGy1y/NP7dDVr7KJarn+PbX1nSpwA7JXdu0HxT3QYjO8MJ+cntENtHFVy2dRAyBV23OZ6MxsW1AM1L8g==}
     dev: false
 
+  /@types/katex@0.16.0:
+    resolution: {integrity: sha512-hz+S3nV6Mym5xPbT9fnO8dDhBFQguMYpY0Ipxv06JMi1ORgnEM4M1ymWDUhUNer3ElLmT583opRo4RzxKmh9jw==}
+    dev: false
+
   /@types/marked@4.3.0:
     resolution: {integrity: sha512-zK4gSFMjgslsv5Lyvr3O1yCjgmnE4pr8jbG8qVn4QglMwtpvPCf4YT2Wma7Nk95OxUUJI8Z+kzdXohbM7mVpGw==}
     dev: false
@@ -2630,6 +2640,11 @@ packages:
     engines: {node: '>= 10'}
     dev: false
 
+  /commander@8.3.0:
+    resolution: {integrity: sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==}
+    engines: {node: '>= 12'}
+    dev: false
+
   /commander@9.4.1:
     resolution: {integrity: sha512-5EEkTNyHNGFPD2H+c/dXXfQZYa/scCKasxWcXJaWnNJ99pnQN9Vnmqow+p+PlFPE63Q6mThaZws1T+HxfpgtPw==}
     engines: {node: ^12.20.0 || >=14}
@@ -4325,6 +4340,13 @@ packages:
       graceful-fs: 4.2.9
     dev: false
 
+  /katex@0.16.7:
+    resolution: {integrity: sha512-Xk9C6oGKRwJTfqfIbtr0Kes9OSv6IFsuhFGc7tW4urlpMJtuh+7YhzU6YEG9n8gmWKcMAFzkp7nr+r69kV0zrA==}
+    hasBin: true
+    dependencies:
+      commander: 8.3.0
+    dev: false
+
   /kind-of@6.0.3:
     resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==}
     engines: {node: '>=0.10.0'}