How to make suggestions clickable as input to chat_input?

Using Streamlit
1

I am using the chat_input and chat_message functionality to create a chatbot. I have some suggestions in the sidebar as markdown. I was wondering, how I could make the suggestions clickable, so that they would populate the chat_input on click, and it wouldn’t look weird having each text wrapped as a button or something.

Screenshot from 2023-09-15 14-02-11
Screenshot from 2023-09-15 14-02-111232×609 70.9 KB

u

2

Hi @Tomaz_Bratanic

For each of the suggestion, you may assign it to the st.radio widget if you want only 1 to be selected or to st.checkbox in order to allow multiple selections. You could also look into using the component streamlit-pills as well.

Links to these as follows:

Hope this is helpful!

1 Like
3

Thanks for the suggestions. I’m now using streamlit-pills to give suggestions for the chatbot but I have an issue, once you click on a suggestion it remains selected in the next chat loop and then the chatbot keeps responding the same question. I would need to reset the pills widget then. I usually can do this with other widgets by defining an empty container like


empty_container = st.empty()

empty_container.selectbox()

... do stuff

#Reset selectbox
empty_container.selectbox()

How could I do this with pills or another way to deselect the clicked pill?

4

Hi @Odrec

st.empty() would allow to reset the output display as for the value of variable using streamlit-pill we may have to try another way. Could you try assigning the values from streamlit-pill widget to a session state variable and use a callback function that resets the variable using the streamlit-pill widget to its default state once it is selected.

Hope this helps!

5

I tried something similar with setting the index on a session variable to None but it didn’t work. So I tried setting the list of query options in a session variable and each time the user chooses one option it is eliminated from the list and the pills widget is recreated. That’s the only way I could make it work.

st.session_state.pills_index = None

predefined_prompt_selected = stp.pills("Query suggestions:", st.session_state.suggestions_list,
                                               st.session_state.suggestions_icons, index=st.session_state.pills_index)

and then I do

# Get rid of the suggestion now that it was chosen
if predefined_prompt_selected:
     index_to_eliminate = st.session_state.suggestions_list.index(predefined_prompt_selected)
     st.session_state.suggestions_list.pop(index_to_eliminate)
     st.session_state.suggestions_icons.pop(index_to_eliminate)
1 Like
6

Nice, thanks for sharing a workaround.

7

Hey, how did you populate the st.chat_input()?

8

If the user chose a predefined prompt then I just use that as user input

            if predefined_prompt_selected:
                user_input = predefined_prompt_selected
            else:
                user_input = st.session_state.question
            add_input_message(user_input, role='user')

then, inside the function

st.chat_message(role).write(user_input)
9

This solution is not working for me. It removes the selected option from the session_state but doesn’t refresh the pill component.

I noticed that you have “stp” before calling pills. Is that part of a container or something like that?

10

stp is just my abbreviation of streamlit_pills

import streamlit_pills as stp

You need to rerun the app to reflect the changes in the pills. So after deleting the option do

st.rerun()

11

@Odrec @dataprofessor
I got the overall idea but how can I pass the selected predefined_prompt_selected to st.chat_input() as there is no value parameter to it? Please help me with this as soon as possible.

12

Hi @Harshk97

You can check out this related post for ideas:

13

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