Icons not appearing in Azure Webapp
Hello,
I am using the default azure webapp for my chatbot, but all of a sudden all the icons (i.e. share button icon, chat history icon, new chat icon, clear chat icon) disappeared on their own without doing anything to the deployment. What might be the issue here?
The screenshot is attached below for reference.
Azure OpenAI Service
-
Laxman Reddy Revuri • 2,235 Reputation points • Microsoft Vendor
2025-02-04T12:51:35.2366667+00:00 Hi @Amaaz Arshad
Thanks for the question. we're looking into this and will update you shortly. -
White Jason • 0 Reputation points
2025-02-04T13:00:27.32+00:00 Try clearing your browser cache or opening a web application in incognito mode.
-
Amaaz Arshad • 65 Reputation points
2025-02-04T13:16:40.73+00:00 @White Jason I tried it but it didn't work. I also tried to run it locally, still icons not appear. This issue has been happening since last week. Before that, icons were showing both in local and production environments.
-
Laxman Reddy Revuri • 2,235 Reputation points • Microsoft Vendor
2025-02-04T15:12:36.27+00:00 Hi @Amaaz Arshad
apologize for any inconvenience caused on this.
1.Could you kindly provide more details on how the icons are being loaded, including the URLs or any relevant configurations?
2.Have there been any recent changes to your Azure Web App configuration or code that might have affected the icon display?
3.Are you using a CDN to serve your icons, or are they hosted directly within your application? -
Amaaz Arshad • 65 Reputation points
2025-02-04T15:30:41.51+00:00 I am using the default code of this repo: https://github.com/microsoft/sample-app-aoai-chatGPT
I haven't changed anything related to web app configuration. Until last week, the icons where showing properly. But now all of a sudden, the icons are not showing and on console I can see these errors:
I have multiple chatbots web apps in my azure portal (all using the same default code). I deployed all the webapps through deploy button on azure AI studio, and this icon issue is happening in all chatbots since last week.
-
Laxman Reddy Revuri • 2,235 Reputation points • Microsoft Vendor
2025-02-05T03:01:49.2833333+00:00 Hi @Amaaz Arshad
Kindly ensure that the relevant environment variables (for clearing cache and chat history) are enabled in the Azure Web App settings via the portal. Additionally, please confirm that you have cleared your browser cache and cookies.
To resolve it permanently, the maintainers of the repository need to update the code or add a new CDN. Let us know if you need assistance applying the workaround.
https://github.com/microsoft/sample-app-aoai-chatGPT/issues/1249
references:
https://learn.microsoft.com/en-us/azure/ai-services/openai/how-to/use-web-app#modifying-the-application-user-interface -
Manas Mohanty (Quadrant Resource LLC) • 135 Reputation points • Microsoft Vendor
2025-02-05T07:06:43.7666667+00:00 Hi @Amaaz Arshad!
To add in above pointers, we also need also rotate keys in OpenAI and AI search and use it in environment variable and re-deploy the webapp from your Azure webapp to reflect the changes.
Here is step by step procedure.
- Enable the required environment variable (UI_SHOW_CHAT_HISTORY_BUTTON, etc) with Json editor as mentioned in the step.
- Acquire new OpenAI and AI search keys and modify them in environment variables.
- Re-deploy the webapp and test in another web browser or existing browser after clearing cache and cookie.
If the pointers worked, please let us know that so we can convert this comment to answer.
customizing-the-application-using-environment-variables
Thank you.
-
Amaaz Arshad • 65 Reputation points
2025-02-05T08:12:47.3533333+00:00 I tried your solution, but it didn't work. I don't think the issue is with the environment variables or clearing cache because one week ago icons were showing perfectly, and now all of a sudden icons are not loading, and I haven't made any changes that could trigger it because I have multiple chatbots deployed and this issue is happening in all of them. Could it be that it is the issue of the icon package that is used in the code of the chatbot i.e. fluentui/react-icons?
-
Manas Mohanty (Quadrant Resource LLC) • 135 Reputation points • Microsoft Vendor
2025-02-05T09:24:02.61+00:00 Hi @Amaaz Arshad!
If environment variables are already present, Re-deploying the webapp should update all underlying packages to latest version.
Thank you.
Sign in to comment