Place Content Beneath st.chat_input() Element

Using Streamlit
1

Hi. I am building a basic chat interface with streamlit, using the st.chat_input() and st.chat_message() widgets. I would like to place some extra content beneath the chat_input() box, but it seems any content is sent to the top of the page.

Here is the code I am using:

for message in st.session_state["messages"][1:]:
    with st.chat_message(message["role"]):
        st.markdown(message["content"])

if prompt := st.chat_input("Type your message..."):
    st.session_state["messages"].append({"role": "user", "content": prompt})
    st.chat_message("user").write(prompt)

    with st.spinner("Thinking..."):
        full_response, total_tokens, prompt_tokens, completion_tokens = generate_response(prompt)
        
    st.chat_message("assistant").write(full_response)
    st.session_state["messages"].append({"role": "assistant", "content": full_response})

st.markdown("Some content") # this appears above the chat_input() element.

Even if I wrap this code in a container, any content ends up inside the container. Does anyone know how to fix this?

2

Hi @3XL_Tee

It may be possible to tinker with the CSS and adjust the layout and position of the container. The trick is to figure out the name of the CSS element then define this and the desired property.

See this related forum post:

And a tutorial video showing how:

Hope this helps!

3 Likes
3

Here’s one way to do it using streamlit extras

import streamlit as st
from streamlit_extras.stylable_container import stylable_container

if "messages" not in st.session_state:
    st.session_state["messages"] = []


def generate_response(prompt):
    return f"This is a response to: {prompt}", 0, 0, 0


for message in st.session_state["messages"][1:]:
    with st.chat_message(message["role"]):
        st.markdown(message["content"])

if prompt := st.chat_input("Type your message..."):
    st.session_state["messages"].append({"role": "user", "content": prompt})
    st.chat_message("user").write(prompt)

    with st.spinner("Thinking..."):
        (
            full_response,
            total_tokens,
            prompt_tokens,
            completion_tokens,
        ) = generate_response(prompt)

    st.chat_message("assistant").write(full_response)
    st.session_state["messages"].append({"role": "assistant", "content": full_response})

with stylable_container(
    key="bottom_content",
    css_styles="""
        {
            position: fixed;
            bottom: 50px;
        }
        """,
):
    st.markdown("Some content")  # this appears above the chat_input() element.

st.markdown(
    """
    <style>
        .stChatFloatingInputContainer {
            bottom: 20px;
            background-color: rgba(0, 0, 0, 0)
        }
    </style>
    """,
    unsafe_allow_html=True,
)
4

Hi,
Is this still working? Im trying it out, exactly the same code, and I cannot see anything below the chat window.

5

One easy way to get something similar now (as of streamlit 1.31) is to put st.chat_input inside of a container, and then it gets placed inline, rather than at the bottom of the screen.

If you still want it at the bottom, and this example doesn’t work, it will probably take some work to inspect the code and see what classes are now used with st.chat_input.

2 Likes
6

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.