Fix dependency loop with statustracker and markdown (#8821)

* fix loop

* add changeset

* add changeset

* format

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

.changeset/swift-ghosts-spend.md

@@ -0,0 +1,6 @@
+---
+"@gradio/statustracker": patch
+"gradio": patch
+---
+
+feat:Fix dependency loop with statustracker and markdown 

js/statustracker/package.json

@@ -18,7 +18,8 @@
 		"@gradio/atoms": "workspace:^",
 		"@gradio/icons": "workspace:^",
 		"@gradio/utils": "workspace:^",
-		"@gradio/markdown": "workspace:^"
+		"dompurify": "^3.0.3",
+		"@types/dompurify": "^3.0.2"
 	},
 	"devDependencies": {
 		"@gradio/preview": "workspace:^"

js/statustracker/static/ToastContent.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Error, Info, Warning } from "@gradio/icons";
-	import { MarkdownCode } from "@gradio/markdown";
+	import DOMPurify from "dompurify";
 	import { createEventDispatcher, onMount } from "svelte";
 	import { fade } from "svelte/transition";
 	import type { ToastMessage } from "./types";
@@ -11,6 +11,25 @@
 	export let duration: number | null = 10;
 	export let visible = true;
 
+	const is_external_url = (link: string | null): boolean => {
+		try {
+			return !!link && new URL(link, location.href).origin !== location.origin;
+		} catch (e) {
+			return false;
+		}
+	};
+
+	DOMPurify.addHook("afterSanitizeAttributes", function (node) {
+		if ("target" in node) {
+			if (is_external_url(node.getAttribute("href"))) {
+				node.setAttribute("target", "_blank");
+				node.setAttribute("rel", "noopener noreferrer");
+			}
+		}
+	});
+
+	$: message = DOMPurify.sanitize(message);
+
 	$: display = visible;
 	$: duration = duration || null;
 
@@ -56,7 +75,7 @@
 	<div class="toast-details {type}">
 		<div class="toast-title {type}">{type}</div>
 		<div class="toast-text {type}">
-			<MarkdownCode {message} chatbot={false} render_markdown={false} />
+			{@html message}
 		</div>
 	</div>