Anchor/stick the most recent user message to the top of a container

Using Streamlit
,
1

Hello, I am trying to keep the most recent user message at the top of a container, preventing auto scroll going to the bottom of the assistant response and pushing the user message out of view.

I want my chatbot functionality to behave similarly to how ChatGPT or Gemini displays their chats.

I don’t know if this can be achieved by anchoring, or making this message sticky.

Here’s some code to work with:

import streamlit as st

st.title("Echo Bot")

chat_container = st.container(height = 400)

# Initialize chat history
if "messages" not in st.session_state:
    st.session_state.messages = []


with chat_container:
# Display chat messages from history on app rerun
    for message in st.session_state.messages:
        with st.chat_message(message["role"]):
            st.markdown(message["content"])

# React to user input
if prompt := st.chat_input("What is up?"):
    with chat_container:
        # Display user message in chat message container
        st.chat_message("user").markdown(prompt)
        # Add user message to chat history
        st.session_state.messages.append({"role": "user", "content": prompt})

    with chat_container:
    # Display assistant response in chat message container
        with st.chat_message("assistant"):
            response = f"Echo: {(prompt + ' ') * 200}"
            st.markdown(response)
    # Add assistant response to chat history
    st.session_state.messages.append({"role": "assistant", "content": response})