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

Using Streamlit
1

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

image
image1380×776 48.4 KB

2

This method still works as of streamlit 1.30

3

@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

image
image1484×952 10.1 KB

image
image1548×1760 225 KB

4

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

image
image1494×1030 11.7 KB

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.

image
image1722×216 42.2 KB

1 Like
5

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

2 Likes
6

Is there a way to make it version independent?

7

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>
"""
)
8

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.

9

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

image
image2738×1376 301 KB

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

10

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

11

This one for example:

image
image969×473 51.6 KB

12

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:

image
image2078×668 151 KB

1 Like
13

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.