Fix change event listener (#3095)

* changes

* changes

---------

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

CHANGELOG.md

@@ -14,7 +14,7 @@ Previously photos uploaded via iOS would be rotated after processing. This has b
 
 
 ## Bug Fixes:
-No changes to highlight.
+- Fix change event listener for JSON, HighlightedText, Chatbot by [@aliabid94](https://github.com/aliabid94) in [PR 3095](https://github.com/gradio-app/gradio/pull/3095)
 
 ## Documentation Changes:
 No changes to highlight.

ui/packages/app/src/components/HighlightedText/HighlightedText.svelte

@@ -10,6 +10,7 @@
 	export let elem_id: string = "";
 	export let visible: boolean = true;
 	export let value: Array<[string, string | number]>;
+	let old_value: Array<[string, string | number]>;
 	export let show_legend: boolean;
 	export let color_map: Record<string, string> = {};
 	export let label: string;
@@ -23,7 +24,12 @@
 
 	const dispatch = createEventDispatcher<{ change: undefined }>();
 
-	$: value, dispatch("change");
+	$: {
+		if (value !== old_value) {
+			old_value = value;
+			dispatch("change");
+		}
+	}
 </script>
 
 <Block

ui/packages/app/src/components/Json/Json.svelte

@@ -12,13 +12,19 @@
 	export let elem_id: string = "";
 	export let visible: boolean = true;
 	export let value: any;
+	let old_value: any;
 	export let loading_status: LoadingStatus;
 	export let label: string;
 	export let style: Styles = {};
 
 	const dispatch = createEventDispatcher<{ change: undefined }>();
 
-	$: value, dispatch("change");
+	$: {
+		if (value !== old_value) {
+			old_value = value;
+			dispatch("change");
+		}
+	}
 </script>
 
 <Block

ui/packages/chatbot/src/ChatBot.svelte

@@ -4,6 +4,7 @@
 	import type { Styles } from "@gradio/utils";
 
 	export let value: Array<[string, string]> | null;
+	let old_value: Array<[string, string]> | null;
 	export let style: Styles = {};
 	export let pending_message: boolean = false;
 
@@ -29,7 +30,12 @@
 		}
 	});
 
-	$: value && dispatch("change");
+	$: {
+		if (value !== old_value) {
+			old_value = value;
+			dispatch("change");
+		}
+	}
 
 	$: _colors = get_colors();