How to add copy icon in streamlit chat_message

🎈 Using Streamlit
1

how can I add copy icon, thumbsup & thumb down icons in streamlit chat_message component - just like Chat-GPT chat window?

Regards,
Ninad

2

Hey @Ninad_Jagtap,

If you display the message using st.code (rather than st.write), that will display a copy icon – I realize that’s not the most ideal solution (the font will be slightly different from regular text), but it’s probably the easiest way to implement this.

For thumbs up and thumbs down icons, Trubrics built an awesome component that you can use for this – check out their examples here.

thumbsandtext
thumbsandtext1452×430 19.2 KB

3

Thanks Caroline - both the suggestions worked. :slight_smile:

Appreciate quick response. Also thanks to @jeffkayne for the awesome component.

2 Likes
4

Just to complete the drawback of using st.code instead or st.write in chat_message is that the long string are not wrapped.

5

Also the text that resembles code will be highlighted, to add to OP question.

  1. Is there a way for regular text to be wrapped and displayed as text, and code to be displayed as code in single chat buble response, both having their own copy options as user would like to copy text or just code.
  2. If no to the 1, then is there a way to warp text in st.text as text and with no code highliting?
6

Hey @starmaks,

Unfortunately, there isn’t a built-in way to accomplish #1, but there is an open feature request for this enhancement here – please upvote it so our team can prioritize it accordingly.

For the second item, do you mean for st.code or for st.text?

1 Like