Fix thumbsup/down buttons

[starskiin3d]

Summary

I have implemented thumbs-up/down buttons, in my chat bot, they are positioned well but I have a visual bug, once I am waiting for bot to respond the buttons change positions to be placed one below another for the time that boot is needed to respond, then they align properly again.

Code snippet:

 if prompt := st.chat_input("State your question"):
        st.session_state.messages.append({"role": "user", "content": prompt})
        with st.chat_message("user"):
            st.markdown(prompt)
        result = full_result({"question": prompt, "chat_history": [
                    (message["role"], message["content"]) for message in st.session_state.messages]})

        with st.chat_message("assistant"):
            final_response = result["answer"]
            st.markdown(final_response )

        st.session_state.messages.append(
            {"role": "assistant", "content": final_response})

        col1,col2,col3,col4 = st.columns([3,3,0.5,0.5])
        with col3:
                    if st.button(":thumbsup:"):
                        Print("Like")
        with col4:
                    if st.button(":thumbsdown:"):
                        Print("Dislike")

Expected behavior:

The buttons should not be displayed in user bubble chat, only bot one, and they should not change their fixed places.

Actual behavior:

The buttons change positions and are shortly displayed in user chat while bot is loading response.

Requirements file

[tonykip]

You can try using st.empty() to reserve the space for the bot’s response.

if prompt := st.chat_input("State your question"):
        st.session_state.messages.append({"role": "user", "content": prompt})
        with st.chat_message("user"):
            st.markdown(prompt)

        # Reserve a spot for the bot's response
        placeholder = st.empty()  

        result = full_result({"question": prompt, "chat_history": [
                    (message["role"], message["content"]) for message in st.session_state.messages]})

        with placeholder.chat_message("assistant"):
            final_response = result["answer"]
            st.markdown(final_response )

        st.session_state.messages.append(
            {"role": "assistant", "content": final_response})

        col1,col2,col3,col4 = st.columns([3,3,0.5,0.5])
        with col3:
                    if st.button(":thumbsup:"):
                        Print("Like")
        with col4:
                    if st.button(":thumbsdown:"):
                        Print("Dislike")

[starskiin3d]

That did not work but this is how i resolved it

 with placeholder.chat_message("assistant"):
            final_response = result["answer"]
            st.markdown(final_response )
            col1,col2,col3,col4 = st.columns([3,3,0.5,0.5])
            with col3:
                    if st.button(":thumbsup:"):
                        Print("Like")
            with col4:
                    if st.button(":thumbsdown:"):
                        Print("Dislike")
        st.session_state.messages.append(
            {"role": "assistant", "content": final_response})

     

The likes are not at top of bot response, so it does not cause any issues, it would be good thing to have solution for placing it at bottom also, but for now this works.

[tonykip]

Awesome! Am glad you got it working.