Как выровнять текст по левой стороне при применении реверса строк ⇐ CSS

[Anonymous]

Я создаю чат-бота, используя Python и Streamlit. Я хочу, чтобы в чате сообщения пользователей отображались справа, а сообщения ботов — слева. Для этого я использую CSS с перестановкой строк, но размер текста и размер сообщения чата не меняются так, как я хочу.
Вот CSS, который я пробовал:< /p>
Для сообщений пользователей:

Код: Выделить всё

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

}

Для сообщений ботов (выделены черным)

Код: Выделить всё

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

}

Для воспроизведения кода я использую код по ссылке ниже:
https://docs.streamlit.io/develop/tutorials /llms/build-conversational-apps
(см. раздел Создание приложения, подобного ChatGPT)

Код: Выделить всё

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"{source.read()}",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})

Вывод, который я получаю


Ожидаемый результат должен быть чем-то похож на изображение ниже. Слева — сообщения ботов, справа — сообщения пользователей.

< /п>

Подробнее здесь: https://stackoverflow.com/questions/786 ... is-applied