When using st.chat_input inside st.columns(), chat box moves up. How to keep it stuck to the bottom?

[Manas_Swami]

Hi,
With the new version of Streamlit, we can put st.chat_input() inside st.columns(), st.containers(), st.tabs() etc.

One issue I am facing is this -
Scenario #1: If i use st.chat_input() without columns -

Code:

import streamlit as st
st.set_page_config(layout="wide")


st.write("Without columns")
st.chat_input("Something")

Screenshot:

The Chat box sticks to the bottom!

Scenario #2: If i use st.chat_input() with columns -

Code:

import streamlit as st
st.set_page_config(layout="wide")

cols = st.columns([20, 60, 20])

with cols[0]:
    st.write("Column 0")

with cols[1]:
    st.chat_input("Something")


with cols[2]:
    st.write("Column 2")

Screenshot:

The Chat box comes to the top of the column!
This looks bad.
How do I get it to stay at the bottom?
Is there any param I am not seeing, or any solution to this? Would help a lot.

Thanks in advance

[user11]

Encountering a similar roadblock with Streamlit version. Your post perfectly describes my situation. Any help or suggestions on how to tackle this issue would be fantastic.
Thanks!

[mathcatsand]

If you user st.chat_input in the main body of the app, it will pin to the bottom. If you use it inside any kind of container, it will be inline like any other element. This is expected. A parameter to float the chat input within a container has not been implemented yet.

In the mean time, use a fixed-height container above your chat input to hold messages.

with st.container():
    history = st.container(height=400)
    prompt = st.chat_input("Write something")

[Manas_Swami]

Thanks for the quick reply. This is not an ideal solution, because when we type in a questions, the box still stays up while the answer is being calculated, doesn’t look good. But this is a good temporary workaround, thanks a lot!

[mathcatsand]

You can adjust container borders with the border parameter if that helps at all. (I’m not sure exactly what your layout is, so just throwing some general hints out.)

[lkdd-ao]

I’m not sure about your specific usage case, so I’m using streamlit float to solve the st.chat_input with st.columns as the bottom, hoping it will be helpful to you.

import streamlit as st
from streamlit_float import *

float_init(theme=True, include_unstable_primary=False)

def chat_content():
    st.session_state['contents'].append(st.session_state.content)

if 'contents' not in st.session_state:
    st.session_state['contents'] = []
    border = False
else:
    border = True

col1, col2 = st.columns([1,2])
with col1:
    with st.container(border=True):
        st.write('Hello streamlit')

with col2:
    with st.container(border=border):
        with st.container():
            st.chat_input(key='content', on_submit=chat_content) 
            button_b_pos = "0rem"
            button_css = float_css_helper(width="2.2rem", bottom=button_b_pos, transition=0)
            float_parent(css=button_css)
        if content:=st.session_state.content:
            with st.chat_message(name='robot'):
                for c in st.session_state.contents:
                    st.write(c)

[Manas_Swami]

This is so helpful, and you code is bang-on!
Thanks a lot!