I’m making a chat bot using Python and Streamlit. I want the chat to show User messages on the right side and Bot messages on the left side. I’m using CSS with row-reversed for this, but the text size and chat message size aren’t changing as I want.

Here’s the CSS I tried:

For User messages:

div.stChatMessage.st-emotion-cache-1c7y2kd.eeusbqq4
{ 
    width: 350px;
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    justify-content: flex-end;
 
}

For Bot messages (highlighted in black)

div.stChatMessage.st-emotion-cache-4oy321.eeusbqq4
{
    background-color: hsla(208, 29%, 78%, 0.66);
    border: 1px solid transparent;
    width: 550px;
    border-radius: 25px;
    
}

For reporducing the code, I am using the code from the link below:

https://docs.streamlit.io/develop/tutorials/llms/build-conversational-apps

(refer Build a ChatGPT-like app section)

from openai import OpenAI
import streamlit as st


st.title("ChatGPT-like clone")

client = OpenAI(api_key=st.secrets["OPENAI_API_KEY"])


with open ('design.css') as source:
    st.markdown(f"<style>{source.read()}</style>",unsafe_allow_html=True)

if "openai_model" not in st.session_state:
    st.session_state["openai_model"] = "gpt-3.5-turbo"

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

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

    with st.chat_message("assistant"):
        stream = client.chat.completions.create(
            model=st.session_state["openai_model"],
            messages=[
                {"role": m["role"], "content": m["content"]}
                for m in st.session_state.messages
            ],
            stream=True,
        )
        response = st.write_stream(stream)
    st.session_state.messages.append({"role": "assistant", "content": response})

The output I am getting

The Output expected should be somewhat similar to the below image. Left side Bot messages and on right side the user messages.