Avatar for User prompt in st.chat_message on right side

[Amrith_Parthasarathy]

I’m using st.chat_message for displaying both assistantmessage on left (as usual) and user message on right… as like chatgpt.

I use .st-emotion-cache-janbn0 to push the avator on right. But for me in local host this working. but in network url in any other system. the avator is displaying in the left side making the design ackward. since this st-emotion-cache-janbn0 is cache, its changing system to system. how to make this as static in css using streamlit?

I referred this article to build this:

How to Right Justify st.chat_message?

Here’s a way to do it – NOTE that the classes involved may change, but this works today for streamlit 1.28.1 with the current classes import streamlit as st st.markdown( """ <style> .st-emotion-cache-janbn0 { flex-direction: row-reverse; text-align: right; } </style> """, unsafe_allow_html=True, ) messages = [{ "author": "user", "message": "hi", }, { "author": "assistant", "message": "I'm a bot" }] * 3 for message in messages: with st.chat_…

[Amrith_Parthasarathy]

Hi Encrypt thanks for reply, i tried that but my st.chat_message for user is not justified to right side…! I want the ‘assistant’ st.chat_message on left side along with avatar and ‘user’ st.chat_message on right side along with avatar…

I want the design like this:

[mathcatsand]

This may need some refinement depending on the complexity of content within your chat messages, but here’s a starter idea with CSS:

import streamlit as st

st.title("Echo Bot")

if "messages" not in st.session_state:
    st.session_state.messages = []

for message in st.session_state.messages:
    with st.chat_message(message["role"]):
        st.markdown(message["content"])
        st.write("...")

if prompt := st.chat_input("What is up?"):
    st.chat_message("user").markdown(prompt)
    st.session_state.messages.append({"role": "user", "content": prompt})

    response = f"Echo: {prompt}"
    with st.chat_message("assistant"):
        st.markdown(response)
    st.session_state.messages.append({"role": "assistant", "content": response})

CSS = """
.stChatMessage:has([data-testid="stChatMessageAvatarUser"]) {
    display: flex;
    flex-direction: row-reverse;
    align-itmes: end;
}

[data-testid="stChatMessageAvatarUser"] + [data-testid="stChatMessageContent"] {
    text-align: right;
}
"""
st.html(f"<style>{CSS}</style>")

[Amrith_Parthasarathy]

Hi @mathcatsand ,

I tried what you said, but it doesn’t work, i have .st-emotion-cache-janbn0 for this emoji, that works in my local host but not on network URL.

Even i tried replace st-emotion-cache-janbn0 with stChatMessageAvatarUser as per you suggestion but its not working.

[mathcatsand]

What version of Streamlit are you using? I think I was on the latest (1.40.0).

[Amrith_Parthasarathy]

Latest version: streamlit version is 1.40.1.

I think we need to set a standardized way to load images as avator for user instead of emotion-cache

[mathcatsand]

As I mentioned in the other thread, I wouldn’t recommend using emotion cache to grab objects if you can avoid it.

The CSS I wrote above, applies styling to the whole chat message (which contains the user avatar). If you just want the avatar, make sure you use the data-testid since stChatMesageAvatarUser is not a class. (You can’t select it by prefixing it will a period, you need [data-testid="stChatMessageAvatarUser"].