[Python] My scrollbar glitches as new chat is streamed from LLM in streamlit

I am creating a streamLit chat application that helps communicate with model similar to chat gpt. I am trying to stream the response from the LLM. but whenever the response is streamed, the chat glitches and jerks to the top sometimes. I noticed that this usually happens when I am using my Linux system than my Windows. Anybody have any advice on what to do. Much appreciated.

def general_chat(user_input):

response_placeholder = st.empty()

streamed_response = ""
try:
blocked_topics = "\n".join([f"Do not answer any questions about: {keyword}" for keyword in key_data])

history_context = "\n".join(f"{chat['role']}: {chat['message']}" for chat in st.session_state.chat_history)

prompt_input = (
f"{history_context}\n"
f"Instructions:\n"
f"{blocked_topics}\n" # Explicitly define what is off-limits
f"User: {user_input}\n"
f"Assistant:"
)

for chunk in llm.stream(prompt_input): # Adjust to your LLM's streaming API
streamed_response += chunk
response_placeholder.write(streamed_response)
time.sleep(0.1)

st.session_state.chat_history.append({"role": "assistant", "message": streamed_response.strip()})
except Exception as e:
st.session_state.chat_history.append({"role": "assistant", "message": "Server busy. Please try again later."})
logger.info(str(e))


The above is the function which helps get the response from the LLM.

def chat_page():
"""Render the chat page."""
st.markdown(
"""
<style>
.st-emotion-cache-1c7y2kd {
flex-direction: row-reverse;
text-align: right;
}
</style>
""",
unsafe_allow_html=True,
)
# hide_streamlit_toolbar()
col1, col2 = st.columns([6, 2])
with col1:
st.subheader('ThinkBot')
st.write('Welcome to ThinkBot! I am an AI Chatbot. Choose "General" for general inquiries or '
'select a specific project for project-related questions.')


# Initialize chat history in session state if not present
if 'chat_history' not in st.session_state:
st.session_state.chat_history = []
st.session_state.chat_history.append({"role": "assistant", "message": "How can I help you?"})
# Display chat history
# Display chat history with alignment
bot_image = image_to_base64("images/chat_profile-bot.png")
me_image = image_to_base64("images/chat_profile-me.png")
for idx, chat in enumerate(st.session_state.chat_history):
message_key = f"{chat['role']}_{idx}" # Unique key based on role and index
if chat["role"] == "user":
# Use st.chat_message for user message
with st.chat_message("user",avatar="images/chat_profile-me.png"):
st.write(chat['message'])
else:
# Use st.chat_message for bot message
with st.chat_message("assistant", avatar="images/chat_profile-bot.png"):
st.write(chat['message'])
# Collect user input
if user_input := st.chat_input(placeholder="Your Message"):
st.session_state.chat_history.append({"role": "user", "message": user_input})
st.session_state.process_input = True
st.rerun()
# Check if we need to process the input
if st.session_state.get("process_input"):
with st.spinner('Processing...'):
general_chat(st.session_state.chat_history[-1]["message"])
st.session_state.process_input = False
st.rerun()


The function chat_page() helps create the page.

A few methods I have already tried are:

1. 
   streamlit_chat
   
   
2. 
   Stopping automatic scroll using
   
   .stAppScrollToBottomContainer { overflow-anchor: none !important; }
   

Nothing has worked so far.

Continue reading...