Allow onclick HTML elements in append_chat

[DavZim]

I have a shiny app where I use shinychat as a frontend for a RAG system. As I want to display sources to the users with nice UX, I would create button links that set some JS value using Shiny.setInputValue(), which is picked up and the appropriate source is rendered elsewhere.

The problem is that somehow somewhere shinychat swallows the onclick element:

library(shiny)

# create sample content
sample_content <- span(
  "This is the sample source content.",
  tags$button(
    class = "btn btn-sm btn-link",
    onclick = "Shiny.setInputValue('from_js', {p: 1, v: Math.random()})",
    "Sample from Page 1"
  )
)

ui <- bslib::page_fillable(
  bslib::layout_columns(
    bslib::card(
      bslib::card_header("Here it is rendered with onclick => works"),
      sample_content
    ),
    bslib::card(
      bslib::card_header("Here it is rendered with shinychat::chat_append => does not work, no onlclick!"),
      shinychat::chat_ui("out")
    )
  )
)

server <- function(input, output, session) {
  shinychat::chat_append(
    "out",
    sample_content,
   session = session
  )
  
  # see if there are any inputs sent from the UI
  shiny::observe({
    print("From JS:")
    print(input$from_js)
    cat("===========\n")
  })
}

shinyApp(ui, server)

When I click on the "raw HTML" button (left side), I see something like this:

[1] "From JS:"
$p
[1] 1

$v
[1] 0.3141059

===========
[1] "From JS:"
$p
[1] 1

$v
[1] 0.6320509

when I click on the shinychat renderd button (right side) nothing is shown, when I inspect the button, I see this HTML source code without the onclick functionality

<button class="btn btn-sm btn-link">Sample from Page 1</button>

is there any way for me as a user to change this behavior or is there another workaround to setting some values from the output of the chat system?

[gadenbuie]

when I inspect the button, I see this HTML source code without the onclick functionality

Thanks for asking @DavZim! Because the chat input combines input from the user and an LLM, we sanitize HTML elements in the chat messages. I haven't explicitly checked but I'm fairly certain the sanitization is removing the onclick attribute.

is there any way for me as a user to change this behavior or is there another workaround to setting some values from the output of the chat system?

Given the diversity of inputs, I don't see us removing this restriction in the future. Instead, I'd recommend using data attributes and using event handlers farther up the DOM (i.e. at the level of the chat container) to catch and handle click events.

[DavZim]

is there maybe a way to make the sanitization optional?

[gadenbuie]

is there maybe a way to make the sanitization optional?

No, not currently. It's something we'll consider as we work on shinychat, but given the source of the content I think we're unlikely to move away from the current approach.

[DavZim]

For reference, this is how one could do it with data attributes and event handlers in DOM:

library(shiny)

# create sample content with data attribute
sample_content <- span(
  "This is the sample source content.",
  tags$button(
    class = "btn btn-sm btn-link",
    `data-action` = "sample-click", # if you want to have different actions or only specific elements
    `data-page` = "1", # in this case this is picked up by JS and handed over to R
    "Sample from Page 1"
  )
)

# JS code that attaches click events to the elements that have a specific data-action
# and are within a specific container
js <- "
Shiny.addCustomMessageHandler('bindClickEvents', function(message) {
  document.querySelector('#' + message.container_id).addEventListener('click', function(event) {
    if (event.target && event.target.dataset.action === message.action) {
       Shiny.setInputValue(message.target, {p: event.target.dataset.page, v: Math.random()});
    }
  });
});
"


ui <- bslib::page_fillable(
  # Include the JavaScript in the UI
  tags$head(tags$script(HTML(js))),
  
  shinychat::chat_ui("out")
)

server <- function(input, output, session) {
  # add the click events
  session$sendCustomMessage(
    type = "bindClickEvents",
    message = list(
      container_id = session$ns("out"), # references the chat-ui ID
      action = "sample-click", # data-action attribute to apply the click events to
      target = session$ns("from_js") # shiny input ID to send the data to, eg input$from_js
    )
  )
  
  shinychat::chat_append(
    "out",
    sample_content,
    session = session
  )
  
  # see if there are any inputs sent from the UI
  shiny::observe({
    print("From JS:")
    print(input$from_js)
    cat("===========\n")
  })
}

shinyApp(ui, server)