Split Screen - Dashboard and Chatbot

[Praful]

I aim to use Dashboard on the left & Chatbot on the right, I wanna make sure they are split-screen view and one can close the dashboard side just like we do sidebars. I am currently using this approach but looking for a better solution.

[wgong27514]

up-Vote this feature.
I am looking for something similar, but one difference: how to split the main screen into 2?
One for chat, another for chart.

@Praful a possible workaround for you but may not be so nice: put chat in the sidebar, dashboard in main screenshot? One would wish sidebar is resizeable

[kishor1]

you can split the screen into 2 columns, say Col1 and Col2. Then display Chart in Col1 and Chatbot in Col2. You can even decide what percentage of the page-width to be assigned to Chart and rest will go to chatbot. Here is an example for you.

import streamlit as st

Custom CSS for layout

st.markdown(“”"

.reportview-container .main .block-container { max-width: 1000px; padding-top: 2rem; padding-right: 1rem; padding-left: 1rem; padding-bottom: 2rem; } .column { float: left; width: 50%; padding: 10px; transition: width 0.3s; } .hidden { width: 0; padding: 0; overflow: hidden; }

“”", unsafe_allow_html=True)

Main content area

col1, col2 = st.columns(2)

with col1:
st.markdown(‘

’, unsafe_allow_html=True)
st.header(“Dashboard”)
st.line_chart({“data”: [1, 5, 2, 6, 2, 1]})
st.write(“More dashboard content can go here”)
st.markdown(‘

’, unsafe_allow_html=True)

with col2:
st.markdown(‘

’, unsafe_allow_html=True)
st.header(“AI Chatbot”)
st.write(“ Welcome! How can I assist you today?”)
user_input = st.text_input(“Ask your question:”)
if user_input:
st.write(f"You asked: {user_input}")
st.write(“AI response would go here.”)
st.markdown(‘

’, unsafe_allow_html=True)