Add User Icon or Avatar for shinychat

[jlxAtNovozymes]

Hi, is that possible to add user icon or avatar to make conversation more fancy! because now I made a chatbot with shinychat and ellmer and ragnar, which support tool calling and RAG. that app serves for such a big team, we hope that during conversation, when every user log in, that app can display their avatar or icon, thanks a lot for your work. shinychat is so fantastic

[cpsievert]

Hi @jlxAtNovozymes — great to hear shinychat + ellmer + ragnar is serving your team well! 🎉

Good news: custom icons/avatars are already supported. The assistant icon is fully customizable via the icon_assistant argument to chat_ui() — pass any HTML or tag (including an <img>), and shinychat renders images as full-bleed circular avatars for you. Use your company logo, a product mascot, whatever fits:

library(shiny)
library(bslib)
library(shinychat)

ui <- page_fillable(
  chat_ui(
    "chat",
    icon_assistant = tags$img(src = "assistant-avatar.png", alt = "Assistant"),
    fill = TRUE
  )
)

server <- function(input, output, session) {
  observeEvent(input$chat_user_input, {
    # ...stream your ellmer/ragnar response here...
    chat_append("chat", "Hello!")
  })
}

shinyApp(ui, server)

You can also override the icon for an individual message with chat_append("chat", stream, icon = ...).

For the logged-in user's avatar on their own messages, there isn't a dedicated argument yet, but you can add one today with a little CSS targeting .shiny-chat-user-message. Since you know each user at login, inject their avatar URL into a CSS variable for their session:

ui <- page_fillable(
  tags$head(tags$style(HTML(sprintf("
    .shiny-chat-user-message {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 2rem;
      gap: 0.75rem;
      align-items: end;
      background-color: transparent;
      padding: 0;
    }
    .shiny-chat-user-message .shiny-chat-message-content {
      background-color: var(--shiny-chat-user-message-bg);
      padding: 0.75rem 1rem;
      border-radius: 10px;
    }
    .shiny-chat-user-message::after {
      content: '';
      width: 2rem; height: 2rem;
      border-radius: 50%%;
      background: center / cover no-repeat url('%s');
    }
  ", user_avatar_url)))),
  chat_ui("chat", icon_assistant = tags$img(src = "assistant-avatar.png"), fill = TRUE)
)

That gives each user a circular avatar next to their messages, alongside your custom assistant icon. Hope that helps — let us know how it goes!