How to display user and assistant chat on opposite sides when streaming like a conversation

[ka96]

I’m trying to display user and assistant chat on opposite sides when streaming like a conversation. Normally this is enabled by setting is_user=True in the message component. is_user=True displays the message from user on left and assistant on right
but while streaming is enabled we display content (user or assistant) message using st.markdown. In this case what is the workaround to setup something similar to the capability mentioned

message_placeholder = st.empty()
.
.
message_placeholder.markdown(full_response)

i’m trying to achieve something like this image

[blackary]

This method still works as of streamlit 1.30

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_…

[ka96]

@blackary
What is the streamlit-chat you are working with? I tried executing this code block but mine were all aligned on the same side

[blackary]

This works for me on 1.31.0, with a slightly different class name

import streamlit as st

st.write("Streamlit version", st.__version__)

st.markdown(
    """
<style>
    .st-emotion-cache-4oy321 {
        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_message(message["author"]):
        st.write(message["message"])

I updated it from the 1.30 version by inspecting the bot chats, and figuring out what the class name on them was.

[Harshk97]

For 1.32.0, with a different class name

st.markdown(
            """
        <style>
            .st-emotion-cache-1c7y2kd {
                flex-direction: row-reverse;
                text-align: right;
            }
        </style>
        """,
            unsafe_allow_html=True,
        )

The above works for me in 1.32.0

Thank you @blackary

[KrishnaKasula]

Is there a way to make it version independent?

[blackary]

This should be fairly independent of versions, and works by inserting an empty span with a specific class into each chat message, and then styling based on that class (in this case, it looks for a message that contains something the class chat-assistant)

import streamlit as st

st.write("Streamlit version", st.__version__)

messages = [
    {
        "author": "user",
        "message": "hi",
    },
    {"author": "assistant", "message": "I'm a bot"},
] * 3

for message in messages:
    with st.chat_message(message["author"]):
        st.html(f"<span class='chat-{message['author']}'></span>")
        st.write(message["message"])


st.html(
    """
<style>
    .stChatMessage:has(.chat-assistant) {
        flex-direction: row-reverse;
        text-align: right;
    }
</style>
"""
)

[Amrith_Parthasarathy]

Hi @blackary,

Do you tried any other solution as this methods takes st.emotion_cache as caches where it works only in local host. If we try it with Network URL or Deployment, the cache is changing from system-to-system…!

Do you have any solution for all.

[blackary]

Hi @Amrith_Parthasarathy,

I believe the most reliable way to do this is:

1. Make sure you are using the same version of streamlit locally and when deployed. This should ensure that you will get the same classes on everything. You can ensure this on Community Cloud by adding streamlit==<some version> in requirements.txt, and installing that same version locally.
2. Though my version above should still work, you can now add a class implicitly by adding a container with a key, like this:
   Playground app

If you use this new method, that should work in all future versions of streamlit.

[Amrith_Parthasarathy]

Hi actually, I didn’t deploy yet.

I tried with Network URL in another system. But the emotion-cache like “st-emotion-cache-1wmy9hl e1f1d6gn1 for user content” that automatically generated in my browser as cache.

This is chaning from browsert to browser. How to make it same for all the browser. This is the problem i facing…

This is why it changes…!

[Amrith_Parthasarathy]

This one for example:

[mathcatsand]

I don’t recommend trying to use the st-emotion classes whenever possible and instead focus on classes and data-ids that have friendlier names without hashes.

From Streamlit 1.40.2, here’s some better classes or data-ids to grab from: