Ensure Chatbot theme text size is set correctly (#6958)

* set font size to text body variable

* revert comment

* add changeset

* remove line height

* add function to adjust body text size to prevent breaking change

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>

.changeset/swift-cooks-wish.md

@@ -0,0 +1,6 @@
+---
+"@gradio/chatbot": patch
+"gradio": patch
+---
+
+fix:Ensure Chatbot theme text size is set correctly

js/chatbot/shared/ChatBot.svelte

@@ -52,6 +52,34 @@
 	let div: HTMLDivElement;
 	let autoscroll: boolean;
 
+	$: adjust_text_size = () => {
+		let style = getComputedStyle(document.body);
+		let body_text_size = style.getPropertyValue("--body-text-size");
+		let updated_text_size;
+
+		switch (body_text_size) {
+			case "13px":
+				updated_text_size = 14;
+				break;
+			case "14px":
+				updated_text_size = 16;
+				break;
+			case "16px":
+				updated_text_size = 20;
+				break;
+			default:
+				updated_text_size = 14;
+				break;
+		}
+
+		document.body.style.setProperty(
+			"--chatbot-body-text-size",
+			updated_text_size + "px"
+		);
+	};
+
+	$: adjust_text_size();
+
 	const dispatch = createEventDispatcher<{
 		change: undefined;
 		select: SelectData;
@@ -306,8 +334,7 @@
 		background: var(--background-fill-secondary);
 		width: calc(100% - var(--spacing-xxl));
 		color: var(--body-text-color);
-		font-size: var(--text-lg);
-		line-height: var(--line-lg);
+		font-size: var(--chatbot-body-text-size);
 		overflow-wrap: break-word;
 		overflow-x: hidden;
 		padding-right: calc(var(--spacing-xxl) + var(--spacing-md));