Combining Container and Chat

Using Streamlit
, , , ,
3

Hi @pierrelouisbescond

I am the author of the package @Odrec recommended. His comment caught my attention and since you provided your code, I thought I would try my hand at a quick solution.

I am happy to say that I was able to do it by adding only 3 lines to your code and changing one line!

...
from datetime import datetime
+from streamlit_float import *

# If there is at least one message in the chat, we display the options
if len(st.session_state["messages"]) > 0:

+   action_buttons_container = st.container()
+   action_buttons_container.float("bottom: 6.8rem;")
    
    # We set the space between the icons thanks to a share of 100
    cols_dimensions = [7, 19.4, 19.3, 9, 8.6, 8.6, 28.1]
-   col0, col1, col2, col3, col4, col5, col6 = st.columns(cols_dimensions)
+   col0, col1, col2, col3, col4, col5, col6 = action_buttons_container.columns(cols_dimensions)

One nitpicky thing for me is the spacing between the chat area and the buttons and my solution to that would be to add a little css to increase the bottom margin of the chat area. To make the spacing better I would change:

-   action_buttons_container.float("bottom: 6.8rem;")
+   action_buttons_container.float("bottom: 6.9rem;background-color: var(--default-backgroundColor); padding-top: 1rem;")

and add an empty st.write after the chat messages (not the most elegant but is simpler than adding more css). Right before the if statement is where I put it.


+st.write("")
# If there is at least one message in the chat, we display the options
if len(st.session_state["messages"]) > 0:
3 Likes