Chat Layout: st.chat_input inside a container

Using Streamlit
, ,
1

Hello,
st.chat_input widget seems perfect to create a chat inside an app. However when I try to integrate the chat input inside any container, it remains on top instead of at the bottom of the conversation. Other posts discuss the issue but the bar still stubbornly remains on top. Wondered if anyone found a simple workaround since?

2

This simple code puts the chat input, integrated inside a container, at the bottom of the conversation.

with st.container():
    with st.chat_message("ai"):
        st.write("Morning!")
    st.chat_input("Your input here")

What do you mean by “the bar”?

3

I meant chat_input. If I put a simple echo bot in a container, the messages are rendered bellow the input:

Capture d’écran 2025-02-25 à 11.04.10
Capture d’écran 2025-02-25 à 11.04.102190×1390 95.3 KB

import streamlit as st

st.title("Echo Bot")

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

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

with st.container():
    # React to user input
    if prompt := st.chat_input("What is up?"):
        # 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})

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

st.write("Outside container")
4

The messages are rendered both above and below the input, because you are displaying them both before and after the input. You can fix that by getting rid of the messages after the input and updating the messages list in a callback.

5

Thanks, that fixed it!