Two-column Chat with PDF interface

🎈 Using Streamlit
, , ,
1

I would like to create a chatpdf.com-like interface on Streamlit:

  • the left column should display the PDF (an HTML iframe would do)
  • the right column should contain a chatbot (with st.chat_input).

I tried a structure like the following:

import streamlit as st

st.set_page_config(layout="wide")

col1, col2 = st.columns(spec=2, gap="medium")

with col1:

    # display pdf, e.g. st.markdown(f'<iframe src="......." width=100% height="550"></iframe>', unsafe_allow_html=True)

with col2:

    # chatbot with st.chat_input

I am running into the following problems:

  • the chat input bar within the right column goes to the top instead of staying at the bottom as when I create a chatbot in a main area
  • new messages appear below the input bar, and when multiple messages are displayed, the user has to scroll down the browser window (not within the right column!), but this way, both the input bar in the right column, as well as the pdf displayed in the left column are no longer on screen!

On the contrary, I’d like the PDF in the left column to always be on screen. And I would like the input bar to always be at the bottom of the right column. I would like the messages to appear above the input bar in the right column, and to be able to scroll down through the messages within the right column, with the input bar and the displayed PDF always on screen and never moving.

I am also not sure how to make the PDF resize when the browser window is resized. Setting width=100% doesn’t seem to be enough, as it sometimes overlaps with the content of the right column.

Many thanks for your help!