Allow HTML in alert modals (#8817)

* success

* add changeset

* add changeset

* link styling

* sanitize

* format

---------

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

.changeset/rotten-years-buy.md

@@ -0,0 +1,6 @@
+---
+"@gradio/statustracker": patch
+"gradio": patch
+---
+
+feat:Allow HTML in alert modals

gradio/exceptions.py

@@ -83,7 +83,7 @@ class Error(Exception):
     ):
         """
         Parameters:
-            message: The error message to be displayed to the user.
+            message: The error message to be displayed to the user. Can be HTML, which will be rendered in the modal.
             duration: The duration in seconds to display the error message. If None or 0, the error message will be displayed until the user closes it.
             visible: Whether the error message should be displayed in the UI.
         """

gradio/helpers.py

@@ -1284,7 +1284,7 @@ def Warning(  # noqa: N802
     This function allows you to pass custom warning messages to the user. You can do so simply by writing `gr.Warning('message here')` in your function, and when that line is executed the custom message will appear in a modal on the demo. The modal is yellow by default and has the heading: "Warning." Queue must be enabled for this behavior; otherwise, the warning will be printed to the console using the `warnings` library.
     Demos: blocks_chained_events
     Parameters:
-        message: The warning message to be displayed to the user.
+        message: The warning message to be displayed to the user. Can be HTML, which will be rendered in the modal.
         duration: The duration in seconds that the warning message should be displayed for. If None or 0, the message will be displayed indefinitely until the user closes it.
         visible: Whether the error message should be displayed in the UI.
     Example:
@@ -1310,7 +1310,7 @@ def Info(  # noqa: N802
     This function allows you to pass custom info messages to the user. You can do so simply by writing `gr.Info('message here')` in your function, and when that line is executed the custom message will appear in a modal on the demo. The modal is gray by default and has the heading: "Info." Queue must be enabled for this behavior; otherwise, the message will be printed to the console.
     Demos: blocks_chained_events
     Parameters:
-        message: The info message to be displayed to the user.
+        message: The info message to be displayed to the user. Can be HTML, which will be rendered in the modal.
         duration: The duration in seconds that the info message should be displayed for. If None or 0, the message will be displayed indefinitely until the user closes it.
         visible: Whether the error message should be displayed in the UI.
     Example:

guides/01_getting-started/02_key-features.md

@@ -93,9 +93,9 @@ Similarly, Gradio can handle streaming inputs, e.g. a live audio stream that can
 
 ## Alert modals
 
-You may wish to raise alerts to the user. To do so, raise a `gr.Error("custom message")` to display an error message. You can also issue `gr.Warning("message")` and `gr.Info("message")` by having them as standalone lines in your function, which will immediately display modals while continuing the execution of your function. Queueing needs to be enabled for this to work.
+You may wish to raise alerts to the user. To do so, raise a `gr.Error(message)` to display an error message. You can also issue `gr.Warning(message)` and `gr.Info(messag")` by having them as standalone lines in your function, which will immediately display modals while continuing the execution of your function. 
 
-Note below how the `gr.Error` has to be raised, while the `gr.Warning` and `gr.Info` are single lines.
+Note below how the `gr.Error` has to be raised, while the `gr.Warning` and `gr.Info` are regular Python functions. Note as well that the message string can include HTML, which will be rendered inside the alert modal.
 
 ```python
 def start_process(name):
@@ -104,7 +104,7 @@ def start_process(name):
         gr.Warning("Name is empty")
     ...
     if success == False:
-        raise gr.Error("Process failed")
+        raise gr.Error("Process <b>failed</b>")
 ```
 
 

js/statustracker/package.json

@@ -17,7 +17,8 @@
 	"dependencies": {
 		"@gradio/atoms": "workspace:^",
 		"@gradio/icons": "workspace:^",
-		"@gradio/utils": "workspace:^"
+		"@gradio/utils": "workspace:^",
+		"@gradio/markdown": "workspace:^"
 	},
 	"devDependencies": {
 		"@gradio/preview": "workspace:^"

js/statustracker/static/ToastContent.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { Error, Info, Warning } from "@gradio/icons";
+	import { MarkdownCode } from "@gradio/markdown";
 	import { createEventDispatcher, onMount } from "svelte";
 	import { fade } from "svelte/transition";
 	import type { ToastMessage } from "./types";
@@ -55,7 +56,7 @@
 	<div class="toast-details {type}">
 		<div class="toast-title {type}">{type}</div>
 		<div class="toast-text {type}">
-			{message}
+			<MarkdownCode {message} chatbot={false} render_markdown={false} />
 		</div>
 	</div>
 
@@ -292,4 +293,8 @@
 	.hidden {
 		display: none;
 	}
+
+	.toast-text :global(a) {
+		text-decoration: underline;
+	}
 </style>

pnpm-lock.yaml

@@ -1822,6 +1822,9 @@ importers:
       '@gradio/icons':
         specifier: workspace:^
         version: link:../icons
+      '@gradio/markdown':
+        specifier: workspace:^
+        version: link:../markdown
       '@gradio/utils':
         specifier: workspace:^
         version: link:../utils