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”)
happens with tabs! Any help here would be appreciated
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)