Ghost double text bug

There seems to be a bug in a certain specific situation that causes the same text to be rendered twice at the same time, once normally and once as a gradually fading away text. This happened in my chat app DocDocGo and it took me a while to narrow down the issue.

Here is a simple demo app I have created to illustrate the issue:

The code is available here

I havenโ€™t dug deep but my guess is that the issue may have something to do with the accounting of React keys to keep track of the identity of elements.

I have figured out a hacky fix for the issue, which is included in the code as a comment.

1 Like

For clarity, hereโ€™s what this ghost double text looks like:

My code (link to full repo in OP) only st.writes each message once. Inserting st.empty() before the st.writes fixes the issue. Obviously itโ€™s a hacky fix, but Iโ€™m hoping it can give the Streamlit devs a clue about the source of the issue.

The st.empty() trick doesnโ€™t seem to work in all cases.

I use st.write_stream() and the ghost double text stays visible as long as the write_stream lasts.