Make st.chat_input show up at the bottom even if used in a tab

[XinyueZ]

Checklist

• I have searched the existing issues for similar issues.
• I added a very descriptive title to this issue.
• I have provided sufficient information below to help reproduce this issue.

Summary

The code shown in https://docs.streamlit.io/develop/tutorials/llms/build-conversational-apps
will not work when we use st.tabs to use a tab to host chat ui.

The st.chat_input goes to top instead bottom.

Reproducible Code Example

import os
import streamlit as st
from openai import OpenAI

tab1, tab2 = st.tabs(["Dashboard", "Chat"])
with tab1:
    st.write("Dashboard")
with tab2:
    key_from_export = os.getenv("OPENAI_API_KEY")
    client = OpenAI(api_key=key_from_export)
    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})

Steps To Reproduce

Just run this

Expected Behavior

No response

Current Behavior

No response

Is this a regression?

• Yes, this used to work in a previous version.

Debug info

• Streamlit version:
• Python version:
• Operating System:
• Browser:

Additional Information

No response

[github-actions]

If this issue affects you, please react with a 👍 (thumbs up emoji) to the initial post.

Your feedback helps us prioritize which bugs to investigate and address first.

[github-actions]

To help Streamlit prioritize this feature, react with a 👍 (thumbs up emoji) to the initial post.

Your vote helps us identify which enhancements matter most to our users.

[jrieke]

Hey! That's expected behavior. If you're using the chat input in a container (e.g. st.tabs) it will show up inline like any other element. Since you're creating the chat input before the chat messages, it will show up above them.

We will soon add a position parameter that lets you change that behavior manually. So I'm going to convert this to a feature request and adapt the title.

Right now the only ways to work around this are:

1. Create the chat input outside of the tab. Then it should show up at the bottom of the app, just like in that example. Note that it will only show up on tab 1 though (since it's outside of the normal layout flow).

tab1, tab2 = st.tabs(["Dashboard", "Chat"])
prompt = st.chat_input(...)

with tab1:
   ...
with tab2:
   ...

2. Put the chat messages in a container above the chat input.

tab1, tab2 = st.tabs(["Dashboard", "Chat"])

with tab1:
   ...
with tab2:
   ...
   chat_container = st.container(height=300)
   prompt = st.chat_input("What is up?")
   ...
   # and replace every `st.chat_message` call with `chat_container.chat_message` 
   # so the chat messages show up in the container
   

[XinyueZ]

@jrieke
Thank you, but I have to say, putting it at the top is totally anti-UX, which means this should not be the so-called "expected behavior", but still thank you for your reply and info.