Ghost double text bug

Using Streamlit
1

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.

2 Likes
2

For clarity, here’s what this ghost double text looks like:

image
image1395×865 51.8 KB

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.

3

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.

1 Like
4

I use the st.stream_write() and by placing an st.empty() after the st.stream_write() worked for me.

# Get the assistant's response
with st.chat_message("assistant"):
    msg = st.write_stream(get_response(prompt, current_chat_hist))
    st.empty()  # fixes the ghosting bug...
1 Like
5

Actually I think it has to do with the spinner. If I remove the spinner, then I don’t get any ghosting. As soon as I add the spinner, I get ghosting.

with st.spinner('Summarizing chat...'):
        agent.summarize_history()

If I leave the spinner in and add an empty after every message, there is no ghosting:

for msg in chat_history:
    role = msg["role"]
    with st.chat_message(role):
        st.markdown(msg["content"])
        st.empty()
1 Like
6

I recently wrote another reply to this type of thing with an explanation of what that ghost is exactly. There’s also another way to use st.empty() to make sure things clear out as intended: Streamlit Spinner and Chat Message odd interaction - #2 by mathcatsand