St.chat_input rendered at top of page, which is not the desired option

Using Streamlit
1

Running local in Chrome on my macbook.

Question? when I run a very simple streamlit app with just a st.chat_input, the chat_input is rendered at the bottom of the page, correctly. However, when I add (two) columns to the app, it renders the chat_input at the top of the left column, which is not the desired outcome. I tried a container approach, which did not resolve the issue? Help?

import streamlit as st

st.title(“Chat with Links”)

col1, col2 = st.columns([2, 2]) # Provide the ‘spec’ argument here

with col1:
user_input = st.chat_input(“Type your message here…”)
if user_input:
st.write(f"You: {user_input}") # For demonstration. You would process the input here.

with col2:
st.subheader(“Example Links”)
st.markdown(“Example Website 2”)

2

happens with tabs! Any help here would be appreciated

3

Here you go:

import streamlit as st
import traceback

TAB_NAMES = [“Tab1”, “Tab2”, “Tab3”, “Tab4”]
USER, ASSISTANT = “user”, “assistant”

st.set_page_config(page_title=“Tabs with Chat”, layout=“wide”)

def inject_global_styles():
st.markdown(
“”"

#MainMenu, header, div[data-testid=“stToolbar”], div.stProgress > div {
visibility: hidden;
}
[data-baseweb=“tab”] {
margin-right: 20px !important;
padding: 10px 20px !important;
}
[data-baseweb=“tab”] > div {
font-size: 20px !important;
}
div[data-testid=“stChatInput”] {
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 100% !important;
z-index: 9999;
background: white;
padding: 10px 0;
border-top: 2px solid #ccc;
}
div[data-testid=“stChatInput”] > div {
max-width: 50%;
margin: 0 auto;
border-radius: 3px;
border: 3px solid #0F9D58 !important;
text-align: left;
}

“”",
unsafe_allow_html=True
)
try:

inject_global_styles()

# Tabs
tabs = st.tabs(TAB_NAMES)
if "chat_histories" not in st.session_state:
    st.session_state.chat_histories = {tab: [] for tab in TAB_NAMES}

# Chat per tab
for tab_name, tab in zip(TAB_NAMES, tabs):
    with tab:
        chat_placeholder = st.container()

        for msg in st.session_state.chat_histories[tab_name]:
            with st.chat_message(msg["role"]):
                st.markdown(msg["content"], unsafe_allow_html=True)

        if prompt := st.chat_input(f"{tab_name} – Type something and I'll echo it"):
            st.session_state.chat_histories[tab_name].append({"role": USER, "content": prompt})
            with chat_placeholder:
                with st.chat_message(USER):
                    st.markdown(f'<div style="text-align: left;">{prompt}</div>', unsafe_allow_html=True)

            echo = f"You said: {prompt}"
            st.session_state.chat_histories[tab_name].append({"role": ASSISTANT, "content": echo})
            with chat_placeholder:
                with st.chat_message(ASSISTANT):
                    st.markdown(f'<div style="text-align: left;">{echo}</div>', unsafe_allow_html=True)

except Exception as e:
st.error(f"Error in main app: {traceback.format_exc()}")

Spacer at the bottom

st.markdown(“

”, unsafe_allow_html=True)

4

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