DOM manipulation using js script in streamlit does not works

Using Streamlit
, ,
1

Task: changing image icon on assistant bubble chat.

I am using
st.chat_message → for chat conversation. In this function we can change the icon with emoji, but I can not to change the icon with my own custom image.

What I’ve done:

  1. Trying to do DOM manipulation.
    Write JS script, embed js script to streamlit interface code.
  • here is the js script
var divIconAssistant = document.getElementsByClassName("st-emotion-cache-1dgsum0 e2yddhz2");
var imgIconAssistant = document.createElement("img");
imgIconAssistant.setAttribute("src", "https://<myimage>.png");
imgIconAssistant.setAttribute("height", 20);
imgIconAssistant.setAttribute("width", "auto");
imgIconAssistant.setAttribute("alt", "icon-bot");
divIconAssistant[0].innerHTML = "";
divIconAssistant[0].appendChild(imgIconAssistant);
  • here how I use this script to my streamlit
    (first way)
with open("./dom.js") as js_file:
    js_text = js_file.read()
    st.markdown(f'<script>{js_text}</script>', unsafe_allow_html=True)
    pass

result => no changes, like not affect the UI, no error in console inspect element

(second way)

import streamlit.components.v1 as components
with open("./dom.js") as js_file:
    js_text = js_file.read()
    components.html(f'<script>{js_text}</script>')
    pass

result => there is a change like strange space take on top of my element (see image). and on the console showed these error (see image)

image
image843×322 24.3 KB

image
image1005×748 16.6 KB

what I’m using:
python=3.10.16
streamlit=1.41.1