How to implement a three-column layout in chat_input

Using Streamlit
1

:rotating_light: Before clicking “Create Topic”, please make sure your post includes the following information (otherwise, the post will be locked). :rotating_light:

  1. Are you running your app locally or is it deployed?
  2. If your app is deployed:
    a. Is it deployed on Community Cloud or another hosting platform?
    b. Share the link to the public deployed app.
  3. Share the link to your app’s public GitHub repository (including a requirements file).
  4. Share the full text of the error message (not a screenshot).
  5. Share the Streamlit and Python versions.

I have completed the initial architecture of the project and successfully deployed it. However, now I need to implement placing a Word editor on the right side of the menu bar and on the left side of the conversation section. I am aware that the current version of Streamlit does not support placing chat_input inside columns or expanders. I would like to know how to put chat_input into a three-column layout.

This is the current outcome; I am forced to place the Word editor section above the chat_input.

无标题
无标题2448×1242 206 KB

And this is the desired outcome.

葛丽项目示意图
葛丽项目示意图1536×960 58.8 KB

2

Hi @erosion_wind,

Thanks for posting!

Unfortunately, at the moment, st.chat_input can only be used once per app page and inside the main area of the app. It cannot be used in the sidebar, columns, expanders, forms or tabs. We do however plan to support this in the future.

3

I appreciate your response! I saw in other answers that the update for this is expected around February 2024. However, I am currently using Streamlit in a project, and I want to know if, in the current state, it is possible to achieve this layout using JavaScript?Could you please tell me how to do it, or provide a guide or tutorial?thanks again！

4

Hey @erosion_wind,

Just wanted to update 1.31.0 is officially out, allowing much more flexibility for chat layouts! You can put chat features in containers, the side bar, tabs, expanders, the bottom of the page and more.

Check out the docs and feel free to share your updated app or any questions! :smiling_face:

1 Like
5

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