[Feature]: Allow Chat UI to display raw HTML using ui.HTML (and maybe improve app-wide markdown settings)

[sebovzeoueb]

Category

UI Components

Scope

Minor Enhancement

Problem

I was expecting this code to allow me to apply custom markdown rendering to the output from my chatbot, but it doesn't:

from markdown_it import MarkdownIt
from mdit_py_plugins import attrs

md = MarkdownIt("gfm-like").use(attrs.attrs_plugin)

app_ui = ui.page_auto(
    ui.chat_ui("prompter_chat"),
    ui.markdown('[Google](<https://www.google.com>){target="_blank"}', render_func=md.render)
)

def server(input: Inputs, output: Outputs, session: Session):
    chat = ui.Chat(id="prompter_chat")

    @chat.transform_assistant_response
    def render_md(s: str):
        print(md.render(s))
        return ui.HTML(md.render(f"Rendered:\n\n{s}"))
    
    @chat.on_user_submit
    async def on_chat_submit(user_input: str):
        await chat.append_message('[Google](<https://www.google.com>){target="_blank"}')
        

app = App(app_ui, server)

You can see for reference the proper render being displayed under the chat. You'll notice that the same markdown in the chat has the target="blank" stripped out by sanitization.

It's implied in the documentation that ui.HTML will allow strings to be interpreted as raw HTML, but it is still sanitizing it. I want to be able to customize the markdown rendering for the chat like I do with other elements to support some custom elements like opening links in a new tab.

Solution

I have a few different ideas about how this could be handled best:

• I would really love a top-level markdown configuration that applies globally to the whole app, I don't really like having to assign my custom renderer everywhere. I've come across this while using Nuxt.js and I'm sure other frameworks do it too.
• You could allow us to pass in a render_func to the chat UI like we can in the markdown UI.
• Make ui.HTML strings bypass sanitization.

All 3 of the above could co-exist!

Alternatives (Optional)

No response

Example (Optional)

Impact (Optional)

Being able to adjust the markdown settings more easily would give users a lot more flexibility for customizing the UI without having to dabble in building Shiny components.

Contribution? (Optional)

None