Place Content Beneath st.chat_input() Element

[3XL_Tee]

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?

[dataprofessor]

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:

CSS hacks

Hello, I need a tutorial about CSS hacking for Streamlit. Could you help? Thanks, Michel I would like to customize the appearance of a ST app. It is mainly about reducing space between rows of widgets. No idea where to start. I know almost nothing about CSS, styles and how to use them with ST. For me this is almost as clear as Chinese: styl = f""" <style> .reportview-container .main .block-container{{ {max_width_str} padding-top: {padding_top}rem; padding-right: {padding_right}…

And a tutorial video showing how:

How to apply custom CSS styles in Streamlit apps

Hope this helps!

[blackary]

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,
)

[nika_gajda]

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

[blackary]

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.