Markdown stream fixes (#1838)

Author: cpsievert

js/chat/chat.ts

@@ -67,8 +67,9 @@ class ChatMessage extends LightElement {
       <div class="message-icon">${unsafeHTML(icon)}</div>
       <shiny-markdown-stream
         content=${this.content}
-        content_type=${this.content_type}
+        content-type=${this.content_type}
         ?streaming=${this.streaming}
+        auto-scroll
       ></shiny-markdown-stream>
     `;
   }
@@ -81,7 +82,7 @@ class ChatUserMessage extends LightElement {
     return html`
       <shiny-markdown-stream
         content=${this.content}
-        content_type="semi-markdown"
+        content-type="semi-markdown"
       ></shiny-markdown-stream>
     `;
   }

shiny/api-examples/MarkdownStream/app-core.py

@@ -7,7 +7,7 @@
 app_ui = ui.page_fluid(
     ui.card(
         ui.card_header("Shiny's README.md"),
-        ui.output_markdown_stream("shiny-readme"),
+        ui.output_markdown_stream("shiny_readme"),
         height="400px",
         class_="mt-3",
         full_screen=True,
@@ -28,7 +28,7 @@ async def chunk_generator():
             await asyncio.sleep(0.02)
             yield chunk + " "
 
-    md = ui.MarkdownStream("shiny-readme")
+    md = ui.MarkdownStream("shiny_readme")
 
     @reactive.effect
     async def _():

shiny/api-examples/MarkdownStream/app-express.py

@@ -8,7 +8,7 @@
 ui.page_opts(full_width=True)
 
 # Initialize a markdown stream object
-md = ui.MarkdownStream("shiny-readme")
+md = ui.MarkdownStream("shiny_readme")
 
 # Display the stream UI in a card
 with ui.card(height="400px", class_="mt-3", full_screen=True):

shiny/ui/_markdown_stream.py

@@ -5,6 +5,7 @@
 
 from .. import _utils, reactive
 from .._docstring import add_example
+from .._namespaces import resolve_id
 from .._typing_extensions import TypedDict
 from ..session import require_active_session
 from ..types import NotifyException
@@ -71,7 +72,7 @@ def __init__(
         *,
         on_error: Literal["auto", "actual", "sanitize", "unhandled"] = "auto",
     ):
-        self.id = id
+        self.id = resolve_id(id)
         # TODO: remove the `None` when this PR lands:
         # https://github.com/posit-dev/py-shiny/pull/793/files
         self._session = require_active_session(None)
@@ -282,6 +283,6 @@ def output_markdown_stream(
             "content-type": content_type,
             "auto-scroll": "" if auto_scroll else None,
         },
-        id=id,
+        id=resolve_id(id),
         content=content,
     )

shiny/www/py-shiny/chat/chat.js

@@ -10,8 +10,8 @@
     readme_chunks = f.read().replace("\n", " \n ").split(" ")
 
 
-stream = ui.MarkdownStream("shiny-readme")
-stream_err = ui.MarkdownStream("shiny-readme-err")
+stream = ui.MarkdownStream("shiny_readme")
+stream_err = ui.MarkdownStream("shiny_readme_err")
 
 
 async def readme_generator():
@@ -46,7 +46,7 @@ async def _():
     stream_err.ui()
 
 
-basic_stream = ui.MarkdownStream("basic-stream-result")
+basic_stream = ui.MarkdownStream("basic_stream_result")
 basic_stream.ui()
 
 

shiny/www/py-shiny/chat/chat.js.map

@@ -28,7 +28,7 @@ def is_element_scrolled_to_bottom(page: Page, selector: str) -> bool:
 def test_validate_stream_basic(page: Page, local_app: ShinyAppProc) -> None:
     page.goto(local_app.url)
 
-    stream = page.locator("#shiny-readme")
+    stream = page.locator("#shiny_readme")
     expect(stream).to_be_visible(timeout=30 * 1000)
     expect(stream).to_contain_text("pip install shiny")
 
@@ -37,7 +37,7 @@ def test_validate_stream_basic(page: Page, local_app: ShinyAppProc) -> None:
     is_scrolled = is_element_scrolled_to_bottom(page, ".card-body")
     assert is_scrolled, "The card body container should be scrolled to the bottom"
 
-    stream2 = page.locator("#shiny-readme-err")
+    stream2 = page.locator("#shiny_readme_err")
     expect(stream2).to_be_visible(timeout=30 * 1000)
     expect(stream2).to_contain_text("Shiny")