Your app is having trouble loading the streamlit_chat.streamlit_chat component.

[aiakubovich]

Hi. I created an app with streamlit_chat, and it works fine both locally and as a Docker container. But it generates the following error when I deploy it on Azure App Service: 

Your app is having trouble loading the streamlit_chat.streamlit_chat component.
(The app is attempting to load the component from ****, and hasn't received its "streamlit
" message.)

screenshot:

relevant code:

import os
import streamlit as st
from streamlit_chat import message
import langchain
import requests
import json
from datetime import datetime, timedelta
import traceback
import pickle
import faiss
import warnings
from abc import abstractmethod
from pathlib import Path
from typing import Any, Callable, Dict, List, Optional, Tuple, Union
from pydantic import Extra, Field, root_valida

def Page1():
    qa  , qa2  = load_chain()
    if "chat_history" not in st.session_state:
        st.session_state["chat_history"] = []
    chat_history = st.session_state["chat_history"]
    
    if "generated_chat" not in st.session_state:
        st.session_state["generated_chat"] = []
    if "past_chat" not in st.session_state:
        st.session_state["past_chat"] = []
    user_input = st.text_input("Please ask a question:",  key="input_chat")
    if user_input:
        word_count = 0
        for conversation in chat_history:
            for text in conversation:
                words = text.split()
                word_count += len(words)
        if word_count * 1.5 > 2000:
            while word_count * 1.5 > 2000:
                st.session_state["chat_history"].pop(0)
                word_count = sum(len(text.split()) for conversation in st.session_state["chat_history"] for text in conversation)
            chat_history = st.session_state["chat_history"]
        
        utc_time = datetime.utcnow()
        offset = timedelta(hours=3, minutes=30)
        local_time = utc_time + offset
        formatted_time = local_time.strftime("%Y-%m-%d %H:%M:%S")
        
        try:
            result = qa({"question": user_input, "chat_history": chat_history})
        except Exception as e:
            send_discord_message_errors(f"{formatted_time} An error occurred with page1: {str(e)} / Traceback: {traceback.format_exc()}")
        
        send_discord_message(f"{formatted_time} Successful Request for page1.")
        
        output = result["answer"]
        chat_history.append((user_input, output))
        st.session_state.past_chat.append(user_input)
        st.session_state.generated_chat.append(output)
    if st.session_state["generated_chat"]:
        for i in range(len(st.session_state["generated_chat"]) - 1, -1, -1):
            message(st.session_state["generated_chat"][i], key=str(i)+"_chat") #avatar_style="bottts"
            message(st.session_state["past_chat"][i], is_user=True, key=str(i) + "_user_chat")

def Page2():
    qa , qa2  = load_chain()
    if "chat_history2" not in st.session_state:
        st.session_state["chat_history2"] = []
    chat_history2 = st.session_state["chat_history2"]
    
    if "generated_history" not in st.session_state:
        st.session_state["generated_history"] = []
    if "past_history" not in st.session_state:
        st.session_state["past_history"] = []
    user_input = st.text_input("Please ask a question:", key="input_history")
    if user_input:
        word_count = 0
        for conversation in chat_history2:
            for text in conversation:
                words = text.split()
                word_count += len(words)
        if word_count * 1.5 > 2000:
            while word_count * 1.5 > 2000:
                st.session_state["chat_history2"].pop(0)
                word_count = sum(len(text.split()) for conversation in st.session_state["chat_history2"] for text in conversation)
            chat_history2 = st.session_state["chat_history2"]
            
        utc_time = datetime.utcnow()
        offset = timedelta(hours=3, minutes=30)
        local_time = utc_time + offset
        formatted_time = local_time.strftime("%Y-%m-%d %H:%M:%S")
        
        try:
            result = qa2({"question": user_input, "chat_history": chat_history2})
        except Exception as e:
            send_discord_message_errors(f"{formatted_time} An error occurred with page2: {str(e)} / Traceback: {traceback.format_exc()}")
        
        send_discord_message(f"{formatted_time} Successful Request for page2.")
        
        output = result["answer"]
        chat_history2.append((user_input, output))
        st.session_state.past_history.append(user_input)
        st.session_state.generated_history.append(output)
    if st.session_state["generated_history"]:
        for i in range(len(st.session_state["generated_history"]) - 1, -1, -1):
            message(st.session_state["generated_history"][i], key=str(i)+"_history")
            message(st.session_state["past_history"][i], is_user=True, key=str(i) + "_user_history")

# From here down is all the StreamLit UI.
st.set_page_config(page_title="Traders Chatbot", page_icon=":robot:")
app_mode = st.sidebar.selectbox("`Choose your person:`", ["Page1", "Page2"])


if app_mode == "Page1":
    st.sidebar.image('page1.jpg', width=200)
    try:
        Page1()
    except Exception as e:
        st.write("Something went wrong. Please refresh the page clear the caches and try again.",e)
else:
    st.sidebar.image('page2.jpg', width=200)
    try:
        Page2()
    except Exception as e:
        st.write("Something went wrong. Please refresh the page clear the caches and try again.",e)

I found the same error with another streamlit component:
https://discuss.streamlit.io/t/the-app-is-attempting-to-load-the-component-from-and-hasnt-received-its-streamlit-message/36968/10
and it looks like a problem that could be solved with a tuning proxy, but I have no idea how exactly it could be done.

[hfinck]

Yes, the same issue here with another application. Haven't pinned down the issue yet.

[aiakubovich]

My app is in Azure environment and I was able to figure out that it happened because apps run multiple replicas of the same app, and I had to configure sticky routing between a browser session and a serving container. This is because Streamlit uses WebSocket connections for rendering the app, but it uses an HTTP connection for the file uploader widget. For the app to work correctly, both WebSocket and HTTP connections must be established with the same container instance. To fix those issues, I made some modifications to the app settings. I specified CORS to allow all origins and also turned on the ARR affinity configuration.

[dunivlorraine]

Hi! Same error with a standalone Streamlit app.

[syeminpark]

me too. what is the solution?????

[syeminpark]

meanwhile, use this life saver: https://github.com/undo76/st-chat-message