Chat input layout adjustments

[Aravind1]

Hi, I need help with adjusting the layout of this chatbot I’m making using streamlit. From another post I saw here, they fixed some issues (in regards to using tabs and containers) by using code like this:

with st.container():
st.chat_input(key=‘content’, on_submit=chat_content)
button_b_pos = “3rem”
button_css = float_css_helper(width=“2.2rem”, bottom=button_b_pos, transition=0)
float_parent(css=button_css)

The problem with the chat input is that its fixed at the bottom but when i scroll up and down the chat its always there at the bottom no matter what. All these issues arise because I’m using tabs/containers but I’ve noticed just normal streamlit code with no tabs , it seems to be much easier.

Can someone help with this? The screenshots shows how it looks like

[Aravind1]

[Encrypt]

Instead of using default chat_input you could create your own component using text_input and form_submit_button.

prompt_placeholder = st.form("chat-form")

with prompt_placeholder:
    st.markdown("**Chat**")
    cols = st.columns((6, 1))
    cols[0].text_input(
        "Chat",
        value="Hello bot",
        label_visibility="collapsed",
        key="human_prompt",
    )
    cols[1].form_submit_button(
        "Submit", 
        type="primary", 
        on_click=on_click_callback, 
    )

[Aravind1]

So I tried your solution and it looks like this (in the screenshot)

As you can see its at the top now when I want it at the bottom and I also want the footer to always be constantly fixed. (Its always at the bottom but when I scroll upwards I dont want to keep seeing the footer at the bottom of the current page)

Maybe I’ll just share the code related to these aspects:

For ChatBot code:

with tab4:
st.title(“Feedback Insight Chat”)
col1, = st.columns(1)
with col1:
with st.container(border=True):
if ‘messages’ not in st.session_state:
st.session_state.messages =

            with st.container():
                st.chat_input(key='content', on_submit=chat_content) 
                button_b_pos = "3rem"
                button_css = float_css_helper(width="2.2rem", bottom=button_b_pos, transition=0)
                float_parent(css=button_css)
                
            for message in st.session_state.messages:
                with st.chat_message(message["role"]):
                    st.markdown(message["content"])
            prompt = st.session_state.get('content')
            if prompt:
                st.session_state.messages.append({"role": "user", "content": prompt})

For the footer markdown:

footer {
position: fixed;
bottom: 0;
width: 88.05%;
background-color: #1b1b1b;
color: #ffffff;
text-align: center;
padding: 10px 0;
font-weight: bold;
}

st.markdown(
“”"

Powered by AI

“”",
unsafe_allow_html=True,
)