Streamlit columns at the bottom of page with chat input

Using Streamlit
,
1

How to define streamlit columns at the bottom of the page ,

col1, col2, = st.columns(2,vertical_alignment="bottom")
# Text input
with col1:
    user_input = st.chat_input("Type your message here...")
with col2:
    # Voice input button
    if st.button("🎤"):
        filename = "output.wav"
        record_audio(filename)
        transcription = transcribe_audio(filename)
        st.session_state.voice_input = transcription

        st.write("Transcription: ", transcription)

when in try the above code , it renders at the top of the page instead of bottom ,
if i am doing any thing wrong let me know modify to keep it at the bottom of the page

2

You would need to access st._bottom, which is where st.chat_input is created by default.

image
image1003×647 17.8 KB

import streamlit as st

## This will go in the main area
st.title("My App")
st.image("https://placehold.co/600x200", use_column_width=True)

## This will go in the bottom area
with st._bottom:
    cols = st.columns(2)
    with cols[1]:
        user_input = st.chat_input("Hello!")

    with cols[0]:
        if user_input:
            st.write(f":rainbow-background[**{user_input.upper()}**]")