st-chat
st-chat copied to clipboard
AI-Yash
Scrol bar
Hello!
I really enjoyed using your package, it made the display of text so much fun!
Just wondering, do you have plans to add a scroll bar to long conversations?
Hello, any updates on this? It would be awesome for me :) Thanks for the project so far!
Would also love to see a scrollable container for all the chat components. I've tried bringing in a bootstrap card via the streamlit markdown unsuccessfully.
You can add a scrollbar with some tricks :) My solution is to add some custom css. I think this package will not provide a better implication since it only creates a component for a single message and not for a real chat window including messages.
The main idea is to fix the highet of the container which contains all messages. This works rather good, but now you have the issue that new messages will be displayed at the bottom but you might not see them since you have to scroll down. In order to "automatically" scroll down, I am using the column-reverse feature. Which basically only changes that the first entry in the container is displayed at the bottom (reversed). When we now also reverse the order of the messages, it looks like that the newest message is displayed at the bottom. The main downside to this approach is, that we cannot just add a new message, because the new message will be shown at the top of all messages and not at the bottom, which would be the correct position. My solution for this is to clear the container and always wright the complete history of messages again with the reversed order.
Importing custom css can be done like this:
with open("style.css", "r") as f: st.markdown(f"<style>{f.read()}</style)", unsafe_allow_html=True)
the file style.css:
#root > div:nth-child(1) > div.withScreencast > div > div > div > section.main.css-uf99v8.egzxvld5 > div.block-container.css-1y4p8pa.egzxvld4 > div:nth-child(1) > div > div:nth-child(3) > div{ overflow: auto; display: flex; max-height: 500px; width: 710px ; flex-direction: column-reverse; /*background: aqua;*/ }
Right now i have this super specific selecter at the beginning, there is probably a much better solution availabe for somethin like this. I am missing a feature to give a container a ID HTML attribute...
I hope this might help you.
