fix(Chat, MarkdownStream): prevent escaping of HTML inside message content strings (#1939)

Author: cpsievert

shiny/ui/_chat.py

@@ -18,7 +18,7 @@
 )
 from weakref import WeakValueDictionary
 
-from htmltools import HTML, Tag, TagAttrValue, TagChild, TagList, css
+from htmltools import HTML, RenderedHTML, Tag, TagAttrValue, TagChild, TagList, css
 
 from .. import _utils, reactive
 from .._deprecated import warn_deprecated
@@ -1458,7 +1458,12 @@ def chat_ui(
             if "role" in x:
                 role = x["role"]
 
-        ui = TagList(content).render()
+        # `content` is most likely a string, so avoid overhead in that case
+        # (it's also important that we *don't escape HTML* here).
+        if isinstance(content, str):
+            ui: RenderedHTML = {"html": content, "dependencies": []}
+        else:
+            ui = TagList(content).render()
 
         if role == "user":
             tag_name = "shiny-user-message"

shiny/ui/_markdown_stream.py

@@ -1,7 +1,7 @@
 from contextlib import asynccontextmanager
 from typing import AsyncIterable, Iterable, Literal, Union
 
-from htmltools import TagChild, TagList, css
+from htmltools import RenderedHTML, TagChild, TagList, css
 
 from .. import _utils, reactive
 from .._deprecated import warn_deprecated
@@ -353,7 +353,13 @@ def output_markdown_stream(
     height
         The height of the UI element.
     """
-    ui = TagList(content).render()
+
+    # `content` is most likely a string, so avoid overhead in that case
+    # (it's also important that we *don't escape HTML* here).
+    if isinstance(content, str):
+        ui: RenderedHTML = {"html": content, "dependencies": []}
+    else:
+        ui = TagList(content).render()
 
     return Tag(
         "shiny-markdown-stream",

tests/playwright/shiny/components/chat/input-suggestion/app.py

@@ -1,21 +1,19 @@
 from shiny.express import ui
 
-welcome = """
+suggestions1 = """
 <p>Here is the <span id="first" class='suggestion'>1st input suggestion</span>.
-And here is a <span id="second" data-suggestion='The actual suggestion'>2nd suggestion</span>.
+And here is a <span id="second" class='suggestion' data-suggestion='The actual suggestion'>2nd suggestion</span>.
 Finally, a <img id="third" data-suggestion='A 3rd, image-based, suggestion' src='shiny-hex.svg' height="50px" alt='Shiny logo'> image suggestion.</p>
+"""
 
+suggestion2 = """
 <p>On the other hand, <span id="fourth" class="suggestion submit">this suggestion will auto-submit</span>.
 And <span id="fifth" data-suggestion="another suggestion" data-suggestion-submit="true">this suggestion will also auto-submit</span>.</p>
 """
 
-chat = ui.Chat(
-    "chat",
-    messages=[welcome],
-)
-
+chat = ui.Chat("chat", messages=[suggestion2])
 
-chat.ui()
+chat.ui(messages=[suggestions1])
 
 
 @chat.on_user_submit