fix loop

js/statustracker/package.json

@@ -18,7 +18,7 @@
 		"@gradio/atoms": "workspace:^",
 		"@gradio/icons": "workspace:^",
 		"@gradio/utils": "workspace:^",
-		"@gradio/markdown": "workspace:^"
+		"dompurify": "^3.0.3"
 	},
 	"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,26 @@
 	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 +76,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>